diff --git a/.env.example b/.env.example
index af1b481f..920fe826 100644
--- a/.env.example
+++ b/.env.example
@@ -1,7 +1,11 @@
-POCKETBASE_URL=
-USERNAME=
-PASSWORD=
+SUPABASE_URL=
+SUPABASE_API_KEY=
 
 # The format:
 # SPOTIFY_SECRETS=clintId1:clientSecret1,clientId2:clientSecret2
-SPOTIFY_SECRETS=
\ No newline at end of file
+SPOTIFY_SECRETS=
+
+# 0 or 1
+# 0 = disable
+# 1 = enable
+ENABLE_UPDATE_CHECK=
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 8a480132..816c7b89 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -46,7 +46,7 @@ body:
     attributes:
       label: Spotube version
       description: In which version of Spotube did you encounter this bug?
-      placeholder: (e.g.) v2.7.1
+      placeholder: (e.g.) v3.0.0
   - type: dropdown
     attributes:
       label: Installation source
diff --git a/.github/workflows/spotube-publish-binary.yml b/.github/workflows/spotube-publish-binary.yml
index 31e262a6..93ded44c 100644
--- a/.github/workflows/spotube-publish-binary.yml
+++ b/.github/workflows/spotube-publish-binary.yml
@@ -4,7 +4,7 @@ on:
     inputs:
       version:
         description: Version to publish (x.x.x)
-        default: 2.7.1
+        default: 3.0.0
         required: true
       dry_run:
         description: Dry run
diff --git a/.github/workflows/spotube-release-binary.yml b/.github/workflows/spotube-release-binary.yml
index 2335b682..754dfb8d 100644
--- a/.github/workflows/spotube-release-binary.yml
+++ b/.github/workflows/spotube-release-binary.yml
@@ -4,7 +4,7 @@ on:
     inputs:
       version:
         description: Version to release (x.x.x)
-        default: 2.7.1
+        default: 3.0.0
         required: true
       channel:
         type: choice
@@ -14,12 +14,20 @@ on:
           - stable
           - nightly
         default: nightly
+      debug:
+        description: Debug on failed when channel is nightly
+        required: true
+        type: boolean
+        default: false
       dry_run:
         description: Dry run
         required: true
         type: boolean
         default: true
 
+env:
+  FLUTTER_VERSION: '3.10.0'
+
 jobs:
   windows:
     runs-on: windows-latest
@@ -28,6 +36,7 @@ jobs:
       - uses: subosito/flutter-action@v2.10.0
         with:
           cache: true
+          flutter-version: ${{ env.FLUTTER_VERSION  }}
 
       - name: Replace pubspec version and BUILD_VERSION Env (nightly)
         if: ${{ inputs.channel == 'nightly' }}
@@ -61,7 +70,7 @@ jobs:
         run: |
           flutter config --enable-windows-desktop
           flutter pub get
-          flutter pub run build_runner build --delete-conflicting-outputs
+          dart run build_runner build --delete-conflicting-outputs --enable-experiment=records,patterns
 
       - name: Build Windows Executable
         run: |
@@ -78,6 +87,12 @@ jobs:
           make choco
           mv dist/spotube.*.nupkg dist/Spotube-windows-x86_64.nupkg
 
+      - name: Debug With SSH When fails
+        if: ${{ failure() && inputs.debug && inputs.channel == 'nightly' }}
+        uses: mxschmitt/action-tmate@v3
+        with:
+          limit-access-to-actor: true
+
       - name: Upload Artifact
         uses: actions/upload-artifact@v3
         with:
@@ -91,6 +106,7 @@ jobs:
       - uses: subosito/flutter-action@v2.10.0
         with:
           cache: true
+          flutter-version: ${{ env.FLUTTER_VERSION  }}
 
       - name: Get current date
         id: date
@@ -99,7 +115,7 @@ jobs:
       - name: Install Dependencies
         run: |
           sudo apt-get update -y
-          sudo apt-get install -y tar clang cmake ninja-build pkg-config libgtk-3-dev make python3-pip python3-setuptools patchelf desktop-file-utils libgdk-pixbuf2.0-dev fakeroot strace fuse libgstreamer1.0-dev libgstreamer-plugins-base1.0-dev libunwind-dev locate patchelf libsecret-1-0 libjsoncpp25 libsecret-1-dev libjsoncpp-dev
+          sudo apt-get install -y tar clang cmake ninja-build pkg-config libgtk-3-dev make python3-pip python3-setuptools desktop-file-utils libgdk-pixbuf2.0-dev fakeroot strace fuse libunwind-dev locate patchelf gir1.2-appindicator3-0.1 libappindicator3-1 libappindicator3-dev libsecret-1-0 libjsoncpp1 libsecret-1-dev libjsoncpp-dev libnotify-bin libnotify-dev mpv libmpv-dev
 
       - name: Install AppImage Tool
         run: |
@@ -136,15 +152,15 @@ jobs:
         run: |
           flutter config --enable-linux-desktop
           flutter pub get
-          flutter pub run build_runner build --delete-conflicting-outputs
+          dart run build_runner build --delete-conflicting-outputs --enable-experiment=records,patterns
 
       - name: Build Linux Packages
         run: |
           dart pub global activate flutter_distributor
           alias dpkg-deb="dpkg-deb --Zxz"
+          flutter_distributor package --platform=linux --targets=deb
           flutter_distributor package --platform=linux --targets=appimage
           flutter_distributor package --platform=linux --targets=rpm
-          flutter_distributor package --platform=linux --targets=deb
 
       - name: Create tar.xz (stable)
         if: ${{ inputs.channel == 'stable' }}
@@ -161,18 +177,25 @@ jobs:
           mv dist/**/spotube-*-linux.rpm dist/Spotube-linux-x86_64.rpm
           mv dist/**/spotube-*-linux.AppImage dist/Spotube-linux-x86_64.AppImage
 
+      - name: Debug With SSH When fails
+        if: ${{ failure() && inputs.debug && inputs.channel == 'nightly' }}
+        uses: mxschmitt/action-tmate@v3
+        with:
+          limit-access-to-actor: true
+
       - uses: actions/upload-artifact@v3
         with:
           name: Spotube-Release-Binaries
           path: dist/
 
   android:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: subosito/flutter-action@v2.10.0
         with:
           cache: true
+          flutter-version: ${{ env.FLUTTER_VERSION  }}
 
       - name: Install Dependencies
         run: |
@@ -203,7 +226,7 @@ jobs:
       - name: Generate Secrets
         run: |
           flutter pub get
-          flutter pub run build_runner build --delete-conflicting-outputs
+          dart run build_runner build --delete-conflicting-outputs --enable-experiment=records,patterns
 
       - name: Sign Apk
         run: |
@@ -215,6 +238,12 @@ jobs:
           flutter build apk
           mv build/app/outputs/apk/release/app-release.apk build/Spotube-android-all-arch.apk
 
+      - name: Debug With SSH When fails
+        if: ${{ failure() && inputs.debug && inputs.channel == 'nightly' }}
+        uses: mxschmitt/action-tmate@v3
+        with:
+          limit-access-to-actor: true
+
       - uses: actions/upload-artifact@v3
         with:
           name: Spotube-Release-Binaries
@@ -228,6 +257,7 @@ jobs:
       - uses: subosito/flutter-action@v2.10.0
         with:
           cache: true
+          flutter-version: ${{ env.FLUTTER_VERSION  }}
 
       - name: Replace pubspec version and BUILD_VERSION Env (nightly)
         if: ${{ inputs.channel == 'nightly' }}
@@ -253,7 +283,8 @@ jobs:
       - name: Generate Secrets
         run: |
           flutter pub get
-          flutter pub run build_runner build --delete-conflicting-outputs
+          flutter pub remove media_kit_native_event_loop
+          dart run build_runner build --delete-conflicting-outputs --enable-experiment=records,patterns
 
       - name: Build Macos App
         run: |
@@ -265,16 +296,22 @@ jobs:
         run: |
           npm install -g appdmg
           mkdir -p build/${{ env.BUILD_VERSION }}
-          appdmg appdmg.json build/Spotube-macos-x86_64.dmg
+          appdmg appdmg.json build/Spotube-macos-universal.dmg
+
+      - name: Debug With SSH When fails
+        if: ${{ failure() && inputs.debug && inputs.channel == 'nightly' }}
+        uses: mxschmitt/action-tmate@v3
+        with:
+          limit-access-to-actor: true
 
       - uses: actions/upload-artifact@v3
         with:
           name: Spotube-Release-Binaries
           path: |
-            build/Spotube-macos-x86_64.dmg
+            build/Spotube-macos-universal.dmg
 
   upload:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     needs:
       - windows
       - linux
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 6c0bb0d8..3c8209ff 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -2,11 +2,25 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Flutter",
+      "name": "spotube",
       "type": "dart",
       "request": "launch",
-      "program": "${workspaceFolder}/lib/main.dart"
+      "program": "lib/main.dart"
     },
+    {
+      "name": "spotube (profile)",
+      "type": "dart",
+      "request": "launch",
+      "program": "lib/main.dart",
+      "flutterMode": "profile"
+    },
+    {
+      "name": "spotube (release)",
+      "type": "dart",
+      "request": "launch",
+      "program": "lib/main.dart",
+      "flutterMode": "release"
+    }
   ],
   "compounds": []
 }
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1b5691af..fa4f1f51 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,11 @@
 {
     "cmake.configureOnOpen": false,
     "cSpell.words": [
+      "acousticness",
+      "danceability",
+      "instrumentalness",
       "Mpris",
+      "speechiness",
       "Spotube",
       "winget"
     ]
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8aee5918..03610611 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,158 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.0.0](https://github.com/KRTirtho/spotube/compare/v2.7.1...v3.0.0) (2023-07-02)
+
+
+### Features
+
+* adaptive controllers ([c8b7de0](https://github.com/KRTirtho/spotube/commit/c8b7de087917ec3037c015d5b55693cb3dbdecca))
+* adaptive popup and bottom sheet list widget ([ddc1c5f](https://github.com/KRTirtho/spotube/commit/ddc1c5f373a4d72cc231c35dd70c3d577b84f7f5))
+* add generated to playlist(s) ([c91d8c8](https://github.com/KRTirtho/spotube/commit/c91d8c8efa8b526c64881fa829992b8c250e7c89))
+* add german locale ([ba3f428](https://github.com/KRTirtho/spotube/commit/ba3f4281f1a6bc7ddf38775e9d40dad863ed3692))
+* add piped search mode ([17a25a5](https://github.com/KRTirtho/spotube/commit/17a25a501e0d5e2512d8de0921fd602ea906d30f))
+* add sleep timer support ([4a75f3d](https://github.com/KRTirtho/spotube/commit/4a75f3dbd1e7e6f68899de001df70e809533f142))
+* adjust lyric page blurriness and player playbutton ([54d5907](https://github.com/KRTirtho/spotube/commit/54d5907f14df04f3f983ba2b0401ba05785da03b))
+* album art dominant color as accent color ([#447](https://github.com/KRTirtho/spotube/issues/447)) ([31b9249](https://github.com/KRTirtho/spotube/commit/31b9249cc8f7313a132a514a9ca825c2ae1e2256))
+* **android:** add splash screen ([c232fcc](https://github.com/KRTirtho/spotube/commit/c232fcc6dd1479ed33a8baa9887de2702a8ea22e))
+* **android:** disable battery optimization for better playback ([fe5b429](https://github.com/KRTirtho/spotube/commit/fe5b429ddacc576fc9fdb5e66718782cda163b27))
+* artist card redesign ([92a418c](https://github.com/KRTirtho/spotube/commit/92a418c8a8a9df99e27407b628e5e3cc9ccb4115))
+* Better download manager with download progress ([6752adc](https://github.com/KRTirtho/spotube/commit/6752adc9398818f51b69fced226b4b8410fb9e9b))
+* better language picker, adaptive select tile and settings section contrast ([6430a25](https://github.com/KRTirtho/spotube/commit/6430a2587075aa24483ab26ce6f0f6b2b630e139))
+* cache encryption for sensitive data ([b110d83](https://github.com/KRTirtho/spotube/commit/b110d834561ac53129ac9ec80238c014c84832ec))
+* color scheme picker dialog vertical list view instead of wrap ([bb60b01](https://github.com/KRTirtho/spotube/commit/bb60b01ef2f2ba3da8f6fe3a19add168b2ee8a4e))
+* compact and adaptive playbutton card design ([eeb8cab](https://github.com/KRTirtho/spotube/commit/eeb8cabf491d5242bd434b3c71c39363f24bdcf9))
+* compact button tabbar ([67380f6](https://github.com/KRTirtho/spotube/commit/67380f68765f18e4dcd3d60117083c7e9c6761c2))
+* create a basic installer script ([1763a36](https://github.com/KRTirtho/spotube/commit/1763a36a262178306df61d4588c17ff795a32790))
+* curved navigation bar ([776edf8](https://github.com/KRTirtho/spotube/commit/776edf84afcf99f96cf6e337b0c84ed89034ca8e))
+* custom error toast ([96f04c1](https://github.com/KRTirtho/spotube/commit/96f04c17565c0ab7f115d5c1f167f6660a69480d))
+* custom playlist generator ([f4b0d13](https://github.com/KRTirtho/spotube/commit/f4b0d134ca724b75bf65b885bce4dba206f1e090))
+* desktop mini player support ([471812d](https://github.com/KRTirtho/spotube/commit/471812d789eb2c861268ab8451d50104ac2fbe2e))
+* **desktop:** close button for minimize notification ([1688f99](https://github.com/KRTirtho/spotube/commit/1688f99096af940ead65e67832c6f061a6f635ac))
+* **desktop:** show minimized to system tray notification ([296f96c](https://github.com/KRTirtho/spotube/commit/296f96cf17cf21ff09b406cc24952ff60da52d5e))
+* disable/enable smtc on demand ([7fa50e5](https://github.com/KRTirtho/spotube/commit/7fa50e5c5ee9ca3ba95dca55f8a4831047f17570))
+* download button on each track ([925fa86](https://github.com/KRTirtho/spotube/commit/925fa86271fa10ff77b8137ba8d09b8067d0e819))
+* enable caching of queue ([ec11af5](https://github.com/KRTirtho/spotube/commit/ec11af53a16c435fbea3d0c81910dca371be9ce7))
+* heart button animation ([8432dc6](https://github.com/KRTirtho/spotube/commit/8432dc6286fbdfda52bbeb39c6d4ababa05881bc))
+* improved track item API and UI ([617aa89](https://github.com/KRTirtho/spotube/commit/617aa89409ce29eb3c197aee5c1189d763a3913c))
+* **installer:** get latest version from Github API ([957c085](https://github.com/KRTirtho/spotube/commit/957c085e1243ec0af5bc45d38691c74e2ba91ad8))
+* **local_tracks:** delete local track ([#484](https://github.com/KRTirtho/spotube/issues/484)) ([52835b2](https://github.com/KRTirtho/spotube/commit/52835b2ce2212925f80e1a1595c0ca30e6860a8d))
+* locale category/genre title ([88137f0](https://github.com/KRTirtho/spotube/commit/88137f01b27150b306327a01e67ec8a35a60e82e))
+* **locale:** add bengali translations for search page ([a1cdbad](https://github.com/KRTirtho/spotube/commit/a1cdbad18782a74b43f0625facfe3e35c516bf43))
+* **locale:** localize search, library, lyrics, artist with both Bengali and English ([11fe9ec](https://github.com/KRTirtho/spotube/commit/11fe9ec74462441b67a0ab0df73824f36dd15e2d))
+* **locale:** player, playlist view, track tile bengali and english translations ([c55133d](https://github.com/KRTirtho/spotube/commit/c55133dc8bba307823e5b67a30cfab03c923cb7f))
+* localize settings, about, login, player queue with Bengali and English translations ([a5c36bb](https://github.com/KRTirtho/spotube/commit/a5c36bbb20cc69d609bfb5ab973c7e288c1ea9de))
+* logs page in settings ([b78e7f5](https://github.com/KRTirtho/spotube/commit/b78e7f57a05db344aae59206cbb0f43b3ee199a9))
+* macos title bar spacing and lyrics page margin separate ([a0b3771](https://github.com/KRTirtho/spotube/commit/a0b377104f9822561d3b46dbc6551bb561842480))
+* make snackbar floating ([9dbb817](https://github.com/KRTirtho/spotube/commit/9dbb8171a6d6b81120ca7ccd74577e5c890ff930))
+* merge floating player with nav bar and nav bar translucent bg ([a90261e](https://github.com/KRTirtho/spotube/commit/a90261ed199f6cff9e8d0fe24934f8f1d8e9ed98))
+* **mini_player:** remove window shadow ([6259014](https://github.com/KRTirtho/spotube/commit/625901482ada4b441b838f640c0ab7167119b321))
+* **mini_player:** show/hide UI on hover toggle ([2e8b647](https://github.com/KRTirtho/spotube/commit/2e8b647a51f87840c2bd39f0a1dc25ddc91528fc))
+* new sidebar widget and translucent bottom player ([4ba1e70](https://github.com/KRTirtho/spotube/commit/4ba1e70636b4ba43697663128fc5422b1d0b2a2f))
+* newly released albums of user followed artist ([33cb794](https://github.com/KRTirtho/spotube/commit/33cb7947d63d0a2692a004f87a2ccd5777bf054e))
+* optimize image load + genre page and reduce page size of loaded categories ([7131efa](https://github.com/KRTirtho/spotube/commit/7131efa07fdbcf17965fc59ff635a6198b0e5e25))
+* persistent volume percentage ([3724bd5](https://github.com/KRTirtho/spotube/commit/3724bd5a10eef7a099d6f596fd038e6fea228359))
+* personal playlist recommendations ([ae820a2](https://github.com/KRTirtho/spotube/commit/ae820a22f291082c49554d621c25cc62212a6708))
+* piped instance picker on settings ([bed0d3b](https://github.com/KRTirtho/spotube/commit/bed0d3bd70438df413633ee03fd258a2ca4a1688))
+* platform specific title bar buttons ([6267720](https://github.com/KRTirtho/spotube/commit/62677209a23172162defb7a8e542d981569eba08))
+* **playback:** integrate android, ios, macos with JustAudio ([d487fe5](https://github.com/KRTirtho/spotube/commit/d487fe55630993e2b729050ebd0bf4e1e4be1fb3))
+* **playback:** use assets_audio_player to fix macos double duration problems and android high loading latency ([1fff0f1](https://github.com/KRTirtho/spotube/commit/1fff0f1bd0d811c348f293f733cbcb7cd57e02f8))
+* player details dialog and separate location of lyrics button in player page ([ce38233](https://github.com/KRTirtho/spotube/commit/ce38233de8f4775018a1d01e951b1635776fe743))
+* **player:** add playlist related methods to audio player ([f1080e1](https://github.com/KRTirtho/spotube/commit/f1080e1675aee1208d05658adfabfbed04ff45b6))
+* **player:** animated gradient background ([49b5d0e](https://github.com/KRTirtho/spotube/commit/49b5d0e6948d80abb8ee09203e0d655d68377245))
+* **player:** custom playlist implementation for media_kit to replace unpredictable playlist of mpv ([eaf65b6](https://github.com/KRTirtho/spotube/commit/eaf65b6db208aaad745821d4d42afc05f51cee7c))
+* **player:** proper coloring of elements ([b2c4ea1](https://github.com/KRTirtho/spotube/commit/b2c4ea13f6157c2b7bec3957e1f7f50fbf0002c7))
+* **player:** replace bg blur with gradient, proper fg color and align title and artist name ([159f03e](https://github.com/KRTirtho/spotube/commit/159f03e7ca62e6b3b86389e2795da84de61fba78))
+* playlist create support for generated playlist ([91c72f9](https://github.com/KRTirtho/spotube/commit/91c72f9ec9556f301c5d129fc82e19e791a02fbe))
+* playlist generation all parameters support ([9877d5f](https://github.com/KRTirtho/spotube/commit/9877d5f51736db03d5839dadf164d11d0cce82f0))
+* **playlist,album page:** play and shuffle take full width on smaller screens, add new xs breakpoint ([dce1b88](https://github.com/KRTirtho/spotube/commit/dce1b88694cfcb6b7e63d6ee614ac1dbbd017f6e))
+* **queue:** add track(s) for playing next ([#460](https://github.com/KRTirtho/spotube/issues/460)) ([cac8ea6](https://github.com/KRTirtho/spotube/commit/cac8ea638812f5d9cb4305144b6351141a2cf407))
+* **queue:** reorder tracks support ([441b43b](https://github.com/KRTirtho/spotube/commit/441b43bef6b92fd7df6c4e1bef39d67b4a76cd22))
+* re-designed playlist/album page ([0cedc7a](https://github.com/KRTirtho/spotube/commit/0cedc7a4187771efce8152003f890e242116c78c))
+* re-introduce youtube API along with piped ([b54ee96](https://github.com/KRTirtho/spotube/commit/b54ee96233b29d7517eba66e3f8dd9270c2790df))
+* reactive volume slider and slicker bottom bar with lowered height ([9d14517](https://github.com/KRTirtho/spotube/commit/9d14517202d5c9d993a947808bf0c6520ed54ea3))
+* remove SponsorBlock in favor of YT Music and remove pocketbase backend track support ([fb780da](https://github.com/KRTirtho/spotube/commit/fb780da327a213d7a82cbc3b567ece858dc2f0e8))
+* repeat button all 3 mode and disable player controls when track is fetching ([1418378](https://github.com/KRTirtho/spotube/commit/14183781dd3f1e16c121e78ad637a326de7b5dcf))
+* replace YouTube API with piped API ([1ecc36d](https://github.com/KRTirtho/spotube/commit/1ecc36da57af61fd9c2ca928589088cd4325f605))
+* responsive playlist generate page and scrollable multi autocomplete ([d57aad5](https://github.com/KRTirtho/spotube/commit/d57aad5612f7622dcd638ea8c0ec4d96f741de2b))
+* search alternative track source ([dfea195](https://github.com/KRTirtho/spotube/commit/dfea195ec178de733717cfe3226cede7521ee2d3))
+* setup localization (l10n) and language switcher, add sidebar and navbar locale ([f12d812](https://github.com/KRTirtho/spotube/commit/f12d81259f9e7005e681a7ca9867291d9228a8b1))
+* show album release year ([#387](https://github.com/KRTirtho/spotube/issues/387)) and fix layout of artist's album ([6a6ddf6](https://github.com/KRTirtho/spotube/commit/6a6ddf6e1f6dc72b794cae49adf8348da272babd))
+* show country code piped instance list ([60328a6](https://github.com/KRTirtho/spotube/commit/60328a6bafcbff1b7d0ee5099825f0e3d545b60f))
+* show loading when track metadata is being fetched, android, ios, macos enable shuffling ([bf59570](https://github.com/KRTirtho/spotube/commit/bf59570251720a80efe0aa6be481899864da5079))
+* sort tracks by newest and oldest dates ([b4713e3](https://github.com/KRTirtho/spotube/commit/b4713e377a938cbebe70089874216f86fe550c34))
+* supabase integration ([8bcce92](https://github.com/KRTirtho/spotube/commit/8bcce9282eae08c5996a27f16f89cbc187a06823))
+* system tray support ([#31](https://github.com/KRTirtho/spotube/issues/31)) ([06a0437](https://github.com/KRTirtho/spotube/commit/06a043764d9f65fb448fcf088ccf2737145e23e8))
+* track populate sibling support ([3aeb026](https://github.com/KRTirtho/spotube/commit/3aeb026776716b6e2eb89c8406a4996a86c7ca60))
+* **translation:** add hindi and french translations using ChatGPT ([6d836bd](https://github.com/KRTirtho/spotube/commit/6d836bdb658c180ca8e2c71e7e290fafa3520727))
+* **translation:** add Japanase locale ([4b52a71](https://github.com/KRTirtho/spotube/commit/4b52a71c0914bda6c831d8f637a5934f7bcf8fcb))
+* use system color scheme ([862c4b8](https://github.com/KRTirtho/spotube/commit/862c4b8faf2c751d803e373e29981a116bf08ed5))
+* volume slider in player page ([7abe2c1](https://github.com/KRTirtho/spotube/commit/7abe2c10735bc38c644487139557a731d25e80e6))
+* windows OS media control panel support ([f0b426a](https://github.com/KRTirtho/spotube/commit/f0b426ae89f2e01f4a9c8757ef4e0b4a21b50c7b))
+
+
+### Bug Fixes
+
+* add to playlist dialog not showing playlist name ([8944581](https://github.com/KRTirtho/spotube/commit/8944581c09eec0162220e7ff684205484fafb599))
+* album sync not working ([74906f3](https://github.com/KRTirtho/spotube/commit/74906f393250934c36530a73ad7312f59f8627ed))
+* alternative track source not playing new source ([a9b5a71](https://github.com/KRTirtho/spotube/commit/a9b5a714e47d40407d799966ae95f84338f9b59a))
+* **android:** use multi assetAudioPlayer instance fix patch and disable Pre-download and play by default in Android too ([cdb3268](https://github.com/KRTirtho/spotube/commit/cdb32685e4bbb899706ed16d58ef9a3a074e283a))
+* **artist:** follower count shows as float when < 1000 ([#482](https://github.com/KRTirtho/spotube/issues/482)) ([fd1846e](https://github.com/KRTirtho/spotube/commit/fd1846eecf9632e59e4b70fb70e97c556b6374f5))
+* bottom navbar first item icon color not changing on primary color change ([6eb4244](https://github.com/KRTirtho/spotube/commit/6eb4244f3244a96fe6858261534cc03eb3de803c))
+* cached currently playing track infinite loading ([9401718](https://github.com/KRTirtho/spotube/commit/94017189c6b9bf55ec62cbf29cd6b0e9fffca42a))
+* cached queue tracks expired stream ([ed29ab5](https://github.com/KRTirtho/spotube/commit/ed29ab5137416d9fb2e7e9fe840f56ef52df6f61))
+* collection currently playing state persist on restart ([1c89e3e](https://github.com/KRTirtho/spotube/commit/1c89e3efb0f05c648fc1c8e09039e62333de18d1))
+* color not syncing and add new screenshot ([6205501](https://github.com/KRTirtho/spotube/commit/62055018feade0b895663a0bfc5f85f265ae2154))
+* content going below bottom player or nav bar ([1bdce9f](https://github.com/KRTirtho/spotube/commit/1bdce9fe964de88a667bb160846c11dc70b77c00))
+* disable background_downloader due to android build failures ([7d23bee](https://github.com/KRTirtho/spotube/commit/7d23beec5ef07c4d649185a69e7a2b9697dc6953))
+* disable play when loading track and buffering event ([30c933c](https://github.com/KRTirtho/spotube/commit/30c933cdf3d4524be164e171094afdd27b0252b7))
+* error log ([e3d8239](https://github.com/KRTirtho/spotube/commit/e3d8239b9f5700bfb17c4758d95ba1db1f0e718a))
+* excessive repaints caused by Player progress bar ([09b24cf](https://github.com/KRTirtho/spotube/commit/09b24cf1fd1644c549f85904545db54b39cc2431))
+* failed download no error icon ([1266a3f](https://github.com/KRTirtho/spotube/commit/1266a3f1607de11e793a294071850996527d494a))
+* **home:** bottom player transparency ([20c424c](https://github.com/KRTirtho/spotube/commit/20c424c77fe273a693213ebf88d50e4025bc8608))
+* language changer not working ([7b7b1f2](https://github.com/KRTirtho/spotube/commit/7b7b1f2647591b7cd4cc7841526716c6a2877e55))
+* less frequent position updates ([0a49b56](https://github.com/KRTirtho/spotube/commit/0a49b56566abd00cf7703e4207cfa90f93c381fd))
+* linux mpris not showing up and overall media notification service ([1abcad1](https://github.com/KRTirtho/spotube/commit/1abcad1de510c209a34196f2de17045af4dd3bc2))
+* local tracks getting fetched on first load ([73c012c](https://github.com/KRTirtho/spotube/commit/73c012c71ab5050636f79e010d654b4390978ee7))
+* local tracks not working when there's a invalid music file in the folder ([5855820](https://github.com/KRTirtho/spotube/commit/5855820569dfad7cd26f1e0f0c985babd0d9485d))
+* lyrics page blur in player and cut off text when line too big ([6b4584e](https://github.com/KRTirtho/spotube/commit/6b4584e91bd4f4aee0c56e48a7aec7015c7c418b))
+* macos build by removing media_kit native event loop ([62fc773](https://github.com/KRTirtho/spotube/commit/62fc7739b508f0e874978408a2bab0a1d422deb6))
+* macos build error, mobile player duration and playing state and background disposal of player ([be91e33](https://github.com/KRTirtho/spotube/commit/be91e33828630c7062886cd15e4d57496daaa4d5))
+* **macos,ios:** use regular shared prefs ([1b5bfec](https://github.com/KRTirtho/spotube/commit/1b5bfec27fbcfe9faabff64d46296bdeebe00161))
+* memoize child of animated widget and make player bg animation faster ([fcb5c8f](https://github.com/KRTirtho/spotube/commit/fcb5c8f8dabd0d4e3033f80ea3e5d006243cdfb5))
+* mini player not working in release mode ([28ff321](https://github.com/KRTirtho/spotube/commit/28ff3216efee81184798eedfbb10ba66395bbf36))
+* **mkPlayer:** remove method and wrong active index on modifying playlist ([3bafa7b](https://github.com/KRTirtho/spotube/commit/3bafa7b80c963fa52b90ed4cb1393fb121cac713))
+* mobile audio notification not working ([8f9303b](https://github.com/KRTirtho/spotube/commit/8f9303bc0fddb9d179303a1f0eb76dd5b02410e7))
+* multiple instance of theme ([4ec0424](https://github.com/KRTirtho/spotube/commit/4ec04240a5bde6af5c920a61ab6260e7a93bfc54))
+* navigation to settings not working ([ce10aa1](https://github.com/KRTirtho/spotube/commit/ce10aa1fe2c95d4738835687f613930cf7829f3a))
+* no progress update when track changed ([6ae8964](https://github.com/KRTirtho/spotube/commit/6ae896441a787fce1bc6e5eb5379856dc2f4e96d))
+* null exception on proxy playlist and audio player ([a455a89](https://github.com/KRTirtho/spotube/commit/a455a89c5861fd455f6950c7b68beae24bdcc6ed))
+* overflowing clickable artists links ([4077fac](https://github.com/KRTirtho/spotube/commit/4077fac39fb667b87e959e53d2dcaceefb63cd2d))
+* personalized playlists not loading ([caa3408](https://github.com/KRTirtho/spotube/commit/caa340803fdf3859fe5a8a996abae1502ef2e4e7))
+* playback not moving to next track after a track ends ([27e8acb](https://github.com/KRTirtho/spotube/commit/27e8acbfe75a37c0a8fa69a444fdd86e92dbe4f0))
+* **player:** gradient bg not taking full height ([62ad86e](https://github.com/KRTirtho/spotube/commit/62ad86e88d74b5114af78138b221314192e5a801))
+* **player:** playback element placement ([5e47faa](https://github.com/KRTirtho/spotube/commit/5e47faa6060d7a8aa0d143060e812dc06b8dd790))
+* **player:** queue button not showing when not logged in ([6c2d655](https://github.com/KRTirtho/spotube/commit/6c2d65587b0e6e167be1d0b086df103c7e72d4b2))
+* **player:** volume slider, prefetching of media_kit and stuttering on sponsorblock skip ([1f32554](https://github.com/KRTirtho/spotube/commit/1f3255481f058c50968561db88172e56b58494f4))
+* playlist generate slider shape ([2b35c04](https://github.com/KRTirtho/spotube/commit/2b35c044adb15a97a58692e7880694a251899732))
+* pop sheet list not scrollable ([cca5625](https://github.com/KRTirtho/spotube/commit/cca5625df7e432da8581a4504306baad154deb48))
+* re-enable add to queue and play next support, favorite button query exceptions ([e529c79](https://github.com/KRTirtho/spotube/commit/e529c79c4f0cd964b7d89e010d3fe51378ea7222))
+* re-enable download manager ([ea45c4f](https://github.com/KRTirtho/spotube/commit/ea45c4f42ae89b8991e470e84a5290b3be3b0f36))
+* remove unnecessary broadcast stream conversions ([bf04962](https://github.com/KRTirtho/spotube/commit/bf04962e90ea5345a2bc0d4793999f7db712cab2))
+* remove useBreakpoints as it clogs up memory with unnecessary state updates ([e1c0f5c](https://github.com/KRTirtho/spotube/commit/e1c0f5cf1e4cece2c4aa235bfbf8511ad7b1fe59))
+* replace download multiple pops and add translations ([4a21249](https://github.com/KRTirtho/spotube/commit/4a21249ee386426b0974451542a93e84f532fb3f))
+* screen breakpoints and persist lyrics delay across screens ([df79638](https://github.com/KRTirtho/spotube/commit/df79638fb622a55aaa2b36c9a1425c2d9c4a8e52))
+* sidebar task counter badge and bottom player play button progress color ([af278d8](https://github.com/KRTirtho/spotube/commit/af278d8feaa08c14528627766bce6d724b846954))
+* status bar color of playlist/album page ([65fa3cb](https://github.com/KRTirtho/spotube/commit/65fa3cb624c240360de5a06778a1f72ad10bbe2d))
+* system color scheme not persisting on restart when system color scheme changed ([e04515d](https://github.com/KRTirtho/spotube/commit/e04515d8e213b4c7f85d11385959a33b042bd9b1))
+* track collection view status bar not transparent ([9251121](https://github.com/KRTirtho/spotube/commit/9251121ba0154599975e33819a43719477c644f8))
+* track doesn't play after change ([17e5ab6](https://github.com/KRTirtho/spotube/commit/17e5ab611cc417cce7c17cafc7045f5aa2eb970e))
+* track stops at last second ([f554f6d](https://github.com/KRTirtho/spotube/commit/f554f6d43bb714f662a27977f501d7ad44b070c3))
+* **track_collection_view:** keyboard focus on scroll and no space for search results in playlist/album ([7a8bd92](https://github.com/KRTirtho/spotube/commit/7a8bd921047e3766dbbf24449e2873afe3dbecf8))
+* track_table_view table headers ([d88d287](https://github.com/KRTirtho/spotube/commit/d88d287fc586ec33351de9f3b4359f189054868b))
+* track_tile active and blacklist color, playbutton card action positioning ([3f5a1b9](https://github.com/KRTirtho/spotube/commit/3f5a1b9587efe9b7b2c69008345867933f79ec67))
+* use id based source getters instead of index ([a074463](https://github.com/KRTirtho/spotube/commit/a0744630ba2dc713babdb8db6500f9dd0f1e6096))
+
 ### [2.7.1](https://github.com/KRTirtho/spotube/compare/v2.7.0...v2.7.1) (2023-04-10)
 
 
diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md
index c19d8ff1..da630db0 100644
--- a/CONTRIBUTION.md
+++ b/CONTRIBUTION.md
@@ -118,26 +118,26 @@ Enhancement suggestions are tracked as [GitHub issues](https://github.com/KRTirt
 
 Do the following:
 
-- Download the latest Flutter SDK (>=2.15.1) & enable desktop support
+- Download the latest Flutter SDK (>=3.10.0) & enable desktop support
 - Install Development dependencies in linux
-  - Debian/Ubuntu
+  - Debian (>=12/Bookworm)/Ubuntu
     ```bash
-    $ apt-get install libjsoncpp1 libjsoncpp-dev libsecret-1-0 libsecret-1-dev libgstreamer1.0-dev libgstreamer-plugins-base1.0-dev
+    $ apt-get install mpv libmpv-dev libappindicator3-1 gir1.2-appindicator3-0.1 libappindicator3-dev libsecret-1-0 libjsoncpp1 libsecret-1-dev libjsoncpp-dev libnotify-bin libnotify-dev
     ```
     - Use `libjsoncpp25` instead of `libjsoncpp1` (for Ubuntu >= 22.04)
   - Arch/Manjaro
     ```bash
-    yay -S libsecret jsoncpp gstreamer gst-libav gst-plugins-base gst-plugins-good
+    yay -S mpv libappindicator-gtk3 libsecret jsoncpp libnotify
     ```
   - Fedora
     ```bash
-    dnf install libsecret libsecret-devel jsoncpp gstreamer1-devel gstreamer1-plugins-base-tools gstreamer1-doc gstreamer1-plugins-base-devel gstreamer1-plugins-good gstreamer1-plugins-good-extras
+    dnf install mpv mpv-devel libappindicator-gtk3 libappindicator-gtk3-devel libsecret libsecret-devel jsoncpp jsoncpp-devel libnotify libnotify-devel
     ```
 - Clone the Repo
 - Create a `.env` in root of the project following the `.env.example` template
 - Now run the following to bootstrap the project
   ```bash
-  flutter pub get && flutter pub run build_runner build --delete-conflicting-outputs
+  flutter pub get && dart run build_runner build --delete-conflicting-outputs --enable-experiment=records,patterns
   ```
 - Finally run these following commands in the root of the project to start the Spotube Locally
   ```bash
diff --git a/LICENSE b/LICENSE
index 5119c222..f965af85 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 BSD-4-Clause License
 
-Copyright (c) 2022 Kingkor Roy Tirtho. All rights reserved.
+Copyright (c) 2023 Kingkor Roy Tirtho. All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 
diff --git a/README.md b/README.md
index 14ac5697..177e4c21 100644
--- a/README.md
+++ b/README.md
@@ -1,158 +1,214 @@
-<p align="center"><img width="700" src="assets/spotube_banner.png" alt="Spotube Logo"></p>
+<div align="center">
+  <img width="600" src="assets/spotube_banner.png" alt="Spotube Logo">
 
-<p align="center">
-  <a href="https://spotube.netlify.app/">spotube.netlify.app</a>
-</p>
+  An open source, cross-platform Spotify client that doesn't require Premium nor uses Electron!<br />
 
-<p align="center">
-  <a href="https://github.com/KRTirtho/spotube/actions/workflows/spotube-release-binary.yml">
-    <img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/KRTirtho/spotube/spotube-release-binary.yml?color=1585be&style=flat-square">
-  </a>
-  <a href="https://github.com/KRTirtho/Spotube/releases">
-    <img alt="GitHub release" src="https://img.shields.io/github/v/release/KRTirtho/spotube?color=1585be&style=flat-square"/>
-  </a>
-  <a href="LICENSE">
-    <img alt="License" src="https://img.shields.io/aur/license/spotube-bin?color=1585be&style=flat-square"/>
-  </a>
-  <a href="https://github.com/KRTirtho">
-    <img alt="Maintainer" src="https://img.shields.io/badge/Maintainer-KRTirtho-1585be?style=flat-square"/>
-  </a>
-  <a href="https://opencollective.com/spotube">
-    <img alt="Open Collective backers and sponsors" src="https://img.shields.io/opencollective/all/spotube?color=1585be&style=flat-square"/>
-  </a>
-  <a href="https://discord.gg/uJ94vxB6vg">
-    <img alt="Discord" src="https://img.shields.io/discord/1012234096237350943?color=1585be&label=Discord%20Server&logoColor=1585be&style=flat-square">
-  </a>
-</p>
+  <a href="https://spotube.netlify.app"><img alt="Visit the website" height="56" src="https://cdn.jsdelivr.net/npm/@intergrav/devins-badges@3/assets/cozy/documentation/website_vector.svg"></a>
+  <a href="https://discord.gg/uJ94vxB6vg"><img alt="Discord Server" height="56" src="https://cdn.jsdelivr.net/npm/@intergrav/devins-badges@3/assets/cozy/social/discord-plural_vector.svg"></a>
 
+  <a href="https://patreon.com/krtirtho"><img alt="Support me on Patron" height="56" src="https://cdn.jsdelivr.net/npm/@intergrav/devins-badges@3/assets/cozy/donate/patreon-singular_vector.svg"></a>
+  <a href="https://www.buymeacoffee.com/krtirtho"><img alt="Buy me a Coffee" height="56" src="https://cdn.jsdelivr.net/npm/@intergrav/devins-badges@3/assets/cozy/donate/buymeacoffee-singular_vector.svg"></a>
 
-Spotube is a [Flutter](https://flutter.dev) based lightweight Spotify client. It utilizes the power of Spotify & Youtube's public APIs to create a reliable, robust & resource-light user experience.
+  <a href="https://opencollective.com/spotube"><img src="https://opencollective.com/spotube/donate/button.png?color=blue" alt="Donate to our Open Collective" height="45"></a>
 
-#### <p align="center">Desktop</p>
+  ---
 
-![Application Desktop Screenshot](assets/spotube-screenshot.jpg)
+  <img src="assets/spotube-screenshot.png" alt="Spotube Desktop" width="600"> <img src="assets/mobile-screenshots/player-view.jpg" alt="Spotube Mobile" height="340">
 
-#### <p align="center">Mobile</p>
+</div>
 
-![Application Mobile Screenshot](assets/mobile-screenshots/mobile-combined.jpg)
+## 🌃 Features
 
-<p align="center">
-  <a href="https://discord.gg/uJ94vxB6vg">
-    <img src="https://discord.com/api/guilds/1012234096237350943/widget.png?style=banner2">
-  </a>
-</p>
+- 🚫 No ads, thanks to the use of public & free Spotify and YT Music APIs¹
+- ⬇️ Downloadable tracks
+- 🖥️ 📱 Cross-platform support
+- 🪶 Small size & less data usage
+- 🕵️ Anonymous/guest login
+- 🕒 Time synced lyrics
+- ✋ No telemetry, diagnostics or user data collection
+- 🚀 Native performance
+- 📖 Open source/libre software
+- 🔉 Playback control is done locally, not on the server
 
-# Features
+**¹** It is still **recommended** to support the creators by watching/liking/subscribing to the artists' YouTube channels or liking their tracks on Spotify (or purchasing a Spotify Premium subscription too).
 
-Following are the features that currently Spotube offers:
+### ❌ Unsupported features
 
-- Open source/libre software
-- Anonymous/guest login
-- Cross platform support
-- No telemetry, diagnostics or user data collection
-- Lightweight & resource-friendly
-- Native performance (Thanks to Flutter+Skia)
-- Playback control is done locally instead of on the server
-- Small size & less data usage
-- No Spotify or YouTube ads since it uses all public & free APIs (It is still recommended to support the creators by watching/liking/subscribing to the artists' YouTube channels or liking their tracks on Spotify. Purchasing Spotify Premium is usually the best way to support their valuable creations.)
-- Time synced lyrics
-- Downloadable tracks
+- 🗣️ **Spotify Shows & Podcasts:** Shows and Podcasts can **never be supported** because the audio tracks are _only_ available on Spotify and accessing them would require Spotify Premium.
+- 🎧 **Spotify Listen Along:** [Coming soon!](https://github.com/KRTirtho/spotube/issues/8)
 
-# Support development
+## 📜 ⬇️ Installation guide
 
-<a href="https://patreon.com/krtirtho"><img src="https://user-images.githubusercontent.com/61944859/180249027-678b01b8-c336-451e-b147-6d84a5b9d0e7.png" width="250"/></a>
-[!["Donate to out Collective"](https://opencollective.com/spotube/donate/button.png?color=blue)](https://opencollective.com/spotube)
-[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/krtirtho)
+New releases usually appear after 3-4 months.<br />
+This handy table lists all methods you can use to install Spotube:
 
-# Installation
+<table>
+  <tr>
+    <th>Platform</th>
+    <th>Package/Installation Method</th>
+  </tr>
+  <tr>
+    <td>Windows</td>
+    <td>
+      <a href="https://github.com/KRTirtho/spotube/releases/latest/download/Spotube-windows-x86_64-setup.exe">
+        <img width="220" alt="Windows Download" src="https://get.todoist.help/hc/article_attachments/4403191721234/WindowsButton.svg">
+      </a>
+  </tr>
+  <tr>
+    <td>MacOS</td>
+    <td>
+      <a href="https://github.com/KRTirtho/spotube/releases/latest/download/Spotube-macos-universal.dmg">
+        <img width="220" alt="MacOS Download" src="https://reachify.io/wp-content/uploads/2018/09/mac-download-button-1.png">
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td>Android</td>
+    <td>
+      <a href="https://github.com/KRTirtho/spotube/releases/latest/download/Spotube-android-all-arch.apk">
+        <img width="220" alt="APK download" src="https://user-images.githubusercontent.com/114044633/223920025-83687de0-e463-4c5d-8122-e06e4bb7d40c.png">
+      </a>
+      <br/>
+      <a href="https://f-droid.org/packages/oss.krtirtho.spotube">
+        <img width="220" alt="Download from F-Droid" src="https://user-images.githubusercontent.com/61944859/174589876-bace24c0-b3fd-4c4a-bdb4-6fa82b5853ec.png">
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td>Flatpak</td>
+    <td>
+      <p><code>flatpak install com.github.KRTirtho.Spotube</code></p>
+      <a href="https://flathub.org/apps/details/com.github.KRTirtho.Spotube">
+        <img width="220" alt="Download on Flathub" src="https://flathub.org/assets/badges/flathub-badge-en.png">
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td>AppImage</td>
+    <td>
+      <a href="https://github.com/KRTirtho/spotube/releases/latest/download/Spotube-linux-x86_64.AppImage">
+        <img width="220" alt="Download AppImage" src="https://user-images.githubusercontent.com/61944859/169455015-13385466-8901-48fe-ba90-b62d58b0be64.png">
+      </a>
+      <p><b>Note:</b> <a href="https://github.com/TheAssassin/AppImageLauncher">AppimageLauncher</a> is required!</p>
+    </td>
+  </tr>
+  <tr>
+    <td>Debian/Ubuntu</td>
+    <td>
+      <a href="https://github.com/KRTirtho/spotube/releases/latest/download/Spotube-linux-x86_64.deb">
+        <img width="220" alt="Debian/Ubuntu Download" src="https://user-images.githubusercontent.com/61944859/169097994-e92aff78-fd75-4c93-b6e4-f072a4b5a7ed.png">
+      </a>
+      <p>Then run: <code>sudo apt install Spotube-linux-x86_64.deb</code></p>
+    </td>
+  </tr>
+  <tr>
+    <td>Arch/Manjaro</td>
+    <td>
+      <p>With pamac: <code>sudo pamac install spotube-bin</code></p>
+      <p>With yay: <code>yay -Sy spotube-bin</code></p>
+    </td>
+  </tr>
+  <tr>
+    <td>Fedora/OpenSuse</td>
+    <td>
+      <a href="https://github.com/KRTirtho/spotube/releases/latest/download/Spotube-linux-x86_64.rpm">
+        <img width="220" alt="Fedora/OpenSuse Download" src="https://user-images.githubusercontent.com/61944859/223638350-5926b9da-04d6-4edd-931d-ad533e4ff058.png">
+      </a>
+      <p>For Fedora: <code>sudo dnf install ./Spotube-linux-x86_64.rpm</code></p>
+      <p>For OpenSuse: <code>sudo zypper in ./Spotube-linux-x86_64.rpm</code></p>
+    </td>
+  </tr>
+  <tr>
+    <td>Linux (tarball)</td>
+    <td>
+      <a href="https://github.com/KRTirtho/spotube/releases/latest">
+        <img width="220" alt="Tarball Download" src="https://user-images.githubusercontent.com/61944859/169456985-e0ba1fd4-10e8-4cc0-ab94-337acc6e0295.png">
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td>Windows - <a href="https://chocolatey.org">Chocolatey</a></td>
+    <td>
+      <p><code>choco install spotube</code></p>
+    </td>
+  </tr>
+  <tr>
+    <td>Windows - <a href="https://scoop.sh">Scoop</a></td>
+    <td>
+      <p><code>scoop bucket add extras</code></p>
+      <p><code>scoop install spotube</code></p>
+    </td>
+  </tr>
+  <tr>
+    <td>Windows - <a href="https://github.com/microsoft/winget-cli">WinGet</a></td>
+    <td>
+      <p><code>winget install --id KRTirtho.Spotube</code></p>
+    </td>
+  </tr>
+</table>
 
-I'm always releasing newer versions of binaries of the software every 2-3 months with minor changes & every 6-8 months with major changes. Grab them!
+### 🔄 Nightly Builds
 
-| Platform                                        | Package/Installation Method                                                                                                                                                                                                                                                                                                     |
-| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Android                                         | [<img width='220' alt='Android Download' src='https://user-images.githubusercontent.com/114044633/223920025-83687de0-e463-4c5d-8122-e06e4bb7d40c.png'/>][android-dlink]<br/>[<img width='220' alt='Android Download' src='https://user-images.githubusercontent.com/61944859/174589876-bace24c0-b3fd-4c4a-bdb4-6fa82b5853ec.png'/>][fdroid-dlink]       |
-| Debian/Ubuntu                                   | [<img width='220' alt='Linux Debian/Ubuntu Download' src='https://user-images.githubusercontent.com/61944859/169097994-e92aff78-fd75-4c93-b6e4-f072a4b5a7ed.png'/>][deb-dlink] <br/> Then run: `sudo apt install Spotube-linux-x86_64.deb`                                                                                      |
-| Fedora/OpenSuse                                 | [<img width='220' alt='Linux Fedora/OpenSuse Download' src='https://user-images.githubusercontent.com/61944859/223638350-5926b9da-04d6-4edd-931d-ad533e4ff058.png'/>][rpm-dlink] <br/> For Fedora: `sudo dnf install ./Spotube-linux-x86_64.rpm`<br/> For OpenSuse: `sudo zypper in ./Spotube-linux-x86_64.rpm` |
-| Flatpak                                         | `flatpak install com.github.KRTirtho.Spotube` <br/> <a href='https://flathub.org/apps/details/com.github.KRTirtho.Spotube'><img width='220' alt='Download on Flathub' src='https://flathub.org/assets/badges/flathub-badge-en.png'/></a>                                                                                        |
-| Arch/Manjaro                                    | pamac: `pamac install spotube-bin` <br/> yay: `yay -Sy spotube-bin`                                                                                                                                                                                                                                                             |
-| AppImage                                        | [<img width='220' alt='AppImage Download' src='https://user-images.githubusercontent.com/61944859/169455015-13385466-8901-48fe-ba90-b62d58b0be64.png'/>][appimage-dlink]<br/> **Note**: AppImages require [appimage-launcher](https://github.com/TheAssassin/AppImageLauncher) to be installed                                  |
-| Linux (tarball)                                 | [<img width='220' alt='Tarball Download' src='https://user-images.githubusercontent.com/61944859/169456985-e0ba1fd4-10e8-4cc0-ab94-337acc6e0295.png'/>][linux-dlink]                                                                                                                                                            |
-| Windows                                         | [<img width='220' alt='Windows Download' src='https://get.todoist.help/hc/article_attachments/4403191721234/WindowsButton.svg'/>][win32-dlink]                                                                                                                                                                                  |
-| Windows (<a href="https://chocolatey.org">Chocolatey</a>)                            | `choco install spotube`                                                                                                                                                                                                                                                                                                         |
-| Windows (<a href="https://scoop.sh/">Scoop</a>) | `scoop bucket add extras`  <br/> `scoop install spotube`                                                                                                                                                                                                                                                                        |
-| Windows (<a href="https://github.com/microsoft/winget-cli">WinGet</a>)                           | `winget install --id KRTirtho.Spotube`                                                                                                                                                                                                                                                                                          |
-| MacOS                                           | [<img width='220' alt='MacOS Download' src='https://reachify.io/wp-content/uploads/2018/09/mac-download-button-1.png'/>][mac-dlink]                                                                                                                                                                                             |
+Grab the latest nightly builds of Spotube [from the GitHub Releases](https://github.com/KRTirtho/spotube/releases/tag/nightly).
 
-> **Note!:** If you don't understand this download table. You can read [installation instructions][wiki-installation-instructions] from the wiki
+## 🕳️ Building from source 
 
-## Nightly Builds
-Get the latest nightly builds of Spotube [here](https://github.com/KRTirtho/spotube/releases/tag/nightly).
+<a href="https://github.com/KRTirtho/spotube/actions"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/KRTirtho/spotube/spotube-release-binary.yml?+label=Build%20Status"></a>
 
-# TODO:
-- [ ] Windows OS Media Control & Media Keys Support
-- [ ] Spotify Listen Along
-- [x] Skip non-music sections from Audio Track
-- [ ] Language Translations/Localization
+You can compile Spotube's source code by [following these instructions](CONTRIBUTION.md#your-first-code-contribution).
 
-# Building from source
+## 👥 The Spotube team
 
-You can find the details [here](CONTRIBUTION.md#your-first-code-contribution).
+- [Kingkor Roy Tirtho](https://github.com/KRTirtho) - The Founder, Maintainer and Lead Developer
+- [Owen Connor](https://github.com/owencz1998) - The Cool Discord Moderator
+- [Piotr Rogowski](https://github.com/karniv00l) - The MacOS Developer
+- [RaptaG](https://github.com/RaptaG) - The GitHub Moderator and Community Manager
+- [Rusty Apple](https://github.com/RustyApple) - The Mysterious Unknown Guy
 
-# Things that do not work
+## 💼 License
 
-- Shows & Podcasts are not supported, as a premium subscription would be needed for that functionality.
+Spotube is open source and licensed under the [BSD-4-Clause](/LICENSE) License.
 
-# License
+If you are concerned, feel free to [read the reason of choosing this license](https://dev.to/krtirtho/choosing-open-source-license-wisely-1m3p).
 
-[BSD-4-Clause](/LICENSE)
+<details>
+  <summary>
+    <h2><code>[Click to show]</code> 🙏 Library/Plugin/Framework Credits</h2>
+  </summary>
 
-But why? You can learn about it [here](https://dev.to/krtirtho/choosing-open-source-license-wisely-1m3p).
-
-# Financial contributors
-## Backers
-![Backers](https://opencollective.com/spotube/backer.svg?button=false)
-![Donors](https://opencollective.com/spotube/tiers/donor.svg?button=false)
-
-## Sponsors
-<p align="center">
-  <img src="https://opencollective.com/spotube/tiers/sponsor.svg" alt="Sponsor Spotube" width="69%"> <!-- nice. -->
-</p>
-
-# Library/Plugin/Framework Credits
-
-1. [Flutter](https://flutter.dev/) - Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase
-1. [Spotify API](https://developer.spotify.com/documentation/web-api/) - The Spotify Web API is a RESTful API that provides access to Spotify data
-1. [Linux](https://www.linux.org/) - Linux is a family of open-source Unix-like operating systems based on the Linux kernel, an operating system kernel first released on September 17, 1991, by Linus Torvalds. Linux is typically packaged in a Linux distribution
-1. [AUR](https://aur.archlinux.org/) - AUR stands for Arch User Repository. It is a community-driven repository for Arch-based Linux distributions users
-1. [Flatpak](https://flatpak.org/) - Flatpak is a utility for software deployment and package management for Linux
-1. [rentanadviser](https://www.rentanadviser.com/) - Generous Synced lyrics API provider service
-1. [SponsorBlock](https://sponsor.ajay.app/) - SponsorBlock is an open-source crowdsourced browser extension and open API for skipping sponsor segments in YouTube videos.
+1. [Flutter](https://flutter.dev) - Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase
+1. [Spotify API](https://developer.spotify.com/documentation/web-api) - The Spotify Web API is a RESTful API that provides access to Spotify data
+1. [Piped](https://piped-docs.kavin.rocks/) - Piped is a privacy friendly alternative YouTube frontend, which is efficient and scalable by design.
+1. [YouTube](https://youtube.com/) - YouTube is an American online video-sharing platform headquartered in San Bruno, California. Three former PayPal employees—Chad Hurley, Steve Chen, and Jawed Karim—created the service in February 2005
+1. [Linux](https://www.linux.org) - Linux is a family of open-source Unix-like operating systems based on the Linux kernel, an operating system kernel first released on September 17, 1991, by Linus Torvalds. Linux is typically packaged in a Linux distribution
+1. [AUR](https://aur.archlinux.org) - AUR stands for Arch User Repository. It is a community-driven repository for Arch-based Linux distributions users
+1. [Flatpak](https://flatpak.org) - Flatpak is a utility for software deployment and package management for Linux
+1. [SponsorBlock](https://sponsor.ajay.app) - SponsorBlock is an open-source crowdsourced browser extension and open API for skipping sponsor segments in YouTube videos.
 1. [Inno Setup](https://jrsoftware.org/isinfo.php) - Inno Setup is a free installer for Windows programs by Jordan Russell and Martijn Laan
-1. [F-Droid](https://f-droid.org/) - F-Droid is an installable catalogue of FOSS (Free and Open Source Software) applications for the Android platform. The client makes it easy to browse, install, and keep track of updates on your device
-
-1. [adwaita](https://github.com/gtk-flutter/adwaita) - Adwaita style - The default theme for GTK+ for your Flutter app.
+1. [F-Droid](https://f-droid.org) - F-Droid is an installable catalogue of FOSS (Free and Open Source Software) applications for the Android platform. The client makes it easy to browse, install, and keep track of updates on your device
 1. [args](https://pub.dev/packages/args) - Library for defining parsers for parsing raw command-line arguments into a set of options and values using GNU and POSIX style options.
 1. [async](https://pub.dev/packages/async) - Utility functions and classes related to the 'dart:async' library.
 1. [audio_service](https://github.com/ryanheise/audio_service/tree/master/audio_service) - Flutter plugin to play audio in the background while the screen is off.
 1. [audio_session](https://github.com/ryanheise/audio_session) - Sets the iOS audio session category and Android audio attributes for your app, and manages your app's audio focus, mixing and ducking behaviour.
-1. [audioplayers](https://github.com/bluefireteam/audioplayers) - A Flutter plugin to play multiple audio files simultaneously
 1. [auto_size_text](https://github.com/leisim/auto_size_text) - Flutter widget that automatically resizes text to fit perfectly within its bounds.
-1. [badges](https://pub.dev/packages/badges) - A package for creating badges. Badges can be used for an additional marker for any widget, e.g. show a number of items in a shopping cart.
+1. [buttons_tabbar](https://afonsoraposo.com) - A Flutter package that implements a TabBar where each label is a toggle button.
 1. [cached_network_image](https://github.com/Baseflow/flutter_cached_network_image) - Flutter library to load and cache network images. Can also be used with placeholder and error widgets.
 1. [collection](https://pub.dev/packages/collection) - Collections and utilities functions and classes related to collections.
 1. [cupertino_icons](https://pub.dev/packages/cupertino_icons) - Default icons asset for Cupertino widgets based on Apple styled icons
-1. [dbus](https://github.com/canonical/dbus.dart) - A native Dart implementation of the D-Bus message bus client. This package allows Dart applications to directly access services on the Linux desktop.
+1. [curved_navigation_bar](https://github.com/rafalbednarczuk/curved_navigation_bar) - Stunning Animating Curved Shape Navigation Bar. Adjustable color, background color, animation curve, animation duration.
+1. [envied](https://github.com/petercinibulk/envied) - Explicitly reads environment variables into a dart file from a .env file for more security and faster start up times.
 1. [file_picker](https://github.com/miguelpruivo/plugins_flutter_file_picker) - A package that allows you to use a native file explorer to pick single or multiple absolute file paths, with extension filtering support.
 1. [fl_query](https://fl-query.vercel.app) - Asynchronous data caching, refetching & invalidation library for Flutter
 1. [fl_query_hooks](https://fl-query.vercel.app) - Elite flutter_hooks compatible library for fl_query, the Asynchronous data caching, refetching & invalidation library for Flutter
-1. [fluent_ui](https://github.com/bdlukaa/fluent_ui) - Implements Windows UI in Flutter. Based on the official documentation
+1. [fl_query_connectivity_plus_adapter](https://fl-query.vercel.app) - Connectivity Plus adapter for FlQuery Connectivity
 1. [fluentui_system_icons](https://github.com/microsoft/fluentui-system-icons/tree/main) - Fluent UI System Icons are a collection of familiar, friendly and modern icons from Microsoft.
 1. [flutter_cache_manager](https://github.com/Baseflow/flutter_cache_manager/tree/master/flutter_cache_manager) - Generic cache manager for flutter. Saves web files on the storages of the device and saves the cache info using sqflite.
-1. [flutter_dotenv](https://github.com/java-james/flutter_dotenv) - Easily configure any flutter application with global variables using a `.env` file.
 1. [flutter_feather_icons](https://github.com/muj-programmer/flutter_feather_icons) - Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and usability.
 1. [flutter_hooks](https://github.com/rrousselGit/flutter_hooks) - A flutter implementation of React hooks. It adds a new kind of widget with enhanced code reuse.
 1. [flutter_inappwebview](https://inappwebview.dev/) - A Flutter plugin that allows you to add an inline webview, to use an headless webview, and to open an in-app browser window.
+1. [flutter_native_splash](https://pub.dev/packages/flutter_native_splash) - Customize Flutter's default white native splash screen with background color and splash image. Supports dark mode, full screen, and more.
 1. [flutter_riverpod](https://riverpod.dev) - A simple way to access state from anywhere in your application while robust and testable.
+1. [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage) - Flutter Secure Storage provides API to store data in secure storage. Keychain is used in iOS, KeyStore based solution is used in Android.
 1. [flutter_svg](https://pub.dev/packages/flutter_svg) - An SVG rendering and widget library for Flutter, which allows painting and displaying Scalable Vector Graphics 1.1 files.
 1. [fuzzywuzzy](https://github.com/sphericalkat/dart-fuzzywuzzy) - An implementation of the popular fuzzywuzzy package in Dart, to suit all your fuzzy string matching/searching needs!
 1. [go_router](https://pub.dev/packages/go_router) - A declarative router for Flutter based on Navigation 2 supporting deep linking, data-driven routes and more
@@ -161,13 +217,16 @@ But why? You can learn about it [here](https://dev.to/krtirtho/choosing-open-sou
 1. [hooks_riverpod](https://riverpod.dev) - A simple way to access state from anywhere in your application while robust and testable.
 1. [html](https://pub.dev/packages/html) - APIs for parsing and manipulating HTML content outside the browser.
 1. [http](https://pub.dev/packages/http) - A composable, multi-platform, Future-based API for HTTP requests.
+1. [intl](https://pub.dev/packages/intl) - Contains code to deal with internationalized/localized messages, date and number formatting and parsing, bi-directional text, and other internationalization issues.
 1. [introduction_screen](https://github.com/pyozer/introduction_screen) - Introduction/Onboarding package for flutter app with some customizations possibilities
 1. [json_annotation](https://pub.dev/packages/json_annotation) - Classes and helper functions that support JSON code generation via the `json_serializable` package.
-1. [json_serializable](https://pub.dev/packages/json_serializable) - Automatically generate code for converting to and from JSON by annotating Dart classes.
-1. [libadwaita](https://github.com/gtk-flutter/libadwaita) - Libadwaita's widgets for Flutter. Following Gnome HIG and available on all platforms.
 1. [logger](https://pub.dev/packages/logger) - Small, easy to use and extensible logger which prints beautiful logs.
-1. [macos_ui](https://macosui.dev) - Flutter widgets and themes implementing the current macOS design language.
-1. [marquee](https://pub.dev/packages/marquee) - A Flutter widget that scrolls text infinitely. Provides many customizations including custom scroll directions, durations, curves as well as pauses after every round.
+1. [media_kit](https://github.com/alexmercerind/media_kit) - A complete video & audio playback library for Flutter & Dart. Performant, stable, feature-proof & modular.
+1. [media_kit_libs_android_audio](https://github.com/alexmercerind/media_kit.git) - Android package providing audio (only) native libraries for package:media_kit.
+1. [media_kit_libs_ios_audio](https://github.com/alexmercerind/media_kit.git) - iOS package providing audio native libraries for package:media_kit.
+1. [media_kit_libs_linux](https://github.com/alexmercerind/media_kit.git) - GNU/Linux dependency package for package:media_kit. Necessary for initialization.
+1. [media_kit_libs_macos_audio](https://github.com/alexmercerind/media_kit.git) - macOS package providing audio native libraries for package:media_kit.
+1. [media_kit_libs_windows_audio](https://github.com/alexmercerind/media_kit.git) - Windows package providing audio (only) native libraries for package:media_kit.
 1. [metadata_god](https://github.com/KRTirtho/metadata_god) - Plugin for retrieving and writing audio tags/metadata from audio files
 1. [mime](https://pub.dev/packages/mime) - Utilities for handling media (MIME) types, including determining a type from a file extension and file contents.
 1. [package_info_plus](https://plus.fluttercommunity.dev/) - Flutter plugin for querying information about the application package, such as CFBundleVersion on iOS or versionCode on Android.
@@ -175,54 +234,43 @@ But why? You can learn about it [here](https://dev.to/krtirtho/choosing-open-sou
 1. [path](https://pub.dev/packages/path) - A string-based path manipulation library. All of the path operations you know and love, with solid support for Windows, POSIX (Linux and Mac OS X), and the web.
 1. [path_provider](https://pub.dev/packages/path_provider) - Flutter plugin for getting commonly used locations on host platform file systems, such as the temp and app data directories.
 1. [permission_handler](https://pub.dev/packages/permission_handler) - Permission plugin for Flutter. This plugin provides a cross-platform (iOS, Android) API to request and check permissions.
-1. [pocketbase](https://pub.dev/packages/pocketbase) - Multi-platform Dart SDK for PocketBase, an open source realtime backend in 1 file.
 1. [popover](https://github.com/minikin/popover) - A popover is a transient view that appears above other content onscreen when you tap a control or in an area.
-1. [queue](https://github.com/rknell/dart_queue) - Queue up futures from multiple sources and await their return anywhere in your code.
 1. [scroll_to_index](https://github.com/quire-io/scroll-to-index) - Scroll to a specific child of any scrollable widget in Flutter
 1. [shared_preferences](https://pub.dev/packages/shared_preferences) - Flutter plugin for reading and writing simple key-value pairs. Wraps NSUserDefaults on iOS and SharedPreferences on Android.
+1. [sidebarx](https://github.com/Frezyx/sidebarx) - flutter multiplatform navigation sidebar / side navigationbar / drawer widget
 1. [skeleton_text](https://github.com/101Loop/Skeleton-Text) - A package that provides an easy way to add skeleton text loading animation in Flutter project. This project is a part of 101Loop community.
-1. [tuple](https://pub.dev/packages/tuple) - A library providing a tuple data structure.
+1. [smtc_windows](https://github.com/KRTirtho/smtc_windows) - Windows `SystemMediaTransportControls` implementation for Flutter giving access to Windows OS Media Control applet.
+1. [spotify](https://github.com/rinukkusu/spotify-dart) - An incomplete dart library for interfacing with the Spotify Web API.
+1. [system_theme](https://pub.dev/packages/system_theme) - A plugin to get the current system theme info. Supports Android, Web, Windows, Linux and macOS
+1. [titlebar_buttons](https://github.com/gtk-flutter/titlebar_buttons) - A package which provides most of the titlebar buttons from windows, linux and macos.
 1. [url_launcher](https://pub.dev/packages/url_launcher) - Flutter plugin for launching a URL. Supports web, phone, SMS, and email schemes.
 1. [uuid](https://github.com/Daegalus/dart-uuid) - RFC4122 (v1, v4, v5) UUID Generator and Parser for all Dart platforms (Web, VM, Flutter)
 1. [version](https://github.com/dartninja/version) - Provides a simple class for parsing and comparing semantic versions as defined by http://semver.org/
 1. [visibility_detector](https://pub.dev/packages/visibility_detector) - A widget that detects the visibility of its child and notifies a callback.
 1. [window_manager](https://github.com/leanflutter/window_manager) - This plugin allows Flutter desktop apps to resizing and repositioning the window.
+1. [piped_client](https://github.com/KRTirtho/piped_client) - API Client for piped.video
+1. [supabase_flutter](https://supabase.com) - Flutter integration for Supabase. This package makes it simple for developers to build secure and scalable products.
+1. [device_preview](https://github.com/aloisdeniel/flutter_device_preview) - Approximate how your Flutter app looks and performs on another device.
+1. [media_kit_native_event_loop](https://github.com/alexmercerind/media_kit) - Platform specific threaded event handling for media_kit. Enables support for higher number of concurrent instances.
+1. [dbus](https://github.com/canonical/dbus.dart) - A native Dart implementation of the D-Bus message bus client. This package allows Dart applications to directly access services on the Linux desktop.
+1. [background_downloader](https://pub.dev/packages/background_downloader) - A multi-platform background file downloader and uploader. Define the task, enqueue and monitor progress
+1. [duration](https://github.com/desktop-dart/duration) - Utilities to make working with 'Duration's easier. Formats duration in human readable form and also parses duration in human readable form to Dart's Duration.
+1. [disable_battery_optimization](https://github.com/pvsvamsi/Disable-Battery-Optimizations) - Flutter plugin to check and disable battery optimizations. Also shows custom steps to disable the optimizations in devices like mi, xiaomi, samsung, oppo, huawei, oneplus etc
 1. [youtube_explode_dart](https://github.com/Hexer10/youtube_explode_dart) - A port in dart of the youtube explode library. Supports several API functions without the need of Youtube API Key.
 1. [build_runner](https://pub.dev/packages/build_runner) - A build system for Dart code generation and modular compilation.
-1. [flutter_distributor](https://github.com/leanflutter/flutter_distributor) - A complete tool for packaging and publishing your Flutter apps.
+1. [envied_generator](https://github.com/petercinibulk/envied) - Generator for the Envied package. See https://pub.dev/packages/envied.
+1. [flutter_distributor](https://distributor.leanflutter.org) - A complete tool for packaging and publishing your Flutter apps.
 1. [flutter_gen_runner](https://github.com/FlutterGen/flutter_gen) - The Flutter code generator for your assets, fonts, colors, … — Get rid of all String-based APIs.
 1. [flutter_launcher_icons](https://github.com/fluttercommunity/flutter_launcher_icons) - A package which simplifies the task of updating your Flutter app's launcher icon.
 1. [flutter_lints](https://pub.dev/packages/flutter_lints) - Recommended lints for Flutter apps, packages, and plugins to encourage good coding practices.
 1. [hive_generator](https://github.com/hivedb/hive/tree/master/hive_generator) - Extension for Hive. Automatically generates TypeAdapters to store any class.
+1. [json_serializable](https://pub.dev/packages/json_serializable) - Automatically generate code for converting to and from JSON by annotating Dart classes.
 1. [pub_api_client](https://github.com/leoafarias/pub_api_client) - An API Client for Pub to interact with public package information.
 1. [pubspec_parse](https://pub.dev/packages/pubspec_parse) - Simple package for parsing pubspec.yaml files with a type-safe API and rich error reporting.
 1. [catcher](https://github.com/jhomlala/catcher) - Plugin for error catching which provides multiple handlers for dealing with errors when they are not caught by the developer.
-1. [platform_ui](https://github.com/KRTirtho/platform_ui) - Platform specific Widgets and UI toolkit
-1. [spotify](https://github.com/rinukkusu/spotify-dart) - An incomplete dart library for interfacing with the Spotify Web API.
+1. [flutter_desktop_tools](https://github.com/KRTirtho/flutter_desktop_tools) - Essential collection of tools for flutter desktop app development
 1. [window_size](https://github.com/google/flutter-desktop-embedding.git) - Allows resizing and repositioning the window containing Flutter.
 
-# The team
+</details>
 
-- [Kingkor Roy Tirtho](https://github.com/KRTirtho) - The Founder, Maintainer and Lead Developer
-- [Owen Conor](https://github.com/owencz1998) - The Cool Discord Moderator
-- [Piotr Rogowski](https://github.com/karniv00l) - The MacOS Developer
-- [RaptaG](https://github.com/raptag) - The GitHub Moderator and Community Manager
-- [Rusty Apple](https://github.com/RustyApple) - The Mysterious Unknown Guy
-
-# Social platforms
-
-Follow me on [Twitter](https://twitter.com/@krtirtho), or join our amazing [Discord](https://discord.gg/uJ94vxB6vg) server to always get newer updates about the application.
-
-<b><p align="center">&copy; 2023 Spotube</p></b>
-
-<!-- Variables/Text References -->
-[win32-dlink]: https://github.com/KRTirtho/spotube/releases/latest/download/Spotube-windows-x86_64-setup.exe
-[deb-dlink]: https://github.com/KRTirtho/spotube/releases/latest/download/Spotube-linux-x86_64.deb
-[rpm-dlink]: https://github.com/KRTirtho/spotube/releases/latest/download/Spotube-linux-x86_64.rpm
-[linux-dlink]: https://github.com/KRTirtho/spotube/releases/latest
-[appimage-dlink]: https://github.com/KRTirtho/spotube/releases/latest/download/Spotube-linux-x86_64.AppImage
-[mac-dlink]: https://github.com/KRTirtho/spotube/releases/latest/download/Spotube-macos-x86_64.dmg
-[android-dlink]: https://github.com/KRTirtho/spotube/releases/latest/download/Spotube-android-all-arch.apk
-[fdroid-dlink]: https://f-droid.org/packages/oss.krtirtho.spotube/
-
-[wiki-installation-instructions]: https://github.com/KRTirtho/spotube/wiki/Installation-Instrcutions
+<div align="center"><h4>© Copyright Spotube 2023</h4></div>
diff --git a/analysis_options.yaml b/analysis_options.yaml
index d1b7c95f..4f0718e4 100644
--- a/analysis_options.yaml
+++ b/analysis_options.yaml
@@ -28,3 +28,7 @@ linter:
 
 # Additional information about this file can be found at
 # https://dart.dev/guides/language/analysis-options
+analyzer:
+  enable-experiment:
+    - records
+    - patterns
\ No newline at end of file
diff --git a/android/app/build.gradle b/android/app/build.gradle
index 1d519014..d05a90a1 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -34,6 +34,8 @@ if (keystorePropertiesFile.exists()) {
 android {
     compileSdkVersion 33
 
+    ndkVersion "21.4.7075529"
+
     compileOptions {
         sourceCompatibility JavaVersion.VERSION_1_8
         targetCompatibility JavaVersion.VERSION_1_8
@@ -50,7 +52,7 @@ android {
     defaultConfig {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "oss.krtirtho.spotube"
-        minSdkVersion 19
+        minSdkVersion 24
         targetSdkVersion flutter.targetSdkVersion
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
@@ -77,6 +79,17 @@ flutter {
 }
 
 dependencies {
-    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version"
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+    constraints {
+        implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version") {
+            because("kotlin-stdlib-jdk7 is now a part of kotlin-stdlib")
+        }
+        implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version") {
+            because("kotlin-stdlib-jdk8 is now a part of kotlin-stdlib")
+        }
+    }
+    implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.5.1'
+
+    // other deps so just ignore
     implementation 'com.android.support:multidex:2.0.1'
 }
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 523f66b9..f47bab2e 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -24,7 +24,7 @@
     android:requestLegacyExternalStorage="true"
   >
     <activity
-      android:name="com.ryanheise.audioservice.AudioServiceActivity"
+      android:name="com.ryanheise.audioservice.AudioServiceActivity" 
       android:exported="true"
       android:launchMode="singleTop"
       android:theme="@style/LaunchTheme"
@@ -49,17 +49,21 @@
 
     </activity>
 
-    <service android:name="com.ryanheise.audioservice.AudioService" android:exported="false">
+    <!-- AudioService Config -->
+    <service android:name="com.ryanheise.audioservice.AudioService"
+      android:foregroundServiceType="mediaPlayback"
+      android:exported="true">
       <intent-filter>
         <action android:name="android.media.browse.MediaBrowserService" />
       </intent-filter>
     </service>
-
-    <receiver android:name="com.ryanheise.audioservice.MediaButtonReceiver" android:exported="false">
+    <receiver android:name="com.ryanheise.audioservice.MediaButtonReceiver"
+      android:exported="true">
       <intent-filter>
         <action android:name="android.intent.action.MEDIA_BUTTON" />
       </intent-filter>
     </receiver>
+    <!-- =================== -->
 
     <!-- Don't delete the meta-data below.
              This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
diff --git a/android/app/src/main/res/drawable-hdpi-v31/android12branding.png b/android/app/src/main/res/drawable-hdpi-v31/android12branding.png
new file mode 100644
index 00000000..9e62c813
Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi-v31/android12branding.png differ
diff --git a/android/app/src/main/res/drawable-hdpi/android12splash.png b/android/app/src/main/res/drawable-hdpi/android12splash.png
new file mode 100644
index 00000000..0d4e1c68
Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/android12splash.png differ
diff --git a/android/app/src/main/res/drawable-hdpi/branding.png b/android/app/src/main/res/drawable-hdpi/branding.png
new file mode 100644
index 00000000..9e62c813
Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/branding.png differ
diff --git a/android/app/src/main/res/drawable-hdpi/splash.png b/android/app/src/main/res/drawable-hdpi/splash.png
new file mode 100644
index 00000000..0979b5e4
Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-mdpi-v31/android12branding.png b/android/app/src/main/res/drawable-mdpi-v31/android12branding.png
new file mode 100644
index 00000000..80579983
Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi-v31/android12branding.png differ
diff --git a/android/app/src/main/res/drawable-mdpi/android12splash.png b/android/app/src/main/res/drawable-mdpi/android12splash.png
new file mode 100644
index 00000000..5d9760d4
Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/android12splash.png differ
diff --git a/android/app/src/main/res/drawable-mdpi/branding.png b/android/app/src/main/res/drawable-mdpi/branding.png
new file mode 100644
index 00000000..80579983
Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/branding.png differ
diff --git a/android/app/src/main/res/drawable-mdpi/splash.png b/android/app/src/main/res/drawable-mdpi/splash.png
new file mode 100644
index 00000000..c5e4aca0
Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-night-hdpi-v31/android12branding.png b/android/app/src/main/res/drawable-night-hdpi-v31/android12branding.png
new file mode 100644
index 00000000..9e62c813
Binary files /dev/null and b/android/app/src/main/res/drawable-night-hdpi-v31/android12branding.png differ
diff --git a/android/app/src/main/res/drawable-night-hdpi/android12splash.png b/android/app/src/main/res/drawable-night-hdpi/android12splash.png
new file mode 100644
index 00000000..0d4e1c68
Binary files /dev/null and b/android/app/src/main/res/drawable-night-hdpi/android12splash.png differ
diff --git a/android/app/src/main/res/drawable-night-mdpi-v31/android12branding.png b/android/app/src/main/res/drawable-night-mdpi-v31/android12branding.png
new file mode 100644
index 00000000..80579983
Binary files /dev/null and b/android/app/src/main/res/drawable-night-mdpi-v31/android12branding.png differ
diff --git a/android/app/src/main/res/drawable-night-mdpi/android12splash.png b/android/app/src/main/res/drawable-night-mdpi/android12splash.png
new file mode 100644
index 00000000..5d9760d4
Binary files /dev/null and b/android/app/src/main/res/drawable-night-mdpi/android12splash.png differ
diff --git a/android/app/src/main/res/drawable-night-xhdpi-v31/android12branding.png b/android/app/src/main/res/drawable-night-xhdpi-v31/android12branding.png
new file mode 100644
index 00000000..0bcf138d
Binary files /dev/null and b/android/app/src/main/res/drawable-night-xhdpi-v31/android12branding.png differ
diff --git a/android/app/src/main/res/drawable-night-xhdpi/android12splash.png b/android/app/src/main/res/drawable-night-xhdpi/android12splash.png
new file mode 100644
index 00000000..8e5ceb0a
Binary files /dev/null and b/android/app/src/main/res/drawable-night-xhdpi/android12splash.png differ
diff --git a/android/app/src/main/res/drawable-night-xxhdpi-v31/android12branding.png b/android/app/src/main/res/drawable-night-xxhdpi-v31/android12branding.png
new file mode 100644
index 00000000..c7d01776
Binary files /dev/null and b/android/app/src/main/res/drawable-night-xxhdpi-v31/android12branding.png differ
diff --git a/android/app/src/main/res/drawable-night-xxhdpi/android12splash.png b/android/app/src/main/res/drawable-night-xxhdpi/android12splash.png
new file mode 100644
index 00000000..fb89da37
Binary files /dev/null and b/android/app/src/main/res/drawable-night-xxhdpi/android12splash.png differ
diff --git a/android/app/src/main/res/drawable-night-xxxhdpi-v31/android12branding.png b/android/app/src/main/res/drawable-night-xxxhdpi-v31/android12branding.png
new file mode 100644
index 00000000..5477b799
Binary files /dev/null and b/android/app/src/main/res/drawable-night-xxxhdpi-v31/android12branding.png differ
diff --git a/android/app/src/main/res/drawable-night-xxxhdpi/android12splash.png b/android/app/src/main/res/drawable-night-xxxhdpi/android12splash.png
new file mode 100644
index 00000000..38e4a12c
Binary files /dev/null and b/android/app/src/main/res/drawable-night-xxxhdpi/android12splash.png differ
diff --git a/android/app/src/main/res/drawable-v21/background.png b/android/app/src/main/res/drawable-v21/background.png
new file mode 100644
index 00000000..203fc77a
Binary files /dev/null and b/android/app/src/main/res/drawable-v21/background.png differ
diff --git a/android/app/src/main/res/drawable-v21/launch_background.xml b/android/app/src/main/res/drawable-v21/launch_background.xml
index f74085f3..52e8749e 100644
--- a/android/app/src/main/res/drawable-v21/launch_background.xml
+++ b/android/app/src/main/res/drawable-v21/launch_background.xml
@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Modify this file to customize your launch splash screen -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:drawable="?android:colorBackground" />
-
-    <!-- You can insert your own image assets here -->
-    <!-- <item>
-        <bitmap
-            android:gravity="center"
-            android:src="@mipmap/launch_image" />
-    </item> -->
+    <item>
+        <bitmap android:gravity="fill" android:src="@drawable/background"/>
+    </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/splash"/>
+    </item>
+    <item>
+        <bitmap android:gravity="bottom" android:src="@drawable/branding"/>
+    </item>
 </layer-list>
diff --git a/android/app/src/main/res/drawable-xhdpi-v31/android12branding.png b/android/app/src/main/res/drawable-xhdpi-v31/android12branding.png
new file mode 100644
index 00000000..0bcf138d
Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi-v31/android12branding.png differ
diff --git a/android/app/src/main/res/drawable-xhdpi/android12splash.png b/android/app/src/main/res/drawable-xhdpi/android12splash.png
new file mode 100644
index 00000000..8e5ceb0a
Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/android12splash.png differ
diff --git a/android/app/src/main/res/drawable-xhdpi/branding.png b/android/app/src/main/res/drawable-xhdpi/branding.png
new file mode 100644
index 00000000..0bcf138d
Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/branding.png differ
diff --git a/android/app/src/main/res/drawable-xhdpi/splash.png b/android/app/src/main/res/drawable-xhdpi/splash.png
new file mode 100644
index 00000000..41222c6c
Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-xxhdpi-v31/android12branding.png b/android/app/src/main/res/drawable-xxhdpi-v31/android12branding.png
new file mode 100644
index 00000000..c7d01776
Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi-v31/android12branding.png differ
diff --git a/android/app/src/main/res/drawable-xxhdpi/android12splash.png b/android/app/src/main/res/drawable-xxhdpi/android12splash.png
new file mode 100644
index 00000000..fb89da37
Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/android12splash.png differ
diff --git a/android/app/src/main/res/drawable-xxhdpi/branding.png b/android/app/src/main/res/drawable-xxhdpi/branding.png
new file mode 100644
index 00000000..c7d01776
Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/branding.png differ
diff --git a/android/app/src/main/res/drawable-xxhdpi/splash.png b/android/app/src/main/res/drawable-xxhdpi/splash.png
new file mode 100644
index 00000000..5ab19d32
Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable-xxxhdpi-v31/android12branding.png b/android/app/src/main/res/drawable-xxxhdpi-v31/android12branding.png
new file mode 100644
index 00000000..5477b799
Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi-v31/android12branding.png differ
diff --git a/android/app/src/main/res/drawable-xxxhdpi/android12splash.png b/android/app/src/main/res/drawable-xxxhdpi/android12splash.png
new file mode 100644
index 00000000..38e4a12c
Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/android12splash.png differ
diff --git a/android/app/src/main/res/drawable-xxxhdpi/branding.png b/android/app/src/main/res/drawable-xxxhdpi/branding.png
new file mode 100644
index 00000000..5477b799
Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/branding.png differ
diff --git a/android/app/src/main/res/drawable-xxxhdpi/splash.png b/android/app/src/main/res/drawable-xxxhdpi/splash.png
new file mode 100644
index 00000000..a6d40b89
Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/splash.png differ
diff --git a/android/app/src/main/res/drawable/background.png b/android/app/src/main/res/drawable/background.png
new file mode 100644
index 00000000..203fc77a
Binary files /dev/null and b/android/app/src/main/res/drawable/background.png differ
diff --git a/android/app/src/main/res/drawable/launch_background.xml b/android/app/src/main/res/drawable/launch_background.xml
index 304732f8..52e8749e 100644
--- a/android/app/src/main/res/drawable/launch_background.xml
+++ b/android/app/src/main/res/drawable/launch_background.xml
@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Modify this file to customize your launch splash screen -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:drawable="@android:color/white" />
-
-    <!-- You can insert your own image assets here -->
-    <!-- <item>
-        <bitmap
-            android:gravity="center"
-            android:src="@mipmap/launch_image" />
-    </item> -->
+    <item>
+        <bitmap android:gravity="fill" android:src="@drawable/background"/>
+    </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/splash"/>
+    </item>
+    <item>
+        <bitmap android:gravity="bottom" android:src="@drawable/branding"/>
+    </item>
 </layer-list>
diff --git a/android/app/src/main/res/values-night-v31/styles.xml b/android/app/src/main/res/values-night-v31/styles.xml
new file mode 100644
index 00000000..96980835
--- /dev/null
+++ b/android/app/src/main/res/values-night-v31/styles.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
+    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
+        <item name="android:forceDarkAllowed">false</item>
+        <item name="android:windowFullscreen">false</item>
+        <item name="android:windowDrawsSystemBarBackgrounds">false</item>
+        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
+        <item name="android:windowSplashScreenBackground">#000000</item>
+        <item name="android:windowSplashScreenBrandingImage">@drawable/android12branding</item>
+        <item name="android:windowSplashScreenAnimatedIcon">@drawable/android12splash</item>
+        <item name="android:windowSplashScreenIconBackgroundColor">#000000</item>
+    </style>
+    <!-- Theme applied to the Android Window as soon as the process has started.
+         This theme determines the color of the Android Window while your
+         Flutter UI initializes, as well as behind your Flutter UI while its
+         running.
+         
+         This Theme is only used starting with V2 of Flutter's Android embedding. -->
+    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
+        <item name="android:windowBackground">?android:colorBackground</item>
+    </style>
+</resources>
diff --git a/android/app/src/main/res/values-v31/styles.xml b/android/app/src/main/res/values-v31/styles.xml
new file mode 100644
index 00000000..981a07a9
--- /dev/null
+++ b/android/app/src/main/res/values-v31/styles.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
+    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
+        <item name="android:forceDarkAllowed">false</item>
+        <item name="android:windowFullscreen">false</item>
+        <item name="android:windowDrawsSystemBarBackgrounds">false</item>
+        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
+        <item name="android:windowSplashScreenBackground">#000000</item>
+        <item name="android:windowSplashScreenBrandingImage">@drawable/android12branding</item>
+        <item name="android:windowSplashScreenAnimatedIcon">@drawable/android12splash</item>
+        <item name="android:windowSplashScreenIconBackgroundColor">#000000</item>
+    </style>
+    <!-- Theme applied to the Android Window as soon as the process has started.
+         This theme determines the color of the Android Window while your
+         Flutter UI initializes, as well as behind your Flutter UI while its
+         running.
+         
+         This Theme is only used starting with V2 of Flutter's Android embedding. -->
+    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
+        <item name="android:windowBackground">?android:colorBackground</item>
+    </style>
+</resources>
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index d460d1e9..0fdc7036 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -5,6 +5,10 @@
         <!-- Show a splash screen on the activity. Automatically removed when
              Flutter draws its first frame -->
         <item name="android:windowBackground">@drawable/launch_background</item>
+        <item name="android:forceDarkAllowed">false</item>
+        <item name="android:windowFullscreen">false</item>
+        <item name="android:windowDrawsSystemBarBackgrounds">false</item>
+        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
     </style>
     <!-- Theme applied to the Android Window as soon as the process has started.
          This theme determines the color of the Android Window while your
diff --git a/android/build.gradle b/android/build.gradle
index f820e957..0801de62 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -1,5 +1,5 @@
 buildscript {
-    ext.kotlin_version = '1.7.21'
+    ext.kotlin_version = '1.8.22'
     repositories {
         google()
         mavenCentral()
@@ -26,6 +26,6 @@ subprojects {
     project.evaluationDependsOn(':app')
 }
 
-task clean(type: Delete) {
+tasks.register("clean", Delete) {
     delete rootProject.buildDir
 }
diff --git a/assets/bengali-patterns-bg.jpg b/assets/bengali-patterns-bg.jpg
new file mode 100644
index 00000000..513557a3
Binary files /dev/null and b/assets/bengali-patterns-bg.jpg differ
diff --git a/assets/branding.png b/assets/branding.png
new file mode 100644
index 00000000..fa441db5
Binary files /dev/null and b/assets/branding.png differ
diff --git a/assets/mobile-screenshots/home-dark.jpg b/assets/mobile-screenshots/home-dark.jpg
index ee53082e..bdad74f8 100644
Binary files a/assets/mobile-screenshots/home-dark.jpg and b/assets/mobile-screenshots/home-dark.jpg differ
diff --git a/assets/mobile-screenshots/home-light.jpg b/assets/mobile-screenshots/home-light.jpg
index 23da1a98..930d496a 100644
Binary files a/assets/mobile-screenshots/home-light.jpg and b/assets/mobile-screenshots/home-light.jpg differ
diff --git a/assets/mobile-screenshots/mobile-combined.jpg b/assets/mobile-screenshots/mobile-combined.jpg
deleted file mode 100644
index d8ace956..00000000
Binary files a/assets/mobile-screenshots/mobile-combined.jpg and /dev/null differ
diff --git a/assets/mobile-screenshots/player-view.jpg b/assets/mobile-screenshots/player-view.jpg
index ebd8187d..3bad761e 100644
Binary files a/assets/mobile-screenshots/player-view.jpg and b/assets/mobile-screenshots/player-view.jpg differ
diff --git a/assets/spotube-logo.ico b/assets/spotube-logo.ico
new file mode 100644
index 00000000..84906308
Binary files /dev/null and b/assets/spotube-logo.ico differ
diff --git a/assets/spotube-logo_android12.png b/assets/spotube-logo_android12.png
new file mode 100644
index 00000000..f04e25b0
Binary files /dev/null and b/assets/spotube-logo_android12.png differ
diff --git a/assets/spotube-screenshot.jpg b/assets/spotube-screenshot.jpg
deleted file mode 100644
index f48ddaee..00000000
Binary files a/assets/spotube-screenshot.jpg and /dev/null differ
diff --git a/assets/spotube-screenshot.png b/assets/spotube-screenshot.png
new file mode 100644
index 00000000..44567ae6
Binary files /dev/null and b/assets/spotube-screenshot.png differ
diff --git a/aur-struct/.SRCINFO b/aur-struct/.SRCINFO
index 0b59d626..4f50a951 100644
--- a/aur-struct/.SRCINFO
+++ b/aur-struct/.SRCINFO
@@ -5,10 +5,11 @@ pkgbase = spotube-bin
 	url = https://github.com/KRTirtho/spotube/
 	arch = x86_64
 	license = BSD-4-Clause
-	depends = gstreamer
-	depends = gst-libav
-	depends = gst-plugins-base
-	depends = gst-plugins-good
+	depends = mpv
+  depends = libappindicator-gtk3
+  depends = libsecret
+  depends = jsoncpp
+  depends = libnotify
 	source = https://github.com/KRTirtho/spotube/releases/download/v2.3.0/Spotube-linux-x86_64.tar.xz
 	md5sums = 8cd6a7385c5c75d203dccd762f1d63ec
 
diff --git a/aur-struct/PKGBUILD b/aur-struct/PKGBUILD
index 651a7e72..313cd308 100644
--- a/aur-struct/PKGBUILD
+++ b/aur-struct/PKGBUILD
@@ -8,7 +8,7 @@ arch=(x86_64)
 url="https://github.com/KRTirtho/spotube/"
 license=('BSD-4-Clause')
 groups=()
-depends=('gstreamer' 'gst-libav' 'gst-plugins-base' 'gst-plugins-good')
+depends=('mpv' 'libappindicator-gtk3' 'libsecret' 'jsoncpp' 'libnotify')
 makedepends=()
 checkdepends=()
 optdepends=()
diff --git a/bin/untranslated_messages.dart b/bin/untranslated_messages.dart
new file mode 100644
index 00000000..428314aa
--- /dev/null
+++ b/bin/untranslated_messages.dart
@@ -0,0 +1,43 @@
+import 'dart:convert';
+import 'dart:io';
+
+/// Generate JSON output for untranslated messages with English values
+/// for quick translation in ChatGPT
+///
+/// Usage: dart bin/untranslated_messages.dart [locale?]
+///
+/// Example: dart bin/untranslated_messages.dart
+///
+/// or with specific locale (e.g. bn (Bengali))
+///
+/// Example: dart bin/untranslated_messages.dart bn
+
+void main(List<String> args) {
+  final file = jsonDecode(
+    File('untranslated_messages.json').readAsStringSync(),
+  ) as Map<String, dynamic>;
+
+  final englishMessages =
+      jsonDecode(File('lib/l10n/app_en.arb').readAsStringSync())
+          as Map<String, dynamic>;
+
+  final messagesWithValues = <String, dynamic>{};
+
+  for (final MapEntry(key: locale, value: messages) in file.entries) {
+    messagesWithValues[locale] = Map.fromEntries(
+      messages
+          .map(
+            (message) =>
+                MapEntry<String, dynamic>(message, englishMessages[message]),
+          )
+          .toList()
+          .cast<MapEntry<String, dynamic>>(),
+    );
+  }
+
+  print(
+    const JsonEncoder.withIndent('  ').convert(
+      args.isNotEmpty ? messagesWithValues[args.first] : messagesWithValues,
+    ),
+  );
+}
diff --git a/build.yaml b/build.yaml
new file mode 100644
index 00000000..f074d6e1
--- /dev/null
+++ b/build.yaml
@@ -0,0 +1,5 @@
+targets:
+  $default:
+    sources:
+      exclude:
+        - bin/*.dart
\ No newline at end of file
diff --git a/integration_test/app_test.dart b/integration_test/app_test.dart
new file mode 100644
index 00000000..619844b9
--- /dev/null
+++ b/integration_test/app_test.dart
@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import 'package:spotube/main.dart' as app;
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('end-to-end test', () {
+    testWidgets('check if app is successfully starting', (tester) async {
+      await app.main([]);
+      await tester.pumpAndSettle();
+
+      expect(find.byType(MaterialApp), findsOneWidget);
+    });
+  });
+}
diff --git a/ios/Podfile b/ios/Podfile
index 2cb3ab1c..cfd01b62 100644
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -37,6 +37,7 @@ end
 post_install do |installer|
   installer.pods_project.targets.each do |target|
     flutter_additional_ios_build_settings(target)
+    # Just Audio Config
     target.build_configurations.each do |config|
       config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
         '$(inherited)',
diff --git a/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage.png b/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage.png
new file mode 100644
index 00000000..80579983
Binary files /dev/null and b/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage.png differ
diff --git a/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage@2x.png b/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage@2x.png
new file mode 100644
index 00000000..0bcf138d
Binary files /dev/null and b/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage@3x.png b/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage@3x.png
new file mode 100644
index 00000000..c7d01776
Binary files /dev/null and b/ios/Runner/Assets.xcassets/BrandingImage.imageset/BrandingImage@3x.png differ
diff --git a/ios/Runner/Assets.xcassets/BrandingImage.imageset/Contents.json b/ios/Runner/Assets.xcassets/BrandingImage.imageset/Contents.json
new file mode 100644
index 00000000..12712275
--- /dev/null
+++ b/ios/Runner/Assets.xcassets/BrandingImage.imageset/Contents.json
@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "BrandingImage.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "BrandingImage@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "BrandingImage@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/ios/Runner/Assets.xcassets/LaunchBackground.imageset/Contents.json b/ios/Runner/Assets.xcassets/LaunchBackground.imageset/Contents.json
new file mode 100644
index 00000000..9f447e1b
--- /dev/null
+++ b/ios/Runner/Assets.xcassets/LaunchBackground.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "background.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png b/ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png
new file mode 100644
index 00000000..203fc77a
Binary files /dev/null and b/ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png differ
diff --git a/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json b/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json
index 0bedcf2f..00cabce8 100644
--- a/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json
+++ b/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json
@@ -1,23 +1,23 @@
 {
   "images" : [
     {
-      "idiom" : "universal",
       "filename" : "LaunchImage.png",
+      "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "idiom" : "universal",
       "filename" : "LaunchImage@2x.png",
+      "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "idiom" : "universal",
       "filename" : "LaunchImage@3x.png",
+      "idiom" : "universal",
       "scale" : "3x"
     }
   ],
   "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
   }
 }
diff --git a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png
index 9da19eac..c5e4aca0 100644
Binary files a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png and b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png differ
diff --git a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png
index 9da19eac..41222c6c 100644
Binary files a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png and b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png differ
diff --git a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png
index 9da19eac..5ab19d32 100644
Binary files a/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png and b/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png differ
diff --git a/ios/Runner/Base.lproj/LaunchScreen.storyboard b/ios/Runner/Base.lproj/LaunchScreen.storyboard
index f2e259c7..208e1c53 100644
--- a/ios/Runner/Base.lproj/LaunchScreen.storyboard
+++ b/ios/Runner/Base.lproj/LaunchScreen.storyboard
@@ -16,13 +16,22 @@
                     <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
-                            <imageView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" image="LaunchImage" translatesAutoresizingMaskIntoConstraints="NO" id="YRO-k0-Ey4">
-                            </imageView>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" image="LaunchBackground" translatesAutoresizingMaskIntoConstraints="NO" id="tWc-Dq-wcI"/>
+                            <imageView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" image="LaunchImage" translatesAutoresizingMaskIntoConstraints="NO" id="YRO-k0-Ey4"></imageView>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" image="BrandingImage" translatesAutoresizingMaskIntoConstraints="NO" id="Uyq-Kz-ftE"/>
                         </subviews>
                         <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
-                            <constraint firstItem="YRO-k0-Ey4" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="1a2-6s-vTC"/>
-                            <constraint firstItem="YRO-k0-Ey4" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="4X2-HB-R7a"/>
+                            <constraint firstAttribute="bottom" secondItem="Uyq-Kz-ftE" secondAttribute="bottom" id="8Yb-q4-8bl"/>
+                            <constraint firstItem="Uyq-Kz-ftE" firstAttribute="centerX" secondItem="YRO-k0-Ey4" secondAttribute="centerX" id="3kg-TC-cPP"/>
+                            <constraint firstItem="YRO-k0-Ey4" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="3T2-ad-Qdv"/>
+                            <constraint firstItem="tWc-Dq-wcI" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="RPx-PI-7Xg"/>
+                            <constraint firstItem="tWc-Dq-wcI" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="SdS-ul-q2q"/>
+                            <constraint firstAttribute="trailing" secondItem="tWc-Dq-wcI" secondAttribute="trailing" id="Swv-Gf-Rwn"/>
+                            <constraint firstAttribute="trailing" secondItem="YRO-k0-Ey4" secondAttribute="trailing" id="TQA-XW-tRk"/>
+                            <constraint firstItem="YRO-k0-Ey4" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="duK-uY-Gun"/>
+                            <constraint firstItem="tWc-Dq-wcI" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="kV7-tw-vXt"/>
+                            <constraint firstItem="YRO-k0-Ey4" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="xPn-NY-SIU"/>
                         </constraints>
                     </view>
                 </viewController>
@@ -32,6 +41,8 @@
         </scene>
     </scenes>
     <resources>
-        <image name="LaunchImage" width="168" height="185"/>
+        <image name="LaunchImage" width="509" height="509"/>
+        <image name="LaunchBackground" width="1" height="1"/>
+        <image name="BrandingImage" width="1" height="1"/>
     </resources>
 </document>
diff --git a/ios/Runner/Info.plist b/ios/Runner/Info.plist
index 2cd122c4..59fc0f08 100644
--- a/ios/Runner/Info.plist
+++ b/ios/Runner/Info.plist
@@ -1,56 +1,58 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
-  <dict>
-    <key>CFBundleDevelopmentRegion</key>
-    <string>$(DEVELOPMENT_LANGUAGE)</string>
-    <key>CFBundleDisplayName</key>
-    <string>Sptube</string>
-    <key>CFBundleExecutable</key>
-    <string>$(EXECUTABLE_NAME)</string>
-    <key>CFBundleIdentifier</key>
-    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
-    <key>CFBundleInfoDictionaryVersion</key>
-    <string>6.0</string>
-    <key>CFBundleName</key>
-    <string>spotube</string>
-    <key>CFBundlePackageType</key>
-    <string>APPL</string>
-    <key>CFBundleShortVersionString</key>
-    <string>$(FLUTTER_BUILD_NAME)</string>
-    <key>CFBundleSignature</key>
-    <string>????</string>
-    <key>CFBundleVersion</key>
-    <string>$(FLUTTER_BUILD_NUMBER)</string>
-    <key>LSRequiresIPhoneOS</key>
-    <true />
-    <key>UILaunchStoryboardName</key>
-    <string>LaunchScreen</string>
-    <key>UIMainStoryboardFile</key>
-    <string>Main</string>
-    <key>UISupportedInterfaceOrientations</key>
-    <array>
-      <string>UIInterfaceOrientationPortrait</string>
-      <string>UIInterfaceOrientationLandscapeLeft</string>
-      <string>UIInterfaceOrientationLandscapeRight</string>
-    </array>
-    <key>UISupportedInterfaceOrientations~ipad</key>
-    <array>
-      <string>UIInterfaceOrientationPortrait</string>
-      <string>UIInterfaceOrientationPortraitUpsideDown</string>
-      <string>UIInterfaceOrientationLandscapeLeft</string>
-      <string>UIInterfaceOrientationLandscapeRight</string>
-    </array>
-    <key>UIViewControllerBasedStatusBarAppearance</key>
-    <true />
-    <key>NSAppTransportSecurity</key>
-    <dict>
-      <key>NSAllowsArbitraryLoads</key>
-      <true />
-      <key>NSAllowsArbitraryLoadsForMedia</key>
-      <true />
-    </dict>
-  	<key>CADisableMinimumFrameDurationOnPhone</key>
-	<true/>
-</dict>
+	<dict>
+		<key>CFBundleDevelopmentRegion</key>
+		<string>$(DEVELOPMENT_LANGUAGE)</string>
+		<key>CFBundleDisplayName</key>
+		<string>Sptube</string>
+		<key>CFBundleExecutable</key>
+		<string>$(EXECUTABLE_NAME)</string>
+		<key>CFBundleIdentifier</key>
+		<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+		<key>CFBundleInfoDictionaryVersion</key>
+		<string>6.0</string>
+		<key>CFBundleName</key>
+		<string>spotube</string>
+		<key>CFBundlePackageType</key>
+		<string>APPL</string>
+		<key>CFBundleShortVersionString</key>
+		<string>$(FLUTTER_BUILD_NAME)</string>
+		<key>CFBundleSignature</key>
+		<string>????</string>
+		<key>CFBundleVersion</key>
+		<string>$(FLUTTER_BUILD_NUMBER)</string>
+		<key>LSRequiresIPhoneOS</key>
+		<true/>
+		<key>UILaunchStoryboardName</key>
+		<string>LaunchScreen</string>
+		<key>UIMainStoryboardFile</key>
+		<string>Main</string>
+		<key>UISupportedInterfaceOrientations</key>
+		<array>
+			<string>UIInterfaceOrientationPortrait</string>
+			<string>UIInterfaceOrientationLandscapeLeft</string>
+			<string>UIInterfaceOrientationLandscapeRight</string>
+		</array>
+		<key>UISupportedInterfaceOrientations~ipad</key>
+		<array>
+			<string>UIInterfaceOrientationPortrait</string>
+			<string>UIInterfaceOrientationPortraitUpsideDown</string>
+			<string>UIInterfaceOrientationLandscapeLeft</string>
+			<string>UIInterfaceOrientationLandscapeRight</string>
+		</array>
+		<key>UIViewControllerBasedStatusBarAppearance</key>
+		<true/>
+		<key>NSAppTransportSecurity</key>
+		<dict>
+			<key>NSAllowsArbitraryLoads</key>
+			<true/>
+			<key>NSAllowsArbitraryLoadsForMedia</key>
+			<true/>
+		</dict>
+		<key>CADisableMinimumFrameDurationOnPhone</key>
+		<true/>
+		<key>UIStatusBarHidden</key>
+		<false/>
+	</dict>
 </plist>
diff --git a/l10n.yaml b/l10n.yaml
new file mode 100644
index 00000000..b49b5df4
--- /dev/null
+++ b/l10n.yaml
@@ -0,0 +1,4 @@
+arb-dir: lib/l10n
+template-arb-file: app_en.arb
+output-localization-file: app_localizations.dart
+untranslated-messages-file: untranslated_messages.json
diff --git a/lib/collections/assets.gen.dart b/lib/collections/assets.gen.dart
index 80c82050..f720ac9f 100644
--- a/lib/collections/assets.gen.dart
+++ b/lib/collections/assets.gen.dart
@@ -30,16 +30,22 @@ class Assets {
 
   static const AssetGenImage albumPlaceholder =
       AssetGenImage('assets/album-placeholder.png');
+  static const AssetGenImage bengaliPatternsBg =
+      AssetGenImage('assets/bengali-patterns-bg.jpg');
+  static const AssetGenImage branding = AssetGenImage('assets/branding.png');
   static const AssetGenImage emptyBox = AssetGenImage('assets/empty_box.png');
   static const AssetGenImage placeholder =
       AssetGenImage('assets/placeholder.png');
   static const AssetGenImage spotubeLogoForeground =
       AssetGenImage('assets/spotube-logo-foreground.jpg');
+  static const String spotubeLogoIco = 'assets/spotube-logo.ico';
   static const AssetGenImage spotubeLogoPng =
       AssetGenImage('assets/spotube-logo.png');
   static const String spotubeLogoSvg = 'assets/spotube-logo.svg';
+  static const AssetGenImage spotubeLogoAndroid12 =
+      AssetGenImage('assets/spotube-logo_android12.png');
   static const AssetGenImage spotubeScreenshot =
-      AssetGenImage('assets/spotube-screenshot.jpg');
+      AssetGenImage('assets/spotube-screenshot.png');
   static const AssetGenImage spotubeBanner =
       AssetGenImage('assets/spotube_banner.png');
   static const AssetGenImage success = AssetGenImage('assets/success.png');
@@ -50,11 +56,15 @@ class Assets {
   /// List of all assets
   List<dynamic> get values => [
         albumPlaceholder,
+        bengaliPatternsBg,
+        branding,
         emptyBox,
         placeholder,
         spotubeLogoForeground,
+        spotubeLogoIco,
         spotubeLogoPng,
         spotubeLogoSvg,
+        spotubeLogoAndroid12,
         spotubeScreenshot,
         spotubeBanner,
         success,
diff --git a/lib/collections/env.dart b/lib/collections/env.dart
index 8748d921..c279a0f9 100644
--- a/lib/collections/env.dart
+++ b/lib/collections/env.dart
@@ -4,14 +4,11 @@ part 'env.g.dart';
 
 @Envied(obfuscate: true, requireEnvFile: true, path: ".env")
 abstract class Env {
-  @EnviedField(varName: 'POCKETBASE_URL', defaultValue: 'http://127.0.0.1:8090')
-  static final pocketbaseUrl = _Env.pocketbaseUrl;
+  @EnviedField(varName: 'SUPABASE_URL')
+  static final supabaseUrl = _Env.supabaseUrl;
 
-  @EnviedField(varName: 'USERNAME', defaultValue: 'root')
-  static final username = _Env.username;
-
-  @EnviedField(varName: 'PASSWORD', defaultValue: '12345678')
-  static final password = _Env.password;
+  @EnviedField(varName: 'SUPABASE_API_KEY')
+  static final supabaseAnonKey = _Env.supabaseAnonKey;
 
   @EnviedField(varName: 'SPOTIFY_SECRETS')
   static final spotifySecrets = _Env.spotifySecrets.split(',').map((e) {
@@ -21,4 +18,9 @@ abstract class Env {
       "clientSecret": secrets.last,
     };
   }).toList();
+
+  @EnviedField(varName: 'ENABLE_UPDATE_CHECK', defaultValue: "1")
+  static final _enableUpdateChecker = _Env._enableUpdateChecker;
+
+  static bool get enableUpdateChecker => _enableUpdateChecker == "1";
 }
diff --git a/lib/collections/intents.dart b/lib/collections/intents.dart
index eb08adde..4b5deac0 100644
--- a/lib/collections/intents.dart
+++ b/lib/collections/intents.dart
@@ -5,8 +5,8 @@ import 'package:go_router/go_router.dart';
 import 'package:spotube/components/player/player_controls.dart';
 import 'package:spotube/collections/routes.dart';
 import 'package:spotube/models/logger.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
-import 'package:spotube/services/audio_player.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/services/audio_player/audio_player.dart';
 import 'package:spotube/utils/platform.dart';
 import 'package:window_manager/window_manager.dart';
 
@@ -23,14 +23,11 @@ class PlayPauseAction extends Action<PlayPauseIntent> {
     if (PlayerControls.focusNode.canRequestFocus) {
       PlayerControls.focusNode.requestFocus();
     }
-    final playlist = intent.ref.read(PlaylistQueueNotifier.provider);
-    final playlistNotifier = intent.ref.read(PlaylistQueueNotifier.notifier);
-    if (playlist == null) {
-      return null;
-    } else if (!PlaylistQueueNotifier.isPlaying) {
-      await playlistNotifier.play();
+
+    if (!audioPlayer.isPlaying) {
+      await audioPlayer.resume();
     } else {
-      await playlistNotifier.pause();
+      await audioPlayer.pause();
     }
     return null;
   }
@@ -93,9 +90,8 @@ class SeekIntent extends Intent {
 class SeekAction extends Action<SeekIntent> {
   @override
   invoke(intent) async {
-    final playlist = intent.ref.read(PlaylistQueueNotifier.provider);
-    final playlistNotifier = intent.ref.read(PlaylistQueueNotifier.notifier);
-    if (playlist == null || playlist.isLoading) {
+    final playlist = intent.ref.read(ProxyPlaylistNotifier.provider);
+    if (playlist.isFetching) {
       DirectionalFocusAction().invoke(
         DirectionalFocusIntent(
           intent.forward ? TraversalDirection.right : TraversalDirection.left,
@@ -103,9 +99,8 @@ class SeekAction extends Action<SeekIntent> {
       );
       return null;
     }
-    final position =
-        (await audioPlayer.getCurrentPosition() ?? Duration.zero).inSeconds;
-    await playlistNotifier.seek(
+    final position = (await audioPlayer.position ?? Duration.zero).inSeconds;
+    await audioPlayer.seek(
       Duration(
         seconds: intent.forward ? position + 5 : position - 5,
       ),
diff --git a/lib/collections/language_codes.dart b/lib/collections/language_codes.dart
new file mode 100644
index 00000000..8cd08c84
--- /dev/null
+++ b/lib/collections/language_codes.dart
@@ -0,0 +1,752 @@
+class ISOLanguageName {
+  final String name;
+  final String nativeName;
+
+  const ISOLanguageName({
+    required this.name,
+    required this.nativeName,
+  });
+}
+
+// Uncomment the languages as we add support for them
+// Currently supported: bn,en,fr,hi
+abstract class LanguageLocals {
+  static final Map isoLangs = {
+    // "ab": const ISOLanguageName(
+    //   name: "Abkhaz",
+    //   nativeName: "аҧсуа",
+    // ),
+    // "aa": const ISOLanguageName(
+    //   name: "Afar",
+    //   nativeName: "Afaraf",
+    // ),
+    // "af": const ISOLanguageName(
+    //   name: "Afrikaans",
+    //   nativeName: "Afrikaans",
+    // ),
+    // "ak": const ISOLanguageName(
+    //   name: "Akan",
+    //   nativeName: "Akan",
+    // ),
+    // "sq": const ISOLanguageName(
+    //   name: "Albanian",
+    //   nativeName: "Shqip",
+    // ),
+    // "am": const ISOLanguageName(
+    //   name: "Amharic",
+    //   nativeName: "አማርኛ",
+    // ),
+    // "ar": const ISOLanguageName(
+    //   name: "Arabic",
+    //   nativeName: "العربية",
+    // ),
+    // "an": const ISOLanguageName(
+    //   name: "Aragonese",
+    //   nativeName: "Aragonés",
+    // ),
+    // "hy": const ISOLanguageName(
+    //   name: "Armenian",
+    //   nativeName: "Հայերեն",
+    // ),
+    // "as": const ISOLanguageName(
+    //   name: "Assamese",
+    //   nativeName: "অসমীয়া",
+    // ),
+    // "av": const ISOLanguageName(
+    //   name: "Avaric",
+    //   nativeName: "авар мацӀ, магӀарул мацӀ",
+    // ),
+    // "ae": const ISOLanguageName(
+    //   name: "Avestan",
+    //   nativeName: "avesta",
+    // ),
+    // "ay": const ISOLanguageName(
+    //   name: "Aymara",
+    //   nativeName: "aymar aru",
+    // ),
+    // "az": const ISOLanguageName(
+    //   name: "Azerbaijani",
+    //   nativeName: "azərbaycan dili",
+    // ),
+    // "bm": const ISOLanguageName(
+    //   name: "Bambara",
+    //   nativeName: "bamanankan",
+    // ),
+    // "ba": const ISOLanguageName(
+    //   name: "Bashkir",
+    //   nativeName: "башҡорт теле",
+    // ),
+    // "eu": const ISOLanguageName(
+    //   name: "Basque",
+    //   nativeName: "euskara,",
+    // ),
+    // "be": const ISOLanguageName(
+    //   name: "Belarusian",
+    //   nativeName: "Беларуская",
+    // ),
+    "bn": const ISOLanguageName(
+      name: "Bengali",
+      nativeName: "বাংলা",
+    ),
+    // "bh": const ISOLanguageName(
+    //   name: "Bihari",
+    //   nativeName: "भोजपुरी",
+    // ),
+    // "bi": const ISOLanguageName(
+    //   name: "Bislama",
+    //   nativeName: "Bislama",
+    // ),
+    // "bs": const ISOLanguageName(
+    //   name: "Bosnian",
+    //   nativeName: "bosanski jezik",
+    // ),
+    // "br": const ISOLanguageName(
+    //   name: "Breton",
+    //   nativeName: "brezhoneg",
+    // ),
+    // "bg": const ISOLanguageName(
+    //   name: "Bulgarian",
+    //   nativeName: "български език",
+    // ),
+    // "my": const ISOLanguageName(
+    //   name: "Burmese",
+    //   nativeName: "ဗမာစာ",
+    // ),
+    // "ca": const ISOLanguageName(
+    //   name: "Catalan; Valencian",
+    //   nativeName: "Català",
+    // ),
+    // "ch": const ISOLanguageName(
+    //   name: "Chamorro",
+    //   nativeName: "Chamoru",
+    // ),
+    // "ce": const ISOLanguageName(
+    //   name: "Chechen",
+    //   nativeName: "нохчийн мотт",
+    // ),
+    // "ny": const ISOLanguageName(
+    //   name: "Chichewa",
+    //   nativeName: "chiCheŵa",
+    // ),
+    // "zh": const ISOLanguageName(
+    //   name: "Chinese",
+    //   nativeName: "汉语",
+    // ),
+    // "cv": const ISOLanguageName(
+    //   name: "Chuvash",
+    //   nativeName: "чӑваш чӗлхи",
+    // ),
+    // "kw": const ISOLanguageName(
+    //   name: "Cornish",
+    //   nativeName: "Kernewek",
+    // ),
+    // "co": const ISOLanguageName(
+    //   name: "Corsican",
+    //   nativeName: "lingua corsa",
+    // ),
+    // "cr": const ISOLanguageName(
+    //   name: "Cree",
+    //   nativeName: "ᓀᐦᐃᔭᐍᐏᐣ",
+    // ),
+    // "hr": const ISOLanguageName(
+    //   name: "Croatian",
+    //   nativeName: "hrvatski",
+    // ),
+    // "cs": const ISOLanguageName(
+    //   name: "Czech",
+    //   nativeName: "česky, čeština",
+    // ),
+    // "da": const ISOLanguageName(
+    //   name: "Danish",
+    //   nativeName: "dansk",
+    // ),
+    // "dv": const ISOLanguageName(
+    //   name: "Maldivian;",
+    //   nativeName: "ދިވެހި",
+    // ),
+    // "nl": const ISOLanguageName(
+    //   name: "Dutch",
+    //   nativeName: "Vlaams",
+    // ),
+    "en": const ISOLanguageName(
+      name: "English",
+      nativeName: "English",
+    ),
+    // "eo": const ISOLanguageName(
+    //   name: "Esperanto",
+    //   nativeName: "Esperanto",
+    // ),
+    // "et": const ISOLanguageName(
+    //   name: "Estonian",
+    //   nativeName: "eesti",
+    // ),
+    // "ee": const ISOLanguageName(
+    //   name: "Ewe",
+    //   nativeName: "Eʋegbe",
+    // ),
+    // "fo": const ISOLanguageName(
+    //   name: "Faroese",
+    //   nativeName: "føroyskt",
+    // ),
+    // "fj": const ISOLanguageName(
+    //   name: "Fijian",
+    //   nativeName: "vosa Vakaviti",
+    // ),
+    // "fi": const ISOLanguageName(
+    //   name: "Finnish",
+    //   nativeName: "suomi",
+    // ),
+    "fr": const ISOLanguageName(
+      name: "French",
+      nativeName: "français",
+    ),
+    // "ff": const ISOLanguageName(
+    //   name: "Fula; Fulah; Pulaar; Pular",
+    //   nativeName: "Fulfulde, Pulaar, Pular",
+    // ),
+    // "gl": const ISOLanguageName(
+    //   name: "Galician",
+    //   nativeName: "Galego",
+    // ),
+    // "ka": const ISOLanguageName(
+    //   name: "Georgian",
+    //   nativeName: "ქართული",
+    // ),
+    "de": const ISOLanguageName(
+      name: "German",
+      nativeName: "Deutsch",
+    ),
+    // "el": const ISOLanguageName(
+    //   name: "Greek, Modern",
+    //   nativeName: "Ελληνικά",
+    // ),
+    // "gn": const ISOLanguageName(
+    //   name: "Guaraní",
+    //   nativeName: "Avañeẽ",
+    // ),
+    // "gu": const ISOLanguageName(
+    //   name: "Gujarati",
+    //   nativeName: "ગુજરાતી",
+    // ),
+    // "ht": const ISOLanguageName(
+    //   name: "Haitian; Haitian Creole",
+    //   nativeName: "Kreyòl ayisyen",
+    // ),
+    // "ha": const ISOLanguageName(
+    //   name: "Hausa",
+    //   nativeName: "Hausa, هَوُسَ",
+    // ),
+    // "he": const ISOLanguageName(
+    //   name: "Hebrew (modern)",
+    //   nativeName: "עברית",
+    // ),
+    // "hz": const ISOLanguageName(
+    //   name: "Herero",
+    //   nativeName: "Otjiherero",
+    // ),
+    "hi": const ISOLanguageName(
+      name: "Hindi",
+      nativeName: "हिन्दी, हिंदी",
+    ),
+    // "ho": const ISOLanguageName(
+    //   name: "Hiri Motu",
+    //   nativeName: "Hiri Motu",
+    // ),
+    // "hu": const ISOLanguageName(
+    //   name: "Hungarian",
+    //   nativeName: "Magyar",
+    // ),
+    // "ia": const ISOLanguageName(
+    //   name: "Interlingua",
+    //   nativeName: "Interlingua",
+    // ),
+    // "id": const ISOLanguageName(
+    //   name: "Indonesian",
+    //   nativeName: "Bahasa Indonesia",
+    // ),
+    // "ie": const ISOLanguageName(
+    //   name: "Interlingue",
+    //   nativeName: "Occidental",
+    // ),
+    // "ga": const ISOLanguageName(
+    //   name: "Irish",
+    //   nativeName: "Gaeilge",
+    // ),
+    // "ig": const ISOLanguageName(
+    //   name: "Igbo",
+    //   nativeName: "Asụsụ Igbo",
+    // ),
+    // "ik": const ISOLanguageName(
+    //   name: "Inupiaq",
+    //   nativeName: "Iñupiaq, Iñupiatun",
+    // ),
+    // "io": const ISOLanguageName(
+    //   name: "Ido",
+    //   nativeName: "Ido",
+    // ),
+    // "is": const ISOLanguageName(
+    //   name: "Icelandic",
+    //   nativeName: "Íslenska",
+    // ),
+    // "it": const ISOLanguageName(
+    //   name: "Italian",
+    //   nativeName: "Italiano",
+    // ),
+    // "iu": const ISOLanguageName(
+    //   name: "Inuktitut",
+    //   nativeName: "ᐃᓄᒃᑎᑐᑦ",
+    // ),
+    "ja": const ISOLanguageName(
+      name: "Japanese",
+      nativeName: "日本語",
+    ),
+    // "jv": const ISOLanguageName(
+    //   name: "Javanese",
+    //   nativeName: "basa Jawa",
+    // ),
+    // "kl": const ISOLanguageName(
+    //   name: "Kalaallisut, Greenlandic",
+    //   nativeName: "kalaallisut, kalaallit oqaasii",
+    // ),
+    // "kn": const ISOLanguageName(
+    //   name: "Kannada",
+    //   nativeName: "ಕನ್ನಡ",
+    // ),
+    // "kr": const ISOLanguageName(
+    //   name: "Kanuri",
+    //   nativeName: "Kanuri",
+    // ),
+    // "ks": const ISOLanguageName(
+    //   name: "Kashmiri",
+    //   nativeName: "कश्मीरी, كشميري‎",
+    // ),
+    // "kk": const ISOLanguageName(
+    //   name: "Kazakh",
+    //   nativeName: "Қазақ тілі",
+    // ),
+    // "km": const ISOLanguageName(
+    //   name: "Khmer",
+    //   nativeName: "ភាសាខ្មែរ",
+    // ),
+    // "ki": const ISOLanguageName(
+    //   name: "Kikuyu, Gikuyu",
+    //   nativeName: "Gĩkũyũ",
+    // ),
+    // "rw": const ISOLanguageName(
+    //   name: "Kinyarwanda",
+    //   nativeName: "Ikinyarwanda",
+    // ),
+    // "ky": const ISOLanguageName(
+    //   name: "Kirghiz, Kyrgyz",
+    //   nativeName: "кыргыз тили",
+    // ),
+    // "kv": const ISOLanguageName(
+    //   name: "Komi",
+    //   nativeName: "коми кыв",
+    // ),
+    // "kg": const ISOLanguageName(
+    //   name: "Kongo",
+    //   nativeName: "KiKongo",
+    // ),
+    // "ko": const ISOLanguageName(
+    //   name: "Korean",
+    //   nativeName: "한국어 (韓國語), 조선말 (朝鮮語)",
+    // ),
+    // "ku": const ISOLanguageName(
+    //   name: "Kurdish",
+    //   nativeName: "Kurdî, كوردی‎",
+    // ),
+    // "kj": const ISOLanguageName(
+    //   name: "Kwanyama, Kuanyama",
+    //   nativeName: "Kuanyama",
+    // ),
+    // "la": const ISOLanguageName(
+    //   name: "Latin",
+    //   nativeName: "latine, lingua latina",
+    // ),
+    // "lb": const ISOLanguageName(
+    //   name: "Luxembourgish, Letzeburgesch",
+    //   nativeName: "Lëtzebuergesch",
+    // ),
+    // "lg": const ISOLanguageName(
+    //   name: "Luganda",
+    //   nativeName: "Luganda",
+    // ),
+    // "li": const ISOLanguageName(
+    //   name: "Limburgish, Limburgan, Limburger",
+    //   nativeName: "Limburgs",
+    // ),
+    // "ln": const ISOLanguageName(
+    //   name: "Lingala",
+    //   nativeName: "Lingála",
+    // ),
+    // "lo": const ISOLanguageName(
+    //   name: "Lao",
+    //   nativeName: "ພາສາລາວ",
+    // ),
+    // "lt": const ISOLanguageName(
+    //   name: "Lithuanian",
+    //   nativeName: "lietuvių kalba",
+    // ),
+    // "lu": const ISOLanguageName(
+    //   name: "Luba-Katanga",
+    //   nativeName: "",
+    // ),
+    // "lv": const ISOLanguageName(
+    //   name: "Latvian",
+    //   nativeName: "latviešu valoda",
+    // ),
+    // "gv": const ISOLanguageName(
+    //   name: "Manx",
+    //   nativeName: "Gaelg, Gailck",
+    // ),
+    // "mk": const ISOLanguageName(
+    //   name: "Macedonian",
+    //   nativeName: "македонски јазик",
+    // ),
+    // "mg": const ISOLanguageName(
+    //   name: "Malagasy",
+    //   nativeName: "Malagasy fiteny",
+    // ),
+    // "ms": const ISOLanguageName(
+    //   name: "Malay",
+    //   nativeName: "bahasa Melayu, بهاس ملايو‎",
+    // ),
+    // "ml": const ISOLanguageName(
+    //   name: "Malayalam",
+    //   nativeName: "മലയാളം",
+    // ),
+    // "mt": const ISOLanguageName(
+    //   name: "Maltese",
+    //   nativeName: "Malti",
+    // ),
+    // "mi": const ISOLanguageName(
+    //   name: "Māori",
+    //   nativeName: "te reo Māori",
+    // ),
+    // "mr": const ISOLanguageName(
+    //   name: "Marathi (Marāṭhī)",
+    //   nativeName: "मराठी",
+    // ),
+    // "mh": const ISOLanguageName(
+    //   name: "Marshallese",
+    //   nativeName: "Kajin M̧ajeļ",
+    // ),
+    // "mn": const ISOLanguageName(
+    //   name: "Mongolian",
+    //   nativeName: "монгол",
+    // ),
+    // "na": const ISOLanguageName(
+    //   name: "Nauru",
+    //   nativeName: "Ekakairũ Naoero",
+    // ),
+    // "nv": const ISOLanguageName(
+    //   name: "Navajo, Navaho",
+    //   nativeName: "Diné bizaad, Dinékʼehǰí",
+    // ),
+    // "nb": const ISOLanguageName(
+    //   name: "Norwegian Bokmål",
+    //   nativeName: "Norsk bokmål",
+    // ),
+    // "nd": const ISOLanguageName(
+    //   name: "North Ndebele",
+    //   nativeName: "isiNdebele",
+    // ),
+    // "ne": const ISOLanguageName(
+    //   name: "Nepali",
+    //   nativeName: "नेपाली",
+    // ),
+    // "ng": const ISOLanguageName(
+    //   name: "Ndonga",
+    //   nativeName: "Owambo",
+    // ),
+    // "nn": const ISOLanguageName(
+    //   name: "Norwegian Nynorsk",
+    //   nativeName: "Norsk nynorsk",
+    // ),
+    // "no": const ISOLanguageName(
+    //   name: "Norwegian",
+    //   nativeName: "Norsk",
+    // ),
+    // "ii": const ISOLanguageName(
+    //   name: "Nuosu",
+    //   nativeName: "ꆈꌠ꒿ Nuosuhxop",
+    // ),
+    // "nr": const ISOLanguageName(
+    //   name: "South Ndebele",
+    //   nativeName: "isiNdebele",
+    // ),
+    // "oc": const ISOLanguageName(
+    //   name: "Occitan",
+    //   nativeName: "Occitan",
+    // ),
+    // "oj": const ISOLanguageName(
+    //   name: "Ojibwe, Ojibwa",
+    //   nativeName: "ᐊᓂᔑᓈᐯᒧᐎᓐ",
+    // ),
+    // "cu": const ISOLanguageName(
+    //   name: "Old Church Slavonic",
+    //   nativeName: "ѩзыкъ словѣньскъ",
+    // ),
+    // "om": const ISOLanguageName(
+    //   name: "Oromo",
+    //   nativeName: "Afaan Oromoo",
+    // ),
+    // "or": const ISOLanguageName(
+    //   name: "Oriya",
+    //   nativeName: "ଓଡ଼ିଆ",
+    // ),
+    // "os": const ISOLanguageName(
+    //   name: "Ossetian, Ossetic",
+    //   nativeName: "ирон æвзаг",
+    // ),
+    // "pa": const ISOLanguageName(
+    //   name: "Panjabi, Punjabi",
+    //   nativeName: "ਪੰਜਾਬੀ, پنجابی‎",
+    // ),
+    // "pi": const ISOLanguageName(
+    //   name: "Pāli",
+    //   nativeName: "पाऴि",
+    // ),
+    // "fa": const ISOLanguageName(
+    //   name: "Persian",
+    //   nativeName: "فارسی",
+    // ),
+    // "pl": const ISOLanguageName(
+    //   name: "Polish",
+    //   nativeName: "polski",
+    // ),
+    // "ps": const ISOLanguageName(
+    //   name: "Pashto, Pushto",
+    //   nativeName: "پښتو",
+    // ),
+    // "pt": const ISOLanguageName(
+    //   name: "Portuguese",
+    //   nativeName: "Português",
+    // ),
+    // "qu": const ISOLanguageName(
+    //   name: "Quechua",
+    //   nativeName: "Runa Simi, Kichwa",
+    // ),
+    // "rm": const ISOLanguageName(
+    //   name: "Romansh",
+    //   nativeName: "rumantsch grischun",
+    // ),
+    // "rn": const ISOLanguageName(
+    //   name: "Kirundi",
+    //   nativeName: "kiRundi",
+    // ),
+    // "ro": const ISOLanguageName(
+    //   name: "Romanian, Moldavian, Moldovan",
+    //   nativeName: "română",
+    // ),
+    // "ru": const ISOLanguageName(
+    //   name: "Russian",
+    //   nativeName: "русский язык",
+    // ),
+    // "sa": const ISOLanguageName(
+    //   name: "Sanskrit (Saṁskṛta)",
+    //   nativeName: "संस्कृतम्",
+    // ),
+    // "sc": const ISOLanguageName(
+    //   name: "Sardinian",
+    //   nativeName: "sardu",
+    // ),
+    // "sd": const ISOLanguageName(
+    //   name: "Sindhi",
+    //   nativeName: "सिन्धी, سنڌي، سندھی‎",
+    // ),
+    // "se": const ISOLanguageName(
+    //   name: "Northern Sami",
+    //   nativeName: "Davvisámegiella",
+    // ),
+    // "sm": const ISOLanguageName(
+    //   name: "Samoan",
+    //   nativeName: "gagana faa Samoa",
+    // ),
+    // "sg": const ISOLanguageName(
+    //   name: "Sango",
+    //   nativeName: "yângâ tî sängö",
+    // ),
+    // "sr": const ISOLanguageName(
+    //   name: "Serbian",
+    //   nativeName: "српски језик",
+    // ),
+    // "gd": const ISOLanguageName(
+    //   name: "Scottish Gaelic; Gaelic",
+    //   nativeName: "Gàidhlig",
+    // ),
+    // "sn": const ISOLanguageName(
+    //   name: "Shona",
+    //   nativeName: "chiShona",
+    // ),
+    // "si": const ISOLanguageName(
+    //   name: "Sinhala, Sinhalese",
+    //   nativeName: "සිංහල",
+    // ),
+    // "sk": const ISOLanguageName(
+    //   name: "Slovak",
+    //   nativeName: "slovenčina",
+    // ),
+    // "sl": const ISOLanguageName(
+    //   name: "Slovene",
+    //   nativeName: "slovenščina",
+    // ),
+    // "so": const ISOLanguageName(
+    //   name: "Somali",
+    //   nativeName: "Soomaaliga, af Soomaali",
+    // ),
+    // "st": const ISOLanguageName(
+    //   name: "Southern Sotho",
+    //   nativeName: "Sesotho",
+    // ),
+    // "es": const ISOLanguageName(
+    //   name: "Spanish; Castilian",
+    //   nativeName: "español, castellano",
+    // ),
+    // "su": const ISOLanguageName(
+    //   name: "Sundanese",
+    //   nativeName: "Basa Sunda",
+    // ),
+    // "sw": const ISOLanguageName(
+    //   name: "Swahili",
+    //   nativeName: "Kiswahili",
+    // ),
+    // "ss": const ISOLanguageName(
+    //   name: "Swati",
+    //   nativeName: "SiSwati",
+    // ),
+    // "sv": const ISOLanguageName(
+    //   name: "Swedish",
+    //   nativeName: "svenska",
+    // ),
+    // "ta": const ISOLanguageName(
+    //   name: "Tamil",
+    //   nativeName: "தமிழ்",
+    // ),
+    // "te": const ISOLanguageName(
+    //   name: "Telugu",
+    //   nativeName: "తెలుగు",
+    // ),
+    // "tg": const ISOLanguageName(
+    //   name: "Tajik",
+    //   nativeName: "тоҷикӣ, toğikī, تاجیکی‎",
+    // ),
+    // "th": const ISOLanguageName(
+    //   name: "Thai",
+    //   nativeName: "ไทย",
+    // ),
+    // "ti": const ISOLanguageName(
+    //   name: "Tigrinya",
+    //   nativeName: "ትግርኛ",
+    // ),
+    // "bo": const ISOLanguageName(
+    //   name: "Tibetan Standard, Tibetan, Central",
+    //   nativeName: "བོད་ཡིག",
+    // ),
+    // "tk": const ISOLanguageName(
+    //   name: "Turkmen",
+    //   nativeName: "Türkmen, Түркмен",
+    // ),
+    // "tl": const ISOLanguageName(
+    //   name: "Tagalog",
+    //   nativeName: "Wikang Tagalog, ᜏᜒᜃᜅ᜔ ᜆᜄᜎᜓᜄ᜔",
+    // ),
+    // "tn": const ISOLanguageName(
+    //   name: "Tswana",
+    //   nativeName: "Setswana",
+    // ),
+    // "to": const ISOLanguageName(
+    //   name: "Tonga (Tonga Islands)",
+    //   nativeName: "faka Tonga",
+    // ),
+    // "tr": const ISOLanguageName(
+    //   name: "Turkish",
+    //   nativeName: "Türkçe",
+    // ),
+    // "ts": const ISOLanguageName(
+    //   name: "Tsonga",
+    //   nativeName: "Xitsonga",
+    // ),
+    // "tt": const ISOLanguageName(
+    //   name: "Tatar",
+    //   nativeName: "татарча, tatarça, تاتارچا‎",
+    // ),
+    // "tw": const ISOLanguageName(
+    //   name: "Twi",
+    //   nativeName: "Twi",
+    // ),
+    // "ty": const ISOLanguageName(
+    //   name: "Tahitian",
+    //   nativeName: "Reo Tahiti",
+    // ),
+    // "ug": const ISOLanguageName(
+    //   name: "Uighur, Uyghur",
+    //   nativeName: "Uyƣurqə, ئۇيغۇرچە‎",
+    // ),
+    // "uk": const ISOLanguageName(
+    //   name: "Ukrainian",
+    //   nativeName: "українська",
+    // ),
+    // "ur": const ISOLanguageName(
+    //   name: "Urdu",
+    //   nativeName: "اردو",
+    // ),
+    // "uz": const ISOLanguageName(
+    //   name: "Uzbek",
+    //   nativeName: "zbek, Ўзбек, أۇزبېك‎",
+    // ),
+    // "ve": const ISOLanguageName(
+    //   name: "Venda",
+    //   nativeName: "Tshivenḓa",
+    // ),
+    // "vi": const ISOLanguageName(
+    //   name: "Vietnamese",
+    //   nativeName: "Tiếng Việt",
+    // ),
+    // "vo": const ISOLanguageName(
+    //   name: "Volapük",
+    //   nativeName: "Volapük",
+    // ),
+    // "wa": const ISOLanguageName(
+    //   name: "Walloon",
+    //   nativeName: "Walon",
+    // ),
+    // "cy": const ISOLanguageName(
+    //   name: "Welsh",
+    //   nativeName: "Cymraeg",
+    // ),
+    // "wo": const ISOLanguageName(
+    //   name: "Wolof",
+    //   nativeName: "Wollof",
+    // ),
+    // "fy": const ISOLanguageName(
+    //   name: "Western Frisian",
+    //   nativeName: "Frysk",
+    // ),
+    // "xh": const ISOLanguageName(
+    //   name: "Xhosa",
+    //   nativeName: "isiXhosa",
+    // ),
+    // "yi": const ISOLanguageName(
+    //   name: "Yiddish",
+    //   nativeName: "ייִדיש",
+    // ),
+    // "yo": const ISOLanguageName(
+    //   name: "Yoruba",
+    //   nativeName: "Yorùbá",
+    // ),
+    // "za": const ISOLanguageName(
+    //   name: "Zhuang, Chuang",
+    //   nativeName: "Saɯ cueŋƅ, Saw cuengh",
+    // )
+  };
+
+  static ISOLanguageName getDisplayLanguage(key) {
+    if (isoLangs.containsKey(key)) {
+      return isoLangs[key]!;
+    } else {
+      throw Exception("Language key incorrect");
+    }
+  }
+}
diff --git a/lib/collections/routes.dart b/lib/collections/routes.dart
index 3b0dfccf..9662419d 100644
--- a/lib/collections/routes.dart
+++ b/lib/collections/routes.dart
@@ -3,9 +3,12 @@ import 'package:flutter/widgets.dart';
 import 'package:go_router/go_router.dart';
 import 'package:spotify/spotify.dart' hide Search;
 import 'package:spotube/pages/home/home.dart';
+import 'package:spotube/pages/library/playlist_generate/playlist_generate.dart';
+import 'package:spotube/pages/lyrics/mini_lyrics.dart';
 import 'package:spotube/pages/search/search.dart';
 import 'package:spotube/pages/settings/blacklist.dart';
 import 'package:spotube/pages/settings/about.dart';
+import 'package:spotube/pages/settings/logs.dart';
 import 'package:spotube/utils/platform.dart';
 import 'package:spotube/components/shared/spotube_page_route.dart';
 import 'package:spotube/pages/album/album.dart';
@@ -20,6 +23,8 @@ import 'package:spotube/pages/root/root_app.dart';
 import 'package:spotube/pages/settings/settings.dart';
 import 'package:spotube/pages/mobile_login/mobile_login.dart';
 
+import '../pages/library/playlist_generate/playlist_generate_result.dart';
+
 final rootNavigatorKey = Catcher.navigatorKey;
 final shellRouteNavigatorKey = GlobalKey<NavigatorState>();
 final router = GoRouter(
@@ -31,41 +36,63 @@ final router = GoRouter(
       routes: [
         GoRoute(
           path: "/",
-          pageBuilder: (context, state) => SpotubePage(child: const HomePage()),
+          pageBuilder: (context, state) => const SpotubePage(child: HomePage()),
         ),
         GoRoute(
           path: "/search",
           name: "Search",
           pageBuilder: (context, state) =>
-              SpotubePage(child: const SearchPage()),
+              const SpotubePage(child: SearchPage()),
         ),
         GoRoute(
-          path: "/library",
-          name: "Library",
-          pageBuilder: (context, state) =>
-              SpotubePage(child: const LibraryPage()),
-        ),
+            path: "/library",
+            name: "Library",
+            pageBuilder: (context, state) =>
+                const SpotubePage(child: LibraryPage()),
+            routes: [
+              GoRoute(
+                  path: "generate",
+                  pageBuilder: (context, state) =>
+                      const SpotubePage(child: PlaylistGeneratorPage()),
+                  routes: [
+                    GoRoute(
+                      path: "result",
+                      pageBuilder: (context, state) => SpotubePage(
+                        child: PlaylistGenerateResultPage(
+                          state:
+                              state.extra as PlaylistGenerateResultRouteState,
+                        ),
+                      ),
+                    ),
+                  ]),
+            ]),
         GoRoute(
           path: "/lyrics",
           name: "Lyrics",
           pageBuilder: (context, state) =>
-              SpotubePage(child: const LyricsPage()),
+              const SpotubePage(child: LyricsPage()),
         ),
         GoRoute(
           path: "/settings",
-          pageBuilder: (context, state) => SpotubePage(
-            child: const SettingsPage(),
+          pageBuilder: (context, state) => const SpotubePage(
+            child: SettingsPage(),
           ),
           routes: [
             GoRoute(
               path: "blacklist",
-              pageBuilder: (context, state) => SpotubePage(
+              pageBuilder: (context, state) => SpotubeSlidePage(
                 child: const BlackListPage(),
               ),
             ),
+            GoRoute(
+              path: "logs",
+              pageBuilder: (context, state) => SpotubeSlidePage(
+                child: const LogsPage(),
+              ),
+            ),
             GoRoute(
               path: "about",
-              pageBuilder: (context, state) => SpotubePage(
+              pageBuilder: (context, state) => SpotubeSlidePage(
                 child: const AboutSpotube(),
               ),
             ),
@@ -96,6 +123,13 @@ final router = GoRouter(
         ),
       ],
     ),
+    GoRoute(
+      path: "/mini-player",
+      parentNavigatorKey: rootNavigatorKey,
+      pageBuilder: (context, state) => const SpotubePage(
+        child: MiniLyricsPage(),
+      ),
+    ),
     GoRoute(
       path: "/login",
       parentNavigatorKey: rootNavigatorKey,
@@ -106,16 +140,16 @@ final router = GoRouter(
     GoRoute(
       path: "/login-tutorial",
       parentNavigatorKey: rootNavigatorKey,
-      pageBuilder: (context, state) => SpotubePage(
-        child: const LoginTutorial(),
+      pageBuilder: (context, state) => const SpotubePage(
+        child: LoginTutorial(),
       ),
     ),
     GoRoute(
       path: "/player",
       parentNavigatorKey: rootNavigatorKey,
       pageBuilder: (context, state) {
-        return SpotubePage(
-          child: const PlayerView(),
+        return const SpotubePage(
+          child: PlayerView(),
         );
       },
     ),
diff --git a/lib/collections/side_bar_tiles.dart b/lib/collections/side_bar_tiles.dart
index 9115b0d1..551d70d7 100644
--- a/lib/collections/side_bar_tiles.dart
+++ b/lib/collections/side_bar_tiles.dart
@@ -1,22 +1,33 @@
 import 'package:flutter/material.dart';
 import 'package:spotube/collections/spotube_icons.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 class SideBarTiles {
   final IconData icon;
   final String title;
-  SideBarTiles({required this.icon, required this.title});
+  final String id;
+  SideBarTiles({required this.icon, required this.title, required this.id});
 }
 
-List<SideBarTiles> sidebarTileList = [
-  SideBarTiles(icon: SpotubeIcons.home, title: "Browse"),
-  SideBarTiles(icon: SpotubeIcons.search, title: "Search"),
-  SideBarTiles(icon: SpotubeIcons.library, title: "Library"),
-  SideBarTiles(icon: SpotubeIcons.music, title: "Lyrics")
-];
+List<SideBarTiles> getSidebarTileList(AppLocalizations l10n) => [
+      SideBarTiles(id: "browse", icon: SpotubeIcons.home, title: l10n.browse),
+      SideBarTiles(id: "search", icon: SpotubeIcons.search, title: l10n.search),
+      SideBarTiles(
+          id: "library", icon: SpotubeIcons.library, title: l10n.library),
+      SideBarTiles(id: "lyrics", icon: SpotubeIcons.music, title: l10n.lyrics),
+    ];
 
-List<SideBarTiles> navbarTileList = [
-  SideBarTiles(icon: SpotubeIcons.home, title: "Browse"),
-  SideBarTiles(icon: SpotubeIcons.search, title: "Search"),
-  SideBarTiles(icon: SpotubeIcons.library, title: "Library"),
-  SideBarTiles(icon: SpotubeIcons.settings, title: "Settings")
-];
+List<SideBarTiles> getNavbarTileList(AppLocalizations l10n) => [
+      SideBarTiles(id: "browse", icon: SpotubeIcons.home, title: l10n.browse),
+      SideBarTiles(id: "search", icon: SpotubeIcons.search, title: l10n.search),
+      SideBarTiles(
+        id: "library",
+        icon: SpotubeIcons.library,
+        title: l10n.library,
+      ),
+      SideBarTiles(
+        id: "settings",
+        icon: SpotubeIcons.settings,
+        title: l10n.settings,
+      )
+    ];
diff --git a/lib/collections/spotify_markets.dart b/lib/collections/spotify_markets.dart
index 7bde6bbb..a24fd768 100644
--- a/lib/collections/spotify_markets.dart
+++ b/lib/collections/spotify_markets.dart
@@ -1,188 +1,187 @@
 // Country Codes contributed by momobobe <https://github.com/momobobe>
 
 final spotifyMarkets = [
-  ["AL", "Albania (AL)"],
-  ["DZ", "Algeria (DZ)"],
-  ["AD", "Andorra (AD)"],
-  ["AO", "Angola (AO)"],
-  ["AG", "Antigua and Barbuda (AG)"],
-  ["AR", "Argentina (AR)"],
-  ["AM", "Armenia (AM)"],
-  ["AU", "Australia (AU)"],
-  ["AT", "Austria (AT)"],
-  ["AZ", "Azerbaijan (AZ)"],
-  ["BH", "Bahrain (BH)"],
-  ["BD", "Bangladesh (BD)"],
-  ["BB", "Barbados (BB)"],
-  ["BY", "Belarus (BY)"],
-  ["BE", "Belgium (BE)"],
-  ["BZ", "Belize (BZ)"],
-  ["BJ", "Benin (BJ)"],
-  ["BT", "Bhutan (BT)"],
-  ["BO", "Bolivia (BO)"],
-  ["BA", "Bosnia and Herzegovina  (BA)"],
-  ["BW", "Botswana (BW)"],
-  ["BR", "Brazil (BR)"],
-  ["BN", "Brunei Darussalam (BN)"],
-  ["BG", "Bulgaria (BG)"],
-  ["BF", "Burkina Faso (BF)"],
-  ["BI", "Burundi (BI)"],
-  ["CV", "Cabo Verde / Cape Verde (CV)"],
-  ["KH", "Cambodia (KH)"],
-  ["CM", "Cameroon (CM)"],
-  ["CA", "Canada (CA)"],
-  ["TD", "Chad (TD)"],
-  ["CL", "Chile (CL)"],
-  ["CO", "Colombia (CO)"],
-  ["KM", "Comoros (KM)"],
-  ["CR", "Costa Rica (CR)"],
-  ["HR", "Croatia (HR)"],
-  ["CW", "Curaçao (CW)"],
-  ["CY", "Cyprus (CY)"],
-  ["CZ", "Czech Republic (CZ)"],
-  ["CI", "Côte d'Ivoire / Ivory Coast  (CI)"],
-  ["CD", "Democratic Republic of the Congo (CD)"],
-  ["DK", "Denmark (DK)"],
-  ["DJ", "Djibouti (DJ)"],
-  ["DM", "Dominica (DM)"],
-  ["DO", "Dominican Republic (DO)"],
-  ["EC", "Ecuador (EC)"],
-  ["EG", "Egypt (EG)"],
-  ["SV", "El Salvador (SV)"],
-  ["GQ", "Equatorial Guinea (GQ)"],
-  ["EE", "Estonia (EE)"],
-  ["SZ", "Eswatini (SZ)"],
-  ["FJ", "Fiji (FJ)"],
-  ["FI", "Finland (FI)"],
-  ["FR", "France (FR)"],
-  ["GA", "Gabon (GA)"],
-  ["GE", "Georgia (GE)"],
-  ["DE", "Germany (DE)"],
-  ["GH", "Ghana (GH)"],
-  ["GR", "Greece (GR)"],
-  ["GD", "Grenada (GD)"],
-  ["GT", "Guatemala (GT)"],
-  ["GN", "Guinea (GN)"],
-  ["GW", "Guinea-Bissau (GW)"],
-  ["GY", "Guyana (GY)"],
-  ["HT", "Haiti (HT)"],
-  ["HN", "Honduras (HN)"],
-  ["HK", "Hong Kong (HK)"],
-  ["HU", "Hungary (HU)"],
-  ["IS", "Iceland (IS)"],
-  ["IN", "India (IN)"],
-  ["ID", "Indonesia (ID)"],
-  ["IQ", "Iraq (IQ)"],
-  ["IE", "Ireland (IE)"],
-  ["IL", "Israel (IL)"],
-  ["IT", "Italy (IT)"],
-  ["JM", "Jamaica (JM)"],
-  ["JP", "Japan (JP)"],
-  ["JO", "Jordan (JO)"],
-  ["KZ", "Kazakhstan (KZ)"],
-  ["KE", "Kenya (KE)"],
-  ["KI", "Kiribati (KI)"],
-  ["XK", "Kosovo (XK)"],
-  ["KW", "Kuwait (KW)"],
-  ["KG", "Kyrgyzstan (KG)"],
-  ["LA", "Laos (LA)"],
-  ["LV", "Latvia (LV)"],
-  ["LB", "Lebanon (LB)"],
-  ["LS", "Lesotho (LS)"],
-  ["LR", "Liberia (LR)"],
-  ["LY", "Libya (LY)"],
-  ["LI", "Liechtenstein (LI)"],
-  ["LT", "Lithuania (LT)"],
-  ["LU", "Luxembourg (LU)"],
-  ["MO", "Macao / Macau (MO)"],
-  ["MG", "Madagascar (MG)"],
-  ["MW", "Malawi (MW)"],
-  ["MY", "Malaysia (MY)"],
-  ["MV", "Maldives (MV)"],
-  ["ML", "Mali (ML)"],
-  ["MT", "Malta (MT)"],
-  ["MH", "Marshall Islands (MH)"],
-  ["MR", "Mauritania (MR)"],
-  ["MU", "Mauritius (MU)"],
-  ["MX", "Mexico (MX)"],
-  ["FM", "Micronesia (FM)"],
-  ["MD", "Moldova (MD)"],
-  ["MC", "Monaco (MC)"],
-  ["MN", "Mongolia (MN)"],
-  ["ME", "Montenegro (ME)"],
-  ["MA", "Morocco (MA)"],
-  ["MZ", "Mozambique (MZ)"],
-  ["NA", "Namibia (NA)"],
-  ["NR", "Nauru (NR)"],
-  ["NP", "Nepal (NP)"],
-  ["NL", "Netherlands (NL)"],
-  ["NZ", "New Zealand (NZ)"],
-  ["NI", "Nicaragua (NI)"],
-  ["NE", "Niger (NE)"],
-  ["NG", "Nigeria (NG)"],
-  ["MK", "North Macedonia (MK)"],
-  ["NO", "Norway (NO)"],
-  ["OM", "Oman (OM)"],
-  ["PK", "Pakistan (PK)"],
-  ["PW", "Palau (PW)"],
-  ["PS", "Palestine (PS)"],
-  ["PA", "Panama (PA)"],
-  ["PG", "Papua New Guinea (PG)"],
-  ["PY", "Paraguay (PY)"],
-  ["PE", "Peru (PE)"],
-  ["PH", "Philippines (PH)"],
-  ["PL", "Poland (PL)"],
-  ["PT", "Portugal (PT)"],
-  ["QA", "Qatar (QA)"],
-  ["CG", "Republic of the Congo (CG)"],
-  ["RO", "Romania (RO)"],
-  ["RU", "Russia (RU)"],
-  ["RW", "Rwanda (RW)"],
-  ["WS", "Samoa (WS)"],
-  ["SM", "San Marino (SM)"],
-  ["SA", "Saudi Arabia (SA)"],
-  ["SN", "Senegal (SN)"],
-  ["RS", "Serbia (RS)"],
-  ["SC", "Seychelles (SC)"],
-  ["SL", "Sierra Leone (SL)"],
-  ["SG", "Singapore (SG)"],
-  ["SK", "Slovakia (SK)"],
-  ["SI", "Slovenia (SI)"],
-  ["SB", "Solomon Islands (SB)"],
-  ["ZA", "South Africa (ZA)"],
-  ["KR", "South Korea (KR)"],
-  ["ES", "Spain (ES)"],
-  ["LK", "Sri Lanka (LK)"],
-  ["VC", "St Vincent and the Grenadines (VC)"],
-  ["KN", "St. Kitts and Nevis (KN)"],
-  ["LC", "St. Lucia (LC)"],
-  ["SR", "Suriname (SR)"],
-  ["SE", "Sweden (SE)"],
-  ["CH", "Switzerland (CH)"],
-  ["ST", "São Tomé and Príncipe (ST)"],
-  ["TW", "Taiwan (TW)"],
-  ["TJ", "Tajikistan (TJ)"],
-  ["TZ", "Tanzania (TZ)"],
-  ["TH", "Thailand (TH)"],
-  ["BS", "The Bahamas (BS)"],
-  ["GM", "The Gambia (GM)"],
-  ["TL", "Timor-Leste / East Timor (TL)"],
-  ["TG", "Togo (TG)"],
-  ["TO", "Tonga (TO)"],
-  ["TT", "Trinidad and Tobago (TT)"],
-  ["TN", "Tunisia (TN)"],
-  ["TR", "Turkey (TR)"],
-  ["TV", "Tuvalu (TV)"],
-  ["UG", "Uganda (UG)"],
-  ["UA", "Ukraine (UA)"],
-  ["AE", "United Arab Emirates (AE)"],
-  ["GB", "United Kingdom (GB)"],
-  ["US", "United States (US)"],
-  ["UY", "Uruguay (UY)"],
-  ["UZ", "Uzbekistan (UZ)"],
-  ["VU", "Vanuatu (VU)"],
-  ["VE", "Venezuela (VE)"],
-  ["VN", "Vietnam (VN)"],
-  ["ZM", "Zambia (ZM)"],
-  ["Z", "Zimbabwe (ZW)"],
+  ("AL", "Albania (AL)"),
+  ("DZ", "Algeria (DZ)"),
+  ("AD", "Andorra (AD)"),
+  ("AO", "Angola (AO)"),
+  ("AG", "Antigua and Barbuda (AG)"),
+  ("AR", "Argentina (AR)"),
+  ("AM", "Armenia (AM)"),
+  ("AU", "Australia (AU)"),
+  ("AT", "Austria (AT)"),
+  ("AZ", "Azerbaijan (AZ)"),
+  ("BH", "Bahrain (BH)"),
+  ("BD", "Bangladesh (BD)"),
+  ("BB", "Barbados (BB)"),
+  ("BY", "Belarus (BY)"),
+  ("BE", "Belgium (BE)"),
+  ("BZ", "Belize (BZ)"),
+  ("BJ", "Benin (BJ)"),
+  ("BT", "Bhutan (BT)"),
+  ("BO", "Bolivia (BO)"),
+  ("BA", "Bosnia and Herzegovina (BA)"),
+  ("BW", "Botswana (BW)"),
+  ("BR", "Brazil (BR)"),
+  ("BN", "Brunei Darussalam (BN)"),
+  ("BG", "Bulgaria (BG)"),
+  ("BF", "Burkina Faso (BF)"),
+  ("BI", "Burundi (BI)"),
+  ("CV", "Cabo Verde / Cape Verde (CV)"),
+  ("KH", "Cambodia (KH)"),
+  ("CM", "Cameroon (CM)"),
+  ("CA", "Canada (CA)"),
+  ("TD", "Chad (TD)"),
+  ("CL", "Chile (CL)"),
+  ("CO", "Colombia (CO)"),
+  ("KM", "Comoros (KM)"),
+  ("CR", "Costa Rica (CR)"),
+  ("HR", "Croatia (HR)"),
+  ("CW", "Curaçao (CW)"),
+  ("CY", "Cyprus (CY)"),
+  ("CZ", "Czech Republic (CZ)"),
+  ("CI", "Ivory Coast (CI)"),
+  ("CD", "Congo (CD)"),
+  ("DK", "Denmark (DK)"),
+  ("DJ", "Djibouti (DJ)"),
+  ("DM", "Dominica (DM)"),
+  ("DO", "Dominican Republic (DO)"),
+  ("EC", "Ecuador (EC)"),
+  ("EG", "Egypt (EG)"),
+  ("SV", "El Salvador (SV)"),
+  ("GQ", "Equatorial Guinea (GQ)"),
+  ("EE", "Estonia (EE)"),
+  ("SZ", "Eswatini (SZ)"),
+  ("FJ", "Fiji (FJ)"),
+  ("FI", "Finland (FI)"),
+  ("FR", "France (FR)"),
+  ("GA", "Gabon (GA)"),
+  ("GE", "Georgia (GE)"),
+  ("DE", "Germany (DE)"),
+  ("GH", "Ghana (GH)"),
+  ("GR", "Greece (GR)"),
+  ("GD", "Grenada (GD)"),
+  ("GT", "Guatemala (GT)"),
+  ("GN", "Guinea (GN)"),
+  ("GW", "Guinea-Bissau (GW)"),
+  ("GY", "Guyana (GY)"),
+  ("HT", "Haiti (HT)"),
+  ("HN", "Honduras (HN)"),
+  ("HK", "Hong Kong (HK)"),
+  ("HU", "Hungary (HU)"),
+  ("IS", "Iceland (IS)"),
+  ("IN", "India (IN)"),
+  ("ID", "Indonesia (ID)"),
+  ("IQ", "Iraq (IQ)"),
+  ("IE", "Ireland (IE)"),
+  ("IL", "Israel (IL)"),
+  ("IT", "Italy (IT)"),
+  ("JM", "Jamaica (JM)"),
+  ("JP", "Japan (JP)"),
+  ("JO", "Jordan (JO)"),
+  ("KZ", "Kazakhstan (KZ)"),
+  ("KE", "Kenya (KE)"),
+  ("KI", "Kiribati (KI)"),
+  ("XK", "Kosovo (XK)"),
+  ("KW", "Kuwait (KW)"),
+  ("KG", "Kyrgyzstan (KG)"),
+  ("LA", "Laos (LA)"),
+  ("LV", "Latvia (LV)"),
+  ("LB", "Lebanon (LB)"),
+  ("LS", "Lesotho (LS)"),
+  ("LR", "Liberia (LR)"),
+  ("LY", "Libya (LY)"),
+  ("LI", "Liechtenstein (LI)"),
+  ("LT", "Lithuania (LT)"),
+  ("LU", "Luxembourg (LU)"),
+  ("MO", "Macao / Macau (MO)"),
+  ("MG", "Madagascar (MG)"),
+  ("MW", "Malawi (MW)"),
+  ("MY", "Malaysia (MY)"),
+  ("MV", "Maldives (MV)"),
+  ("ML", "Mali (ML)"),
+  ("MT", "Malta (MT)"),
+  ("MH", "Marshall Islands (MH)"),
+  ("MR", "Mauritania (MR)"),
+  ("MU", "Mauritius (MU)"),
+  ("MX", "Mexico (MX)"),
+  ("FM", "Micronesia (FM)"),
+  ("MD", "Moldova (MD)"),
+  ("MC", "Monaco (MC)"),
+  ("MN", "Mongolia (MN)"),
+  ("ME", "Montenegro (ME)"),
+  ("MA", "Morocco (MA)"),
+  ("MZ", "Mozambique (MZ)"),
+  ("NA", "Namibia (NA)"),
+  ("NR", "Nauru (NR)"),
+  ("NP", "Nepal (NP)"),
+  ("NL", "Netherlands (NL)"),
+  ("NZ", "New Zealand (NZ)"),
+  ("NI", "Nicaragua (NI)"),
+  ("NE", "Niger (NE)"),
+  ("NG", "Nigeria (NG)"),
+  ("MK", "North Macedonia (MK)"),
+  ("NO", "Norway (NO)"),
+  ("OM", "Oman (OM)"),
+  ("PK", "Pakistan (PK)"),
+  ("PW", "Palau (PW)"),
+  ("PS", "Palestine (PS)"),
+  ("PA", "Panama (PA)"),
+  ("PG", "Papua New Guinea (PG)"),
+  ("PY", "Paraguay (PY)"),
+  ("PE", "Peru (PE)"),
+  ("PH", "Philippines (PH)"),
+  ("PL", "Poland (PL)"),
+  ("PT", "Portugal (PT)"),
+  ("QA", "Qatar (QA)"),
+  ("CG", "Congo (CG)"),
+  ("RO", "Romania (RO)"),
+  ("RU", "Russia (RU)"),
+  ("RW", "Rwanda (RW)"),
+  ("WS", "Samoa (WS)"),
+  ("SM", "San Marino (SM)"),
+  ("SA", "Saudi Arabia (SA)"),
+  ("SN", "Senegal (SN)"),
+  ("RS", "Serbia (RS)"),
+  ("SC", "Seychelles (SC)"),
+  ("SL", "Sierra Leone (SL)"),
+  ("SG", "Singapore (SG)"),
+  ("SK", "Slovakia (SK)"),
+  ("SI", "Slovenia (SI)"),
+  ("SB", "Solomon Islands (SB)"),
+  ("ZA", "South Africa (ZA)"),
+  ("KR", "South Korea (KR)"),
+  ("ES", "Spain (ES)"),
+  ("LK", "Sri Lanka (LK)"),
+  ("KN", "St. Kitts and Nevis (KN)"),
+  ("LC", "St. Lucia (LC)"),
+  ("SR", "Suriname (SR)"),
+  ("SE", "Sweden (SE)"),
+  ("CH", "Switzerland (CH)"),
+  ("ST", "São Tomé and Príncipe (ST)"),
+  ("TW", "Taiwan (TW)"),
+  ("TJ", "Tajikistan (TJ)"),
+  ("TZ", "Tanzania (TZ)"),
+  ("TH", "Thailand (TH)"),
+  ("BS", "The Bahamas (BS)"),
+  ("GM", "The Gambia (GM)"),
+  ("TL", "East Timor (TL)"),
+  ("TG", "Togo (TG)"),
+  ("TO", "Tonga (TO)"),
+  ("TT", "Trinidad and Tobago (TT)"),
+  ("TN", "Tunisia (TN)"),
+  ("TR", "Turkey (TR)"),
+  ("TV", "Tuvalu (TV)"),
+  ("UG", "Uganda (UG)"),
+  ("UA", "Ukraine (UA)"),
+  ("AE", "United Arab Emirates (AE)"),
+  ("GB", "United Kingdom (GB)"),
+  ("US", "United States (US)"),
+  ("UY", "Uruguay (UY)"),
+  ("UZ", "Uzbekistan (UZ)"),
+  ("VU", "Vanuatu (VU)"),
+  ("VE", "Venezuela (VE)"),
+  ("VN", "Vietnam (VN)"),
+  ("ZM", "Zambia (ZM)"),
+  ("ZW", "Zimbabwe (ZW)"),
 ];
diff --git a/lib/collections/spotube_icons.dart b/lib/collections/spotube_icons.dart
index 2866cb8f..a80de703 100644
--- a/lib/collections/spotube_icons.dart
+++ b/lib/collections/spotube_icons.dart
@@ -1,13 +1,13 @@
-import 'package:fluent_ui/fluent_ui.dart';
+import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_feather_icons/flutter_feather_icons.dart';
 
 abstract class SpotubeIcons {
-  static const home = FluentIcons.home;
+  static const home = FluentIcons.home_12_regular;
   static const search = FeatherIcons.search;
-  static const library = FluentIcons.library;
+  static const library = FluentIcons.library_16_regular;
   static const music = FeatherIcons.music;
-  static const play = FluentIcons.play;
+  static const play = FluentIcons.play_12_regular;
   static const pause = FeatherIcons.pause;
   static const skipForward = FeatherIcons.skipForward;
   static const skipBack = FeatherIcons.skipBack;
@@ -16,8 +16,8 @@ abstract class SpotubeIcons {
   static const refresh = FeatherIcons.refreshCw;
   static const settings = FeatherIcons.settings;
   static const shuffle = FeatherIcons.shuffle;
-  static const repeat = FluentIcons.repeat_all;
-  static const repeatOne = FluentIcons.repeat_one;
+  static const repeat = FluentIcons.arrow_repeat_all_16_regular;
+  static const repeatOne = Icons.repeat_one_rounded;
   static const remove = FeatherIcons.minus;
   static const removeFilled = FeatherIcons.minusCircle;
   static const add = FeatherIcons.plus;
@@ -67,4 +67,28 @@ abstract class SpotubeIcons {
   static const genres = FeatherIcons.music;
   static const zoomIn = FeatherIcons.zoomIn;
   static const zoomOut = FeatherIcons.zoomOut;
+  static const tray = FeatherIcons.chevronDown;
+  static const miniPlayer = Icons.picture_in_picture_rounded;
+  static const maximize = FeatherIcons.maximize2;
+  static const pinOn = Icons.push_pin_rounded;
+  static const pinOff = Icons.push_pin_outlined;
+  static const hoverOn = Icons.back_hand_rounded;
+  static const hoverOff = Icons.back_hand_outlined;
+  static const dragHandle = Icons.drag_indicator;
+  static const lightning = Icons.flash_on_rounded;
+  static const colorSync = FeatherIcons.activity;
+  static const language = FeatherIcons.globe;
+  static const error = FeatherIcons.alertTriangle;
+  static const piped = FeatherIcons.cloud;
+  static const magic = Icons.auto_fix_high_outlined;
+  static const selectionCheck = Icons.checklist_rounded;
+  static const volumeHigh = FeatherIcons.volume2;
+  static const volumeMedium = FeatherIcons.volume1;
+  static const volumeLow = FeatherIcons.volume;
+  static const volumeMute = FeatherIcons.volumeX;
+  static const timer = FeatherIcons.clock;
+  static const logs = FeatherIcons.fileText;
+  static const clipboard = FeatherIcons.clipboard;
+  static const youtube = FeatherIcons.youtube;
+  static const skip = FeatherIcons.fastForward;
 }
diff --git a/lib/components/album/album_card.dart b/lib/components/album/album_card.dart
index e222aa7f..afb637a0 100644
--- a/lib/components/album/album_card.dart
+++ b/lib/components/album/album_card.dart
@@ -5,8 +5,9 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/shared/playbutton_card.dart';
 import 'package:spotube/hooks/use_breakpoint_value.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/provider/spotify_provider.dart';
+import 'package:spotube/services/audio_player/audio_player.dart';
 import 'package:spotube/utils/service_utils.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
@@ -33,29 +34,24 @@ enum AlbumType {
 
 class AlbumCard extends HookConsumerWidget {
   final Album album;
-  final PlaybuttonCardViewType viewType;
   const AlbumCard(
     this.album, {
     Key? key,
-    this.viewType = PlaybuttonCardViewType.square,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context, ref) {
-    final playlist = ref.watch(PlaylistQueueNotifier.provider);
-    final playing = useStream(PlaylistQueueNotifier.playing).data ??
-        PlaylistQueueNotifier.isPlaying;
-    final playlistNotifier = ref.watch(PlaylistQueueNotifier.notifier);
+    final playlist = ref.watch(ProxyPlaylistNotifier.provider);
+    final playing =
+        useStream(audioPlayer.playingStream).data ?? audioPlayer.isPlaying;
+    final playlistNotifier = ref.watch(ProxyPlaylistNotifier.notifier);
     final queryClient = useQueryClient();
-    final query = queryClient
-        .getQuery<List<TrackSimple>, dynamic>("album-tracks/${album.id}");
     bool isPlaylistPlaying = useMemoized(
-      () =>
-          playlistNotifier.isPlayingPlaylist(query?.data ?? album.tracks ?? []),
-      [playlistNotifier, query?.data, album.tracks],
+      () => playlist.containsCollection(album.id!),
+      [playlist, album.id],
     );
     final int marginH =
-        useBreakpointValue(sm: 10, md: 15, lg: 20, xl: 20, xxl: 20);
+        useBreakpointValue(xs: 10, sm: 10, md: 15, lg: 20, xl: 20, xxl: 20);
 
     final updating = useState(false);
     final spotify = ref.watch(spotifyProvider);
@@ -65,30 +61,33 @@ class AlbumCard extends HookConsumerWidget {
           album.images,
           placeholder: ImagePlaceholder.collection,
         ),
-        viewType: viewType,
         margin: EdgeInsets.symmetric(horizontal: marginH.toDouble()),
         isPlaying: isPlaylistPlaying,
-        isLoading: isPlaylistPlaying && playlist?.isLoading == true,
+        isLoading: isPlaylistPlaying && playlist.isFetching == true,
         title: album.name!,
         description:
             "${AlbumType.from(album.albumType!).formatted} • ${TypeConversionUtils.artists_X_String<ArtistSimple>(album.artists ?? [])}",
         onTap: () {
-          ServiceUtils.navigate(context, "/album/${album.id}", extra: album);
+          ServiceUtils.push(context, "/album/${album.id}", extra: album);
         },
         onPlaybuttonPressed: () async {
           updating.value = true;
           try {
             if (isPlaylistPlaying && playing) {
-              return playlistNotifier.pause();
+              return audioPlayer.pause();
             } else if (isPlaylistPlaying && !playing) {
-              return playlistNotifier.resume();
+              return audioPlayer.resume();
             }
 
-            await playlistNotifier.loadAndPlay(album.tracks
-                    ?.map((e) =>
-                        TypeConversionUtils.simpleTrack_X_Track(e, album))
-                    .toList() ??
-                []);
+            await playlistNotifier.load(
+              album.tracks
+                      ?.map((e) =>
+                          TypeConversionUtils.simpleTrack_X_Track(e, album))
+                      .toList() ??
+                  [],
+              autoPlay: true,
+            );
+            playlistNotifier.addCollection(album.id!);
           } finally {
             updating.value = false;
           }
@@ -117,16 +116,16 @@ class AlbumCard extends HookConsumerWidget {
             );
 
             if (fetchedTracks == null || fetchedTracks.isEmpty) return;
-            playlistNotifier.add(
-              fetchedTracks,
-            );
+            playlistNotifier.addTracks(fetchedTracks);
+            playlistNotifier.addCollection(album.id!);
             if (context.mounted) {
               final snackbar = SnackBar(
                 content: Text("Added ${album.tracks?.length} tracks to queue"),
                 action: SnackBarAction(
                   label: "Undo",
                   onPressed: () {
-                    playlistNotifier.remove(fetchedTracks);
+                    playlistNotifier
+                        .removeTracks(fetchedTracks.map((e) => e.id!));
                   },
                 ),
               );
diff --git a/lib/components/artist/artist_album_list.dart b/lib/components/artist/artist_album_list.dart
index b12dd544..8fa9be87 100644
--- a/lib/components/artist/artist_album_list.dart
+++ b/lib/components/artist/artist_album_list.dart
@@ -33,35 +33,36 @@ class ArtistAlbumList extends HookConsumerWidget {
         ? false
         : (albumsQuery.pages.last.items?.length ?? 0) == 5;
 
-    return SizedBox(
-      height: 300,
-      child: ScrollConfiguration(
-        behavior: ScrollConfiguration.of(context).copyWith(
-          dragDevices: {
-            PointerDeviceKind.touch,
-            PointerDeviceKind.mouse,
-          },
-        ),
-        child: Scrollbar(
-          interactive: false,
-          controller: scrollController,
-          child: Waypoint(
+    return Column(
+      children: [
+        ScrollConfiguration(
+          behavior: ScrollConfiguration.of(context).copyWith(
+            dragDevices: {
+              PointerDeviceKind.touch,
+              PointerDeviceKind.mouse,
+            },
+          ),
+          child: Scrollbar(
+            interactive: false,
             controller: scrollController,
-            onTouchEdge: albumsQuery.fetchNext,
-            child: ListView.builder(
-              itemCount: albums.length,
+            child: Waypoint(
               controller: scrollController,
-              scrollDirection: Axis.horizontal,
-              itemBuilder: (context, index) {
-                if (index == albums.length - 1 && hasNextPage) {
-                  return const ShimmerPlaybuttonCard(count: 1);
-                }
-                return AlbumCard(albums[index]);
-              },
+              onTouchEdge: albumsQuery.fetchNext,
+              child: SingleChildScrollView(
+                controller: scrollController,
+                scrollDirection: Axis.horizontal,
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    ...albums.map((album) => AlbumCard(album)),
+                    if (hasNextPage) const ShimmerPlaybuttonCard(count: 1),
+                  ],
+                ),
+              ),
             ),
           ),
         ),
-      ),
+      ],
     );
   }
 }
diff --git a/lib/components/artist/artist_card.dart b/lib/components/artist/artist_card.dart
index 86743fde..993e9f6a 100644
--- a/lib/components/artist/artist_card.dart
+++ b/lib/components/artist/artist_card.dart
@@ -1,12 +1,12 @@
 import 'package:auto_size_text/auto_size_text.dart';
-import 'package:fluent_ui/fluent_ui.dart' hide Colors;
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotify/spotify.dart';
-import 'package:spotube/components/shared/hover_builder.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
-import 'package:spotube/hooks/use_platform_property.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/hooks/use_breakpoint_value.dart';
+import 'package:spotube/hooks/use_brightness_value.dart';
 import 'package:spotube/provider/blacklist_provider.dart';
 import 'package:spotube/utils/service_utils.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
@@ -17,6 +17,7 @@ class ArtistCard extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
+    final theme = Theme.of(context);
     final backgroundImage = UniversalImage.imageProvider(
       TypeConversionUtils.image_X_UrlString(
         artist.images,
@@ -30,87 +31,55 @@ class ArtistCard extends HookConsumerWidget {
         ),
       ),
     );
-    final boxShadow = usePlatformProperty<BoxShadow?>(
-      (context) => PlatformProperty(
-        android: BoxShadow(
-          blurRadius: 10,
-          offset: const Offset(0, 3),
-          spreadRadius: 5,
-          color: Theme.of(context).colorScheme.shadow,
-        ),
-        ios: null,
-        macos: null,
-        linux: BoxShadow(
-          blurRadius: 6,
-          color: Theme.of(context).shadowColor.withOpacity(0.3),
-        ),
-        windows: null,
-      ),
+
+    final radius = BorderRadius.circular(15);
+
+    final double size = useBreakpointValue<double>(
+      xs: 130,
+      sm: 130,
+      md: 150,
+      others: 170,
     );
 
-    final splash = usePlatformProperty<InteractiveInkFeatureFactory?>(
-      (context) => PlatformProperty.only(
-        android: InkRipple.splashFactory,
-        other: NoSplash.splashFactory,
-      ),
-    );
-
-    return SizedBox(
-      height: 240,
-      width: 200,
-      child: InkWell(
-        splashFactory: splash,
-        onTap: () {
-          ServiceUtils.navigate(context, "/artist/${artist.id}");
-        },
-        customBorder: platform == TargetPlatform.windows
-            ? Border.all(
-                color: FluentTheme.maybeOf(context)
-                        ?.micaBackgroundColor
-                        .withOpacity(.7) ??
-                    Colors.transparent,
-                width: 1,
-              )
-            : null,
-        borderRadius: BorderRadius.circular(
-          platform == TargetPlatform.windows ? 5 : 8,
+    return Container(
+      width: size,
+      margin: const EdgeInsets.symmetric(vertical: 5),
+      child: Material(
+        shadowColor: theme.colorScheme.background,
+        color: Color.lerp(
+          theme.colorScheme.surfaceVariant,
+          theme.colorScheme.surface,
+          useBrightnessValue(.9, .7),
         ),
-        child: HoverBuilder(builder: (context, isHovering) {
-          return Ink(
-            width: 200,
-            decoration: BoxDecoration(
-              color: PlatformTheme.of(context).secondaryBackgroundColor,
-              borderRadius: BorderRadius.circular(
-                platform == TargetPlatform.windows ? 5 : 8,
-              ),
-              boxShadow: [
-                if (boxShadow != null) boxShadow,
-              ],
-              border: isBlackListed
-                  ? Border.all(
-                      color: Colors.red[400]!,
-                      width: 2,
-                    )
-                  : [TargetPlatform.windows, TargetPlatform.macOS]
-                          .contains(platform)
-                      ? Border.all(
-                          color: PlatformTheme.of(context).borderColor ??
-                              Colors.transparent,
-                          width: 1,
-                        )
-                      : null,
-            ),
+        elevation: 3,
+        shape: RoundedRectangleBorder(
+          borderRadius: radius,
+          side: isBlackListed
+              ? const BorderSide(
+                  color: Colors.red,
+                  width: 2,
+                )
+              : BorderSide.none,
+        ),
+        child: InkWell(
+            onTap: () {
+              ServiceUtils.push(context, "/artist/${artist.id}");
+            },
+            borderRadius: radius,
             child: Padding(
-              padding: const EdgeInsets.all(15),
+              padding: const EdgeInsets.all(12),
               child: Column(
-                mainAxisAlignment: MainAxisAlignment.spaceAround,
                 children: [
                   Stack(
                     children: [
-                      CircleAvatar(
-                        maxRadius: 80,
-                        minRadius: 20,
-                        backgroundImage: backgroundImage,
+                      ConstrainedBox(
+                        constraints: BoxConstraints(
+                          maxHeight: size,
+                        ),
+                        child: CircleAvatar(
+                          backgroundImage: backgroundImage,
+                          radius: size / 2,
+                        ),
                       ),
                       Positioned(
                         right: 0,
@@ -122,9 +91,9 @@ class ArtistCard extends HookConsumerWidget {
                           decoration: BoxDecoration(
                               color: Colors.blue,
                               borderRadius: BorderRadius.circular(50)),
-                          child: const Text(
-                            "Artist",
-                            style: TextStyle(
+                          child: Text(
+                            context.l10n.artist,
+                            style: const TextStyle(
                               color: Colors.white,
                               fontSize: 12,
                               fontWeight: FontWeight.bold,
@@ -134,19 +103,19 @@ class ArtistCard extends HookConsumerWidget {
                       ),
                     ],
                   ),
+                  const SizedBox(height: 10),
                   AutoSizeText(
                     artist.name!,
-                    maxLines: 2,
+                    maxLines: 1,
                     textAlign: TextAlign.center,
-                    style: PlatformTextTheme.of(context).body?.copyWith(
-                          fontWeight: FontWeight.bold,
-                        ),
+                    overflow: TextOverflow.ellipsis,
+                    style: theme.textTheme.bodyMedium?.copyWith(
+                      fontWeight: FontWeight.bold,
+                    ),
                   ),
                 ],
               ),
-            ),
-          );
-        }),
+            )),
       ),
     );
   }
diff --git a/lib/components/desktop_login/login_form.dart b/lib/components/desktop_login/login_form.dart
index 3ee493a6..0d266286 100644
--- a/lib/components/desktop_login/login_form.dart
+++ b/lib/components/desktop_login/login_form.dart
@@ -1,7 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+import 'package:spotube/extensions/context.dart';
+
 import 'package:spotube/provider/authentication_provider.dart';
 
 class TokenLoginForm extends HookConsumerWidget {
@@ -25,27 +26,31 @@ class TokenLoginForm extends HookConsumerWidget {
       ),
       child: Column(
         children: [
-          PlatformTextField(
+          TextField(
             controller: directCodeController,
-            placeholder: "Spotify \"sp_dc\" Cookie",
-            label: "sp_dc Cookie",
+            decoration: InputDecoration(
+              hintText: context.l10n.spotify_cookie("\"sp_dc\""),
+              labelText: context.l10n.cookie_name_cookie("sp_dc"),
+            ),
             keyboardType: TextInputType.visiblePassword,
           ),
           const SizedBox(height: 10),
-          PlatformTextField(
+          TextField(
             controller: keyCodeController,
-            placeholder: "Spotify \"sp_key\" Cookie",
-            label: "sp_key Cookie",
+            decoration: InputDecoration(
+              hintText: context.l10n.spotify_cookie("\"sp_key\""),
+              labelText: context.l10n.cookie_name_cookie("sp_key"),
+            ),
             keyboardType: TextInputType.visiblePassword,
           ),
           const SizedBox(height: 20),
-          PlatformFilledButton(
+          FilledButton(
             onPressed: () async {
               if (keyCodeController.text.isEmpty ||
                   directCodeController.text.isEmpty) {
                 ScaffoldMessenger.of(context).showSnackBar(
-                  const SnackBar(
-                    content: PlatformText("Please fill in all fields"),
+                  SnackBar(
+                    content: Text(context.l10n.fill_in_all_fields),
                     behavior: SnackBarBehavior.floating,
                   ),
                 );
@@ -61,7 +66,7 @@ class TokenLoginForm extends HookConsumerWidget {
                 onDone?.call();
               }
             },
-            child: const PlatformText("Submit"),
+            child: Text(context.l10n.submit),
           )
         ],
       ),
diff --git a/lib/components/genre/category_card.dart b/lib/components/genre/category_card.dart
index 5b2bbf9c..42654ed9 100644
--- a/lib/components/genre/category_card.dart
+++ b/lib/components/genre/category_card.dart
@@ -1,12 +1,13 @@
-import 'package:flutter/gestures.dart';
+import 'dart:ui';
+
 import 'package:flutter/material.dart' hide Page;
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotify/spotify.dart';
+import 'package:spotube/components/playlist/playlist_card.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
 import 'package:spotube/components/shared/waypoint.dart';
-import 'package:spotube/components/playlist/playlist_card.dart';
 import 'package:spotube/models/logger.dart';
 import 'package:spotube/services/queries/queries.dart';
 
@@ -27,58 +28,51 @@ class CategoryCard extends HookConsumerWidget {
       category.id!,
     );
 
-    final playlists = playlistQuery.pages
-        .expand(
-          (page) => page.items ?? const Iterable.empty(),
-        )
-        .toList();
-
-    return Column(
-      children: [
-        Padding(
-          padding: const EdgeInsets.all(8.0),
-          child: Row(
-            children: [
-              PlatformText.headline(category.name ?? "Unknown"),
-            ],
+    if (playlistQuery.hasErrors && !playlistQuery.hasPageData) {
+      return const SizedBox.shrink();
+    }
+    final playlists = playlistQuery.pages.expand(
+      (page) {
+        return page.items?.where((i) => i != null) ?? const Iterable.empty();
+      },
+    ).toList();
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            category.name!,
+            style: Theme.of(context).textTheme.titleMedium,
           ),
-        ),
-        playlistQuery.hasPageError && !playlistQuery.hasPageData
-            ? PlatformText(
-                "Something Went Wrong\n${playlistQuery.errors.first}")
-            : SizedBox(
-                height: 245,
-                child: ScrollConfiguration(
-                  behavior: ScrollConfiguration.of(context).copyWith(
-                    dragDevices: {
-                      PointerDeviceKind.touch,
-                      PointerDeviceKind.mouse,
-                    },
-                  ),
-                  child: Scrollbar(
-                    controller: scrollController,
-                    interactive: false,
-                    child: Waypoint(
-                      controller: scrollController,
-                      onTouchEdge: () {
-                        playlistQuery.fetchNext();
-                      },
-                      child: ListView(
-                        scrollDirection: Axis.horizontal,
-                        shrinkWrap: true,
-                        controller: scrollController,
-                        children: [
-                          ...playlists
-                              .map((playlist) => PlaylistCard(playlist)),
-                          if (playlistQuery.hasNextPage)
-                            const ShimmerPlaybuttonCard(count: 1),
-                        ],
-                      ),
-                    ),
-                  ),
+          ScrollConfiguration(
+            behavior: ScrollConfiguration.of(context).copyWith(
+              dragDevices: {
+                PointerDeviceKind.touch,
+                PointerDeviceKind.mouse,
+              },
+            ),
+            child: Waypoint(
+              controller: scrollController,
+              onTouchEdge: playlistQuery.fetchNext,
+              child: SingleChildScrollView(
+                scrollDirection: Axis.horizontal,
+                controller: scrollController,
+                padding: const EdgeInsets.symmetric(vertical: 8.0),
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    ...playlists.map((playlist) => PlaylistCard(playlist)),
+                    if (playlistQuery.hasNextPage)
+                      const ShimmerPlaybuttonCard(count: 1),
+                  ],
                 ),
               ),
-      ],
+            ),
+          ),
+        ],
+      ),
     );
   }
 }
diff --git a/lib/components/library/playlist_generate/multi_select_field.dart b/lib/components/library/playlist_generate/multi_select_field.dart
new file mode 100644
index 00000000..ed5eb38f
--- /dev/null
+++ b/lib/components/library/playlist_generate/multi_select_field.dart
@@ -0,0 +1,272 @@
+import 'package:collection/collection.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:fuzzywuzzy/fuzzywuzzy.dart';
+import 'package:spotube/collections/spotube_icons.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
+
+class MultiSelectField<T> extends HookWidget {
+  final List<T> options;
+  final List<T> selectedOptions;
+
+  final Widget Function(T option, VoidCallback onSelect)? optionBuilder;
+  final Widget Function(T option)? selectedOptionBuilder;
+  final ValueChanged<List<T>> onSelected;
+
+  final Widget? dialogTitle;
+
+  final Object Function(T option) getValueForOption;
+
+  final Widget label;
+
+  final String? helperText;
+
+  final bool enabled;
+
+  const MultiSelectField({
+    Key? key,
+    required this.options,
+    required this.selectedOptions,
+    required this.getValueForOption,
+    required this.label,
+    this.optionBuilder,
+    this.selectedOptionBuilder,
+    required this.onSelected,
+    this.dialogTitle,
+    this.helperText,
+    this.enabled = true,
+  }) : super(key: key);
+
+  Widget defaultSelectedOptionBuilder(T option) {
+    return Chip(
+      label: Text(option.toString()),
+      onDeleted: () {
+        onSelected(
+          selectedOptions.where((e) => e != getValueForOption(option)).toList(),
+        );
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        MaterialButton(
+          elevation: 0,
+          focusElevation: 0,
+          hoverElevation: 0,
+          disabledElevation: 0,
+          highlightElevation: 0,
+          padding: const EdgeInsets.symmetric(vertical: 22),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(15),
+            side: BorderSide(
+              color: enabled
+                  ? theme.colorScheme.onSurface
+                  : theme.colorScheme.onSurface.withOpacity(0.1),
+            ),
+          ),
+          mouseCursor: MaterialStateMouseCursor.textable,
+          onPressed: !enabled
+              ? null
+              : () async {
+                  final selected = await showDialog<List<T>>(
+                    context: context,
+                    builder: (context) {
+                      return _MultiSelectDialog<T>(
+                        dialogTitle: dialogTitle,
+                        options: options,
+                        getValueForOption: getValueForOption,
+                        optionBuilder: optionBuilder,
+                        initialSelection: selectedOptions,
+                        helperText: helperText,
+                      );
+                    },
+                  );
+                  if (selected != null) {
+                    onSelected(selected);
+                  }
+                },
+          child: Container(
+            alignment: Alignment.centerLeft,
+            margin: const EdgeInsets.symmetric(horizontal: 10),
+            child: DefaultTextStyle(
+              style: theme.textTheme.titleMedium!,
+              child: label,
+            ),
+          ),
+        ),
+        if (helperText != null)
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Text(
+              helperText!,
+              style: Theme.of(context).textTheme.bodySmall,
+            ),
+          ),
+        Wrap(
+          children: [
+            ...selectedOptions.map(
+              (option) => Padding(
+                padding: const EdgeInsets.all(4.0),
+                child: (selectedOptionBuilder ??
+                    defaultSelectedOptionBuilder)(option),
+              ),
+            ),
+          ],
+        )
+      ],
+    );
+  }
+}
+
+class _MultiSelectDialog<T> extends HookWidget {
+  final Widget? dialogTitle;
+  final List<T> options;
+  final Widget Function(T option, VoidCallback onSelect)? optionBuilder;
+  final Object Function(T option) getValueForOption;
+  final List<T> initialSelection;
+  final String? helperText;
+
+  const _MultiSelectDialog({
+    Key? key,
+    required this.dialogTitle,
+    required this.options,
+    required this.getValueForOption,
+    this.optionBuilder,
+    this.initialSelection = const [],
+    this.helperText,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final mediaQuery = MediaQuery.of(context);
+    final selected = useState(initialSelection.map(getValueForOption));
+
+    final searchController = useTextEditingController();
+
+    // creates render update
+    useValueListenable(searchController);
+
+    final filteredOptions = useMemoized(
+      () {
+        if (searchController.text.isEmpty) {
+          return options;
+        }
+
+        return options
+            .map((e) => (
+                  weightedRatio(
+                      getValueForOption(e).toString(), searchController.text),
+                  e
+                ))
+            .sorted((a, b) => b.$1.compareTo(a.$1))
+            .where((e) => e.$1 > 50)
+            .map((e) => e.$2)
+            .toList();
+      },
+      [searchController.text, options, getValueForOption],
+    );
+
+    Widget defaultOptionBuilder(T option, VoidCallback onSelect) {
+      final isSelected = selected.value.contains(getValueForOption(option));
+      return ChoiceChip(
+        label: Text("${!isSelected ? "    " : ""}${option.toString()}"),
+        selected: isSelected,
+        side: BorderSide.none,
+        onSelected: (_) {
+          onSelect();
+        },
+      );
+    }
+
+    return AlertDialog(
+      scrollable: true,
+      title: dialogTitle ?? const Text('Select'),
+      contentPadding: mediaQuery.mdAndUp ? null : const EdgeInsets.all(16),
+      insetPadding: const EdgeInsets.all(16),
+      actions: [
+        OutlinedButton(
+          onPressed: () {
+            Navigator.pop(context);
+          },
+          child: Text(context.l10n.cancel),
+        ),
+        ElevatedButton(
+          onPressed: () {
+            Navigator.pop(
+              context,
+              options
+                  .where(
+                    (option) =>
+                        selected.value.contains(getValueForOption(option)),
+                  )
+                  .toList(),
+            );
+          },
+          child: Text(context.l10n.done),
+        ),
+      ],
+      content: SizedBox(
+        height: mediaQuery.size.height * 0.5,
+        width: 400,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            TextField(
+              autofocus: true,
+              controller: searchController,
+              decoration: InputDecoration(
+                hintText: context.l10n.search,
+                prefixIcon: const Icon(SpotubeIcons.search),
+                border: OutlineInputBorder(
+                  borderRadius: BorderRadius.circular(15),
+                ),
+              ),
+            ),
+            const SizedBox(height: 10),
+            Expanded(
+              child: SingleChildScrollView(
+                child: Wrap(
+                  spacing: 5,
+                  runSpacing: 5,
+                  children: [
+                    ...filteredOptions.map(
+                      (option) => Padding(
+                        padding: const EdgeInsets.all(4.0),
+                        child: (optionBuilder ?? defaultOptionBuilder)(
+                          option,
+                          () {
+                            final value = getValueForOption(option);
+                            if (selected.value.contains(value)) {
+                              selected.value = selected.value
+                                  .where((e) => e != value)
+                                  .toList();
+                            } else {
+                              selected.value = [...selected.value, value];
+                            }
+                          },
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            if (helperText != null)
+              Text(
+                helperText!,
+                style: Theme.of(context).textTheme.labelMedium,
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/components/library/playlist_generate/recommendation_attribute_dials.dart b/lib/components/library/playlist_generate/recommendation_attribute_dials.dart
new file mode 100644
index 00000000..5af0b870
--- /dev/null
+++ b/lib/components/library/playlist_generate/recommendation_attribute_dials.dart
@@ -0,0 +1,182 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/pages/library/playlist_generate/playlist_generate.dart';
+
+typedef RecommendationAttribute = ({double min, double target, double max});
+
+RecommendationAttribute lowValues(double base) =>
+    (min: 1 * base, target: 0.3 * base, max: 0.3 * base);
+RecommendationAttribute moderateValues(double base) =>
+    (min: 0.5 * base, target: 1 * base, max: 0.5 * base);
+RecommendationAttribute highValues(double base) =>
+    (min: 0.3 * base, target: 0.3 * base, max: 1 * base);
+
+class RecommendationAttributeDials extends HookWidget {
+  final Widget title;
+  final RecommendationAttribute values;
+  final ValueChanged<RecommendationAttribute> onChanged;
+  final double base;
+
+  const RecommendationAttributeDials({
+    Key? key,
+    required this.values,
+    required this.onChanged,
+    required this.title,
+    this.base = 1,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final animation = useAnimationController(
+      duration: const Duration(milliseconds: 300),
+    );
+    final labelStyle = Theme.of(context).textTheme.labelSmall?.copyWith(
+          fontWeight: FontWeight.w500,
+        );
+
+    final minSlider = Row(
+      children: [
+        Text(context.l10n.min, style: labelStyle),
+        Expanded(
+          child: Slider.adaptive(
+            value: values.min / base,
+            min: 0,
+            max: 1,
+            onChanged: (value) => onChanged((
+              min: value * base,
+              target: values.target,
+              max: values.max,
+            )),
+          ),
+        ),
+      ],
+    );
+
+    final targetSlider = Row(
+      children: [
+        Text(context.l10n.target, style: labelStyle),
+        Expanded(
+          child: Slider.adaptive(
+            value: values.target / base,
+            min: 0,
+            max: 1,
+            onChanged: (value) => onChanged((
+              min: values.min,
+              target: value * base,
+              max: values.max,
+            )),
+          ),
+        ),
+      ],
+    );
+
+    final maxSlider = Row(
+      children: [
+        Text(context.l10n.max, style: labelStyle),
+        Expanded(
+          child: Slider.adaptive(
+            value: values.max / base,
+            min: 0,
+            max: 1,
+            onChanged: (value) => onChanged((
+              min: values.min,
+              target: values.target,
+              max: value * base,
+            )),
+          ),
+        ),
+      ],
+    );
+
+    return LayoutBuilder(builder: (context, constrain) {
+      return Card(
+        child: ExpansionTile(
+          title: DefaultTextStyle(
+            style: Theme.of(context).textTheme.titleSmall!,
+            child: title,
+          ),
+          shape: const Border(),
+          leading: AnimatedBuilder(
+            animation: animation,
+            builder: (context, child) {
+              return Transform.rotate(
+                angle: (animation.value * 3.14) / 2,
+                child: child,
+              );
+            },
+            child: const Icon(Icons.chevron_right),
+          ),
+          trailing: Padding(
+            padding: const EdgeInsets.symmetric(vertical: 8.0),
+            child: ToggleButtons(
+              borderRadius: BorderRadius.circular(8),
+              textStyle: labelStyle,
+              isSelected: [
+                values == lowValues(base),
+                values == moderateValues(base),
+                values == highValues(base),
+              ],
+              onPressed: (index) {
+                RecommendationAttribute newValues = zeroValues;
+                switch (index) {
+                  case 0:
+                    newValues = lowValues(base);
+                    break;
+                  case 1:
+                    newValues = moderateValues(base);
+                    break;
+                  case 2:
+                    newValues = highValues(base);
+                    break;
+                }
+
+                if (newValues == values) {
+                  onChanged(zeroValues);
+                } else {
+                  onChanged(newValues);
+                }
+              },
+              children: [
+                Text(context.l10n.low),
+                Text("  ${context.l10n.moderate}  "),
+                Text(context.l10n.high),
+              ],
+            ),
+          ),
+          onExpansionChanged: (value) {
+            if (value) {
+              animation.forward();
+            } else {
+              animation.reverse();
+            }
+          },
+          children: [
+            if (constrain.mdAndUp)
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                children: [
+                  const SizedBox(width: 16),
+                  Expanded(child: minSlider),
+                  Expanded(child: targetSlider),
+                  Expanded(child: maxSlider),
+                ],
+              )
+            else
+              Padding(
+                padding: const EdgeInsets.only(left: 16),
+                child: Column(
+                  children: [
+                    minSlider,
+                    targetSlider,
+                    maxSlider,
+                  ],
+                ),
+              ),
+          ],
+        ),
+      );
+    });
+  }
+}
diff --git a/lib/components/library/playlist_generate/recommendation_attribute_fields.dart b/lib/components/library/playlist_generate/recommendation_attribute_fields.dart
new file mode 100644
index 00000000..de169147
--- /dev/null
+++ b/lib/components/library/playlist_generate/recommendation_attribute_fields.dart
@@ -0,0 +1,179 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:spotube/components/library/playlist_generate/recommendation_attribute_dials.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/pages/library/playlist_generate/playlist_generate.dart';
+
+class RecommendationAttributeFields extends HookWidget {
+  final Widget title;
+  final RecommendationAttribute values;
+  final ValueChanged<RecommendationAttribute> onChanged;
+  final Map<String, RecommendationAttribute>? presets;
+
+  const RecommendationAttributeFields({
+    Key? key,
+    required this.values,
+    required this.onChanged,
+    required this.title,
+    this.presets,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final animation = useAnimationController(
+      duration: const Duration(milliseconds: 300),
+    );
+    final labelStyle = Theme.of(context).textTheme.labelSmall?.copyWith(
+          fontWeight: FontWeight.w500,
+        );
+
+    final minController = useTextEditingController(text: values.min.toString());
+    final targetController =
+        useTextEditingController(text: values.target.toString());
+    final maxController = useTextEditingController(text: values.max.toString());
+
+    useEffect(() {
+      listener() {
+        onChanged((
+          min: double.tryParse(minController.text) ?? 0,
+          target: double.tryParse(targetController.text) ?? 0,
+          max: double.tryParse(maxController.text) ?? 0,
+        ));
+      }
+
+      minController.addListener(listener);
+      targetController.addListener(listener);
+      maxController.addListener(listener);
+
+      return () {
+        minController.removeListener(listener);
+        targetController.removeListener(listener);
+        maxController.removeListener(listener);
+      };
+    }, [values]);
+
+    final minField = TextField(
+      controller: minController,
+      decoration: InputDecoration(
+        labelText: context.l10n.min,
+        isDense: true,
+      ),
+      keyboardType: const TextInputType.numberWithOptions(
+        decimal: false,
+        signed: true,
+      ),
+    );
+
+    final targetField = TextField(
+      controller: targetController,
+      decoration: InputDecoration(
+        labelText: context.l10n.target,
+        isDense: true,
+      ),
+      keyboardType: const TextInputType.numberWithOptions(
+        decimal: false,
+        signed: true,
+      ),
+    );
+
+    final maxField = TextField(
+      controller: maxController,
+      decoration: InputDecoration(
+        labelText: context.l10n.max,
+        isDense: true,
+      ),
+      keyboardType: const TextInputType.numberWithOptions(
+        decimal: false,
+        signed: true,
+      ),
+    );
+
+    return LayoutBuilder(builder: (context, constrain) {
+      return Card(
+        child: ExpansionTile(
+          title: DefaultTextStyle(
+            style: Theme.of(context).textTheme.titleSmall!,
+            child: title,
+          ),
+          shape: const Border(),
+          leading: AnimatedBuilder(
+            animation: animation,
+            builder: (context, child) {
+              return Transform.rotate(
+                angle: (animation.value * 3.14) / 2,
+                child: child,
+              );
+            },
+            child: const Icon(Icons.chevron_right),
+          ),
+          trailing: presets == null
+              ? const SizedBox.shrink()
+              : Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 8.0),
+                  child: ToggleButtons(
+                    borderRadius: BorderRadius.circular(8),
+                    textStyle: labelStyle,
+                    isSelected: presets!.values
+                        .map((value) => value == values)
+                        .toList(),
+                    onPressed: (index) {
+                      RecommendationAttribute newValues =
+                          presets!.values.elementAt(index);
+                      if (newValues == values) {
+                        onChanged(zeroValues);
+                        minController.text = zeroValues.min.toString();
+                        targetController.text = zeroValues.target.toString();
+                        maxController.text = zeroValues.max.toString();
+                      } else {
+                        onChanged(newValues);
+                        minController.text = newValues.min.toString();
+                        targetController.text = newValues.target.toString();
+                        maxController.text = newValues.max.toString();
+                      }
+                    },
+                    children: presets!.keys.map((key) => Text(key)).toList(),
+                  ),
+                ),
+          onExpansionChanged: (value) {
+            if (value) {
+              animation.forward();
+            } else {
+              animation.reverse();
+            }
+          },
+          children: [
+            const SizedBox(height: 8),
+            if (constrain.mdAndUp)
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                children: [
+                  const SizedBox(width: 16),
+                  Expanded(child: minField),
+                  const SizedBox(width: 16),
+                  Expanded(child: targetField),
+                  const SizedBox(width: 16),
+                  Expanded(child: maxField),
+                  const SizedBox(width: 16),
+                ],
+              )
+            else
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 16),
+                child: Column(
+                  children: [
+                    minField,
+                    const SizedBox(height: 16),
+                    targetField,
+                    const SizedBox(height: 16),
+                    maxField,
+                  ],
+                ),
+              ),
+            const SizedBox(height: 8),
+          ],
+        ),
+      );
+    });
+  }
+}
diff --git a/lib/components/library/playlist_generate/seeds_multi_autocomplete.dart b/lib/components/library/playlist_generate/seeds_multi_autocomplete.dart
new file mode 100644
index 00000000..b1665d32
--- /dev/null
+++ b/lib/components/library/playlist_generate/seeds_multi_autocomplete.dart
@@ -0,0 +1,144 @@
+import 'dart:async';
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:spotube/extensions/constrains.dart';
+
+enum SelectedItemDisplayType {
+  wrap,
+  list,
+}
+
+class SeedsMultiAutocomplete<T extends Object> extends HookWidget {
+  final ValueNotifier<List<T>> seeds;
+
+  final FutureOr<List<T>> Function(TextEditingValue textEditingValue)
+      fetchSeeds;
+  final Widget Function(T option, ValueChanged<T> onSelected)
+      autocompleteOptionBuilder;
+  final Widget Function(T option) selectedSeedBuilder;
+  final String Function(T option) displayStringForOption;
+
+  final InputDecoration? inputDecoration;
+  final bool enabled;
+
+  final SelectedItemDisplayType selectedItemDisplayType;
+
+  const SeedsMultiAutocomplete({
+    Key? key,
+    required this.seeds,
+    required this.fetchSeeds,
+    required this.autocompleteOptionBuilder,
+    required this.displayStringForOption,
+    required this.selectedSeedBuilder,
+    this.inputDecoration,
+    this.enabled = true,
+    this.selectedItemDisplayType = SelectedItemDisplayType.wrap,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    useValueListenable(seeds);
+    final theme = Theme.of(context);
+    final mediaQuery = MediaQuery.of(context);
+    final seedController = useTextEditingController();
+
+    final containerKey = useRef(GlobalKey());
+
+    final box =
+        containerKey.value.currentContext?.findRenderObject() as RenderBox?;
+    final position = box?.localToGlobal(Offset.zero); //this is global position
+    final containerYPos = position?.dy ?? 0; //th
+    final containerHeight = box?.size.height ?? 0;
+
+    final listHeight = mediaQuery.size.height -
+        (containerYPos + containerHeight) -
+        // bottom player bar height
+        (mediaQuery.mdAndUp ? 80 : 0);
+
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        LayoutBuilder(builder: (context, constrains) {
+          return Container(
+            key: containerKey.value,
+            child: Autocomplete<T>(
+              optionsBuilder: (textEditingValue) async {
+                if (textEditingValue.text.isEmpty) return [];
+                return fetchSeeds(textEditingValue);
+              },
+              onSelected: (value) {
+                seeds.value = [...seeds.value, value];
+                seedController.clear();
+              },
+              optionsViewBuilder: (context, onSelected, options) {
+                return Align(
+                  alignment: Alignment.topLeft,
+                  child: Container(
+                    constraints: BoxConstraints(
+                      maxWidth: constrains.maxWidth,
+                    ),
+                    height: max(listHeight, 0),
+                    child: Card(
+                      child: ListView.builder(
+                        shrinkWrap: true,
+                        itemCount: options.length,
+                        itemBuilder: (context, index) {
+                          final option = options.elementAt(index);
+                          return autocompleteOptionBuilder(option, onSelected);
+                        },
+                      ),
+                    ),
+                  ),
+                );
+              },
+              displayStringForOption: displayStringForOption,
+              fieldViewBuilder: (
+                context,
+                textEditingController,
+                focusNode,
+                onFieldSubmitted,
+              ) {
+                return TextFormField(
+                  controller: seedController,
+                  onChanged: (value) => textEditingController.text = value,
+                  focusNode: focusNode,
+                  onFieldSubmitted: (_) => onFieldSubmitted(),
+                  enabled: enabled,
+                  decoration: inputDecoration,
+                );
+              },
+            ),
+          );
+        }),
+        const SizedBox(height: 8),
+        switch (selectedItemDisplayType) {
+          SelectedItemDisplayType.wrap => Wrap(
+              spacing: 4,
+              runSpacing: 4,
+              children: seeds.value.map(selectedSeedBuilder).toList(),
+            ),
+          SelectedItemDisplayType.list => Card(
+              margin: EdgeInsets.zero,
+              child: Column(
+                children: [
+                  for (final seed in seeds.value) ...[
+                    selectedSeedBuilder(seed),
+                    if (seeds.value.length > 1 && seed != seeds.value.last)
+                      Divider(
+                        color: theme.colorScheme.primaryContainer,
+                        height: 1,
+                        indent: 12,
+                        endIndent: 12,
+                      ),
+                  ],
+                ],
+              ),
+            ),
+        },
+      ],
+    );
+  }
+}
diff --git a/lib/components/library/playlist_generate/simple_track_tile.dart b/lib/components/library/playlist_generate/simple_track_tile.dart
new file mode 100644
index 00000000..86800d06
--- /dev/null
+++ b/lib/components/library/playlist_generate/simple_track_tile.dart
@@ -0,0 +1,46 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/collections/spotube_icons.dart';
+
+import 'package:spotube/components/shared/image/universal_image.dart';
+import 'package:spotube/utils/type_conversion_utils.dart';
+
+class SimpleTrackTile extends HookWidget {
+  final Track track;
+  final VoidCallback? onDelete;
+  const SimpleTrackTile({
+    Key? key,
+    required this.track,
+    this.onDelete,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      leading: ClipRRect(
+        borderRadius: BorderRadius.circular(8),
+        child: UniversalImage(
+          path: TypeConversionUtils.image_X_UrlString(
+            track.album?.images,
+            placeholder: ImagePlaceholder.artist,
+          ),
+          height: 40,
+          width: 40,
+        ),
+      ),
+      horizontalTitleGap: 10,
+      contentPadding: const EdgeInsets.symmetric(horizontal: 8),
+      title: Text(track.name!),
+      trailing: onDelete == null
+          ? null
+          : IconButton(
+              icon: const Icon(SpotubeIcons.close),
+              onPressed: onDelete,
+            ),
+      subtitle: Text(
+        track.artists?.map((e) => e.name).join(", ") ?? track.album?.name ?? "",
+      ),
+    );
+  }
+}
diff --git a/lib/components/library/user_albums.dart b/lib/components/library/user_albums.dart
index ebcaa9dc..014a84f6 100644
--- a/lib/components/library/user_albums.dart
+++ b/lib/components/library/user_albums.dart
@@ -3,18 +3,17 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:collection/collection.dart';
 import 'package:fuzzywuzzy/fuzzywuzzy.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/album/album_card.dart';
-import 'package:spotube/components/shared/playbutton_card.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
 import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/hooks/use_breakpoint_value.dart';
 import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
 
 import 'package:spotube/utils/type_conversion_utils.dart';
-import 'package:tuple/tuple.dart';
 
 class UserAlbums extends HookConsumerWidget {
   const UserAlbums({Key? key}) : super(key: key);
@@ -25,12 +24,10 @@ class UserAlbums extends HookConsumerWidget {
     final albumsQuery = useQueries.album.ofMine(ref);
 
     final spacing = useBreakpointValue<double>(
+      xs: 0,
       sm: 0,
       others: 20,
     );
-    final viewType = MediaQuery.of(context).size.width < 480
-        ? PlaybuttonCardViewType.list
-        : PlaybuttonCardViewType.square;
 
     final searchText = useState('');
 
@@ -39,13 +36,13 @@ class UserAlbums extends HookConsumerWidget {
         return albumsQuery.data?.toList() ?? [];
       }
       return albumsQuery.data
-              ?.map((e) => Tuple2(
+              ?.map((e) => (
                     weightedRatio(e.name!, searchText.value),
                     e,
                   ))
-              .sorted((a, b) => b.item1.compareTo(a.item1))
-              .where((e) => e.item1 > 50)
-              .map((e) => e.item2)
+              .sorted((a, b) => b.$1.compareTo(a.$1))
+              .where((e) => e.$1 > 50)
+              .map((e) => e.$2)
               .toList() ??
           [];
     }, [albumsQuery.data, searchText.value]);
@@ -53,9 +50,6 @@ class UserAlbums extends HookConsumerWidget {
     if (auth == null) {
       return const AnonymousFallback();
     }
-    if (albumsQuery.isLoading || !albumsQuery.hasData) {
-      return const Center(child: ShimmerPlaybuttonCard(count: 7));
-    }
 
     return RefreshIndicator(
       onRefresh: () async {
@@ -63,30 +57,40 @@ class UserAlbums extends HookConsumerWidget {
       },
       child: SingleChildScrollView(
         physics: const AlwaysScrollableScrollPhysics(),
-        child: Material(
-          type: MaterialType.transparency,
-          textStyle: PlatformTheme.of(context).textTheme!.body!,
-          color: PlatformTheme.of(context).scaffoldBackgroundColor,
-          child: Padding(
-            padding: const EdgeInsets.all(8.0),
+        child: Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: SafeArea(
             child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                PlatformTextField(
+                SearchBar(
                   onChanged: (value) => searchText.value = value,
-                  prefixIcon: SpotubeIcons.filter,
-                  placeholder: 'Filter Albums...',
+                  leading: const Icon(SpotubeIcons.filter),
+                  hintText: context.l10n.filter_albums,
                 ),
                 const SizedBox(height: 20),
-                Wrap(
-                  spacing: spacing, // gap between adjacent chips
-                  runSpacing: 20, // gap between lines
-                  alignment: WrapAlignment.center,
-                  children: albums
-                      .map((album) => AlbumCard(
-                            viewType: viewType,
-                            TypeConversionUtils.simpleAlbum_X_Album(album),
-                          ))
-                      .toList(),
+                AnimatedCrossFade(
+                  duration: const Duration(milliseconds: 300),
+                  firstChild: Container(
+                    alignment: Alignment.topLeft,
+                    padding: const EdgeInsets.all(16.0),
+                    child: const ShimmerPlaybuttonCard(count: 7),
+                  ),
+                  secondChild: Wrap(
+                    spacing: spacing, // gap between adjacent chips
+                    runSpacing: 20, // gap between lines
+                    alignment: WrapAlignment.center,
+                    children: albums
+                        .map((album) => AlbumCard(
+                              TypeConversionUtils.simpleAlbum_X_Album(album),
+                            ))
+                        .toList(),
+                  ),
+                  crossFadeState: albumsQuery.isLoading ||
+                          !albumsQuery.hasData ||
+                          searchText.value.isNotEmpty
+                      ? CrossFadeState.showFirst
+                      : CrossFadeState.showSecond,
                 ),
               ],
             ),
diff --git a/lib/components/library/user_artists.dart b/lib/components/library/user_artists.dart
index a522b7f4..c90d8010 100644
--- a/lib/components/library/user_artists.dart
+++ b/lib/components/library/user_artists.dart
@@ -3,48 +3,44 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:collection/collection.dart';
 import 'package:fuzzywuzzy/fuzzywuzzy.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
-import 'package:spotify/spotify.dart';
+
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
-import 'package:spotube/components/shared/waypoint.dart';
 import 'package:spotube/components/artist/artist_card.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
-import 'package:tuple/tuple.dart';
 
 class UserArtists extends HookConsumerWidget {
   const UserArtists({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context, ref) {
+    final theme = Theme.of(context);
     final auth = ref.watch(AuthenticationNotifier.provider);
 
-    final artistQuery = useQueries.artist.followedByMe(ref);
-
-    final hasNextPage = artistQuery.pages.isEmpty
-        ? false
-        : (artistQuery.pages.last.items?.length ?? 0) == 15;
+    final artistQuery = useQueries.artist.followedByMeAll(ref);
 
     final searchText = useState('');
 
     final filteredArtists = useMemoized(() {
-      final artists = artistQuery.pages
-          .expand<Artist>((page) => page.items ?? const Iterable.empty());
+      final artists = artistQuery.data ?? [];
 
       if (searchText.value.isEmpty) {
         return artists.toList();
       }
       return artists
-          .map((e) => Tuple2(
+          .map((e) => (
                 weightedRatio(e.name!, searchText.value),
                 e,
               ))
-          .sorted((a, b) => b.item1.compareTo(a.item1))
-          .where((e) => e.item1 > 50)
-          .map((e) => e.item2)
+          .sorted((a, b) => b.$1.compareTo(a.$1))
+          .where((e) => e.$1 > 50)
+          .map((e) => e.$2)
           .toList();
-    }, [artistQuery.pages, searchText.value]);
+    }, [artistQuery.data, searchText.value]);
+
+    final controller = useScrollController();
 
     if (auth == null) {
       return const AnonymousFallback();
@@ -56,57 +52,48 @@ class UserArtists extends HookConsumerWidget {
         child: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 8.0),
           child: ColoredBox(
-            color: PlatformTheme.of(context).scaffoldBackgroundColor!,
-            child: PlatformTextField(
+            color: theme.scaffoldBackgroundColor,
+            child: SearchBar(
               onChanged: (value) => searchText.value = value,
-              prefixIcon: SpotubeIcons.filter,
-              placeholder: 'Filter artists...',
+              leading: const Icon(SpotubeIcons.filter),
+              hintText: context.l10n.filter_artist,
             ),
           ),
         ),
       ),
-      backgroundColor: PlatformTheme.of(context).scaffoldBackgroundColor,
-      body: artistQuery.pages.isEmpty
+      backgroundColor: theme.scaffoldBackgroundColor,
+      body: artistQuery.data?.isEmpty == true
           ? Padding(
               padding: const EdgeInsets.all(20),
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.center,
-                children: const [
-                  PlatformCircularProgressIndicator(),
-                  SizedBox(width: 10),
-                  PlatformText("Loading..."),
+                children: [
+                  const CircularProgressIndicator(),
+                  const SizedBox(width: 10),
+                  Text(context.l10n.loading),
                 ],
               ),
             )
           : RefreshIndicator(
               onRefresh: () async {
-                await artistQuery.refreshAll();
+                await artistQuery.refresh();
               },
-              child: GridView.builder(
-                itemCount: filteredArtists.length,
-                physics: const AlwaysScrollableScrollPhysics(),
-                gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
-                  maxCrossAxisExtent: 200,
-                  mainAxisExtent: 250,
-                  crossAxisSpacing: 20,
-                  mainAxisSpacing: 20,
+              child: SingleChildScrollView(
+                controller: controller,
+                child: SizedBox(
+                  width: double.infinity,
+                  child: SafeArea(
+                    child: Center(
+                      child: Wrap(
+                        spacing: 15,
+                        runSpacing: 5,
+                        children: filteredArtists
+                            .mapIndexed((index, artist) => ArtistCard(artist))
+                            .toList(),
+                      ),
+                    ),
+                  ),
                 ),
-                padding: const EdgeInsets.all(10),
-                itemBuilder: (context, index) {
-                  return HookBuilder(builder: (context) {
-                    if (index == artistQuery.pages.length - 1 && hasNextPage) {
-                      return Waypoint(
-                        controller: useScrollController(),
-                        isGrid: true,
-                        onTouchEdge: () {
-                          artistQuery.fetchNext();
-                        },
-                        child: ArtistCard(filteredArtists[index]),
-                      );
-                    }
-                    return ArtistCard(filteredArtists[index]);
-                  });
-                },
               ),
             ),
     );
diff --git a/lib/components/library/user_downloads.dart b/lib/components/library/user_downloads.dart
index d0da5d33..eedd7840 100644
--- a/lib/components/library/user_downloads.dart
+++ b/lib/components/library/user_downloads.dart
@@ -1,10 +1,15 @@
 import 'package:auto_size_text/auto_size_text.dart';
+import 'package:background_downloader/background_downloader.dart';
+// import 'package:background_downloader/background_downloader.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotify/spotify.dart';
+import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
-import 'package:spotube/provider/downloader_provider.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/provider/download_manager_provider.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 class UserDownloads extends HookConsumerWidget {
@@ -12,7 +17,8 @@ class UserDownloads extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    final downloader = ref.watch(downloaderProvider);
+    ref.watch(downloadManagerProvider);
+    final downloadManager = ref.watch(downloadManagerProvider.notifier);
 
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
@@ -24,59 +30,85 @@ class UserDownloads extends HookConsumerWidget {
             children: [
               Expanded(
                 child: AutoSizeText(
-                  "Currently downloading (${downloader.currentlyRunning})",
+                  context.l10n
+                      .currently_downloading(downloadManager.totalDownloads),
                   maxLines: 1,
-                  style: PlatformTextTheme.of(context).headline,
+                  style: Theme.of(context).textTheme.headlineMedium,
                 ),
               ),
               const SizedBox(width: 10),
-              PlatformFilledButton(
-                style: ButtonStyle(
-                  backgroundColor: MaterialStatePropertyAll(Colors.red[50]),
-                  foregroundColor: MaterialStatePropertyAll(Colors.red[400]),
+              FilledButton(
+                style: FilledButton.styleFrom(
+                  backgroundColor: Colors.red[50],
+                  foregroundColor: Colors.red[400],
                 ),
-                onPressed: downloader.currentlyRunning > 0
-                    ? downloader.cancelAll
-                    : null,
-                isSecondary: true,
-                child: const PlatformText("Cancel All"),
+                onPressed: downloadManager.totalDownloads == 0
+                    ? null
+                    : downloadManager.cancelAll,
+                child: Text(context.l10n.cancel_all),
               ),
             ],
           ),
         ),
         Expanded(
-          child: ListView.builder(
-            itemCount: downloader.inQueue.length,
-            itemBuilder: (context, index) {
-              final track = downloader.inQueue.elementAt(index);
-              return PlatformListTile(
-                title: Text(track.name ?? ''),
-                leading: Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 5),
-                  child: ClipRRect(
-                    borderRadius: BorderRadius.circular(10),
-                    child: UniversalImage(
-                      height: 40,
-                      width: 40,
-                      path: TypeConversionUtils.image_X_UrlString(
-                        track.album?.images,
-                        placeholder: ImagePlaceholder.albumArt,
+          child: SafeArea(
+            child: ListView.builder(
+              itemCount: downloadManager.totalDownloads,
+              itemBuilder: (context, index) {
+                final track = downloadManager.items.elementAt(index);
+                return HookBuilder(builder: (context) {
+                  final task = useStream(
+                    downloadManager.activeDownloadProgress.stream
+                        .where((element) => element.task.taskId == track.id),
+                  );
+                  final failedTaskStream = useStream(
+                    downloadManager.failedDownloads.stream
+                        .where((element) => element.taskId == track.id),
+                  );
+                  final taskItSelf = useFuture(
+                    FileDownloader().database.recordForId(track.id!),
+                  );
+
+                  final hasFailed = failedTaskStream.hasData ||
+                      taskItSelf.data?.status == TaskStatus.failed;
+
+                  return ListTile(
+                    title: Text(track.name ?? ''),
+                    leading: Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 5),
+                      child: ClipRRect(
+                        borderRadius: BorderRadius.circular(10),
+                        child: UniversalImage(
+                          height: 40,
+                          width: 40,
+                          path: TypeConversionUtils.image_X_UrlString(
+                            track.album?.images,
+                            placeholder: ImagePlaceholder.albumArt,
+                          ),
+                        ),
                       ),
                     ),
-                  ),
-                ),
-                trailing: const SizedBox(
-                  width: 30,
-                  height: 30,
-                  child: PlatformCircularProgressIndicator(),
-                ),
-                subtitle: Text(
-                  TypeConversionUtils.artists_X_String(
-                    track.artists ?? <Artist>[],
-                  ),
-                ),
-              );
-            },
+                    horizontalTitleGap: 10,
+                    trailing: downloadManager.activeItem?.id == track.id &&
+                            !hasFailed
+                        ? CircularProgressIndicator(
+                            value: task.data?.progress ?? 0,
+                          )
+                        : hasFailed
+                            ? Icon(SpotubeIcons.error, color: Colors.red[400])
+                            : IconButton(
+                                icon: const Icon(SpotubeIcons.close),
+                                onPressed: () {
+                                  downloadManager.cancel(track);
+                                }),
+                    subtitle: TypeConversionUtils.artists_X_ClickableArtists(
+                      track.artists ?? <Artist>[],
+                      mainAxisAlignment: WrapAlignment.start,
+                    ),
+                  );
+                });
+              },
+            ),
           ),
         ),
       ],
diff --git a/lib/components/library/user_local_tracks.dart b/lib/components/library/user_local_tracks.dart
index 76cb1d82..86880820 100644
--- a/lib/components/library/user_local_tracks.dart
+++ b/lib/components/library/user_local_tracks.dart
@@ -12,23 +12,22 @@ import 'package:mime/mime.dart';
 import 'package:path/path.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:permission_handler/permission_handler.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotify/spotify.dart';
 import 'package:spotube/collections/spotube_icons.dart';
-import 'package:spotube/components/shared/compact_search.dart';
+import 'package:spotube/components/shared/expandable_search/expandable_search.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_track_tile.dart';
 import 'package:spotube/components/shared/sort_tracks_dropdown.dart';
 import 'package:spotube/components/shared/track_table/track_tile.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/hooks/use_async_effect.dart';
 import 'package:spotube/models/local_track.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/provider/user_preferences_provider.dart';
 import 'package:spotube/utils/platform.dart';
-import 'package:spotube/utils/primitive_utils.dart';
 import 'package:spotube/utils/service_utils.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 import 'package:flutter_rust_bridge/flutter_rust_bridge.dart' show FfiException;
-import 'package:tuple/tuple.dart';
 
 const supportedAudioTypes = [
   "audio/webm",
@@ -53,7 +52,8 @@ enum SortBy {
   descending,
   artist,
   album,
-  dateAdded,
+  newest,
+  oldest,
 }
 
 final localTracksProvider = FutureProvider<List<LocalTrack>>((ref) async {
@@ -94,12 +94,10 @@ final localTracksProvider = FutureProvider<List<LocalTrack>>((ref) async {
             }
 
             return {"metadata": metadata, "file": f, "art": imageFile.path};
-          } on FfiException catch (e) {
-            if (e.message != "NoTag: reader does not contain an id3 tag") {
-              rethrow;
-            }
-            return {};
           } catch (e, stack) {
+            if (e is FfiException) {
+              return {"file": f};
+            }
             Catcher.reportCheckedError(e, stack);
             return {};
           }
@@ -133,36 +131,40 @@ class UserLocalTracks extends HookConsumerWidget {
   const UserLocalTracks({Key? key}) : super(key: key);
 
   void playLocalTracks(
-    PlaylistQueueNotifier playback,
+    WidgetRef ref,
     List<LocalTrack> tracks, {
     LocalTrack? currentTrack,
   }) async {
+    final playlist = ref.read(ProxyPlaylistNotifier.provider);
+    final playback = ref.read(ProxyPlaylistNotifier.notifier);
     currentTrack ??= tracks.first;
-    final isPlaylistPlaying = playback.isPlayingPlaylist(tracks);
+    final isPlaylistPlaying = playlist.containsTracks(tracks);
     if (!isPlaylistPlaying) {
-      await playback.loadAndPlay(
+      await playback.load(
         tracks,
-        active: tracks.indexWhere((s) => s.id == currentTrack?.id),
+        initialIndex: tracks.indexWhere((s) => s.id == currentTrack?.id),
+        autoPlay: true,
       );
     } else if (isPlaylistPlaying &&
         currentTrack.id != null &&
-        currentTrack.id != playback.state?.activeTrack.id) {
-      await playback.playTrack(currentTrack);
+        currentTrack.id != playlist.activeTrack?.id) {
+      await playback.jumpToTrack(currentTrack);
     }
   }
 
   @override
   Widget build(BuildContext context, ref) {
     final sortBy = useState<SortBy>(SortBy.none);
-    final playlist = ref.watch(PlaylistQueueNotifier.provider);
-    final playlistNotifier = ref.watch(PlaylistQueueNotifier.notifier);
+    final playlist = ref.watch(ProxyPlaylistNotifier.provider);
     final trackSnapshot = ref.watch(localTracksProvider);
-    final isPlaylistPlaying = playlistNotifier.isPlayingPlaylist(
-      trackSnapshot.value ?? [],
-    );
+    final isPlaylistPlaying =
+        playlist.containsTracks(trackSnapshot.value ?? []);
     final isMounted = useIsMounted();
 
-    final searchText = useState<String>("");
+    final searchController = useTextEditingController();
+    useValueListenable(searchController);
+    final searchFocus = useFocusNode();
+    final isFiltering = useState(false);
 
     useAsyncEffect(
       () async {
@@ -177,11 +179,6 @@ class UserLocalTracks extends HookConsumerWidget {
       [],
     );
 
-    var searchbar = CompactSearch(
-      onChanged: (value) => searchText.value = value,
-      placeholder: "Search local tracks...",
-    );
-
     return Column(
       children: [
         Padding(
@@ -189,22 +186,25 @@ class UserLocalTracks extends HookConsumerWidget {
           child: Row(
             children: [
               const SizedBox(width: 10),
-              PlatformFilledButton(
+              FilledButton(
                 onPressed: trackSnapshot.value != null
                     ? () {
                         if (trackSnapshot.value?.isNotEmpty == true) {
                           if (!isPlaylistPlaying) {
                             playLocalTracks(
-                                playlistNotifier, trackSnapshot.value!);
+                              ref,
+                              trackSnapshot.value!,
+                            );
                           } else {
-                            playlistNotifier.stop();
+                            // TODO: Remove stop capability
+                            // playlistNotifier.stop();
                           }
                         }
                       }
                     : null,
                 child: Row(
                   children: [
-                    const Text("Play"),
+                    Text(context.l10n.play),
                     Icon(
                       isPlaylistPlaying ? SpotubeIcons.stop : SpotubeIcons.play,
                     )
@@ -212,7 +212,10 @@ class UserLocalTracks extends HookConsumerWidget {
                 ),
               ),
               const Spacer(),
-              searchbar,
+              ExpandableSearchButton(
+                isFiltering: isFiltering,
+                searchFocus: searchFocus,
+              ),
               const SizedBox(width: 10),
               SortTracksDropdown(
                 value: sortBy.value,
@@ -221,7 +224,7 @@ class UserLocalTracks extends HookConsumerWidget {
                 },
               ),
               const SizedBox(width: 10),
-              PlatformFilledButton(
+              FilledButton(
                 child: const Icon(SpotubeIcons.refresh),
                 onPressed: () {
                   ref.refresh(localTracksProvider);
@@ -230,6 +233,11 @@ class UserLocalTracks extends HookConsumerWidget {
             ],
           ),
         ),
+        ExpandableSearchField(
+          searchController: searchController,
+          searchFocus: searchFocus,
+          isFiltering: isFiltering,
+        ),
         trackSnapshot.when(
           data: (tracks) {
             final sortedTracks = useMemoized(() {
@@ -237,26 +245,26 @@ class UserLocalTracks extends HookConsumerWidget {
             }, [sortBy.value, tracks]);
 
             final filteredTracks = useMemoized(() {
-              if (searchText.value.isEmpty) {
+              if (searchController.text.isEmpty) {
                 return sortedTracks;
               }
               return sortedTracks
-                  .map((e) => Tuple2(
+                  .map((e) => (
                         weightedRatio(
                           "${e.name} - ${TypeConversionUtils.artists_X_String<Artist>(e.artists ?? [])}",
-                          searchText.value,
+                          searchController.text,
                         ),
                         e,
                       ))
                   .toList()
                   .sorted(
-                    (a, b) => b.item1.compareTo(a.item1),
+                    (a, b) => b.$1.compareTo(a.$1),
                   )
-                  .where((e) => e.item1 > 50)
-                  .map((e) => e.item2)
+                  .where((e) => e.$1 > 50)
+                  .map((e) => e.$2)
                   .toList()
                   .toList();
-            }, [searchText.value, sortedTracks]);
+            }, [searchController.text, sortedTracks]);
 
             return Expanded(
               child: RefreshIndicator(
@@ -269,17 +277,12 @@ class UserLocalTracks extends HookConsumerWidget {
                   itemBuilder: (context, index) {
                     final track = filteredTracks[index];
                     return TrackTile(
-                      playlist,
-                      duration:
-                          "${track.duration?.inMinutes.remainder(60)}:${PrimitiveUtils.zeroPadNumStr(track.duration?.inSeconds.remainder(60) ?? 0)}",
-                      track: MapEntry(index, track),
-                      isActive: playlist?.activeTrack.id == track.id,
-                      isChecked: false,
-                      showCheck: false,
-                      isLocal: true,
-                      onTrackPlayButtonPressed: (currentTrack) {
-                        return playLocalTracks(
-                          playlistNotifier,
+                      index: index,
+                      track: track,
+                      userPlaylist: false,
+                      onTap: () {
+                        playLocalTracks(
+                          ref,
                           sortedTracks,
                           currentTrack: track,
                         );
diff --git a/lib/components/library/user_playlists.dart b/lib/components/library/user_playlists.dart
index d618b3e1..830f5b87 100644
--- a/lib/components/library/user_playlists.dart
+++ b/lib/components/library/user_playlists.dart
@@ -2,20 +2,18 @@ import 'package:flutter/material.dart' hide Image;
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:fuzzywuzzy/fuzzywuzzy.dart';
 import 'package:collection/collection.dart';
+import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotify/spotify.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/playlist/playlist_create_dialog.dart';
-import 'package:spotube/components/shared/playbutton_card.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
 import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
 import 'package:spotube/components/playlist/playlist_card.dart';
-import 'package:spotube/hooks/use_breakpoint_value.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
-import 'package:tuple/tuple.dart';
 
 class UserPlaylists extends HookConsumerWidget {
   const UserPlaylists({Key? key}) : super(key: key);
@@ -23,21 +21,15 @@ class UserPlaylists extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, ref) {
     final searchText = useState('');
-    final breakpoint = useBreakpoints();
-    final spacing = useBreakpointValue<double>(
-      sm: 0,
-      others: 20,
-    );
-    final viewType = MediaQuery.of(context).size.width < 480
-        ? PlaybuttonCardViewType.list
-        : PlaybuttonCardViewType.square;
+
     final auth = ref.watch(AuthenticationNotifier.provider);
 
     final playlistsQuery = useQueries.playlist.ofMine(ref);
 
     final likedTracksPlaylist = useMemoized(
         () => PlaylistSimple()
-          ..name = "Liked Tracks"
+          ..name = context.l10n.liked_tracks
+          ..description = context.l10n.liked_tracks_description
           ..type = "playlist"
           ..collaborative = false
           ..public = false
@@ -49,7 +41,7 @@ class UserPlaylists extends HookConsumerWidget {
               ..url =
                   "https://t.scdn.co/images/3099b3803ad9496896c43f22fe9be8c4.png"
           ],
-        []);
+        [context.l10n]);
 
     final playlists = useMemoized(
       () {
@@ -63,13 +55,10 @@ class UserPlaylists extends HookConsumerWidget {
           likedTracksPlaylist,
           ...?playlistsQuery.data,
         ]
-            .map((e) => Tuple2(
-                  weightedRatio(e.name!, searchText.value),
-                  e,
-                ))
-            .sorted((a, b) => b.item1.compareTo(a.item1))
-            .where((e) => e.item1 > 50)
-            .map((e) => e.item2)
+            .map((e) => (weightedRatio(e.name!, searchText.value), e))
+            .sorted((a, b) => b.$1.compareTo(a.$1))
+            .where((e) => e.$1 > 50)
+            .map((e) => e.$2)
             .toList();
       },
       [playlistsQuery.data, searchText.value],
@@ -79,47 +68,53 @@ class UserPlaylists extends HookConsumerWidget {
       return const AnonymousFallback();
     }
 
-    final children = [
-      const PlaylistCreateDialog(),
-      ...playlists
-          .map((playlist) => PlaylistCard(
-                playlist,
-                viewType: viewType,
-              ))
-          .toList(),
-    ];
     return RefreshIndicator(
       onRefresh: playlistsQuery.refresh,
       child: SingleChildScrollView(
         physics: const AlwaysScrollableScrollPhysics(),
-        child: Material(
-          type: MaterialType.transparency,
-          textStyle: PlatformTheme.of(context).textTheme!.body!,
-          child: Padding(
-            padding: const EdgeInsets.all(8.0),
-            child: Column(
-              children: [
-                PlatformTextField(
+        child: SafeArea(
+          child: Column(
+            children: [
+              Padding(
+                padding: const EdgeInsets.all(10),
+                child: SearchBar(
                   onChanged: (value) => searchText.value = value,
-                  placeholder: "Filter your playlists...",
-                  prefixIcon: SpotubeIcons.filter,
+                  hintText: context.l10n.filter_playlists,
+                  leading: const Icon(SpotubeIcons.filter),
                 ),
-                const SizedBox(height: 20),
-                if (playlistsQuery.isLoading || !playlistsQuery.hasData)
-                  const Center(child: ShimmerPlaybuttonCard(count: 7))
-                else
-                  Center(
-                    child: Wrap(
-                      spacing: spacing, // gap between adjacent chips
-                      runSpacing: 20, // gap between lines
-                      alignment: breakpoint.isSm
-                          ? WrapAlignment.center
-                          : WrapAlignment.start,
-                      children: children,
+              ),
+              AnimatedCrossFade(
+                duration: const Duration(milliseconds: 300),
+                crossFadeState:
+                    playlistsQuery.isLoading || !playlistsQuery.hasData
+                        ? CrossFadeState.showFirst
+                        : CrossFadeState.showSecond,
+                firstChild:
+                    const Center(child: ShimmerPlaybuttonCard(count: 7)),
+                secondChild: Wrap(
+                  runSpacing: 10,
+                  alignment: WrapAlignment.center,
+                  children: [
+                    Row(
+                      children: [
+                        const SizedBox(width: 10),
+                        const PlaylistCreateDialogButton(),
+                        const SizedBox(width: 10),
+                        ElevatedButton.icon(
+                          icon: const Icon(SpotubeIcons.magic),
+                          label: Text(context.l10n.generate_playlist),
+                          onPressed: () {
+                            GoRouter.of(context).push("/library/generate");
+                          },
+                        ),
+                        const SizedBox(width: 10),
+                      ],
                     ),
-                  ),
-              ],
-            ),
+                    ...playlists.map((playlist) => PlaylistCard(playlist))
+                  ],
+                ),
+              ),
+            ],
           ),
         ),
       ),
diff --git a/lib/components/lyrics/zoom_controls.dart b/lib/components/lyrics/zoom_controls.dart
index 6b26616a..f50ea71d 100644
--- a/lib/components/lyrics/zoom_controls.dart
+++ b/lib/components/lyrics/zoom_controls.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotube/collections/spotube_icons.dart';
 
 class ZoomControls extends HookWidget {
@@ -32,15 +32,15 @@ class ZoomControls extends HookWidget {
   @override
   Widget build(BuildContext context) {
     final actions = [
-      PlatformIconButton(
+      IconButton(
         icon: decreaseIcon,
         onPressed: () {
           if (value == min) return;
           onChanged(value - interval);
         },
       ),
-      PlatformText("$value$unit"),
-      PlatformIconButton(
+      Text("$value$unit"),
+      IconButton(
         icon: increaseIcon,
         onPressed: () {
           if (value == max) return;
@@ -51,9 +51,7 @@ class ZoomControls extends HookWidget {
 
     return Container(
       decoration: BoxDecoration(
-        color: PlatformTheme.of(context)
-            .secondaryBackgroundColor
-            ?.withOpacity(0.7),
+        color: Theme.of(context).cardColor.withOpacity(0.7),
         borderRadius: BorderRadius.circular(10),
       ),
       constraints: BoxConstraints(
diff --git a/lib/components/player/player_actions.dart b/lib/components/player/player_actions.dart
index 10be9f29..0d17c263 100644
--- a/lib/components/player/player_actions.dart
+++ b/lib/components/player/player_actions.dart
@@ -2,26 +2,32 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
-import 'package:spotify/spotify.dart';
+
+import 'package:spotify/spotify.dart' hide Offset;
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/player/player_queue.dart';
 import 'package:spotube/components/player/sibling_tracks_sheet.dart';
+import 'package:spotube/components/shared/adaptive/adaptive_pop_sheet_list.dart';
 import 'package:spotube/components/shared/heart_button.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/extensions/duration.dart';
 import 'package:spotube/models/local_track.dart';
 import 'package:spotube/models/logger.dart';
+import 'package:spotube/provider/download_manager_provider.dart';
 import 'package:spotube/provider/authentication_provider.dart';
-import 'package:spotube/provider/downloader_provider.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/provider/sleep_timer_provider.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 class PlayerActions extends HookConsumerWidget {
   final MainAxisAlignment mainAxisAlignment;
   final bool floatingQueue;
+  final bool showQueue;
   final List<Widget>? extraActions;
   PlayerActions({
     this.mainAxisAlignment = MainAxisAlignment.center,
     this.floatingQueue = true,
+    this.showQueue = true,
     this.extraActions,
     Key? key,
   }) : super(key: key);
@@ -29,61 +35,50 @@ class PlayerActions extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    final playlist = ref.watch(PlaylistQueueNotifier.provider);
-    final playlistNotifier = ref.watch(PlaylistQueueNotifier.provider.notifier);
-    final isLocalTrack = playlist?.activeTrack is LocalTrack;
-    final downloader = ref.watch(downloaderProvider);
-    final isInQueue = downloader.inQueue
-        .any((element) => element.id == playlist?.activeTrack.id);
+    final playlist = ref.watch(ProxyPlaylistNotifier.provider);
+    final isLocalTrack = playlist.activeTrack is LocalTrack;
+    ref.watch(downloadManagerProvider);
+    final downloader = ref.watch(downloadManagerProvider.notifier);
+    final isInQueue = downloader.activeItem != null &&
+        downloader.activeItem!.id == playlist.activeTrack?.id;
     final localTracks = [] /* ref.watch(localTracksProvider).value */;
     final auth = ref.watch(AuthenticationNotifier.provider);
+    final sleepTimer = ref.watch(SleepTimerNotifier.provider);
+    final sleepTimerNotifier = ref.watch(SleepTimerNotifier.notifier);
 
     final isDownloaded = useMemoized(() {
       return localTracks.any(
             (element) =>
-                element.name == playlist?.activeTrack.name &&
-                element.album?.name == playlist?.activeTrack.album?.name &&
+                element.name == playlist.activeTrack?.name &&
+                element.album?.name == playlist.activeTrack?.album?.name &&
                 TypeConversionUtils.artists_X_String<Artist>(
                         element.artists ?? []) ==
                     TypeConversionUtils.artists_X_String<Artist>(
-                        playlist?.activeTrack.artists ?? []),
+                        playlist.activeTrack?.artists ?? []),
           ) ==
           true;
-    }, [localTracks, playlist?.activeTrack]);
+    }, [localTracks, playlist.activeTrack]);
 
+    final sleepTimerEntries = useMemoized(
+      () => {
+        context.l10n.mins(15): const Duration(minutes: 15),
+        context.l10n.mins(30): const Duration(minutes: 30),
+        context.l10n.hour(1): const Duration(hours: 1),
+        context.l10n.hour(2): const Duration(hours: 2),
+      },
+      [context.l10n],
+    );
+
+    var customHoursEnabled =
+        sleepTimer == null || sleepTimerEntries.values.contains(sleepTimer);
     return Row(
       mainAxisAlignment: mainAxisAlignment,
       children: [
-        PlatformIconButton(
-          icon: const Icon(SpotubeIcons.queue),
-          tooltip: 'Queue',
-          onPressed: playlist != null
-              ? () {
-                  showModalBottomSheet(
-                    context: context,
-                    isDismissible: true,
-                    enableDrag: true,
-                    isScrollControlled: true,
-                    backgroundColor: Colors.black12,
-                    barrierColor: Colors.black12,
-                    shape: RoundedRectangleBorder(
-                      borderRadius: BorderRadius.circular(10),
-                    ),
-                    constraints: BoxConstraints(
-                      maxHeight: MediaQuery.of(context).size.height * .7,
-                    ),
-                    builder: (context) {
-                      return PlayerQueue(floating: floatingQueue);
-                    },
-                  );
-                }
-              : null,
-        ),
-        if (!isLocalTrack)
-          PlatformIconButton(
-            icon: const Icon(SpotubeIcons.alternativeRoute),
-            tooltip: "Alternative Track Sources",
-            onPressed: playlist?.activeTrack != null
+        if (showQueue)
+          IconButton(
+            icon: const Icon(SpotubeIcons.queue),
+            tooltip: context.l10n.queue,
+            onPressed: playlist.activeTrack != null
                 ? () {
                     showModalBottomSheet(
                       context: context,
@@ -96,7 +91,30 @@ class PlayerActions extends HookConsumerWidget {
                         borderRadius: BorderRadius.circular(10),
                       ),
                       constraints: BoxConstraints(
-                        maxHeight: MediaQuery.of(context).size.height * .5,
+                        maxHeight: MediaQuery.of(context).size.height * .7,
+                      ),
+                      builder: (context) {
+                        return PlayerQueue(floating: floatingQueue);
+                      },
+                    );
+                  }
+                : null,
+          ),
+        if (!isLocalTrack)
+          IconButton(
+            icon: const Icon(SpotubeIcons.alternativeRoute),
+            tooltip: context.l10n.alternative_track_sources,
+            onPressed: playlist.activeTrack != null
+                ? () {
+                    showModalBottomSheet(
+                      context: context,
+                      isDismissible: true,
+                      enableDrag: true,
+                      isScrollControlled: true,
+                      backgroundColor: Colors.black12,
+                      barrierColor: Colors.black12,
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(10),
                       ),
                       builder: (context) {
                         return SiblingTracksSheet(floating: floatingQueue);
@@ -115,17 +133,73 @@ class PlayerActions extends HookConsumerWidget {
               ),
             )
           else
-            PlatformIconButton(
-              tooltip: 'Download track',
+            IconButton(
+              tooltip: context.l10n.download_track,
               icon: Icon(
                 isDownloaded ? SpotubeIcons.done : SpotubeIcons.download,
               ),
-              onPressed: playlist?.activeTrack != null
-                  ? () => downloader.addToQueue(playlist!.activeTrack)
+              onPressed: playlist.activeTrack != null
+                  ? () => downloader.enqueue(playlist.activeTrack!)
                   : null,
             ),
-        if (playlist?.activeTrack != null && !isLocalTrack && auth != null)
-          TrackHeartButton(track: playlist!.activeTrack),
+        if (playlist.activeTrack != null && !isLocalTrack && auth != null)
+          TrackHeartButton(track: playlist.activeTrack!),
+        AdaptivePopSheetList(
+          offset: Offset(0, -50 * (sleepTimerEntries.values.length + 2)),
+          headings: [
+            Text(context.l10n.sleep_timer),
+          ],
+          icon: Icon(
+            SpotubeIcons.timer,
+            color: sleepTimer != null ? Colors.red : null,
+          ),
+          onSelected: (value) {
+            if (value == Duration.zero) {
+              sleepTimerNotifier.cancelSleepTimer();
+            } else {
+              sleepTimerNotifier.setSleepTimer(value);
+            }
+          },
+          children: [
+            for (final entry in sleepTimerEntries.entries)
+              PopSheetEntry(
+                value: entry.value,
+                enabled: sleepTimer != entry.value,
+                title: Text(entry.key),
+              ),
+            PopSheetEntry(
+              title: Text(
+                customHoursEnabled
+                    ? context.l10n.custom_hours
+                    : sleepTimer.format(abbreviated: true),
+              ),
+              // only enabled when there's no preset timers selected
+              enabled: customHoursEnabled,
+              onTap: () async {
+                final currentTime = TimeOfDay.now();
+                final time = await showTimePicker(
+                  context: context,
+                  initialTime: currentTime,
+                );
+
+                if (time != null) {
+                  sleepTimerNotifier.setSleepTimer(
+                    Duration(
+                      hours: (time.hour - currentTime.hour).abs(),
+                      minutes: (time.minute - currentTime.minute).abs(),
+                    ),
+                  );
+                }
+              },
+            ),
+            PopSheetEntry(
+              value: Duration.zero,
+              enabled: sleepTimer != Duration.zero && sleepTimer != null,
+              textColor: Colors.green,
+              title: Text(context.l10n.cancel),
+            ),
+          ],
+        ),
         ...(extraActions ?? [])
       ],
     );
diff --git a/lib/components/player/player_controls.dart b/lib/components/player/player_controls.dart
index 5c041e5e..11f69740 100644
--- a/lib/components/player/player_controls.dart
+++ b/lib/components/player/player_controls.dart
@@ -2,18 +2,25 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+import 'package:palette_generator/palette_generator.dart';
+
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/collections/intents.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/hooks/use_progress.dart';
 import 'package:spotube/models/logger.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/services/audio_player/audio_player.dart';
+import 'package:spotube/services/audio_player/loop_mode.dart';
 import 'package:spotube/utils/primitive_utils.dart';
 
 class PlayerControls extends HookConsumerWidget {
-  final Color? iconColor;
+  final PaletteGenerator? palette;
+  final bool compact;
 
   PlayerControls({
-    this.iconColor,
+    this.palette,
+    this.compact = false,
     Key? key,
   }) : super(key: key);
 
@@ -36,198 +43,261 @@ class PlayerControls extends HookConsumerWidget {
               SeekIntent: SeekAction(),
             },
         []);
-    final playlist = ref.watch(PlaylistQueueNotifier.provider);
-    final playlistNotifier = ref.watch(PlaylistQueueNotifier.notifier);
-    final playing = useStream(PlaylistQueueNotifier.playing).data ??
-        PlaylistQueueNotifier.isPlaying;
+    final playlist = ref.watch(ProxyPlaylistNotifier.provider);
+    final playlistNotifier = ref.watch(ProxyPlaylistNotifier.notifier);
 
-    return GestureDetector(
-      behavior: HitTestBehavior.translucent,
-      onTap: () {
-        if (focusNode.canRequestFocus) {
-          focusNode.requestFocus();
-        }
-      },
-      child: FocusableActionDetector(
-        focusNode: focusNode,
-        shortcuts: shortcuts,
-        actions: actions,
-        child: Container(
-          constraints: const BoxConstraints(maxWidth: 600),
-          child: Column(
-            children: [
-              HookBuilder(
-                builder: (context) {
-                  final duration =
-                      useStream(PlaylistQueueNotifier.duration).data ??
-                          Duration.zero;
-                  final positionSnapshot =
-                      useStream(PlaylistQueueNotifier.position);
-                  final position = positionSnapshot.data ?? Duration.zero;
-                  final totalMinutes = PrimitiveUtils.zeroPadNumStr(
-                      duration.inMinutes.remainder(60));
-                  final totalSeconds = PrimitiveUtils.zeroPadNumStr(
-                      duration.inSeconds.remainder(60));
-                  final currentMinutes = PrimitiveUtils.zeroPadNumStr(
-                      position.inMinutes.remainder(60));
-                  final currentSeconds = PrimitiveUtils.zeroPadNumStr(
-                      position.inSeconds.remainder(60));
+    final playing =
+        useStream(audioPlayer.playingStream).data ?? audioPlayer.isPlaying;
+    final buffering = useStream(audioPlayer.bufferingStream).data ?? true;
+    final theme = Theme.of(context);
 
-                  final sliderMax = duration.inSeconds;
-                  final sliderValue = position.inSeconds;
+    final isDominantColorDark = ThemeData.estimateBrightnessForColor(
+          palette?.dominantColor?.color ?? theme.colorScheme.primary,
+        ) ==
+        Brightness.dark;
 
-                  final progressStatic =
-                      (sliderMax == 0 || sliderValue > sliderMax)
-                          ? 0
-                          : sliderValue / sliderMax;
+    final dominantColor = isDominantColorDark
+        ? palette?.mutedColor ?? palette?.dominantColor
+        : palette?.dominantColor;
 
-                  final progress = useState<num>(
-                    useMemoized(() => progressStatic, []),
-                  );
+    final sliderColor =
+        palette?.dominantColor?.titleTextColor ?? theme.colorScheme.primary;
 
-                  useEffect(() {
-                    progress.value = progressStatic;
-                    return null;
-                  }, [progressStatic]);
+    final buttonStyle = IconButton.styleFrom(
+      backgroundColor: dominantColor?.color.withOpacity(0.2) ??
+          theme.colorScheme.surface.withOpacity(0.4),
+      minimumSize: const Size(28, 28),
+    );
 
-                  // this is a hack to fix duration not being updated
-                  useEffect(() {
-                    WidgetsBinding.instance.addPostFrameCallback((_) async {
-                      if (positionSnapshot.hasData &&
-                          duration == Duration.zero) {
-                        await Future.delayed(const Duration(milliseconds: 200));
-                        await playlistNotifier.pause();
-                        await Future.delayed(const Duration(milliseconds: 400));
-                        await playlistNotifier.resume();
-                      }
-                    });
-                    return null;
-                  }, [positionSnapshot.hasData, duration]);
+    final activeButtonStyle = IconButton.styleFrom(
+      backgroundColor:
+          dominantColor?.titleTextColor ?? theme.colorScheme.primaryContainer,
+      foregroundColor:
+          dominantColor?.color ?? theme.colorScheme.onPrimaryContainer,
+      minimumSize: const Size(28, 28),
+    );
 
-                  return Column(
-                    children: [
-                      PlatformTooltip(
-                        message: "Slide to seek forward or backward",
-                        child: PlatformSlider(
-                          // cannot divide by zero
-                          // there's an edge case for value being bigger
-                          // than total duration. Keeping it resolved
-                          value: progress.value.toDouble(),
-                          onChanged: playlist?.isLoading == true
-                              ? null
-                              : (v) {
-                                  progress.value = v;
-                                },
-                          onChangeEnd: (value) async {
-                            await playlistNotifier.seek(
-                              Duration(
-                                seconds: (value * sliderMax).toInt(),
-                              ),
-                            );
-                          },
-                          activeColor: iconColor,
-                        ),
-                      ),
-                      Padding(
-                        padding: const EdgeInsets.symmetric(
-                          horizontal: 8.0,
-                        ),
-                        child: Row(
-                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                          children: [
-                            PlatformText(
-                              "$currentMinutes:$currentSeconds",
+    final accentColor = palette?.lightVibrantColor ??
+        palette?.darkVibrantColor ??
+        dominantColor;
+
+    final resumePauseStyle = IconButton.styleFrom(
+      backgroundColor: accentColor?.color ?? theme.colorScheme.primary,
+      foregroundColor:
+          accentColor?.titleTextColor ?? theme.colorScheme.onPrimary,
+      padding: EdgeInsets.all(compact ? 10 : 12),
+      iconSize: compact ? 18 : 24,
+    );
+
+    return RepaintBoundary(
+      child: GestureDetector(
+        behavior: HitTestBehavior.translucent,
+        onTap: () {
+          if (focusNode.canRequestFocus) {
+            focusNode.requestFocus();
+          }
+        },
+        child: FocusableActionDetector(
+          focusNode: focusNode,
+          shortcuts: shortcuts,
+          actions: actions,
+          child: Container(
+            constraints: const BoxConstraints(maxWidth: 600),
+            child: Column(
+              children: [
+                if (!compact)
+                  HookBuilder(
+                    builder: (context) {
+                      final (
+                        :bufferProgress,
+                        :duration,
+                        :position,
+                        :progressStatic
+                      ) = useProgress(ref);
+
+                      final totalMinutes = PrimitiveUtils.zeroPadNumStr(
+                        duration.inMinutes.remainder(60),
+                      );
+                      final totalSeconds = PrimitiveUtils.zeroPadNumStr(
+                        duration.inSeconds.remainder(60),
+                      );
+                      final currentMinutes = PrimitiveUtils.zeroPadNumStr(
+                        position.inMinutes.remainder(60),
+                      );
+                      final currentSeconds = PrimitiveUtils.zeroPadNumStr(
+                        position.inSeconds.remainder(60),
+                      );
+
+                      final progress = useState<num>(
+                        useMemoized(() => progressStatic, []),
+                      );
+
+                      useEffect(() {
+                        progress.value = progressStatic;
+                        return null;
+                      }, [progressStatic]);
+
+                      return Column(
+                        children: [
+                          Tooltip(
+                            message: context.l10n.slide_to_seek,
+                            child: Slider.adaptive(
+                              // cannot divide by zero
+                              // there's an edge case for value being bigger
+                              // than total duration. Keeping it resolved
+                              value: progress.value.toDouble(),
+                              secondaryTrackValue: bufferProgress,
+                              onChanged:
+                                  playlist.isFetching == true || buffering
+                                      ? null
+                                      : (v) {
+                                          progress.value = v;
+                                        },
+                              onChangeEnd: (value) async {
+                                await audioPlayer.seek(
+                                  Duration(
+                                    seconds:
+                                        (value * duration.inSeconds).toInt(),
+                                  ),
+                                );
+                              },
+                              activeColor: sliderColor,
+                              secondaryActiveColor:
+                                  sliderColor.withOpacity(0.2),
+                              inactiveColor: sliderColor.withOpacity(0.15),
                             ),
-                            PlatformText("$totalMinutes:$totalSeconds"),
-                          ],
-                        ),
-                      ),
-                    ],
-                  );
-                },
-              ),
-              Row(
-                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                children: [
-                  PlatformIconButton(
-                    tooltip: playlist?.isShuffled == true
-                        ? "Unshuffle playlist"
-                        : "Shuffle playlist",
-                    icon: Icon(
-                      SpotubeIcons.shuffle,
-                      color: playlist?.isShuffled == true
-                          ? PlatformTheme.of(context).primaryColor
-                          : null,
-                    ),
-                    onPressed: playlist == null
-                        ? null
-                        : () {
-                            if (playlist.isShuffled == true) {
-                              playlistNotifier.unshuffle();
-                            } else {
-                              playlistNotifier.shuffle();
-                            }
-                          },
-                  ),
-                  PlatformIconButton(
-                    tooltip: "Previous track",
-                    icon: Icon(
-                      SpotubeIcons.skipBack,
-                      color: iconColor,
-                    ),
-                    onPressed: playlistNotifier.previous,
-                  ),
-                  PlatformIconButton(
-                    tooltip: playing ? "Pause playback" : "Resume playback",
-                    icon: playlist?.isLoading == true
-                        ? const SizedBox(
-                            height: 20,
-                            width: 20,
-                            child: PlatformCircularProgressIndicator(),
-                          )
-                        : Icon(
-                            playing ? SpotubeIcons.pause : SpotubeIcons.play,
-                            color: iconColor,
                           ),
-                    onPressed: Actions.handler<PlayPauseIntent>(
-                      context,
-                      PlayPauseIntent(ref),
-                    ),
+                          Padding(
+                            padding: const EdgeInsets.symmetric(
+                              horizontal: 8.0,
+                            ),
+                            child: DefaultTextStyle(
+                              style: theme.textTheme.bodySmall!.copyWith(
+                                color: palette?.dominantColor?.bodyTextColor,
+                              ),
+                              child: Row(
+                                mainAxisAlignment:
+                                    MainAxisAlignment.spaceBetween,
+                                children: [
+                                  Text("$currentMinutes:$currentSeconds"),
+                                  Text("$totalMinutes:$totalSeconds"),
+                                ],
+                              ),
+                            ),
+                          ),
+                        ],
+                      );
+                    },
                   ),
-                  PlatformIconButton(
-                    tooltip: "Next track",
-                    icon: Icon(
-                      SpotubeIcons.skipForward,
-                      color: iconColor,
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                  children: [
+                    StreamBuilder<bool>(
+                        stream: audioPlayer.shuffledStream,
+                        builder: (context, snapshot) {
+                          final shuffled = snapshot.data ?? false;
+                          return IconButton(
+                            tooltip: shuffled
+                                ? context.l10n.unshuffle_playlist
+                                : context.l10n.shuffle_playlist,
+                            icon: const Icon(SpotubeIcons.shuffle),
+                            style: shuffled ? activeButtonStyle : buttonStyle,
+                            onPressed: playlist.isFetching == true || buffering
+                                ? null
+                                : () {
+                                    if (shuffled) {
+                                      audioPlayer.setShuffle(false);
+                                    } else {
+                                      audioPlayer.setShuffle(true);
+                                    }
+                                  },
+                          );
+                        }),
+                    IconButton(
+                      tooltip: context.l10n.previous_track,
+                      icon: const Icon(SpotubeIcons.skipBack),
+                      style: buttonStyle,
+                      onPressed: playlist.isFetching == true || buffering
+                          ? null
+                          : playlistNotifier.previous,
                     ),
-                    onPressed: playlistNotifier.next,
-                  ),
-                  PlatformIconButton(
-                    tooltip: playlist?.isLooping != true
-                        ? "Loop Track"
-                        : "Repeat playlist",
-                    icon: Icon(
-                      playlist?.isLooping == true
-                          ? SpotubeIcons.repeatOne
-                          : SpotubeIcons.repeat,
-                      color: playlist?.isLooping == true
-                          ? PlatformTheme.of(context).primaryColor
-                          : null,
+                    IconButton(
+                      tooltip: playing
+                          ? context.l10n.pause_playback
+                          : context.l10n.resume_playback,
+                      icon: playlist.isFetching == true
+                          ? SizedBox(
+                              height: 20,
+                              width: 20,
+                              child: CircularProgressIndicator(
+                                color: accentColor?.titleTextColor ??
+                                    theme.colorScheme.onPrimary,
+                              ),
+                            )
+                          : Icon(
+                              playing ? SpotubeIcons.pause : SpotubeIcons.play,
+                            ),
+                      style: resumePauseStyle,
+                      onPressed: playlist.isFetching == true
+                          ? null
+                          : Actions.handler<PlayPauseIntent>(
+                              context,
+                              PlayPauseIntent(ref),
+                            ),
                     ),
-                    onPressed: playlist == null || playlist.isLoading
-                        ? null
-                        : () {
-                            if (playlist.isLooping == true) {
-                              playlistNotifier.unloop();
-                            } else {
-                              playlistNotifier.loop();
-                            }
-                          },
-                  ),
-                ],
-              ),
-              const SizedBox(height: 5)
-            ],
+                    IconButton(
+                      tooltip: context.l10n.next_track,
+                      icon: const Icon(SpotubeIcons.skipForward),
+                      style: buttonStyle,
+                      onPressed: playlist.isFetching == true || buffering
+                          ? null
+                          : playlistNotifier.next,
+                    ),
+                    StreamBuilder<PlaybackLoopMode>(
+                        stream: audioPlayer.loopModeStream,
+                        builder: (context, snapshot) {
+                          final loopMode =
+                              snapshot.data ?? PlaybackLoopMode.none;
+                          return IconButton(
+                            tooltip: loopMode == PlaybackLoopMode.one
+                                ? context.l10n.loop_track
+                                : loopMode == PlaybackLoopMode.all
+                                    ? context.l10n.repeat_playlist
+                                    : null,
+                            icon: Icon(
+                              loopMode == PlaybackLoopMode.one
+                                  ? SpotubeIcons.repeatOne
+                                  : SpotubeIcons.repeat,
+                            ),
+                            style: loopMode == PlaybackLoopMode.one ||
+                                    loopMode == PlaybackLoopMode.all
+                                ? activeButtonStyle
+                                : buttonStyle,
+                            onPressed: playlist.isFetching == true || buffering
+                                ? null
+                                : () async {
+                                    switch (await audioPlayer.loopMode) {
+                                      case PlaybackLoopMode.all:
+                                        audioPlayer
+                                            .setLoopMode(PlaybackLoopMode.one);
+                                        break;
+                                      case PlaybackLoopMode.one:
+                                        audioPlayer
+                                            .setLoopMode(PlaybackLoopMode.none);
+                                        break;
+                                      case PlaybackLoopMode.none:
+                                        audioPlayer
+                                            .setLoopMode(PlaybackLoopMode.all);
+                                        break;
+                                    }
+                                  },
+                          );
+                        }),
+                  ],
+                ),
+                const SizedBox(height: 5)
+              ],
+            ),
           ),
         ),
       ),
diff --git a/lib/components/player/player_overlay.dart b/lib/components/player/player_overlay.dart
index 553bb783..e51d11ef 100644
--- a/lib/components/player/player_overlay.dart
+++ b/lib/components/player/player_overlay.dart
@@ -4,12 +4,13 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/player/player_track_details.dart';
-import 'package:spotube/hooks/use_palette_color.dart';
 import 'package:spotube/collections/intents.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/hooks/use_progress.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/services/audio_player/audio_player.dart';
 import 'package:spotube/utils/service_utils.dart';
 
 class PlayerOverlay extends HookConsumerWidget {
@@ -22,101 +23,138 @@ class PlayerOverlay extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    final paletteColor = usePaletteColor(albumArt, ref);
     final canShow = ref.watch(
-      PlaylistQueueNotifier.provider.select((s) => s != null),
+      ProxyPlaylistNotifier.provider.select((s) => s.active != null),
+    );
+    final playlistNotifier = ref.watch(ProxyPlaylistNotifier.notifier);
+    final playlist = ref.watch(ProxyPlaylistNotifier.provider);
+    final playing =
+        useStream(audioPlayer.playingStream).data ?? audioPlayer.isPlaying;
+
+    final theme = Theme.of(context);
+    final textColor = theme.colorScheme.primary;
+
+    const radius = BorderRadius.only(
+      topLeft: Radius.circular(10),
+      topRight: Radius.circular(10),
     );
-    final playlistNotifier = ref.watch(PlaylistQueueNotifier.notifier);
-    final playlist = ref.watch(PlaylistQueueNotifier.provider);
-    final playing = useStream(PlaylistQueueNotifier.playing).data ??
-        PlaylistQueueNotifier.isPlaying;
 
     return GestureDetector(
       onVerticalDragEnd: (details) {
         int sensitivity = 8;
         if (details.primaryVelocity != null &&
             details.primaryVelocity! < -sensitivity) {
-          ServiceUtils.navigate(context, "/player");
+          ServiceUtils.push(context, "/player");
         }
       },
       child: ClipRRect(
-        borderRadius: BorderRadius.circular(5),
+        borderRadius: radius,
         child: BackdropFilter(
           filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
           child: AnimatedContainer(
             duration: const Duration(milliseconds: 250),
             width: MediaQuery.of(context).size.width,
-            height: canShow ? 50 : 0,
+            height: canShow ? 53 : 0,
             decoration: BoxDecoration(
-              color: paletteColor.color.withOpacity(.7),
-              border: Border.all(
-                color: paletteColor.titleTextColor,
-                width: 2,
-              ),
-              borderRadius: BorderRadius.circular(5),
+              color: theme.colorScheme.secondaryContainer.withOpacity(.8),
+              borderRadius: radius,
             ),
             child: AnimatedOpacity(
               duration: const Duration(milliseconds: 250),
               opacity: canShow ? 1 : 0,
-              child: Material(
-                textStyle: PlatformTheme.of(context).textTheme!.body!,
-                type: MaterialType.transparency,
-                child: Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: [
-                    Expanded(
-                      child: MouseRegion(
-                        cursor: SystemMouseCursors.click,
-                        child: GestureDetector(
-                          onTap: () => GoRouter.of(context).push("/player"),
-                          child: PlayerTrackDetails(
-                            albumArt: albumArt,
-                            color: paletteColor.bodyTextColor,
-                          ),
+              child: RepaintBoundary(
+                child: Material(
+                  type: MaterialType.transparency,
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      HookBuilder(
+                        builder: (context) {
+                          final progress = useProgress(ref);
+                          // animated
+                          return TweenAnimationBuilder<double>(
+                            duration: const Duration(milliseconds: 250),
+                            tween: Tween<double>(
+                              begin: 0,
+                              end: progress.progressStatic,
+                            ),
+                            builder: (context, value, child) {
+                              return LinearProgressIndicator(
+                                value: value,
+                                minHeight: 2,
+                                backgroundColor: Colors.transparent,
+                                valueColor: AlwaysStoppedAnimation(
+                                  theme.colorScheme.primary,
+                                ),
+                              );
+                            },
+                          );
+                        },
+                      ),
+                      Expanded(
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            Expanded(
+                              child: MouseRegion(
+                                cursor: SystemMouseCursors.click,
+                                child: GestureDetector(
+                                  onTap: () =>
+                                      GoRouter.of(context).push("/player"),
+                                  child: PlayerTrackDetails(
+                                    albumArt: albumArt,
+                                    color: textColor,
+                                  ),
+                                ),
+                              ),
+                            ),
+                            Row(
+                              children: [
+                                IconButton(
+                                  icon: Icon(
+                                    SpotubeIcons.skipBack,
+                                    color: textColor,
+                                  ),
+                                  onPressed: playlistNotifier.previous,
+                                ),
+                                Consumer(
+                                  builder: (context, ref, _) {
+                                    return IconButton(
+                                      icon: playlist.isFetching
+                                          ? const SizedBox(
+                                              height: 20,
+                                              width: 20,
+                                              child:
+                                                  CircularProgressIndicator(),
+                                            )
+                                          : Icon(
+                                              playing
+                                                  ? SpotubeIcons.pause
+                                                  : SpotubeIcons.play,
+                                              color: textColor,
+                                            ),
+                                      onPressed:
+                                          Actions.handler<PlayPauseIntent>(
+                                        context,
+                                        PlayPauseIntent(ref),
+                                      ),
+                                    );
+                                  },
+                                ),
+                                IconButton(
+                                  icon: Icon(
+                                    SpotubeIcons.skipForward,
+                                    color: textColor,
+                                  ),
+                                  onPressed: playlistNotifier.next,
+                                ),
+                              ],
+                            ),
+                          ],
                         ),
                       ),
-                    ),
-                    Row(
-                      children: [
-                        IconButton(
-                          icon: Icon(
-                            SpotubeIcons.skipBack,
-                            color: paletteColor.bodyTextColor,
-                          ),
-                          onPressed: playlistNotifier.previous,
-                        ),
-                        Consumer(
-                          builder: (context, ref, _) {
-                            return IconButton(
-                              icon: playlist?.isLoading == true
-                                  ? const SizedBox(
-                                      height: 20,
-                                      width: 20,
-                                      child: CircularProgressIndicator(),
-                                    )
-                                  : Icon(
-                                      playing
-                                          ? SpotubeIcons.pause
-                                          : SpotubeIcons.play,
-                                      color: paletteColor.bodyTextColor,
-                                    ),
-                              onPressed: Actions.handler<PlayPauseIntent>(
-                                context,
-                                PlayPauseIntent(ref),
-                              ),
-                            );
-                          },
-                        ),
-                        IconButton(
-                          icon: Icon(
-                            SpotubeIcons.skipForward,
-                            color: paletteColor.bodyTextColor,
-                          ),
-                          onPressed: playlistNotifier.next,
-                        ),
-                      ],
-                    ),
-                  ],
+                    ],
+                  ),
                 ),
               ),
             ),
diff --git a/lib/components/player/player_queue.dart b/lib/components/player/player_queue.dart
index c72967fb..599da26e 100644
--- a/lib/components/player/player_queue.dart
+++ b/lib/components/player/player_queue.dart
@@ -3,14 +3,14 @@ import 'dart:ui';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:scroll_to_index/scroll_to_index.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/fallbacks/not_found.dart';
 import 'package:spotube/components/shared/track_table/track_tile.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/hooks/use_auto_scroll_controller.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
-import 'package:spotube/utils/primitive_utils.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 
 class PlayerQueue extends HookConsumerWidget {
   final bool floating;
@@ -21,10 +21,10 @@ class PlayerQueue extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    final playlist = ref.watch(PlaylistQueueNotifier.provider);
-    final playlistNotifier = ref.watch(PlaylistQueueNotifier.notifier);
+    final playlist = ref.watch(ProxyPlaylistNotifier.provider);
+    final playlistNotifier = ref.watch(ProxyPlaylistNotifier.notifier);
     final controller = useAutoScrollController();
-    final tracks = playlist?.tracks ?? {};
+    final tracks = playlist.tracks;
 
     if (tracks.isEmpty) {
       return const NotFound(vertical: true);
@@ -36,15 +36,15 @@ class PlayerQueue extends HookConsumerWidget {
             topLeft: Radius.circular(10),
             topRight: Radius.circular(10),
           );
-    final headlineColor =
-        PlatformTheme.of(context).textTheme?.subheading?.color;
+    final theme = Theme.of(context);
+    final headlineColor = theme.textTheme.headlineSmall?.color;
 
     useEffect(() {
-      if (playlist == null) return null;
-      final index = playlist.active;
-      if (index < 0) return;
+      if (playlist.active == null) return null;
+
+      if (playlist.active! < 0) return;
       controller.scrollToIndex(
-        index,
+        playlist.active!,
         preferPosition: AutoScrollPosition.middle,
       );
       return null;
@@ -61,9 +61,7 @@ class PlayerQueue extends HookConsumerWidget {
           top: 5.0,
         ),
         decoration: BoxDecoration(
-          color: PlatformTheme.of(context)
-              .scaffoldBackgroundColor
-              ?.withOpacity(0.5),
+          color: theme.scaffoldBackgroundColor.withOpacity(0.5),
           borderRadius: borderRadius,
         ),
         child: Column(
@@ -80,8 +78,8 @@ class PlayerQueue extends HookConsumerWidget {
             Row(
               children: [
                 const SizedBox(width: 10),
-                PlatformText(
-                  "${tracks.length} tracks in Queue",
+                Text(
+                  context.l10n.tracks_in_queue(tracks.length),
                   style: TextStyle(
                     color: headlineColor,
                     fontWeight: FontWeight.bold,
@@ -89,20 +87,17 @@ class PlayerQueue extends HookConsumerWidget {
                   ),
                 ),
                 const Spacer(),
-                PlatformFilledButton(
-                  style: ButtonStyle(
-                    backgroundColor: MaterialStatePropertyAll(
-                        PlatformTheme.of(context)
-                            .scaffoldBackgroundColor
-                            ?.withOpacity(0.5)),
-                    foregroundColor: MaterialStatePropertyAll(
-                        PlatformTheme.of(context).textTheme?.subheading?.color),
+                FilledButton(
+                  style: FilledButton.styleFrom(
+                    backgroundColor:
+                        theme.scaffoldBackgroundColor.withOpacity(0.5),
+                    foregroundColor: theme.textTheme.headlineSmall?.color,
                   ),
                   child: Row(
-                    children: const [
-                      Icon(SpotubeIcons.playlistRemove),
-                      SizedBox(width: 5),
-                      Text("Clear All"),
+                    children: [
+                      const Icon(SpotubeIcons.playlistRemove),
+                      const SizedBox(width: 5),
+                      Text(context.l10n.clear_all),
                     ],
                   ),
                   onPressed: () {
@@ -115,14 +110,16 @@ class PlayerQueue extends HookConsumerWidget {
             ),
             const SizedBox(height: 10),
             Flexible(
-              child: ListView.builder(
-                  controller: controller,
+              child: ReorderableListView.builder(
+                  onReorder: (oldIndex, newIndex) {
+                    playlistNotifier.moveTrack(oldIndex, newIndex);
+                  },
+                  scrollController: controller,
                   itemCount: tracks.length,
                   shrinkWrap: true,
+                  buildDefaultDragHandles: false,
                   itemBuilder: (context, i) {
-                    final track = tracks.toList().asMap().entries.elementAt(i);
-                    String duration =
-                        "${track.value.duration?.inMinutes.remainder(60)}:${PrimitiveUtils.zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}";
+                    final track = tracks.elementAt(i);
                     return AutoScrollTag(
                       key: ValueKey(i),
                       controller: controller,
@@ -130,16 +127,20 @@ class PlayerQueue extends HookConsumerWidget {
                       child: Padding(
                         padding: const EdgeInsets.symmetric(horizontal: 8.0),
                         child: TrackTile(
-                          playlist,
+                          index: i,
                           track: track,
-                          duration: duration,
-                          isActive: playlist?.activeTrack.id == track.value.id,
-                          onTrackPlayButtonPressed: (currentTrack) async {
-                            if (playlist?.activeTrack.id == track.value.id) {
+                          onTap: () async {
+                            if (playlist.activeTrack?.id == track.id) {
                               return;
                             }
-                            await playlistNotifier.playTrack(currentTrack);
+                            await playlistNotifier.jumpToTrack(track);
                           },
+                          leadingActions: [
+                            ReorderableDragStartListener(
+                              index: i,
+                              child: const Icon(SpotubeIcons.dragHandle),
+                            ),
+                          ],
                         ),
                       ),
                     );
diff --git a/lib/components/player/player_track_details.dart b/lib/components/player/player_track_details.dart
index 26df2ba7..d6f275fa 100644
--- a/lib/components/player/player_track_details.dart
+++ b/lib/components/player/player_track_details.dart
@@ -1,10 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+import 'package:spotify/spotify.dart';
+
 import 'package:spotube/collections/assets.gen.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/utils/service_utils.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 class PlayerTrackDetails extends HookConsumerWidget {
@@ -15,48 +17,65 @@ class PlayerTrackDetails extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    final breakpoint = useBreakpoints();
-    final playback = ref.watch(PlaylistQueueNotifier.provider);
+    final theme = Theme.of(context);
+    final mediaQuery = MediaQuery.of(context);
+    final playback = ref.watch(ProxyPlaylistNotifier.provider);
 
     return Row(
       children: [
-        if (albumArt != null)
-          Padding(
-            padding: const EdgeInsets.all(5.0),
-            child: UniversalImage(
-              path: albumArt!,
-              height: 50,
-              width: 50,
-              placeholder: (context, url) {
-                return Assets.albumPlaceholder.image(
-                  height: 50,
-                  width: 50,
-                );
-              },
+        if (playback.activeTrack != null)
+          Container(
+            padding: const EdgeInsets.all(6),
+            constraints: const BoxConstraints(
+              maxWidth: 80,
+              maxHeight: 80,
+            ),
+            child: ClipRRect(
+              borderRadius: BorderRadius.circular(4),
+              child: UniversalImage(
+                path: albumArt ?? "",
+                placeholder: Assets.albumPlaceholder.path,
+              ),
             ),
           ),
-        if (breakpoint.isLessThanOrEqualTo(Breakpoints.md))
+        if (mediaQuery.mdAndDown)
           Flexible(
-            child: PlatformText(
-              playback?.activeTrack.name ?? "Not playing",
-              overflow: TextOverflow.ellipsis,
-              style: TextStyle(fontWeight: FontWeight.bold, color: color),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const SizedBox(height: 4),
+                Text(
+                  playback.activeTrack?.name ?? "",
+                  overflow: TextOverflow.ellipsis,
+                  style: theme.textTheme.bodyMedium?.copyWith(
+                    color: color,
+                  ),
+                ),
+                Text(
+                  TypeConversionUtils.artists_X_String<Artist>(
+                    playback.activeTrack?.artists ?? [],
+                  ),
+                  overflow: TextOverflow.ellipsis,
+                  style: theme.textTheme.bodySmall!.copyWith(color: color),
+                )
+              ],
             ),
           ),
-
-        //  title of the currently playing track
-        if (breakpoint.isMoreThan(Breakpoints.md))
+        if (mediaQuery.lgAndUp)
           Flexible(
             flex: 1,
             child: Column(
               children: [
-                PlatformText(
-                  playback?.activeTrack.name ?? "Not playing",
+                Text(
+                  playback.activeTrack?.name ?? "",
                   overflow: TextOverflow.ellipsis,
                   style: TextStyle(fontWeight: FontWeight.bold, color: color),
                 ),
                 TypeConversionUtils.artists_X_ClickableArtists(
-                  playback?.activeTrack.artists ?? [],
+                  playback.activeTrack?.artists ?? [],
+                  onRouteChange: (route) {
+                    ServiceUtils.push(context, route);
+                  },
                 )
               ],
             ),
diff --git a/lib/components/player/sibling_tracks_sheet.dart b/lib/components/player/sibling_tracks_sheet.dart
index 683ec23a..774ad890 100644
--- a/lib/components/player/sibling_tracks_sheet.dart
+++ b/lib/components/player/sibling_tracks_sheet.dart
@@ -3,12 +3,22 @@ import 'dart:ui';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+import 'package:spotify/spotify.dart' hide Offset;
+import 'package:spotube/collections/spotube_icons.dart';
+
 import 'package:spotube/components/shared/image/universal_image.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/hooks/use_debounce.dart';
+import 'package:spotube/models/matched_track.dart';
 import 'package:spotube/models/spotube_track.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/provider/user_preferences_provider.dart';
+import 'package:spotube/provider/youtube_provider.dart';
+import 'package:spotube/services/youtube/youtube.dart';
 import 'package:spotube/utils/primitive_utils.dart';
-import 'package:youtube_explode_dart/youtube_explode_dart.dart';
+import 'package:spotube/utils/service_utils.dart';
+import 'package:spotube/utils/type_conversion_utils.dart';
 
 class SiblingTracksSheet extends HookConsumerWidget {
   final bool floating;
@@ -19,12 +29,46 @@ class SiblingTracksSheet extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    final playlist = ref.watch(PlaylistQueueNotifier.provider);
-    final playlistNotifier = ref.watch(PlaylistQueueNotifier.notifier);
+    final theme = Theme.of(context);
+    final playlist = ref.watch(ProxyPlaylistNotifier.provider);
+    final playlistNotifier = ref.watch(ProxyPlaylistNotifier.notifier);
+    final preferences = ref.watch(userPreferencesProvider);
+    final youtube = ref.watch(youtubeProvider);
 
-    final siblings = playlist?.isLoading == false
-        ? (playlist!.activeTrack as SpotubeTrack).siblings
-        : <Video>[];
+    final isSearching = useState(false);
+    final searchMode = useState(preferences.searchMode);
+
+    final title = ServiceUtils.getTitle(
+      playlist.activeTrack?.name ?? "",
+      artists:
+          playlist.activeTrack?.artists?.map((e) => e.name!).toList() ?? [],
+      onlyCleanArtist: true,
+    ).trim();
+
+    final defaultSearchTerm =
+        "$title - ${TypeConversionUtils.artists_X_String<Artist>(playlist.activeTrack?.artists ?? [])}";
+    final searchController = useTextEditingController(
+      text: defaultSearchTerm,
+    );
+
+    final searchTerm = useDebounce<String>(
+      useValueListenable(searchController).text,
+    );
+
+    final searchRequest = useMemoized(() async {
+      if (searchTerm.trim().isEmpty) {
+        return <YoutubeVideoInfo>[];
+      }
+
+      return youtube.search(searchTerm.trim());
+    }, [
+      searchTerm,
+      searchMode.value,
+    ]);
+
+    final siblings = playlist.isFetching == false
+        ? (playlist.activeTrack as SpotubeTrack).siblings
+        : <YoutubeVideoInfo>[];
 
     final borderRadius = floating
         ? BorderRadius.circular(10)
@@ -34,82 +78,157 @@ class SiblingTracksSheet extends HookConsumerWidget {
           );
 
     useEffect(() {
-      if (playlist?.activeTrack is SpotubeTrack &&
-          (playlist?.activeTrack as SpotubeTrack).siblings.isEmpty) {
+      if (playlist.activeTrack is SpotubeTrack &&
+          (playlist.activeTrack as SpotubeTrack).siblings.isEmpty) {
         playlistNotifier.populateSibling();
       }
       return null;
-    }, [playlist?.activeTrack]);
+    }, [playlist.activeTrack]);
 
+    final itemBuilder = useCallback((YoutubeVideoInfo video) {
+      return ListTile(
+        title: Text(video.title),
+        leading: Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: UniversalImage(
+            path: video.thumbnailUrl,
+            height: 60,
+            width: 60,
+          ),
+        ),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(5),
+        ),
+        trailing: Text(
+          PrimitiveUtils.toReadableDuration(video.duration),
+        ),
+        subtitle: Text(video.channelName),
+        enabled: playlist.isFetching != true,
+        selected: playlist.isFetching != true &&
+            video.id == (playlist.activeTrack as SpotubeTrack).ytTrack.id,
+        selectedTileColor: theme.popupMenuTheme.color,
+        onTap: () {
+          if (playlist.isFetching == false &&
+              video.id != (playlist.activeTrack as SpotubeTrack).ytTrack.id) {
+            playlistNotifier.swapSibling(video);
+            Navigator.of(context).pop();
+          }
+        },
+      );
+    }, [
+      playlist.isFetching,
+      playlist.activeTrack,
+      siblings,
+    ]);
+
+    var mediaQuery = MediaQuery.of(context);
     return BackdropFilter(
       filter: ImageFilter.blur(
         sigmaX: 12.0,
         sigmaY: 12.0,
       ),
-      child: Container(
-        margin: const EdgeInsets.all(8.0),
-        decoration: BoxDecoration(
-          borderRadius: borderRadius,
-          color: PlatformTheme.of(context)
-              .scaffoldBackgroundColor!
-              .withOpacity(.3),
-        ),
-        child: Scaffold(
-          backgroundColor: Colors.transparent,
-          appBar: PlatformAppBar(
-            centerTitle: true,
-            title: PlatformText.subheading(
-              'Alternative Tracks Sources',
-            ),
-            automaticallyImplyLeading: false,
-            backgroundColor: Colors.transparent,
-            toolbarOpacity: 0,
+      child: AnimatedSize(
+        duration: const Duration(milliseconds: 300),
+        child: Container(
+          height: isSearching.value && mediaQuery.smAndDown
+              ? mediaQuery.size.height
+              : mediaQuery.size.height * .6,
+          margin: const EdgeInsets.all(8.0),
+          decoration: BoxDecoration(
+            borderRadius: borderRadius,
+            color: theme.scaffoldBackgroundColor.withOpacity(.3),
           ),
-          body: Container(
-            padding: const EdgeInsets.symmetric(horizontal: 8.0),
-            child: ListView.builder(
-              itemCount: siblings.length,
-              itemBuilder: (context, index) {
-                final video = siblings[index];
-                return PlatformListTile(
-                  title: PlatformText(video.title),
-                  leading: Padding(
-                    padding: const EdgeInsets.all(8.0),
-                    child: UniversalImage(
-                      path: video.thumbnails.lowResUrl,
-                      height: 60,
-                      width: 60,
+          child: Scaffold(
+            backgroundColor: Colors.transparent,
+            appBar: AppBar(
+              centerTitle: true,
+              title: AnimatedSwitcher(
+                duration: const Duration(milliseconds: 300),
+                child: !isSearching.value
+                    ? Text(
+                        context.l10n.alternative_track_sources,
+                        style: theme.textTheme.headlineSmall,
+                      )
+                    : TextField(
+                        autofocus: true,
+                        controller: searchController,
+                        decoration: InputDecoration(
+                          hintText: context.l10n.search,
+                          hintStyle: theme.textTheme.headlineSmall,
+                          border: InputBorder.none,
+                        ),
+                        style: theme.textTheme.headlineSmall,
+                      ),
+              ),
+              automaticallyImplyLeading: false,
+              backgroundColor: Colors.transparent,
+              actions: [
+                if (!isSearching.value)
+                  IconButton(
+                    icon: const Icon(SpotubeIcons.search, size: 18),
+                    onPressed: () {
+                      isSearching.value = true;
+                    },
+                  )
+                else ...[
+                  if (preferences.youtubeApiType == YoutubeApiType.piped)
+                    PopupMenuButton(
+                      icon: const Icon(SpotubeIcons.filter, size: 18),
+                      onSelected: (SearchMode mode) {
+                        searchMode.value = mode;
+                      },
+                      initialValue: searchMode.value,
+                      itemBuilder: (context) => SearchMode.values
+                          .map(
+                            (e) => PopupMenuItem(
+                              value: e,
+                              child: Text(e.label),
+                            ),
+                          )
+                          .toList(),
                     ),
+                  IconButton(
+                    icon: const Icon(SpotubeIcons.close, size: 18),
+                    onPressed: () {
+                      isSearching.value = false;
+                    },
                   ),
-                  shape: RoundedRectangleBorder(
-                    borderRadius: BorderRadius.circular(5),
-                  ),
-                  trailing: PlatformText(
-                    PrimitiveUtils.toReadableDuration(
-                      video.duration ?? Duration.zero,
+                ]
+              ],
+            ),
+            body: Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: AnimatedSwitcher(
+                duration: const Duration(milliseconds: 300),
+                transitionBuilder: (child, animation) =>
+                    FadeTransition(opacity: animation, child: child),
+                child: switch (isSearching.value) {
+                  false => ListView.builder(
+                      itemCount: siblings.length,
+                      itemBuilder: (context, index) =>
+                          itemBuilder(siblings[index]),
                     ),
-                  ),
-                  subtitle: PlatformText(video.author),
-                  enabled: playlist?.isLoading != true,
-                  selected: playlist?.isLoading != true &&
-                      video.id.value ==
-                          (playlist?.activeTrack as SpotubeTrack)
-                              .ytTrack
-                              .id
-                              .value,
-                  selectedTileColor: Theme.of(context).popupMenuTheme.color,
-                  onTap: () async {
-                    if (playlist?.isLoading == false &&
-                        video.id.value !=
-                            (playlist?.activeTrack as SpotubeTrack)
-                                .ytTrack
-                                .id
-                                .value) {
-                      await playlistNotifier.swapSibling(video);
-                    }
-                  },
-                );
-              },
+                  true => FutureBuilder(
+                      future: searchRequest,
+                      builder: (context, snapshot) {
+                        if (snapshot.hasError) {
+                          return Center(
+                            child: Text(snapshot.error.toString()),
+                          );
+                        } else if (!snapshot.hasData) {
+                          return const Center(
+                              child: CircularProgressIndicator());
+                        }
+
+                        return ListView.builder(
+                          itemCount: snapshot.data!.length,
+                          itemBuilder: (context, index) =>
+                              itemBuilder(snapshot.data![index]),
+                        );
+                      },
+                    ),
+                },
+              ),
             ),
           ),
         ),
diff --git a/lib/components/player/volume_slider.dart b/lib/components/player/volume_slider.dart
new file mode 100644
index 00000000..55f8520d
--- /dev/null
+++ b/lib/components/player/volume_slider.dart
@@ -0,0 +1,66 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotube/collections/spotube_icons.dart';
+import 'package:spotube/provider/volume_provider.dart';
+
+class VolumeSlider extends HookConsumerWidget {
+  final bool fullWidth;
+  const VolumeSlider({
+    Key? key,
+    this.fullWidth = false,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final volume = ref.watch(volumeProvider);
+    final volumeNotifier = ref.watch(volumeProvider.notifier);
+
+    var slider = Listener(
+      onPointerSignal: (event) async {
+        if (event is PointerScrollEvent) {
+          if (event.scrollDelta.dy > 0) {
+            final value = volume - .2;
+            volumeNotifier.setVolume(value < 0 ? 0 : value);
+          } else {
+            final value = volume + .2;
+            volumeNotifier.setVolume(value > 1 ? 1 : value);
+          }
+        }
+      },
+      child: Slider.adaptive(
+        min: 0,
+        max: 1,
+        value: volume,
+        onChanged: volumeNotifier.setVolume,
+      ),
+    );
+    return Row(
+      mainAxisAlignment:
+          !fullWidth ? MainAxisAlignment.center : MainAxisAlignment.start,
+      children: [
+        IconButton(
+          icon: Icon(
+            volume == 0
+                ? SpotubeIcons.volumeMute
+                : volume <= 0.2
+                    ? SpotubeIcons.volumeLow
+                    : volume <= 0.6
+                        ? SpotubeIcons.volumeMedium
+                        : SpotubeIcons.volumeHigh,
+            size: 16,
+          ),
+          onPressed: () {
+            if (volume == 0) {
+              volumeNotifier.setVolume(1);
+            } else {
+              volumeNotifier.setVolume(0);
+            }
+          },
+        ),
+        if (fullWidth) Expanded(child: slider) else slider,
+      ],
+    );
+  }
+}
diff --git a/lib/components/playlist/playlist_card.dart b/lib/components/playlist/playlist_card.dart
index b02b5f56..579fbf93 100644
--- a/lib/components/playlist/playlist_card.dart
+++ b/lib/components/playlist/playlist_card.dart
@@ -4,57 +4,48 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/shared/playbutton_card.dart';
-import 'package:spotube/hooks/use_breakpoint_value.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/provider/spotify_provider.dart';
+import 'package:spotube/services/audio_player/audio_player.dart';
 import 'package:spotube/services/queries/queries.dart';
 import 'package:spotube/utils/service_utils.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 class PlaylistCard extends HookConsumerWidget {
   final PlaylistSimple playlist;
-  final PlaybuttonCardViewType viewType;
   const PlaylistCard(
     this.playlist, {
     Key? key,
-    this.viewType = PlaybuttonCardViewType.square,
   }) : super(key: key);
   @override
   Widget build(BuildContext context, ref) {
-    final playlistQueue = ref.watch(PlaylistQueueNotifier.provider);
-    final playlistNotifier = ref.watch(PlaylistQueueNotifier.notifier);
-    final playing = useStream(PlaylistQueueNotifier.playing).data ??
-        PlaylistQueueNotifier.isPlaying;
+    final playlistQueue = ref.watch(ProxyPlaylistNotifier.provider);
+    final playlistNotifier = ref.watch(ProxyPlaylistNotifier.notifier);
+    final playing =
+        useStream(audioPlayer.playingStream).data ?? audioPlayer.isPlaying;
     final queryBowl = QueryClient.of(context);
-    final query = queryBowl.getQuery<List<Track>, dynamic>(
-      "playlist-tracks/${playlist.id}",
-    );
     final tracks = useState<List<TrackSimple>?>(null);
     bool isPlaylistPlaying = useMemoized(
-      () =>
-          playlistNotifier.isPlayingPlaylist(tracks.value ?? query?.data ?? []),
-      [playlistNotifier, tracks.value, query?.data],
+      () => playlistQueue.containsCollection(playlist.id!),
+      [playlistQueue, playlist.id],
     );
 
-    final int marginH =
-        useBreakpointValue(sm: 10, md: 15, lg: 20, xl: 20, xxl: 20);
-
     final updating = useState(false);
     final spotify = ref.watch(spotifyProvider);
 
     return PlaybuttonCard(
-      viewType: viewType,
-      margin: EdgeInsets.symmetric(horizontal: marginH.toDouble()),
+      margin: const EdgeInsets.symmetric(horizontal: 10),
       title: playlist.name!,
+      description: playlist.description,
       imageUrl: TypeConversionUtils.image_X_UrlString(
         playlist.images,
         placeholder: ImagePlaceholder.collection,
       ),
       isPlaying: isPlaylistPlaying,
-      isLoading: (isPlaylistPlaying && playlistQueue?.isLoading == true) ||
-          updating.value,
+      isLoading:
+          (isPlaylistPlaying && playlistQueue.isFetching) || updating.value,
       onTap: () {
-        ServiceUtils.navigate(
+        ServiceUtils.push(
           context,
           "/playlist/${playlist.id}",
           extra: playlist,
@@ -64,9 +55,9 @@ class PlaylistCard extends HookConsumerWidget {
         try {
           updating.value = true;
           if (isPlaylistPlaying && playing) {
-            return playlistNotifier.pause();
+            return audioPlayer.pause();
           } else if (isPlaylistPlaying && !playing) {
-            return playlistNotifier.resume();
+            return audioPlayer.resume();
           }
 
           List<Track> fetchedTracks = await queryBowl.fetchQuery(
@@ -77,7 +68,8 @@ class PlaylistCard extends HookConsumerWidget {
 
           if (fetchedTracks.isEmpty) return;
 
-          await playlistNotifier.loadAndPlay(fetchedTracks);
+          await playlistNotifier.load(fetchedTracks, autoPlay: true);
+          playlistNotifier.addCollection(playlist.id!);
           tracks.value = fetchedTracks;
         } finally {
           updating.value = false;
@@ -95,7 +87,8 @@ class PlaylistCard extends HookConsumerWidget {
 
           if (fetchedTracks.isEmpty) return;
 
-          playlistNotifier.add(fetchedTracks);
+          playlistNotifier.addTracks(fetchedTracks);
+          playlistNotifier.addCollection(playlist.id!);
           tracks.value = fetchedTracks;
           if (context.mounted) {
             final snackbar = SnackBar(
@@ -103,7 +96,8 @@ class PlaylistCard extends HookConsumerWidget {
               action: SnackBarAction(
                 label: "Undo",
                 onPressed: () {
-                  playlistNotifier.remove(fetchedTracks);
+                  playlistNotifier
+                      .removeTracks(fetchedTracks.map((e) => e.id!));
                 },
               ),
             );
diff --git a/lib/components/playlist/playlist_create_dialog.dart b/lib/components/playlist/playlist_create_dialog.dart
index 9dad8bc3..b7cee79d 100644
--- a/lib/components/playlist/playlist_create_dialog.dart
+++ b/lib/components/playlist/playlist_create_dialog.dart
@@ -1,150 +1,142 @@
 import 'package:fl_query_hooks/fl_query_hooks.dart';
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+import 'package:spotify/spotify.dart';
+
 import 'package:spotube/collections/spotube_icons.dart';
-import 'package:spotube/components/root/sidebar.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/spotify_provider.dart';
 
 class PlaylistCreateDialog extends HookConsumerWidget {
-  const PlaylistCreateDialog({Key? key}) : super(key: key);
+  /// Track ids to add to the playlist
+  final List<String> trackIds;
+  const PlaylistCreateDialog({
+    Key? key,
+    this.trackIds = const [],
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context, ref) {
     final spotify = ref.watch(spotifyProvider);
+    final playlistName = useTextEditingController();
+    final description = useTextEditingController();
+    final public = useState(false);
+    final collaborative = useState(false);
+    final client = useQueryClient();
+    final navigator = Navigator.of(context);
 
-    return SizedBox(
-      width: 200,
-      child: PlatformTextButton(
-        onPressed: () {
-          showPlatformAlertDialog(
-            context,
-            builder: (context) {
-              return HookBuilder(builder: (context) {
-                final playlistName = useTextEditingController();
-                final description = useTextEditingController();
-                final public = useState(false);
-                final collaborative = useState(false);
-                final client = useQueryClient();
-                final navigator = Navigator.of(context);
+    Future<void> onCreate() async {
+      if (playlistName.text.isEmpty) return;
+      final me = await spotify.me.get();
+      final playlist = await spotify.playlists.createPlaylist(
+        me.id!,
+        playlistName.text,
+        collaborative: collaborative.value,
+        public: public.value,
+        description: description.text,
+      );
+      if (trackIds.isNotEmpty) {
+        await spotify.playlists.addTracks(
+          trackIds.map((id) => "spotify:track:$id").toList(),
+          playlist.id!,
+        );
+      }
+      await client
+          .getQuery(
+            "current-user-playlists",
+          )
+          ?.refresh();
+      navigator.pop(playlist);
+    }
 
-                onCreate() async {
-                  if (playlistName.text.isEmpty) return;
-                  final me = await spotify.me.get();
-                  await spotify.playlists.createPlaylist(
-                    me.id!,
-                    playlistName.text,
-                    collaborative: collaborative.value,
-                    public: public.value,
-                    description: description.text,
-                  );
-                  await client
-                      .getQuery(
-                        "current-user-playlists",
-                      )
-                      ?.refresh();
-                  navigator.pop();
-                }
-
-                return PlatformAlertDialog(
-                  macosAppIcon: Sidebar.brandLogo(),
-                  title: const PlatformText("Create a Playlist"),
-                  primaryActions: [
-                    PlatformBuilder(
-                      fallback: PlatformBuilderFallback.android,
-                      android: (context, _) {
-                        return PlatformFilledButton(
-                          onPressed: onCreate,
-                          child: const Text("Create"),
-                        );
-                      },
-                      ios: (context, data) {
-                        return CupertinoDialogAction(
-                          isDefaultAction: true,
-                          onPressed: onCreate,
-                          child: const Text("Create"),
-                        );
-                      },
-                    ),
-                  ],
-                  secondaryActions: [
-                    PlatformBuilder(
-                      fallback: PlatformBuilderFallback.android,
-                      android: (context, _) {
-                        return PlatformFilledButton(
-                          isSecondary: true,
-                          child: const Text("Cancel"),
-                          onPressed: () {
-                            Navigator.pop(context);
-                          },
-                        );
-                      },
-                      ios: (context, data) {
-                        return CupertinoDialogAction(
-                          onPressed: () {
-                            Navigator.pop(context);
-                          },
-                          isDestructiveAction: true,
-                          child: const Text("Cancel"),
-                        );
-                      },
-                    ),
-                  ],
-                  content: Container(
-                    width: MediaQuery.of(context).size.width,
-                    constraints: const BoxConstraints(maxWidth: 500),
-                    child: ListView(
-                      shrinkWrap: true,
-                      children: [
-                        PlatformTextField(
-                          controller: playlistName,
-                          placeholder: "Name of the playlist",
-                          label: "Playlist Name",
-                        ),
-                        const SizedBox(height: 10),
-                        PlatformTextField(
-                          controller: description,
-                          placeholder: "Description...",
-                          keyboardType: TextInputType.multiline,
-                          maxLines: 5,
-                        ),
-                        const SizedBox(height: 10),
-                        PlatformCheckbox(
-                          value: public.value,
-                          label: const PlatformText("Public"),
-                          onChanged: (val) => public.value = val ?? false,
-                        ),
-                        const SizedBox(height: 10),
-                        PlatformCheckbox(
-                          value: collaborative.value,
-                          label: const PlatformText("Collaborative"),
-                          onChanged: (val) =>
-                              collaborative.value = val ?? false,
-                        ),
-                      ],
-                    ),
-                  ),
-                );
-              });
-            },
-          );
-        },
-        style: ButtonStyle(
-          padding: MaterialStateProperty.all(
-            const EdgeInsets.symmetric(vertical: 100),
-          ),
+    return AlertDialog(
+      title: Text(context.l10n.create_a_playlist),
+      actions: [
+        OutlinedButton(
+          child: Text(context.l10n.cancel),
+          onPressed: () {
+            Navigator.pop(context);
+          },
         ),
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: const [
-            Icon(SpotubeIcons.addFilled, size: 40),
-            PlatformText("Create Playlist", style: TextStyle(fontSize: 20)),
+        FilledButton(
+          onPressed: onCreate,
+          child: Text(context.l10n.create),
+        ),
+      ],
+      content: Container(
+        width: MediaQuery.of(context).size.width,
+        constraints: const BoxConstraints(maxWidth: 500),
+        child: ListView(
+          shrinkWrap: true,
+          children: [
+            TextField(
+              controller: playlistName,
+              decoration: InputDecoration(
+                hintText: context.l10n.name_of_playlist,
+                labelText: context.l10n.name_of_playlist,
+              ),
+            ),
+            const SizedBox(height: 10),
+            TextField(
+              controller: description,
+              decoration: InputDecoration(
+                hintText: context.l10n.description,
+              ),
+              keyboardType: TextInputType.multiline,
+              maxLines: 5,
+            ),
+            const SizedBox(height: 10),
+            CheckboxListTile(
+              title: Text(context.l10n.public),
+              value: public.value,
+              onChanged: (val) => public.value = val ?? false,
+            ),
+            const SizedBox(height: 10),
+            CheckboxListTile(
+              title: Text(context.l10n.collaborative),
+              value: collaborative.value,
+              onChanged: (val) => collaborative.value = val ?? false,
+            ),
           ],
         ),
       ),
     );
   }
 }
+
+class PlaylistCreateDialogButton extends HookConsumerWidget {
+  const PlaylistCreateDialogButton({Key? key}) : super(key: key);
+
+  showPlaylistDialog(BuildContext context, SpotifyApi spotify) {
+    showDialog(
+      context: context,
+      builder: (context) => const PlaylistCreateDialog(),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final mediaQuery = MediaQuery.of(context);
+    final spotify = ref.watch(spotifyProvider);
+
+    if (mediaQuery.smAndDown) {
+      return ElevatedButton(
+        style: FilledButton.styleFrom(
+          foregroundColor: Theme.of(context).colorScheme.primary,
+        ),
+        child: const Icon(SpotubeIcons.addFilled),
+        onPressed: () => showPlaylistDialog(context, spotify),
+      );
+    }
+
+    return FilledButton.tonalIcon(
+        style: FilledButton.styleFrom(
+          foregroundColor: Theme.of(context).colorScheme.primary,
+        ),
+        icon: const Icon(SpotubeIcons.addFilled),
+        label: Text(context.l10n.create_playlist),
+        onPressed: () => showPlaylistDialog(context, spotify));
+  }
+}
diff --git a/lib/components/root/bottom_player.dart b/lib/components/root/bottom_player.dart
index 92f23ff3..5a09ffa5 100644
--- a/lib/components/root/bottom_player.dart
+++ b/lib/components/root/bottom_player.dart
@@ -1,21 +1,26 @@
-import 'package:flutter/cupertino.dart';
-import 'package:flutter/gestures.dart';
+import 'dart:ui';
+
+import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:macos_ui/macos_ui.dart';
-import 'package:fluent_ui/fluent_ui.dart' as fluent_ui;
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotube/collections/assets.gen.dart';
+import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/player/player_actions.dart';
 import 'package:spotube/components/player/player_overlay.dart';
 import 'package:spotube/components/player/player_track_details.dart';
 import 'package:spotube/components/player/player_controls.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
-import 'package:spotube/hooks/use_platform_property.dart';
+import 'package:spotube/components/player/volume_slider.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/hooks/use_brightness_value.dart';
 import 'package:spotube/models/logger.dart';
 import 'package:flutter/material.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/provider/authentication_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/provider/user_preferences_provider.dart';
+import 'package:spotube/utils/platform.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 class BottomPlayer extends HookConsumerWidget {
@@ -24,140 +29,100 @@ class BottomPlayer extends HookConsumerWidget {
   final logger = getLogger(BottomPlayer);
   @override
   Widget build(BuildContext context, ref) {
-    final playlist = ref.watch(PlaylistQueueNotifier.provider);
+    final auth = ref.watch(AuthenticationNotifier.provider);
+    final playlist = ref.watch(ProxyPlaylistNotifier.provider);
     final layoutMode =
         ref.watch(userPreferencesProvider.select((s) => s.layoutMode));
 
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
 
     String albumArt = useMemoized(
-      () => playlist?.activeTrack.album?.images?.isNotEmpty == true
+      () => playlist.activeTrack?.album?.images?.isNotEmpty == true
           ? TypeConversionUtils.image_X_UrlString(
-              playlist?.activeTrack.album?.images,
-              index: (playlist?.activeTrack.album?.images?.length ?? 1) - 1,
+              playlist.activeTrack?.album?.images,
+              index: (playlist.activeTrack?.album?.images?.length ?? 1) - 1,
               placeholder: ImagePlaceholder.albumArt,
             )
           : Assets.albumPlaceholder.path,
-      [playlist?.activeTrack.album?.images],
+      [playlist.activeTrack?.album?.images],
+    );
+
+    final theme = Theme.of(context);
+    final bg = theme.colorScheme.surfaceVariant;
+
+    final bgColor = useBrightnessValue(
+      Color.lerp(bg, Colors.white, 0.7),
+      Color.lerp(bg, Colors.black, 0.45)!,
     );
 
     // returning an empty non spacious Container as the overlay will take
     // place in the global overlay stack aka [_entries]
     if (layoutMode == LayoutMode.compact ||
-        (breakpoint.isLessThanOrEqualTo(Breakpoints.md) &&
-            layoutMode == LayoutMode.adaptive)) {
-      return Padding(
-        padding: const EdgeInsets.only(bottom: 8, left: 8, right: 8, top: 0),
-        child: PlayerOverlay(albumArt: albumArt),
-      );
+        ((mediaQuery.mdAndDown) && layoutMode == LayoutMode.adaptive)) {
+      return PlayerOverlay(albumArt: albumArt);
     }
 
-    final backgroundColor = usePlatformProperty<Color?>(
-      (context) => PlatformProperty(
-        android: Theme.of(context).backgroundColor,
-        ios: CupertinoTheme.of(context).scaffoldBackgroundColor,
-        macos: MacosTheme.of(context).brightness == Brightness.dark
-            ? Colors.grey[800]
-            : Colors.blueGrey[50],
-        linux: Theme.of(context).backgroundColor,
-        windows: fluent_ui.FluentTheme.maybeOf(context)?.micaBackgroundColor,
-      ),
-    );
-
-    final border = usePlatformProperty<BoxBorder?>(
-      (context) => PlatformProperty(
-        android: null,
-        ios: Border(
-          top: BorderSide(
-            color: PlatformTheme.of(context).borderColor ?? Colors.transparent,
-            width: 1,
-          ),
-        ),
-        macos: Border(
-          top: BorderSide(
-            color: PlatformTheme.of(context).borderColor ?? Colors.transparent,
-            width: 1,
-          ),
-        ),
-        linux: Border(
-          top: BorderSide(
-            color: PlatformTheme.of(context).borderColor ?? Colors.transparent,
-            width: 1,
-          ),
-        ),
-        windows: null,
-      ),
-    );
-
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        color: backgroundColor,
-        border: border,
-      ),
-      child: Material(
-        type: MaterialType.transparency,
-        textStyle: PlatformTheme.of(context).textTheme!.body!,
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-          children: [
-            Expanded(child: PlayerTrackDetails(albumArt: albumArt)),
-            // controls
-            Flexible(
-              flex: 3,
-              child: PlayerControls(),
-            ),
-            // add to saved tracks
-            Expanded(
-              flex: 1,
-              child: Wrap(
-                alignment: WrapAlignment.center,
-                runAlignment: WrapAlignment.center,
-                children: [
-                  Container(
-                    height: 20,
-                    constraints: const BoxConstraints(maxWidth: 200),
-                    child: HookBuilder(builder: (context) {
-                      final volumeState = ref.watch(VolumeProvider.provider);
-                      final volumeNotifier =
-                          ref.watch(VolumeProvider.provider.notifier);
-                      final volume = useState(volumeState);
-
-                      useEffect(() {
-                        if (volume.value != volumeState) {
-                          volume.value = volumeState;
-                        }
-                        return null;
-                      }, [volumeState]);
-
-                      return Listener(
-                        onPointerSignal: (event) async {
-                          if (event is PointerScrollEvent) {
-                            if (event.scrollDelta.dy > 0) {
-                              final value = volume.value - .2;
-                              volumeNotifier.setVolume(value < 0 ? 0 : value);
-                            } else {
-                              final value = volume.value + .2;
-                              volumeNotifier.setVolume(value > 1 ? 1 : value);
-                            }
-                          }
-                        },
-                        child: PlatformSlider(
-                          min: 0,
-                          max: 1,
-                          value: volume.value,
-                          onChanged: (v) {
-                            volume.value = v;
-                          },
-                          onChangeEnd: volumeNotifier.setVolume,
-                        ),
-                      );
-                    }),
+    return ClipRect(
+      child: BackdropFilter(
+        filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
+        child: DecoratedBox(
+          decoration: BoxDecoration(color: bgColor?.withOpacity(0.8)),
+          child: Material(
+            type: MaterialType.transparency,
+            textStyle: theme.textTheme.bodyMedium!,
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Expanded(child: PlayerTrackDetails(albumArt: albumArt)),
+                // controls
+                Flexible(
+                  flex: 3,
+                  child: Padding(
+                    padding: const EdgeInsets.only(top: 5),
+                    child: PlayerControls(),
                   ),
-                  PlayerActions()
-                ],
-              ),
-            )
-          ],
+                ),
+                // add to saved tracks
+                Column(
+                  children: [
+                    PlayerActions(
+                      extraActions: [
+                        if (auth != null)
+                          IconButton(
+                            tooltip: context.l10n.mini_player,
+                            icon: const Icon(SpotubeIcons.miniPlayer),
+                            onPressed: () async {
+                              await DesktopTools.window.setMinimumSize(
+                                const Size(300, 300),
+                              );
+                              await DesktopTools.window.setAlwaysOnTop(true);
+                              if (!kIsLinux) {
+                                await DesktopTools.window.setHasShadow(false);
+                              }
+                              await DesktopTools.window
+                                  .setAlignment(Alignment.topRight);
+                              await DesktopTools.window
+                                  .setSize(const Size(400, 500));
+                              await Future.delayed(
+                                const Duration(milliseconds: 100),
+                                () async {
+                                  GoRouter.of(context).go('/mini-player');
+                                },
+                              );
+                            },
+                          ),
+                      ],
+                    ),
+                    Container(
+                      height: 40,
+                      constraints: const BoxConstraints(maxWidth: 250),
+                      child: const VolumeSlider(),
+                    )
+                  ],
+                )
+              ],
+            ),
+          ),
         ),
       ),
     );
diff --git a/lib/components/root/sidebar.dart b/lib/components/root/sidebar.dart
index e8197b76..64525823 100644
--- a/lib/components/root/sidebar.dart
+++ b/lib/components/root/sidebar.dart
@@ -1,22 +1,25 @@
-import 'package:badges/badges.dart';
+import 'package:collection/collection.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:flutter/material.dart' hide Badge;
-import 'package:platform_ui/platform_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:sidebarx/sidebarx.dart';
+
 import 'package:spotube/collections/assets.gen.dart';
 import 'package:spotube/collections/side_bar_tiles.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/hooks/use_brightness_value.dart';
+import 'package:spotube/hooks/use_sidebarx_controller.dart';
+import 'package:spotube/provider/download_manager_provider.dart';
 import 'package:spotube/provider/authentication_provider.dart';
-import 'package:spotube/provider/downloader_provider.dart';
 
 import 'package:spotube/provider/user_preferences_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
 import 'package:spotube/utils/platform.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
-import 'package:fluent_ui/fluent_ui.dart' as fluent_ui;
 
 class Sidebar extends HookConsumerWidget {
   final int selectedIndex;
@@ -40,143 +43,175 @@ class Sidebar extends HookConsumerWidget {
     );
   }
 
-  static Widget macSpacer = const SizedBox(height: 25);
-
   static void goToSettings(BuildContext context) {
     GoRouter.of(context).go("/settings");
   }
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final breakpoints = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
 
     final downloadCount = ref.watch(
-      downloaderProvider.select((s) => s.currentlyRunning),
+      downloadManagerProvider.select((s) => s.length),
     );
 
     final layoutMode =
         ref.watch(userPreferencesProvider.select((s) => s.layoutMode));
 
-    if (breakpoints.isMd) {
-      return Row(
-        children: [
-          NavigationRail(
-            selectedIndex: selectedIndex,
-            onDestinationSelected: onSelectedIndexChanged,
-            labelType: NavigationRailLabelType.all,
-            extended: false,
-            backgroundColor: PlatformTheme.of(context).scaffoldBackgroundColor,
-            leading: Column(
-              children: [
-                if (kIsMacOS) macSpacer,
-                brandLogo(),
-              ],
-            ),
-            trailing: PlatformIconButton(
-              icon: const Icon(fluent_ui.FluentIcons.settings),
-              onPressed: () => goToSettings(context),
-            ),
-            destinations: [
-              for (final e in sidebarTileList)
-                NavigationRailDestination(
-                  icon: Badge(
-                    badgeColor: PlatformTheme.of(context).primaryColor!,
-                    showBadge: e.title == "Library" && downloadCount > 0,
-                    badgeContent: Text(
+    final controller = useSidebarXController(
+      selectedIndex: selectedIndex,
+      extended: mediaQuery.lgAndUp,
+    );
+
+    final theme = Theme.of(context);
+    final bg = theme.colorScheme.surfaceVariant;
+
+    final bgColor = useBrightnessValue(
+      Color.lerp(bg, Colors.white, 0.7),
+      Color.lerp(bg, Colors.black, 0.45)!,
+    );
+
+    final sidebarTileList =
+        useMemoized(() => getSidebarTileList(context.l10n), [context.l10n]);
+
+    useEffect(() {
+      controller.addListener(() {
+        onSelectedIndexChanged(controller.selectedIndex);
+      });
+      return null;
+    }, [controller]);
+
+    useEffect(() {
+      if (!context.mounted) return;
+      if (mediaQuery.lgAndUp && !controller.extended) {
+        controller.setExtended(true);
+      } else if (mediaQuery.mdAndDown && controller.extended) {
+        controller.setExtended(false);
+      }
+      return null;
+    }, [mediaQuery, controller]);
+
+    if (layoutMode == LayoutMode.compact ||
+        (mediaQuery.smAndDown && layoutMode == LayoutMode.adaptive)) {
+      return Scaffold(body: child);
+    }
+
+    return Row(
+      children: [
+        SafeArea(
+          child: SidebarX(
+            controller: controller,
+            items: sidebarTileList.mapIndexed(
+              (index, e) {
+                return SidebarXItem(
+                  iconWidget: Badge(
+                    backgroundColor: theme.colorScheme.primary,
+                    isLabelVisible: e.title == "Library" && downloadCount > 0,
+                    label: Text(
                       downloadCount.toString(),
                       style: const TextStyle(
                         color: Colors.white,
                         fontSize: 10,
                       ),
                     ),
-                    child: Icon(e.icon),
-                  ),
-                  label: PlatformText.label(
-                    e.title,
-                    style: selectedIndex == sidebarTileList.indexOf(e)
-                        ? TextStyle(
-                            color: PlatformTheme.of(context).primaryColor,
-                            fontWeight: FontWeight.bold,
-                          )
-                        : null,
+                    child: Icon(
+                      e.icon,
+                      color: selectedIndex == index
+                          ? theme.colorScheme.primary
+                          : null,
+                    ),
                   ),
+                  label: e.title,
+                );
+              },
+            ).toList(),
+            headerBuilder: (_, __) => const SidebarHeader(),
+            footerBuilder: (_, __) => const Padding(
+              padding: EdgeInsets.only(bottom: 5),
+              child: SidebarFooter(),
+            ),
+            showToggleButton: false,
+            theme: SidebarXTheme(
+              width: 50,
+              margin: EdgeInsets.only(bottom: 10, top: kIsMacOS ? 35 : 5),
+              selectedItemDecoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(10),
+                color: theme.colorScheme.primary.withOpacity(0.1),
+              ),
+              selectedIconTheme: IconThemeData(
+                color: theme.colorScheme.primary,
+              ),
+            ),
+            extendedTheme: SidebarXTheme(
+              width: 250,
+              margin: EdgeInsets.only(
+                bottom: 10,
+                left: 0,
+                top: kIsMacOS ? 35 : 5,
+              ),
+              padding: const EdgeInsets.symmetric(horizontal: 6),
+              decoration: BoxDecoration(
+                color: bgColor?.withOpacity(0.8),
+                borderRadius: const BorderRadius.only(
+                  topRight: Radius.circular(10),
+                  bottomRight: Radius.circular(10),
                 ),
-            ],
+              ),
+              selectedItemDecoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(10),
+                color: theme.colorScheme.primary.withOpacity(0.1),
+              ),
+              selectedIconTheme: IconThemeData(
+                color: theme.colorScheme.primary,
+              ),
+              selectedTextStyle: theme.textTheme.bodyMedium?.copyWith(
+                color: theme.colorScheme.primary,
+                fontWeight: FontWeight.w600,
+              ),
+              itemTextPadding: const EdgeInsets.only(left: 10),
+              selectedItemTextPadding: const EdgeInsets.only(left: 10),
+            ),
           ),
-          Container(
-            width: 1,
-            height: double.infinity,
-            color: PlatformTheme.of(context).borderColor,
-          ),
-          Expanded(child: child)
-        ],
+        ),
+        Expanded(child: child)
+      ],
+    );
+  }
+}
+
+class SidebarHeader extends HookWidget {
+  const SidebarHeader({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final mediaQuery = MediaQuery.of(context);
+    final theme = Theme.of(context);
+
+    if (mediaQuery.mdAndDown) {
+      return Container(
+        height: 40,
+        width: 40,
+        margin: const EdgeInsets.only(bottom: 5),
+        child: Sidebar.brandLogo(),
       );
     }
 
-    if (layoutMode == LayoutMode.compact ||
-        (breakpoints.isSm && layoutMode == LayoutMode.adaptive)) {
-      return PlatformScaffold(body: child);
-    }
-
-    return SafeArea(
-      top: false,
-      child: PlatformSidebar(
-        currentIndex: selectedIndex,
-        onIndexChanged: onSelectedIndexChanged,
-        body: Map.fromEntries(
-          sidebarTileList.map(
-            (e) {
-              final icon = Icon(e.icon);
-              return MapEntry(
-                PlatformSidebarItem(
-                  icon: Badge(
-                    badgeColor: PlatformTheme.of(context).primaryColor!,
-                    showBadge: e.title == "Library" && downloadCount > 0,
-                    badgeContent: Text(
-                      downloadCount.toString(),
-                      style: const TextStyle(
-                        color: Colors.white,
-                        fontSize: 10,
-                      ),
-                    ),
-                    child: icon,
-                  ),
-                  title: Text(
-                    e.title,
-                    style: const TextStyle(
-                      fontWeight: FontWeight.bold,
-                      fontSize: 16,
-                    ),
-                  ),
-                ),
-                child,
-              );
-            },
-          ),
-        ),
-        expanded: true,
-        header: Padding(
-          padding: const EdgeInsets.all(8.0),
-          child: Column(
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Column(
+        children: [
+          if (kIsMacOS) const SizedBox(height: 25),
+          Row(
             children: [
-              if (kIsMacOS) macSpacer,
-              Row(
-                children: [
-                  brandLogo(),
-                  const SizedBox(width: 10),
-                  PlatformText.headline("Spotube"),
-                ],
+              Sidebar.brandLogo(),
+              const SizedBox(width: 10),
+              Text(
+                "Spotube",
+                style: theme.textTheme.titleLarge,
               ),
             ],
           ),
-        ),
-        windowsFooterItems: [
-          fluent_ui.PaneItemAction(
-            icon: const Icon(SpotubeIcons.settings),
-            onTap: () => goToSettings(context),
-          ),
         ],
-        footer: const SidebarFooter(),
       ),
     );
   }
@@ -189,68 +224,68 @@ class SidebarFooter extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    return SizedBox(
-      width: 256,
-      child: HookBuilder(
-        builder: (context) {
-          final me = useQueries.user.me(ref);
-          final data = me.data;
+    final theme = Theme.of(context);
+    final mediaQuery = MediaQuery.of(context);
+    final me = useQueries.user.me(ref);
+    final data = me.data;
 
-          final avatarImg = TypeConversionUtils.image_X_UrlString(
-            data?.images,
-            index: (data?.images?.length ?? 1) - 1,
-            placeholder: ImagePlaceholder.artist,
-          );
+    final avatarImg = TypeConversionUtils.image_X_UrlString(
+      data?.images,
+      index: (data?.images?.length ?? 1) - 1,
+      placeholder: ImagePlaceholder.artist,
+    );
 
-          final auth = ref.watch(AuthenticationNotifier.provider);
+    final auth = ref.watch(AuthenticationNotifier.provider);
 
-          return Padding(
-              padding: const EdgeInsets.all(16).copyWith(left: 0),
+    if (mediaQuery.mdAndDown) {
+      return IconButton(
+        icon: const Icon(SpotubeIcons.settings),
+        onPressed: () => Sidebar.goToSettings(context),
+      );
+    }
+
+    return Container(
+      padding: const EdgeInsets.only(left: 12),
+      width: 250,
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          if (auth != null && data == null)
+            const CircularProgressIndicator()
+          else if (data != null)
+            Flexible(
               child: Row(
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: [
-                  if (auth != null && data == null)
-                    const Center(
-                      child: PlatformCircularProgressIndicator(),
-                    )
-                  else if (data != null)
-                    Flexible(
-                      child: Row(
-                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                        children: [
-                          CircleAvatar(
-                            backgroundImage:
-                                UniversalImage.imageProvider(avatarImg),
-                            onBackgroundImageError: (exception, stackTrace) =>
-                                Assets.userPlaceholder.image(
-                              height: 16,
-                              width: 16,
-                            ),
-                          ),
-                          const SizedBox(
-                            width: 10,
-                          ),
-                          Flexible(
-                            child: Text(
-                              data.displayName ?? "Guest",
-                              maxLines: 1,
-                              softWrap: false,
-                              overflow: TextOverflow.fade,
-                              style: PlatformTheme.of(context)
-                                  .textTheme
-                                  ?.body
-                                  ?.copyWith(fontWeight: FontWeight.bold),
-                            ),
-                          ),
-                        ],
-                      ),
+                  CircleAvatar(
+                    backgroundImage: UniversalImage.imageProvider(avatarImg),
+                    onBackgroundImageError: (exception, stackTrace) =>
+                        Assets.userPlaceholder.image(
+                      height: 16,
+                      width: 16,
                     ),
-                  PlatformIconButton(
-                      icon: const Icon(SpotubeIcons.settings),
-                      onPressed: () => Sidebar.goToSettings(context)),
+                  ),
+                  const SizedBox(width: 10),
+                  Flexible(
+                    child: Text(
+                      data.displayName ?? context.l10n.guest,
+                      maxLines: 1,
+                      softWrap: false,
+                      overflow: TextOverflow.fade,
+                      style: theme.textTheme.bodyMedium
+                          ?.copyWith(fontWeight: FontWeight.bold),
+                    ),
+                  ),
                 ],
-              ));
-        },
+              ),
+            ),
+          IconButton(
+            icon: const Icon(SpotubeIcons.settings),
+            onPressed: () {
+              Sidebar.goToSettings(context);
+            },
+          ),
+        ],
       ),
     );
   }
diff --git a/lib/components/root/spotube_navigation_bar.dart b/lib/components/root/spotube_navigation_bar.dart
index bb874401..111e7dd5 100644
--- a/lib/components/root/spotube_navigation_bar.dart
+++ b/lib/components/root/spotube_navigation_bar.dart
@@ -1,11 +1,16 @@
+import 'dart:ui';
+
+import 'package:curved_navigation_bar/curved_navigation_bar.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotube/collections/side_bar_tiles.dart';
 import 'package:spotube/components/root/sidebar.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
-import 'package:spotube/provider/downloader_provider.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/hooks/use_brightness_value.dart';
+import 'package:spotube/provider/download_manager_provider.dart';
 import 'package:spotube/provider/user_preferences_provider.dart';
 
 class SpotubeNavigationBar extends HookConsumerWidget {
@@ -20,43 +25,74 @@ class SpotubeNavigationBar extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
+    final theme = Theme.of(context);
     final downloadCount = ref.watch(
-      downloaderProvider.select((s) => s.currentlyRunning),
+      downloadManagerProvider.select((s) => s.length),
     );
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
     final layoutMode =
         ref.watch(userPreferencesProvider.select((s) => s.layoutMode));
 
     final insideSelectedIndex = useState<int>(selectedIndex);
 
+    final buttonColor = useBrightnessValue(
+      theme.colorScheme.inversePrimary,
+      theme.colorScheme.primary.withOpacity(0.2),
+    );
+
+    final navbarTileList =
+        useMemoized(() => getNavbarTileList(context.l10n), [context.l10n]);
+
     useEffect(() {
       insideSelectedIndex.value = selectedIndex;
       return null;
     }, [selectedIndex]);
 
     if (layoutMode == LayoutMode.extended ||
-        (breakpoint.isMoreThan(Breakpoints.sm) &&
-            layoutMode == LayoutMode.adaptive)) return const SizedBox();
-    return PlatformBottomNavigationBar(
-      items: [
-        ...navbarTileList.map(
-          (e) {
-            return PlatformBottomNavigationBarItem(
-              icon: e.icon,
-              label: e.title,
-            );
+        (mediaQuery.mdAndUp && layoutMode == LayoutMode.adaptive)) {
+      return const SizedBox();
+    }
+
+    return ClipRect(
+      child: BackdropFilter(
+        filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
+        child: CurvedNavigationBar(
+          backgroundColor:
+              theme.colorScheme.secondaryContainer.withOpacity(0.72),
+          buttonBackgroundColor: buttonColor,
+          color: theme.colorScheme.background,
+          height: 50,
+          animationDuration: const Duration(milliseconds: 350),
+          items: navbarTileList.map(
+            (e) {
+              /// Using this [Builder] as an workaround for the first item's
+              /// icon color not updating unless navigating to another page
+              return Builder(builder: (context) {
+                return MouseRegion(
+                  cursor: SystemMouseCursors.click,
+                  child: Badge(
+                    isLabelVisible: e.id == "library" && downloadCount > 0,
+                    label: Text(downloadCount.toString()),
+                    child: Icon(
+                      e.icon,
+                      color: Theme.of(context).colorScheme.primary,
+                    ),
+                  ),
+                );
+              });
+            },
+          ).toList(),
+          index: insideSelectedIndex.value,
+          onTap: (i) {
+            insideSelectedIndex.value = i;
+            if (navbarTileList[i].id == "settings") {
+              Sidebar.goToSettings(context);
+              return;
+            }
+            onSelectedIndexChanged(i);
           },
         ),
-      ],
-      selectedIndex: insideSelectedIndex.value,
-      onSelectedIndexChanged: (i) {
-        insideSelectedIndex.value = i;
-        if (navbarTileList[i].title == "Settings") {
-          Sidebar.goToSettings(context);
-          return;
-        }
-        onSelectedIndexChanged(i);
-      },
+      ),
     );
   }
 }
diff --git a/lib/components/settings/color_scheme_picker_dialog.dart b/lib/components/settings/color_scheme_picker_dialog.dart
index cb4d10b6..170bae94 100644
--- a/lib/components/settings/color_scheme_picker_dialog.dart
+++ b/lib/components/settings/color_scheme_picker_dialog.dart
@@ -1,130 +1,105 @@
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
-import 'package:spotube/components/root/sidebar.dart';
+
 import 'package:spotube/provider/user_preferences_provider.dart';
+import 'package:system_theme/system_theme.dart';
 
-final colorsMap = {
-  "Red": Colors.red,
-  "Pink": Colors.pink,
-  "Purple": Colors.purple,
-  "DeepPurple": Colors.deepPurple,
-  "Indigo": Colors.indigo,
-  "Blue": Colors.blue,
-  "LightBlue": Colors.lightBlue,
-  "Cyan": Colors.cyan,
-  "Teal": Colors.teal,
-  "Green": Colors.green,
-  "LightGreen": Colors.lightGreen,
-  "Lime": Colors.lime,
-  "Yellow": Colors.yellow,
-  "Amber": Colors.amber,
-  "Orange": Colors.orange,
-  "DeepOrange": Colors.deepOrange,
-  "Brown": Colors.brown,
-};
+class SpotubeColor extends Color {
+  final String name;
 
-enum ColorSchemeType {
-  accent,
-  background,
+  const SpotubeColor(int color, {required this.name}) : super(color);
+
+  const SpotubeColor.from(int value, {required this.name}) : super(value);
+
+  factory SpotubeColor.fromString(String string) {
+    final slices = string.split(":");
+    return SpotubeColor(int.parse(slices.last), name: slices.first);
+  }
+
+  @override
+  String toString() {
+    return "$name:$value";
+  }
 }
 
+final Set<SpotubeColor> colorsMap = {
+  SpotubeColor(SystemTheme.accentColor.accent.value, name: "System"),
+  SpotubeColor(Colors.red.value, name: "Red"),
+  SpotubeColor(Colors.pink.value, name: "Pink"),
+  SpotubeColor(Colors.purple.value, name: "Purple"),
+  SpotubeColor(Colors.deepPurple.value, name: "DeepPurple"),
+  SpotubeColor(Colors.indigo.value, name: "Indigo"),
+  SpotubeColor(Colors.blue.value, name: "Blue"),
+  SpotubeColor(Colors.lightBlue.value, name: "LightBlue"),
+  SpotubeColor(Colors.cyan.value, name: "Cyan"),
+  SpotubeColor(Colors.teal.value, name: "Teal"),
+  SpotubeColor(Colors.green.value, name: "Green"),
+  SpotubeColor(Colors.lightGreen.value, name: "LightGreen"),
+  SpotubeColor(Colors.yellow.value, name: "Yellow"),
+  SpotubeColor(Colors.amber.value, name: "Amber"),
+  SpotubeColor(Colors.orange.value, name: "Orange"),
+  SpotubeColor(Colors.deepOrange.value, name: "DeepOrange"),
+  SpotubeColor(Colors.brown.value, name: "Brown"),
+};
+
 class ColorSchemePickerDialog extends HookConsumerWidget {
-  final ColorSchemeType schemeType;
-  const ColorSchemePickerDialog({required this.schemeType, Key? key})
-      : super(key: key);
+  const ColorSchemePickerDialog({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context, ref) {
     final preferences = ref.watch(userPreferencesProvider);
     final scheme = preferences.accentColorScheme;
-    final active = useState<String>(colorsMap.entries.firstWhere(
+    final active = useState<String>(colorsMap.firstWhere(
       (element) {
-        return scheme.value == element.value.value;
+        return scheme.name == element.name;
       },
-    ).key);
+    ).name);
 
     onOk() {
-      switch (schemeType) {
-        case ColorSchemeType.accent:
-          preferences.setAccentColorScheme(colorsMap[active.value]!);
-          break;
-        default:
-          preferences.setBackgroundColorScheme(
-            colorsMap[active.value]!,
-          );
-      }
+      preferences.setAccentColorScheme(
+        colorsMap.firstWhere(
+          (element) {
+            return element.name == active.value;
+          },
+        ),
+      );
       Navigator.pop(context);
     }
 
-    return PlatformAlertDialog(
-      macosAppIcon: Sidebar.brandLogo(),
-      title: Text("Pick ${schemeType.name} color scheme"),
-      primaryActions: [
-        PlatformBuilder(
-          android: (context, data) {
-            return PlatformFilledButton(
-              onPressed: onOk,
-              child: const Text("Save"),
-            );
+    return AlertDialog(
+      title: const Text("Pick color scheme"),
+      actions: [
+        OutlinedButton(
+          child: const Text("Cancel"),
+          onPressed: () {
+            Navigator.pop(context);
           },
-          ios: (context, data) {
-            return CupertinoDialogAction(
-              onPressed: onOk,
-              isDefaultAction: true,
-              child: const Text("Save"),
-            );
-          },
-          fallback: PlatformBuilderFallback.android,
         ),
-      ],
-      secondaryActions: [
-        PlatformBuilder(
-          fallback: PlatformBuilderFallback.android,
-          android: (context, _) {
-            return PlatformFilledButton(
-              isSecondary: true,
-              child: const Text("Cancel"),
-              onPressed: () {
-                Navigator.pop(context);
-              },
-            );
-          },
-          ios: (context, data) {
-            return CupertinoDialogAction(
-              onPressed: () {
-                Navigator.pop(context);
-              },
-              isDestructiveAction: true,
-              child: const Text("Cancel"),
-            );
-          },
+        FilledButton(
+          onPressed: onOk,
+          child: const Text("Save"),
         ),
       ],
       content: SizedBox(
         height: 200,
         width: 400,
-        child: SingleChildScrollView(
-          child: Center(
-            child: Wrap(
-              spacing: 10,
-              runSpacing: 10,
-              children: colorsMap.entries
-                  .map(
-                    (e) => ColorTile(
-                      color: e.value,
-                      isActive: active.value == e.key,
-                      tooltip: e.key,
-                      onPressed: () {
-                        active.value = e.key;
-                      },
-                    ),
-                  )
-                  .toList(),
-            ),
-          ),
+        child: ListView.separated(
+          separatorBuilder: (context, index) {
+            return const SizedBox(height: 10);
+          },
+          itemCount: colorsMap.length,
+          itemBuilder: (context, index) {
+            final color = colorsMap.elementAt(index);
+            return ColorTile(
+              color: color,
+              isActive: active.value == color.name,
+              onPressed: () {
+                active.value = color.name;
+              },
+              tooltip: color.name,
+            );
+          },
         ),
       ),
     );
@@ -132,37 +107,121 @@ class ColorSchemePickerDialog extends HookConsumerWidget {
 }
 
 class ColorTile extends StatelessWidget {
-  final MaterialColor color;
+  final Color color;
   final bool isActive;
   final void Function()? onPressed;
   final String? tooltip;
+  final bool isCompact;
   const ColorTile({
     required this.color,
     this.isActive = false,
     this.onPressed,
     this.tooltip = "",
+    this.isCompact = false,
     Key? key,
   }) : super(key: key);
 
+  factory ColorTile.compact({
+    required Color color,
+    bool isActive = false,
+    void Function()? onPressed,
+    String? tooltip = "",
+    Key? key,
+  }) {
+    return ColorTile(
+      color: color,
+      isActive: isActive,
+      onPressed: onPressed,
+      tooltip: tooltip,
+      isCompact: true,
+      key: key,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Tooltip(
-      message: tooltip,
-      child: GestureDetector(
+    final theme = Theme.of(context);
+
+    final lead = Container(
+      height: 40,
+      width: 40,
+      decoration: BoxDecoration(
+        border: isActive
+            ? Border.fromBorderSide(
+                BorderSide(
+                  color: Color.lerp(
+                    theme.colorScheme.primary,
+                    theme.colorScheme.onPrimary,
+                    0.5,
+                  )!,
+                  width: 4,
+                ),
+              )
+            : null,
+        borderRadius: BorderRadius.circular(15),
+        color: color,
+      ),
+    );
+
+    if (isCompact) {
+      return GestureDetector(
         onTap: onPressed,
-        child: Container(
-          height: 50,
-          width: 50,
-          decoration: BoxDecoration(
-            border: isActive
-                ? const Border.fromBorderSide(
-                    BorderSide(color: Colors.black, width: 5),
-                  )
-                : null,
-            shape: BoxShape.circle,
-            color: color,
+        child: lead,
+      );
+    }
+
+    final colorScheme = ColorScheme.fromSeed(seedColor: color);
+
+    final palette = [
+      colorScheme.primary,
+      colorScheme.inversePrimary,
+      colorScheme.primaryContainer,
+      colorScheme.secondary,
+      colorScheme.secondaryContainer,
+      colorScheme.background,
+      colorScheme.surface,
+      colorScheme.surfaceVariant,
+      colorScheme.onPrimary,
+      colorScheme.onSurface,
+    ];
+
+    return GestureDetector(
+      onTap: onPressed,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            children: [
+              lead,
+              const SizedBox(width: 10),
+              Text(
+                tooltip!,
+                style: theme.textTheme.bodyLarge?.copyWith(
+                  color: theme.colorScheme.primary,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+            ],
           ),
-        ),
+          const SizedBox(height: 10),
+          Wrap(
+            alignment: WrapAlignment.start,
+            spacing: 10,
+            runSpacing: 10,
+            children: [
+              ...palette.map(
+                (e) => Container(
+                  height: 20,
+                  width: 20,
+                  decoration: BoxDecoration(
+                    color: e,
+                    borderRadius: BorderRadius.circular(5),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ],
       ),
     );
   }
diff --git a/lib/components/settings/section_card_with_heading.dart b/lib/components/settings/section_card_with_heading.dart
new file mode 100644
index 00000000..87060579
--- /dev/null
+++ b/lib/components/settings/section_card_with_heading.dart
@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+
+class SectionCardWithHeading extends StatelessWidget {
+  final String heading;
+  final List<Widget> children;
+  const SectionCardWithHeading({
+    super.key,
+    required this.heading,
+    required this.children,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 8.0),
+          child: Text(
+            heading,
+            style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                  fontWeight: FontWeight.w600,
+                ),
+          ),
+        ),
+        Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Card(
+            clipBehavior: Clip.antiAliasWithSaveLayer,
+            child: Column(mainAxisSize: MainAxisSize.min, children: children),
+          ),
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/components/shared/adaptive/adaptive_list_tile.dart b/lib/components/shared/adaptive/adaptive_list_tile.dart
index 2f69ea9a..33df44c1 100644
--- a/lib/components/shared/adaptive/adaptive_list_tile.dart
+++ b/lib/components/shared/adaptive/adaptive_list_tile.dart
@@ -1,8 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:platform_ui/platform_ui.dart';
-import 'package:spotube/components/root/sidebar.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
+import 'package:spotube/extensions/constrains.dart';
 
 class AdaptiveListTile extends HookWidget {
   final Widget Function(BuildContext, StateSetter?)? trailing;
@@ -10,7 +8,7 @@ class AdaptiveListTile extends HookWidget {
   final Widget? subtitle;
   final Widget? leading;
   final void Function()? onTap;
-  final Breakpoints breakOn;
+  final bool? breakOn;
 
   const AdaptiveListTile({
     super.key,
@@ -19,29 +17,29 @@ class AdaptiveListTile extends HookWidget {
     this.title,
     this.subtitle,
     this.leading,
-    this.breakOn = Breakpoints.md,
+    this.breakOn,
   });
 
   @override
   Widget build(BuildContext context) {
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
 
-    return PlatformListTile(
+    return ListTile(
       title: title,
       subtitle: subtitle,
-      trailing:
-          breakpoint.isLessThan(breakOn) ? null : trailing?.call(context, null),
+      trailing: breakOn ?? mediaQuery.smAndDown
+          ? null
+          : trailing?.call(context, null),
       leading: leading,
-      onTap: breakpoint.isLessThan(breakOn)
+      onTap: breakOn ?? mediaQuery.smAndDown
           ? () {
               onTap?.call();
-              showPlatformAlertDialog(
-                context,
+              showDialog(
+                context: context,
                 barrierDismissible: true,
                 builder: (context) {
                   return StatefulBuilder(builder: (context, update) {
-                    return PlatformAlertDialog(
-                      macosAppIcon: Sidebar.brandLogo(),
+                    return AlertDialog(
                       title: title != null
                           ? Row(
                               crossAxisAlignment: CrossAxisAlignment.center,
diff --git a/lib/components/shared/adaptive/adaptive_pop_sheet_list.dart b/lib/components/shared/adaptive/adaptive_pop_sheet_list.dart
new file mode 100644
index 00000000..41534cb3
--- /dev/null
+++ b/lib/components/shared/adaptive/adaptive_pop_sheet_list.dart
@@ -0,0 +1,208 @@
+import 'package:flutter/material.dart';
+import 'package:spotube/collections/spotube_icons.dart';
+import 'package:spotube/extensions/constrains.dart';
+
+_emptyCB() {}
+
+class PopSheetEntry<T> extends ListTile {
+  final T? value;
+  const PopSheetEntry({
+    this.value,
+    super.key,
+    super.leading,
+    super.title,
+    super.subtitle,
+    super.trailing,
+    super.isThreeLine = false,
+    super.dense,
+    super.visualDensity,
+    super.shape,
+    super.style,
+    super.selectedColor,
+    super.iconColor,
+    super.textColor,
+    super.titleTextStyle,
+    super.subtitleTextStyle,
+    super.leadingAndTrailingTextStyle,
+    super.contentPadding,
+    super.enabled = true,
+    super.onTap = _emptyCB,
+    super.onLongPress,
+    super.onFocusChange,
+    super.mouseCursor,
+    super.selected = false,
+    super.focusColor,
+    super.hoverColor,
+    super.splashColor,
+    super.focusNode,
+    super.autofocus = false,
+    super.tileColor,
+    super.selectedTileColor,
+    super.enableFeedback,
+    super.horizontalTitleGap,
+    super.minVerticalPadding,
+    super.minLeadingWidth,
+    super.titleAlignment,
+  });
+}
+
+/// An adaptive widget that shows a [PopupMenuButton] when screen size is above
+/// or equal to 640px
+/// In smaller screen, a [IconButton] with a [showModalBottomSheet] is shown
+class AdaptivePopSheetList<T> extends StatelessWidget {
+  final List<PopSheetEntry<T>> children;
+  final Widget? icon;
+  final Widget? child;
+  final bool useRootNavigator;
+
+  final List<Widget>? headings;
+  final String? tooltip;
+  final ValueChanged<T>? onSelected;
+
+  final BorderRadius borderRadius;
+  final Offset offset;
+
+  const AdaptivePopSheetList({
+    super.key,
+    required this.children,
+    this.icon,
+    this.child,
+    this.useRootNavigator = true,
+    this.headings,
+    this.onSelected,
+    this.borderRadius = const BorderRadius.all(Radius.circular(999)),
+    this.tooltip,
+    this.offset = Offset.zero,
+  }) : assert(
+          !(icon != null && child != null),
+          'Either icon or child must be provided',
+        );
+
+  @override
+  Widget build(BuildContext context) {
+    final mediaQuery = MediaQuery.of(context);
+    final theme = Theme.of(context);
+
+    if (mediaQuery.mdAndUp) {
+      return PopupMenuButton(
+        icon: icon,
+        tooltip: tooltip,
+        offset: offset,
+        child: child == null ? null : IgnorePointer(child: child),
+        itemBuilder: (context) => children
+            .map(
+              (item) => PopupMenuItem(
+                padding: EdgeInsets.zero,
+                enabled: false,
+                child: _AdaptivePopSheetListItem(
+                  item: item,
+                  onSelected: onSelected,
+                ),
+              ),
+            )
+            .toList(),
+      );
+    }
+
+    void showSheet() {
+      showModalBottomSheet(
+        context: context,
+        useRootNavigator: useRootNavigator,
+        isScrollControlled: true,
+        showDragHandle: true,
+        constraints: BoxConstraints(
+          maxHeight: mediaQuery.size.height * 0.6,
+        ),
+        builder: (context) {
+          return Padding(
+            padding: const EdgeInsets.all(8.0).copyWith(top: 0),
+            child: DefaultTextStyle(
+              style: theme.textTheme.titleMedium!,
+              child: SingleChildScrollView(
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    if (headings != null) ...[
+                      ...headings!,
+                      const SizedBox(height: 8),
+                      Divider(
+                        color: theme.colorScheme.primary,
+                        thickness: 0.3,
+                        endIndent: 16,
+                        indent: 16,
+                      ),
+                    ],
+                    ...children.map(
+                      (item) => _AdaptivePopSheetListItem(
+                        item: item,
+                        onSelected: onSelected,
+                      ),
+                    )
+                  ],
+                ),
+              ),
+            ),
+          );
+        },
+      );
+    }
+
+    if (child != null) {
+      return Tooltip(
+        message: tooltip ?? '',
+        child: InkWell(
+          onTap: showSheet,
+          borderRadius: borderRadius,
+          child: IgnorePointer(child: child),
+        ),
+      );
+    }
+
+    return IconButton(
+      icon: icon ?? const Icon(SpotubeIcons.moreVertical),
+      tooltip: tooltip,
+      style: theme.iconButtonTheme.style?.copyWith(
+        shape: MaterialStatePropertyAll(
+          RoundedRectangleBorder(
+            borderRadius: borderRadius,
+          ),
+        ),
+      ),
+      onPressed: showSheet,
+    );
+  }
+}
+
+class _AdaptivePopSheetListItem<T> extends StatelessWidget {
+  final PopSheetEntry<T> item;
+  final ValueChanged<T>? onSelected;
+  const _AdaptivePopSheetListItem({
+    super.key,
+    required this.item,
+    this.onSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return InkWell(
+      borderRadius: (theme.listTileTheme.shape as RoundedRectangleBorder?)
+              ?.borderRadius as BorderRadius? ??
+          const BorderRadius.all(Radius.circular(10)),
+      onTap: !item.enabled
+          ? null
+          : () {
+              item.onTap?.call();
+              if (item.value != null) {
+                Navigator.pop(context);
+                onSelected?.call(item.value as T);
+              }
+            },
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 8),
+        child: IgnorePointer(child: item),
+      ),
+    );
+  }
+}
diff --git a/lib/components/shared/adaptive/adaptive_popup_menu_button.dart b/lib/components/shared/adaptive/adaptive_popup_menu_button.dart
index b6af5350..45f22825 100644
--- a/lib/components/shared/adaptive/adaptive_popup_menu_button.dart
+++ b/lib/components/shared/adaptive/adaptive_popup_menu_button.dart
@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:popover/popover.dart';
 import 'package:spotube/collections/spotube_icons.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
+import 'package:spotube/extensions/constrains.dart';
 
 class Action extends StatelessWidget {
   final Widget text;
@@ -23,12 +23,14 @@ class Action extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     if (isExpanded != true) {
-      return PlatformIconButton(
+      return IconButton(
         icon: icon,
         onPressed: onPressed,
-        backgroundColor: backgroundColor,
-        tooltip: text is PlatformText
-            ? (text as PlatformText).data
+        style: IconButton.styleFrom(
+          backgroundColor: backgroundColor,
+        ),
+        tooltip: text is Text
+            ? (text as Text).data
             : text.toStringShallow().split(",").last.replaceAll(
                   "\"",
                   "",
@@ -36,7 +38,7 @@ class Action extends StatelessWidget {
       );
     }
 
-    return PlatformListTile(
+    return ListTile(
       tileColor: backgroundColor,
       onTap: onPressed,
       leading: icon,
@@ -47,19 +49,19 @@ class Action extends StatelessWidget {
 
 class AdaptiveActions extends HookWidget {
   final List<Action> actions;
-  final Breakpoints breakOn;
+  final bool? breakOn;
   const AdaptiveActions({
     required this.actions,
-    this.breakOn = Breakpoints.lg,
+    this.breakOn,
     super.key,
   });
 
   @override
   Widget build(BuildContext context) {
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
 
-    if (breakpoint.isLessThan(breakOn)) {
-      return PlatformIconButton(
+    if (breakOn ?? mediaQuery.lgAndUp) {
+      return IconButton(
         icon: const Icon(SpotubeIcons.moreHorizontal),
         onPressed: () {
           showPopover(
@@ -83,8 +85,7 @@ class AdaptiveActions extends HookWidget {
                     .toList(),
               );
             },
-            backgroundColor:
-                PlatformTheme.of(context).secondaryBackgroundColor!,
+            backgroundColor: Theme.of(context).cardColor,
           );
         },
       );
diff --git a/lib/components/shared/adaptive/adaptive_select_tile.dart b/lib/components/shared/adaptive/adaptive_select_tile.dart
new file mode 100644
index 00000000..17e652b7
--- /dev/null
+++ b/lib/components/shared/adaptive/adaptive_select_tile.dart
@@ -0,0 +1,114 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:spotube/extensions/constrains.dart';
+
+class AdaptiveSelectTile<T> extends HookWidget {
+  final Widget title;
+  final Widget? subtitle;
+  final Widget? secondary;
+  final ListTileControlAffinity? controlAffinity;
+  final T value;
+  final ValueChanged<T?>? onChanged;
+
+  final List<DropdownMenuItem<T>> options;
+
+  /// Show the smaller value when the breakpoint is reached
+  ///
+  /// If false, the control will be hidden when the breakpoint is reached
+  ///
+  /// Defaults to `true`
+  final bool showValueWhenUnfolded;
+
+  final bool? breakLayout;
+
+  const AdaptiveSelectTile({
+    required this.title,
+    required this.value,
+    required this.onChanged,
+    required this.options,
+    this.controlAffinity = ListTileControlAffinity.trailing,
+    this.subtitle,
+    this.secondary,
+    this.breakLayout,
+    this.showValueWhenUnfolded = true,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final mediaQuery = MediaQuery.of(context);
+    final rawControl = DropdownButton<T>(
+      items: options,
+      value: value,
+      onChanged: onChanged,
+    );
+    final controlPlaceholder = useMemoized(
+        () => options
+            .firstWhere(
+              (element) => element.value == value,
+              orElse: () => DropdownMenuItem<T>(
+                value: null,
+                child: Container(),
+              ),
+            )
+            .child,
+        [value, options]);
+
+    final control = breakLayout ?? mediaQuery.mdAndUp
+        ? rawControl
+        : showValueWhenUnfolded
+            ? Container(
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                decoration: BoxDecoration(
+                  border: Border.all(
+                    color: theme.colorScheme.primary,
+                    width: 2,
+                  ),
+                  borderRadius: BorderRadius.circular(10),
+                ),
+                child: DefaultTextStyle(
+                  style: TextStyle(
+                    color: theme.colorScheme.primary,
+                  ),
+                  child: controlPlaceholder,
+                ),
+              )
+            : const SizedBox.shrink();
+
+    return ListTile(
+      title: title,
+      subtitle: subtitle,
+      leading: controlAffinity != ListTileControlAffinity.leading
+          ? secondary
+          : control,
+      trailing: controlAffinity == ListTileControlAffinity.leading
+          ? secondary
+          : control,
+      onTap: breakLayout ?? mediaQuery.mdAndUp
+          ? null
+          : () {
+              showDialog(
+                context: context,
+                builder: (context) {
+                  return SimpleDialog(
+                    title: title,
+                    children: [
+                      for (final option in options)
+                        RadioListTile<T>(
+                          title: option.child,
+                          value: option.value as T,
+                          groupValue: value,
+                          onChanged: (v) {
+                            Navigator.pop(context);
+                            onChanged?.call(v);
+                          },
+                        ),
+                    ],
+                  );
+                },
+              );
+            },
+    );
+  }
+}
diff --git a/lib/components/shared/animated_gradient.dart b/lib/components/shared/animated_gradient.dart
new file mode 100644
index 00000000..b6485f6b
--- /dev/null
+++ b/lib/components/shared/animated_gradient.dart
@@ -0,0 +1,127 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+class AnimateGradient extends HookWidget {
+  const AnimateGradient({
+    Key? key,
+    required this.primaryColors,
+    required this.secondaryColors,
+    this.child,
+    this.primaryBegin,
+    this.primaryEnd,
+    this.secondaryBegin,
+    this.secondaryEnd,
+    AnimationController? controller,
+    this.duration = const Duration(seconds: 4),
+    this.animateAlignments = true,
+    this.reverse = true,
+  })  : assert(primaryColors.length >= 2),
+        assert(primaryColors.length == secondaryColors.length),
+        _controller = controller,
+        super(key: key);
+
+  /// [controller]: pass this to have a fine control over the [Animation]
+  final AnimationController? _controller;
+
+  /// [duration]: Time to switch between [Gradient].
+  /// By default its value is [Duration(seconds:4)]
+  final Duration duration;
+
+  /// [primaryColors]: These will be the starting colors of the [Animation].
+  final List<Color> primaryColors;
+
+  /// [secondaryColors]: These Colors are those in which the [primaryColors] will transition into.
+  final List<Color> secondaryColors;
+
+  /// [primaryBegin]: This is begin [Alignment] for [primaryColors].
+  /// By default its value is [Alignment.topLeft]
+  final Alignment? primaryBegin;
+
+  /// [primaryBegin]: This is end [Alignment] for [primaryColors].
+  /// By default its value is [Alignment.topRight]
+  final Alignment? primaryEnd;
+
+  /// [secondaryBegin]: This is begin [Alignment] for [secondaryColors].
+  /// By default its value is [Alignment.bottomLeft]
+  final Alignment? secondaryBegin;
+
+  /// [secondaryEnd]: This is end [Alignment] for [secondaryColors].
+  /// By default its value is [Alignment.bottomRight]
+  final Alignment? secondaryEnd;
+
+  /// [animateAlignments]: set to false if you don't want to animate the alignments.
+  /// This can provide you way cooler animations
+  final bool animateAlignments;
+
+  /// [reverse]: set it to false if you don't want to reverse the animation.
+  /// using that it will go into one direction only
+  final bool reverse;
+
+  final Widget? child;
+
+  @override
+  Widget build(BuildContext context) {
+    // ignore: no_leading_underscores_for_local_identifiers
+    final __controller = useAnimationController(
+      duration: duration,
+    )..repeat(reverse: reverse);
+
+    final controller = _controller ?? __controller;
+
+    final animation = useMemoized(
+        () => CurvedAnimation(
+              parent: controller,
+              curve: Curves.easeInOut,
+            ),
+        [controller]);
+
+    final colorTween = useMemoized(
+        () => primaryColors.map((color) {
+              return ColorTween(
+                begin: color,
+                end: color,
+              );
+            }).toList(),
+        [primaryColors]);
+    final colors = useMemoized(
+        () => colorTween.map((color) {
+              return color.evaluate(animation)!;
+            }).toList(),
+        [colorTween, animation]);
+
+    final begin = useMemoized(
+        () => AlignmentTween(
+              begin: primaryBegin ?? Alignment.topLeft,
+              end: primaryEnd ?? Alignment.topRight,
+            ),
+        [primaryBegin, primaryEnd]);
+
+    final end = useMemoized(
+        () => AlignmentTween(
+              begin: secondaryBegin ?? Alignment.bottomLeft,
+              end: secondaryEnd ?? Alignment.bottomRight,
+            ),
+        [secondaryBegin, secondaryEnd]);
+
+    return AnimatedBuilder(
+      animation: animation,
+      child: useMemoized(() => child, [child]),
+      builder: (BuildContext context, Widget? child) {
+        return Container(
+          decoration: BoxDecoration(
+            gradient: LinearGradient(
+              begin: animateAlignments
+                  ? begin.evaluate(animation)
+                  : (primaryBegin as Alignment),
+              end: animateAlignments
+                  ? end.evaluate(animation)
+                  : primaryEnd as Alignment,
+              colors: colors,
+            ),
+          ),
+          child: child,
+        );
+      },
+    );
+  }
+}
diff --git a/lib/components/shared/bordered_text.dart b/lib/components/shared/bordered_text.dart
new file mode 100644
index 00000000..627b2a3c
--- /dev/null
+++ b/lib/components/shared/bordered_text.dart
@@ -0,0 +1,88 @@
+library bordered_text;
+
+import 'package:flutter/widgets.dart';
+
+/// Adds stroke to text widget
+/// We can apply a very thin and subtle stroke to a [Text]
+/// ```dart
+/// BorderedText(
+///   strokeWidth: 1.0,
+///   text: Text(
+///     'Bordered Text',
+///     style: TextStyle(
+///       decoration: TextDecoration.none,
+///       decorationStyle: TextDecorationStyle.wavy,
+///       decorationColor: Colors.red,
+///     ),
+///   ),
+/// )
+/// ```
+class BorderedText extends StatelessWidget {
+  const BorderedText({
+    super.key,
+    required this.child,
+    this.strokeCap = StrokeCap.round,
+    this.strokeJoin = StrokeJoin.round,
+    this.strokeWidth = 6.0,
+    this.strokeColor = const Color.fromRGBO(53, 0, 71, 1),
+  });
+
+  /// the stroke cap style
+  final StrokeCap strokeCap;
+
+  /// the stroke joint style
+  final StrokeJoin strokeJoin;
+
+  /// the stroke width
+  final double strokeWidth;
+
+  /// the stroke color
+  final Color strokeColor;
+
+  /// the [Text] widget to apply stroke on
+  final Text child;
+
+  @override
+  Widget build(BuildContext context) {
+    TextStyle style;
+    if (child.style != null) {
+      style = child.style!.copyWith(
+        foreground: Paint()
+          ..style = PaintingStyle.stroke
+          ..strokeCap = strokeCap
+          ..strokeJoin = strokeJoin
+          ..strokeWidth = strokeWidth
+          ..color = strokeColor,
+        color: null,
+      );
+    } else {
+      style = TextStyle(
+        foreground: Paint()
+          ..style = PaintingStyle.stroke
+          ..strokeCap = strokeCap
+          ..strokeJoin = strokeJoin
+          ..strokeWidth = strokeWidth
+          ..color = strokeColor,
+      );
+    }
+    return Stack(
+      alignment: Alignment.center,
+      textDirection: child.textDirection,
+      children: <Widget>[
+        Text(
+          child.data!,
+          style: style,
+          maxLines: child.maxLines,
+          overflow: child.overflow,
+          semanticsLabel: child.semanticsLabel,
+          softWrap: child.softWrap,
+          strutStyle: child.strutStyle,
+          textAlign: child.textAlign,
+          textDirection: child.textDirection,
+          textScaleFactor: child.textScaleFactor,
+        ),
+        child,
+      ],
+    );
+  }
+}
diff --git a/lib/components/shared/colored_tab_bar.dart b/lib/components/shared/colored_tab_bar.dart
deleted file mode 100644
index a2a8b597..00000000
--- a/lib/components/shared/colored_tab_bar.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-import 'package:flutter/material.dart';
-
-class ColoredTabBar extends ColoredBox implements PreferredSizeWidget {
-  @override
-  // ignore: overridden_fields
-  final TabBar child;
-
-  const ColoredTabBar({
-    required super.color,
-    required this.child,
-    super.key,
-  }) : super(child: child);
-
-  @override
-  Size get preferredSize => child.preferredSize;
-}
diff --git a/lib/components/shared/compact_search.dart b/lib/components/shared/compact_search.dart
index ec2e9686..70815291 100644
--- a/lib/components/shared/compact_search.dart
+++ b/lib/components/shared/compact_search.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:popover/popover.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 
@@ -20,11 +20,11 @@ class CompactSearch extends HookWidget {
 
   @override
   Widget build(BuildContext context) {
-    return PlatformIconButton(
+    return IconButton(
       onPressed: () {
         showPopover(
           context: context,
-          backgroundColor: PlatformTheme.of(context).secondaryBackgroundColor!,
+          backgroundColor: Theme.of(context).cardColor,
           transitionDuration: const Duration(milliseconds: 100),
           barrierColor: Colors.transparent,
           arrowDxOffset: -6,
@@ -32,14 +32,13 @@ class CompactSearch extends HookWidget {
             return Container(
               padding: const EdgeInsets.all(8.0),
               width: 300,
-              child: PlatformTextField(
+              child: TextField(
                 autofocus: true,
                 onChanged: onChanged,
-                placeholder: placeholder,
-                prefixIcon: icon,
-                padding: platform == TargetPlatform.android
-                    ? const EdgeInsets.all(0)
-                    : null,
+                decoration: InputDecoration(
+                  hintText: placeholder,
+                  prefixIcon: Icon(icon),
+                ),
               ),
             );
           },
diff --git a/lib/components/shared/dialogs/confirm_download_dialog.dart b/lib/components/shared/dialogs/confirm_download_dialog.dart
index 9b916965..0413260c 100644
--- a/lib/components/shared/dialogs/confirm_download_dialog.dart
+++ b/lib/components/shared/dialogs/confirm_download_dialog.dart
@@ -1,23 +1,21 @@
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotube/components/shared/image/universal_image.dart';
-import 'package:spotube/components/root/sidebar.dart';
+import 'package:spotube/extensions/context.dart';
 
 class ConfirmDownloadDialog extends StatelessWidget {
   const ConfirmDownloadDialog({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return PlatformAlertDialog(
-      macosAppIcon: Sidebar.brandLogo(),
+    return AlertDialog(
       title: Padding(
         padding: const EdgeInsets.all(15),
         child: Row(
-          children: const [
-            Text("Are you sure?"),
-            SizedBox(width: 10),
-            UniversalImage(
+          children: [
+            Text(context.l10n.are_you_sure),
+            const SizedBox(width: 10),
+            const UniversalImage(
               path:
                   "https://c.tenor.com/kHcmsxlKHEAAAAAM/rock-one-eyebrow-raised-rock-staring.gif",
               height: 40,
@@ -32,78 +30,49 @@ class ConfirmDownloadDialog extends StatelessWidget {
           child: Column(
             mainAxisSize: MainAxisSize.min,
             crossAxisAlignment: CrossAxisAlignment.start,
-            children: const [
+            children: [
               Text(
-                "If you download all Tracks at bulk you're clearly pirating Music & causing damage to the creative society of Music. I hope you are aware of this. Always, try respecting & supporting Artist's hard work",
+                context.l10n.download_warning,
                 textAlign: TextAlign.justify,
               ),
-              SizedBox(height: 10),
+              const SizedBox(height: 10),
               Text(
-                "BTW, your IP can get blocked on YouTube due excessive download requests than usual. IP block means you can't use YouTube (even if you're logged in) for at least 2-3 months from that IP device. And Spotube doesn't hold any responsibility if this ever happens",
-                style: TextStyle(
+                context.l10n.download_ip_ban_warning,
+                style: const TextStyle(
                   color: Colors.red,
                   fontWeight: FontWeight.bold,
                 ),
                 textAlign: TextAlign.justify,
               ),
-              SizedBox(height: 10),
+              const SizedBox(height: 10),
               Text(
-                "By clicking 'accept' you agree to following terms:",
+                context.l10n.by_clicking_accept_terms,
               ),
-              SizedBox(height: 10),
-              BulletPoint("I know I'm pirating Music. I'm bad"),
-              SizedBox(height: 10),
-              BulletPoint(
-                  "I'll support the Artist wherever I can and I'm only doing this because I don't have money to buy their art"),
-              SizedBox(height: 10),
-              BulletPoint(
-                  "I'm completely aware that my IP can get blocked on YouTube & I don't hold Spotube or his owners/contributors responsible for any accidents caused by my current action"),
+              const SizedBox(height: 10),
+              BulletPoint(context.l10n.download_agreement_1),
+              const SizedBox(height: 10),
+              BulletPoint(context.l10n.download_agreement_2),
+              const SizedBox(height: 10),
+              BulletPoint(context.l10n.download_agreement_3),
             ],
           ),
         ),
       ),
-      primaryActions: [
-        PlatformBuilder(
-          android: (context, _) {
-            return PlatformFilledButton(
-              style: const ButtonStyle(
-                foregroundColor: MaterialStatePropertyAll(Colors.white),
-                backgroundColor: MaterialStatePropertyAll(Colors.red),
-              ),
-              onPressed: () => Navigator.of(context).pop(true),
-              child: const Text("Accept"),
-            );
-          },
-          ios: (context, data) {
-            return CupertinoDialogAction(
-              onPressed: () => Navigator.of(context).pop(true),
-              isDestructiveAction: true,
-              child: const Text("Accept"),
-            );
-          },
-        )
-      ],
-      secondaryActions: [
-        PlatformBuilder(
-          fallback: PlatformBuilderFallback.android,
-          android: (context, _) {
-            return PlatformFilledButton(
-              child: const Text("Decline"),
-              onPressed: () {
-                Navigator.pop(context, false);
-              },
-            );
-          },
-          ios: (context, data) {
-            return CupertinoDialogAction(
-              onPressed: () {
-                Navigator.pop(context, false);
-              },
-              isDefaultAction: true,
-              child: const Text("Decline"),
-            );
+      actions: [
+        OutlinedButton(
+          child: Text(context.l10n.decline),
+          onPressed: () {
+            Navigator.pop(context, false);
           },
         ),
+        FilledButton(
+          style: FilledButton.styleFrom(
+            foregroundColor: Colors.white,
+            backgroundColor: Colors.red,
+          ),
+          onPressed: () => Navigator.of(context).pop(true),
+          child: Text(context.l10n.accept),
+        ),
       ],
     );
   }
diff --git a/lib/components/shared/dialogs/playlist_add_track_dialog.dart b/lib/components/shared/dialogs/playlist_add_track_dialog.dart
index 9a8d2003..76dcd082 100644
--- a/lib/components/shared/dialogs/playlist_add_track_dialog.dart
+++ b/lib/components/shared/dialogs/playlist_add_track_dialog.dart
@@ -1,10 +1,14 @@
-import 'package:flutter/cupertino.dart';
+import 'package:fl_query_hooks/fl_query_hooks.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotify/spotify.dart';
+import 'package:spotube/components/shared/image/universal_image.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/spotify_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
+import 'package:spotube/utils/type_conversion_utils.dart';
 
 class PlaylistAddTrackDialog extends HookConsumerWidget {
   final List<Track> tracks;
@@ -23,6 +27,7 @@ class PlaylistAddTrackDialog extends HookConsumerWidget {
           playlist.owner?.id != null && playlist.owner!.id == me.data?.id,
     );
     final playlistsCheck = useState(<String, bool>{});
+    final queryClient = useQueryClient();
 
     Future<void> onAdd() async {
       final selectedPlaylists = playlistsCheck.value.entries
@@ -39,64 +44,53 @@ class PlaylistAddTrackDialog extends HookConsumerWidget {
                   .toList(),
               playlistId),
         ),
-      ).then((_) => Navigator.pop(context));
+      ).then((_) => Navigator.pop(context, true));
+
+      await queryClient.refreshQueries(
+        selectedPlaylists
+            .map((playlistId) => "playlist-tracks/$playlistId")
+            .toList(),
+      );
     }
 
-    return PlatformAlertDialog(
-      title: const PlatformText("Add to Playlist"),
-      secondaryActions: [
-        PlatformBuilder(
-          fallback: PlatformBuilderFallback.android,
-          android: (context, _) {
-            return PlatformFilledButton(
-              isSecondary: true,
-              child: const Text("Cancel"),
-              onPressed: () {
-                Navigator.pop(context);
-              },
-            );
-          },
-          ios: (context, data) {
-            return CupertinoDialogAction(
-              onPressed: () {
-                Navigator.pop(context);
-              },
-              isDestructiveAction: true,
-              child: const Text("Cancel"),
-            );
+    return AlertDialog(
+      title: Text(context.l10n.add_to_playlist),
+      actions: [
+        OutlinedButton(
+          child: Text(context.l10n.cancel),
+          onPressed: () {
+            Navigator.pop(context, false);
           },
         ),
-      ],
-      primaryActions: [
-        PlatformBuilder(
-          fallback: PlatformBuilderFallback.android,
-          android: (context, _) {
-            return PlatformFilledButton(
-              onPressed: onAdd,
-              child: const Text("Add"),
-            );
-          },
-          ios: (context, data) {
-            return CupertinoDialogAction(
-              isDefaultAction: true,
-              onPressed: onAdd,
-              child: const Text("Add"),
-            );
-          },
+        FilledButton(
+          onPressed: onAdd,
+          child: Text(context.l10n.add),
         ),
       ],
       content: SizedBox(
         height: 300,
         width: 300,
         child: !userPlaylists.hasData
-            ? const Center(child: PlatformCircularProgressIndicator())
+            ? const Center(child: CircularProgressIndicator())
             : ListView.builder(
                 shrinkWrap: true,
                 itemCount: filteredPlaylists!.length,
                 itemBuilder: (context, index) {
                   final playlist = filteredPlaylists.elementAt(index);
-                  return PlatformCheckbox(
-                    label: PlatformText(playlist.name!),
+                  return CheckboxListTile(
+                    secondary: CircleAvatar(
+                      backgroundImage: UniversalImage.imageProvider(
+                        TypeConversionUtils.image_X_UrlString(
+                          playlist.images,
+                          placeholder: ImagePlaceholder.collection,
+                        ),
+                      ),
+                    ),
+                    contentPadding: EdgeInsets.zero,
+                    title: Padding(
+                      padding: const EdgeInsets.only(left: 8.0),
+                      child: Text(playlist.name!),
+                    ),
                     value: playlistsCheck.value[playlist.id] ?? false,
                     onChanged: (val) {
                       playlistsCheck.value = {
diff --git a/lib/components/shared/dialogs/prompt_dialog.dart b/lib/components/shared/dialogs/prompt_dialog.dart
index 0cc86e67..6fd54a98 100644
--- a/lib/components/shared/dialogs/prompt_dialog.dart
+++ b/lib/components/shared/dialogs/prompt_dialog.dart
@@ -1,6 +1,4 @@
-import 'package:flutter/cupertino.dart';
-import 'package:platform_ui/platform_ui.dart';
-import 'package:spotube/components/root/sidebar.dart';
+import 'package:flutter/material.dart';
 
 Future<bool> showPromptDialog({
   required BuildContext context,
@@ -9,40 +7,21 @@ Future<bool> showPromptDialog({
   String okText = "Ok",
   String cancelText = "Cancel",
 }) async {
-  return showPlatformAlertDialog<bool>(
-    context,
+  return showDialog<bool>(
+    context: context,
     builder: (context) {
-      return PlatformAlertDialog(
-        title: PlatformText(title),
-        content: PlatformText(message),
-        macosAppIcon: Sidebar.brandLogo(),
-        primaryActions: [
-          if (platform == TargetPlatform.iOS)
-            CupertinoDialogAction(
-              isDefaultAction: false,
-              isDestructiveAction: true,
-              child: PlatformText(okText),
-              onPressed: () => Navigator.of(context).pop(true),
-            )
-          else
-            PlatformFilledButton(
-              child: PlatformText(okText),
-              onPressed: () => Navigator.of(context).pop(true),
-            ),
-        ],
-        secondaryActions: [
-          if (platform == TargetPlatform.iOS)
-            CupertinoDialogAction(
-              isDefaultAction: true,
-              child: PlatformText(cancelText),
-              onPressed: () => Navigator.of(context).pop(false),
-            )
-          else
-            PlatformFilledButton(
-              isSecondary: true,
-              onPressed: () => Navigator.of(context).pop(false),
-              child: PlatformText(cancelText),
-            ),
+      return AlertDialog(
+        title: Text(title),
+        content: Text(message),
+        actions: [
+          OutlinedButton(
+            onPressed: () => Navigator.of(context).pop(false),
+            child: Text(cancelText),
+          ),
+          FilledButton(
+            child: Text(okText),
+            onPressed: () => Navigator.of(context).pop(true),
+          ),
         ],
       );
     },
diff --git a/lib/components/shared/dialogs/replace_downloaded_dialog.dart b/lib/components/shared/dialogs/replace_downloaded_dialog.dart
index f5228860..77721041 100644
--- a/lib/components/shared/dialogs/replace_downloaded_dialog.dart
+++ b/lib/components/shared/dialogs/replace_downloaded_dialog.dart
@@ -1,9 +1,8 @@
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotify/spotify.dart';
-import 'package:spotube/components/root/sidebar.dart';
+import 'package:spotube/extensions/context.dart';
 
 final replaceDownloadedFileState = StateProvider<bool?>((ref) => null);
 
@@ -15,85 +14,59 @@ class ReplaceDownloadedDialog extends ConsumerWidget {
   @override
   Widget build(BuildContext context, ref) {
     final groupValue = ref.watch(replaceDownloadedFileState);
+    final theme = Theme.of(context);
+    final replaceAll = ref.watch(replaceDownloadedFileState);
 
-    return PlatformAlertDialog(
-      macosAppIcon: Sidebar.brandLogo(),
-      title: Text("Track ${track.name} Already Exists"),
+    return AlertDialog(
+      title: Text(context.l10n.track_exists(track.name ?? "")),
       content: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
-          const Text("Do you want to replace the already downloaded track?"),
+          Text(context.l10n.do_you_want_to_replace),
           RadioListTile<bool>(
             dense: true,
             contentPadding: EdgeInsets.zero,
-            activeColor: PlatformTheme.of(context).primaryColor,
+            activeColor: theme.colorScheme.primary,
             value: true,
             groupValue: groupValue,
             onChanged: (value) {
               if (value != null) {
-                ref.read(replaceDownloadedFileState.notifier).state = value;
+                ref.read(replaceDownloadedFileState.notifier).state = true;
               }
             },
-            title: const Text("Replace all downloaded tracks"),
+            title: Text(context.l10n.replace_downloaded_tracks),
           ),
           RadioListTile<bool>(
             dense: true,
             contentPadding: EdgeInsets.zero,
-            activeColor: PlatformTheme.of(context).primaryColor,
+            activeColor: theme.colorScheme.primary,
             value: false,
             groupValue: groupValue,
             onChanged: (value) {
               if (value != null) {
-                ref.read(replaceDownloadedFileState.notifier).state = value;
+                ref.read(replaceDownloadedFileState.notifier).state = false;
               }
             },
-            title: const Text("Skip downloading all downloaded tracks"),
+            title: Text(context.l10n.skip_download_tracks),
           ),
         ],
       ),
-      primaryActions: [
-        PlatformBuilder(
-          fallback: PlatformBuilderFallback.android,
-          android: (context, _) {
-            return PlatformFilledButton(
-              child: const Text("Yes"),
-              onPressed: () {
-                Navigator.pop(context, true);
-              },
-            );
-          },
-          ios: (context, data) {
-            return CupertinoDialogAction(
-              onPressed: () {
-                Navigator.pop(context, true);
-              },
-              isDefaultAction: true,
-              child: const Text("Yes"),
-            );
-          },
+      actions: [
+        OutlinedButton(
+          onPressed: replaceAll == true
+              ? null
+              : () {
+                  Navigator.pop(context, false);
+                },
+          child: Text(context.l10n.skip),
         ),
-      ],
-      secondaryActions: [
-        PlatformBuilder(
-          fallback: PlatformBuilderFallback.android,
-          android: (context, _) {
-            return PlatformFilledButton(
-              isSecondary: true,
-              child: const Text("No"),
-              onPressed: () {
-                Navigator.pop(context, false);
-              },
-            );
-          },
-          ios: (context, data) {
-            return CupertinoDialogAction(
-              onPressed: () {
-                Navigator.pop(context, false);
-              },
-              isDestructiveAction: true,
-              child: const Text("No"),
-            );
-          },
+        FilledButton(
+          onPressed: replaceAll == false
+              ? null
+              : () {
+                  Navigator.pop(context, true);
+                },
+          child: Text(context.l10n.replace),
         ),
       ],
     );
diff --git a/lib/components/shared/dialogs/track_details_dialog.dart b/lib/components/shared/dialogs/track_details_dialog.dart
new file mode 100644
index 00000000..9e29c32d
--- /dev/null
+++ b/lib/components/shared/dialogs/track_details_dialog.dart
@@ -0,0 +1,166 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/collections/spotube_icons.dart';
+import 'package:spotube/components/shared/links/hyper_link.dart';
+import 'package:spotube/components/shared/links/link_text.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/models/spotube_track.dart';
+import 'package:spotube/utils/primitive_utils.dart';
+import 'package:spotube/utils/type_conversion_utils.dart';
+import 'package:spotube/extensions/duration.dart';
+
+class TrackDetailsDialog extends HookWidget {
+  final Track track;
+  const TrackDetailsDialog({
+    Key? key,
+    required this.track,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final mediaQuery = MediaQuery.of(context);
+
+    final detailsMap = {
+      context.l10n.title: track.name!,
+      context.l10n.artist: TypeConversionUtils.artists_X_ClickableArtists(
+        track.artists ?? <Artist>[],
+        mainAxisAlignment: WrapAlignment.start,
+        textStyle: const TextStyle(color: Colors.blue),
+      ),
+      context.l10n.album: LinkText(
+        track.album!.name!,
+        "/album/${track.album?.id}",
+        extra: track.album,
+        overflow: TextOverflow.ellipsis,
+        style: const TextStyle(color: Colors.blue),
+      ),
+      context.l10n.duration: (track is SpotubeTrack
+              ? (track as SpotubeTrack).ytTrack.duration
+              : track.duration!)
+          .toHumanReadableString(),
+      if (track.album!.releaseDate != null)
+        context.l10n.released: track.album!.releaseDate,
+      context.l10n.popularity: track.popularity?.toString() ?? "0",
+    };
+
+    final ytTrack =
+        track is SpotubeTrack ? (track as SpotubeTrack).ytTrack : null;
+
+    final ytTracksDetailsMap = ytTrack == null
+        ? {}
+        : {
+            context.l10n.youtube: Hyperlink(
+              "https://piped.video/watch?v=${ytTrack.id}",
+              "https://piped.video/watch?v=${ytTrack.id}",
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+            ),
+            context.l10n.channel: Hyperlink(
+              ytTrack.channelName,
+              "https://youtube.com${ytTrack.channelName}",
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+            ),
+            context.l10n.likes:
+                PrimitiveUtils.toReadableNumber(ytTrack.likes.toDouble()),
+            context.l10n.dislikes:
+                PrimitiveUtils.toReadableNumber(ytTrack.dislikes.toDouble()),
+            context.l10n.views:
+                PrimitiveUtils.toReadableNumber(ytTrack.views.toDouble()),
+            context.l10n.streamUrl: Hyperlink(
+              (track as SpotubeTrack).ytUri,
+              (track as SpotubeTrack).ytUri,
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+            ),
+          };
+
+    return AlertDialog(
+      contentPadding: const EdgeInsets.all(16),
+      insetPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 100),
+      scrollable: true,
+      title: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          const Icon(SpotubeIcons.info),
+          const SizedBox(width: 8),
+          Text(
+            context.l10n.details,
+            style: theme.textTheme.titleMedium,
+          ),
+        ],
+      ),
+      content: SizedBox(
+        width: mediaQuery.mdAndUp ? double.infinity : 700,
+        child: Table(
+          columnWidths: const {
+            0: FixedColumnWidth(95),
+            1: FixedColumnWidth(10),
+            2: FlexColumnWidth(1),
+          },
+          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
+          children: [
+            for (final entry in detailsMap.entries)
+              TableRow(
+                children: [
+                  TableCell(
+                    verticalAlignment: TableCellVerticalAlignment.top,
+                    child: Text(
+                      entry.key,
+                      style: theme.textTheme.titleMedium,
+                    ),
+                  ),
+                  const TableCell(
+                    verticalAlignment: TableCellVerticalAlignment.top,
+                    child: Text(":"),
+                  ),
+                  if (entry.value is Widget)
+                    entry.value as Widget
+                  else if (entry.value is String)
+                    Text(
+                      entry.value as String,
+                      style: theme.textTheme.bodyMedium,
+                    ),
+                ],
+              ),
+            const TableRow(
+              children: [
+                SizedBox(height: 16),
+                SizedBox(height: 16),
+                SizedBox(height: 16),
+              ],
+            ),
+            for (final entry in ytTracksDetailsMap.entries)
+              TableRow(
+                children: [
+                  TableCell(
+                    verticalAlignment: TableCellVerticalAlignment.top,
+                    child: Text(
+                      entry.key,
+                      style: theme.textTheme.titleMedium,
+                    ),
+                  ),
+                  const TableCell(
+                    verticalAlignment: TableCellVerticalAlignment.top,
+                    child: Text(":"),
+                  ),
+                  if (entry.value is Widget)
+                    entry.value as Widget
+                  else
+                    Text(
+                      entry.value,
+                      maxLines: 2,
+                      overflow: TextOverflow.ellipsis,
+                      style: theme.textTheme.bodyMedium,
+                    ),
+                ],
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/components/shared/expandable_search/expandable_search.dart b/lib/components/shared/expandable_search/expandable_search.dart
new file mode 100644
index 00000000..684e373e
--- /dev/null
+++ b/lib/components/shared/expandable_search/expandable_search.dart
@@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:spotube/collections/spotube_icons.dart';
+import 'package:spotube/extensions/context.dart';
+
+class ExpandableSearchField extends StatelessWidget {
+  final ValueNotifier<bool> isFiltering;
+  final TextEditingController searchController;
+  final FocusNode searchFocus;
+
+  const ExpandableSearchField({
+    Key? key,
+    required this.isFiltering,
+    required this.searchController,
+    required this.searchFocus,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedOpacity(
+      duration: const Duration(milliseconds: 200),
+      opacity: isFiltering.value ? 1 : 0,
+      child: AnimatedSize(
+        duration: const Duration(milliseconds: 200),
+        child: SizedBox(
+          height: isFiltering.value ? 50 : 0,
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8),
+            child: CallbackShortcuts(
+              bindings: {
+                LogicalKeySet(LogicalKeyboardKey.escape): () {
+                  isFiltering.value = false;
+                  searchController.clear();
+                  searchFocus.unfocus();
+                }
+              },
+              child: TextField(
+                focusNode: searchFocus,
+                controller: searchController,
+                decoration: InputDecoration(
+                  hintText: context.l10n.search_tracks,
+                  isDense: true,
+                  prefixIcon: const Icon(SpotubeIcons.search),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class ExpandableSearchButton extends StatelessWidget {
+  final ValueNotifier<bool> isFiltering;
+  final FocusNode searchFocus;
+  final Widget icon;
+  final ValueChanged<bool>? onPressed;
+
+  const ExpandableSearchButton({
+    Key? key,
+    required this.isFiltering,
+    required this.searchFocus,
+    this.icon = const Icon(SpotubeIcons.filter),
+    this.onPressed,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return IconButton(
+      icon: icon,
+      style: IconButton.styleFrom(
+        backgroundColor:
+            isFiltering.value ? theme.colorScheme.secondaryContainer : null,
+        foregroundColor: isFiltering.value ? theme.colorScheme.secondary : null,
+        minimumSize: const Size(25, 25),
+      ),
+      onPressed: () {
+        isFiltering.value = !isFiltering.value;
+        if (isFiltering.value) {
+          searchFocus.requestFocus();
+        } else {
+          searchFocus.unfocus();
+        }
+        onPressed?.call(isFiltering.value);
+      },
+    );
+  }
+}
diff --git a/lib/components/shared/fallbacks/anonymous_fallback.dart b/lib/components/shared/fallbacks/anonymous_fallback.dart
index aa72d462..aea7bf38 100644
--- a/lib/components/shared/fallbacks/anonymous_fallback.dart
+++ b/lib/components/shared/fallbacks/anonymous_fallback.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+import 'package:spotube/extensions/context.dart';
+
 import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/utils/service_utils.dart';
 
@@ -20,11 +21,11 @@ class AnonymousFallback extends ConsumerWidget {
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          const PlatformText("You're not logged in"),
+          Text(context.l10n.not_logged_in),
           const SizedBox(height: 10),
-          PlatformFilledButton(
-            child: const PlatformText("Login with Spotify"),
-            onPressed: () => ServiceUtils.navigate(context, "/settings"),
+          FilledButton(
+            child: Text(context.l10n.login_with_spotify),
+            onPressed: () => ServiceUtils.push(context, "/settings"),
           )
         ],
       ),
diff --git a/lib/components/shared/fallbacks/not_found.dart b/lib/components/shared/fallbacks/not_found.dart
index cdd5b765..f45573ad 100644
--- a/lib/components/shared/fallbacks/not_found.dart
+++ b/lib/components/shared/fallbacks/not_found.dart
@@ -7,6 +7,7 @@ class NotFound extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
     final widgets = [
       SizedBox(
         height: 150,
@@ -17,10 +18,10 @@ class NotFound extends StatelessWidget {
         crossAxisAlignment: CrossAxisAlignment.start,
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          Text("Nothing found", style: Theme.of(context).textTheme.headline6),
+          Text("Nothing found", style: theme.textTheme.titleLarge),
           Text(
             "The box is empty",
-            style: Theme.of(context).textTheme.subtitle1,
+            style: theme.textTheme.titleMedium,
           ),
         ],
       ),
diff --git a/lib/components/shared/heart_button.dart b/lib/components/shared/heart_button.dart
index 5c7e6811..3d68e1fc 100644
--- a/lib/components/shared/heart_button.dart
+++ b/lib/components/shared/heart_button.dart
@@ -2,18 +2,14 @@ import 'package:fl_query/fl_query.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotify/spotify.dart';
-import 'package:spotube/collections/spotube_icons.dart';
-import 'package:spotube/hooks/use_palette_color.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/services/mutations/mutations.dart';
 import 'package:spotube/services/queries/queries.dart';
 
-import 'package:spotube/utils/type_conversion_utils.dart';
-import 'package:tuple/tuple.dart';
-
-class HeartButton extends ConsumerWidget {
+class HeartButton extends HookConsumerWidget {
   final bool isLiked;
   final void Function()? onPressed;
   final IconData? icon;
@@ -34,52 +30,77 @@ class HeartButton extends ConsumerWidget {
 
     if (auth == null) return Container();
 
-    return PlatformIconButton(
+    return IconButton(
       tooltip: tooltip,
-      icon: Icon(
-        icon ?? (!isLiked ? SpotubeIcons.heart : SpotubeIcons.heartFilled),
-        color: isLiked ? Colors.pink : color,
+      icon: AnimatedSwitcher(
+        switchInCurve: Curves.fastOutSlowIn,
+        switchOutCurve: Curves.fastOutSlowIn,
+        duration: const Duration(milliseconds: 300),
+        transitionBuilder: (child, animation) {
+          return ScaleTransition(
+            scale: animation,
+            child: child,
+          );
+        },
+        child: Icon(
+          icon ??
+              (isLiked
+                  ? Icons.favorite_rounded
+                  : Icons.favorite_outline_rounded),
+          key: ValueKey(isLiked),
+          color: color ?? (isLiked ? color ?? Colors.red : null),
+        ),
       ),
       onPressed: onPressed,
     );
   }
 }
 
-Tuple3<bool, Mutation<bool, dynamic, bool>, Query<User, dynamic>>
-    useTrackToggleLike(Track track, WidgetRef ref) {
+({
+  bool isLiked,
+  Mutation<bool, dynamic, bool> toggleTrackLike,
+  Query<User?, dynamic> me,
+}) useTrackToggleLike(Track track, WidgetRef ref) {
   final me = useQueries.user.me(ref);
 
   final savedTracks =
       useQueries.playlist.tracksOfQuery(ref, "user-liked-tracks");
 
   final isLiked =
-      savedTracks.data?.map((track) => track.id).contains(track.id) ?? false;
+      savedTracks.data?.any((element) => element.id == track.id) ?? false;
 
   final mounted = useIsMounted();
 
   final toggleTrackLike = useMutations.track.toggleFavorite(
     ref,
     track.id!,
-    onMutate: (variables) {
-      return variables;
+    onMutate: (isLiked) {
+      savedTracks.setData(
+        [
+          if (isLiked == true)
+            ...?savedTracks.data?.where((element) => element.id != track.id)
+          else
+            ...?savedTracks.data?..add(track)
+        ],
+      );
+      return isLiked;
+    },
+    onData: (data, recoveryData) async {
+      await savedTracks.refresh();
     },
     onError: (payload, isLiked) {
       if (!mounted()) return;
 
-      savedTracks.setData(
-        isLiked == true
-            ? [...(savedTracks.data ?? []), track]
-            : savedTracks.data
-                    ?.where(
-                      (element) => element.id != track.id,
-                    )
-                    .toList() ??
-                [],
-      );
+      savedTracks.setData([
+        if (isLiked != true)
+          ...?savedTracks.data?.where((element) => element.id != track.id)
+        else
+          ...?savedTracks.data?..add(track),
+      ]);
     },
   );
 
-  return Tuple3(isLiked, toggleTrackLike, me);
+  return (isLiked: isLiked, toggleTrackLike: toggleTrackLike, me: me);
 }
 
 class TrackHeartButton extends HookConsumerWidget {
@@ -94,16 +115,18 @@ class TrackHeartButton extends HookConsumerWidget {
     final savedTracks =
         useQueries.playlist.tracksOfQuery(ref, "user-liked-tracks");
     final toggler = useTrackToggleLike(track, ref);
-    if (toggler.item3.isLoading || !toggler.item3.hasData) {
-      return const PlatformCircularProgressIndicator();
+    if (toggler.me.isLoading || !toggler.me.hasData) {
+      return const CircularProgressIndicator();
     }
 
     return HeartButton(
-      tooltip: toggler.item1 ? "Remove from Favorite" : "Add to Favorite",
-      isLiked: toggler.item1,
+      tooltip: toggler.isLiked
+          ? context.l10n.remove_from_favorites
+          : context.l10n.save_as_favorite,
+      isLiked: toggler.isLiked,
       onPressed: savedTracks.hasData
           ? () {
-              toggler.item2.mutate(toggler.item1);
+              toggler.toggleTrackLike.mutate(toggler.isLiked);
             }
           : null,
     );
@@ -137,28 +160,16 @@ class PlaylistHeartButton extends HookConsumerWidget {
       ],
     );
 
-    final titleImage = useMemoized(
-        () => TypeConversionUtils.image_X_UrlString(
-              playlist.images,
-              placeholder: ImagePlaceholder.collection,
-            ),
-        [playlist.images]);
-
-    final color = usePaletteGenerator(
-      context,
-      titleImage,
-    ).dominantColor;
-
     if (me.isLoading || !me.hasData) {
-      return const PlatformCircularProgressIndicator();
+      return const CircularProgressIndicator();
     }
 
     return HeartButton(
       isLiked: isLikedQuery.data ?? false,
       tooltip: isLikedQuery.data ?? false
-          ? "Remove from Favorite"
-          : "Add to Favorite",
-      color: color?.titleTextColor,
+          ? context.l10n.remove_from_favorites
+          : context.l10n.save_as_favorite,
+      color: Colors.white,
       onPressed: isLikedQuery.hasData
           ? () {
               togglePlaylistLike.mutate(isLikedQuery.data!);
@@ -193,12 +204,15 @@ class AlbumHeartButton extends HookConsumerWidget {
     );
 
     if (me.isLoading || !me.hasData) {
-      return const PlatformCircularProgressIndicator();
+      return const CircularProgressIndicator();
     }
 
     return HeartButton(
       isLiked: isLiked,
-      tooltip: isLiked ? "Remove from Favorite" : "Add to Favorite",
+      tooltip: isLiked
+          ? context.l10n.remove_from_favorites
+          : context.l10n.save_as_favorite,
+      color: Colors.white,
       onPressed: albumIsSaved.hasData
           ? () {
               toggleAlbumLike.mutate(isLiked);
diff --git a/lib/components/shared/hover_builder.dart b/lib/components/shared/hover_builder.dart
index f336c012..ec60848e 100644
--- a/lib/components/shared/hover_builder.dart
+++ b/lib/components/shared/hover_builder.dart
@@ -2,9 +2,11 @@ import 'package:flutter/widgets.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 
 class HoverBuilder extends HookWidget {
+  final bool? permanentState;
   final Widget Function(BuildContext context, bool isHovering) builder;
   const HoverBuilder({
     required this.builder,
+    this.permanentState,
     Key? key,
   }) : super(key: key);
 
@@ -12,6 +14,10 @@ class HoverBuilder extends HookWidget {
   Widget build(BuildContext context) {
     final hovering = useState(false);
 
+    if (permanentState != null) {
+      return builder(context, permanentState!);
+    }
+
     return MouseRegion(
       onEnter: (_) {
         if (!hovering.value) hovering.value = true;
diff --git a/lib/components/shared/image/universal_image.dart b/lib/components/shared/image/universal_image.dart
index 74cc76be..04c62478 100644
--- a/lib/components/shared/image/universal_image.dart
+++ b/lib/components/shared/image/universal_image.dart
@@ -11,12 +11,14 @@ class UniversalImage extends HookWidget {
   final double? height;
   final double? width;
   final double scale;
-  final PlaceholderWidgetBuilder? placeholder;
+  final String? placeholder;
+  final BoxFit? fit;
   const UniversalImage({
     required this.path,
     this.height,
     this.width,
     this.placeholder,
+    this.fit,
     this.scale = 1,
     Key? key,
   }) : super(key: key);
@@ -46,16 +48,28 @@ class UniversalImage extends HookWidget {
   @override
   Widget build(BuildContext context) {
     if (path.startsWith("http")) {
-      return CachedNetworkImage(
-        imageUrl: path,
+      return FadeInImage(
+        image: CachedNetworkImageProvider(
+          path,
+          maxHeight: height?.toInt(),
+          maxWidth: width?.toInt(),
+          cacheKey: path,
+          scale: scale,
+        ),
         height: height,
         width: width,
-        maxWidthDiskCache: width?.toInt(),
-        maxHeightDiskCache: height?.toInt(),
-        memCacheHeight: height?.toInt(),
-        memCacheWidth: width?.toInt(),
-        placeholder: placeholder,
-        cacheKey: path,
+        placeholder: AssetImage(placeholder ?? Assets.placeholder.path),
+        imageErrorBuilder: (context, error, stackTrace) {
+          return Image.asset(
+            placeholder ?? Assets.placeholder.path,
+            width: width,
+            height: height,
+            cacheHeight: height?.toInt(),
+            cacheWidth: width?.toInt(),
+            scale: scale,
+          );
+        },
+        fit: fit,
       );
     } else if (Uri.tryParse(path) != null && !path.startsWith("assets")) {
       return Image.file(
@@ -65,15 +79,16 @@ class UniversalImage extends HookWidget {
         cacheHeight: height?.toInt(),
         cacheWidth: width?.toInt(),
         scale: scale,
+        fit: fit,
         errorBuilder: (context, error, stackTrace) {
-          return placeholder?.call(context, error.toString()) ??
-              Assets.placeholder.image(
-                width: width,
-                height: height,
-                cacheHeight: height?.toInt(),
-                cacheWidth: width?.toInt(),
-                scale: scale,
-              );
+          return Image.asset(
+            placeholder ?? Assets.placeholder.path,
+            width: width,
+            height: height,
+            cacheHeight: height?.toInt(),
+            cacheWidth: width?.toInt(),
+            scale: scale,
+          );
         },
       );
     } else if (path.startsWith("assets")) {
@@ -84,15 +99,16 @@ class UniversalImage extends HookWidget {
         cacheHeight: height?.toInt(),
         cacheWidth: width?.toInt(),
         scale: scale,
+        fit: fit,
         errorBuilder: (context, error, stackTrace) {
-          return placeholder?.call(context, error.toString()) ??
-              Assets.placeholder.image(
-                width: width,
-                height: height,
-                cacheHeight: height?.toInt(),
-                cacheWidth: width?.toInt(),
-                scale: scale,
-              );
+          return Image.asset(
+            placeholder ?? Assets.placeholder.path,
+            width: width,
+            height: height,
+            cacheHeight: height?.toInt(),
+            cacheWidth: width?.toInt(),
+            scale: scale,
+          );
         },
       );
     }
@@ -104,15 +120,16 @@ class UniversalImage extends HookWidget {
       cacheHeight: height?.toInt(),
       cacheWidth: width?.toInt(),
       scale: scale,
+      fit: fit,
       errorBuilder: (context, error, stackTrace) {
-        return placeholder?.call(context, error.toString()) ??
-            Assets.placeholder.image(
-              width: width,
-              height: height,
-              cacheHeight: height?.toInt(),
-              cacheWidth: width?.toInt(),
-              scale: scale,
-            );
+        return Image.asset(
+          placeholder ?? Assets.placeholder.path,
+          width: width,
+          height: height,
+          cacheHeight: height?.toInt(),
+          cacheWidth: width?.toInt(),
+          scale: scale,
+        );
       },
     );
   }
diff --git a/lib/components/shared/links/anchor_button.dart b/lib/components/shared/links/anchor_button.dart
index 9660cfc1..b1b1cfea 100644
--- a/lib/components/shared/links/anchor_button.dart
+++ b/lib/components/shared/links/anchor_button.dart
@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:platform_ui/platform_ui.dart';
 
 class AnchorButton<T> extends HookWidget {
   final String text;
@@ -8,6 +7,7 @@ class AnchorButton<T> extends HookWidget {
   final TextAlign? textAlign;
   final TextOverflow? overflow;
   final void Function()? onTap;
+  final int? maxLines;
 
   const AnchorButton(
     this.text, {
@@ -15,6 +15,7 @@ class AnchorButton<T> extends HookWidget {
     this.onTap,
     this.textAlign,
     this.overflow,
+    this.maxLines,
     this.style = const TextStyle(),
   }) : super(key: key);
 
@@ -29,12 +30,13 @@ class AnchorButton<T> extends HookWidget {
       onTap: onTap,
       child: MouseRegion(
         cursor: MaterialStateMouseCursor.clickable,
-        child: PlatformText(
+        child: Text(
           text,
           style: style.copyWith(
             decoration:
                 hover.value || tap.value ? TextDecoration.underline : null,
           ),
+          maxLines: maxLines,
           textAlign: textAlign,
           overflow: overflow,
         ),
diff --git a/lib/components/shared/links/hyper_link.dart b/lib/components/shared/links/hyper_link.dart
index 88d4b2b9..fd31298e 100644
--- a/lib/components/shared/links/hyper_link.dart
+++ b/lib/components/shared/links/hyper_link.dart
@@ -8,6 +8,8 @@ class Hyperlink extends StatelessWidget {
   final TextAlign? textAlign;
   final TextOverflow? overflow;
   final String url;
+  final int? maxLines;
+
   const Hyperlink(
     this.text,
     this.url, {
@@ -15,6 +17,7 @@ class Hyperlink extends StatelessWidget {
     this.textAlign,
     this.overflow,
     this.style = const TextStyle(),
+    this.maxLines,
   }) : super(key: key);
 
   @override
@@ -29,6 +32,7 @@ class Hyperlink extends StatelessWidget {
       },
       key: key,
       overflow: overflow,
+      maxLines: maxLines,
       style: style.copyWith(color: Colors.blue),
       textAlign: textAlign,
     );
diff --git a/lib/components/shared/links/link_text.dart b/lib/components/shared/links/link_text.dart
index 710cfa81..217b247d 100644
--- a/lib/components/shared/links/link_text.dart
+++ b/lib/components/shared/links/link_text.dart
@@ -9,6 +9,8 @@ class LinkText<T> extends StatelessWidget {
   final TextOverflow? overflow;
   final String route;
   final T? extra;
+
+  final bool push;
   const LinkText(
     this.text,
     this.route, {
@@ -17,6 +19,7 @@ class LinkText<T> extends StatelessWidget {
     this.extra,
     this.overflow,
     this.style = const TextStyle(),
+    this.push = false,
   }) : super(key: key);
 
   @override
@@ -24,7 +27,11 @@ class LinkText<T> extends StatelessWidget {
     return AnchorButton(
       text,
       onTap: () {
-        ServiceUtils.navigate(context, route, extra: extra);
+        if (push) {
+          ServiceUtils.push(context, route, extra: extra);
+        } else {
+          ServiceUtils.navigate(context, route, extra: extra);
+        }
       },
       key: key,
       overflow: overflow,
diff --git a/lib/components/shared/page_window_title_bar.dart b/lib/components/shared/page_window_title_bar.dart
index a0248ee1..b46795c1 100644
--- a/lib/components/shared/page_window_title_bar.dart
+++ b/lib/components/shared/page_window_title_bar.dart
@@ -1,10 +1,28 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:platform_ui/platform_ui.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotube/provider/user_preferences_provider.dart';
 import 'package:spotube/utils/platform.dart';
+import 'package:titlebar_buttons/titlebar_buttons.dart';
 import 'package:window_manager/window_manager.dart';
+import 'dart:math';
+import 'package:flutter/foundation.dart' show kIsWeb;
+import 'dart:io' show Platform;
+import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
+import 'package:local_notifier/local_notifier.dart';
 
-class PageWindowTitleBar extends StatefulHookWidget with PreferredSizeWidget {
+final closeNotification = DesktopTools.createNotification(
+  title: 'Spotube',
+  message: 'Running in background. Minimized to System Tray',
+  actions: [
+    LocalNotificationAction(text: 'Close The App'),
+  ],
+)?..onClickAction = (value) {
+    windowManager.close();
+  };
+
+class PageWindowTitleBar extends StatefulHookWidget
+    implements PreferredSizeWidget {
   final Widget? leading;
   final bool automaticallyImplyLeading;
   final List<Widget>? actions;
@@ -18,13 +36,12 @@ class PageWindowTitleBar extends StatefulHookWidget with PreferredSizeWidget {
   final TextStyle? toolbarTextStyle;
   final TextStyle? titleTextStyle;
   final double? titleWidth;
-  final Widget? center;
-  final bool hideWhenWindows;
+  final Widget? title;
 
-  PageWindowTitleBar({
+  const PageWindowTitleBar({
     Key? key,
     this.actions,
-    this.center,
+    this.title,
     this.toolbarOpacity = 1,
     this.backgroundColor,
     this.actionsIconTheme,
@@ -37,13 +54,10 @@ class PageWindowTitleBar extends StatefulHookWidget with PreferredSizeWidget {
     this.titleTextStyle,
     this.titleWidth,
     this.toolbarTextStyle,
-    this.hideWhenWindows = true,
   }) : super(key: key);
 
   @override
-  Size get preferredSize => Size.fromHeight(
-        platform == TargetPlatform.windows ? 33 : kToolbarHeight,
-      );
+  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
 
   @override
   State<PageWindowTitleBar> createState() => _PageWindowTitleBarState();
@@ -52,81 +66,536 @@ class PageWindowTitleBar extends StatefulHookWidget with PreferredSizeWidget {
 class _PageWindowTitleBarState extends State<PageWindowTitleBar> {
   @override
   Widget build(BuildContext context) {
-    final isMaximized = useState<bool?>(null);
-
-    useEffect(() {
-      if (platform == TargetPlatform.windows &&
-          widget.hideWhenWindows &&
-          Navigator.of(context).canPop()) {
-        final entry = OverlayEntry(
-          builder: (context) => const Positioned(
-            left: 5,
-            top: 5,
-            child: PlatformBackButton(),
-          ),
-        );
-
-        WidgetsBinding.instance.addPostFrameCallback((_) {
-          Overlay.of(context)?.insert(entry);
-        });
-
-        return () {
-          entry.remove();
-        };
-      }
-      return null;
-    }, [platform, widget.hideWhenWindows]);
-
-    if (platform == TargetPlatform.windows && widget.hideWhenWindows) {
-      return const SizedBox.shrink();
-    }
-
-    maximizeOrRestore() async {
-      if (await windowManager.isMaximized()) {
-        await windowManager.unmaximize();
-        isMaximized.value = false;
-      } else {
-        await windowManager.maximize();
-        isMaximized.value = true;
-      }
-    }
-
-    return PlatformAppBar(
-      actions: [
-        ...?widget.actions,
-        if (!kIsMacOS && !kIsMobile)
-          PlatformWindowButtons(
-            isMaximized: () async =>
-                isMaximized.value ?? await windowManager.isMaximized(),
-            onMaximize: maximizeOrRestore,
-            onRestore: maximizeOrRestore,
-            onMinimize: () {
-              windowManager.minimize();
-            },
-            onClose: () {
-              windowManager.close();
-            },
-            showCloseButton: true,
-            showMaximizeButton: true,
-            showMinimizeButton: true,
-          ),
-      ],
-      onDrag: () {
-        if (kIsDesktop) windowManager.startDragging();
+    return GestureDetector(
+      onHorizontalDragStart: (details) {
+        if (kIsDesktop) {
+          windowManager.startDragging();
+        }
       },
-      title: widget.center,
-      toolbarOpacity: widget.toolbarOpacity,
-      backgroundColor: widget.backgroundColor,
-      actionsIconTheme: widget.actionsIconTheme,
-      automaticallyImplyLeading: widget.automaticallyImplyLeading,
-      centerTitle: widget.centerTitle,
-      foregroundColor: widget.foregroundColor,
-      leading: widget.leading,
-      leadingWidth: widget.leadingWidth,
-      titleSpacing: widget.titleSpacing,
-      titleTextStyle: widget.titleTextStyle,
-      titleWidth: widget.titleWidth,
-      toolbarTextStyle: widget.toolbarTextStyle,
+      onVerticalDragStart: (details) {
+        if (kIsDesktop) {
+          windowManager.startDragging();
+        }
+      },
+      child: AppBar(
+        leading: widget.leading,
+        automaticallyImplyLeading: widget.automaticallyImplyLeading,
+        actions: [
+          ...?widget.actions,
+          WindowTitleBarButtons(foregroundColor: widget.foregroundColor),
+        ],
+        backgroundColor: widget.backgroundColor,
+        foregroundColor: widget.foregroundColor,
+        actionsIconTheme: widget.actionsIconTheme,
+        centerTitle: widget.centerTitle,
+        titleSpacing: widget.titleSpacing,
+        toolbarOpacity: widget.toolbarOpacity,
+        leadingWidth: widget.leadingWidth,
+        toolbarTextStyle: widget.toolbarTextStyle,
+        titleTextStyle: widget.titleTextStyle,
+        title: widget.title,
+      ),
     );
   }
 }
+
+class WindowTitleBarButtons extends HookConsumerWidget {
+  final Color? foregroundColor;
+  const WindowTitleBarButtons({
+    Key? key,
+    this.foregroundColor,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final closeBehavior =
+        ref.watch(userPreferencesProvider.select((s) => s.closeBehavior));
+    final isMaximized = useState<bool?>(null);
+    const type = ThemeType.auto;
+
+    Future<void> onClose() async {
+      if (closeBehavior == CloseBehavior.close) {
+        await windowManager.close();
+      } else {
+        await windowManager.hide();
+        await closeNotification?.show();
+      }
+    }
+
+    useEffect(() {
+      if (kIsDesktop) {
+        windowManager.isMaximized().then((value) {
+          isMaximized.value = value;
+        });
+      }
+      return null;
+    }, []);
+
+    if (!kIsDesktop || kIsMacOS) {
+      return const SizedBox.shrink();
+    }
+
+    if (kIsWindows) {
+      final theme = Theme.of(context);
+      final colors = WindowButtonColors(
+        normal: Colors.transparent,
+        iconNormal: foregroundColor ?? theme.colorScheme.onBackground,
+        mouseOver: theme.colorScheme.onBackground.withOpacity(0.1),
+        mouseDown: theme.colorScheme.onBackground.withOpacity(0.2),
+        iconMouseOver: theme.colorScheme.onBackground,
+        iconMouseDown: theme.colorScheme.onBackground,
+      );
+
+      final closeColors = WindowButtonColors(
+        normal: Colors.transparent,
+        iconNormal: foregroundColor ?? theme.colorScheme.onBackground,
+        mouseOver: Colors.red,
+        mouseDown: Colors.red[800]!,
+        iconMouseOver: Colors.white,
+        iconMouseDown: Colors.black,
+      );
+
+      return Padding(
+        padding: const EdgeInsets.only(bottom: 25),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            MinimizeWindowButton(
+              onPressed: windowManager.minimize,
+              colors: colors,
+            ),
+            if (isMaximized.value != true)
+              MaximizeWindowButton(
+                colors: colors,
+                onPressed: () {
+                  windowManager.maximize();
+                  isMaximized.value = true;
+                },
+              )
+            else
+              RestoreWindowButton(
+                colors: colors,
+                onPressed: () {
+                  windowManager.unmaximize();
+                  isMaximized.value = false;
+                },
+              ),
+            CloseWindowButton(
+              colors: closeColors,
+              onPressed: onClose,
+            ),
+          ],
+        ),
+      );
+    }
+
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 20, left: 10),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          DecoratedMinimizeButton(
+            type: type,
+            onPressed: windowManager.minimize,
+          ),
+          DecoratedMaximizeButton(
+            type: type,
+            onPressed: () async {
+              if (await windowManager.isMaximized()) {
+                await windowManager.unmaximize();
+                isMaximized.value = false;
+              } else {
+                await windowManager.maximize();
+                isMaximized.value = true;
+              }
+            },
+          ),
+          DecoratedCloseButton(
+            type: type,
+            onPressed: onClose,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+typedef WindowButtonIconBuilder = Widget Function(
+    WindowButtonContext buttonContext);
+typedef WindowButtonBuilder = Widget Function(
+    WindowButtonContext buttonContext, Widget icon);
+
+class WindowButtonContext {
+  BuildContext context;
+  MouseState mouseState;
+  Color? backgroundColor;
+  Color iconColor;
+  WindowButtonContext(
+      {required this.context,
+      required this.mouseState,
+      this.backgroundColor,
+      required this.iconColor});
+}
+
+class WindowButtonColors {
+  late Color normal;
+  late Color mouseOver;
+  late Color mouseDown;
+  late Color iconNormal;
+  late Color iconMouseOver;
+  late Color iconMouseDown;
+  WindowButtonColors(
+      {Color? normal,
+      Color? mouseOver,
+      Color? mouseDown,
+      Color? iconNormal,
+      Color? iconMouseOver,
+      Color? iconMouseDown}) {
+    this.normal = normal ?? _defaultButtonColors.normal;
+    this.mouseOver = mouseOver ?? _defaultButtonColors.mouseOver;
+    this.mouseDown = mouseDown ?? _defaultButtonColors.mouseDown;
+    this.iconNormal = iconNormal ?? _defaultButtonColors.iconNormal;
+    this.iconMouseOver = iconMouseOver ?? _defaultButtonColors.iconMouseOver;
+    this.iconMouseDown = iconMouseDown ?? _defaultButtonColors.iconMouseDown;
+  }
+}
+
+final _defaultButtonColors = WindowButtonColors(
+  normal: Colors.transparent,
+  iconNormal: const Color(0xFF805306),
+  mouseOver: const Color(0xFF404040),
+  mouseDown: const Color(0xFF202020),
+  iconMouseOver: const Color(0xFFFFFFFF),
+  iconMouseDown: const Color(0xFFF0F0F0),
+);
+
+class WindowButton extends StatelessWidget {
+  final WindowButtonBuilder? builder;
+  final WindowButtonIconBuilder? iconBuilder;
+  late final WindowButtonColors colors;
+  final bool animate;
+  final EdgeInsets? padding;
+  final VoidCallback? onPressed;
+
+  WindowButton(
+      {Key? key,
+      WindowButtonColors? colors,
+      this.builder,
+      @required this.iconBuilder,
+      this.padding,
+      this.onPressed,
+      this.animate = false})
+      : super(key: key) {
+    this.colors = colors ?? _defaultButtonColors;
+  }
+
+  Color getBackgroundColor(MouseState mouseState) {
+    if (mouseState.isMouseDown) return colors.mouseDown;
+    if (mouseState.isMouseOver) return colors.mouseOver;
+    return colors.normal;
+  }
+
+  Color getIconColor(MouseState mouseState) {
+    if (mouseState.isMouseDown) return colors.iconMouseDown;
+    if (mouseState.isMouseOver) return colors.iconMouseOver;
+    return colors.iconNormal;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (kIsWeb) {
+      return Container();
+    } else {
+      // Don't show button on macOS
+      if (Platform.isMacOS) {
+        return Container();
+      }
+    }
+
+    return MouseStateBuilder(
+      builder: (context, mouseState) {
+        WindowButtonContext buttonContext = WindowButtonContext(
+            mouseState: mouseState,
+            context: context,
+            backgroundColor: getBackgroundColor(mouseState),
+            iconColor: getIconColor(mouseState));
+
+        var icon =
+            (iconBuilder != null) ? iconBuilder!(buttonContext) : Container();
+
+        var fadeOutColor =
+            getBackgroundColor(MouseState()..isMouseOver = true).withOpacity(0);
+        var padding = this.padding ?? const EdgeInsets.all(10);
+        var animationMs =
+            mouseState.isMouseOver ? (animate ? 100 : 0) : (animate ? 200 : 0);
+        Widget iconWithPadding = Padding(padding: padding, child: icon);
+        iconWithPadding = AnimatedContainer(
+            curve: Curves.easeOut,
+            duration: Duration(milliseconds: animationMs),
+            color: buttonContext.backgroundColor ?? fadeOutColor,
+            child: iconWithPadding);
+        var button =
+            (builder != null) ? builder!(buttonContext, icon) : iconWithPadding;
+        return SizedBox(
+          width: 45,
+          height: 32,
+          child: button,
+        );
+      },
+      onPressed: () {
+        if (onPressed != null) onPressed!();
+      },
+    );
+  }
+}
+
+class MinimizeWindowButton extends WindowButton {
+  MinimizeWindowButton(
+      {Key? key,
+      WindowButtonColors? colors,
+      VoidCallback? onPressed,
+      bool? animate})
+      : super(
+          key: key,
+          colors: colors,
+          animate: animate ?? false,
+          iconBuilder: (buttonContext) =>
+              MinimizeIcon(color: buttonContext.iconColor),
+          onPressed: onPressed,
+        );
+}
+
+class MaximizeWindowButton extends WindowButton {
+  MaximizeWindowButton(
+      {Key? key,
+      WindowButtonColors? colors,
+      VoidCallback? onPressed,
+      bool? animate})
+      : super(
+          key: key,
+          colors: colors,
+          animate: animate ?? false,
+          iconBuilder: (buttonContext) =>
+              MaximizeIcon(color: buttonContext.iconColor),
+          onPressed: onPressed,
+        );
+}
+
+class RestoreWindowButton extends WindowButton {
+  RestoreWindowButton(
+      {Key? key,
+      WindowButtonColors? colors,
+      VoidCallback? onPressed,
+      bool? animate})
+      : super(
+          key: key,
+          colors: colors,
+          animate: animate ?? false,
+          iconBuilder: (buttonContext) =>
+              RestoreIcon(color: buttonContext.iconColor),
+          onPressed: onPressed,
+        );
+}
+
+final _defaultCloseButtonColors = WindowButtonColors(
+    mouseOver: const Color(0xFFD32F2F),
+    mouseDown: const Color(0xFFB71C1C),
+    iconNormal: const Color(0xFF805306),
+    iconMouseOver: const Color(0xFFFFFFFF));
+
+class CloseWindowButton extends WindowButton {
+  CloseWindowButton(
+      {Key? key,
+      WindowButtonColors? colors,
+      VoidCallback? onPressed,
+      bool? animate})
+      : super(
+          key: key,
+          colors: colors ?? _defaultCloseButtonColors,
+          animate: animate ?? false,
+          iconBuilder: (buttonContext) =>
+              CloseIcon(color: buttonContext.iconColor),
+          onPressed: onPressed,
+        );
+}
+
+// Switched to CustomPaint icons by https://github.com/esDotDev
+
+/// Close
+class CloseIcon extends StatelessWidget {
+  final Color color;
+  const CloseIcon({Key? key, required this.color}) : super(key: key);
+  @override
+  Widget build(BuildContext context) => Align(
+        alignment: Alignment.topLeft,
+        child: Stack(children: [
+          // Use rotated containers instead of a painter because it renders slightly crisper than a painter for some reason.
+          Transform.rotate(
+              angle: pi * .25,
+              child:
+                  Center(child: Container(width: 14, height: 1, color: color))),
+          Transform.rotate(
+              angle: pi * -.25,
+              child:
+                  Center(child: Container(width: 14, height: 1, color: color))),
+        ]),
+      );
+}
+
+/// Maximize
+class MaximizeIcon extends StatelessWidget {
+  final Color color;
+  const MaximizeIcon({Key? key, required this.color}) : super(key: key);
+  @override
+  Widget build(BuildContext context) => _AlignedPaint(_MaximizePainter(color));
+}
+
+class _MaximizePainter extends _IconPainter {
+  _MaximizePainter(Color color) : super(color);
+  @override
+  void paint(Canvas canvas, Size size) {
+    Paint p = getPaint(color);
+    canvas.drawRect(Rect.fromLTRB(0, 0, size.width - 1, size.height - 1), p);
+  }
+}
+
+/// Restore
+class RestoreIcon extends StatelessWidget {
+  final Color color;
+  const RestoreIcon({
+    Key? key,
+    required this.color,
+  }) : super(key: key);
+  @override
+  Widget build(BuildContext context) => _AlignedPaint(_RestorePainter(color));
+}
+
+class _RestorePainter extends _IconPainter {
+  _RestorePainter(Color color) : super(color);
+  @override
+  void paint(Canvas canvas, Size size) {
+    Paint p = getPaint(color);
+    canvas.drawRect(Rect.fromLTRB(0, 2, size.width - 2, size.height), p);
+    canvas.drawLine(const Offset(2, 2), const Offset(2, 0), p);
+    canvas.drawLine(const Offset(2, 0), Offset(size.width, 0), p);
+    canvas.drawLine(
+        Offset(size.width, 0), Offset(size.width, size.height - 2), p);
+    canvas.drawLine(Offset(size.width, size.height - 2),
+        Offset(size.width - 2, size.height - 2), p);
+  }
+}
+
+/// Minimize
+class MinimizeIcon extends StatelessWidget {
+  final Color color;
+  const MinimizeIcon({Key? key, required this.color}) : super(key: key);
+  @override
+  Widget build(BuildContext context) => _AlignedPaint(_MinimizePainter(color));
+}
+
+class _MinimizePainter extends _IconPainter {
+  _MinimizePainter(Color color) : super(color);
+  @override
+  void paint(Canvas canvas, Size size) {
+    Paint p = getPaint(color);
+    canvas.drawLine(
+        Offset(0, size.height / 2), Offset(size.width, size.height / 2), p);
+  }
+}
+
+/// Helpers
+abstract class _IconPainter extends CustomPainter {
+  _IconPainter(this.color);
+  final Color color;
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+}
+
+class _AlignedPaint extends StatelessWidget {
+  const _AlignedPaint(this.painter, {Key? key}) : super(key: key);
+  final CustomPainter painter;
+
+  @override
+  Widget build(BuildContext context) {
+    return Align(
+        alignment: Alignment.center,
+        child: CustomPaint(size: const Size(10, 10), painter: painter));
+  }
+}
+
+Paint getPaint(Color color, [bool isAntiAlias = false]) => Paint()
+  ..color = color
+  ..style = PaintingStyle.stroke
+  ..isAntiAlias = isAntiAlias
+  ..strokeWidth = 1;
+
+typedef MouseStateBuilderCB = Widget Function(
+    BuildContext context, MouseState mouseState);
+
+class MouseState {
+  bool isMouseOver = false;
+  bool isMouseDown = false;
+  MouseState();
+  @override
+  String toString() {
+    return "isMouseDown: $isMouseDown - isMouseOver: $isMouseOver";
+  }
+}
+
+T? _ambiguate<T>(T? value) => value;
+
+class MouseStateBuilder extends StatefulWidget {
+  final MouseStateBuilderCB builder;
+  final VoidCallback? onPressed;
+  const MouseStateBuilder({Key? key, required this.builder, this.onPressed})
+      : super(key: key);
+  @override
+  _MouseStateBuilderState createState() => _MouseStateBuilderState();
+}
+
+class _MouseStateBuilderState extends State<MouseStateBuilder> {
+  late MouseState _mouseState;
+  _MouseStateBuilderState() {
+    _mouseState = MouseState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+        onEnter: (event) {
+          setState(() {
+            _mouseState.isMouseOver = true;
+          });
+        },
+        onExit: (event) {
+          setState(() {
+            _mouseState.isMouseOver = false;
+          });
+        },
+        child: GestureDetector(
+            onTapDown: (_) {
+              setState(() {
+                _mouseState.isMouseDown = true;
+              });
+            },
+            onTapCancel: () {
+              setState(() {
+                _mouseState.isMouseDown = false;
+              });
+            },
+            onTap: () {
+              setState(() {
+                _mouseState.isMouseDown = false;
+                _mouseState.isMouseOver = false;
+              });
+              _ambiguate(WidgetsBinding.instance)!.addPostFrameCallback((_) {
+                if (widget.onPressed != null) {
+                  widget.onPressed!();
+                }
+              });
+            },
+            onTapUp: (_) {},
+            child: widget.builder(context, _mouseState)));
+  }
+}
diff --git a/lib/components/shared/playbutton_card.dart b/lib/components/shared/playbutton_card.dart
index cdf55642..f381e7ce 100644
--- a/lib/components/shared/playbutton_card.dart
+++ b/lib/components/shared/playbutton_card.dart
@@ -1,14 +1,13 @@
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotube/collections/assets.gen.dart';
 import 'package:spotube/collections/spotube_icons.dart';
-import 'package:spotube/components/shared/hover_builder.dart';
-import 'package:spotube/components/shared/spotube_marquee_text.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
-import 'package:spotube/hooks/use_platform_property.dart';
-
-enum PlaybuttonCardViewType { square, list }
+import 'package:spotube/hooks/use_breakpoint_value.dart';
+import 'package:spotube/hooks/use_brightness_value.dart';
+import 'package:spotube/utils/platform.dart';
 
 class PlaybuttonCard extends HookWidget {
   final void Function()? onTap;
@@ -20,7 +19,6 @@ class PlaybuttonCard extends HookWidget {
   final bool isPlaying;
   final bool isLoading;
   final String title;
-  final PlaybuttonCardViewType viewType;
 
   const PlaybuttonCard({
     required this.imageUrl,
@@ -32,232 +30,158 @@ class PlaybuttonCard extends HookWidget {
     this.onPlaybuttonPressed,
     this.onAddToQueuePressed,
     this.onTap,
-    this.viewType = PlaybuttonCardViewType.square,
     Key? key,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    final backgroundColor = PlatformTheme.of(context).secondaryBackgroundColor;
+    final textsKey = useMemoized(() => GlobalKey(), []);
+    final theme = Theme.of(context);
+    final radius = BorderRadius.circular(15);
 
-    final boxShadow = usePlatformProperty<BoxShadow?>(
-      (context) => PlatformProperty(
-        android: BoxShadow(
-          blurRadius: 10,
-          offset: const Offset(0, 3),
-          spreadRadius: 5,
-          color: Theme.of(context).colorScheme.shadow,
-        ),
-        ios: null,
-        macos: null,
-        linux: BoxShadow(
-          blurRadius: 6,
-          color: Theme.of(context).shadowColor.withOpacity(0.3),
-        ),
-        windows: null,
-      ),
+    final double size = useBreakpointValue<double>(
+          xs: 130,
+          sm: 130,
+          md: 150,
+          others: 170,
+        ) ??
+        170;
+
+    final end = useBreakpointValue<double>(
+          xs: 15,
+          sm: 15,
+          others: 20,
+        ) ??
+        20;
+
+    final textsHeight = useState(
+      (textsKey.currentContext?.findRenderObject() as RenderBox?)
+              ?.size
+              .height ??
+          110.00,
     );
 
-    final splash = usePlatformProperty<InteractiveInkFeatureFactory?>(
-      (context) => PlatformProperty.only(
-        android: InkRipple.splashFactory,
-        other: NoSplash.splashFactory,
-      ),
-    );
+    useEffect(() {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        textsHeight.value =
+            (textsKey.currentContext?.findRenderObject() as RenderBox?)
+                    ?.size
+                    .height ??
+                textsHeight.value;
+      });
+      return null;
+    }, [textsKey]);
 
-    final isSquare = viewType == PlaybuttonCardViewType.square;
-
-    return Container(
-      margin: margin,
-      child: InkWell(
-        onTap: onTap,
-        borderRadius: BorderRadius.circular(8),
-        splashFactory: splash,
-        highlightColor: Colors.black12,
-        child: ConstrainedBox(
-          constraints: BoxConstraints(
-            maxWidth: isSquare ? 200 : double.infinity,
-            maxHeight: !isSquare ? 60 : double.infinity,
-          ),
-          child: HoverBuilder(builder: (context, isHovering) {
-            final playButton = PlatformIconButton(
-              onPressed: onPlaybuttonPressed,
-              backgroundColor: PlatformTheme.of(context).primaryColor,
-              hoverColor:
-                  PlatformTheme.of(context).primaryColor?.withOpacity(0.5),
-              icon: isLoading
-                  ? SizedBox(
-                      height: 23,
-                      width: 23,
-                      child: PlatformCircularProgressIndicator(
-                        color: ThemeData.estimateBrightnessForColor(
-                                  PlatformTheme.of(context).primaryColor!,
-                                ) ==
-                                Brightness.dark
-                            ? Colors.white
-                            : Colors.grey[900],
-                      ),
-                    )
-                  : Icon(
-                      isPlaying ? SpotubeIcons.pause : SpotubeIcons.play,
-                      color: Colors.white,
+    return Stack(
+      children: [
+        Container(
+          constraints: BoxConstraints(maxWidth: size),
+          margin: margin,
+          child: Material(
+            color: Color.lerp(
+              theme.colorScheme.surfaceVariant,
+              theme.colorScheme.surface,
+              useBrightnessValue(.9, .7),
+            ),
+            borderRadius: radius,
+            shadowColor: theme.colorScheme.background,
+            elevation: 3,
+            child: InkWell(
+              mouseCursor: SystemMouseCursors.click,
+              onTap: onTap,
+              borderRadius: radius,
+              splashFactory: theme.splashFactory,
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Padding(
+                    padding: const EdgeInsets.only(
+                      left: 8,
+                      right: 8,
+                      top: 8,
                     ),
-            );
-            final addToQueueButton = PlatformIconButton(
-              onPressed: isLoading ? null : onAddToQueuePressed,
-              backgroundColor:
-                  PlatformTheme.of(context).secondaryBackgroundColor,
-              hoverColor: PlatformTheme.of(context)
-                  .secondaryBackgroundColor
-                  ?.withOpacity(0.5),
-              icon: const Icon(SpotubeIcons.queueAdd),
-            );
-            final image = Padding(
-              padding: EdgeInsets.all(
-                platform == TargetPlatform.windows ? 5 : 0,
-              ),
-              child: ClipRRect(
-                borderRadius: BorderRadius.circular(
-                  [TargetPlatform.windows, TargetPlatform.linux]
-                          .contains(platform)
-                      ? 5
-                      : 8,
-                ),
-                child: UniversalImage(
-                  path: imageUrl,
-                  width: isSquare ? 200 : 60,
-                  placeholder: (context, url) => Assets.placeholder.image(),
-                ),
-              ),
-            );
-
-            final square = Column(
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                // thumbnail of the playlist
-                Stack(
-                  children: [
-                    image,
-                    Positioned.directional(
-                      textDirection: TextDirection.ltr,
-                      bottom: 10,
-                      end: 5,
-                      child: Column(
-                        mainAxisSize: MainAxisSize.min,
-                        mainAxisAlignment: MainAxisAlignment.end,
-                        children: [
-                          if (!isPlaying) addToQueueButton,
-                          if (platform != TargetPlatform.linux)
-                            const SizedBox(height: 5),
-                          playButton,
-                        ],
+                    child: ClipRRect(
+                      borderRadius: radius,
+                      child: UniversalImage(
+                        path: imageUrl,
+                        placeholder: Assets.albumPlaceholder.path,
                       ),
-                    )
-                  ],
-                ),
-                const SizedBox(height: 5),
-                Padding(
-                  padding:
-                      const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
-                  child: Column(
-                    children: [
-                      Tooltip(
-                        message: title,
-                        child: SizedBox(
-                          height: 20,
-                          child: SpotubeMarqueeText(
-                            text: title,
-                            style: const TextStyle(fontWeight: FontWeight.bold),
-                            isHovering: isHovering,
-                          ),
-                        ),
-                      ),
-                      if (description != null) ...[
-                        const SizedBox(height: 10),
-                        SizedBox(
-                          height: 30,
-                          child: SpotubeMarqueeText(
-                            text: description!,
-                            style: PlatformTextTheme.of(context).caption,
-                            isHovering: isHovering,
-                          ),
-                        ),
-                      ]
-                    ],
+                    ),
                   ),
-                ),
-              ],
-            );
-
-            final list = Row(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              children: [
-                // thumbnail of the playlist
-                Flexible(
-                  child: Row(
+                  Column(
+                    key: textsKey,
+                    crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
-                      image,
-                      const SizedBox(width: 10),
-                      Flexible(
-                        child: RichText(
+                      const SizedBox(height: 15),
+                      Padding(
+                        padding: const EdgeInsets.symmetric(horizontal: 12.0),
+                        child: AutoSizeText(
+                          title,
+                          maxLines: 1,
+                          minFontSize: theme.textTheme.bodyMedium!.fontSize!,
                           overflow: TextOverflow.ellipsis,
-                          text: TextSpan(
-                            children: [
-                              TextSpan(
-                                text: title,
-                                style: PlatformTextTheme.of(context)
-                                    .body
-                                    ?.copyWith(fontWeight: FontWeight.bold),
-                              ),
-                              if (description != null)
-                                TextSpan(
-                                  text: '\n$description',
-                                  style: PlatformTextTheme.of(context).caption,
-                                ),
-                            ],
-                          ),
                         ),
                       ),
+                      if (description != null)
+                        Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 12.0),
+                          child: AutoSizeText(
+                            description!,
+                            maxLines: 2,
+                            style: theme.textTheme.bodySmall?.copyWith(
+                              color:
+                                  theme.colorScheme.onSurface.withOpacity(.5),
+                            ),
+                            overflow: TextOverflow.ellipsis,
+                          ),
+                        ),
+                      const SizedBox(height: 10),
                     ],
                   ),
-                ),
-                Row(
-                  children: [
-                    addToQueueButton,
-                    const SizedBox(width: 10),
-                    playButton,
-                    const SizedBox(width: 10),
-                  ],
-                ),
-              ],
-            );
-
-            return Ink(
-              decoration: BoxDecoration(
-                color: backgroundColor,
-                borderRadius: BorderRadius.circular(
-                  [TargetPlatform.windows, TargetPlatform.linux]
-                          .contains(platform)
-                      ? 5
-                      : 8,
-                ),
-                boxShadow: [
-                  if (boxShadow != null) boxShadow,
                 ],
-                border: [TargetPlatform.windows, TargetPlatform.macOS]
-                        .contains(platform)
-                    ? Border.all(
-                        color: PlatformTheme.of(context).borderColor ??
-                            Colors.transparent,
-                        width: 1,
-                      )
-                    : null,
               ),
-              child: isSquare ? square : list,
-            );
-          }),
+            ),
+          ),
         ),
-      ),
+        AnimatedPositioned(
+          duration: const Duration(milliseconds: 300),
+          right: end,
+          bottom: textsHeight.value - (kIsMobile ? 5 : 10),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              if (!isPlaying)
+                IconButton(
+                  style: IconButton.styleFrom(
+                    backgroundColor: theme.colorScheme.background,
+                    foregroundColor: theme.colorScheme.primary,
+                    minimumSize: const Size.square(10),
+                  ),
+                  icon: const Icon(SpotubeIcons.queueAdd),
+                  onPressed: isLoading ? null : onAddToQueuePressed,
+                ),
+              const SizedBox(height: 5),
+              IconButton(
+                style: IconButton.styleFrom(
+                  backgroundColor: theme.colorScheme.primaryContainer,
+                  foregroundColor: theme.colorScheme.primary,
+                  minimumSize: const Size.square(10),
+                ),
+                icon: isLoading
+                    ? SizedBox.fromSize(
+                        size: const Size.square(15),
+                        child: const CircularProgressIndicator(strokeWidth: 2),
+                      )
+                    : isPlaying
+                        ? const Icon(SpotubeIcons.pause)
+                        : const Icon(SpotubeIcons.play),
+                onPressed: isLoading ? null : onPlaybuttonPressed,
+              ),
+            ],
+          ),
+        ),
+      ],
     );
   }
 }
diff --git a/lib/components/shared/shimmers/shimmer_artist_profile.dart b/lib/components/shared/shimmers/shimmer_artist_profile.dart
index 58786192..940c4e81 100644
--- a/lib/components/shared/shimmers/shimmer_artist_profile.dart
+++ b/lib/components/shared/shimmers/shimmer_artist_profile.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:skeleton_text/skeleton_text.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_track_tile.dart';
 import 'package:spotube/extensions/theme.dart';
@@ -11,7 +11,7 @@ class ShimmerArtistProfile extends HookWidget {
 
   @override
   Widget build(BuildContext context) {
-    final isDark = PlatformTheme.of(context).brightness == Brightness.dark;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
     final shimmerTheme = ShimmerColorTheme(
       shimmerBackgroundColor: isDark ? Colors.grey[700] : Colors.grey[200],
       shimmerColor: isDark ? Colors.grey[800] : Colors.grey[300],
@@ -21,12 +21,14 @@ class ShimmerArtistProfile extends HookWidget {
         shimmerTheme.shimmerBackgroundColor ?? Colors.grey;
 
     final avatarWidth = useBreakpointValue(
-      sm: MediaQuery.of(context).size.width * 0.80,
-      md: MediaQuery.of(context).size.width * 0.50,
-      lg: MediaQuery.of(context).size.width * 0.30,
-      xl: MediaQuery.of(context).size.width * 0.30,
-      xxl: MediaQuery.of(context).size.width * 0.30,
-    );
+          xs: MediaQuery.of(context).size.width * 0.80,
+          sm: MediaQuery.of(context).size.width * 0.80,
+          md: MediaQuery.of(context).size.width * 0.50,
+          lg: MediaQuery.of(context).size.width * 0.30,
+          xl: MediaQuery.of(context).size.width * 0.30,
+          xxl: MediaQuery.of(context).size.width * 0.30,
+        ) ??
+        0;
 
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
diff --git a/lib/components/shared/shimmers/shimmer_categories.dart b/lib/components/shared/shimmers/shimmer_categories.dart
index fdefb645..e9f442d4 100644
--- a/lib/components/shared/shimmers/shimmer_categories.dart
+++ b/lib/components/shared/shimmers/shimmer_categories.dart
@@ -1,22 +1,33 @@
 import 'package:flutter/material.dart';
-import 'package:platform_ui/platform_ui.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
 import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
 import 'package:spotube/extensions/theme.dart';
+import 'package:spotube/hooks/use_breakpoint_value.dart';
 
-class ShimmerCategories extends StatelessWidget {
+class ShimmerCategories extends HookWidget {
   const ShimmerCategories({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    final isDark = PlatformTheme.of(context).brightness == Brightness.dark;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
     final shimmerTheme = ShimmerColorTheme(
       shimmerBackgroundColor: isDark ? Colors.grey[700] : Colors.grey[200],
     );
     final shimmerBackgroundColor =
         shimmerTheme.shimmerBackgroundColor ?? Colors.grey;
 
+    final shimmerCount = useBreakpointValue(
+      xs: 2,
+      sm: 2,
+      md: 3,
+      lg: 3,
+      xl: 6,
+      xxl: 8,
+    );
+
     return Padding(
-      padding: const EdgeInsets.all(8.0),
+      padding: const EdgeInsets.all(16),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         mainAxisAlignment: MainAxisAlignment.start,
@@ -31,9 +42,9 @@ class ShimmerCategories extends StatelessWidget {
             ),
           ),
           const SizedBox(height: 10),
-          const Align(
-            alignment: Alignment.topCenter,
-            child: ShimmerPlaybuttonCard(count: 7),
+          Align(
+            alignment: Alignment.topLeft,
+            child: ShimmerPlaybuttonCard(count: shimmerCount),
           ),
         ],
       ),
diff --git a/lib/components/shared/shimmers/shimmer_lyrics.dart b/lib/components/shared/shimmers/shimmer_lyrics.dart
index 1dc9ab86..b0fba340 100644
--- a/lib/components/shared/shimmers/shimmer_lyrics.dart
+++ b/lib/components/shared/shimmers/shimmer_lyrics.dart
@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:skeleton_text/skeleton_text.dart';
+import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/theme.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
 
 const widths = [20, 56, 89, 60, 25, 69];
 
@@ -12,7 +12,7 @@ class ShimmerLyrics extends HookWidget {
 
   @override
   Widget build(BuildContext context) {
-    final isDark = PlatformTheme.of(context).brightness == Brightness.dark;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
     final shimmerTheme = ShimmerColorTheme(
       shimmerBackgroundColor: isDark ? Colors.grey[700] : Colors.grey[200],
       shimmerColor: isDark ? Colors.grey[800] : Colors.grey[300],
@@ -21,7 +21,7 @@ class ShimmerLyrics extends HookWidget {
     final shimmerBackgroundColor =
         shimmerTheme.shimmerBackgroundColor ?? Colors.grey;
 
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
 
     return ListView.builder(
       itemCount: 20,
@@ -29,10 +29,10 @@ class ShimmerLyrics extends HookWidget {
       physics: const NeverScrollableScrollPhysics(),
       itemBuilder: (context, index) {
         final widthsCp = [...widths];
-        if (breakpoint.isMd) {
+        if (mediaQuery.isMd) {
           widthsCp.removeLast();
         }
-        if (breakpoint.isSm) {
+        if (mediaQuery.smAndDown) {
           widthsCp.removeLast();
           widthsCp.removeLast();
         }
diff --git a/lib/components/shared/shimmers/shimmer_playbutton_card.dart b/lib/components/shared/shimmers/shimmer_playbutton_card.dart
index 605a79a8..82da5bd9 100644
--- a/lib/components/shared/shimmers/shimmer_playbutton_card.dart
+++ b/lib/components/shared/shimmers/shimmer_playbutton_card.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
-import 'package:platform_ui/platform_ui.dart';
-import 'package:spotube/extensions/theme.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+import 'package:spotube/hooks/use_breakpoint_value.dart';
 
 class ShimmerPlaybuttonCardPainter extends CustomPainter {
   final Color background;
@@ -12,29 +13,59 @@ class ShimmerPlaybuttonCardPainter extends CustomPainter {
 
   @override
   void paint(Canvas canvas, Size size) {
+    const radius = Radius.circular(15);
+
     canvas.drawRRect(
       RRect.fromRectAndRadius(
         Rect.fromLTWH(0, 0, size.width, size.height),
-        const Radius.circular(10),
+        radius,
       ),
       Paint()..color = background,
     );
 
     canvas.drawRRect(
       RRect.fromRectAndRadius(
-        Rect.fromLTWH(0, 0, size.width, size.height - 45),
-        const Radius.circular(10),
+        Rect.fromLTWH(8, 8, size.width - 16, size.height - 90),
+        radius,
       ),
       Paint()..color = foreground,
     );
 
     canvas.drawRRect(
       RRect.fromRectAndRadius(
-        Rect.fromLTWH(size.width / 4, size.height - 27, size.width / 2, 10),
-        const Radius.circular(10),
+        Rect.fromLTWH(12, size.height - 67, size.width / 2, 10),
+        radius,
       ),
       Paint()..color = foreground,
     );
+
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromLTWH(12, size.height - 45, size.width - 24, 8),
+        radius,
+      ),
+      Paint()..color = foreground,
+    );
+
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromLTWH(12, size.height - 30, size.width * .4, 8),
+        radius,
+      ),
+      Paint()..color = foreground,
+    );
+
+    canvas.drawCircle(
+      Offset(size.width * .85, size.height * .50),
+      17,
+      Paint()..color = background,
+    );
+
+    canvas.drawCircle(
+      Offset(size.width * .85, size.height * .67),
+      17,
+      Paint()..color = background,
+    );
   }
 
   @override
@@ -43,7 +74,7 @@ class ShimmerPlaybuttonCardPainter extends CustomPainter {
   }
 }
 
-class ShimmerPlaybuttonCard extends StatelessWidget {
+class ShimmerPlaybuttonCard extends HookWidget {
   final int count;
 
   const ShimmerPlaybuttonCard({
@@ -53,114 +84,36 @@ class ShimmerPlaybuttonCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final isDark = PlatformTheme.of(context).brightness == Brightness.dark;
-    final shimmerTheme = ShimmerColorTheme(
-      shimmerBackgroundColor: isDark ? Colors.grey[700] : Colors.grey[200],
-      shimmerColor: isDark ? Colors.grey[800] : Colors.grey[300],
+    final theme = Theme.of(context);
+    final Size size = useBreakpointValue<Size>(
+      xs: const Size(130, 200),
+      sm: const Size(130, 200),
+      md: const Size(150, 220),
+      others: const Size(170, 240),
     );
 
-    return Row(
-      mainAxisSize: MainAxisSize.min,
+    final isDark = theme.brightness == Brightness.dark;
+    final bgColor = theme.colorScheme.surfaceVariant.withOpacity(.2);
+    final fgColor = Color.lerp(
+      theme.colorScheme.surfaceVariant,
+      isDark ? Colors.black : Colors.white,
+      .4,
+    );
+
+    return Wrap(
+      spacing: 20,
+      runSpacing: 20,
       children: [
         for (var i = 0; i < count; i++) ...[
           CustomPaint(
-            size: const Size(200, 250),
+            size: size,
             painter: ShimmerPlaybuttonCardPainter(
-              background: shimmerTheme.shimmerBackgroundColor ??
-                  Theme.of(context).scaffoldBackgroundColor,
-              foreground:
-                  shimmerTheme.shimmerColor ?? Theme.of(context).cardColor,
+              background: bgColor,
+              foreground: fgColor!,
             ),
           ),
-          const SizedBox(width: 10),
         ]
       ],
     );
   }
 }
-
-// class ShimmerPlaybuttonCard extends StatelessWidget {
-//   final int count;
-//   const ShimmerPlaybuttonCard({Key? key, this.count = 4}) : super(key: key);
-
-//   @override
-//   Widget build(BuildContext context) {
-//     final shimmerColor =
-//         Theme.of(context).extension<ShimmerColorTheme>()?.shimmerColor ??
-//             Colors.white;
-//     final shimmerBackgroundColor = Theme.of(context)
-//             .extension<ShimmerColorTheme>()
-//             ?.shimmerBackgroundColor ??
-//         Colors.grey;
-
-//     final card = Stack(
-//       children: [
-//         SkeletonAnimation(
-//           shimmerColor: shimmerColor,
-//           borderRadius: BorderRadius.circular(20),
-//           shimmerDuration: 1000,
-//           child: Container(
-//             width: 200,
-//             height: 220,
-//             decoration: BoxDecoration(
-//               color: shimmerBackgroundColor,
-//               borderRadius: BorderRadius.circular(10),
-//             ),
-//             margin: const EdgeInsets.only(top: 10),
-//           ),
-//         ),
-//         Column(
-//           children: [
-//             SkeletonAnimation(
-//               shimmerColor: shimmerBackgroundColor,
-//               borderRadius: BorderRadius.circular(20),
-//               shimmerDuration: 1000,
-//               child: Container(
-//                 width: 200,
-//                 height: 180,
-//                 decoration: BoxDecoration(
-//                   color: shimmerColor,
-//                   borderRadius: BorderRadius.circular(10),
-//                 ),
-//                 margin: const EdgeInsets.only(top: 10),
-//               ),
-//             ),
-//             const SizedBox(height: 5),
-//             SkeletonAnimation(
-//               shimmerColor: shimmerBackgroundColor,
-//               borderRadius: BorderRadius.circular(20),
-//               shimmerDuration: 1000,
-//               child: Container(
-//                 width: 150,
-//                 height: 10,
-//                 decoration: BoxDecoration(
-//                   color: shimmerColor,
-//                   borderRadius: BorderRadius.circular(10),
-//                 ),
-//                 margin: const EdgeInsets.only(top: 10),
-//               ),
-//             ),
-//           ],
-//         ),
-//       ],
-//     );
-
-//     return SingleChildScrollView(
-//       physics: const NeverScrollableScrollPhysics(),
-//       scrollDirection: Axis.horizontal,
-//       child: Row(
-//         children: [
-//           Row(
-//             children: List.generate(
-//               count,
-//               (_) => Padding(
-//                 padding: const EdgeInsets.symmetric(horizontal: 15),
-//                 child: card,
-//               ),
-//             ),
-//           ),
-//         ],
-//       ),
-//     );
-//   }
-// }
diff --git a/lib/components/shared/shimmers/shimmer_track_tile.dart b/lib/components/shared/shimmers/shimmer_track_tile.dart
index 7f483750..070b2f09 100644
--- a/lib/components/shared/shimmers/shimmer_track_tile.dart
+++ b/lib/components/shared/shimmers/shimmer_track_tile.dart
@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotube/extensions/theme.dart';
 
 class ShimmerTrackTilePainter extends CustomPainter {
@@ -26,21 +26,7 @@ class ShimmerTrackTilePainter extends CustomPainter {
 
     canvas.drawRRect(
       RRect.fromRectAndRadius(
-        const Rect.fromLTWH(5, 5, 40, 40),
-        const Radius.circular(5),
-      ),
-      Paint()..color = foreground,
-    );
-
-    canvas.drawCircle(
-      const Offset(70, 25),
-      15,
-      Paint()..color = foreground,
-    );
-
-    canvas.drawRRect(
-      RRect.fromRectAndRadius(
-        const Rect.fromLTWH(95, 10, 100, 10),
+        Rect.fromLTWH(0, 0, size.height, size.height),
         const Radius.circular(5),
       ),
       Paint()..color = foreground,
@@ -48,7 +34,29 @@ class ShimmerTrackTilePainter extends CustomPainter {
 
     canvas.drawRRect(
       RRect.fromRectAndRadius(
-        const Rect.fromLTWH(95, 30, 170, 7),
+        const Rect.fromLTWH(70, 10, 100, 10),
+        const Radius.circular(5),
+      ),
+      Paint()..color = foreground,
+    );
+
+    // draw Icons.play
+    const icon = Icons.play_arrow_outlined;
+    TextPainter textPainter = TextPainter(textDirection: TextDirection.rtl);
+    textPainter.text = TextSpan(
+      text: String.fromCharCode(icon.codePoint),
+      style: TextStyle(
+        fontSize: 40.0,
+        fontFamily: icon.fontFamily,
+        color: background,
+      ),
+    );
+    textPainter.layout();
+    textPainter.paint(canvas, const Offset(10, 10));
+
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        const Rect.fromLTWH(70, 30, 170, 7),
         const Radius.circular(5),
       ),
       Paint()..color = foreground,
@@ -67,7 +75,8 @@ class ShimmerTrackTile extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final isDark = PlatformTheme.of(context).brightness == Brightness.dark;
+    final theme = Theme.of(context);
+    final isDark = theme.brightness == Brightness.dark;
     final shimmerTheme = ShimmerColorTheme(
       shimmerBackgroundColor: isDark ? Colors.grey[700] : Colors.grey[200],
       shimmerColor: isDark ? Colors.grey[800] : Colors.grey[300],
@@ -80,12 +89,11 @@ class ShimmerTrackTile extends StatelessWidget {
           return Padding(
             padding: const EdgeInsets.only(bottom: 8.0, left: 8, right: 8),
             child: CustomPaint(
-              size: const Size(double.infinity, 50),
+              size: const Size(double.infinity, 60),
               painter: ShimmerTrackTilePainter(
                 background: shimmerTheme.shimmerBackgroundColor ??
-                    Theme.of(context).scaffoldBackgroundColor,
-                foreground:
-                    shimmerTheme.shimmerColor ?? Theme.of(context).cardColor,
+                    theme.scaffoldBackgroundColor,
+                foreground: shimmerTheme.shimmerColor ?? theme.cardColor,
               ),
             ),
           );
@@ -98,12 +106,11 @@ class ShimmerTrackTile extends StatelessWidget {
         (BuildContext context, int index) => Padding(
           padding: const EdgeInsets.only(bottom: 8.0, left: 8, right: 8),
           child: CustomPaint(
-            size: const Size(double.infinity, 50),
+            size: const Size(double.infinity, 60),
             painter: ShimmerTrackTilePainter(
               background: shimmerTheme.shimmerBackgroundColor ??
-                  Theme.of(context).scaffoldBackgroundColor,
-              foreground:
-                  shimmerTheme.shimmerColor ?? Theme.of(context).cardColor,
+                  theme.scaffoldBackgroundColor,
+              foreground: shimmerTheme.shimmerColor ?? theme.cardColor,
             ),
           ),
         ),
diff --git a/lib/components/shared/sort_tracks_dropdown.dart b/lib/components/shared/sort_tracks_dropdown.dart
index 135b7b7d..0547beb0 100644
--- a/lib/components/shared/sort_tracks_dropdown.dart
+++ b/lib/components/shared/sort_tracks_dropdown.dart
@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/library/user_local_tracks.dart';
+import 'package:spotube/components/shared/adaptive/adaptive_pop_sheet_list.dart';
+import 'package:spotube/extensions/context.dart';
 
 class SortTracksDropdown extends StatelessWidget {
   final SortBy? value;
@@ -14,42 +16,68 @@ class SortTracksDropdown extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return PlatformPopupMenuButton<SortBy>(
-      items: [
-        PlatformPopupMenuItem(
-          value: SortBy.none,
-          enabled: value != SortBy.none,
-          child: const Text("None"),
+    var theme = Theme.of(context);
+    return ListTileTheme(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: AdaptivePopSheetList<SortBy>(
+        children: [
+          PopSheetEntry(
+            value: SortBy.none,
+            enabled: value != SortBy.none,
+            title: Text(context.l10n.none),
+          ),
+          PopSheetEntry(
+            value: SortBy.ascending,
+            enabled: value != SortBy.ascending,
+            title: Text(context.l10n.sort_a_z),
+          ),
+          PopSheetEntry(
+            value: SortBy.descending,
+            enabled: value != SortBy.descending,
+            title: Text(context.l10n.sort_z_a),
+          ),
+          PopSheetEntry(
+            value: SortBy.newest,
+            enabled: value != SortBy.newest,
+            title: Text(context.l10n.sort_newest),
+          ),
+          PopSheetEntry(
+            value: SortBy.oldest,
+            enabled: value != SortBy.oldest,
+            title: Text(context.l10n.sort_oldest),
+          ),
+          PopSheetEntry(
+            value: SortBy.artist,
+            enabled: value != SortBy.artist,
+            title: Text(context.l10n.sort_artist),
+          ),
+          PopSheetEntry(
+            value: SortBy.album,
+            enabled: value != SortBy.album,
+            title: Text(context.l10n.sort_album),
+          ),
+        ],
+        headings: [
+          Text(context.l10n.sort_tracks),
+        ],
+        onSelected: onChanged,
+        tooltip: context.l10n.sort_tracks,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
+          child: DefaultTextStyle(
+            style: theme.textTheme.titleSmall!,
+            child: Row(
+              children: [
+                const Icon(SpotubeIcons.sort),
+                const SizedBox(width: 8),
+                Text(context.l10n.sort_tracks),
+              ],
+            ),
+          ),
         ),
-        PlatformPopupMenuItem(
-          value: SortBy.ascending,
-          enabled: value != SortBy.ascending,
-          child: const Text("Sort by A-Z"),
-        ),
-        PlatformPopupMenuItem(
-          value: SortBy.descending,
-          enabled: value != SortBy.descending,
-          child: const Text("Sort by Z-A"),
-        ),
-        PlatformPopupMenuItem(
-          value: SortBy.dateAdded,
-          enabled: value != SortBy.dateAdded,
-          child: const Text("Sort by Date"),
-        ),
-        PlatformPopupMenuItem(
-          value: SortBy.artist,
-          enabled: value != SortBy.artist,
-          child: const Text("Sort by Artist"),
-        ),
-        PlatformPopupMenuItem(
-          value: SortBy.album,
-          enabled: value != SortBy.album,
-          child: const Text("Sort by Album"),
-        ),
-      ],
-      onSelected: onChanged,
-      tooltip: "Sort tracks",
-      child: const Icon(SpotubeIcons.sort),
+      ),
     );
   }
 }
diff --git a/lib/components/shared/spotube_marquee_text.dart b/lib/components/shared/spotube_marquee_text.dart
deleted file mode 100644
index 65583b32..00000000
--- a/lib/components/shared/spotube_marquee_text.dart
+++ /dev/null
@@ -1,48 +0,0 @@
-import 'package:auto_size_text/auto_size_text.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:marquee/marquee.dart';
-
-class SpotubeMarqueeText extends HookWidget {
-  final bool? isHovering;
-  const SpotubeMarqueeText({
-    Key? key,
-    required this.text,
-    this.style,
-    this.isHovering,
-  }) : super(key: key);
-  final TextStyle? style;
-  final String text;
-
-  @override
-  Widget build(BuildContext context) {
-    final uKey = useState(UniqueKey());
-
-    useEffect(() {
-      uKey.value = UniqueKey();
-      return;
-    }, [isHovering]);
-
-    return AutoSizeText(
-      text,
-      minFontSize: 13,
-      style: DefaultTextStyle.of(context).style.merge(style),
-      maxLines: 1,
-      overflowReplacement: Marquee(
-        key: uKey.value,
-        text: text,
-        style: DefaultTextStyle.of(context).style.merge(style),
-        scrollAxis: Axis.horizontal,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        blankSpace: 40.0,
-        velocity: 30.0,
-        accelerationDuration: const Duration(seconds: 1),
-        accelerationCurve: Curves.linear,
-        decelerationDuration: const Duration(milliseconds: 500),
-        decelerationCurve: Curves.easeOut,
-        showFadingOnlyWhenScrolling: true,
-        numberOfRounds: isHovering == true ? null : 1,
-      ),
-    );
-  }
-}
diff --git a/lib/components/shared/spotube_page_route.dart b/lib/components/shared/spotube_page_route.dart
index 48af33b3..22e4d2f1 100644
--- a/lib/components/shared/spotube_page_route.dart
+++ b/lib/components/shared/spotube_page_route.dart
@@ -1,27 +1,25 @@
-import 'package:fluent_ui/fluent_ui.dart';
+import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
-import 'package:platform_ui/platform_ui.dart';
 
-class SpotubePage extends CustomTransitionPage {
-  SpotubePage({
+class SpotubePage<T> extends MaterialPage<T> {
+  const SpotubePage({required super.child});
+}
+
+class SpotubeSlidePage extends CustomTransitionPage {
+  SpotubeSlidePage({
     required super.child,
+    super.key,
   }) : super(
+          reverseTransitionDuration: const Duration(milliseconds: 150),
+          transitionDuration: const Duration(milliseconds: 150),
           transitionsBuilder: (context, animation, secondaryAnimation, child) {
-            return child;
+            return SlideTransition(
+              position: Tween<Offset>(
+                begin: const Offset(1, 0),
+                end: Offset.zero,
+              ).animate(animation),
+              child: child,
+            );
           },
         );
-
-  @override
-  Route createRoute(BuildContext context) {
-    if (platform == TargetPlatform.windows) {
-      return FluentPageRoute(
-        builder: (context) => child,
-        settings: this,
-        maintainState: maintainState,
-        barrierLabel: barrierLabel,
-        fullscreenDialog: fullscreenDialog,
-      );
-    }
-    return super.createRoute(context);
-  }
 }
diff --git a/lib/components/shared/themed_button_tab_bar.dart b/lib/components/shared/themed_button_tab_bar.dart
new file mode 100644
index 00000000..d38c3a19
--- /dev/null
+++ b/lib/components/shared/themed_button_tab_bar.dart
@@ -0,0 +1,58 @@
+import 'package:buttons_tabbar/buttons_tabbar.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:spotube/hooks/use_breakpoint_value.dart';
+import 'package:spotube/hooks/use_brightness_value.dart';
+import 'package:spotube/utils/platform.dart';
+
+class ThemedButtonsTabBar extends HookWidget implements PreferredSizeWidget {
+  final List<Widget> tabs;
+  const ThemedButtonsTabBar({Key? key, required this.tabs}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final bgColor = useBrightnessValue(
+      theme.colorScheme.primaryContainer,
+      Color.lerp(theme.colorScheme.primary, Colors.black, 0.7)!,
+    );
+
+    final breakpoint = useBreakpointValue(
+      xs: 85.0,
+      sm: 85.0,
+      md: 35.0,
+      others: 0.0,
+    );
+
+    return Padding(
+      padding: EdgeInsets.only(
+        left: kIsMacOS ? breakpoint : 0,
+        top: 8,
+        bottom: 8,
+      ),
+      child: ButtonsTabBar(
+        radius: 100,
+        decoration: BoxDecoration(
+          color: bgColor,
+          borderRadius: BorderRadius.circular(15),
+        ),
+        labelStyle: theme.textTheme.labelLarge?.copyWith(
+          color: theme.colorScheme.primary,
+          fontWeight: FontWeight.bold,
+        ),
+        borderWidth: 0,
+        unselectedDecoration: BoxDecoration(
+          color: theme.colorScheme.background,
+          borderRadius: BorderRadius.circular(15),
+        ),
+        unselectedLabelStyle: theme.textTheme.labelLarge?.copyWith(
+          color: theme.colorScheme.primary,
+        ),
+        tabs: tabs,
+      ),
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(50);
+}
diff --git a/lib/components/shared/track_table/track_collection_view.dart b/lib/components/shared/track_table/track_collection_view.dart
deleted file mode 100644
index a0e25a54..00000000
--- a/lib/components/shared/track_table/track_collection_view.dart
+++ /dev/null
@@ -1,365 +0,0 @@
-import 'package:fl_query/fl_query.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:collection/collection.dart';
-import 'package:fuzzywuzzy/fuzzywuzzy.dart';
-import 'package:go_router/go_router.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
-import 'package:spotube/collections/assets.gen.dart';
-import 'package:spotube/collections/spotube_icons.dart';
-import 'package:spotube/components/shared/compact_search.dart';
-import 'package:spotube/components/shared/shimmers/shimmer_track_tile.dart';
-import 'package:spotube/components/shared/page_window_title_bar.dart';
-import 'package:spotube/components/shared/image/universal_image.dart';
-import 'package:spotube/components/shared/track_table/tracks_table_view.dart';
-import 'package:spotube/hooks/use_custom_status_bar_color.dart';
-import 'package:spotube/hooks/use_palette_color.dart';
-import 'package:spotube/models/logger.dart';
-import 'package:flutter/material.dart';
-import 'package:spotify/spotify.dart';
-import 'package:spotube/provider/authentication_provider.dart';
-import 'package:spotube/utils/platform.dart';
-import 'package:spotube/utils/type_conversion_utils.dart';
-import 'package:tuple/tuple.dart';
-
-class TrackCollectionView<T> extends HookConsumerWidget {
-  final logger = getLogger(TrackCollectionView);
-  final String id;
-  final String title;
-  final String? description;
-  final Query<List<TrackSimple>, T> tracksSnapshot;
-  final String titleImage;
-  final bool isPlaying;
-  final void Function([Track? currentTrack]) onPlay;
-  final void Function() onAddToQueue;
-  final void Function([Track? currentTrack]) onShuffledPlay;
-  final void Function() onShare;
-  final Widget? heartBtn;
-  final AlbumSimple? album;
-
-  final bool showShare;
-  final bool isOwned;
-  final bool bottomSpace;
-
-  final String routePath;
-  TrackCollectionView({
-    required this.title,
-    required this.id,
-    required this.tracksSnapshot,
-    required this.titleImage,
-    required this.isPlaying,
-    required this.onPlay,
-    required this.onShuffledPlay,
-    required this.onAddToQueue,
-    required this.onShare,
-    required this.routePath,
-    this.heartBtn,
-    this.album,
-    this.description,
-    this.showShare = true,
-    this.isOwned = false,
-    this.bottomSpace = false,
-    Key? key,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context, ref) {
-    final auth = ref.watch(AuthenticationNotifier.provider);
-    final color = usePaletteGenerator(
-      context,
-      titleImage,
-    ).dominantColor;
-
-    final List<Widget> buttons = [
-      if (showShare)
-        PlatformIconButton(
-          icon: Icon(
-            SpotubeIcons.share,
-            color: color?.titleTextColor,
-          ),
-          onPressed: onShare,
-        ),
-      if (heartBtn != null && auth != null) heartBtn!,
-      PlatformIconButton(
-        tooltip: "Shuffle",
-        icon: Icon(
-          SpotubeIcons.shuffle,
-          color: color?.titleTextColor,
-        ),
-        onPressed: onShuffledPlay,
-      ),
-      const SizedBox(width: 5),
-      // add to queue playlist
-      if (!isPlaying)
-        PlatformIconButton(
-          onPressed: tracksSnapshot.data != null ? onAddToQueue : null,
-          icon: Icon(
-            SpotubeIcons.queueAdd,
-            color: color?.titleTextColor,
-          ),
-        ),
-      // play playlist
-      PlatformIconButton(
-        backgroundColor: PlatformTheme.of(context).primaryColor,
-        onPressed: tracksSnapshot.data != null ? onPlay : null,
-        icon: Icon(isPlaying ? SpotubeIcons.stop : SpotubeIcons.play),
-      ),
-      const SizedBox(width: 10),
-    ];
-
-    final controller = useScrollController();
-
-    final collapsed = useState(false);
-
-    final searchText = useState("");
-    final searchController = useTextEditingController();
-
-    final filteredTracks = useMemoized(() {
-      if (searchText.value.isEmpty) {
-        return tracksSnapshot.data;
-      }
-      return tracksSnapshot.data
-          ?.map((e) => Tuple2(
-                weightedRatio(
-                  "${e.name} - ${TypeConversionUtils.artists_X_String<Artist>(e.artists ?? [])}",
-                  searchText.value,
-                ),
-                e,
-              ))
-          .toList()
-          .sorted(
-            (a, b) => b.item1.compareTo(a.item1),
-          )
-          .where((e) => e.item1 > 50)
-          .map((e) => e.item2)
-          .toList();
-    }, [tracksSnapshot.data, searchText.value]);
-
-    useCustomStatusBarColor(
-      color?.color ?? PlatformTheme.of(context).scaffoldBackgroundColor!,
-      GoRouter.of(context).location == routePath,
-    );
-
-    useEffect(() {
-      listener() {
-        if (controller.position.pixels >= 390 && !collapsed.value) {
-          collapsed.value = true;
-        } else if (controller.position.pixels < 390 && collapsed.value) {
-          collapsed.value = false;
-        }
-      }
-
-      controller.addListener(listener);
-
-      return () => controller.removeListener(listener);
-    }, [collapsed.value]);
-
-    final searchbar = ConstrainedBox(
-      constraints: const BoxConstraints(
-        maxWidth: 400,
-        maxHeight: 50,
-      ),
-      child: PlatformTextField(
-        controller: searchController,
-        onChanged: (value) => searchText.value = value,
-        placeholder: "Search tracks...",
-        backgroundColor: Colors.transparent,
-        focusedBackgroundColor: Colors.transparent,
-        style: TextStyle(
-          color: color?.titleTextColor,
-        ),
-        placeholderStyle: TextStyle(
-          color: color?.titleTextColor,
-        ),
-        focusedStyle: TextStyle(
-          color: color?.titleTextColor,
-        ),
-        borderColor: color?.titleTextColor,
-        prefixIconColor: color?.titleTextColor,
-        cursorColor: color?.titleTextColor,
-        prefixIcon: SpotubeIcons.search,
-      ),
-    );
-
-    useEffect(() {
-      OverlayEntry? entry;
-      WidgetsBinding.instance.addPostFrameCallback((_) {
-        if (platform == TargetPlatform.windows &&
-            kIsDesktop &&
-            !collapsed.value) {
-          entry = OverlayEntry(builder: (context) {
-            return Positioned(
-              left: 40,
-              top: 7,
-              child: searchbar,
-            );
-          });
-          Overlay.of(context).insert(entry!);
-        }
-      });
-      return () => entry?.remove();
-    }, [color?.titleTextColor, collapsed.value]);
-
-    return SafeArea(
-      child: PlatformScaffold(
-          appBar: kIsDesktop
-              ? PageWindowTitleBar(
-                  backgroundColor: color?.color,
-                  foregroundColor: color?.titleTextColor,
-                  leading: Row(
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      PlatformBackButton(color: color?.titleTextColor),
-                      const SizedBox(width: 10),
-                      searchbar,
-                    ],
-                  ),
-                )
-              : null,
-          body: RefreshIndicator(
-            onRefresh: () async {
-              await tracksSnapshot.refresh();
-            },
-            child: CustomScrollView(
-              controller: controller,
-              physics: const AlwaysScrollableScrollPhysics(),
-              slivers: [
-                SliverAppBar(
-                  actions: [
-                    if (kIsMobile)
-                      CompactSearch(
-                        onChanged: (value) => searchText.value = value,
-                        placeholder: "Search tracks...",
-                        iconColor: color?.titleTextColor,
-                      ),
-                    if (collapsed.value) ...buttons,
-                  ],
-                  floating: false,
-                  pinned: true,
-                  expandedHeight: 400,
-                  automaticallyImplyLeading: kIsMobile,
-                  leading: kIsMobile
-                      ? PlatformBackButton(color: color?.titleTextColor)
-                      : null,
-                  iconTheme: IconThemeData(color: color?.titleTextColor),
-                  primary: true,
-                  backgroundColor: color?.color,
-                  title: collapsed.value
-                      ? PlatformText.headline(
-                          title,
-                          style: TextStyle(
-                            color: color?.titleTextColor,
-                            fontWeight: FontWeight.w600,
-                          ),
-                        )
-                      : null,
-                  centerTitle: true,
-                  flexibleSpace: FlexibleSpaceBar(
-                    background: DecoratedBox(
-                      decoration: BoxDecoration(
-                        gradient: LinearGradient(
-                          colors: [
-                            color?.color ?? Colors.transparent,
-                            Theme.of(context).canvasColor,
-                          ],
-                          begin: const FractionalOffset(0, 0),
-                          end: const FractionalOffset(0, 1),
-                          tileMode: TileMode.clamp,
-                        ),
-                      ),
-                      child: Material(
-                        textStyle: PlatformTheme.of(context).textTheme!.body!,
-                        type: MaterialType.transparency,
-                        child: Padding(
-                          padding: const EdgeInsets.symmetric(
-                            horizontal: 20,
-                          ),
-                          child: Wrap(
-                            spacing: 20,
-                            runSpacing: 20,
-                            crossAxisAlignment: WrapCrossAlignment.center,
-                            alignment: WrapAlignment.center,
-                            runAlignment: WrapAlignment.center,
-                            children: [
-                              Container(
-                                constraints:
-                                    const BoxConstraints(maxHeight: 200),
-                                child: ClipRRect(
-                                  borderRadius: BorderRadius.circular(10),
-                                  child: UniversalImage(
-                                    path: titleImage,
-                                    placeholder: (context, url) {
-                                      return Assets.albumPlaceholder.image();
-                                    },
-                                  ),
-                                ),
-                              ),
-                              Column(
-                                crossAxisAlignment: CrossAxisAlignment.start,
-                                mainAxisAlignment:
-                                    MainAxisAlignment.spaceBetween,
-                                children: [
-                                  PlatformText.headline(
-                                    title,
-                                    style: TextStyle(
-                                      color: color?.titleTextColor,
-                                      fontWeight: FontWeight.w600,
-                                    ),
-                                  ),
-                                  if (description != null)
-                                    PlatformText(
-                                      description!,
-                                      style: TextStyle(
-                                        color: color?.bodyTextColor,
-                                      ),
-                                      maxLines: 2,
-                                      overflow: TextOverflow.fade,
-                                    ),
-                                  const SizedBox(height: 10),
-                                  Row(
-                                    mainAxisSize: MainAxisSize.min,
-                                    children: buttons,
-                                  ),
-                                ],
-                              )
-                            ],
-                          ),
-                        ),
-                      ),
-                    ),
-                  ),
-                ),
-                HookBuilder(
-                  builder: (context) {
-                    if (tracksSnapshot.isLoading || !tracksSnapshot.hasData) {
-                      return const ShimmerTrackTile();
-                    } else if (tracksSnapshot.hasError) {
-                      return SliverToBoxAdapter(
-                          child: PlatformText("Error ${tracksSnapshot.error}"));
-                    }
-
-                    return TracksTableView(
-                      List.from(
-                        (filteredTracks ?? []).map(
-                          (e) {
-                            if (e is Track) {
-                              return e;
-                            } else {
-                              return TypeConversionUtils.simpleTrack_X_Track(
-                                  e, album!);
-                            }
-                          },
-                        ),
-                      ),
-                      onTrackPlayButtonPressed: onPlay,
-                      playlistId: id,
-                      userPlaylist: isOwned,
-                    );
-                  },
-                )
-              ],
-            ),
-          )),
-    );
-  }
-}
diff --git a/lib/components/shared/track_table/track_collection_view/track_collection_heading.dart b/lib/components/shared/track_table/track_collection_view/track_collection_heading.dart
new file mode 100644
index 00000000..1aeb9107
--- /dev/null
+++ b/lib/components/shared/track_table/track_collection_view/track_collection_heading.dart
@@ -0,0 +1,198 @@
+import 'dart:ui';
+
+import 'package:fl_query/fl_query.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:palette_generator/palette_generator.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/collections/assets.gen.dart';
+import 'package:spotube/collections/spotube_icons.dart';
+import 'package:spotube/components/album/album_card.dart';
+import 'package:spotube/components/shared/image/universal_image.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
+
+class TrackCollectionHeading<T> extends HookConsumerWidget {
+  final String title;
+  final String? description;
+  final String titleImage;
+  final List<Widget> buttons;
+  final AlbumSimple? album;
+  final Query<List<TrackSimple>, T> tracksSnapshot;
+  final bool isPlaying;
+  final void Function([Track? currentTrack]) onPlay;
+  final void Function([Track? currentTrack]) onShuffledPlay;
+  final PaletteColor? color;
+
+  const TrackCollectionHeading({
+    Key? key,
+    required this.title,
+    required this.titleImage,
+    required this.buttons,
+    required this.tracksSnapshot,
+    required this.isPlaying,
+    required this.onPlay,
+    required this.onShuffledPlay,
+    required this.color,
+    this.description,
+    this.album,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final theme = Theme.of(context);
+
+    return LayoutBuilder(
+      builder: (context, constrains) {
+        return DecoratedBox(
+          decoration: BoxDecoration(
+            image: DecorationImage(
+              image: UniversalImage.imageProvider(titleImage),
+              fit: BoxFit.cover,
+            ),
+          ),
+          child: BackdropFilter(
+            filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
+            child: DecoratedBox(
+              decoration: BoxDecoration(
+                gradient: LinearGradient(
+                  colors: [
+                    Colors.black45,
+                    theme.colorScheme.surface,
+                  ],
+                  begin: const FractionalOffset(0, 0),
+                  end: const FractionalOffset(0, 1),
+                  tileMode: TileMode.clamp,
+                ),
+              ),
+              child: Material(
+                type: MaterialType.transparency,
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 20,
+                  ),
+                  child: SafeArea(
+                    child: Flex(
+                      direction: constrains.mdAndDown
+                          ? Axis.vertical
+                          : Axis.horizontal,
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        ConstrainedBox(
+                          constraints: const BoxConstraints(maxHeight: 200),
+                          child: ClipRRect(
+                            borderRadius: BorderRadius.circular(10),
+                            child: UniversalImage(
+                              path: titleImage,
+                              placeholder: Assets.albumPlaceholder.path,
+                            ),
+                          ),
+                        ),
+                        const SizedBox(width: 10, height: 10),
+                        Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          mainAxisSize: MainAxisSize.max,
+                          children: [
+                            Text(
+                              title,
+                              style: theme.textTheme.titleLarge!.copyWith(
+                                color: Colors.white,
+                                fontWeight: FontWeight.w600,
+                              ),
+                            ),
+                            if (album != null)
+                              Text(
+                                "${AlbumType.from(album?.albumType).formatted} • ${context.l10n.released} • ${DateTime.tryParse(
+                                  album?.releaseDate ?? "",
+                                )?.year}",
+                                style: theme.textTheme.titleMedium!.copyWith(
+                                  color: Colors.white,
+                                  fontWeight: FontWeight.normal,
+                                ),
+                              ),
+                            if (description != null)
+                              ConstrainedBox(
+                                constraints: BoxConstraints(
+                                  maxWidth: constrains.mdAndDown ? 400 : 300,
+                                ),
+                                child: Text(
+                                  description!,
+                                  style: const TextStyle(color: Colors.white),
+                                  maxLines: 2,
+                                  overflow: TextOverflow.fade,
+                                ),
+                              ),
+                            const SizedBox(height: 10),
+                            IconTheme(
+                              data: theme.iconTheme.copyWith(
+                                color: Colors.white,
+                              ),
+                              child: Row(
+                                mainAxisSize: MainAxisSize.min,
+                                children: buttons,
+                              ),
+                            ),
+                            const SizedBox(height: 10),
+                            ConstrainedBox(
+                              constraints: BoxConstraints(
+                                maxWidth: constrains.mdAndDown ? 400 : 300,
+                              ),
+                              child: Row(
+                                mainAxisSize: constrains.smAndUp
+                                    ? MainAxisSize.min
+                                    : MainAxisSize.min,
+                                children: [
+                                  Expanded(
+                                    child: FilledButton.icon(
+                                      style: ElevatedButton.styleFrom(
+                                        backgroundColor: Colors.white,
+                                        foregroundColor: Colors.black,
+                                      ),
+                                      label: Text(context.l10n.shuffle),
+                                      icon: const Icon(SpotubeIcons.shuffle),
+                                      onPressed: tracksSnapshot.data == null ||
+                                              isPlaying
+                                          ? null
+                                          : onShuffledPlay,
+                                    ),
+                                  ),
+                                  const SizedBox(width: 10),
+                                  Expanded(
+                                    child: FilledButton.icon(
+                                      style: ElevatedButton.styleFrom(
+                                        backgroundColor: color?.color,
+                                        foregroundColor: color?.bodyTextColor,
+                                      ),
+                                      onPressed: tracksSnapshot.data != null
+                                          ? onPlay
+                                          : null,
+                                      icon: Icon(
+                                        isPlaying
+                                            ? SpotubeIcons.stop
+                                            : SpotubeIcons.play,
+                                      ),
+                                      label: Text(
+                                        isPlaying
+                                            ? context.l10n.stop
+                                            : context.l10n.play,
+                                      ),
+                                    ),
+                                  ),
+                                ],
+                              ),
+                            ),
+                          ],
+                        )
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
diff --git a/lib/components/shared/track_table/track_collection_view/track_collection_view.dart b/lib/components/shared/track_table/track_collection_view/track_collection_view.dart
new file mode 100644
index 00000000..ce2a2f74
--- /dev/null
+++ b/lib/components/shared/track_table/track_collection_view/track_collection_view.dart
@@ -0,0 +1,241 @@
+import 'package:fl_query/fl_query.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:go_router/go_router.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+import 'package:spotube/collections/spotube_icons.dart';
+import 'package:spotube/components/shared/shimmers/shimmer_track_tile.dart';
+import 'package:spotube/components/shared/page_window_title_bar.dart';
+import 'package:spotube/components/shared/track_table/track_collection_view/track_collection_heading.dart';
+import 'package:spotube/components/shared/track_table/tracks_table_view.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/hooks/use_custom_status_bar_color.dart';
+import 'package:spotube/hooks/use_palette_color.dart';
+import 'package:spotube/models/logger.dart';
+import 'package:flutter/material.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/provider/authentication_provider.dart';
+import 'package:spotube/utils/platform.dart';
+import 'package:spotube/utils/type_conversion_utils.dart';
+
+class TrackCollectionView<T> extends HookConsumerWidget {
+  final logger = getLogger(TrackCollectionView);
+  final String id;
+  final String title;
+  final String? description;
+  final Query<List<TrackSimple>, T> tracksSnapshot;
+  final String titleImage;
+  final bool isPlaying;
+  final void Function([Track? currentTrack]) onPlay;
+  final void Function([Track? currentTrack]) onShuffledPlay;
+  final void Function() onAddToQueue;
+  final void Function() onShare;
+  final Widget? heartBtn;
+  final AlbumSimple? album;
+
+  final bool showShare;
+  final bool isOwned;
+  final bool bottomSpace;
+
+  final String routePath;
+  TrackCollectionView({
+    required this.title,
+    required this.id,
+    required this.tracksSnapshot,
+    required this.titleImage,
+    required this.isPlaying,
+    required this.onPlay,
+    required this.onShuffledPlay,
+    required this.onAddToQueue,
+    required this.onShare,
+    required this.routePath,
+    this.heartBtn,
+    this.album,
+    this.description,
+    this.showShare = true,
+    this.isOwned = false,
+    this.bottomSpace = false,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final theme = Theme.of(context);
+    final auth = ref.watch(AuthenticationNotifier.provider);
+    final color = usePaletteGenerator(titleImage).dominantColor;
+
+    final List<Widget> buttons = [
+      if (showShare)
+        IconButton(
+          icon: const Icon(SpotubeIcons.share),
+          onPressed: onShare,
+        ),
+      if (heartBtn != null && auth != null) heartBtn!,
+      IconButton(
+        onPressed: isPlaying
+            ? null
+            : tracksSnapshot.data != null
+                ? onAddToQueue
+                : null,
+        icon: const Icon(
+          SpotubeIcons.queueAdd,
+        ),
+      ),
+    ];
+
+    final controller = useScrollController();
+
+    final collapsed = useState(false);
+
+    useCustomStatusBarColor(
+      Colors.transparent,
+      GoRouter.of(context).location == routePath,
+    );
+
+    useEffect(() {
+      listener() {
+        if (controller.position.pixels >= 390 && !collapsed.value) {
+          collapsed.value = true;
+        } else if (controller.position.pixels < 390 && collapsed.value) {
+          collapsed.value = false;
+        }
+      }
+
+      controller.addListener(listener);
+
+      return () => controller.removeListener(listener);
+    }, [collapsed.value]);
+
+    return Scaffold(
+        appBar: kIsDesktop
+            ? const PageWindowTitleBar(
+                backgroundColor: Colors.transparent,
+                foregroundColor: Colors.white,
+                leadingWidth: 400,
+                leading: Align(
+                  alignment: Alignment.centerLeft,
+                  child: BackButton(color: Colors.white),
+                ),
+              )
+            : null,
+        extendBodyBehindAppBar: kIsDesktop,
+        body: RefreshIndicator(
+          onRefresh: () async {
+            await tracksSnapshot.refresh();
+          },
+          child: CustomScrollView(
+            controller: controller,
+            physics: const AlwaysScrollableScrollPhysics(),
+            slivers: [
+              SliverAppBar(
+                actions: [
+                  AnimatedScale(
+                    duration: const Duration(milliseconds: 200),
+                    scale: collapsed.value ? 1 : 0,
+                    child: Row(
+                      mainAxisSize: MainAxisSize.min,
+                      children: buttons,
+                    ),
+                  ),
+                  AnimatedScale(
+                    duration: const Duration(milliseconds: 200),
+                    scale: collapsed.value ? 1 : 0,
+                    child: IconButton(
+                      tooltip: context.l10n.shuffle,
+                      icon: const Icon(SpotubeIcons.shuffle),
+                      onPressed: isPlaying ? null : onShuffledPlay,
+                    ),
+                  ),
+                  AnimatedScale(
+                    duration: const Duration(milliseconds: 200),
+                    scale: collapsed.value ? 1 : 0,
+                    child: ElevatedButton(
+                      style: ElevatedButton.styleFrom(
+                        shape: const CircleBorder(),
+                        backgroundColor: theme.colorScheme.inversePrimary,
+                      ),
+                      onPressed: tracksSnapshot.data != null ? onPlay : null,
+                      child: Icon(
+                          isPlaying ? SpotubeIcons.stop : SpotubeIcons.play),
+                    ),
+                  ),
+                ],
+                floating: false,
+                pinned: true,
+                expandedHeight: 400,
+                automaticallyImplyLeading: kIsMobile,
+                leading:
+                    kIsMobile ? const BackButton(color: Colors.white) : null,
+                iconTheme: IconThemeData(color: color?.titleTextColor),
+                primary: true,
+                backgroundColor: color?.color.withOpacity(.8),
+                title: collapsed.value
+                    ? Text(
+                        title,
+                        style: theme.textTheme.titleMedium!.copyWith(
+                          color: color?.titleTextColor,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      )
+                    : null,
+                centerTitle: true,
+                flexibleSpace: FlexibleSpaceBar(
+                  background: TrackCollectionHeading<T>(
+                    color: color,
+                    title: title,
+                    description: description,
+                    titleImage: titleImage,
+                    isPlaying: isPlaying,
+                    onPlay: onPlay,
+                    onShuffledPlay: onShuffledPlay,
+                    tracksSnapshot: tracksSnapshot,
+                    buttons: buttons,
+                    album: album,
+                  ),
+                ),
+              ),
+              HookBuilder(
+                builder: (context) {
+                  if (tracksSnapshot.isLoading || !tracksSnapshot.hasData) {
+                    return const ShimmerTrackTile();
+                  } else if (tracksSnapshot.hasError) {
+                    return SliverToBoxAdapter(
+                      child: Text(
+                        context.l10n.error(tracksSnapshot.error ?? ""),
+                      ),
+                    );
+                  }
+
+                  return TracksTableView(
+                    (tracksSnapshot.data ?? []).map(
+                      (track) {
+                        if (track is Track) {
+                          return track;
+                        } else {
+                          return TypeConversionUtils.simpleTrack_X_Track(
+                            track,
+                            album!,
+                          );
+                        }
+                      },
+                    ).toList(),
+                    onTrackPlayButtonPressed: onPlay,
+                    playlistId: id,
+                    userPlaylist: isOwned,
+                    onFiltering: () {
+                      // scroll the flexible space
+                      // to allow more space for search results
+                      controller.animateTo(
+                        330,
+                        duration: const Duration(milliseconds: 200),
+                        curve: Curves.easeInOut,
+                      );
+                    },
+                  );
+                },
+              )
+            ],
+          ),
+        ));
+  }
+}
diff --git a/lib/components/shared/track_table/track_options.dart b/lib/components/shared/track_table/track_options.dart
new file mode 100644
index 00000000..13c1e5d5
--- /dev/null
+++ b/lib/components/shared/track_table/track_options.dart
@@ -0,0 +1,303 @@
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/collections/spotube_icons.dart';
+import 'package:spotube/components/library/user_local_tracks.dart';
+import 'package:spotube/components/shared/adaptive/adaptive_pop_sheet_list.dart';
+import 'package:spotube/components/shared/dialogs/playlist_add_track_dialog.dart';
+import 'package:spotube/components/shared/dialogs/track_details_dialog.dart';
+import 'package:spotube/components/shared/heart_button.dart';
+import 'package:spotube/components/shared/image/universal_image.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/models/local_track.dart';
+import 'package:spotube/provider/authentication_provider.dart';
+import 'package:spotube/provider/blacklist_provider.dart';
+import 'package:spotube/provider/download_manager_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/services/mutations/mutations.dart';
+import 'package:spotube/utils/type_conversion_utils.dart';
+
+enum TrackOptionValue {
+  share,
+  addToPlaylist,
+  addToQueue,
+  removeFromPlaylist,
+  removeFromQueue,
+  blacklist,
+  delete,
+  playNext,
+  favorite,
+  details,
+  download,
+}
+
+class TrackOptions extends HookConsumerWidget {
+  final Track track;
+  final bool userPlaylist;
+  final String? playlistId;
+  const TrackOptions({
+    Key? key,
+    required this.track,
+    this.userPlaylist = false,
+    this.playlistId,
+  }) : super(key: key);
+
+  void actionShare(BuildContext context, Track track) {
+    final data = "https://open.spotify.com/track/${track.id}";
+    Clipboard.setData(ClipboardData(text: data)).then((_) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          width: 300,
+          behavior: SnackBarBehavior.floating,
+          content: Text(
+            context.l10n.copied_to_clipboard(data),
+            textAlign: TextAlign.center,
+          ),
+        ),
+      );
+    });
+  }
+
+  void actionAddToPlaylist(BuildContext context, Track track) {
+    showDialog(
+      context: context,
+      builder: (context) => PlaylistAddTrackDialog(
+        tracks: [track],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final playlist = ref.watch(ProxyPlaylistNotifier.provider);
+    final playback = ref.watch(ProxyPlaylistNotifier.notifier);
+    final scaffoldMessenger = ScaffoldMessenger.of(context);
+    final auth = ref.watch(AuthenticationNotifier.provider);
+    ref.watch(downloadManagerProvider);
+    final downloadManager = ref.watch(downloadManagerProvider.notifier);
+    final blacklist = ref.watch(BlackListNotifier.provider);
+
+    final favorites = useTrackToggleLike(track, ref);
+
+    final isBlackListed = useMemoized(
+      () => blacklist.contains(
+        BlacklistedElement.track(
+          track.id!,
+          track.name!,
+        ),
+      ),
+      [blacklist, track],
+    );
+
+    final removingTrack = useState<String?>(null);
+    final removeTrack = useMutations.playlist.removeTrackOf(
+      ref,
+      playlistId ?? "",
+    );
+
+    return ListTileTheme(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(10),
+      ),
+      child: AdaptivePopSheetList<TrackOptionValue>(
+        onSelected: (value) async {
+          switch (value) {
+            case TrackOptionValue.delete:
+              await File((track as LocalTrack).path).delete();
+              ref.refresh(localTracksProvider);
+              break;
+            case TrackOptionValue.addToQueue:
+              await playback.addTrack(track);
+              if (context.mounted) {
+                scaffoldMessenger.showSnackBar(
+                  SnackBar(
+                    content: Text(
+                      context.l10n.added_track_to_queue(track.name!),
+                    ),
+                  ),
+                );
+              }
+              break;
+            case TrackOptionValue.playNext:
+              playback.addTracksAtFirst([track]);
+              scaffoldMessenger.showSnackBar(
+                SnackBar(
+                  content: Text(
+                    context.l10n.track_will_play_next(track.name!),
+                  ),
+                ),
+              );
+              break;
+            case TrackOptionValue.removeFromQueue:
+              playback.removeTrack(track.id!);
+              scaffoldMessenger.showSnackBar(
+                SnackBar(
+                  content: Text(
+                    context.l10n.removed_track_from_queue(
+                      track.name!,
+                    ),
+                  ),
+                ),
+              );
+              break;
+            case TrackOptionValue.favorite:
+              favorites.toggleTrackLike.mutate(favorites.isLiked);
+              break;
+            case TrackOptionValue.addToPlaylist:
+              actionAddToPlaylist(context, track);
+              break;
+            case TrackOptionValue.removeFromPlaylist:
+              removingTrack.value = track.uri;
+              removeTrack.mutate(track.uri!);
+              break;
+            case TrackOptionValue.blacklist:
+              if (isBlackListed) {
+                ref.read(BlackListNotifier.provider.notifier).remove(
+                      BlacklistedElement.track(track.id!, track.name!),
+                    );
+              } else {
+                ref.read(BlackListNotifier.provider.notifier).add(
+                      BlacklistedElement.track(track.id!, track.name!),
+                    );
+              }
+              break;
+            case TrackOptionValue.share:
+              actionShare(context, track);
+              break;
+            case TrackOptionValue.details:
+              showDialog(
+                context: context,
+                builder: (context) => TrackDetailsDialog(track: track),
+              );
+              break;
+            case TrackOptionValue.download:
+              await downloadManager.enqueue(track);
+              break;
+          }
+        },
+        icon: const Icon(SpotubeIcons.moreHorizontal),
+        headings: [
+          ListTile(
+            dense: true,
+            leading: AspectRatio(
+              aspectRatio: 1,
+              child: ClipRRect(
+                borderRadius: BorderRadius.circular(10),
+                child: UniversalImage(
+                  path: TypeConversionUtils.image_X_UrlString(
+                      track.album!.images,
+                      placeholder: ImagePlaceholder.albumArt),
+                  fit: BoxFit.cover,
+                ),
+              ),
+            ),
+            title: Text(
+              track.name!,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: Theme.of(context).textTheme.titleMedium,
+            ),
+            subtitle: Align(
+              alignment: Alignment.centerLeft,
+              child: TypeConversionUtils.artists_X_ClickableArtists(
+                track.artists!,
+              ),
+            ),
+          ),
+        ],
+        children: switch (track.runtimeType) {
+          LocalTrack => [
+              PopSheetEntry(
+                value: TrackOptionValue.delete,
+                leading: const Icon(SpotubeIcons.trash),
+                title: Text(context.l10n.delete),
+              )
+            ],
+          _ => [
+              if (!playlist.containsTrack(track)) ...[
+                PopSheetEntry(
+                  value: TrackOptionValue.addToQueue,
+                  leading: const Icon(SpotubeIcons.queueAdd),
+                  title: Text(context.l10n.add_to_queue),
+                ),
+                PopSheetEntry(
+                  value: TrackOptionValue.playNext,
+                  leading: const Icon(SpotubeIcons.lightning),
+                  title: Text(context.l10n.play_next),
+                ),
+              ] else
+                PopSheetEntry(
+                  value: TrackOptionValue.removeFromQueue,
+                  enabled: playlist.activeTrack?.id != track.id,
+                  leading: const Icon(SpotubeIcons.queueRemove),
+                  title: Text(context.l10n.remove_from_queue),
+                ),
+              if (favorites.me.hasData)
+                PopSheetEntry(
+                  value: TrackOptionValue.favorite,
+                  leading: favorites.isLiked
+                      ? const Icon(
+                          SpotubeIcons.heartFilled,
+                          color: Colors.pink,
+                        )
+                      : const Icon(SpotubeIcons.heart),
+                  title: Text(
+                    favorites.isLiked
+                        ? context.l10n.remove_from_favorites
+                        : context.l10n.save_as_favorite,
+                  ),
+                ),
+              if (auth != null)
+                PopSheetEntry(
+                  value: TrackOptionValue.addToPlaylist,
+                  leading: const Icon(SpotubeIcons.playlistAdd),
+                  title: Text(context.l10n.add_to_playlist),
+                ),
+              if (userPlaylist && auth != null)
+                PopSheetEntry(
+                  value: TrackOptionValue.removeFromPlaylist,
+                  leading: (removeTrack.isMutating || !removeTrack.hasData) &&
+                          removingTrack.value == track.uri
+                      ? const CircularProgressIndicator()
+                      : const Icon(SpotubeIcons.removeFilled),
+                  title: Text(context.l10n.remove_from_playlist),
+                ),
+              PopSheetEntry(
+                value: TrackOptionValue.download,
+                enabled: downloadManager.activeItem?.id != track.id!,
+                leading: downloadManager.activeItem?.id == track.id!
+                    ? const CircularProgressIndicator()
+                    : const Icon(SpotubeIcons.download),
+                title: Text(context.l10n.download_track),
+              ),
+              PopSheetEntry(
+                value: TrackOptionValue.blacklist,
+                leading: const Icon(SpotubeIcons.playlistRemove),
+                iconColor: !isBlackListed ? Colors.red[400] : null,
+                textColor: !isBlackListed ? Colors.red[400] : null,
+                title: Text(
+                  isBlackListed
+                      ? context.l10n.remove_from_blacklist
+                      : context.l10n.add_to_blacklist,
+                ),
+              ),
+              PopSheetEntry(
+                value: TrackOptionValue.share,
+                leading: const Icon(SpotubeIcons.share),
+                title: Text(context.l10n.share),
+              ),
+              PopSheetEntry(
+                value: TrackOptionValue.details,
+                leading: const Icon(SpotubeIcons.info),
+                title: Text(context.l10n.details),
+              ),
+            ]
+        },
+      ),
+    );
+  }
+}
diff --git a/lib/components/shared/track_table/track_tile.dart b/lib/components/shared/track_table/track_tile.dart
index f82bb9f1..4953a6ab 100644
--- a/lib/components/shared/track_table/track_tile.dart
+++ b/lib/components/shared/track_table/track_tile.dart
@@ -1,414 +1,231 @@
-import 'package:auto_size_text/auto_size_text.dart';
-import 'package:flutter/material.dart' hide Action;
-import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
-import 'package:spotify/spotify.dart' hide Image;
-import 'package:spotube/collections/assets.gen.dart';
+import 'package:spotify/spotify.dart';
 import 'package:spotube/collections/spotube_icons.dart';
-import 'package:spotube/components/shared/adaptive/adaptive_popup_menu_button.dart';
-import 'package:spotube/components/shared/heart_button.dart';
-import 'package:spotube/components/shared/links/link_text.dart';
+import 'package:spotube/components/shared/hover_builder.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
-import 'package:spotube/components/root/sidebar.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
-import 'package:spotube/models/logger.dart';
-import 'package:spotube/provider/authentication_provider.dart';
+import 'package:spotube/components/shared/links/link_text.dart';
+import 'package:spotube/components/shared/track_table/track_options.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/duration.dart';
+import 'package:spotube/models/local_track.dart';
 import 'package:spotube/provider/blacklist_provider.dart';
-import 'package:spotube/provider/spotify_provider.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
-import 'package:spotube/services/mutations/mutations.dart';
-
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 class TrackTile extends HookConsumerWidget {
-  final PlaylistQueue? playlist;
-  final MapEntry<int, Track> track;
-  final String duration;
-  final void Function(Track currentTrack)? onTrackPlayButtonPressed;
-  final logger = getLogger(TrackTile);
+  /// [index] will not be shown if null
+  final int? index;
+  final Track track;
+  final bool selected;
+  final ValueChanged<bool?>? onChanged;
+  final VoidCallback? onTap;
+  final VoidCallback? onLongPress;
   final bool userPlaylist;
-  // null playlistId indicates its not inside a playlist
   final String? playlistId;
 
-  final bool showAlbum;
+  final List<Widget>? leadingActions;
 
-  final bool isActive;
-
-  final bool isChecked;
-  final bool showCheck;
-
-  final bool isLocal;
-  final void Function(bool?)? onCheckChange;
-
-  TrackTile(
-    this.playlist, {
-    required this.track,
-    required this.duration,
-    required this.isActive,
-    this.playlistId,
-    this.userPlaylist = false,
-    this.onTrackPlayButtonPressed,
-    this.showAlbum = true,
-    this.isChecked = false,
-    this.showCheck = false,
-    this.isLocal = false,
-    this.onCheckChange,
+  const TrackTile({
     Key? key,
+    this.index,
+    required this.track,
+    this.selected = false,
+    this.onTap,
+    this.onLongPress,
+    this.onChanged,
+    this.userPlaylist = false,
+    this.playlistId,
+    this.leadingActions,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context, ref) {
-    final breakpoint = useBreakpoints();
-    final isBlackListed = ref.watch(
-      BlackListNotifier.provider.select(
-        (blacklist) => blacklist.contains(
-          BlacklistedElement.track(track.value.id!, track.value.name!),
+    final playlist = ref.watch(ProxyPlaylistNotifier.provider);
+    final theme = Theme.of(context);
+
+    final blacklist = ref.watch(BlackListNotifier.provider);
+
+    final isBlackListed = useMemoized(
+      () => blacklist.contains(
+        BlacklistedElement.track(
+          track.id!,
+          track.name!,
         ),
       ),
-    );
-    final auth = ref.watch(AuthenticationNotifier.provider);
-    final spotify = ref.watch(spotifyProvider);
-    final playlistQueueNotifier = ref.watch(PlaylistQueueNotifier.notifier);
-
-    final removingTrack = useState<String?>(null);
-    final removeTrack = useMutations.playlist.removeTrackOf(
-      ref,
-      playlistId ?? "",
+      [blacklist, track],
     );
 
-    void actionShare(Track track) {
-      final data = "https://open.spotify.com/track/${track.id}";
-      Clipboard.setData(ClipboardData(text: data)).then((_) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(
-            width: 300,
-            behavior: SnackBarBehavior.floating,
-            content: PlatformText(
-              "Copied $data to clipboard",
-              textAlign: TextAlign.center,
-            ),
-          ),
-        );
-      });
-    }
+    final isPlaying = track.id == playlist.activeTrack?.id;
 
-    Future<void> actionAddToPlaylist() async {
-      showPlatformAlertDialog(context, builder: (context) {
-        return FutureBuilder<Iterable<PlaylistSimple>>(
-            future: spotify.playlists.me.all().then((playlists) async {
-              final me = await spotify.me.get();
-              return playlists.where((playlist) =>
-                  playlist.owner?.id != null && playlist.owner!.id == me.id);
-            }),
-            builder: (context, snapshot) {
-              return HookBuilder(builder: (context) {
-                final playlistsCheck = useState(<String, bool>{});
-                return PlatformAlertDialog(
-                  macosAppIcon: Sidebar.brandLogo(),
-                  title: PlatformText(
-                    "Add `${track.value.name}` to following Playlists",
-                    style: const TextStyle(
-                      fontSize: 18,
-                      fontWeight: FontWeight.bold,
+    return LayoutBuilder(builder: (context, constrains) {
+      return HoverBuilder(
+        permanentState: isPlaying || constrains.smAndDown ? true : null,
+        builder: (context, isHovering) {
+          return ListTile(
+            selected: isPlaying,
+            onTap: onTap,
+            onLongPress: onLongPress,
+            enabled: !isBlackListed,
+            contentPadding: EdgeInsets.zero,
+            tileColor: isBlackListed ? theme.colorScheme.errorContainer : null,
+            horizontalTitleGap: 12,
+            leadingAndTrailingTextStyle: theme.textTheme.bodyMedium,
+            leading: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                ...?leadingActions,
+                if (index != null && onChanged == null && constrains.mdAndUp)
+                  SizedBox(
+                    width: 34,
+                    child: Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 6),
+                      child: Text(
+                        '$index',
+                        maxLines: 1,
+                        style: theme.textTheme.bodySmall,
+                        textAlign: TextAlign.center,
+                      ),
                     ),
+                  )
+                else if (constrains.smAndDown)
+                  const SizedBox(width: 16),
+                if (onChanged != null)
+                  Checkbox.adaptive(
+                    value: selected,
+                    onChanged: onChanged,
                   ),
-                  secondaryActions: [
-                    PlatformFilledButton(
-                      isSecondary: true,
-                      child: const PlatformText("Cancel"),
-                      onPressed: () => Navigator.pop(context),
+                Stack(
+                  children: [
+                    ClipRRect(
+                      borderRadius: BorderRadius.circular(4),
+                      child: AspectRatio(
+                        aspectRatio: 1,
+                        child: UniversalImage(
+                          path: TypeConversionUtils.image_X_UrlString(
+                            track.album?.images,
+                            placeholder: ImagePlaceholder.albumArt,
+                          ),
+                          fit: BoxFit.cover,
+                        ),
+                      ),
+                    ),
+                    Positioned.fill(
+                      child: AnimatedContainer(
+                        duration: const Duration(milliseconds: 300),
+                        decoration: BoxDecoration(
+                          borderRadius: BorderRadius.circular(4),
+                          color: isHovering
+                              ? Colors.black.withOpacity(0.4)
+                              : Colors.transparent,
+                        ),
+                      ),
+                    ),
+                    Positioned.fill(
+                      child: Center(
+                        child: IconTheme(
+                          data: theme.iconTheme
+                              .copyWith(size: 26, color: Colors.white),
+                          child: AnimatedSwitcher(
+                            duration: const Duration(milliseconds: 300),
+                            child: !isHovering
+                                ? const SizedBox.shrink()
+                                : isPlaying && playlist.isFetching
+                                    ? const SizedBox(
+                                        width: 26,
+                                        height: 26,
+                                        child: CircularProgressIndicator(
+                                          strokeWidth: 1.5,
+                                          color: Colors.white,
+                                        ),
+                                      )
+                                    : isPlaying
+                                        ? Icon(
+                                            SpotubeIcons.pause,
+                                            color: theme.colorScheme.primary,
+                                          )
+                                        : const Icon(SpotubeIcons.play),
+                          ),
+                        ),
+                      ),
                     ),
                   ],
-                  primaryActions: [
-                    PlatformFilledButton(
-                      child: const PlatformText("Add"),
-                      onPressed: () async {
-                        final selectedPlaylists = playlistsCheck.value.entries
-                            .where((entry) => entry.value)
-                            .map((entry) => entry.key);
-
-                        await Future.wait(
-                          selectedPlaylists.map(
-                            (playlistId) => spotify.playlists
-                                .addTrack(track.value.uri!, playlistId),
-                          ),
-                        ).then((_) => Navigator.pop(context));
-                      },
-                    )
-                  ],
-                  content: SizedBox(
-                    height: 300,
-                    width: 300,
-                    child: !snapshot.hasData
-                        ? const Center(
-                            child: PlatformCircularProgressIndicator())
-                        : ListView.builder(
-                            shrinkWrap: true,
-                            itemCount: snapshot.data!.length,
-                            itemBuilder: (context, index) {
-                              final playlist = snapshot.data!.elementAt(index);
-                              return PlatformCheckbox(
-                                label: PlatformText(playlist.name!),
-                                value:
-                                    playlistsCheck.value[playlist.id] ?? false,
-                                onChanged: (val) {
-                                  playlistsCheck.value = {
-                                    ...playlistsCheck.value,
-                                    playlist.id!: val == true
-                                  };
-                                },
-                              );
-                            },
-                          ),
-                  ),
-                );
-              });
-            });
-      });
-    }
-
-    final String thumbnailUrl = TypeConversionUtils.image_X_UrlString(
-      track.value.album?.images,
-      placeholder: ImagePlaceholder.albumArt,
-      index: track.value.album?.images?.length == 1 ? 0 : 2,
-    );
-
-    final toggler = useTrackToggleLike(track.value, ref);
-
-    return AnimatedContainer(
-      duration: const Duration(milliseconds: 500),
-      decoration: BoxDecoration(
-        color: isBlackListed
-            ? Colors.red[100]
-            : isActive
-                ? Theme.of(context).popupMenuTheme.color
-                : Colors.transparent,
-        borderRadius: BorderRadius.circular(isActive ? 10 : 0),
-      ),
-      child: Material(
-        type: MaterialType.transparency,
-        textStyle: PlatformTheme.of(context).textTheme!.body!,
-        child: Row(
-          children: [
-            if (showCheck)
-              PlatformCheckbox(
-                value: isChecked,
-                onChanged: (s) => onCheckChange?.call(s),
-              )
-            else
-              SizedBox(
-                height: 20,
-                width: 35,
-                child: Center(
-                  child: AutoSizeText(
-                    (track.key + 1).toString(),
+                ),
+              ],
+            ),
+            title: Row(
+              children: [
+                Expanded(
+                  flex: 6,
+                  child: Text(
+                    track.name!,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
                   ),
                 ),
-              ),
-            Padding(
-              padding: EdgeInsets.symmetric(
-                horizontal: breakpoint.isMoreThan(Breakpoints.md) ? 8.0 : 0,
-                vertical: 8.0,
-              ),
-              child: ClipRRect(
-                borderRadius: const BorderRadius.all(Radius.circular(5)),
-                child: UniversalImage(
-                  path: thumbnailUrl,
-                  height: 40,
-                  width: 40,
-                  placeholder: (context, url) {
-                    return Assets.albumPlaceholder.image(
-                      height: 40,
-                      width: 40,
-                    );
-                  },
-                ),
-              ),
-            ),
-            Padding(
-              padding: const EdgeInsets.all(8.0),
-              child: PlatformIconButton(
-                icon: Icon(
-                  playlist?.activeTrack.id == track.value.id
-                      ? SpotubeIcons.pause
-                      : SpotubeIcons.play,
-                  color: Colors.white,
-                ),
-                backgroundColor: PlatformTheme.of(context).primaryColor,
-                hoverColor:
-                    PlatformTheme.of(context).primaryColor?.withOpacity(0.5),
-                onPressed: !isBlackListed
-                    ? () => onTrackPlayButtonPressed?.call(
-                          track.value,
-                        )
-                    : null,
-              ),
-            ),
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Row(
-                    mainAxisSize: MainAxisSize.min,
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Flexible(
-                        child: PlatformText(
-                          track.value.name ?? "",
-                          style: TextStyle(
-                            fontWeight: FontWeight.bold,
-                            fontSize: breakpoint.isSm ? 14 : 17,
-                          ),
+                if (constrains.mdAndUp) ...[
+                  const SizedBox(width: 8),
+                  Expanded(
+                    flex: 4,
+                    child: switch (track.runtimeType) {
+                      LocalTrack => Text(
+                          track.album!.name!,
+                          maxLines: 1,
                           overflow: TextOverflow.ellipsis,
                         ),
-                      ),
-                      if (isBlackListed) ...[
-                        const SizedBox(width: 5),
-                        PlatformText(
-                          "Blacklisted",
-                          style: TextStyle(
-                            color: Colors.red[400],
-                            fontSize: 12,
-                            fontWeight: FontWeight.bold,
+                      _ => Align(
+                          alignment: Alignment.centerLeft,
+                          child: LinkText(
+                            track.album!.name!,
+                            "/album/${track.album?.id}",
+                            extra: track.album,
+                            push: true,
+                            overflow: TextOverflow.ellipsis,
                           ),
-                        ),
-                      ]
-                    ],
-                  ),
-                  isLocal
-                      ? PlatformText(
-                          TypeConversionUtils.artists_X_String<Artist>(
-                              track.value.artists ?? []),
                         )
-                      : TypeConversionUtils.artists_X_ClickableArtists(
-                          track.value.artists ?? [],
-                          textStyle: TextStyle(
-                              fontSize: breakpoint.isLessThan(Breakpoints.lg)
-                                  ? 12
-                                  : 14)),
-                ],
-              ),
-            ),
-            if (breakpoint.isMoreThan(Breakpoints.md) && showAlbum)
-              Expanded(
-                child: isLocal
-                    ? PlatformText(track.value.album?.name ?? "")
-                    : LinkText(
-                        track.value.album!.name!,
-                        "/album/${track.value.album?.id}",
-                        extra: track.value.album,
-                        overflow: TextOverflow.ellipsis,
-                      ),
-              ),
-            if (!breakpoint.isSm) ...[
-              const SizedBox(width: 10),
-              PlatformText(duration),
-            ],
-            const SizedBox(width: 10),
-            if (!isLocal)
-              AdaptiveActions(
-                actions: [
-                  if (!playlistQueueNotifier.isTrackOnQueue(track.value))
-                    Action(
-                      icon: const Icon(SpotubeIcons.queueAdd),
-                      text: const PlatformText("Add to queue"),
-                      onPressed: () {
-                        playlistQueueNotifier.add([track.value]);
-                        ScaffoldMessenger.of(context).showSnackBar(
-                          SnackBar(
-                            content: PlatformText(
-                                "Added ${track.value.name} to queue"),
-                          ),
-                        );
-                      },
-                    )
-                  else
-                    Action(
-                      icon: const Icon(SpotubeIcons.queueRemove),
-                      text: const PlatformText("Remove from queue"),
-                      onPressed: () {
-                        playlistQueueNotifier.remove([track.value]);
-                        ScaffoldMessenger.of(context).showSnackBar(
-                          SnackBar(
-                            content: PlatformText(
-                                "Removed ${track.value.name} from queue"),
-                          ),
-                        );
-                      },
-                    ),
-                  if (toggler.item3.hasData)
-                    Action(
-                      icon: toggler.item1
-                          ? const Icon(
-                              SpotubeIcons.heartFilled,
-                              color: Colors.pink,
-                            )
-                          : const Icon(SpotubeIcons.heart),
-                      text: const PlatformText("Save as favorite"),
-                      onPressed: () {
-                        toggler.item2.mutate(toggler.item1);
-                      },
-                    ),
-                  if (auth != null)
-                    Action(
-                      icon: const Icon(SpotubeIcons.playlistAdd),
-                      text: const PlatformText("Add To playlist"),
-                      onPressed: actionAddToPlaylist,
-                    ),
-                  if (userPlaylist && auth != null)
-                    Action(
-                      icon: (removeTrack.isMutating || !removeTrack.hasData) &&
-                              removingTrack.value == track.value.uri
-                          ? const Center(
-                              child: PlatformCircularProgressIndicator(),
-                            )
-                          : const Icon(SpotubeIcons.removeFilled),
-                      text: const PlatformText("Remove from playlist"),
-                      onPressed: () {
-                        removingTrack.value = track.value.uri;
-                        removeTrack.mutate(track.value.uri!);
-                      },
-                    ),
-                  Action(
-                    icon: const Icon(SpotubeIcons.share),
-                    text: const PlatformText("Share"),
-                    onPressed: () {
-                      actionShare(track.value);
                     },
                   ),
-                  Action(
-                    icon: Icon(
-                      SpotubeIcons.playlistRemove,
-                      color: isBlackListed ? Colors.white : Colors.red[400],
-                    ),
-                    backgroundColor: isBlackListed ? Colors.red[400] : null,
-                    text: PlatformText(
-                      "${isBlackListed ? "Remove from" : "Add to"} blacklist",
-                      style: TextStyle(
-                        color: isBlackListed ? Colors.white : Colors.red[400],
+                ],
+              ],
+            ),
+            subtitle: Align(
+              alignment: Alignment.centerLeft,
+              child: track is LocalTrack
+                  ? Text(
+                      TypeConversionUtils.artists_X_String<Artist>(
+                        track.artists ?? [],
+                      ),
+                    )
+                  : ClipRect(
+                      child: ConstrainedBox(
+                        constraints: const BoxConstraints(maxHeight: 40),
+                        child: TypeConversionUtils.artists_X_ClickableArtists(
+                          track.artists ?? [],
+                        ),
                       ),
                     ),
-                    onPressed: () {
-                      if (isBlackListed) {
-                        ref.read(BlackListNotifier.provider.notifier).remove(
-                              BlacklistedElement.track(
-                                  track.value.id!, track.value.name!),
-                            );
-                      } else {
-                        ref.read(BlackListNotifier.provider.notifier).add(
-                              BlacklistedElement.track(
-                                  track.value.id!, track.value.name!),
-                            );
-                      }
-                    },
-                  )
-                ],
-              ),
-          ],
-        ),
-      ),
-    );
+            ),
+            trailing: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const SizedBox(width: 8),
+                Text(
+                  Duration(milliseconds: track.durationMs ?? 0)
+                      .toHumanReadableString(),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                ),
+                TrackOptions(
+                  track: track,
+                  playlistId: playlistId,
+                  userPlaylist: userPlaylist,
+                ),
+              ],
+            ),
+          );
+        },
+      );
+    });
   }
 }
diff --git a/lib/components/shared/track_table/tracks_table_view.dart b/lib/components/shared/track_table/tracks_table_view.dart
index d2ee91ce..d41d4738 100644
--- a/lib/components/shared/track_table/tracks_table_view.dart
+++ b/lib/components/shared/track_table/tracks_table_view.dart
@@ -1,20 +1,25 @@
+import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:fuzzywuzzy/fuzzywuzzy.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotify/spotify.dart';
 import 'package:spotube/collections/spotube_icons.dart';
+import 'package:spotube/components/shared/adaptive/adaptive_pop_sheet_list.dart';
 import 'package:spotube/components/shared/dialogs/confirm_download_dialog.dart';
 import 'package:spotube/components/shared/dialogs/playlist_add_track_dialog.dart';
+import 'package:spotube/components/shared/expandable_search/expandable_search.dart';
 import 'package:spotube/components/shared/fallbacks/not_found.dart';
 import 'package:spotube/components/shared/sort_tracks_dropdown.dart';
 import 'package:spotube/components/shared/track_table/track_tile.dart';
 import 'package:spotube/components/library/user_local_tracks.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
+
+import 'package:spotube/provider/download_manager_provider.dart';
 import 'package:spotube/provider/blacklist_provider.dart';
-import 'package:spotube/provider/downloader_provider.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
-import 'package:spotube/utils/primitive_utils.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/utils/service_utils.dart';
 
 final trackCollectionSortState =
@@ -28,10 +33,14 @@ class TracksTableView extends HookConsumerWidget {
   final bool isSliver;
 
   final Widget? heading;
+
+  final VoidCallback? onFiltering;
+
   const TracksTableView(
     this.tracks, {
     Key? key,
     this.onTrackPlayButtonPressed,
+    this.onFiltering,
     this.userPlaylist = false,
     this.playlistId,
     this.heading,
@@ -40,22 +49,44 @@ class TracksTableView extends HookConsumerWidget {
 
   @override
   Widget build(context, ref) {
-    final playlist = ref.watch(PlaylistQueueNotifier.provider);
-    final downloader = ref.watch(downloaderProvider);
+    final mediaQuery = MediaQuery.of(context);
+
+    ref.watch(ProxyPlaylistNotifier.provider);
+    final playback = ref.watch(ProxyPlaylistNotifier.notifier);
+    ref.watch(downloadManagerProvider);
+    final downloader = ref.watch(downloadManagerProvider.notifier);
     TextStyle tableHeadStyle =
         const TextStyle(fontWeight: FontWeight.bold, fontSize: 16);
 
-    final breakpoint = useBreakpoints();
-
     final selected = useState<List<String>>([]);
     final showCheck = useState<bool>(false);
     final sortBy = ref.watch(trackCollectionSortState(playlistId ?? ''));
 
+    final isFiltering = useState<bool>(false);
+
+    final searchController = useTextEditingController();
+    final searchFocus = useFocusNode();
+
+    // this will trigger update on each change in searchController
+    useValueListenable(searchController);
+
+    final filteredTracks = useMemoized(() {
+      if (searchController.text.isEmpty) {
+        return tracks;
+      }
+      return tracks
+          .map((e) => (weightedRatio(e.name!, searchController.text), e))
+          .sorted((a, b) => b.$1.compareTo(a.$1))
+          .where((e) => e.$1 > 50)
+          .map((e) => e.$2)
+          .toList();
+    }, [tracks, searchController.text]);
+
     final sortedTracks = useMemoized(
       () {
-        return ServiceUtils.sortTracks(tracks, sortBy);
+        return ServiceUtils.sortTracks(filteredTracks, sortBy);
       },
-      [tracks, sortBy],
+      [filteredTracks, sortBy],
     );
 
     final selectedTracks = useMemoized(
@@ -65,202 +96,259 @@ class TracksTableView extends HookConsumerWidget {
       [sortedTracks],
     );
 
-    final children = sortedTracks.isEmpty
+    final children = tracks.isEmpty
         ? [const NotFound(vertical: true)]
         : [
             if (heading != null) heading!,
-            Row(
-              children: [
-                PlatformCheckbox(
-                  value: selected.value.length == sortedTracks.length,
-                  onChanged: (checked) {
-                    if (!showCheck.value) showCheck.value = true;
-                    if (checked == true) {
-                      selected.value = sortedTracks.map((s) => s.id!).toList();
-                    } else {
-                      selected.value = [];
-                      showCheck.value = false;
-                    }
-                  },
-                ),
-                Padding(
-                  padding: const EdgeInsets.all(8.0),
-                  child: PlatformText(
-                    "#",
-                    textAlign: TextAlign.center,
-                    style: tableHeadStyle,
+            LayoutBuilder(builder: (context, constrains) {
+              return Row(
+                children: [
+                  AnimatedSwitcher(
+                    duration: const Duration(milliseconds: 200),
+                    transitionBuilder: (child, animation) {
+                      return FadeTransition(
+                        opacity: animation,
+                        child: ScaleTransition(
+                          scale: animation,
+                          child: child,
+                        ),
+                      );
+                    },
+                    child: showCheck.value
+                        ? Checkbox.adaptive(
+                            value: selected.value.length == sortedTracks.length,
+                            onChanged: (checked) {
+                              if (!showCheck.value) showCheck.value = true;
+                              if (checked == true) {
+                                selected.value =
+                                    sortedTracks.map((s) => s.id!).toList();
+                              } else {
+                                selected.value = [];
+                                showCheck.value = false;
+                              }
+                            },
+                          )
+                        : constrains.mdAndUp
+                            ? const SizedBox(width: 32)
+                            : const SizedBox(width: 16),
                   ),
-                ),
-                Expanded(
-                  child: Row(
-                    children: [
-                      PlatformText(
-                        "Title",
-                        style: tableHeadStyle,
-                        overflow: TextOverflow.ellipsis,
-                      ),
-                    ],
-                  ),
-                ),
-                // used alignment of this table-head
-                if (breakpoint.isMoreThan(Breakpoints.md)) ...[
-                  const SizedBox(width: 100),
                   Expanded(
+                    flex: 7,
                     child: Row(
                       children: [
-                        PlatformText(
-                          "Album",
-                          overflow: TextOverflow.ellipsis,
+                        Text(
+                          context.l10n.title,
                           style: tableHeadStyle,
+                          overflow: TextOverflow.ellipsis,
                         ),
                       ],
                     ),
-                  )
-                ],
-                if (!breakpoint.isSm) ...[
-                  const SizedBox(width: 10),
-                  PlatformText("Time", style: tableHeadStyle),
-                  const SizedBox(width: 10),
-                ],
-                SortTracksDropdown(
-                  value: sortBy,
-                  onChanged: (value) {
-                    ref
-                        .read(
-                            trackCollectionSortState(playlistId ?? '').notifier)
-                        .state = value;
-                  },
-                ),
-                PlatformPopupMenuButton(
-                  closeAfterClick: false,
-                  tooltip: "More Actions",
-                  items: [
-                    PlatformPopupMenuItem(
-                      enabled: selectedTracks.isNotEmpty,
-                      value: "download",
+                  ),
+                  // used alignment of this table-head
+                  if (constrains.mdAndUp)
+                    Expanded(
+                      flex: 3,
                       child: Row(
                         children: [
-                          const Icon(SpotubeIcons.download),
-                          const SizedBox(width: 5),
-                          PlatformText(
-                            "Download ${selectedTracks.isNotEmpty ? "(${selectedTracks.length})" : ""}",
+                          Text(
+                            context.l10n.album,
+                            overflow: TextOverflow.ellipsis,
+                            style: tableHeadStyle,
                           ),
                         ],
                       ),
                     ),
-                    if (!userPlaylist)
-                      PlatformPopupMenuItem(
+                  SortTracksDropdown(
+                    value: sortBy,
+                    onChanged: (value) {
+                      ref
+                          .read(trackCollectionSortState(playlistId ?? '')
+                              .notifier)
+                          .state = value;
+                    },
+                  ),
+                  ExpandableSearchButton(
+                    isFiltering: isFiltering,
+                    searchFocus: searchFocus,
+                    onPressed: (value) {
+                      if (isFiltering.value) {
+                        onFiltering?.call();
+                      }
+                    },
+                  ),
+                  AdaptivePopSheetList(
+                    tooltip: context.l10n.more_actions,
+                    headings: [
+                      Text(
+                        context.l10n.more_actions,
+                        style: tableHeadStyle,
+                      ),
+                    ],
+                    onSelected: (action) async {
+                      switch (action) {
+                        case "download":
+                          {
+                            final confirmed = await showDialog(
+                              context: context,
+                              builder: (context) {
+                                return const ConfirmDownloadDialog();
+                              },
+                            );
+                            if (confirmed != true) return;
+                            await downloader
+                                .enqueueAll(selectedTracks.toList());
+                            if (context.mounted) {
+                              selected.value = [];
+                              showCheck.value = false;
+                            }
+                            break;
+                          }
+                        case "add-to-playlist":
+                          {
+                            await showDialog(
+                              context: context,
+                              builder: (context) {
+                                return PlaylistAddTrackDialog(
+                                  tracks: selectedTracks.toList(),
+                                );
+                              },
+                            );
+                            break;
+                          }
+                        case "play-next":
+                          {
+                            playback.addTracksAtFirst(selectedTracks);
+                            if (playlistId != null) {
+                              playback.addCollection(playlistId!);
+                            }
+                            selected.value = [];
+                            showCheck.value = false;
+                            break;
+                          }
+                        case "add-to-queue":
+                          {
+                            playback.addTracks(selectedTracks);
+                            if (playlistId != null) {
+                              playback.addCollection(playlistId!);
+                            }
+                            selected.value = [];
+                            showCheck.value = false;
+                            break;
+                          }
+                        default:
+                      }
+                    },
+                    icon: const Icon(SpotubeIcons.moreVertical),
+                    children: [
+                      PopSheetEntry(
+                        value: "download",
+                        leading: const Icon(SpotubeIcons.download),
                         enabled: selectedTracks.isNotEmpty,
-                        value: "add-to-playlist",
-                        child: Row(
-                          children: [
-                            const Icon(SpotubeIcons.playlistAdd),
-                            const SizedBox(width: 5),
-                            PlatformText(
-                              "Add (${selectedTracks.length}) to Playlist",
-                            ),
-                          ],
+                        title: Text(
+                          context.l10n.download_count(selectedTracks.length),
                         ),
                       ),
-                  ],
-                  onSelected: (action) async {
-                    switch (action) {
-                      case "download":
-                        {
-                          final confirmed = await showPlatformAlertDialog(
-                            context,
-                            builder: (context) {
-                              return const ConfirmDownloadDialog();
-                            },
-                          );
-                          if (confirmed != true) return;
-                          for (final selectedTrack in selectedTracks) {
-                            downloader.addToQueue(selectedTrack);
-                          }
-                          selected.value = [];
-                          showCheck.value = false;
-                          break;
-                        }
-                      case "add-to-playlist":
-                        {
-                          await showPlatformAlertDialog(
-                            context,
-                            builder: (context) {
-                              return PlaylistAddTrackDialog(
-                                tracks: selectedTracks.toList(),
-                              );
-                            },
-                          );
-                          break;
-                        }
-                      default:
-                    }
-                  },
-                  child: const Icon(SpotubeIcons.moreVertical),
-                ),
-                const SizedBox(width: 10),
-              ],
+                      if (!userPlaylist)
+                        PopSheetEntry(
+                          value: "add-to-playlist",
+                          leading: const Icon(SpotubeIcons.playlistAdd),
+                          enabled: selectedTracks.isNotEmpty,
+                          title: Text(
+                            context.l10n
+                                .add_count_to_playlist(selectedTracks.length),
+                          ),
+                        ),
+                      PopSheetEntry(
+                        enabled: selectedTracks.isNotEmpty,
+                        value: "add-to-queue",
+                        leading: const Icon(SpotubeIcons.queueAdd),
+                        title: Text(
+                          context.l10n
+                              .add_count_to_queue(selectedTracks.length),
+                        ),
+                      ),
+                      PopSheetEntry(
+                        enabled: selectedTracks.isNotEmpty,
+                        value: "play-next",
+                        leading: const Icon(SpotubeIcons.lightning),
+                        title: Text(
+                          context.l10n.play_count_next(selectedTracks.length),
+                        ),
+                      ),
+                    ],
+                  ),
+                  const SizedBox(width: 10),
+                ],
+              );
+            }),
+            ExpandableSearchField(
+              isFiltering: isFiltering,
+              searchController: searchController,
+              searchFocus: searchFocus,
             ),
-            ...sortedTracks.asMap().entries.map((track) {
-              String duration =
-                  "${track.value.duration?.inMinutes.remainder(60)}:${PrimitiveUtils.zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}";
-              return InkWell(
-                onLongPress: () {
-                  showCheck.value = true;
-                  selected.value = [...selected.value, track.value.id!];
-                },
+            ...sortedTracks.mapIndexed((i, track) {
+              return TrackTile(
+                index: i,
+                track: track,
+                selected: selected.value.contains(track.id),
+                userPlaylist: userPlaylist,
+                playlistId: playlistId,
                 onTap: () {
                   if (showCheck.value) {
-                    final alreadyChecked =
-                        selected.value.contains(track.value.id);
+                    final alreadyChecked = selected.value.contains(track.id);
                     if (alreadyChecked) {
-                      selected.value = selected.value
-                          .where((id) => id != track.value.id)
-                          .toList();
+                      selected.value =
+                          selected.value.where((id) => id != track.id).toList();
                     } else {
-                      selected.value = [...selected.value, track.value.id!];
+                      selected.value = [...selected.value, track.id!];
                     }
                   } else {
                     final isBlackListed = ref.read(
                       BlackListNotifier.provider.select(
                         (blacklist) => blacklist.contains(
-                          BlacklistedElement.track(
-                              track.value.id!, track.value.name!),
+                          BlacklistedElement.track(track.id!, track.name!),
                         ),
                       ),
                     );
                     if (!isBlackListed) {
-                      onTrackPlayButtonPressed?.call(track.value);
+                      onTrackPlayButtonPressed?.call(track);
                     }
                   }
                 },
-                child: TrackTile(
-                  playlist,
-                  playlistId: playlistId,
-                  track: track,
-                  duration: duration,
-                  userPlaylist: userPlaylist,
-                  isActive: playlist?.activeTrack.id == track.value.id,
-                  onTrackPlayButtonPressed: onTrackPlayButtonPressed,
-                  isChecked: selected.value.contains(track.value.id),
-                  showCheck: showCheck.value,
-                  onCheckChange: (checked) {
-                    if (checked == true) {
-                      selected.value = [...selected.value, track.value.id!];
-                    } else {
-                      selected.value = selected.value
-                          .where((id) => id != track.value.id)
-                          .toList();
-                    }
-                  },
-                ),
+                onLongPress: () {
+                  if (showCheck.value) return;
+                  showCheck.value = true;
+                  selected.value = [...selected.value, track.id!];
+                },
+                onChanged: !showCheck.value
+                    ? null
+                    : (value) {
+                        if (value == null) return;
+                        if (value) {
+                          selected.value = [...selected.value, track.id!];
+                        } else {
+                          selected.value = selected.value
+                              .where((id) => id != track.id)
+                              .toList();
+                        }
+                      },
               );
-            }).toList(),
+            }),
+            // extra space for mobile devices where keyboard takes half of the screen
+            if (isFiltering.value)
+              SizedBox(
+                height: mediaQuery.size.height * .75, //75% of the screen
+              ),
           ];
 
     if (isSliver) {
-      return SliverList(delegate: SliverChildListDelegate(children));
+      return SliverSafeArea(
+        top: false,
+        sliver: SliverList(delegate: SliverChildListDelegate(children)),
+      );
     }
-    return ListView(children: children);
+    return SafeArea(
+      child: ListView(children: children),
+    );
   }
 }
diff --git a/lib/entities/cache_track.dart b/lib/entities/cache_track.dart
deleted file mode 100644
index bd42b9cf..00000000
--- a/lib/entities/cache_track.dart
+++ /dev/null
@@ -1,101 +0,0 @@
-import 'package:hive/hive.dart';
-import 'package:youtube_explode_dart/youtube_explode_dart.dart';
-
-part 'cache_track.g.dart';
-
-@HiveType(typeId: 2)
-class CacheTrackEngagement {
-  @HiveField(0)
-  late int viewCount;
-
-  @HiveField(1)
-  late int? likeCount;
-
-  @HiveField(2)
-  late int? dislikeCount;
-
-  CacheTrackEngagement();
-
-  CacheTrackEngagement.fromEngagement(Engagement engagement)
-      : viewCount = engagement.viewCount,
-        likeCount = engagement.likeCount,
-        dislikeCount = engagement.dislikeCount;
-}
-
-@HiveType(typeId: 3)
-class CacheTrackSkipSegment {
-  @HiveField(0)
-  late int start;
-  @HiveField(1)
-  late int end;
-
-  CacheTrackSkipSegment();
-
-  CacheTrackSkipSegment.fromJson(Map map)
-      : start = map["start"].toInt(),
-        end = map["end"].toInt();
-
-  Map<String, int> toJson() {
-    return Map.castFrom<String, dynamic, String, int>(
-        {"start": start, "end": end});
-  }
-}
-
-@HiveType(typeId: 1)
-class CacheTrack extends HiveObject {
-  @HiveField(0)
-  late String id;
-
-  @HiveField(1)
-  late String title;
-
-  @HiveField(2)
-  late String channelId;
-
-  @HiveField(3)
-  late String? uploadDate;
-
-  @HiveField(4)
-  late String? publishDate;
-
-  @HiveField(5)
-  late String description;
-
-  @HiveField(6)
-  late String? duration;
-
-  @HiveField(7)
-  late List<String>? keywords;
-
-  @HiveField(8)
-  late CacheTrackEngagement engagement;
-
-  @HiveField(9)
-  late String mode;
-
-  @HiveField(10)
-  late String author;
-
-  @HiveField(11)
-  late List<CacheTrackSkipSegment>? skipSegments;
-
-  CacheTrack();
-
-  CacheTrack.fromVideo(
-    Video video,
-    this.mode, {
-    required List<Map<String, int>> skipSegments,
-  })  : id = video.id.value,
-        title = video.title,
-        author = video.author,
-        channelId = video.channelId.value,
-        uploadDate = video.uploadDate.toString(),
-        publishDate = video.publishDate.toString(),
-        description = video.description,
-        duration = video.duration.toString(),
-        keywords = video.keywords,
-        engagement = CacheTrackEngagement.fromEngagement(video.engagement),
-        skipSegments = skipSegments
-            .map((segment) => CacheTrackSkipSegment.fromJson(segment))
-            .toList();
-}
diff --git a/lib/entities/cache_track.g.dart b/lib/entities/cache_track.g.dart
deleted file mode 100644
index b04ef555..00000000
--- a/lib/entities/cache_track.g.dart
+++ /dev/null
@@ -1,148 +0,0 @@
-// GENERATED CODE - DO NOT MODIFY BY HAND
-
-part of 'cache_track.dart';
-
-// **************************************************************************
-// TypeAdapterGenerator
-// **************************************************************************
-
-class CacheTrackEngagementAdapter extends TypeAdapter<CacheTrackEngagement> {
-  @override
-  final int typeId = 2;
-
-  @override
-  CacheTrackEngagement read(BinaryReader reader) {
-    final numOfFields = reader.readByte();
-    final fields = <int, dynamic>{
-      for (int i = 0; i < numOfFields; i++) reader.readByte(): reader.read(),
-    };
-    return CacheTrackEngagement()
-      ..viewCount = fields[0] as int
-      ..likeCount = fields[1] as int?
-      ..dislikeCount = fields[2] as int?;
-  }
-
-  @override
-  void write(BinaryWriter writer, CacheTrackEngagement obj) {
-    writer
-      ..writeByte(3)
-      ..writeByte(0)
-      ..write(obj.viewCount)
-      ..writeByte(1)
-      ..write(obj.likeCount)
-      ..writeByte(2)
-      ..write(obj.dislikeCount);
-  }
-
-  @override
-  int get hashCode => typeId.hashCode;
-
-  @override
-  bool operator ==(Object other) =>
-      identical(this, other) ||
-      other is CacheTrackEngagementAdapter &&
-          runtimeType == other.runtimeType &&
-          typeId == other.typeId;
-}
-
-class CacheTrackSkipSegmentAdapter extends TypeAdapter<CacheTrackSkipSegment> {
-  @override
-  final int typeId = 3;
-
-  @override
-  CacheTrackSkipSegment read(BinaryReader reader) {
-    final numOfFields = reader.readByte();
-    final fields = <int, dynamic>{
-      for (int i = 0; i < numOfFields; i++) reader.readByte(): reader.read(),
-    };
-    return CacheTrackSkipSegment()
-      ..start = fields[0] as int
-      ..end = fields[1] as int;
-  }
-
-  @override
-  void write(BinaryWriter writer, CacheTrackSkipSegment obj) {
-    writer
-      ..writeByte(2)
-      ..writeByte(0)
-      ..write(obj.start)
-      ..writeByte(1)
-      ..write(obj.end);
-  }
-
-  @override
-  int get hashCode => typeId.hashCode;
-
-  @override
-  bool operator ==(Object other) =>
-      identical(this, other) ||
-      other is CacheTrackSkipSegmentAdapter &&
-          runtimeType == other.runtimeType &&
-          typeId == other.typeId;
-}
-
-class CacheTrackAdapter extends TypeAdapter<CacheTrack> {
-  @override
-  final int typeId = 1;
-
-  @override
-  CacheTrack read(BinaryReader reader) {
-    final numOfFields = reader.readByte();
-    final fields = <int, dynamic>{
-      for (int i = 0; i < numOfFields; i++) reader.readByte(): reader.read(),
-    };
-    return CacheTrack()
-      ..id = fields[0] as String
-      ..title = fields[1] as String
-      ..channelId = fields[2] as String
-      ..uploadDate = fields[3] as String?
-      ..publishDate = fields[4] as String?
-      ..description = fields[5] as String
-      ..duration = fields[6] as String?
-      ..keywords = (fields[7] as List?)?.cast<String>()
-      ..engagement = fields[8] as CacheTrackEngagement
-      ..mode = fields[9] as String
-      ..author = fields[10] as String
-      ..skipSegments = (fields[11] as List?)?.cast<CacheTrackSkipSegment>();
-  }
-
-  @override
-  void write(BinaryWriter writer, CacheTrack obj) {
-    writer
-      ..writeByte(12)
-      ..writeByte(0)
-      ..write(obj.id)
-      ..writeByte(1)
-      ..write(obj.title)
-      ..writeByte(2)
-      ..write(obj.channelId)
-      ..writeByte(3)
-      ..write(obj.uploadDate)
-      ..writeByte(4)
-      ..write(obj.publishDate)
-      ..writeByte(5)
-      ..write(obj.description)
-      ..writeByte(6)
-      ..write(obj.duration)
-      ..writeByte(7)
-      ..write(obj.keywords)
-      ..writeByte(8)
-      ..write(obj.engagement)
-      ..writeByte(9)
-      ..write(obj.mode)
-      ..writeByte(10)
-      ..write(obj.author)
-      ..writeByte(11)
-      ..write(obj.skipSegments);
-  }
-
-  @override
-  int get hashCode => typeId.hashCode;
-
-  @override
-  bool operator ==(Object other) =>
-      identical(this, other) ||
-      other is CacheTrackAdapter &&
-          runtimeType == other.runtimeType &&
-          typeId == other.typeId;
-}
diff --git a/lib/extensions/constrains.dart b/lib/extensions/constrains.dart
new file mode 100644
index 00000000..6bea33e1
--- /dev/null
+++ b/lib/extensions/constrains.dart
@@ -0,0 +1,39 @@
+import 'package:flutter/widgets.dart';
+
+extension ContainerBreakpoints on BoxConstraints {
+  bool get isXs => biggest.width <= 480;
+  bool get isSm => biggest.width > 480 && biggest.width <= 640;
+  bool get isMd => biggest.width > 640 && biggest.width <= 820;
+  bool get isLg => biggest.width > 820 && biggest.width <= 1024;
+  bool get isXl => biggest.width > 1024 && biggest.width <= 1280;
+  bool get is2Xl => biggest.width > 1280;
+
+  bool get smAndUp => isSm || isMd || isLg || isXl || is2Xl;
+  bool get mdAndUp => isMd || isLg || isXl || is2Xl;
+  bool get lgAndUp => isLg || isXl || is2Xl;
+  bool get xlAndUp => isXl || is2Xl;
+
+  bool get smAndDown => isXs || isSm;
+  bool get mdAndDown => isXs || isSm || isMd;
+  bool get lgAndDown => isXs || isSm || isMd || isLg;
+  bool get xlAndDown => isXs || isSm || isMd || isLg || isXl;
+}
+
+extension ScreenBreakpoints on MediaQueryData {
+  bool get isXs => size.width <= 480;
+  bool get isSm => size.width > 480 && size.width <= 640;
+  bool get isMd => size.width > 640 && size.width <= 820;
+  bool get isLg => size.width > 820 && size.width <= 1024;
+  bool get isXl => size.width > 1024 && size.width <= 1280;
+  bool get is2Xl => size.width > 1280;
+
+  bool get smAndUp => isSm || isMd || isLg || isXl || is2Xl;
+  bool get mdAndUp => isMd || isLg || isXl || is2Xl;
+  bool get lgAndUp => isLg || isXl || is2Xl;
+  bool get xlAndUp => isXl || is2Xl;
+
+  bool get smAndDown => isXs || isSm;
+  bool get mdAndDown => isXs || isSm || isMd;
+  bool get lgAndDown => isXs || isSm || isMd || isLg;
+  bool get xlAndDown => isXs || isSm || isMd || isLg || isXl;
+}
diff --git a/lib/extensions/context.dart b/lib/extensions/context.dart
new file mode 100644
index 00000000..9ca1e237
--- /dev/null
+++ b/lib/extensions/context.dart
@@ -0,0 +1,6 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+
+extension AppLocale on BuildContext {
+  AppLocalizations get l10n => AppLocalizations.of(this)!;
+}
diff --git a/lib/extensions/duration.dart b/lib/extensions/duration.dart
new file mode 100644
index 00000000..183fce5f
--- /dev/null
+++ b/lib/extensions/duration.dart
@@ -0,0 +1,28 @@
+import 'package:duration/locale.dart';
+import 'package:spotube/utils/primitive_utils.dart';
+import 'package:duration/duration.dart';
+
+extension DurationToHumanReadableString on Duration {
+  String toHumanReadableString() =>
+      "${inMinutes.remainder(60)}:${PrimitiveUtils.zeroPadNumStr(inSeconds.remainder(60))}";
+
+  String format({
+    DurationTersity tersity = DurationTersity.second,
+    DurationTersity upperTersity = DurationTersity.week,
+    DurationLocale locale = const EnglishDurationLocale(),
+    String? spacer,
+    String? delimiter,
+    String? conjugation,
+    bool abbreviated = false,
+  }) =>
+      printDuration(
+        this,
+        tersity: tersity,
+        upperTersity: upperTersity,
+        locale: locale,
+        spacer: spacer,
+        delimiter: delimiter,
+        conjugation: conjugation,
+        abbreviated: abbreviated,
+      );
+}
diff --git a/lib/extensions/list.dart b/lib/extensions/list.dart
index b8ca784e..c9d502b0 100644
--- a/lib/extensions/list.dart
+++ b/lib/extensions/list.dart
@@ -1,5 +1,4 @@
 import 'package:collection/collection.dart';
-import 'package:tuple/tuple.dart';
 
 extension MultiSortListMap on List<Map> {
   /// [preference] - List of properties in which you want to sort the list
@@ -48,7 +47,7 @@ extension MultiSortListMap on List<Map> {
   }
 }
 
-extension MultiSortListTupleMap<V> on List<Tuple2<Map, V>> {
+extension MultiSortListTupleMap<V> on List<(Map, V)> {
   /// [preference] - List of properties in which you want to sort the list
   /// i.e.
   /// ```
@@ -61,7 +60,7 @@ extension MultiSortListTupleMap<V> on List<Tuple2<Map, V>> {
   /// ```
   /// List<bool> criteria = [true. false];
   /// ```
-  List<Tuple2<Map, V>> sortByProperties(
+  List<(Map, V)> sortByProperties(
       List<bool> criteria, List<String> preference) {
     if (preference.isEmpty || criteria.isEmpty || isEmpty) {
       return this;
@@ -71,17 +70,17 @@ extension MultiSortListTupleMap<V> on List<Tuple2<Map, V>> {
       return this;
     }
 
-    int compare(int i, Tuple2<Map, V> a, Tuple2<Map, V> b) {
-      if (a.item1[preference[i]] == b.item1[preference[i]]) {
+    int compare(int i, (Map, V) a, (Map, V) b) {
+      if (a.$1[preference[i]] == b.$1[preference[i]]) {
         return 0;
-      } else if (a.item1[preference[i]] > b.item1[preference[i]]) {
+      } else if (a.$1[preference[i]] > b.$1[preference[i]]) {
         return criteria[i] ? 1 : -1;
       } else {
         return criteria[i] ? -1 : 1;
       }
     }
 
-    int sortAll(Tuple2<Map, V> a, Tuple2<Map, V> b) {
+    int sortAll((Map, V) a, (Map, V) b) {
       int i = 0;
       int result = 0;
       while (i < preference.length) {
diff --git a/lib/extensions/video.dart b/lib/extensions/video.dart
deleted file mode 100644
index 81d43c87..00000000
--- a/lib/extensions/video.dart
+++ /dev/null
@@ -1,159 +0,0 @@
-import 'dart:convert';
-
-import 'package:catcher/catcher.dart';
-import 'package:http/http.dart';
-import 'package:spotube/entities/cache_track.dart';
-import 'package:spotube/models/logger.dart';
-import 'package:spotube/models/track.dart';
-import 'package:spotube/provider/user_preferences_provider.dart';
-import 'package:spotube/utils/duration.dart';
-import 'package:youtube_explode_dart/youtube_explode_dart.dart';
-
-extension VideoFromCacheTrackExtension on Video {
-  static Video fromCacheTrack(CacheTrack cacheTrack) {
-    return Video(
-      VideoId.fromString(cacheTrack.id),
-      cacheTrack.title,
-      cacheTrack.author,
-      ChannelId.fromString(cacheTrack.channelId),
-      cacheTrack.uploadDate != null
-          ? DateTime.tryParse(cacheTrack.uploadDate!)
-          : null,
-      cacheTrack.uploadDate,
-      cacheTrack.publishDate != null
-          ? DateTime.tryParse(cacheTrack.publishDate!)
-          : null,
-      cacheTrack.description,
-      cacheTrack.duration != null
-          ? tryParseDuration(cacheTrack.duration!)
-          : null,
-      ThumbnailSet(cacheTrack.id),
-      cacheTrack.keywords,
-      Engagement(
-        cacheTrack.engagement.viewCount,
-        cacheTrack.engagement.likeCount,
-        cacheTrack.engagement.dislikeCount,
-      ),
-      false,
-    );
-  }
-
-  static Future<Video> fromBackendTrack(
-      BackendTrack track, YoutubeExplode youtube) {
-    return youtube.videos.get(VideoId.fromString(track.youtubeId));
-  }
-}
-
-extension ThumbnailSetJson on ThumbnailSet {
-  static ThumbnailSet fromJson(Map<String, dynamic> map) {
-    return ThumbnailSet(map["videoId"]);
-  }
-
-  Map<String, dynamic> toJson() {
-    return {
-      "videoId": videoId,
-    };
-  }
-}
-
-extension EngagementJson on Engagement {
-  static Engagement fromJson(Map<String, dynamic> map) {
-    return Engagement(
-      map["viewCount"],
-      map["likeCount"],
-      map["dislikeCount"],
-    );
-  }
-
-  Map<String, dynamic> toJson() {
-    return {
-      "dislikeCount": dislikeCount,
-      "likeCount": likeCount,
-      "viewCount": viewCount,
-    };
-  }
-}
-
-extension VideoToJson on Video {
-  static Video fromJson(Map<String, dynamic> map) {
-    return Video(
-      VideoId(map["id"]),
-      map["title"],
-      map["author"],
-      ChannelId(map["channelId"]),
-      DateTime.tryParse(map["uploadDate"]),
-      map["uploadDate"],
-      DateTime.tryParse(map["publishDate"]),
-      map["description"],
-      parseDuration(map["duration"]),
-      ThumbnailSetJson.fromJson(map["thumbnails"]),
-      List.castFrom<dynamic, String>(map["keywords"]),
-      EngagementJson.fromJson(map["engagement"]),
-      map["isLive"],
-    );
-  }
-
-  Map<String, dynamic> toJson() {
-    return {
-      "hasWatchPage": hasWatchPage,
-      "url": url,
-      "author": author,
-      "channelId": channelId.value,
-      "description": description,
-      "duration": duration.toString(),
-      "engagement": engagement.toJson(),
-      "id": id.value,
-      "isLive": isLive,
-      "keywords": keywords.toList(),
-      "publishDate": publishDate.toString(),
-      "thumbnails": thumbnails.toJson(),
-      "title": title,
-      "uploadDate": uploadDate.toString(),
-    };
-  }
-}
-
-extension GetSkipSegments on Video {
-  Future<List<Map<String, int>>> getSkipSegments(
-      UserPreferences preferences) async {
-    if (!preferences.skipSponsorSegments) return [];
-    try {
-      final res = await get(Uri(
-        scheme: "https",
-        host: "sponsor.ajay.app",
-        path: "/api/skipSegments",
-        queryParameters: {
-          "videoID": id.value,
-          "category": [
-            'sponsor',
-            'selfpromo',
-            'interaction',
-            'intro',
-            'outro',
-            'music_offtopic'
-          ],
-          "actionType": 'skip'
-        },
-      ));
-
-      if (res.body == "Not Found") {
-        return List.castFrom<dynamic, Map<String, int>>([]);
-      }
-
-      final data = jsonDecode(res.body) as List;
-      final segments = data.map((obj) {
-        return Map.castFrom<String, dynamic, String, int>({
-          "start": obj["segment"].first.toInt(),
-          "end": obj["segment"].last.toInt(),
-        });
-      }).toList();
-      getLogger(Video).v(
-        "[SponsorBlock] successfully fetched skip segments for $title | ${id.value}",
-      );
-      return List.castFrom<dynamic, Map<String, int>>(segments);
-    } catch (e, stack) {
-      Catcher.reportCheckedError(e, stack);
-      return List.castFrom<dynamic, Map<String, int>>([]);
-    }
-  }
-}
diff --git a/lib/generated_plugin_registrant.dart b/lib/generated_plugin_registrant.dart
index 938e48db..dc0cbb0b 100644
--- a/lib/generated_plugin_registrant.dart
+++ b/lib/generated_plugin_registrant.dart
@@ -8,7 +8,6 @@
 
 import 'package:audio_service_web/audio_service_web.dart';
 import 'package:audio_session/audio_session_web.dart';
-import 'package:audioplayers_web/audioplayers_web.dart';
 import 'package:file_picker/_internal/file_picker_web.dart';
 import 'package:shared_preferences_web/shared_preferences_web.dart';
 import 'package:url_launcher_web/url_launcher_web.dart';
@@ -19,7 +18,6 @@ import 'package:flutter_web_plugins/flutter_web_plugins.dart';
 void registerPlugins(Registrar registrar) {
   AudioServiceWeb.registerWith(registrar);
   AudioSessionWeb.registerWith(registrar);
-  AudioplayersPlugin.registerWith(registrar);
   FilePickerWeb.registerWith(registrar);
   SharedPreferencesPlugin.registerWith(registrar);
   UrlLauncherPlugin.registerWith(registrar);
diff --git a/lib/hooks/use_breakpoint_value.dart b/lib/hooks/use_breakpoint_value.dart
index d50482ac..b2592124 100644
--- a/lib/hooks/use_breakpoint_value.dart
+++ b/lib/hooks/use_breakpoint_value.dart
@@ -1,6 +1,9 @@
-import 'package:spotube/hooks/use_breakpoints.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:spotube/extensions/constrains.dart';
 
-useBreakpointValue<T>({
+T useBreakpointValue<T>({
+  T? xs,
   T? sm,
   T? md,
   T? lg,
@@ -8,17 +11,46 @@ useBreakpointValue<T>({
   T? xxl,
   T? others,
 }) {
-  final breakpoint = useBreakpoints();
+  final isSomeNull = xs == null ||
+      sm == null ||
+      md == null ||
+      lg == null ||
+      xl == null ||
+      xxl == null;
+  assert(
+    (isSomeNull && others != null) || (!isSomeNull && others == null),
+    'You must provide a value for all breakpoints or a default value for others',
+  );
+  final context = useContext();
+  final mediaQuery = MediaQuery.of(context);
 
-  if (breakpoint.isSm) {
-    return sm ?? others;
-  } else if (breakpoint.isMd) {
-    return md ?? others;
-  } else if (breakpoint.isXl) {
-    return xl ?? others;
-  } else if (breakpoint.isXxl) {
-    return xxl ?? others;
+  if (isSomeNull) {
+    if (mediaQuery.isXs) {
+      return xs ?? others!;
+    } else if (mediaQuery.isSm) {
+      return sm ?? others!;
+    } else if (mediaQuery.isMd) {
+      return md ?? others!;
+    } else if (mediaQuery.isXl) {
+      return xl ?? others!;
+    } else if (mediaQuery.is2Xl) {
+      return xxl ?? others!;
+    } else {
+      return lg ?? others!;
+    }
   } else {
-    return lg ?? others;
+    if (mediaQuery.isXs) {
+      return xs;
+    } else if (mediaQuery.isSm) {
+      return sm;
+    } else if (mediaQuery.isMd) {
+      return md;
+    } else if (mediaQuery.isXl) {
+      return xl;
+    } else if (mediaQuery.is2Xl) {
+      return xxl;
+    } else {
+      return lg;
+    }
   }
 }
diff --git a/lib/hooks/use_breakpoints.dart b/lib/hooks/use_breakpoints.dart
deleted file mode 100644
index 7177ed8d..00000000
--- a/lib/hooks/use_breakpoints.dart
+++ /dev/null
@@ -1,104 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
-
-class BreakpointUtils {
-  Breakpoints breakpoint;
-  List<Breakpoints> breakpointList = [
-    Breakpoints.sm,
-    Breakpoints.md,
-    Breakpoints.lg,
-    Breakpoints.xl,
-    Breakpoints.xxl
-  ];
-  BreakpointUtils(this.breakpoint);
-
-  bool get isSm => breakpoint == Breakpoints.sm;
-  bool get isMd => breakpoint == Breakpoints.md;
-  bool get isLg => breakpoint == Breakpoints.lg;
-  bool get isXl => breakpoint == Breakpoints.xl;
-  bool get isXxl => breakpoint == Breakpoints.xxl;
-
-  bool isMoreThanOrEqualTo(Breakpoints b) {
-    return breakpointList
-        .sublist(breakpointList.indexOf(b))
-        .contains(breakpoint);
-  }
-
-  bool isLessThanOrEqualTo(Breakpoints b) {
-    return breakpointList
-        .sublist(0, breakpointList.indexOf(b) + 1)
-        .contains(breakpoint);
-  }
-
-  bool isMoreThan(Breakpoints b) {
-    return breakpointList
-        .sublist(breakpointList.indexOf(b) + 1)
-        .contains(breakpoint);
-  }
-
-  bool isLessThan(Breakpoints b) {
-    return breakpointList
-        .sublist(0, breakpointList.indexOf(b))
-        .contains(breakpoint);
-  }
-
-  bool operator >(other) {
-    return isMoreThan(other);
-  }
-
-  bool operator <(other) {
-    return isLessThan(other);
-  }
-
-  bool operator >=(other) {
-    return isMoreThanOrEqualTo(other);
-  }
-
-  bool operator <=(other) {
-    return isLessThanOrEqualTo(other);
-  }
-
-  @override
-  String toString() {
-    return "BreakpointUtils($breakpoint)";
-  }
-}
-
-enum Breakpoints { sm, md, lg, xl, xxl }
-
-BreakpointUtils useBreakpoints() {
-  final context = useContext();
-  final width = MediaQuery.of(context).size.width;
-  final breakpoint = useState(Breakpoints.lg);
-  final utils = BreakpointUtils(breakpoint.value);
-
-  useEffect(() {
-    if (width > 1920 && breakpoint.value != Breakpoints.xxl) {
-      breakpoint.value = Breakpoints.xxl;
-    } else if (width > 1366 &&
-        width <= 1920 &&
-        breakpoint.value != Breakpoints.xl) {
-      breakpoint.value = Breakpoints.xl;
-    } else if (width > 800 &&
-        width <= 1366 &&
-        breakpoint.value != Breakpoints.lg) {
-      breakpoint.value = Breakpoints.lg;
-    } else if (width > 500 &&
-        width <= 800 &&
-        breakpoint.value != Breakpoints.md) {
-      breakpoint.value = Breakpoints.md;
-    } else if (width >= 250 &&
-        width <= 500 &&
-        breakpoint.value != Breakpoints.sm) {
-      breakpoint.value = Breakpoints.sm;
-    }
-    return null;
-  }, [width]);
-
-  useEffect(() {
-    utils.breakpoint = breakpoint.value;
-    return null;
-  }, [breakpoint.value]);
-
-  return utils;
-}
diff --git a/lib/hooks/use_brightness_value.dart b/lib/hooks/use_brightness_value.dart
new file mode 100644
index 00000000..d3823b2f
--- /dev/null
+++ b/lib/hooks/use_brightness_value.dart
@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+T useBrightnessValue<T>(
+  T lightValue,
+  T darkValue,
+) {
+  final context = useContext();
+
+  return Theme.of(context).brightness == Brightness.light
+      ? lightValue
+      : darkValue;
+}
diff --git a/lib/hooks/use_custom_status_bar_color.dart b/lib/hooks/use_custom_status_bar_color.dart
index bf6b8ab4..92f845cf 100644
--- a/lib/hooks/use_custom_status_bar_color.dart
+++ b/lib/hooks/use_custom_status_bar_color.dart
@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:platform_ui/platform_ui.dart';
 
 void useCustomStatusBarColor(
   Color color,
@@ -9,7 +8,7 @@ void useCustomStatusBarColor(
   bool noSetBGColor = false,
 }) {
   final context = useContext();
-  final backgroundColor = PlatformTheme.of(context).scaffoldBackgroundColor!;
+  final backgroundColor = Theme.of(context).scaffoldBackgroundColor;
   resetStatusbar() => SystemChrome.setSystemUIOverlayStyle(
         SystemUiOverlayStyle(
           statusBarColor: backgroundColor, // status bar color
diff --git a/lib/hooks/use_debounce.dart b/lib/hooks/use_debounce.dart
new file mode 100644
index 00000000..5eb859a1
--- /dev/null
+++ b/lib/hooks/use_debounce.dart
@@ -0,0 +1,17 @@
+import 'dart:async';
+
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+T useDebounce<T>(
+  T value, [
+  Duration delay = const Duration(milliseconds: 500),
+]) {
+  final state = useState<T>(value);
+
+  useEffect(() {
+    final timer = Timer(delay, () => state.value = value);
+    return timer.cancel;
+  }, [value, delay]);
+
+  return state.value;
+}
diff --git a/lib/hooks/use_disable_battery_optimizations.dart b/lib/hooks/use_disable_battery_optimizations.dart
new file mode 100644
index 00000000..cf1ad0c1
--- /dev/null
+++ b/lib/hooks/use_disable_battery_optimizations.dart
@@ -0,0 +1,47 @@
+import 'package:disable_battery_optimization/disable_battery_optimization.dart';
+import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+import 'package:spotube/hooks/use_async_effect.dart';
+
+bool _asked = false;
+void useDisableBatterOptimizations() {
+  useAsyncEffect(() async {
+    if (!DesktopTools.platform.isAndroid || _asked) return;
+    final localStorage = await SharedPreferences.getInstance();
+
+    final rawIsBatteryOptimizationDisabled =
+        localStorage.getBool("isBatteryOptimizationDisabled");
+    final isBatteryOptimizationDisabled =
+        await DisableBatteryOptimization.isBatteryOptimizationDisabled;
+    if (rawIsBatteryOptimizationDisabled != false &&
+        isBatteryOptimizationDisabled == false) {
+      final hasDisabled = await DisableBatteryOptimization
+          .showDisableBatteryOptimizationSettings();
+
+      localStorage.setBool(
+        "isBatteryOptimizationDisabled",
+        hasDisabled == true,
+      );
+    }
+
+    final rawIsManBatteryOptimizationDisabled =
+        localStorage.getBool("isManufacturerBatteryOptimizationDisabled");
+    final isManBatteryOptimizationDisabled = await DisableBatteryOptimization
+        .isManufacturerBatteryOptimizationDisabled;
+
+    if (rawIsManBatteryOptimizationDisabled != false &&
+        isManBatteryOptimizationDisabled == false) {
+      final hasDisabled = await DisableBatteryOptimization
+          .showDisableManufacturerBatteryOptimizationSettings(
+        "Your device has additional battery optimization",
+        "Follow the steps and disable the optimizations to allow smooth functioning of this app",
+      );
+
+      localStorage.setBool(
+        "isManufacturerBatteryOptimizationDisabled",
+        hasDisabled == true,
+      );
+    }
+    _asked = true;
+  }, null, []);
+}
diff --git a/lib/hooks/use_init_sys_tray.dart b/lib/hooks/use_init_sys_tray.dart
new file mode 100644
index 00000000..e9aa05b6
--- /dev/null
+++ b/lib/hooks/use_init_sys_tray.dart
@@ -0,0 +1,126 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotube/collections/intents.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/provider/user_preferences_provider.dart';
+
+void useInitSysTray(WidgetRef ref) {
+  final context = useContext();
+  final systemTray = useRef<SystemTray?>(null);
+
+  final initializeMenu = useCallback(() async {
+    systemTray.value?.destroy();
+    final playlist = ref.read(ProxyPlaylistNotifier.provider);
+    final playlistQueue = ref.read(ProxyPlaylistNotifier.notifier);
+    final preferences = ref.read(userPreferencesProvider);
+    if (!preferences.showSystemTrayIcon) {
+      await systemTray.value?.destroy();
+      systemTray.value = null;
+      return;
+    }
+    final enabled = !playlist.isFetching;
+    systemTray.value = await DesktopTools.createSystemTrayMenu(
+      title: DesktopTools.platform.isLinux ? "" : "Spotube",
+      iconPath: "assets/spotube-logo.png",
+      windowsIconPath: "assets/spotube-logo.ico",
+      items: [
+        MenuItemLabel(
+          label: "Show/Hide",
+          name: "show-hide",
+          onClicked: (item) async {
+            if (await DesktopTools.window.isVisible()) {
+              await DesktopTools.window.hide();
+            } else {
+              await DesktopTools.window.show();
+            }
+          },
+        ),
+        MenuSeparator(),
+        MenuItemLabel(
+          label: "Play/Pause",
+          name: "play-pause",
+          enabled: enabled,
+          onClicked: (_) async {
+            Actions.maybeInvoke<PlayPauseIntent>(
+                    context, PlayPauseIntent(ref)) ??
+                PlayPauseAction().invoke(PlayPauseIntent(ref));
+          },
+        ),
+        MenuItemLabel(
+          label: "Next",
+          name: "next",
+          enabled: enabled && (playlist.tracks.length) > 1,
+          onClicked: (p0) async {
+            await playlistQueue.next();
+          },
+        ),
+        MenuItemLabel(
+          label: "Previous",
+          name: "previous",
+          enabled: enabled && (playlist.tracks.length) > 1,
+          onClicked: (p0) async {
+            await playlistQueue.previous();
+          },
+        ),
+        MenuSeparator(),
+        MenuItemLabel(
+          label: "Quit",
+          name: "quit",
+          onClicked: (item) async {
+            await DesktopTools.window.close();
+          },
+        ),
+      ],
+      onEvent: (event, tray) async {
+        if (DesktopTools.platform.isWindows) {
+          switch (event) {
+            case SystemTrayEvent.click:
+              await DesktopTools.window.show();
+              break;
+            case SystemTrayEvent.rightClick:
+              await tray.popUpContextMenu();
+              break;
+            default:
+          }
+        } else {
+          switch (event) {
+            case SystemTrayEvent.rightClick:
+              await DesktopTools.window.show();
+              break;
+            case SystemTrayEvent.click:
+              await tray.popUpContextMenu();
+              break;
+            default:
+          }
+        }
+      },
+    );
+  }, [ref]);
+
+  useReassemble(initializeMenu);
+
+  ref.listen<ProxyPlaylist?>(
+    ProxyPlaylistNotifier.provider,
+    (previous, next) {
+      initializeMenu();
+    },
+  );
+  ref.listen(
+    userPreferencesProvider.select((s) => s.showSystemTrayIcon),
+    (previous, next) {
+      initializeMenu();
+    },
+  );
+
+  useEffect(() {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      initializeMenu();
+    });
+    return () async {
+      await systemTray.value?.destroy();
+    };
+  }, [initializeMenu]);
+}
diff --git a/lib/hooks/use_palette_color.dart b/lib/hooks/use_palette_color.dart
index 300eff14..9269edd7 100644
--- a/lib/hooks/use_palette_color.dart
+++ b/lib/hooks/use_palette_color.dart
@@ -12,6 +12,7 @@ final _paletteColorState = StateProvider<PaletteColor>(
 
 PaletteColor usePaletteColor(String imageUrl, WidgetRef ref) {
   final context = useContext();
+  final theme = Theme.of(context);
   final paletteColor = ref.watch(_paletteColorState);
   final mounted = useIsMounted();
 
@@ -25,7 +26,7 @@ PaletteColor usePaletteColor(String imageUrl, WidgetRef ref) {
         ),
       );
       if (!mounted()) return;
-      final color = Theme.of(context).brightness == Brightness.light
+      final color = theme.brightness == Brightness.light
           ? palette.lightMutedColor ?? palette.lightVibrantColor
           : palette.darkMutedColor ?? palette.darkVibrantColor;
       if (color != null) {
@@ -38,10 +39,7 @@ PaletteColor usePaletteColor(String imageUrl, WidgetRef ref) {
   return paletteColor;
 }
 
-PaletteGenerator usePaletteGenerator(
-  BuildContext context,
-  String imageUrl,
-) {
+PaletteGenerator usePaletteGenerator(String imageUrl) {
   final palette = useState(PaletteGenerator.fromColors([]));
   final mounted = useIsMounted();
 
diff --git a/lib/hooks/use_platform_property.dart b/lib/hooks/use_platform_property.dart
deleted file mode 100644
index d074d574..00000000
--- a/lib/hooks/use_platform_property.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:platform_ui/platform_ui.dart';
-
-T usePlatformProperty<T>(
-    PlatformProperty<T> Function(BuildContext context) getProperties) {
-  final context = useContext();
-
-  return getProperties(context).resolve(platform ?? Theme.of(context).platform);
-}
diff --git a/lib/hooks/use_progress.dart b/lib/hooks/use_progress.dart
new file mode 100644
index 00000000..8ba2f336
--- /dev/null
+++ b/lib/hooks/use_progress.dart
@@ -0,0 +1,52 @@
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/services/audio_player/audio_player.dart';
+
+({
+  double progressStatic,
+  Duration position,
+  Duration duration,
+  double bufferProgress
+}) useProgress(WidgetRef ref) {
+  final playlist = ref.watch(ProxyPlaylistNotifier.provider);
+
+  final bufferProgress =
+      useStream(audioPlayer.bufferedPositionStream).data?.inSeconds ?? 0;
+
+  // Duration future is needed for getting the duration of the song
+  // as stream can be null when no event occurs (Mostly needed for android)
+  final durationFuture = useFuture(audioPlayer.duration);
+  final duration = useStream(audioPlayer.durationStream).data ??
+      durationFuture.data ??
+      Duration.zero;
+
+  final positionFuture = useFuture(audioPlayer.position);
+  final position = useState<Duration>(positionFuture.data ?? Duration.zero);
+
+  final sliderMax = duration.inSeconds;
+  final sliderValue = position.value.inSeconds;
+
+  useEffect(() {
+    // audioPlayer.positionStream is fired every 200ms and only 1s delay is
+    // enough. Thus only update the position if the difference is more than 1s
+    // Reduces CPU usage
+    var lastPosition = position.value;
+    return audioPlayer.positionStream.listen((event) {
+      if (event.inMilliseconds > 1000 &&
+          event.inMilliseconds - lastPosition.inMilliseconds < 1000) return;
+      lastPosition = event;
+      position.value = event;
+    }).cancel;
+  }, []);
+
+  return (
+    progressStatic:
+        sliderMax == 0 || sliderValue > sliderMax ? 0 : sliderValue / sliderMax,
+    position: position.value,
+    duration: duration,
+    bufferProgress: sliderMax == 0 || bufferProgress > sliderMax
+        ? 0
+        : bufferProgress / sliderMax,
+  );
+}
diff --git a/lib/hooks/use_sidebarx_controller.dart b/lib/hooks/use_sidebarx_controller.dart
new file mode 100644
index 00000000..5af921b7
--- /dev/null
+++ b/lib/hooks/use_sidebarx_controller.dart
@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:sidebarx/sidebarx.dart';
+
+/// Creates [SidebarXController] that will be disposed automatically.
+///
+/// See also:
+/// - [SidebarXController]
+SidebarXController useSidebarXController({
+  required int selectedIndex,
+  bool? extended,
+  List<Object?>? keys,
+}) {
+  return use(
+    _SidebarXControllerHook(
+      selectedIndex: selectedIndex,
+      extended: extended,
+      keys: keys,
+    ),
+  );
+}
+
+class _SidebarXControllerHook extends Hook<SidebarXController> {
+  const _SidebarXControllerHook({
+    required this.selectedIndex,
+    this.extended,
+    List<Object?>? keys,
+  }) : super(keys: keys);
+
+  final int selectedIndex;
+  final bool? extended;
+
+  @override
+  HookState<SidebarXController, Hook<SidebarXController>> createState() =>
+      _SidebarXControllerHookState();
+}
+
+class _SidebarXControllerHookState
+    extends HookState<SidebarXController, _SidebarXControllerHook> {
+  late final SidebarXController controller;
+
+  @override
+  void initHook() {
+    super.initHook();
+    controller = SidebarXController(
+      selectedIndex: hook.selectedIndex,
+      extended: hook.extended,
+    );
+  }
+
+  @override
+  SidebarXController build(BuildContext context) => controller;
+
+  @override
+  void dispose() => controller.dispose();
+
+  @override
+  String get debugLabel => 'useSidebarXController';
+}
diff --git a/lib/hooks/use_synced_lyrics.dart b/lib/hooks/use_synced_lyrics.dart
index 99c4a0f1..7a171473 100644
--- a/lib/hooks/use_synced_lyrics.dart
+++ b/lib/hooks/use_synced_lyrics.dart
@@ -1,13 +1,13 @@
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/services/audio_player/audio_player.dart';
 
 int useSyncedLyrics(
   WidgetRef ref,
   Map<int, String> lyricsMap,
   int delay,
 ) {
-  final stream = PlaylistQueueNotifier.position;
+  final stream = audioPlayer.positionStream;
 
   final currentTime = useState(0);
 
diff --git a/lib/hooks/use_update_checker.dart b/lib/hooks/use_update_checker.dart
index 294cea99..b348909e 100644
--- a/lib/hooks/use_update_checker.dart
+++ b/lib/hooks/use_update_checker.dart
@@ -5,8 +5,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:http/http.dart' as http;
-import 'package:platform_ui/platform_ui.dart';
-import 'package:spotube/components/root/sidebar.dart';
+import 'package:spotube/collections/env.dart';
+
 import 'package:spotube/components/shared/links/anchor_button.dart';
 import 'package:spotube/hooks/use_package_info.dart';
 import 'package:spotube/provider/user_preferences_provider.dart';
@@ -30,10 +30,9 @@ void useUpdateChecker(WidgetRef ref) {
           (jsonDecode(value.body)["tag_name"] as String).replaceAll("v", "");
       final currentVersion = packageInfo.version == "Unknown"
           ? null
-          : Version.parse(
-              packageInfo.version,
-            );
-      final latestVersion = Version.parse(tagName);
+          : Version.parse(packageInfo.version);
+      final latestVersion =
+          tagName == "nightly" ? null : Version.parse(tagName);
       return [currentVersion, latestVersion];
     },
     [packageInfo.version],
@@ -47,6 +46,7 @@ void useUpdateChecker(WidgetRef ref) {
       );
 
   useEffect(() {
+    if (!Env.enableUpdateChecker) return;
     if (!isCheckUpdateEnabled) return null;
     checkUpdate().then((value) {
       final currentVersion = value.first;
@@ -56,18 +56,17 @@ void useUpdateChecker(WidgetRef ref) {
           (latestVersion.isPreRelease && !currentVersion.isPreRelease) ||
           (!latestVersion.isPreRelease && currentVersion.isPreRelease)) return;
       if (latestVersion <= currentVersion) return;
-      showPlatformAlertDialog(
-        context,
+      showDialog(
+        context: context,
         barrierDismissible: true,
         barrierColor: Colors.black26,
         builder: (context) {
           const url =
               "https://spotube.netlify.app/other-downloads/stable-downloads";
-          return PlatformAlertDialog(
-            macosAppIcon: Sidebar.brandLogo(),
-            title: const PlatformText("Spotube has an update"),
-            primaryActions: [
-              PlatformFilledButton(
+          return AlertDialog(
+            title: const Text("Spotube has an update"),
+            actions: [
+              FilledButton(
                 child: const Text("Download Now"),
                 onPressed: () => download(url),
               ),
@@ -79,7 +78,7 @@ void useUpdateChecker(WidgetRef ref) {
                 Row(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
-                    const PlatformText("Read the latest "),
+                    const Text("Read the latest "),
                     AnchorButton(
                       "release notes",
                       style: const TextStyle(color: Colors.blue),
diff --git a/lib/l10n/app_bn.arb b/lib/l10n/app_bn.arb
new file mode 100644
index 00000000..b9e276f8
--- /dev/null
+++ b/lib/l10n/app_bn.arb
@@ -0,0 +1,253 @@
+{
+  "guest": "অতিথি",
+  "browse": "ব্রাউজ করুন",
+  "search": "অনুসন্ধান করুন",
+  "library": "লাইব্রেরী",
+  "lyrics": "গানের কথা",
+  "settings": "সেটিংস",
+  "genre_categories_filter": "গানের ধরণ বা শ্রেণি খুঁজুন",
+  "genre": "গানের ধরণ",
+  "personalized": "আপনার জন্য",
+  "featured": "বৈশিষ্ট্যযুক্ত",
+  "new_releases": "সাম্প্রতিক মুক্তি প্রাপ্ত",
+  "songs": "গান",
+  "playing_track": "{track} চালানো হচ্ছে",
+  "queue_clear_alert": "এটি বর্তমান প্লেলিষ্ট সাফ করে দিবে। {track_length}টি গান বাদ দেওয়া হবে\nআপনি কি চালিয়ে যেতে চান?",
+  "load_more": "আরো লোড করুন",
+  "playlists": "প্লেলিস্ট",
+  "artists": "শিল্পী",
+  "albums": "অ্যালবাম",
+  "tracks": "গানের ট্র্যাক",
+  "downloads": "ডাউনলোড",
+  "filter_playlists": "প্লেলিস্ট অনুসন্ধান করুন...",
+  "liked_tracks": "পছন্দের গান",
+  "liked_tracks_description": "আপনার পছন্দের গান সমূহ",
+  "create_playlist": "প্লেলিস্ট তৈরি করুন",
+  "create_a_playlist": "একটি প্লেলিস্ট তৈরি করুন",
+  "create": "তৈরি করুন",
+  "cancel": "বাতিল করুন",
+  "playlist_name": "প্লেলিস্টের নাম",
+  "name_of_playlist": "প্লেলিস্টের নাম",
+  "description": "বিবরণ",
+  "public": "পাবলিক",
+  "collaborative": "সহযোগিতামূলক",
+  "search_local_tracks": "ডাউনলোডকৃত গান অনুসন্ধান করুন...",
+  "play": "চালান",
+  "delete": "মুছে ফেলুন",
+  "none": "কোনটিই না",
+  "sort_a_z": "A-Z ক্রমে সাজান",
+  "sort_z_a": "Z-A ক্রমে সাজান",
+  "sort_artist": "শিল্পীর ক্রমে সাজান",
+  "sort_album": "অ্যালবামের ক্রমে সাজান",
+  "sort_tracks": "গানের ক্রম",
+  "currently_downloading": "ডাউনলোড করা হচ্ছে ({tracks_length})",
+  "cancel_all": "সব বাতিল করুন",
+  "filter_artist": "শিল্পীর অনুসন্ধান করুন...",
+  "followers": "{followers} অনুসরণকারী",
+  "add_artist_to_blacklist": "শিল্পীকে ব্ল্যাকলিস্টে যোগ করুন",
+  "top_tracks": "শীর্ষ গানের ট্র্যাক",
+  "fans_also_like": "অনুসরণকারীদের পছন্দ",
+  "loading": "লোড হচ্ছে...",
+  "artist": "শিল্পী",
+  "blacklisted": "ব্ল্যাকলিস্টে আছে",
+  "following": "অনুসরণ করছেন",
+  "follow": "অনুসরণ করুন",
+  "artist_url_copied": "শিল্পীর URL কপি করা হয়েছে",
+  "added_to_queue": "{tracks}টি গানের ট্র্যাক কিউতে যোগ করা হয়েছে",
+  "filter_albums": "অ্যালবাম অনুসন্ধান করুন...",
+  "synced": "সময় সুসংগত",
+  "plain": "অসুসংগত",
+  "shuffle": "অদলবদল",
+  "search_tracks": "গান অনুসন্ধান করুন...",
+  "released": "প্রকাশিত হয়েছে",
+  "error": "ত্রুটি {error}",
+  "title": "শিরোনাম",
+  "time": "সময়",
+  "more_actions": "আরও অপশন",
+  "download_count": "ডাউনলোড ({count}টি)",
+  "add_count_to_playlist": "প্লেলিস্টে যোগ করুন ({count}টি)",
+  "add_count_to_queue": "কিউতে যোগ করুন ({count}টি)",
+  "play_count_next": "পরবর্তীতে চালান ({count}টি)",
+  "album": "অ্যালবাম",
+  "copied_to_clipboard": "{data} ক্লিপবোর্ডে কপি করা হয়েছে",
+  "add_to_following_playlists": "নিম্নলিখিত প্লেলিস্টে {track} যোগ করুন",
+  "add": "যোগ করুন",
+  "added_track_to_queue": "কিউতে {track} যোগ করা হয়েছে",
+  "add_to_queue": "কিউতে যোগ করুন",
+  "track_will_play_next": "{track} পরবর্তীতে চালানো হবে",
+  "play_next": "পরবর্তীতে চালান",
+  "removed_track_from_queue": "কিউ থেকে {track} সরিয়ে নেওয়া হয়েছে",
+  "remove_from_queue": "কিউ থেকে সরান",
+  "remove_from_favorites": "পছন্দের তালিকা থেকে অপসারণ করুন",
+  "save_as_favorite": "পছন্দের তালিকায় সংরক্ষণ করুন",
+  "add_to_playlist": "প্লেলিস্টে যোগ করুন",
+  "remove_from_playlist": "প্লেলিস্ট থেকে সরান",
+  "add_to_blacklist": "ব্ল্যাকলিস্টে যোগ করুন",
+  "remove_from_blacklist": "ব্ল্যাকলিস্ট থেকে সরান",
+  "share": "শেয়ার করুন",
+  "mini_player": "মিনি প্লেয়ার",
+  "slide_to_seek": "গান সামনে বা পিছনে নিতে স্লাইড করুন",
+  "shuffle_playlist": "প্লেলিস্ট এলোমেলো করুন",
+  "unshuffle_playlist": "প্লেলিস্ট আগের মতো করুন",
+  "previous_track": "আগের গানের ট্র্যাক",
+  "next_track": "পরের গানের ট্র্যাক",
+  "pause_playback": "গান বন্ধ করুন",
+  "resume_playback": "গান চালু করুন",
+  "loop_track": "গান শেষে পুনরায় চালান",
+  "repeat_playlist": "প্লেলিস্ট শেষে পুনরায় চালান",
+  "queue": "গানের কিউ",
+  "alternative_track_sources": "বিকল্প গানের উৎস",
+  "download_track": "গান ডাউনলোড করুন",
+  "tracks_in_queue": "{tracks}টি গান কিউতে রয়েছে",
+  "clear_all": "সব মুছে ফেলুন",
+  "show_hide_ui_on_hover": "হভার করলে UI দেখান/লুকান",
+  "always_on_top": "সর্বদা উপরে",
+  "exit_mini_player": "মিনি প্লেয়ার থেকে বের হয়ে যান",
+  "download_location": "ডাউনলোড স্থান",
+  "account": "অ্যাকাউন্ট",
+  "login_with_spotify": "আপনার Spotify account দিয়ে লগইন করুন",
+  "connect_with_spotify": "Spotify লগইন",
+  "logout": "লগআউট করুন",
+  "logout_of_this_account": "অ্যাকাউন্ট থেকে লগআউট করুন",
+  "language_region": "ভাষা ও অঞ্চল",
+  "language": "ভাষা",
+  "system_default": "সিস্টেম ডিফল্ট",
+  "market_place_region": "মার্কেটপ্লেস অঞ্চল",
+  "recommendation_country": "দেশভিত্তিক সঙ্গীত পরামর্শের জন্য দেশ",
+  "appearance": "রুপ",
+  "layout_mode": "UI বিন্যাস রূপ",
+  "override_layout_settings": "প্রতিক্রিয়াশীল UI বিন্যাস রূপের সেটিংস পরিবর্তন করুন",
+  "adaptive": "অভিযোজিত",
+  "compact": "আঁটসাঁট UI",
+  "extended": "বিস্তৃত UI",
+  "theme": "থিম",
+  "dark": "অন্ধকার",
+  "light": "উজ্জল",
+  "system": "সিস্টেম থিম",
+  "accent_color": "প্রভাবশালী রং",
+  "sync_album_color": "অ্যালবাম সুসংগত UI এর রং",
+  "sync_album_color_description": "অ্যালবাম কভারের প্রভাবশালী রঙ UI অ্যাকসেন্ট রঙ হিসাবে ব্যবহার করে",
+  "playback": "সংগীতের প্লেব্যাক",
+  "audio_quality": "শব্দের গুণমান",
+  "high": "উচ্চ",
+  "low": "নিম্ন",
+  "pre_download_play": "আগে গান ডাউনলোড করে পরে চালান ",
+  "pre_download_play_description": "গান স্ট্রিম করার পরিবর্তে, ডাউনলোড করুন এবং প্লে করুন (উচ্চ ব্যান্ডউইথ ব্যবহারকারীদের জন্য প্রস্তাবিত)",
+  "skip_non_music": "গানের নন-মিউজিক সেগমেন্ট এড়িয়ে যান (SponsorBlock)",
+  "blacklist_description": "কালো তালিকাভুক্ত গানের ট্র্যাক এবং শিল্পী",
+  "wait_for_download_to_finish": "ডাউনলোড শেষ হওয়ার জন্য অপেক্ষা করুন",
+  "download_lyrics": "গানের সাথে লিরিক্স ডাউনলোড করুন",
+  "desktop": "ডেস্কটপ",
+  "close_behavior": "বন্ধ করার প্রক্রিয়া",
+  "close": "বন্ধ করুন",
+  "minimize_to_tray": "সিস্টেম ট্রেতে রাখুন",
+  "show_tray_icon": "সিস্টেম ট্রে আইকন দেখান",
+  "about": "বিস্তারিত",
+  "u_love_spotube": "আমরা জানি আপনি Spotube কে ভালবাসেন",
+  "check_for_updates": "আপডেট চেক করুন",
+  "about_spotube": "Spotube সম্পর্কে বিস্তারিত",
+  "blacklist": "কালো তালিকা",
+  "please_sponsor": "স্পনসর/সহায়তা করুন",
+  "spotube_description": "Spotube, একটি কর্মদক্ষ, ক্রস-প্ল্যাটফর্ম, বিনামূল্যের জন্য Spotify ক্লায়েন্ট",
+  "version": "সংস্করণ",
+  "build_number": "বিল্ড নম্বর",
+  "founder": "প্রতিষ্ঠাতা",
+  "repository": "সংগ্রহস্থল",
+  "bug_issues": "বাগ/সমস্যা",
+  "made_with": "❤️ দিয়ে বাংলাদেশে🇧🇩 তৈরি",
+  "kingkor_roy_tirtho": "কিংকর রায় তীর্থ",
+  "copyright": "© 2021-{current_year} কিংকর রায় তীর্থ",
+  "license": "লাইসেন্স",
+  "add_spotify_credentials": "আপনার Spotify লগইন তথ্য যোগ করুন",
+  "credentials_will_not_be_shared_disclaimer": "চিন্তা করবেন না, আপনার কোনো লগইন তথ্য সংগ্রহ করা হবে না বা কারো সাথে শেয়ার করা হবে না",
+  "know_how_to_login": "আপনি কিভাবে লগইন করবেন তা জানেন না?",
+  "follow_step_by_step_guide": "ধাপে ধাপে নির্দেশিকা অনুসরণ করুন",
+  "spotify_cookie": "Spotify {name} কুকি",
+  "cookie_name_cookie": "{name} কুকি",
+  "fill_in_all_fields": "সমস্ত ফর্ম ক্ষেত্র পূরণ করুন",
+  "submit": "জমা দিন",
+  "exit": "প্রস্থান",
+  "previous": "পূর্ববর্তী",
+  "next": "পরবর্তী",
+  "done": "সম্পন্ন",
+  "step_1": "ধাপ 1",
+  "first_go_to": "প্রথমে যান",
+  "login_if_not_logged_in": "এবং যদি আপনি লগইন/সাইন-আপ না থাকেন তবে লগইন/সাইন-আপ করুন",
+  "step_2": "ধাপ 2",
+  "step_2_steps": "১. একবার আপনি লগ ইন করলে, ব্রাউজার ডেভটুল খুলতে F12 বা মাউসের রাইট ক্লিক > \"Inspect to open Browser DevTools\"  টিপুন।\n২. তারপর \"Application\" ট্যাবে যান (Chrome, Edge, Brave etc..) অথবা \"Storage\" Tab (Firefox, Palemoon etc..)\n৩. \"Cookies \" বিভাগে যান তারপর \"https://accounts.spotify.com\" উপবিভাগে যান",
+  "step_3": "ধাপ 3",
+  "step_3_steps": "\"sp_dc\" এবং \"sp_key\" কুকিজের মান কপি করুন",
+  "success_emoji": "আমরা সফল🥳",
+  "success_message": "এখন আপনি সফলভাবে আপনার Spotify অ্যাকাউন্ট দিয়ে লগ ইন করেছেন। সাধুভাত আপনাকে",
+  "step_4": "ধাপ 4",
+  "step_4_steps": "কপি করা \"sp_dc\" এবং \"sp_key\" এর মান সংশ্লিষ্ট ফিল্ডে পেস্ট করুন",
+  "something_went_wrong": "কিছু ভুল হয়েছে",
+  "piped_instance": "Piped সার্ভার এড্রেস",
+  "piped_description": "গান ম্যাচ করার জন্য ব্যবহৃত পাইপড সার্ভার\n এগুলোর মধ্যে কিছু ভাল কাজ নাও করতে পারে৷ তাই নিজ দায়িত্বে ব্যবহার করুন",
+  "generate_playlist": "প্লেলিস্ট তৈরি করুন",
+  "track_exists": "ট্র্যাক {track} ইতিমধ্যে বিদ্যমান",
+  "replace_downloaded_tracks": "সমস্ত ডাউনলোড করা ট্র্যাক প্রতিস্থাপন করুন",
+  "skip_download_tracks": "সমস্ত ডাউনলোড করা ট্র্যাক এ স্কিপ করুন",
+  "do_you_want_to_replace": "আপনি কি বিদ্যমান ট্র্যাকটি প্রতিস্থাপন করতে চান?",
+  "replace": "প্রতিস্থাপন করুন",
+  "skip": "স্কিপ করুন",
+  "select_up_to_count_type": "{count} {type} পর্যন্ত নির্বাচন করুন",
+  "select_genres": "গানের ধরণ নির্বাচন করুন",
+  "add_genres": "গানের ধরণ যুক্ত করুন",
+  "country": "দেশ",
+  "number_of_tracks_generate": "উত্পাদিত ট্র্যাকের সংখ্যা",
+  "acousticness": "অধ্যাত্মিকতা",
+  "danceability": "নৃত্যমূলকতা",
+  "energy": "শক্তি",
+  "instrumentalness": "সাধারণতা",
+  "liveness": "জীবনমুক্ততা",
+  "loudness": "স্বরের উচ্চতা",
+  "speechiness": "বক্তব্যমূলকতা",
+  "valence": "সন্তোষমূলকতা",
+  "popularity": "জনপ্রিয়তা",
+  "key": "কী",
+  "duration": "সময়কাল (সেকেন্ড)",
+  "tempo": "গতি (বিপিএম)",
+  "mode": "মোড",
+  "time_signature": "সময়ের স্বাক্ষর",
+  "short": "সংক্ষিপ্ত",
+  "medium": "মাঝারি",
+  "long": "দীর্ঘ",
+  "min": "সর্বনিম্ন",
+  "max": "সর্বাধিক",
+  "target": "লক্ষ্য",
+  "moderate": "মাঝারি",
+  "deselect_all": "সমস্ত অপচুন করুন",
+  "select_all": "সমস্ত নির্বাচন করুন",
+  "are_you_sure": "আপনি কি নিশ্চিত?",
+  "generating_playlist": "আপনার কাস্টম প্লেলিস্ট তৈরি হচ্ছে...",
+  "selected_count_tracks": "{count} ট্র্যাক নির্বাচিত",
+  "download_warning": "যদি আপনি সমস্ত ট্র্যাকগুলি একসঙ্গে ডাউনলোড করেন, তবে আপনি নিশ্চিতভাবে সঙ্গীত চুরি করছেন এবং সৃষ্টিশীল সমাজে ক্ষতি দিচ্ছেন। আমি আশা করি আপনি এটা সম্পর্কে জানেন। সর্বদা, শিল্পীদের কঠিন পরিশ্রমকে সম্মান করতে চেষ্টা করুন এবং সমর্থন করুন",
+  "download_ip_ban_warning": "তথ্যবিশ্বস্ত করে নেওয়া যায় যে, আপনার IP ঠিকানাটি YouTube দ্বারা স্থানান্তরিত করা হতে পারে যখন সাধারন থেকে বেশি ডাউনলোড অনুরোধ হয়। IP ব্লকের মাধ্যমে আপনি কমপক্ষে ২-৩ মাস ধরে (ঐ IP ডিভাইস থেকে) YouTube ব্যবহার করতে পারবেন না। এবং Spotube কোনও দায়িত্ব সম্পর্কে দায়িত্ব বহন করে না যদি এটি ঘটে।",
+  "by_clicking_accept_terms": "'গ্রহণ' ক্লিক করে আপনি নিম্নলিখিত শর্তাদি স্বীকার করছেন:",
+  "download_agreement_1": "আমি জানি আমি সঙ্গীত চুরি করছি। আমি খারাপ",
+  "download_agreement_2": "আমি কেবলমাত্র তাদের কাজ কেনার জন্য অর্থ নেই কিন্তু যেখানে প্রয়োজন সেখানে আমি শিল্পীদের সমর্থন করব।",
+  "download_agreement_3": "আমি সম্পূর্ণরূপে জানি যে আমার IP YouTube-তে ব্লক হতে পারে এবং আমি Spotube বা তার মালিকানাধীন কোনও দায়িত্ব পেতে পারিনি আমার বর্তমান ক্রিয়াটি দ্বারা সৃষ্ট দুর্ঘটনা করার জন্য",
+  "decline": "অগ্রায়ন করুন",
+  "accept": "গ্রহণ করুন",
+  "details": "বিস্তারিত",
+  "youtube": "YouTube",
+  "channel": "চ্যানেল",
+  "likes": "লাইক",
+  "dislikes": "অপছন্দ",
+  "views": "দর্শনার্থী",
+  "streamUrl": "স্ট্রিম URL",
+  "stop": "বন্ধ করুন",
+  "sort_newest": "নতুনতম অনুসারে সাজান",
+  "sort_oldest": "পুরানোতম অনুসারে সাজান",
+  "sleep_timer": "স্লীপ টাইমার",
+  "mins": "{minutes} মিনিট",
+  "hours": "{hours} ঘন্টা",
+  "hour": "{hours} ঘন্টা",
+  "custom_hours": "কাস্টম ঘন্টা",
+  "logs": "লগ",
+  "developers": "ডেভেলপার",
+  "not_logged_in": "আপনি লগইন করা নেই",
+  "search_mode": "অনুসন্ধান মোড",
+  "youtube_api_type": "YouTube API প্রকার"
+}
\ No newline at end of file
diff --git a/lib/l10n/app_de.arb b/lib/l10n/app_de.arb
new file mode 100644
index 00000000..1b637526
--- /dev/null
+++ b/lib/l10n/app_de.arb
@@ -0,0 +1,253 @@
+{
+  "guest": "Gast",
+  "browse": "Durchsuchen",
+  "search": "Suchen",
+  "library": "Bibliothek",
+  "lyrics": "Songtexte",
+  "settings": "Einstellungen",
+  "genre_categories_filter": "Filtere Kategorien oder Genres...",
+  "genre": "Genre",
+  "personalized": "Personalisiert",
+  "featured": "Empfohlen",
+  "new_releases": "Neue Veröffentlichungen",
+  "songs": "Songs",
+  "playing_track": "Wiedergabe: {track}",
+  "queue_clear_alert": "Dadurch wird die aktuelle Warteschlange gelöscht. {track_length} Titel werden entfernt.\nMöchten Sie fortfahren?",
+  "load_more": "Mehr laden",
+  "playlists": "Playlists",
+  "artists": "Künstler",
+  "albums": "Alben",
+  "tracks": "Titel",
+  "downloads": "Downloads",
+  "filter_playlists": "Filtere deine Playlists...",
+  "liked_tracks": "Gefällt mir-Titel",
+  "liked_tracks_description": "Alle deine geliketen Titel",
+  "create_playlist": "Playlist erstellen",
+  "create_a_playlist": "Erstelle eine Playlist",
+  "create": "Erstellen",
+  "cancel": "Abbrechen",
+  "playlist_name": "Playlist-Name",
+  "name_of_playlist": "Name der Playlist",
+  "description": "Beschreibung",
+  "public": "Öffentlich",
+  "collaborative": "Kollaborativ",
+  "search_local_tracks": "Lokale Titel durchsuchen...",
+  "play": "Wiedergabe",
+  "delete": "Löschen",
+  "none": "Keine",
+  "sort_a_z": "Sortieren nach A-Z",
+  "sort_z_a": "Sortieren nach Z-A",
+  "sort_artist": "Sortieren nach Künstler",
+  "sort_album": "Sortieren nach Album",
+  "sort_tracks": "Titel sortieren",
+  "currently_downloading": "Derzeitige Downloads ({tracks_length})",
+  "cancel_all": "Alle abbrechen",
+  "filter_artist": "Künstler filtern...",
+  "followers": "{followers} Follower",
+  "add_artist_to_blacklist": "Künstler zur Schwarzen Liste hinzufügen",
+  "top_tracks": "Top-Titel",
+  "fans_also_like": "Fans mögen auch",
+  "loading": "Laden...",
+  "artist": "Künstler",
+  "blacklisted": "Auf der Schwarzen Liste",
+  "following": "Folgen",
+  "follow": "Folgen",
+  "artist_url_copied": "Künstler-URL in Zwischenablage kopiert",
+  "added_to_queue": "{tracks} Titel zur Warteschlange hinzugefügt",
+  "filter_albums": "Alben filtern...",
+  "synced": "Synchronisiert",
+  "plain": "Einfach",
+  "shuffle": "Zufällige Wiedergabe",
+  "search_tracks": "Titel durchsuchen...",
+  "released": "Veröffentlicht",
+  "error": "Fehler {error}",
+  "title": "Titel",
+  "time": "Dauer",
+  "more_actions": "Weitere Aktionen",
+  "download_count": "Download ({count})",
+  "add_count_to_playlist": "Zu Playlist hinzufügen ({count})",
+  "add_count_to_queue": "Zur Warteschlange hinzufügen ({count})",
+  "play_count_next": "Als nächstes abspielen ({count})",
+  "album": "Album",
+  "copied_to_clipboard": "{data} in Zwischenablage kopiert",
+  "add_to_following_playlists": "{track} zu folgenden Playlists hinzufügen",
+  "add": "Hinzufügen",
+  "added_track_to_queue": "{track} zur Warteschlange hinzugefügt",
+  "add_to_queue": "Zur Warteschlange hinzufügen",
+  "track_will_play_next": "{track} wird als nächstes abgespielt",
+  "play_next": "Als nächstes abspielen",
+  "removed_track_from_queue": "{track} aus der Warteschlange entfernt",
+  "remove_from_queue": "Aus der Warteschlange entfernen",
+  "remove_from_favorites": "Aus Favoriten entfernen",
+  "save_as_favorite": "Als Favorit speichern",
+  "add_to_playlist": "Zur Playlist hinzufügen",
+  "remove_from_playlist": "Aus der Playlist entfernen",
+  "add_to_blacklist": "Zur Schwarzen Liste hinzufügen",
+  "remove_from_blacklist": "Aus der Schwarzen Liste entfernen",
+  "share": "Teilen",
+  "mini_player": "Mini-Player",
+  "slide_to_seek": "Zum Vor- oder Zurückspulen ziehen",
+  "shuffle_playlist": "Playlist mischen",
+  "unshuffle_playlist": "Playlist nicht mehr mischen",
+  "previous_track": "Vorheriger Track",
+  "next_track": "Nächster Track",
+  "pause_playback": "Wiedergabe pausieren",
+  "resume_playback": "Wiedergabe fortsetzen",
+  "loop_track": "Track wiederholen",
+  "repeat_playlist": "Playlist wiederholen",
+  "queue": "Warteschlange",
+  "alternative_track_sources": "Alternative Track-Quellen",
+  "download_track": "Track herunterladen",
+  "tracks_in_queue": "{tracks} Tracks in der Warteschlange",
+  "clear_all": "Alle löschen",
+  "show_hide_ui_on_hover": "UI beim Überfahren anzeigen/ausblenden",
+  "always_on_top": "Immer im Vordergrund",
+  "exit_mini_player": "Mini-Player verlassen",
+  "download_location": "Download-Speicherort",
+  "account": "Konto",
+  "login_with_spotify": "Mit deinem Spotify-Konto anmelden",
+  "connect_with_spotify": "Mit Spotify verbinden",
+  "logout": "Abmelden",
+  "logout_of_this_account": "Von diesem Konto abmelden",
+  "language_region": "Sprache & Region",
+  "language": "Sprache",
+  "system_default": "Systemstandard",
+  "market_place_region": "Marktplatzregion",
+  "recommendation_country": "Empfehlungsland",
+  "appearance": "Erscheinungsbild",
+  "layout_mode": "Layout-Modus",
+  "override_layout_settings": "Responsiven Layout-Modus-Einstellungen überschreiben",
+  "adaptive": "Adaptiv",
+  "compact": "Kompakt",
+  "extended": "Erweitert",
+  "theme": "Design",
+  "dark": "Dunkel",
+  "light": "Hell",
+  "system": "System",
+  "accent_color": "Akzentfarbe",
+  "sync_album_color": "Albumfarbe synchronisieren",
+  "sync_album_color_description": "Verwendet die dominante Farbe des Album Covers als Akzentfarbe",
+  "playback": "Wiedergabe",
+  "audio_quality": "Audioqualität",
+  "high": "Hoch",
+  "low": "Niedrig",
+  "pre_download_play": "Vorab herunterladen und abspielen",
+  "pre_download_play_description": "Anstatt Audio zu streamen, Bytes herunterladen und abspielen (Empfohlen für Benutzer mit hoher Bandbreite)",
+  "skip_non_music": "Überspringe Nicht-Musik-Segmente (SponsorBlock)",
+  "blacklist_description": "Gesperrte Titel und Künstler",
+  "wait_for_download_to_finish": "Bitte warten Sie, bis der aktuelle Download abgeschlossen ist",
+  "download_lyrics": "Songtexte zusammen mit den Tracks herunterladen",
+  "desktop": "Desktop",
+  "close_behavior": "Verhalten beim Schließen",
+  "close": "Schließen",
+  "minimize_to_tray": "In Taskleiste minimieren",
+  "show_tray_icon": "Systemsymbol anzeigen",
+  "about": "Über",
+  "u_love_spotube": "Wir wissen, dass Sie Spotube lieben",
+  "check_for_updates": "Nach Updates suchen",
+  "about_spotube": "Über Spotube",
+  "blacklist": "Gesperrte Titel",
+  "please_sponsor": "Bitte unterstützen/Spenden Sie",
+  "spotube_description": "Spotube, ein leichtgewichtiger, plattformübergreifender und kostenloser Spotify-Client",
+  "version": "Version",
+  "build_number": "Build-Nummer",
+  "founder": "Gründer",
+  "repository": "Repository",
+  "bug_issues": "Fehler und Probleme",
+  "made_with": "Entwickelt mit ❤️ in Bangladesch 🇧🇩",
+  "kingkor_roy_tirtho": "Kingkor Roy Tirtho",
+  "copyright": "© 2021-{current_year} Kingkor Roy Tirtho",
+  "license": "Lizenz",
+  "add_spotify_credentials": "Fügen Sie Ihre Spotify-Anmeldeinformationen hinzu, um zu starten",
+  "credentials_will_not_be_shared_disclaimer": "Keine Sorge, Ihre Anmeldeinformationen werden nicht erfasst oder mit anderen geteilt",
+  "know_how_to_login": "Wissen Sie nicht, wie es geht?",
+  "follow_step_by_step_guide": "Befolgen Sie die schrittweise Anleitung",
+  "spotify_cookie": "Spotify {name} Cookie",
+  "cookie_name_cookie": "{name} Cookie",
+  "fill_in_all_fields": "Bitte füllen Sie alle Felder aus",
+  "submit": "Senden",
+  "exit": "Beenden",
+  "previous": "Zurück",
+  "next": "Weiter",
+  "done": "Fertig",
+  "step_1": "Schritt 1",
+  "first_go_to": "Gehe zuerst zu",
+  "login_if_not_logged_in": "und melde dich an/registriere dich, falls du nicht angemeldet bist",
+  "step_2": "Schritt 2",
+  "step_2_steps": "1. Wenn du angemeldet bist, drücke F12 oder klicke mit der rechten Maustaste > Inspektion, um die Browser-Entwicklertools zu öffnen.\n2. Gehe dann zum \"Anwendungs\"-Tab (Chrome, Edge, Brave usw.) oder zum \"Storage\"-Tab (Firefox, Palemoon usw.)\n3. Gehe zum Abschnitt \"Cookies\" und dann zum Unterabschnitt \"https://accounts.spotify.com\"",
+  "step_3": "Schritt 3",
+  "step_3_steps": "Kopiere die Werte der Cookies \"sp_dc\" und \"sp_key\"",
+  "success_emoji": "Erfolg🥳",
+  "success_message": "Jetzt bist du erfolgreich mit deinem Spotify-Konto angemeldet. Gut gemacht, Kumpel!",
+  "step_4": "Schritt 4",
+  "step_4_steps": "Füge die kopierten Werte von \"sp_dc\" und \"sp_key\" in die entsprechenden Felder ein",
+  "something_went_wrong": "Etwas ist schiefgelaufen",
+  "piped_instance": "Piped-Serverinstanz",
+  "piped_description": "Die Piped-Serverinstanz, die zur Titelzuordnung verwendet werden soll\nEinige von ihnen funktionieren möglicherweise nicht gut. Verwende sie also auf eigenes Risiko",
+  "generate_playlist": "Playlist generieren",
+  "track_exists": "Track {track} existiert bereits",
+  "replace_downloaded_tracks": "Alle heruntergeladenen Titel ersetzen",
+  "skip_download_tracks": "Das Herunterladen aller heruntergeladenen Titel überspringen",
+  "do_you_want_to_replace": "Möchtest du den vorhandenen Track ersetzen?",
+  "replace": "Ersetzen",
+  "skip": "Überspringen",
+  "select_up_to_count_type": "Wähle bis zu {count} {type} aus",
+  "select_genres": "Genres auswählen",
+  "add_genres": "Genres hinzufügen",
+  "country": "Land",
+  "number_of_tracks_generate": "Anzahl der zu generierenden Titel",
+  "acousticness": "Akustik",
+  "danceability": "Tanzbarkeit",
+  "energy": "Energie",
+  "instrumentalness": "Instrumentalität",
+  "liveness": "Lebendigkeit",
+  "loudness": "Lautstärke",
+  "speechiness": "Sprechanteil",
+  "valence": "Stimmung",
+  "popularity": "Beliebtheit",
+  "key": "Tonart",
+  "duration": "Dauer (s)",
+  "tempo": "Tempo (BPM)",
+  "mode": "Modus",
+  "time_signature": "Taktart",
+  "short": "Kurz",
+  "medium": "Mittel",
+  "long": "Lang",
+  "min": "Min",
+  "max": "Max",
+  "target": "Ziel",
+  "moderate": "Mäßig",
+  "deselect_all": "Alle abwählen",
+  "select_all": "Alle auswählen",
+  "are_you_sure": "Bist du sicher?",
+  "generating_playlist": "Erstelle deine individuelle Wiedergabeliste...",
+  "selected_count_tracks": "{count} Titel ausgewählt",
+  "download_warning": "Wenn du alle Titel in großen Mengen herunterlädst, betreibst du eindeutig Raubkopien von Musik und schadest der kreativen Gesellschaft der Musik. Ich hoffe, dir ist dies bewusst. Versuche immer, die harte Arbeit der Künstler zu respektieren und zu unterstützen.",
+  "download_ip_ban_warning": "Übrigens, deine IP-Adresse kann aufgrund übermäßiger Downloadanfragen von YouTube gesperrt werden. Eine IP-Sperre bedeutet, dass du YouTube (auch wenn du angemeldet bist) für mindestens 2-3 Monate von diesem IP-Gerät aus nicht nutzen kannst. Spotube übernimmt keine Verantwortung, falls dies jemals geschieht.",
+  "by_clicking_accept_terms": "Durch Klicken auf 'Akzeptieren' stimmst du den folgenden Bedingungen zu:",
+  "download_agreement_1": "Ich weiß, dass ich Raubkopien von Musik betreibe. Ich bin böse.",
+  "download_agreement_2": "Ich werde die Künstler, wo immer ich kann, unterstützen, und ich tue dies nur, weil ich kein Geld habe, um ihre Kunst zu kaufen.",
+  "download_agreement_3": "Mir ist vollkommen bewusst, dass meine IP-Adresse auf YouTube gesperrt werden kann, und ich halte Spotube oder seine Eigentümer/Mitarbeiter nicht für etwaige Unfälle verantwortlich, die durch meine derzeitige Handlung verursacht werden.",
+  "decline": "Ablehnen",
+  "accept": "Akzeptieren",
+  "details": "Details",
+  "youtube": "YouTube",
+  "channel": "Kanal",
+  "likes": "Likes",
+  "dislikes": "Dislikes",
+  "views": "Aufrufe",
+  "streamUrl": "Stream-URL",
+  "stop": "Stopp",
+  "sort_newest": "Nach neuesten Hinzufügungen sortieren",
+  "sort_oldest": "Nach ältesten Hinzufügungen sortieren",
+  "sleep_timer": "Schlaftimer",
+  "mins": "{minutes} Minuten",
+  "hours": "{hours} Stunden",
+  "hour": "{hours} Stunde",
+  "custom_hours": "Benutzerdefinierte Stunden",
+  "logs": "Protokolle",
+  "developers": "Entwickler",
+  "not_logged_in": "Sie sind nicht angemeldet",
+  "search_mode": "Suchmodus",
+  "youtube_api_type": "YouTube API-Typ"
+}
\ No newline at end of file
diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb
new file mode 100644
index 00000000..acee737e
--- /dev/null
+++ b/lib/l10n/app_en.arb
@@ -0,0 +1,253 @@
+{
+  "guest": "Guest",
+  "browse": "Browse",
+  "search": "Search",
+  "library": "Library",
+  "lyrics": "Lyrics",
+  "settings": "Settings",
+  "genre_categories_filter": "Filter categories or genres...",
+  "genre": "Genre",
+  "personalized": "Personalized",
+  "featured": "Featured",
+  "new_releases": "New Releases",
+  "songs": "Songs",
+  "playing_track": "Playing {track}",
+  "queue_clear_alert": "This will clear the current queue. {track_length} tracks will be removed\nDo you want to continue?",
+  "load_more": "Load more",
+  "playlists": "Playlists",
+  "artists": "Artists",
+  "albums": "Albums",
+  "tracks": "Tracks",
+  "downloads": "Downloads",
+  "filter_playlists": "Filter your playlists...",
+  "liked_tracks": "Liked Tracks",
+  "liked_tracks_description": "All your liked tracks",
+  "create_playlist": "Create Playlist",
+  "create_a_playlist": "Create a playlist",
+  "create": "Create",
+  "cancel": "Cancel",
+  "playlist_name": "Playlist Name",
+  "name_of_playlist": "Name of the playlist",
+  "description": "Description",
+  "public": "Public",
+  "collaborative": "Collaborative",
+  "search_local_tracks": "Search local tracks...",
+  "play": "Play",
+  "delete": "Delete",
+  "none": "None",
+  "sort_a_z": "Sort by A-Z",
+  "sort_z_a": "Sort by Z-A",
+  "sort_artist": "Sort by Artist",
+  "sort_album": "Sort by Album",
+  "sort_tracks": "Sort Tracks",
+  "currently_downloading": "Currently Downloading ({tracks_length})",
+  "cancel_all": "Cancel All",
+  "filter_artist": "Filter artists...",
+  "followers": "{followers} Followers",
+  "add_artist_to_blacklist": "Add artist to blacklist",
+  "top_tracks": "Top Tracks",
+  "fans_also_like": "Fans also like",
+  "loading": "Loading...",
+  "artist": "Artist",
+  "blacklisted": "Blacklisted",
+  "following": "Following",
+  "follow": "Follow",
+  "artist_url_copied": "Artist URL copied to clipboard",
+  "added_to_queue": "Added {tracks} tracks to queue",
+  "filter_albums": "Filter albums...",
+  "synced": "Synced",
+  "plain": "Plain",
+  "shuffle": "Shuffle",
+  "search_tracks": "Search tracks...",
+  "released": "Released",
+  "error": "Error {error}",
+  "title": "Title",
+  "time": "Time",
+  "more_actions": "More actions",
+  "download_count": "Download ({count})",
+  "add_count_to_playlist": "Add ({count}) to Playlist",
+  "add_count_to_queue": "Add ({count}) to Queue",
+  "play_count_next": "Play ({count}) next",
+  "album": "Album",
+  "copied_to_clipboard": "Copied {data} to clipboard",
+  "add_to_following_playlists": "Add {track} to following Playlists",
+  "add": "Add",
+  "added_track_to_queue": "Added {track} to queue",
+  "add_to_queue": "Add to queue",
+  "track_will_play_next": "{track} will play next",
+  "play_next": "Play next",
+  "removed_track_from_queue": "Removed {track} from queue",
+  "remove_from_queue": "Remove from queue",
+  "remove_from_favorites": "Remove from favorites",
+  "save_as_favorite": "Save as favorite",
+  "add_to_playlist": "Add to playlist",
+  "remove_from_playlist": "Remove from playlist",
+  "add_to_blacklist": "Add to blacklist",
+  "remove_from_blacklist": "Remove from blacklist",
+  "share": "Share",
+  "mini_player": "Mini Player",
+  "slide_to_seek": "Slide to seek forward or backward",
+  "shuffle_playlist": "Shuffle playlist",
+  "unshuffle_playlist": "Unshuffle playlist",
+  "previous_track": "Previous track",
+  "next_track": "Next track",
+  "pause_playback": "Pause Playback",
+  "resume_playback": "Resume Playback",
+  "loop_track": "Loop track",
+  "repeat_playlist": "Repeat playlist",
+  "queue": "Queue",
+  "alternative_track_sources": "Alternative track sources",
+  "download_track": "Download track",
+  "tracks_in_queue": "{tracks} tracks in queue",
+  "clear_all": "Clear all",
+  "show_hide_ui_on_hover": "Show/Hide UI on hover",
+  "always_on_top": "Always on top",
+  "exit_mini_player": "Exit Mini player",
+  "download_location": "Download location",
+  "account": "Account",
+  "login_with_spotify": "Login with your Spotify account",
+  "connect_with_spotify": "Connect with Spotify",
+  "logout": "Logout",
+  "logout_of_this_account": "Logout of this account",
+  "language_region": "Language & Region",
+  "language": "Language",
+  "system_default": "System Default",
+  "market_place_region": "Marketplace Region",
+  "recommendation_country": "Recommendation Country",
+  "appearance": "Appearance",
+  "layout_mode": "Layout Mode",
+  "override_layout_settings": "Override responsive layout mode settings",
+  "adaptive": "Adaptive",
+  "compact": "Compact",
+  "extended": "Extended",
+  "theme": "Theme",
+  "dark": "Dark",
+  "light": "Light",
+  "system": "System",
+  "accent_color": "Accent Color",
+  "sync_album_color": "Sync album color",
+  "sync_album_color_description": "Uses the dominant color of the album art as the accent color",
+  "playback": "Playback",
+  "audio_quality": "Audio Quality",
+  "high": "High",
+  "low": "Low",
+  "pre_download_play": "Pre-download and play",
+  "pre_download_play_description": "Instead of streaming audio, download bytes and play instead (Recommended for higher bandwidth users)",
+  "skip_non_music": "Skip non-music segments (SponsorBlock)",
+  "blacklist_description": "Blacklisted tracks and artists",
+  "wait_for_download_to_finish": "Please wait for the current download to finish",
+  "download_lyrics": "Download lyrics along with tracks",
+  "desktop": "Desktop",
+  "close_behavior": "Close Behavior",
+  "close": "Close",
+  "minimize_to_tray": "Minimize to tray",
+  "show_tray_icon": "Show System tray icon",
+  "about": "About",
+  "u_love_spotube": "We know you love Spotube",
+  "check_for_updates": "Check for updates",
+  "about_spotube": "About Spotube",
+  "blacklist": "Blacklist",
+  "please_sponsor": "Please Sponsor/Donate",
+  "spotube_description": "Spotube, a light-weight, cross-platform, free-for-all spotify client",
+  "version": "Version",
+  "build_number": "Build Number",
+  "founder": "Founder",
+  "repository": "Repository",
+  "bug_issues": "Bug+Issues",
+  "made_with": "Made with ❤️ in Bangladesh🇧🇩",
+  "kingkor_roy_tirtho": "Kingkor Roy Tirtho",
+  "copyright": "© 2021-{current_year} Kingkor Roy Tirtho",
+  "license": "License",
+  "add_spotify_credentials": "Add your spotify credentials to get started",
+  "credentials_will_not_be_shared_disclaimer": "Don't worry, any of your credentials won't be collected or shared with anyone",
+  "know_how_to_login": "Don't know how to do this?",
+  "follow_step_by_step_guide": "Follow along the Step by Step guide",
+  "spotify_cookie": "Spotify {name} Cookie",
+  "cookie_name_cookie": "{name} Cookie",
+  "fill_in_all_fields": "Please fill in all the fields",
+  "submit": "Submit",
+  "exit": "Exit",
+  "previous": "Previous",
+  "next": "Next",
+  "done": "Done",
+  "step_1": "Step 1",
+  "first_go_to": "First, Go to",
+  "login_if_not_logged_in": "and Login/Signup if you are not logged in",
+  "step_2": "Step 2",
+  "step_2_steps": "1. Once you're logged in, press F12 or Mouse Right Click > Inspect to Open the Browser devtools.\n2. Then go the \"Application\" Tab (Chrome, Edge, Brave etc..) or \"Storage\" Tab (Firefox, Palemoon etc..)\n3. Go to the \"Cookies\" section then the \"https://accounts.spotify.com\" subsection",
+  "step_3": "Step 3",
+  "step_3_steps": "Copy the values of \"sp_dc\" and \"sp_key\" Cookies",
+  "success_emoji": "Success🥳",
+  "success_message": "Now you're successfully Logged In with your Spotify account. Good Job, mate!",
+  "step_4": "Step 4",
+  "step_4_steps": "Paste the copied \"sp_dc\" and \"sp_key\" values in the respective fields",
+  "something_went_wrong": "Something went wrong",
+  "piped_instance": "Piped Server Instance",
+  "piped_description": "The Piped server instance to use for track matching\nSome of them might not work well. So use at your own risk",
+  "generate_playlist": "Generate Playlist",
+  "track_exists": "Track {track} already exists",
+  "replace_downloaded_tracks": "Replace all downloaded tracks",
+  "skip_download_tracks": "Skip downloading all downloaded tracks",
+  "do_you_want_to_replace": "Do you want to replace the existing track??",
+  "replace": "Replace",
+  "skip": "Skip",
+  "select_up_to_count_type": "Select up to {count} {type}",
+  "select_genres": "Select Genres",
+  "add_genres": "Add Genres",
+  "country": "Country",
+  "number_of_tracks_generate": "Number of tracks to generate",
+  "acousticness": "Acousticness",
+  "danceability": "Danceability",
+  "energy": "Energy",
+  "instrumentalness": "Instrumentalness",
+  "liveness": "Liveness",
+  "loudness": "Loudness",
+  "speechiness": "Speechiness",
+  "valence": "Valence",
+  "popularity": "Popularity",
+  "key": "Key",
+  "duration": "Duration (s)",
+  "tempo": "Tempo (BPM)",
+  "mode": "Mode",
+  "time_signature": "Time Signature",
+  "short": "Short",
+  "medium": "Medium",
+  "long": "Long",
+  "min": "Min",
+  "max": "Max",
+  "target": "Target",
+  "moderate": "Moderate",
+  "deselect_all": "Deselect All",
+  "select_all": "Select All",
+  "are_you_sure": "Are you sure?",
+  "generating_playlist": "Generating your custom playlist...",
+  "selected_count_tracks": "Selected {count} tracks",
+  "download_warning": "If you download all Tracks at bulk you're clearly pirating Music & causing damage to the creative society of Music. I hope you are aware of this. Always, try respecting & supporting Artist's hard work",
+  "download_ip_ban_warning": "BTW, your IP can get blocked on YouTube due excessive download requests than usual. IP block means you can't use YouTube (even if you're logged in) for at least 2-3 months from that IP device. And Spotube doesn't hold any responsibility if this ever happens",
+  "by_clicking_accept_terms": "By clicking 'accept' you agree to following terms:",
+  "download_agreement_1": "I know I'm pirating Music. I'm bad",
+  "download_agreement_2": "I'll support the Artist wherever I can and I'm only doing this because I don't have money to buy their art",
+  "download_agreement_3": "I'm completely aware that my IP can get blocked on YouTube & I don't hold Spotube or his owners/contributors responsible for any accidents caused by my current action",
+  "decline": "Decline",
+  "accept": "Accept",
+  "details": "Details",
+  "youtube": "YouTube",
+  "channel": "Channel",
+  "likes": "Likes",
+  "dislikes": "Dislikes",
+  "views": "Views",
+  "streamUrl": "Stream URL",
+  "stop": "Stop",
+  "sort_newest": "Sort by newest added",
+  "sort_oldest": "Sort by oldest added",
+  "sleep_timer": "Sleep Timer",
+  "mins": "{minutes} Minutes",
+  "hours": "{hours} Hours",
+  "hour": "{hours} Hour",
+  "custom_hours": "Custom Hours",
+  "logs": "Logs",
+  "developers": "Developers",
+  "not_logged_in": "You're not logged in",
+  "search_mode": "Search Mode",
+  "youtube_api_type": "YouTube API Type"
+}
\ No newline at end of file
diff --git a/lib/l10n/app_fr.arb b/lib/l10n/app_fr.arb
new file mode 100644
index 00000000..681d7114
--- /dev/null
+++ b/lib/l10n/app_fr.arb
@@ -0,0 +1,253 @@
+{
+  "guest": "Invité",
+  "browse": "Explorer",
+  "search": "Rechercher",
+  "library": "Bibliothèque",
+  "lyrics": "Paroles",
+  "settings": "Paramètres",
+  "genre_categories_filter": "Filtrer les catégories ou les genres...",
+  "genre": "Genre",
+  "personalized": "Personnalisé",
+  "featured": "En vedette",
+  "new_releases": "Nouvelles sorties",
+  "songs": "Chansons",
+  "playing_track": "Lecture de {track}",
+  "queue_clear_alert": "Cela effacera la file d'attente actuelle. {track_length} pistes seront supprimées\nVoulez-vous continuer?",
+  "load_more": "Charger plus",
+  "playlists": "Listes de lecture",
+  "artists": "Artistes",
+  "albums": "Albums",
+  "tracks": "Pistes",
+  "downloads": "Téléchargements",
+  "filter_playlists": "Filtrer vos listes de lecture...",
+  "liked_tracks": "Pistes aimées",
+  "liked_tracks_description": "Toutes vos pistes aimées",
+  "create_playlist": "Créer une liste de lecture",
+  "create_a_playlist": "Créer une liste de lecture",
+  "create": "Créer",
+  "cancel": "Annuler",
+  "playlist_name": "Nom de la liste de lecture",
+  "name_of_playlist": "Nom de la liste de lecture",
+  "description": "Description",
+  "public": "Public",
+  "collaborative": "Collaborative",
+  "search_local_tracks": "Rechercher des pistes locales...",
+  "play": "Lecture",
+  "delete": "Supprimer",
+  "none": "Aucun",
+  "sort_a_z": "Trier par ordre alphabétique",
+  "sort_z_a": "Trier par ordre alphabétique inverse",
+  "sort_artist": "Trier par artiste",
+  "sort_album": "Trier par album",
+  "sort_tracks": "Trier les pistes",
+  "currently_downloading": "Téléchargement en cours ({tracks_length})",
+  "cancel_all": "Tout annuler",
+  "filter_artist": "Filtrer les artistes...",
+  "followers": "{followers} abonnés",
+  "add_artist_to_blacklist": "Ajouter l'artiste à la liste noire",
+  "top_tracks": "Meilleures pistes",
+  "fans_also_like": "Les fans aiment aussi",
+  "loading": "Chargement...",
+  "artist": "Artiste",
+  "blacklisted": "Liste noire",
+  "following": "Abonné",
+  "follow": "S'abonner",
+  "artist_url_copied": "URL de l'artiste copiée dans le presse-papiers",
+  "added_to_queue": "{tracks} pistes ajoutées à la file d'attente",
+  "filter_albums": "Filtrer les albums...",
+  "synced": "Synchronisé",
+  "plain": "Simple",
+  "shuffle": "Lecture aléatoire",
+  "search_tracks": "Rechercher des pistes...",
+  "released": "Sorti",
+  "error": "Erreur {error}",
+  "title": "Titre",
+  "time": "Durée",
+  "more_actions": "Plus d'actions",
+  "download_count": "Téléchargement ({count})",
+  "add_count_to_playlist": "Ajouter ({count}) à la liste de lecture",
+  "add_count_to_queue": "Ajouter ({count}) à la file d'attente",
+  "play_count_next": "Lire ({count}) ensuite",
+  "album": "Album",
+  "copied_to_clipboard": "{data} copié dans le presse-papiers",
+  "add_to_following_playlists": "Ajouter {track} aux listes de lecture suivantes",
+  "add": "Ajouter",
+  "added_track_to_queue": "{track} ajouté à la file d'attente",
+  "add_to_queue": "Ajouter à la file d'attente",
+  "track_will_play_next": "{track} sera joué ensuite",
+  "play_next": "Lire ensuite",
+  "removed_track_from_queue": "{track} retiré de la file d'attente",
+  "remove_from_queue": "Retirer de la file d'attente",
+  "remove_from_favorites": "Retirer des favoris",
+  "save_as_favorite": "Enregistrer comme favori",
+  "add_to_playlist": "Ajouter à la liste de lecture",
+  "remove_from_playlist": "Retirer de la liste de lecture",
+  "add_to_blacklist": "Ajouter à la liste noire",
+  "remove_from_blacklist": "Retirer de la liste noire",
+  "share": "Partager",
+  "mini_player": "Lecteur mini",
+  "slide_to_seek": "Faites glisser pour avancer ou reculer",
+  "shuffle_playlist": "Lecture aléatoire de la liste de lecture",
+  "unshuffle_playlist": "Annuler la lecture aléatoire de la liste de lecture",
+  "previous_track": "Piste précédente",
+  "next_track": "Piste suivante",
+  "pause_playback": "Mettre en pause la lecture",
+  "resume_playback": "Reprendre la lecture",
+  "loop_track": "Lecture en boucle de la piste",
+  "repeat_playlist": "Répéter la liste de lecture",
+  "queue": "File d'attente",
+  "alternative_track_sources": "Sources alternatives de pistes",
+  "download_track": "Télécharger la piste",
+  "tracks_in_queue": "{tracks} pistes dans la file d'attente",
+  "clear_all": "Tout effacer",
+  "show_hide_ui_on_hover": "Afficher/Masquer l'interface utilisateur au survol",
+  "always_on_top": "Toujours au-dessus",
+  "exit_mini_player": "Quitter le lecteur mini",
+  "download_location": "Emplacement de téléchargement",
+  "account": "Compte",
+  "login_with_spotify": "Se connecter avec votre compte Spotify",
+  "connect_with_spotify": "Se connecter avec Spotify",
+  "logout": "Se déconnecter",
+  "logout_of_this_account": "Se déconnecter de ce compte",
+  "language_region": "Langue et région",
+  "language": "Langue",
+  "system_default": "Paramètres par défaut du système",
+  "market_place_region": "Région du marché",
+  "recommendation_country": "Pays de recommandation",
+  "appearance": "Apparence",
+  "layout_mode": "Mode de mise en page",
+  "override_layout_settings": "Remplacer les paramètres de mise en page adaptative",
+  "adaptive": "Adaptatif",
+  "compact": "Compact",
+  "extended": "Étendu",
+  "theme": "Thème",
+  "dark": "Sombre",
+  "light": "Clair",
+  "system": "Système",
+  "accent_color": "Couleur d'accentuation",
+  "sync_album_color": "Synchroniser la couleur de l'album",
+  "sync_album_color_description": "Utilise la couleur dominante de l'art de l'album comme couleur d'accentuation",
+  "playback": "Lecture",
+  "audio_quality": "Qualité audio",
+  "high": "Haute",
+  "low": "Basse",
+  "pre_download_play": "Pré-télécharger et lire",
+  "pre_download_play_description": "Au lieu de diffuser de l'audio, téléchargez les octets et lisez-les à la place (recommandé pour les utilisateurs à bande passante élevée)",
+  "skip_non_music": "Ignorer les segments non musicaux (SponsorBlock)",
+  "blacklist_description": "Pistes et artistes en liste noire",
+  "wait_for_download_to_finish": "Veuillez attendre la fin du téléchargement en cours",
+  "download_lyrics": "Télécharger les paroles avec les pistes",
+  "desktop": "Bureau",
+  "close_behavior": "Comportement de fermeture",
+  "close": "Fermer",
+  "minimize_to_tray": "Réduire dans la zone de notification",
+  "show_tray_icon": "Afficher l'icône de la zone de notification",
+  "about": "À propos",
+  "u_love_spotube": "Nous savons que vous aimez Spotube",
+  "check_for_updates": "Vérifier les mises à jour",
+  "about_spotube": "À propos de Spotube",
+  "blacklist": "Liste noire",
+  "please_sponsor": "S'il vous plaît Sponsoriser/Donner",
+  "spotube_description": "Spotube, un client Spotify léger, multiplateforme et gratuit pour tous",
+  "version": "Version",
+  "build_number": "Numéro de version",
+  "founder": "Fondateur",
+  "repository": "Dépôt",
+  "bug_issues": "Bugs + Problèmes",
+  "made_with": "Fabriqué avec ❤️ au Bangladesh🇧🇩",
+  "kingkor_roy_tirtho": "Kingkor Roy Tirtho",
+  "copyright": "© 2021-{current_year} Kingkor Roy Tirtho",
+  "license": "Licence",
+  "add_spotify_credentials": "Ajoutez vos identifiants Spotify pour commencer",
+  "credentials_will_not_be_shared_disclaimer": "Ne vous inquiétez pas, vos identifiants ne seront ni collectés ni partagés avec qui que ce soit",
+  "know_how_to_login": "Vous ne savez pas comment faire?",
+  "follow_step_by_step_guide": "Suivez le guide étape par étape",
+  "spotify_cookie": "Cookie Spotify {name}",
+  "cookie_name_cookie": "Cookie {name}",
+  "fill_in_all_fields": "Veuillez remplir tous les champs",
+  "submit": "Soumettre",
+  "exit": "Quitter",
+  "previous": "Précédent",
+  "next": "Suivant",
+  "done": "Terminé",
+  "step_1": "Étape 1",
+  "first_go_to": "Tout d'abord, allez sur",
+  "login_if_not_logged_in": "et connectez-vous/inscrivez-vous si vous n'êtes pas connecté",
+  "step_2": "Étape 2",
+  "step_2_steps": "1. Une fois connecté, appuyez sur F12 ou clic droit de la souris > Inspecter pour ouvrir les outils de développement du navigateur.\n2. Ensuite, allez dans l'onglet \"Application\" (Chrome, Edge, Brave, etc.) ou l'onglet \"Stockage\" (Firefox, Palemoon, etc.)\n3. Allez dans la section \"Cookies\", puis dans la sous-section \"https://accounts.spotify.com\"",
+  "step_3": "Étape 3",
+  "step_3_steps": "Copiez les valeurs des cookies \"sp_dc\" et \"sp_key\"",
+  "success_emoji": "Succès🥳",
+  "success_message": "Vous êtes maintenant connecté avec succès à votre compte Spotify. Bon travail, mon ami!",
+  "step_4": "Étape 4",
+  "step_4_steps": "Collez les valeurs copiées de \"sp_dc\" et \"sp_key\" dans les champs respectifs",
+  "something_went_wrong": "Quelque chose s'est mal passé",
+  "piped_instance": "Instance pipée",
+  "piped_description": "L'instance de serveur Piped à utiliser pour la correspondance des pistes\nCertaines d'entre elles peuvent ne pas fonctionner correctement. Alors utilisez à vos risques et périls",
+  "generate_playlist": "Générer une playlist",
+  "track_exists": "La piste {track} existe déjà",
+  "replace_downloaded_tracks": "Remplacer toutes les pistes téléchargées",
+  "skip_download_tracks": "Ignorer le téléchargement de toutes les pistes téléchargées",
+  "do_you_want_to_replace": "Voulez-vous remplacer la piste existante ?",
+  "replace": "Remplacer",
+  "skip": "Passer",
+  "select_up_to_count_type": "Sélectionnez jusqu'à {count} {type}",
+  "select_genres": "Sélectionner les genres",
+  "add_genres": "Ajouter des genres",
+  "country": "Pays",
+  "number_of_tracks_generate": "Nombre de pistes à générer",
+  "acousticness": "Acoustique",
+  "danceability": "Dansabilité",
+  "energy": "Énergie",
+  "instrumentalness": "Instrumentalité",
+  "liveness": "Interprétation en direct",
+  "loudness": "Sonorité",
+  "speechiness": "Parlé",
+  "valence": "Valeur émotionnelle",
+  "popularity": "Popularité",
+  "key": "Clé",
+  "duration": "Durée (s)",
+  "tempo": "Tempo (BPM)",
+  "mode": "Mode",
+  "time_signature": "Signature rythmique",
+  "short": "Court",
+  "medium": "Moyen",
+  "long": "Long",
+  "min": "Min",
+  "max": "Max",
+  "target": "Cible",
+  "moderate": "Modéré",
+  "deselect_all": "Tout désélectionner",
+  "select_all": "Tout sélectionner",
+  "are_you_sure": "Êtes-vous sûr(e) ?",
+  "generating_playlist": "Génération de votre playlist personnalisée en cours...",
+  "selected_count_tracks": "{count} pistes sélectionnées",
+  "download_warning": "Si vous téléchargez toutes les pistes en vrac, vous violez clairement les droits d'auteur de la musique et vous causez des dommages à la société créative de la musique. J'espère que vous en êtes conscient. Essayez toujours de respecter et de soutenir le travail acharné des artistes.",
+  "download_ip_ban_warning": "Au fait, votre adresse IP peut être bloquée sur YouTube en raison d'une demande excessive de téléchargements par rapport à la normale. Le blocage de l'IP signifie que vous ne pourrez pas utiliser YouTube (même si vous êtes connecté) pendant au moins 2 à 3 mois à partir de cet appareil IP. Et Spotube ne peut être tenu responsable si cela se produit.",
+  "by_clicking_accept_terms": "En cliquant sur 'accepter', vous acceptez les conditions suivantes :",
+  "download_agreement_1": "Je sais que je pirate de la musique. Je suis méchant(e).",
+  "download_agreement_2": "Je soutiendrai l'artiste autant que possible et je ne fais cela que parce que je n'ai pas d'argent pour acheter leur art.",
+  "download_agreement_3": "Je suis parfaitement conscient(e) que mon adresse IP peut être bloquée sur YouTube et je ne tiens pas Spotube ni ses propriétaires/contributeurs responsables de tout accident causé par mon action actuelle.",
+  "decline": "Refuser",
+  "accept": "Accepter",
+  "details": "Détails",
+  "youtube": "YouTube",
+  "channel": "Chaîne",
+  "likes": "J'aime",
+  "dislikes": "Je n'aime pas",
+  "views": "Vues",
+  "streamUrl": "URL de diffusion",
+  "stop": "Arrêter",
+  "sort_newest": "Trier par les plus récents",
+  "sort_oldest": "Trier par les plus anciens",
+  "sleep_timer": "Minuteur de veille",
+  "mins": "{minutes} minutes",
+  "hours": "{hours} heures",
+  "hour": "{hours} heure",
+  "custom_hours": "Heures personnalisées",
+  "logs": "Journaux",
+  "developers": "Développeurs",
+  "not_logged_in": "Vous n'êtes pas connecté(e)",
+  "search_mode": "Mode de recherche",
+  "youtube_api_type": "Type d'API YouTube"
+}
\ No newline at end of file
diff --git a/lib/l10n/app_hi.arb b/lib/l10n/app_hi.arb
new file mode 100644
index 00000000..1645b294
--- /dev/null
+++ b/lib/l10n/app_hi.arb
@@ -0,0 +1,253 @@
+{
+  "guest": "अतिथि",
+  "browse": "ब्राउज़ करें",
+  "search": "खोजें",
+  "library": "लाइब्रेरी",
+  "lyrics": "गीतों के बोल",
+  "settings": "सेटिंग्स",
+  "genre_categories_filter": "श्रेणियों या जानरों को फिल्टर करें...",
+  "genre": "जानर",
+  "personalized": "व्यक्तिगत",
+  "featured": "विशेष रुप से प्रदर्शित",
+  "new_releases": "नई रिलीज़",
+  "songs": "गाने",
+  "playing_track": "{track} चल रहा है",
+  "queue_clear_alert": "यह मौजूदा कतार को साफ़ कर देगा। {track_length} ट्रैक हटा दिए जाएंगे\nक्या आप जारी रखना चाहते हैं?",
+  "load_more": "और लोड करें",
+  "playlists": "प्लेलिस्ट",
+  "artists": "कलाकार",
+  "albums": "एल्बम",
+  "tracks": "ट्रैक",
+  "downloads": "डाउनलोड",
+  "filter_playlists": "अपनी प्लेलिस्टों को फ़िल्टर करें...",
+  "liked_tracks": "पसंदीदा ट्रैक",
+  "liked_tracks_description": "आपके सभी पसंदीदा ट्रैक",
+  "create_playlist": "प्लेलिस्ट बनाएं",
+  "create_a_playlist": "एक प्लेलिस्ट बनाएं",
+  "create": "बनाएं",
+  "cancel": "रद्द करें",
+  "playlist_name": "प्लेलिस्ट का नाम",
+  "name_of_playlist": "प्लेलिस्ट का नाम",
+  "description": "विवरण",
+  "public": "सार्वजनिक",
+  "collaborative": "सहयोगी",
+  "search_local_tracks": "स्थानीय ट्रैक खोजें...",
+  "play": "चलाएँ",
+  "delete": "हटाएँ",
+  "none": "कोई नहीं",
+  "sort_a_z": "A-Z सॉर्ट करें",
+  "sort_z_a": "Z-A सॉर्ट करें",
+  "sort_artist": "कलाकार के अनुसार सॉर्ट करें",
+  "sort_album": "एल्बम के अनुसार सॉर्ट करें",
+  "sort_tracks": "ट्रैक को सॉर्ट करें",
+  "currently_downloading": "वर्तमान में डाउनलोड हो रहा है ({tracks_length})",
+  "cancel_all": "सभी को रद्द करें",
+  "filter_artist": "कलाकारों को फ़िल्टर करें...",
+  "followers": "{followers} फॉलोअर्स",
+  "add_artist_to_blacklist": "काल सूची में कलाकार जोड़ें",
+  "top_tracks": "शीर्ष ट्रैक",
+  "fans_also_like": "फैंस भी पसंद करते हैं",
+  "loading": "लोड हो रहा है...",
+  "artist": "कलाकार",
+  "blacklisted": "काल सूची में है",
+  "following": "फॉलो करना",
+  "follow": "फॉलो करें",
+  "artist_url_copied": "कलाकार URL क्लिपबोर्ड पर कॉपी हुआ",
+  "added_to_queue": "{tracks} ट्रैक कतार में जोड़े गए",
+  "filter_albums": "एल्बमों को फ़िल्टर करें...",
+  "synced": "सिंक किया गया",
+  "plain": "सादा",
+  "shuffle": "शफल",
+  "search_tracks": "ट्रैक खोजें...",
+  "released": "जारी हुआ",
+  "error": "त्रुटि {error}",
+  "title": "शीर्षक",
+  "time": "समय",
+  "more_actions": "अधिक कार्रवाई",
+  "download_count": "डाउनलोड ({count})",
+  "add_count_to_playlist": "({count}) को प्लेलिस्ट में जोड़ें",
+  "add_count_to_queue": "({count}) को कतार में जोड़ें",
+  "play_count_next": "({count}) अगले में चलाएँ",
+  "album": "एल्बम",
+  "copied_to_clipboard": "{data} क्लिपबोर्ड पर कॉपी किया गया",
+  "add_to_following_playlists": "{track} को निम्नलिखित प्लेलिस्ट में जोड़ें",
+  "add": "जोड़ें",
+  "added_track_to_queue": "{track} को कतार में जोड़ दिया गया",
+  "add_to_queue": "कतार में जोड़ें",
+  "track_will_play_next": "{track} अगले में चलेगा",
+  "play_next": "अगले में चलाएँ",
+  "removed_track_from_queue": "{track} को कतार से हटा दिया गया",
+  "remove_from_queue": "कतार से हटाएँ",
+  "remove_from_favorites": "पसंदीदा से हटाएँ",
+  "save_as_favorite": "पसंदीदा के रूप में सहेजें",
+  "add_to_playlist": "प्लेलिस्ट में जोड़ें",
+  "remove_from_playlist": "प्लेलिस्ट से हटाएँ",
+  "add_to_blacklist": "ब्लैकलिस्ट में जोड़ें",
+  "remove_from_blacklist": "ब्लैकलिस्ट से हटाएँ",
+  "share": "साझा करें",
+  "mini_player": "मिनी प्लेयर",
+  "slide_to_seek": "आगे या पीछे खोजने के लिए स्लाइड करें",
+  "shuffle_playlist": "प्लेलिस्ट शफल करें",
+  "unshuffle_playlist": "अनशफल प्लेलिस्ट",
+  "previous_track": "पिछला ट्रैक",
+  "next_track": "अगला ट्रैक",
+  "pause_playback": "वापसी बंद करें",
+  "resume_playback": "पुनः चलाना",
+  "loop_track": "लूप ट्रैक",
+  "repeat_playlist": "प्लेलिस्ट दोहराएं",
+  "queue": "कतार",
+  "alternative_track_sources": "वैकल्पिक ट्रैक स्रोत",
+  "download_track": "ट्रैक डाउनलोड करें",
+  "tracks_in_queue": "{tracks} ट्रैक कतार में हैं",
+  "clear_all": "सभी हटाएं",
+  "show_hide_ui_on_hover": "होवर पर यूआई दिखाएँ/छिपाएँ",
+  "always_on_top": "हमेशा ऊपर हो",
+  "exit_mini_player": "मिनी प्लेयर से बाहर निकलें",
+  "download_location": "डाउनलोड स्थान",
+  "account": "खाता",
+  "login_with_spotify": "अपने Spotify खाते से लॉग इन करें",
+  "connect_with_spotify": "Spotify से कनेक्ट करें",
+  "logout": "लॉगआउट",
+  "logout_of_this_account": "इस खाते से लॉगआउट करें",
+  "language_region": "भाषा और क्षेत्र",
+  "language": "भाषा",
+  "system_default": "सिस्टम डिफ़ॉल्ट",
+  "market_place_region": "मार्केटप्लेस क्षेत्र",
+  "recommendation_country": "सिफ़ारिश देने वाला देश",
+  "appearance": "दिखने में",
+  "layout_mode": "लेआउट मोड",
+  "override_layout_settings": "ओवरराइड रेस्पॉन्सिव लेआउट मोड सेटिंग्स",
+  "adaptive": "अनुकूल",
+  "compact": "कॉम्पैक्ट",
+  "extended": "विस्तृत",
+  "theme": "थीम",
+  "dark": "डार्क",
+  "light": "लाइट",
+  "system": "सिस्टम",
+  "accent_color": "अक्षरशैली का रंग",
+  "sync_album_color": "एल्बम का रंग सिंक करें",
+  "sync_album_color_description": "एल्बम कला का प्रधान रंग एक्सेंट रंग के रूप में उपयोग किया जाता है",
+  "playback": "प्लेबैक",
+  "audio_quality": "ऑडियो क्वालिटी",
+  "high": "उच्च",
+  "low": "निम्न",
+  "pre_download_play": "पूर्वावत डाउनलोड और प्ले करें",
+  "pre_download_play_description": "ऑडियो स्ट्रीमिंग की बजाय बाइट्स डाउनलोड करें और बजाय में प्ले करें (उच्च बैंडविड्थ उपयोगकर्ताओं के लिए सिफारिश किया जाता है)",
+  "skip_non_music": "गाने के अलावा सेगमेंट्स को छोड़ें (स्पॉन्सरब्लॉक)",
+  "blacklist_description": "ब्लैकलिस्ट में शामिल ट्रैक और कलाकार",
+  "wait_for_download_to_finish": "वर्तमान डाउनलोड समाप्त होने तक कृपया प्रतीक्षा करें",
+  "download_lyrics": "गानों के साथ लिरिक्स डाउनलोड करें",
+  "desktop": "डेस्कटॉप",
+  "close_behavior": "बंद करने का व्यवहार",
+  "close": "बंद करें",
+  "minimize_to_tray": "ट्रे में कम करें",
+  "show_tray_icon": "सिस्टम ट्रे आइकन दिखाएं",
+  "about": "के बारे में",
+  "u_love_spotube": "हम जानते हैं कि आप Spotube से प्यार करते हैं",
+  "check_for_updates": "अपडेट के लिए जाँच करें",
+  "about_spotube": "Spotube के बारे में",
+  "blacklist": "ब्लैकलिस्ट",
+  "please_sponsor": "कृपया स्पॉन्सर / डोनेट करें",
+  "spotube_description": "Spotube, एक हल्का, सभी प्लेटफॉर्मों पर चलने वाला, मुफ्त स्पॉटिफाई क्लाइंट",
+  "version": "संस्करण",
+  "build_number": "बिल्ड नंबर",
+  "founder": "संस्थापक",
+  "repository": "भण्डार",
+  "bug_issues": "बग+मुद्दे",
+  "made_with": "बांग्लादेश🇧🇩 में दिल से बनाया गया",
+  "kingkor_roy_tirtho": "किंगकोर रॉय तिर्थो",
+  "copyright": "© 2021-{current_year} किंगकोर रॉय तिर्थो",
+  "license": "लाइसेंस",
+  "add_spotify_credentials": "शुरू होने के लिए अपने स्पॉटिफाई क्रेडेंशियल जोड़ें",
+  "credentials_will_not_be_shared_disclaimer": "चिंता न करें, आपके क्रेडेंशियल किसी भी तरह से नहीं एकत्रित या साझा किए जाएंगे",
+  "know_how_to_login": "इसे कैसे करें पता नहीं?",
+  "follow_step_by_step_guide": "कदम से कदम गाइड के साथ चलें",
+  "spotify_cookie": "स्पॉटिफाई {name} कुकी",
+  "cookie_name_cookie": "{name} कुकी",
+  "fill_in_all_fields": "कृपया सभी फ़ील्ड भरें",
+  "submit": "सबमिट",
+  "exit": "बाहर निकलें",
+  "previous": "पिछला",
+  "next": "अगला",
+  "done": "किया हुआ",
+  "step_1": "1 चरण",
+  "first_go_to": "पहले, जाएं",
+  "login_if_not_logged_in": "और यदि आप लॉगिन नहीं हैं तो लॉगिन / साइनअप करें",
+  "step_2": "2 चरण",
+  "step_2_steps": "1. जब आप लॉगिन हो जाएँ, तो F12 दबाएं या माउस राइट क्लिक> निरीक्षण करें ताकि ब्राउज़र डेवटूल्स खुलें।\n2. फिर ब्राउज़र के \"एप्लिकेशन\" टैब (Chrome, Edge, Brave आदि) या \"स्टोरेज\" टैब (Firefox, Palemoon आदि) में जाएं\n3. \"कुकीज़\" अनुभाग में जाएं फिर \"https: //accounts.spotify.com\" उप-अनुभाग में जाएं",
+  "step_3": "स्टेप 3",
+  "step_3_steps": "\"sp_dc\" और \"sp_key\" कुकीज़ के मान कॉपी करें",
+  "success_emoji": "सफलता🥳",
+  "success_message": "अब आप अपने स्पॉटिफाई अकाउंट से सफलतापूर्वक लॉगइन हो गए हैं। अच्छा काम किया!",
+  "step_4": "स्टेप 4",
+  "step_4_steps": "कॉपी की गई \"sp_dc\" और \"sp_key\" मानों को संबंधित फील्ड में पेस्ट करें",
+  "something_went_wrong": "कुछ गलत हो गया",
+  "piped_instance": "पाइप्ड सर्वर",
+  "piped_description": "पाइप किए गए सर्वर\n गानों का मिलान करने के लिए उपयोग किए जाते हैं, हो सकता है कि उनमें से कुछ के साथ ठीक से काम न करें इसलिए अपने जोखिम पर उपयोग करें",
+  "generate_playlist": "प्लेलिस्ट बनाएं",
+  "track_exists": "ट्रैक {track} पहले से मौजूद है",
+  "replace_downloaded_tracks": "सभी डाउनलोड किए गए ट्रैक्स को बदलें",
+  "skip_download_tracks": "सभी डाउनलोड किए गए ट्रैक्स को छोड़ें",
+  "do_you_want_to_replace": "क्या आप मौजूदा ट्रैक को बदलना चाहते हैं?",
+  "replace": "बदलें",
+  "skip": "छोड़ें",
+  "select_up_to_count_type": "{count} {type} तक चुनें",
+  "select_genres": "जान्र चुनें",
+  "add_genres": "जान्र जोड़ें",
+  "country": "देश",
+  "number_of_tracks_generate": "उत्पन्न करने के लिए ट्रैक की संख्या",
+  "acousticness": "ध्वनिकता",
+  "danceability": "नृत्यता",
+  "energy": "ऊर्जा",
+  "instrumentalness": "आलापिकता",
+  "liveness": "जीवंतता",
+  "loudness": "शोर",
+  "speechiness": "बोलचालता",
+  "valence": "मनोदयता",
+  "popularity": "लोकप्रियता",
+  "key": "कुंजी",
+  "duration": "अवधि (सेकंड)",
+  "tempo": "गति (BPM)",
+  "mode": "मोड",
+  "time_signature": "समय छाप",
+  "short": "संक्षेप",
+  "medium": "मध्यम",
+  "long": "लंबा",
+  "min": "न्यूनतम",
+  "max": "अधिकतम",
+  "target": "लक्ष्य",
+  "moderate": "मध्यम",
+  "deselect_all": "सभी को अचयनित करें",
+  "select_all": "सभी को चुनें",
+  "are_you_sure": "क्या आपको यकीन है?",
+  "generating_playlist": "आपकी कस्टम प्लेलिस्ट बनाई जा रही है...",
+  "selected_count_tracks": "{count} ट्रैक्स चयनित हैं",
+  "download_warning": "यदि आप सभी ट्रैक्स को बल्क में डाउनलोड करते हैं, तो आप स्पष्ट रूप से संगीत की अवैध नकली बना रहे हैं और संगीत के रचनात्मक समाज को क्षति पहुंचा रहे हैं। मुझे आशा है कि आप इसके बारे में जागरूक हैं। हमेशा कोशिश करें कि कलाकार के मेहनत का सम्मान और समर्थन करें।",
+  "download_ip_ban_warning": "बाहरी डाउनलोड अनुरोधों के कारण आपका आईपी YouTube पर अधिक से अधिक ब्लॉक हो सकता है। आईपी ब्लॉक का अर्थ है कि आप उसी आईपी उपकरण से कम से कम 2-3 महीनों तक YouTube का उपयोग नहीं कर सकेंगे (यदि आप लॉग इन हैं तो भी)। और स्पोट्यूब किसी भी जिम्मेदारी को नहीं उठाता है अगर ऐसा कभी होता है।",
+  "by_clicking_accept_terms": "'स्वीकार' पर क्लिक करके आप निम्नलिखित शर्तों से सहमत होते हैं:",
+  "download_agreement_1": "मुझे पता है कि मैं संगीत की अवैध नकली बना रहा हूं। मैं बुरा हूं",
+  "download_agreement_2": "मैं कलाकार का समर्थन करूंगा जहां भी मुझे संभव हो और मैं केवल इसल  िए ऐसा कर रहा हूं क्योंकि मेरे पास उनकी कला खरीदने के लिए पैसे नहीं हैं।",
+  "download_agreement_3": "मैं पूरी तरह से जागरूक हूं कि मेरा आईपी YouTube पर ब्लॉक हो सकता है और मैं स्पोट्यूब या उसके मालिकों / सहयोगियों को किसी भी दुर्घटना के लिए जिम्मेदार नहीं मानता।",
+  "decline": "इनकार करें",
+  "accept": "स्वीकार करें",
+  "details": "विवरण",
+  "youtube": "YouTube",
+  "channel": "चैनल",
+  "likes": "पसंद",
+  "dislikes": "अप्रिय",
+  "views": "दृश्य",
+  "streamUrl": "स्ट्रीम URL",
+  "stop": "रोकें",
+  "sort_newest": "नवीनतम जोड़े गए के अनुसार क्रमबद्ध करें",
+  "sort_oldest": "सबसे पुराने जोड़े गए के अनुसार क्रमबद्ध करें",
+  "sleep_timer": "स्लीप टाइमर",
+  "mins": "{minutes} मिनट",
+  "hours": "{hours} घंटे",
+  "hour": "{hours} घंटा",
+  "custom_hours": "कस्टम घंटे",
+  "logs": "लॉग",
+  "developers": "डेवलपर्स",
+  "not_logged_in": "आप लॉग इन नहीं हैं",
+  "search_mode": "खोज मोड",
+  "youtube_api_type": "YouTube API प्रकार"
+}
\ No newline at end of file
diff --git a/lib/l10n/app_ja.arb b/lib/l10n/app_ja.arb
new file mode 100644
index 00000000..a7d64081
--- /dev/null
+++ b/lib/l10n/app_ja.arb
@@ -0,0 +1,253 @@
+{
+  "guest": "ゲスト",
+  "browse": "閲覧",
+  "search": "検索",
+  "library": "ライブラリ",
+  "lyrics": "歌詞",
+  "settings": "設定",
+  "genre_categories_filter": "カテゴリーやジャンルを絞り込み...",
+  "genre": "ジャンル",
+  "personalized": "あなたにおすすめ",
+  "featured": "注目",
+  "new_releases": "新着",
+  "songs": "曲",
+  "playing_track": "{track} を再生",
+  "queue_clear_alert": "現在のキューを消去します。{track_length} 曲を消去します。\n続行しますか？",
+  "load_more": "もっと読み込む",
+  "playlists": "再生リスト",
+  "artists": "アーティスト",
+  "albums": "アルバム",
+  "tracks": "曲",
+  "downloads": "ダウンロード",
+  "filter_playlists": "あなたの再生リストを絞り込み...",
+  "liked_tracks": "いいねした曲",
+  "liked_tracks_description": "いいねしたすべての曲",
+  "create_playlist": "再生リストの作成",
+  "create_a_playlist": "再生リストの作成",
+  "create": "作成",
+  "cancel": "キャンセル",
+  "playlist_name": "再生リスト名",
+  "name_of_playlist": "再生リストの名前",
+  "description": "説明",
+  "public": "公開",
+  "collaborative": "コラボ",
+  "search_local_tracks": "端末内の曲を検索...",
+  "play": "再生",
+  "delete": "削除",
+  "none": "なし",
+  "sort_a_z": "A-Z 順に並び替え",
+  "sort_z_a": "Z-A 順に並び替え",
+  "sort_artist": "アーティスト順に並び替え",
+  "sort_album": "アルバム順に並び替え",
+  "sort_tracks": "曲の並び替え",
+  "currently_downloading": "いまダウンロード中 ({tracks_length}) 曲",
+  "cancel_all": "すべてキャンセル",
+  "filter_artist": "アーティストを絞り込み...",
+  "followers": "{followers} フォロワー",
+  "add_artist_to_blacklist": "このアーティストをブラックリストに追加",
+  "top_tracks": "人気の曲",
+  "fans_also_like": "ファンの間で人気",
+  "loading": "読み込み中...",
+  "artist": "アーティスト",
+  "blacklisted": "ブラックリスト",
+  "following": "フォロー中",
+  "follow": "フォローする",
+  "artist_url_copied": "アーティストの URL をクリップボードにコピーしました",
+  "added_to_queue": "{tracks} をキューに追加しました",
+  "filter_albums": "アルバムを絞り込み...",
+  "synced": "同期する",
+  "plain": "そのまま",
+  "shuffle": "シャッフル",
+  "search_tracks": "曲を検索...",
+  "released": "リリース日",
+  "error": "エラー {error}",
+  "title": "タイトル",
+  "time": "長さ",
+  "more_actions": "ほかの操作",
+  "download_count": "ダウンロード ({count}) 曲",
+  "add_count_to_playlist": "再生リストに ({count}) 曲を追加",
+  "add_count_to_queue": "キューに ({count}) 曲を追加",
+  "play_count_next": "次に ({count}) 曲を再生",
+  "album": "アルバム",
+  "copied_to_clipboard": "{data} をクリップボードにコピーしました",
+  "add_to_following_playlists": "{track} をこの再生リストに追加",
+  "add": "追加",
+  "added_track_to_queue": "キューに {track} を追加しました",
+  "add_to_queue": "キューに追加",
+  "track_will_play_next": "{track} を次に再生",
+  "play_next": "次に再生",
+  "removed_track_from_queue": "キューから {track} を除去しました",
+  "remove_from_queue": "キューから除去",
+  "remove_from_favorites": "お気に入りから除去",
+  "save_as_favorite": "お気に入りに保存",
+  "add_to_playlist": "再生リストに追加",
+  "remove_from_playlist": "再生リストから除去",
+  "add_to_blacklist": "ブラックリストに追加",
+  "remove_from_blacklist": "ブラックリストから除去",
+  "share": "共有",
+  "mini_player": "ミニプレイヤー",
+  "slide_to_seek": "前後にスライドしてシーク",
+  "shuffle_playlist": "再生リストをシャッフル",
+  "unshuffle_playlist": "再生リストのシャッフル解除",
+  "previous_track": "前の曲",
+  "next_track": "次の曲",
+  "pause_playback": "再生を停止",
+  "resume_playback": "再生を再開",
+  "loop_track": "曲をループ",
+  "repeat_playlist": "再生リストをリピート",
+  "queue": "再生キュー",
+  "alternative_track_sources": "この曲の別の音源を選ぶ",
+  "download_track": "曲のダウンロード",
+  "tracks_in_queue": "{tracks}曲の再生キュー",
+  "clear_all": "すべて消去l",
+  "show_hide_ui_on_hover": "マウスを乗せてUIを表示/隠す",
+  "always_on_top": "常に手前に表示",
+  "exit_mini_player": "ミニプレイヤーを終了",
+  "download_location": "ダウンロード先",
+  "account": "アカウント",
+  "login_with_spotify": "Spotify アカウントでログイン",
+  "connect_with_spotify": "Spotify に接続",
+  "logout": "ログアウト",
+  "logout_of_this_account": "このアカウントからログアウト",
+  "language_region": "言語 & 地域",
+  "language": "言語",
+  "system_default": "システムの既定値",
+  "market_place_region": "市場の地域",
+  "recommendation_country": "推薦先の国",
+  "appearance": "外観",
+  "layout_mode": "レイアウトの種類",
+  "override_layout_settings": "レスポンシブなレイアウトの種類の設定を上書きする",
+  "adaptive": "適応的",
+  "compact": "コンパクト",
+  "extended": "幅広",
+  "theme": "テーマ",
+  "dark": "ダーク",
+  "light": "ライト",
+  "system": "システムに従う",
+  "accent_color": "アクセントカラー",
+  "sync_album_color": "アルバムの色に合わせる",
+  "sync_album_color_description": "アルバムアートの主張色をアクセントカラーとして使用",
+  "playback": "再生",
+  "audio_quality": "音声品質",
+  "high": "高",
+  "low": "低",
+  "pre_download_play": "事前ダウンロードと再生",
+  "pre_download_play_description": "音声をストリーミングする代わりに、データをバイト単位でダウンロードして再生 (回線速度が早いユーザーにおすすめ)",
+  "skip_non_music": "音楽でない部分をスキップ (SponsorBlock)",
+  "blacklist_description": "曲とアーティストのブラックリスト",
+  "wait_for_download_to_finish": "現在のダウンロードが完了するまでお待ちください",
+  "download_lyrics": "曲と共に歌詞もダウンロード",
+  "desktop": "デスクトップ",
+  "close_behavior": "閉じた時の動作",
+  "close": "閉じる",
+  "minimize_to_tray": "トレイに最小化",
+  "show_tray_icon": "システムトレイにアイコンを表示",
+  "about": "このアプリについて",
+  "u_love_spotube": "Spotube が好きだと知っていますよ",
+  "check_for_updates": "アップデートの確認",
+  "about_spotube": "Spotube について",
+  "blacklist": "ブラックリスト",
+  "please_sponsor": "出資/寄付もお待ちします",
+  "spotube_description": "Spotube は、軽量でクロスプラットフォームな、すべて無料の spotify クライアント",
+  "version": "バージョン",
+  "build_number": "ビルド番号",
+  "founder": "創始者",
+  "repository": "リポジトリ",
+  "bug_issues": "バグや問題",
+  "made_with": "❤️ を込めてバングラディシュ🇧🇩で開発",
+  "kingkor_roy_tirtho": "Kingkor Roy Tirtho",
+  "copyright": "© 2021-{current_year} Kingkor Roy Tirtho",
+  "license": "ライセンス",
+  "add_spotify_credentials": "Spotify のログイン情報を追加してはじめましょう",
+  "credentials_will_not_be_shared_disclaimer": "心配ありません。個人情報を収集したり、共有されることはありません",
+  "know_how_to_login": "やり方が分からないですか？",
+  "follow_step_by_step_guide": "やり方の説明を見る",
+  "spotify_cookie": "Spotify {name} Cookies",
+  "cookie_name_cookie": "{name} Cookies",
+  "fill_in_all_fields": "すべての欄に入力してください",
+  "submit": "送信",
+  "exit": "終了",
+  "previous": "前へ",
+  "next": "次へ",
+  "done": "完了",
+  "step_1": "ステップ 1",
+  "first_go_to": "最初にここを開き",
+  "login_if_not_logged_in": "、ログインしてないならログインまたは登録します",
+  "step_2": "ステップ 2",
+  "step_2_steps": "1. ログインしたら、F12を押すか、マウス右クリック ＞ 調査（検証）でブラウザの開発者ツール (devtools) を開きます。\n2. アプリケーション (Application) タブ (Chrome, Edge, Brave など) またはストレージタブ (Firefox, Palemoon など)\n3. Cookies 欄を選択し、https://accounts.spotify.com の枝を選びます",
+  "step_3": "ステップ 3",
+  "step_3_steps": "sp_dc と sp_key の値 (Value) をコピーします",
+  "success_emoji": "成功🥳",
+  "success_message": "アカウントへのログインに成功しました。よくできました！",
+  "step_4": "ステップ 4",
+  "step_4_steps": "コピーした sp_dc と sp_keyの値をそれぞれの入力欄に貼り付けます",
+  "something_went_wrong": "何か誤りがあります",
+  "piped_instance": "Piped サーバーのインスタンス",
+  "piped_description": "曲の一致に使う Piped サーバーのインスタンス\nそれらの一部ではうまく動作しないこともあります。自己責任で使用してください",
+  "generate_playlist": "再生リストの生成",
+  "track_exists": "曲 {track} は既に存在します",
+  "replace_downloaded_tracks": "すべてのダウンロード済みの曲を置換",
+  "skip_download_tracks": "すべてのダウンロード済みの曲をスキップ",
+  "do_you_want_to_replace": "既存の曲と置換しますか？",
+  "replace": "置換する",
+  "skip": "スキップ",
+  "select_up_to_count_type": "{type}を最大{count} 個まで選択",
+  "select_genres": "ジャンルを選択",
+  "add_genres": "ジャンルを追加",
+  "country": "国",
+  "number_of_tracks_generate": "生成する曲数",
+  "acousticness": "アコースティック感",
+  "danceability": "ダンス感",
+  "energy": "エネルギー",
+  "instrumentalness": "インストゥルメンタル",
+  "liveness": "ライブ感",
+  "loudness": "ラウドネス",
+  "speechiness": "会話感",
+  "valence": "多幸性",
+  "popularity": "人気度",
+  "key": "キー",
+  "duration": "長さ (秒)",
+  "tempo": "テンポ (BPM)",
+  "mode": "長調",
+  "time_signature": "拍子記号",
+  "short": "短",
+  "medium": "中",
+  "long": "長",
+  "min": "最小",
+  "max": "最大",
+  "target": "目標",
+  "moderate": "中",
+  "deselect_all": "すべて選択解除",
+  "select_all": "すべて選択",
+  "are_you_sure": "よろしいですか？",
+  "generating_playlist": "カスタムの再生リストを生成中...",
+  "selected_count_tracks": "{count} 曲が選ばれました",
+  "download_warning": "全曲の一括ダウンロードは明らかに音楽への海賊行為であり、音楽を生み出す共同体に損害を与えるでしょう。気づいてほしい。アーティストの多大な努力に敬意を払い、支援するようにしてください",
+  "download_ip_ban_warning": "また、通常よりも過剰なダウンロード要求があれば、YouTubeはあなたのIPをブロックします。つまりそのIPの端末からは、少なくとも2-3か月の間、（ログインしても）YouTubeを利用できなくなりす。そうなっても Spotube は一切の責任を負いません",
+  "by_clicking_accept_terms": "「同意する」のクリックにより、以下への同意となります:",
+  "download_agreement_1": "ええ、音楽への海賊行為だ。私はよくない",
+  "download_agreement_2": "芸術作品を買うお金がないのでそうするしかないが、アーティストをできる限り支援する",
+  "download_agreement_3": "私のIPがYouTubeにブロックされることがあると完全に把握した。私のこの行動により起きたどんな事故も、Spotube やその所有者/貢献者に責任はありません。",
+  "decline": "同意しない",
+  "accept": "同意する",
+  "details": "詳細",
+  "youtube": "YouTube",
+  "channel": "チャンネル",
+  "likes": "高評価",
+  "dislikes": "低評価",
+  "views": "視聴回数",
+  "streamUrl": "動画の URL",
+  "stop": "中止",
+  "sort_newest": "追加日の新しい順に並び替え",
+  "sort_oldest": "追加日の古い順に並び替え",
+  "sleep_timer": "スリープタイマー",
+  "mins": "{minutes} 分",
+  "hours": "{hours} 時間",
+  "hour": "{hours} 時間",
+  "custom_hours": "時間を指定",
+  "logs": "ログ",
+  "developers": "開発",
+  "not_logged_in": "ログインしていません",
+  "search_mode": "検索モード",
+  "youtube_api_type": "YouTube APIの種類"
+}
\ No newline at end of file
diff --git a/lib/l10n/l10n.dart b/lib/l10n/l10n.dart
new file mode 100644
index 00000000..eb6b0c42
--- /dev/null
+++ b/lib/l10n/l10n.dart
@@ -0,0 +1,17 @@
+/// credits:
+///
+/// Kingkor Roy Tirtho => English, Bengali
+/// ChatGPT (GPT 3.5) XD => Hindi, French
+/// maboroshin@github => Japanese
+import 'package:flutter/material.dart';
+
+class L10n {
+  static final all = [
+    const Locale('en'),
+    const Locale('bn', 'BD'),
+    const Locale('fr', 'FR'),
+    const Locale('hi', 'IN'),
+    const Locale('de', 'GE'),
+    const Locale('ja', 'JP'),
+  ];
+}
diff --git a/lib/main.dart b/lib/main.dart
index 4777714d..3e9348ff 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,38 +1,43 @@
-import 'dart:convert';
 import 'dart:io';
 
 import 'package:args/args.dart';
 import 'package:catcher/catcher.dart';
+import 'package:device_preview/device_preview.dart';
 import 'package:fl_query/fl_query.dart';
+import 'package:fl_query_connectivity_plus_adapter/fl_query_connectivity_plus_adapter.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:hive_flutter/hive_flutter.dart';
+import 'package:flutter_localizations/flutter_localizations.dart';
+import 'package:hive/hive.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:media_kit/media_kit.dart';
 import 'package:metadata_god/metadata_god.dart';
 import 'package:package_info_plus/package_info_plus.dart';
-import 'package:platform_ui/platform_ui.dart';
 import 'package:shared_preferences/shared_preferences.dart';
-import 'package:spotube/collections/cache_keys.dart';
-import 'package:spotube/components/shared/dialogs/replace_downloaded_dialog.dart';
-import 'package:spotube/entities/cache_track.dart';
+import 'package:spotube/collections/env.dart';
 import 'package:spotube/collections/routes.dart';
 import 'package:spotube/collections/intents.dart';
+import 'package:spotube/hooks/use_disable_battery_optimizations.dart';
+import 'package:spotube/l10n/l10n.dart';
 import 'package:spotube/models/logger.dart';
-import 'package:spotube/provider/downloader_provider.dart';
+import 'package:spotube/models/matched_track.dart';
+import 'package:spotube/models/skip_segment.dart';
+import 'package:spotube/provider/palette_provider.dart';
 import 'package:spotube/provider/user_preferences_provider.dart';
-import 'package:spotube/services/audio_player.dart';
-import 'package:spotube/services/pocketbase.dart';
-import 'package:spotube/services/youtube.dart';
-import 'package:spotube/themes/light_theme.dart';
+import 'package:spotube/services/audio_player/audio_player.dart';
+import 'package:spotube/themes/theme.dart';
 import 'package:spotube/utils/persisted_state_notifier.dart';
-import 'package:spotube/utils/platform.dart';
-import 'package:window_manager/window_manager.dart';
-import 'package:window_size/window_size.dart';
+import 'package:supabase_flutter/supabase_flutter.dart';
+import 'package:system_theme/system_theme.dart';
 import 'package:path_provider/path_provider.dart';
+import 'package:spotube/hooks/use_init_sys_tray.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:flutter_native_splash/flutter_native_splash.dart';
 
-void main(List<String> rawArgs) async {
+Future<void> main(List<String> rawArgs) async {
   final parser = ArgParser();
 
   parser.addFlag(
@@ -69,42 +74,55 @@ void main(List<String> rawArgs) async {
     exit(0);
   }
 
-  WidgetsFlutterBinding.ensureInitialized();
+  await Supabase.initialize(
+    url: Env.supabaseUrl,
+    anonKey: Env.supabaseAnonKey,
+  );
+
+  final widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
+
+  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
+
+  MediaKit.ensureInitialized();
+
+  await DesktopTools.ensureInitialized(
+    DesktopWindowOptions(
+      hideTitleBar: true,
+      title: "Spotube",
+      backgroundColor: Colors.transparent,
+      minimumSize: const Size(300, 700),
+    ),
+  );
+
+  await SystemTheme.accentColor.load();
   MetadataGod.initialize();
+
+  final hiveCacheDir = (await getApplicationSupportDirectory()).path;
+
   await QueryClient.initialize(
     cachePrefix: "oss.krtirtho.spotube",
-    cacheDir: (await getApplicationSupportDirectory()).path,
+    cacheDir: hiveCacheDir,
+    connectivity: FlQueryConnectivityPlusAdapter(),
   );
-  await PersistedStateNotifier.initializeBoxes();
-  Hive.registerAdapter(CacheTrackAdapter());
-  Hive.registerAdapter(CacheTrackEngagementAdapter());
-  Hive.registerAdapter(CacheTrackSkipSegmentAdapter());
+  Hive.registerAdapter(MatchedTrackAdapter());
+  Hive.registerAdapter(SkipSegmentAdapter());
+  Hive.registerAdapter(SearchModeAdapter());
 
-  if (kIsDesktop) {
-    await windowManager.ensureInitialized();
-    WindowOptions windowOptions = const WindowOptions(
-      center: true,
-      backgroundColor: Colors.transparent,
-      titleBarStyle: TitleBarStyle.hidden,
-      title: "Spotube",
-    );
-    setWindowMinSize(const Size(kReleaseMode ? 1020 : 300, 700));
-    await windowManager.waitUntilReadyToShow(windowOptions, () async {
-      final localStorage = await SharedPreferences.getInstance();
-      final rawSize = localStorage.getString(LocalStorageKeys.windowSizeInfo);
-      final savedSize = rawSize != null ? json.decode(rawSize) : null;
-      final wasMaximized = savedSize?["maximized"] ?? false;
-      final double? height = savedSize?["height"];
-      final double? width = savedSize?["width"];
-      await windowManager.setResizable(true);
-      if (wasMaximized) {
-        await windowManager.maximize();
-      } else if (height != null && width != null) {
-        await windowManager.setSize(Size(width, height));
-      }
-      await windowManager.show();
-    });
-  }
+  // Cache versioning entities with Adapter
+  MatchedTrack.version = 'v1';
+  SkipSegment.version = 'v1';
+
+  await Hive.openLazyBox<MatchedTrack>(
+    MatchedTrack.boxName,
+    path: hiveCacheDir,
+  );
+  await Hive.openLazyBox<List<SkipSegment>>(
+    SkipSegment.boxName,
+    path: hiveCacheDir,
+  );
+  await PersistedStateNotifier.initializeBoxes(
+    path: hiveCacheDir,
+  );
 
   Catcher(
     enableLogger: arguments["verbose"],
@@ -116,67 +134,29 @@ void main(List<String> rawArgs) async {
           enableApplicationParameters: false,
         ),
         FileHandler(await getLogsPath(), printLogs: false),
-        SnackbarHandler(
-          const Duration(seconds: 5),
-          action: SnackBarAction(
-            label: "Dismiss",
-            onPressed: () {
-              ScaffoldMessenger.of(
-                Catcher.navigatorKey!.currentContext!,
-              ).hideCurrentSnackBar();
-            },
-          ),
+      ],
+    ),
+    releaseConfig: CatcherOptions(
+      SilentReportMode(),
+      [
+        if (arguments["verbose"] ?? false) ConsoleHandler(),
+        FileHandler(
+          await getLogsPath(),
+          printLogs: false,
         ),
       ],
     ),
-    releaseConfig: CatcherOptions(SilentReportMode(), [
-      if (arguments["verbose"] ?? false)
-        ConsoleHandler(
-          enableDeviceParameters: false,
-          enableApplicationParameters: false,
-        ),
-      FileHandler(
-        await getLogsPath(),
-        printLogs: false,
-      ),
-    ]),
     runAppFunction: () {
       runApp(
-        Builder(
+        DevicePreview(
+          availableLocales: L10n.all,
+          enabled: !kReleaseMode && DesktopTools.platform.isDesktop,
+          data: const DevicePreviewData(
+            isEnabled: false,
+            orientation: Orientation.portrait,
+          ),
           builder: (context) {
             return ProviderScope(
-              overrides: [
-                downloaderProvider.overrideWith(
-                  (ref) {
-                    return Downloader(
-                      ref,
-                      queueInstance,
-                      yt: youtube,
-                      downloadPath: ref.watch(
-                        userPreferencesProvider.select(
-                          (s) => s.downloadLocation,
-                        ),
-                      ),
-                      onFileExists: (track) {
-                        final logger = getLogger(Downloader);
-                        try {
-                          logger.v(
-                            "[onFileExists] download confirmation for ${track.name}",
-                          );
-                          return showPlatformAlertDialog<bool>(
-                            context,
-                            builder: (_) =>
-                                ReplaceDownloadedDialog(track: track),
-                          ).then((s) => s ?? false);
-                        } catch (e, stack) {
-                          Catcher.reportCheckedError(e, stack);
-                          return false;
-                        }
-                      },
-                    );
-                  },
-                )
-              ],
               child: QueryClientProvider(
                 staleDuration: const Duration(minutes: 30),
                 child: const Spotube(),
@@ -187,7 +167,6 @@ void main(List<String> rawArgs) async {
       );
     },
   );
-  await initializePocketBase();
 }
 
 class Spotube extends StatefulHookConsumerWidget {
@@ -196,68 +175,18 @@ class Spotube extends StatefulHookConsumerWidget {
   @override
   SpotubeState createState() => SpotubeState();
 
-  /// ↓↓ ADDED
-  /// InheritedWidget style accessor to our State object.
   static SpotubeState of(BuildContext context) =>
       context.findAncestorStateOfType<SpotubeState>()!;
 }
 
-class SpotubeState extends ConsumerState<Spotube> with WidgetsBindingObserver {
+class SpotubeState extends ConsumerState<Spotube> {
   final logger = getLogger(Spotube);
   SharedPreferences? localStorage;
 
-  Size? prevSize;
-
   @override
   void initState() {
     super.initState();
     SharedPreferences.getInstance().then(((value) => localStorage = value));
-    WidgetsBinding.instance.addObserver(this);
-    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
-      setState(() {
-        appPlatform = Theme.of(context).platform;
-        if (appPlatform == TargetPlatform.macOS) {
-          appPlatform = TargetPlatform.android;
-        }
-      });
-    });
-  }
-
-  @override
-  void dispose() {
-    WidgetsBinding.instance.removeObserver(this);
-    super.dispose();
-  }
-
-  @override
-  void didChangeMetrics() async {
-    super.didChangeMetrics();
-    if (kIsMobile) return;
-    final size = await windowManager.getSize();
-    final windowSameDimension =
-        prevSize?.width == size.width && prevSize?.height == size.height;
-
-    if (localStorage == null || windowSameDimension) return;
-    final isMaximized = await windowManager.isMaximized();
-    localStorage!.setString(
-      LocalStorageKeys.windowSizeInfo,
-      jsonEncode({
-        'maximized': isMaximized,
-        'width': size.width,
-        'height': size.height,
-      }),
-    );
-    prevSize = size;
-  }
-
-  TargetPlatform appPlatform = TargetPlatform.android;
-
-  void changePlatform(TargetPlatform targetPlatform) {
-    appPlatform = targetPlatform;
-    if (appPlatform == TargetPlatform.macOS) {
-      appPlatform = TargetPlatform.android;
-    }
-    setState(() {});
   }
 
   @override
@@ -266,37 +195,57 @@ class SpotubeState extends ConsumerState<Spotube> with WidgetsBindingObserver {
         ref.watch(userPreferencesProvider.select((s) => s.themeMode));
     final accentMaterialColor =
         ref.watch(userPreferencesProvider.select((s) => s.accentColorScheme));
+    final locale = ref.watch(userPreferencesProvider.select((s) => s.locale));
+    final paletteColor =
+        ref.watch(paletteProvider.select((s) => s?.dominantColor?.color));
+
+    useInitSysTray(ref);
 
-    /// For enabling hot reload for audio player
     useEffect(() {
+      FlutterNativeSplash.remove();
       return () {
+        /// For enabling hot reload for audio player
+        if (!kDebugMode) return;
         audioPlayer.dispose();
-        youtube.close();
+        // youtube.close();
       };
     }, []);
 
-    platform = appPlatform;
+    useDisableBatterOptimizations();
 
-    return PlatformApp.router(
+    final lightTheme = useMemoized(
+      () => theme(paletteColor ?? accentMaterialColor, Brightness.light),
+      [paletteColor, accentMaterialColor],
+    );
+    final darkTheme = useMemoized(
+      () => theme(paletteColor ?? accentMaterialColor, Brightness.dark),
+      [paletteColor, accentMaterialColor],
+    );
+
+    return MaterialApp.router(
+      supportedLocales: L10n.all,
+      locale: locale.languageCode == "system" ? null : locale,
+      localizationsDelegates: const [
+        AppLocalizations.delegate,
+        GlobalMaterialLocalizations.delegate,
+        GlobalWidgetsLocalizations.delegate,
+        GlobalCupertinoLocalizations.delegate,
+      ],
       routeInformationParser: router.routeInformationParser,
       routerDelegate: router.routerDelegate,
       routeInformationProvider: router.routeInformationProvider,
       debugShowCheckedModeBanner: false,
       title: 'Spotube',
       builder: (context, child) {
-        return DragToResizeArea(child: child!);
+        return DevicePreview.appBuilder(
+          context,
+          DragToResizeArea(child: child!),
+        );
       },
-      androidTheme: theme(accentMaterialColor, Brightness.light),
-      androidDarkTheme: theme(accentMaterialColor, Brightness.dark),
-      linuxTheme: linuxTheme,
-      linuxDarkTheme: linuxDarkTheme,
-      iosTheme: themeMode == ThemeMode.dark ? iosDarkTheme : iosTheme,
-      windowsTheme: windowsTheme,
-      windowsDarkTheme: windowsDarkTheme,
-      macosTheme: macosTheme,
-      macosDarkTheme: macosDarkTheme,
       themeMode: themeMode,
-      shortcuts: PlatformProperty.all({
+      theme: lightTheme,
+      darkTheme: darkTheme,
+      shortcuts: {
         ...WidgetsApp.defaultShortcuts.map((key, value) {
           return MapEntry(
             LogicalKeySet.fromSet(key.triggers?.toSet() ?? {}),
@@ -331,14 +280,14 @@ class SpotubeState extends ConsumerState<Spotube> with WidgetsBindingObserver {
           LogicalKeyboardKey.control,
           LogicalKeyboardKey.shift,
         ): CloseAppIntent(),
-      }),
-      actions: PlatformProperty.all({
+      },
+      actions: {
         ...WidgetsApp.defaultActions,
         PlayPauseIntent: PlayPauseAction(),
         NavigationIntent: NavigationAction(),
         HomeTabIntent: HomeTabAction(),
         CloseAppIntent: CloseAppAction(),
-      }),
+      },
     );
   }
 }
diff --git a/lib/models/matched_track.dart b/lib/models/matched_track.dart
new file mode 100644
index 00000000..b7cc0a3f
--- /dev/null
+++ b/lib/models/matched_track.dart
@@ -0,0 +1,69 @@
+import "package:hive/hive.dart";
+part "matched_track.g.dart";
+
+@HiveType(typeId: 1)
+class MatchedTrack {
+  @HiveField(0)
+  String youtubeId;
+  @HiveField(1)
+  String spotifyId;
+  @HiveField(2)
+  SearchMode searchMode;
+
+  String? id;
+  DateTime? createdAt;
+
+  bool get isSynced => id != null;
+
+  static String version = 'v1';
+  static final boxName = "oss.krtirtho.spotube.matched_tracks.$version";
+
+  static LazyBox<MatchedTrack> get box => Hive.lazyBox<MatchedTrack>(boxName);
+
+  MatchedTrack({
+    required this.youtubeId,
+    required this.spotifyId,
+    required this.searchMode,
+    this.id,
+    this.createdAt,
+  });
+
+  factory MatchedTrack.fromJson(Map<String, dynamic> json) {
+    return MatchedTrack(
+      searchMode: SearchMode.fromString(json["searchMode"]),
+      youtubeId: json["youtube_id"],
+      spotifyId: json["spotify_id"],
+      id: json["id"],
+      createdAt: DateTime.parse(json["created_at"]),
+    );
+  }
+
+  Map<String, dynamic> toJson() {
+    return {
+      "youtube_id": youtubeId,
+      "spotify_id": spotifyId,
+      "id": id,
+      "searchMode": searchMode.name,
+      "created_at": createdAt?.toString()
+    }..removeWhere((key, value) => value == null);
+  }
+}
+
+@HiveType(typeId: 4)
+enum SearchMode {
+  @HiveField(0)
+  youtube._internal('YouTube'),
+  @HiveField(1)
+  youtubeMusic._internal('YouTube Music');
+
+  final String label;
+
+  const SearchMode._internal(this.label);
+
+  factory SearchMode.fromString(String value) {
+    return SearchMode.values.firstWhere(
+      (element) => element.name == value,
+      orElse: () => SearchMode.youtube,
+    );
+  }
+}
diff --git a/lib/models/matched_track.g.dart b/lib/models/matched_track.g.dart
new file mode 100644
index 00000000..dd166e77
--- /dev/null
+++ b/lib/models/matched_track.g.dart
@@ -0,0 +1,86 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'matched_track.dart';
+
+// **************************************************************************
+// TypeAdapterGenerator
+// **************************************************************************
+
+class MatchedTrackAdapter extends TypeAdapter<MatchedTrack> {
+  @override
+  final int typeId = 1;
+
+  @override
+  MatchedTrack read(BinaryReader reader) {
+    final numOfFields = reader.readByte();
+    final fields = <int, dynamic>{
+      for (int i = 0; i < numOfFields; i++) reader.readByte(): reader.read(),
+    };
+    return MatchedTrack(
+      youtubeId: fields[0] as String,
+      spotifyId: fields[1] as String,
+      searchMode: fields[2] as SearchMode,
+    );
+  }
+
+  @override
+  void write(BinaryWriter writer, MatchedTrack obj) {
+    writer
+      ..writeByte(3)
+      ..writeByte(0)
+      ..write(obj.youtubeId)
+      ..writeByte(1)
+      ..write(obj.spotifyId)
+      ..writeByte(2)
+      ..write(obj.searchMode);
+  }
+
+  @override
+  int get hashCode => typeId.hashCode;
+
+  @override
+  bool operator ==(Object other) =>
+      identical(this, other) ||
+      other is MatchedTrackAdapter &&
+          runtimeType == other.runtimeType &&
+          typeId == other.typeId;
+}
+
+class SearchModeAdapter extends TypeAdapter<SearchMode> {
+  @override
+  final int typeId = 4;
+
+  @override
+  SearchMode read(BinaryReader reader) {
+    switch (reader.readByte()) {
+      case 0:
+        return SearchMode.youtube;
+      case 1:
+        return SearchMode.youtubeMusic;
+      default:
+        return SearchMode.youtube;
+    }
+  }
+
+  @override
+  void write(BinaryWriter writer, SearchMode obj) {
+    switch (obj) {
+      case SearchMode.youtube:
+        writer.writeByte(0);
+        break;
+      case SearchMode.youtubeMusic:
+        writer.writeByte(1);
+        break;
+    }
+  }
+
+  @override
+  int get hashCode => typeId.hashCode;
+
+  @override
+  bool operator ==(Object other) =>
+      identical(this, other) ||
+      other is SearchModeAdapter &&
+          runtimeType == other.runtimeType &&
+          typeId == other.typeId;
+}
diff --git a/lib/models/skip_segment.dart b/lib/models/skip_segment.dart
new file mode 100644
index 00000000..ef4cb889
--- /dev/null
+++ b/lib/models/skip_segment.dart
@@ -0,0 +1,26 @@
+import 'package:hive/hive.dart';
+
+part 'skip_segment.g.dart';
+
+@HiveType(typeId: 2)
+class SkipSegment {
+  @HiveField(0)
+  final int start;
+  @HiveField(1)
+  final int end;
+  SkipSegment(this.start, this.end);
+
+  static String version = 'v1';
+  static final boxName = "oss.krtirtho.spotube.skip_segments.$version";
+  static LazyBox<List<SkipSegment>> get box =>
+      Hive.lazyBox<List<SkipSegment>>(boxName);
+
+  SkipSegment.fromJson(Map<String, dynamic> json)
+      : start = json['start'],
+        end = json['end'];
+
+  Map<String, dynamic> toJson() => {
+        'start': start,
+        'end': end,
+      };
+}
diff --git a/lib/models/skip_segment.g.dart b/lib/models/skip_segment.g.dart
new file mode 100644
index 00000000..f2ad4459
--- /dev/null
+++ b/lib/models/skip_segment.g.dart
@@ -0,0 +1,44 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'skip_segment.dart';
+
+// **************************************************************************
+// TypeAdapterGenerator
+// **************************************************************************
+
+class SkipSegmentAdapter extends TypeAdapter<SkipSegment> {
+  @override
+  final int typeId = 2;
+
+  @override
+  SkipSegment read(BinaryReader reader) {
+    final numOfFields = reader.readByte();
+    final fields = <int, dynamic>{
+      for (int i = 0; i < numOfFields; i++) reader.readByte(): reader.read(),
+    };
+    return SkipSegment(
+      fields[0] as int,
+      fields[1] as int,
+    );
+  }
+
+  @override
+  void write(BinaryWriter writer, SkipSegment obj) {
+    writer
+      ..writeByte(2)
+      ..writeByte(0)
+      ..write(obj.start)
+      ..writeByte(1)
+      ..write(obj.end);
+  }
+
+  @override
+  int get hashCode => typeId.hashCode;
+
+  @override
+  bool operator ==(Object other) =>
+      identical(this, other) ||
+      other is SkipSegmentAdapter &&
+          runtimeType == other.runtimeType &&
+          typeId == other.typeId;
+}
diff --git a/lib/models/spotube_track.dart b/lib/models/spotube_track.dart
index 95d2998d..32b16533 100644
--- a/lib/models/spotube_track.dart
+++ b/lib/models/spotube_track.dart
@@ -1,42 +1,22 @@
 import 'dart:async';
 
-import 'package:catcher/catcher.dart';
-import 'package:flutter/foundation.dart';
-import 'package:flutter_cache_manager/flutter_cache_manager.dart';
-import 'package:pocketbase/pocketbase.dart';
 import 'package:spotify/spotify.dart';
-import 'package:spotube/extensions/video.dart';
 import 'package:spotube/extensions/album_simple.dart';
 import 'package:spotube/extensions/artist_simple.dart';
-import 'package:spotube/models/track.dart';
-import 'package:spotube/provider/user_preferences_provider.dart';
-import 'package:spotube/services/pocketbase.dart';
-import 'package:spotube/services/youtube.dart';
-import 'package:spotube/utils/platform.dart';
-import 'package:spotube/utils/primitive_utils.dart';
+import 'package:spotube/models/matched_track.dart';
+import 'package:spotube/services/youtube/youtube.dart';
 import 'package:spotube/utils/service_utils.dart';
-import 'package:youtube_explode_dart/youtube_explode_dart.dart';
 import 'package:collection/collection.dart';
 
-enum SpotubeTrackMatchAlgorithm {
-  // selects the first result returned from YouTube
-  youtube,
-  // selects the most popular one
-  popular,
-  // selects the most popular one from the author of the track
-  authenticPopular,
-}
-
 class SpotubeTrack extends Track {
-  final Video ytTrack;
+  final YoutubeVideoInfo ytTrack;
   final String ytUri;
-  final List<Map<String, int>> skipSegments;
-  final List<Video> siblings;
+
+  final List<YoutubeVideoInfo> siblings;
 
   SpotubeTrack(
     this.ytTrack,
     this.ytUri,
-    this.skipSegments,
     this.siblings,
   ) : super();
 
@@ -44,7 +24,6 @@ class SpotubeTrack extends Track {
     required Track track,
     required this.ytTrack,
     required this.ytUri,
-    required this.skipSegments,
     required this.siblings,
   }) : super() {
     album = track.album;
@@ -67,8 +46,10 @@ class SpotubeTrack extends Track {
     uri = track.uri;
   }
 
-  static Future<SpotubeTrack> fetchFromTrack(
-      Track track, UserPreferences preferences) async {
+  static Future<List<YoutubeVideoInfo>> fetchSiblings(
+    Track track,
+    YoutubeEndpoints client,
+  ) async {
     final artists = (track.artists ?? [])
         .map((ar) => ar.name)
         .toList()
@@ -81,209 +62,95 @@ class SpotubeTrack extends Track {
       onlyCleanArtist: true,
     ).trim();
 
-    final cachedTracks = await Future<RecordModel?>.value(
-      pb
-          .collection(BackendTrack.collection)
-          .getFirstListItem("spotify_id = '${track.id}'"),
-    ).catchError((e, stack) {
-      Catcher.reportCheckedError(e, stack);
-      return null;
-    });
+    final List<YoutubeVideoInfo> siblings =
+        await client.search("$title - ${artists.join(", ")}").then(
+      (res) {
+        final siblings = res
+            .where((item) {
+              return artists.any(
+                (artist) =>
+                    artist.toLowerCase() == item.channelName.toLowerCase(),
+              );
+            })
+            .take(10)
+            .toList();
 
-    final cachedTrack =
-        cachedTracks != null ? BackendTrack.fromRecord(cachedTracks) : null;
+        if (siblings.isEmpty) {
+          return res.take(10).toList();
+        }
 
-    Video ytVideo;
-    List<Video> siblings = [];
-    if (cachedTrack != null) {
-      ytVideo = await VideoFromCacheTrackExtension.fromBackendTrack(
-        cachedTrack,
-        youtube,
-      );
-    } else {
-      VideoSearchList videos = await PrimitiveUtils.raceMultiple(
-        () => youtube.search.search("${artists.join(", ")} - $title"),
-      );
-      siblings = videos.where((video) => !video.isLive).take(10).toList();
-      ytVideo = siblings.first;
-    }
-
-    StreamManifest trackManifest = await PrimitiveUtils.raceMultiple(
-      () => youtube.videos.streams.getManifest(ytVideo.id),
+        return siblings;
+      },
     );
 
-    final audioManifest = trackManifest.audioOnly.where((info) {
-      final isMp4a = info.codec.mimeType == "audio/mp4";
-      if (kIsLinux) {
-        return !isMp4a;
-      } else if (kIsMacOS || kIsIOS) {
-        return isMp4a;
-      } else {
-        return true;
+    return siblings;
+  }
+
+  static Future<SpotubeTrack> fetchFromTrack(
+    Track track,
+    YoutubeEndpoints client,
+  ) async {
+    final matchedCachedTrack = await MatchedTrack.box.get(track.id!);
+    var siblings = <YoutubeVideoInfo>[];
+    YoutubeVideoInfo ytVideo;
+    String ytStreamUrl;
+    if (matchedCachedTrack != null &&
+        matchedCachedTrack.searchMode == client.preferences.searchMode) {
+      (ytVideo, ytStreamUrl) = await client.video(
+        matchedCachedTrack.youtubeId,
+        matchedCachedTrack.searchMode,
+      );
+    } else {
+      siblings = await fetchSiblings(track, client);
+      if (siblings.isEmpty) {
+        throw Exception("Failed to find any results for ${track.name}");
       }
-    });
+      (ytVideo, ytStreamUrl) =
+          await client.video(siblings.first.id, siblings.first.searchMode);
 
-    final chosenStreamInfo = preferences.audioQuality == AudioQuality.high
-        ? audioManifest.withHighestBitrate()
-        : audioManifest.sortByBitrate().last;
-
-    final ytUri = chosenStreamInfo.url.toString();
-
-    if (cachedTrack == null) {
-      await Future<RecordModel?>.value(
-          pb.collection(BackendTrack.collection).create(
-                body: BackendTrack(
-                  spotifyId: track.id!,
-                  youtubeId: ytVideo.id.value,
-                  votes: 0,
-                ).toJson(),
-              )).catchError((e, stack) {
-        Catcher.reportCheckedError(e, stack);
-        return null;
-      });
-    }
-
-    if (preferences.predownload &&
-        ytVideo.duration! < const Duration(minutes: 15)) {
-      await DefaultCacheManager().getFileFromCache(track.id!).then(
-        (file) async {
-          if (file != null) return file.file;
-          final List<int> bytesStore = [];
-          final bytesFuture = Completer<Uint8List>();
-
-          youtube.videos.streams.get(chosenStreamInfo).listen(
-            (data) {
-              bytesStore.addAll(data);
-            },
-            onDone: () {
-              bytesFuture.complete(Uint8List.fromList(bytesStore));
-            },
-            onError: (e) {
-              bytesFuture.completeError(e);
-            },
-          );
-
-          final cached = await DefaultCacheManager().putFile(
-            track.id!,
-            await bytesFuture.future,
-            fileExtension: chosenStreamInfo.codec.mimeType.split("/").last,
-          );
-
-          return cached;
-        },
+      await MatchedTrack.box.put(
+        track.id!,
+        MatchedTrack(
+          youtubeId: ytVideo.id,
+          spotifyId: track.id!,
+          searchMode: siblings.first.searchMode,
+        ),
       );
     }
 
     return SpotubeTrack.fromTrack(
       track: track,
       ytTrack: ytVideo,
-      ytUri: ytUri,
-      skipSegments: preferences.skipSponsorSegments
-          ? await ytVideo.getSkipSegments(preferences)
-          : [],
+      ytUri: ytStreamUrl,
       siblings: siblings,
     );
   }
 
   Future<SpotubeTrack?> swappedCopy(
-    Video video,
-    UserPreferences preferences,
+    YoutubeVideoInfo video,
+    YoutubeEndpoints client,
   ) async {
-    if (siblings.none((element) => element.id == video.id)) return null;
+    // sibling tracks that were manually searched and swapped
+    final isStepSibling = siblings.none((element) => element.id == video.id);
 
-    StreamManifest trackManifest = await PrimitiveUtils.raceMultiple(
-      () => youtube.videos.streams.getManifest(video.id),
-    );
+    final (ytVideo, ytStreamUrl) =
+        await client.video(video.id, siblings.first.searchMode);
 
-    final audioManifest = trackManifest.audioOnly.where((info) {
-      final isMp4a = info.codec.mimeType == "audio/mp4";
-      if (kIsLinux) {
-        return !isMp4a;
-      } else if (kIsMacOS || kIsIOS) {
-        return isMp4a;
-      } else {
-        return true;
-      }
-    });
-
-    final chosenStreamInfo = preferences.audioQuality == AudioQuality.high
-        ? audioManifest.withHighestBitrate()
-        : audioManifest.sortByBitrate().last;
-
-    final ytUri = chosenStreamInfo.url.toString();
-
-    final cachedTracks = await Future<RecordModel?>.value(
-      pb.collection(BackendTrack.collection).getFirstListItem(
-          "spotify_id = '$id' && youtube_id = '${video.id.value}'"),
-    ).catchError((e, stack) {
-      Catcher.reportCheckedError(e, stack);
-      return null;
-    });
-
-    final cachedTrack =
-        cachedTracks != null ? BackendTrack.fromRecord(cachedTracks) : null;
-
-    if (cachedTrack == null) {
-      await Future<RecordModel?>.value(
-          pb.collection(BackendTrack.collection).create(
-                body: BackendTrack(
-                  spotifyId: id!,
-                  youtubeId: video.id.value,
-                  votes: 1,
-                ).toJson(),
-              )).catchError((e, stack) {
-        Catcher.reportCheckedError(e, stack);
-        return null;
-      });
-    } else {
-      await Future<RecordModel?>.value(
-          pb.collection(BackendTrack.collection).update(
-        cachedTrack.id,
-        body: {"votes": cachedTrack.votes + 1},
-      )).catchError((e, stack) {
-        Catcher.reportCheckedError(e, stack);
-        return null;
-      });
-    }
-
-    if (preferences.predownload &&
-        video.duration! < const Duration(minutes: 15)) {
-      await DefaultCacheManager().getFileFromCache(id!).then(
-        (file) async {
-          if (file != null) return file.file;
-          final List<int> bytesStore = [];
-          final bytesFuture = Completer<Uint8List>();
-
-          youtube.videos.streams.get(chosenStreamInfo).listen(
-            (data) {
-              bytesStore.addAll(data);
-            },
-            onDone: () {
-              bytesFuture.complete(Uint8List.fromList(bytesStore));
-            },
-            onError: (e) {
-              bytesFuture.completeError(e);
-            },
-          );
-
-          final cached = await DefaultCacheManager().putFile(
-            id!,
-            await bytesFuture.future,
-            fileExtension: chosenStreamInfo.codec.mimeType.split("/").last,
-          );
-
-          return cached;
-        },
+    if (!isStepSibling) {
+      await MatchedTrack.box.put(
+        id!,
+        MatchedTrack(
+          youtubeId: video.id,
+          spotifyId: id!,
+          searchMode: siblings.first.searchMode,
+        ),
       );
     }
 
     return SpotubeTrack.fromTrack(
       track: this,
-      ytTrack: video,
-      ytUri: ytUri,
-      skipSegments: preferences.skipSponsorSegments
-          ? await video.getSkipSegments(preferences)
-          : [],
+      ytTrack: ytVideo,
+      ytUri: ytStreamUrl,
       siblings: [
         video,
         ...siblings.where((element) => element.id != video.id),
@@ -294,46 +161,33 @@ class SpotubeTrack extends Track {
   static SpotubeTrack fromJson(Map<String, dynamic> map) {
     return SpotubeTrack.fromTrack(
       track: Track.fromJson(map),
-      ytTrack: VideoToJson.fromJson(map["ytTrack"]),
+      ytTrack: YoutubeVideoInfo.fromJson(map["ytTrack"]),
       ytUri: map["ytUri"],
-      skipSegments:
-          List.castFrom<dynamic, Map<String, int>>(map["skipSegments"]),
       siblings: List.castFrom<dynamic, Map<String, dynamic>>(map["siblings"])
-          .map((sibling) => VideoToJson.fromJson(sibling))
+          .map((sibling) => YoutubeVideoInfo.fromJson(sibling))
           .toList(),
     );
   }
 
-  Future<SpotubeTrack> populatedCopy() async {
+  Future<SpotubeTrack> populatedCopy(YoutubeEndpoints client) async {
     if (this.siblings.isNotEmpty) return this;
-    final artists = (this.artists ?? [])
-        .map((ar) => ar.name)
-        .toList()
-        .whereNotNull()
-        .toList();
 
-    final title = ServiceUtils.getTitle(
-      name!,
-      artists: artists,
-      onlyCleanArtist: true,
-    ).trim();
-    VideoSearchList videos = await PrimitiveUtils.raceMultiple(
-      () => youtube.search.search("${artists.join(", ")} - $title"),
+    final siblings = await fetchSiblings(
+      this,
+      client,
     );
 
-    final siblings = videos.where((video) => !video.isLive).take(10).toList();
-
     return SpotubeTrack.fromTrack(
       track: this,
       ytTrack: ytTrack,
       ytUri: ytUri,
-      skipSegments: skipSegments,
       siblings: siblings,
     );
   }
 
   Map<String, dynamic> toJson() {
     return {
+      // super values
       "album": album?.toJson(),
       "artists": artists?.map((artist) => artist.toJson()).toList(),
       "availableMarkets": availableMarkets,
@@ -350,9 +204,9 @@ class SpotubeTrack extends Track {
       "trackNumber": trackNumber,
       "type": type,
       "uri": uri,
+      // this values
       "ytTrack": ytTrack.toJson(),
       "ytUri": ytUri,
-      "skipSegments": skipSegments,
       "siblings": siblings.map((sibling) => sibling.toJson()).toList(),
     };
   }
diff --git a/lib/models/track.dart b/lib/models/track.dart
deleted file mode 100644
index 57f9da2d..00000000
--- a/lib/models/track.dart
+++ /dev/null
@@ -1,29 +0,0 @@
-import 'package:json_annotation/json_annotation.dart';
-import 'package:pocketbase/pocketbase.dart';
-part 'track.g.dart';
-
-@JsonSerializable()
-class BackendTrack extends RecordModel {
-  @JsonKey(name: "spotify_id")
-  final String spotifyId;
-  @JsonKey(name: "youtube_id")
-  final String youtubeId;
-  final int votes;
-
-  BackendTrack({
-    required this.spotifyId,
-    required this.youtubeId,
-    required this.votes,
-  });
-
-  factory BackendTrack.fromRecord(RecordModel record) =>
-      BackendTrack.fromJson(record.toJson());
-
-  factory BackendTrack.fromJson(Map<String, dynamic> json) =>
-      _$BackendTrackFromJson(json);
-
-  @override
-  Map<String, dynamic> toJson() => _$BackendTrackToJson(this);
-
-  static String collection = "tracks";
-}
diff --git a/lib/models/track.g.dart b/lib/models/track.g.dart
deleted file mode 100644
index 9dc4c23d..00000000
--- a/lib/models/track.g.dart
+++ /dev/null
@@ -1,30 +0,0 @@
-// GENERATED CODE - DO NOT MODIFY BY HAND
-
-part of 'track.dart';
-
-// **************************************************************************
-// JsonSerializableGenerator
-// **************************************************************************
-
-BackendTrack _$BackendTrackFromJson(Map<String, dynamic> json) => BackendTrack(
-      spotifyId: json['spotify_id'] as String,
-      youtubeId: json['youtube_id'] as String,
-      votes: json['votes'] as int,
-    )
-      ..id = json['id'] as String
-      ..created = json['created'] as String
-      ..updated = json['updated'] as String
-      ..collectionId = json['collectionId'] as String
-      ..collectionName = json['collectionName'] as String;
-
-Map<String, dynamic> _$BackendTrackToJson(BackendTrack instance) =>
-    <String, dynamic>{
-      'id': instance.id,
-      'created': instance.created,
-      'updated': instance.updated,
-      'collectionId': instance.collectionId,
-      'collectionName': instance.collectionName,
-      'spotify_id': instance.spotifyId,
-      'youtube_id': instance.youtubeId,
-      'votes': instance.votes,
-    };
diff --git a/lib/pages/album/album.dart b/lib/pages/album/album.dart
index abf86f3f..0e9609d5 100644
--- a/lib/pages/album/album.dart
+++ b/lib/pages/album/album.dart
@@ -4,10 +4,10 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/shared/heart_button.dart';
-import 'package:spotube/components/shared/track_table/track_collection_view.dart';
+import 'package:spotube/components/shared/track_table/track_collection_view/track_collection_view.dart';
 import 'package:spotube/components/shared/track_table/tracks_table_view.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
 import 'package:spotube/utils/service_utils.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
@@ -17,33 +17,33 @@ class AlbumPage extends HookConsumerWidget {
   const AlbumPage(this.album, {Key? key}) : super(key: key);
 
   Future<void> playPlaylist(
-    PlaylistQueueNotifier playback,
     List<Track> tracks,
     WidgetRef ref, {
     Track? currentTrack,
   }) async {
-    final playlist = ref.read(PlaylistQueueNotifier.provider);
+    final playlist = ref.read(ProxyPlaylistNotifier.provider);
+    final playback = ref.read(ProxyPlaylistNotifier.notifier);
     final sortBy = ref.read(trackCollectionSortState(album.id!));
     final sortedTracks = ServiceUtils.sortTracks(tracks, sortBy);
     currentTrack ??= sortedTracks.first;
-    final isPlaylistPlaying = playback.isPlayingPlaylist(tracks);
+    final isPlaylistPlaying = playlist.containsTracks(tracks);
     if (!isPlaylistPlaying) {
-      playback.load(
+      await playback.load(
         sortedTracks,
-        active: sortedTracks.indexWhere((s) => s.id == currentTrack?.id),
+        initialIndex: sortedTracks.indexWhere((s) => s.id == currentTrack?.id),
       );
-      await playback.play();
+      playback.addCollection(album.id!);
     } else if (isPlaylistPlaying &&
         currentTrack.id != null &&
-        currentTrack.id != playlist?.activeTrack.id) {
-      await playback.playTrack(currentTrack);
+        currentTrack.id != playlist.activeTrack?.id) {
+      await playback.jumpToTrack(currentTrack);
     }
   }
 
   @override
   Widget build(BuildContext context, ref) {
-    ref.watch(PlaylistQueueNotifier.provider);
-    final playback = ref.watch(PlaylistQueueNotifier.notifier);
+    final playlist = ref.watch(ProxyPlaylistNotifier.provider);
+    final playback = ref.watch(ProxyPlaylistNotifier.notifier);
 
     final tracksSnapshot = useQueries.album.tracksOf(ref, album.id!);
 
@@ -54,10 +54,10 @@ class AlbumPage extends HookConsumerWidget {
             ),
         [album.images]);
 
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
 
     final isAlbumPlaying = useMemoized(
-      () => playback.isPlayingPlaylist(tracksSnapshot.data ?? []),
+      () => playlist.containsTracks(tracksSnapshot.data ?? []),
       [playback, tracksSnapshot.data],
     );
     return TrackCollectionView(
@@ -68,12 +68,11 @@ class AlbumPage extends HookConsumerWidget {
       tracksSnapshot: tracksSnapshot,
       album: album,
       routePath: "/album/${album.id}",
-      bottomSpace: breakpoint.isLessThanOrEqualTo(Breakpoints.md),
+      bottomSpace: mediaQuery.mdAndDown,
       onPlay: ([track]) {
         if (tracksSnapshot.hasData) {
           if (!isAlbumPlaying) {
             playPlaylist(
-              playback,
               tracksSnapshot.data!
                   .map((track) =>
                       TypeConversionUtils.simpleTrack_X_Track(track, album))
@@ -82,7 +81,6 @@ class AlbumPage extends HookConsumerWidget {
             );
           } else if (isAlbumPlaying && track != null) {
             playPlaylist(
-              playback,
               tracksSnapshot.data!
                   .map((track) =>
                       TypeConversionUtils.simpleTrack_X_Track(track, album))
@@ -91,23 +89,20 @@ class AlbumPage extends HookConsumerWidget {
               ref,
             );
           } else {
-            playback.remove(
-              tracksSnapshot.data!
-                  .map((track) =>
-                      TypeConversionUtils.simpleTrack_X_Track(track, album))
-                  .toList(),
-            );
+            playback
+                .removeTracks(tracksSnapshot.data!.map((track) => track.id!));
           }
         }
       },
       onAddToQueue: () {
         if (tracksSnapshot.hasData && !isAlbumPlaying) {
-          playback.add(
+          playback.addTracks(
             tracksSnapshot.data!
                 .map((track) =>
                     TypeConversionUtils.simpleTrack_X_Track(track, album))
                 .toList(),
           );
+          playback.addCollection(album.id!);
         }
       },
       onShare: () {
@@ -126,19 +121,18 @@ class AlbumPage extends HookConsumerWidget {
             ..shuffle();
           if (!isAlbumPlaying) {
             playPlaylist(
-              playback,
               tracks,
               ref,
             );
           } else if (isAlbumPlaying && track != null) {
             playPlaylist(
-              playback,
               tracks,
               ref,
               currentTrack: track,
             );
           } else {
-            playback.stop();
+            // TODO: Disable ability to stop playback from playlist/album
+            // playback.stop();
           }
         }
       },
diff --git a/lib/pages/artist/artist.dart b/lib/pages/artist/artist.dart
index d939fedf..44e40423 100644
--- a/lib/pages/artist/artist.dart
+++ b/lib/pages/artist/artist.dart
@@ -1,9 +1,10 @@
-import 'package:fl_query/fl_query.dart';
+import 'package:collection/collection.dart';
+import 'package:fl_query_hooks/fl_query_hooks.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotify/spotify.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_artist_profile.dart';
@@ -12,13 +13,14 @@ import 'package:spotube/components/shared/track_table/track_tile.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
 import 'package:spotube/components/artist/artist_album_list.dart';
 import 'package:spotube/components/artist/artist_card.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/hooks/use_breakpoint_value.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
 import 'package:spotube/models/logger.dart';
 import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/provider/blacklist_provider.dart';
 import 'package:spotube/provider/spotify_provider.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
 
 import 'package:spotube/utils/primitive_utils.dart';
@@ -33,34 +35,41 @@ class ArtistPage extends HookConsumerWidget {
   Widget build(BuildContext context, ref) {
     SpotifyApi spotify = ref.watch(spotifyProvider);
     final parentScrollController = useScrollController();
-    final textTheme = PlatformTheme.of(context).textTheme;
+    final theme = Theme.of(context);
+    final scaffoldMessenger = ScaffoldMessenger.of(context);
+    final textTheme = theme.textTheme;
     final chipTextVariant = useBreakpointValue(
-      sm: textTheme!.caption,
-      md: textTheme.body,
-      lg: textTheme.subheading,
-      xl: textTheme.headline,
-      xxl: textTheme.headline,
+      xs: textTheme.bodySmall,
+      sm: textTheme.bodySmall,
+      md: textTheme.bodyMedium,
+      lg: textTheme.bodyLarge,
+      xl: textTheme.titleSmall,
+      xxl: textTheme.titleMedium,
     );
 
+    final mediaQuery = MediaQuery.of(context);
+
     final avatarWidth = useBreakpointValue(
-      sm: MediaQuery.of(context).size.width * 0.50,
-      md: MediaQuery.of(context).size.width * 0.40,
-      lg: MediaQuery.of(context).size.width * 0.18,
-      xl: MediaQuery.of(context).size.width * 0.18,
-      xxl: MediaQuery.of(context).size.width * 0.18,
+      xs: mediaQuery.size.width * 0.50,
+      sm: mediaQuery.size.width * 0.50,
+      md: mediaQuery.size.width * 0.40,
+      lg: mediaQuery.size.width * 0.18,
+      xl: mediaQuery.size.width * 0.18,
+      xxl: mediaQuery.size.width * 0.18,
     );
 
-    final breakpoint = useBreakpoints();
-
-    final playlistNotifier = ref.watch(PlaylistQueueNotifier.notifier);
-    final playlist = ref.watch(PlaylistQueueNotifier.provider);
+    final playlistNotifier = ref.watch(ProxyPlaylistNotifier.notifier);
+    final playlist = ref.watch(ProxyPlaylistNotifier.provider);
 
     final auth = ref.watch(AuthenticationNotifier.provider);
 
+    final queryClient = useQueryClient();
+
     return SafeArea(
-      child: PlatformScaffold(
-        appBar: PageWindowTitleBar(
-          leading: const PlatformBackButton(),
+      bottom: false,
+      child: Scaffold(
+        appBar: const PageWindowTitleBar(
+          leading: BackButton(),
         ),
         body: HookBuilder(
           builder: (context) {
@@ -70,7 +79,7 @@ class ArtistPage extends HookConsumerWidget {
               return const ShimmerArtistProfile();
             } else if (artistsQuery.hasError) {
               return Center(
-                child: PlatformText(artistsQuery.error.toString()),
+                child: Text(artistsQuery.error.toString()),
               );
             }
 
@@ -83,102 +92,100 @@ class ArtistPage extends HookConsumerWidget {
 
             return SingleChildScrollView(
               controller: parentScrollController,
-              padding: const EdgeInsets.all(20),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Wrap(
-                    crossAxisAlignment: WrapCrossAlignment.center,
-                    runAlignment: WrapAlignment.center,
-                    children: [
-                      const SizedBox(width: 50),
-                      CircleAvatar(
-                        radius: avatarWidth,
-                        backgroundImage: UniversalImage.imageProvider(
-                          TypeConversionUtils.image_X_UrlString(
-                            data.images,
-                            placeholder: ImagePlaceholder.artist,
+              child: SafeArea(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Wrap(
+                      crossAxisAlignment: WrapCrossAlignment.center,
+                      runAlignment: WrapAlignment.center,
+                      children: [
+                        const SizedBox(width: 50),
+                        Padding(
+                          padding: const EdgeInsets.all(16),
+                          child: CircleAvatar(
+                            radius: avatarWidth,
+                            backgroundImage: UniversalImage.imageProvider(
+                              TypeConversionUtils.image_X_UrlString(
+                                data.images,
+                                placeholder: ImagePlaceholder.artist,
+                              ),
+                            ),
                           ),
                         ),
-                      ),
-                      Padding(
-                        padding: const EdgeInsets.all(20),
-                        child: Column(
-                          mainAxisSize: MainAxisSize.min,
-                          crossAxisAlignment: CrossAxisAlignment.start,
-                          children: [
-                            Row(
-                              mainAxisSize: MainAxisSize.min,
-                              children: [
-                                Container(
-                                  padding: const EdgeInsets.symmetric(
-                                      horizontal: 10, vertical: 5),
-                                  decoration: BoxDecoration(
-                                      color: Colors.blue,
-                                      borderRadius: BorderRadius.circular(50)),
-                                  child: PlatformText(
-                                    data.type!.toUpperCase(),
-                                    style: chipTextVariant?.copyWith(
-                                      color: Colors.white,
-                                    ),
-                                  ),
-                                ),
-                                if (isBlackListed) ...[
-                                  const SizedBox(width: 5),
+                        Padding(
+                          padding: const EdgeInsets.all(20),
+                          child: Column(
+                            mainAxisSize: MainAxisSize.min,
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Row(
+                                mainAxisSize: MainAxisSize.min,
+                                children: [
                                   Container(
                                     padding: const EdgeInsets.symmetric(
                                         horizontal: 10, vertical: 5),
                                     decoration: BoxDecoration(
-                                        color: Colors.red[400],
+                                        color: Colors.blue,
                                         borderRadius:
                                             BorderRadius.circular(50)),
-                                    child: PlatformText(
-                                      "Blacklisted",
-                                      style: chipTextVariant?.copyWith(
+                                    child: Text(
+                                      data.type!.toUpperCase(),
+                                      style: chipTextVariant.copyWith(
                                         color: Colors.white,
                                       ),
                                     ),
                                   ),
-                                ]
-                              ],
-                            ),
-                            PlatformText(
-                              data.name!,
-                              style: breakpoint.isSm
-                                  ? textTheme.subheading
-                                  : textTheme.headline,
-                            ),
-                            PlatformText(
-                              "${PrimitiveUtils.toReadableNumber(data.followers!.total!.toDouble())} followers",
-                              style: breakpoint.isSm
-                                  ? textTheme.body
-                                  : textTheme.body
-                                      ?.copyWith(fontWeight: FontWeight.bold),
-                            ),
-                            const SizedBox(height: 20),
-                            Row(
-                              mainAxisSize: MainAxisSize.min,
-                              children: [
-                                if (auth != null)
-                                  HookBuilder(
-                                    builder: (context) {
-                                      final isFollowingQuery = useQueries.artist
-                                          .doIFollow(ref, artistId);
+                                  if (isBlackListed) ...[
+                                    const SizedBox(width: 5),
+                                    Container(
+                                      padding: const EdgeInsets.symmetric(
+                                          horizontal: 10, vertical: 5),
+                                      decoration: BoxDecoration(
+                                          color: Colors.red[400],
+                                          borderRadius:
+                                              BorderRadius.circular(50)),
+                                      child: Text(
+                                        context.l10n.blacklisted,
+                                        style: chipTextVariant.copyWith(
+                                          color: Colors.white,
+                                        ),
+                                      ),
+                                    ),
+                                  ]
+                                ],
+                              ),
+                              Text(
+                                data.name!,
+                                style: mediaQuery.smAndDown
+                                    ? textTheme.headlineSmall
+                                    : textTheme.headlineMedium,
+                              ),
+                              Text(
+                                context.l10n.followers(
+                                  PrimitiveUtils.toReadableNumber(
+                                    data.followers!.total!.toDouble(),
+                                  ),
+                                ),
+                                style: textTheme.bodyMedium?.copyWith(
+                                  fontWeight: mediaQuery.mdAndUp
+                                      ? FontWeight.bold
+                                      : null,
+                                ),
+                              ),
+                              const SizedBox(height: 20),
+                              Row(
+                                mainAxisSize: MainAxisSize.min,
+                                children: [
+                                  if (auth != null)
+                                    HookBuilder(
+                                      builder: (context) {
+                                        final isFollowingQuery = useQueries
+                                            .artist
+                                            .doIFollow(ref, artistId);
 
-                                      if (isFollowingQuery.isLoading ||
-                                          !isFollowingQuery.hasData) {
-                                        return const SizedBox(
-                                          height: 20,
-                                          width: 20,
-                                          child:
-                                              PlatformCircularProgressIndicator(),
-                                        );
-                                      }
-
-                                      final queryBowl = QueryClient.of(context);
-
-                                      return PlatformFilledButton(
-                                        onPressed: () async {
+                                        final followUnfollow =
+                                            useCallback(() async {
                                           try {
                                             isFollowingQuery.data!
                                                 ? await spotify.me.unfollow(
@@ -191,218 +198,258 @@ class ArtistPage extends HookConsumerWidget {
                                                   );
                                             await isFollowingQuery.refresh();
 
-                                            queryBowl
+                                            queryClient
                                                 .refreshInfiniteQueryAllPages(
                                                     "user-following-artists");
                                           } finally {
-                                            QueryClient.of(context).refreshQuery(
-                                                "user-follows-artists-query/$artistId");
+                                            queryClient.refreshQuery(
+                                              "user-follows-artists-query/$artistId",
+                                            );
                                           }
-                                        },
-                                        child: PlatformText(
-                                          isFollowingQuery.data!
-                                              ? "Following"
-                                              : "Follow",
+                                        }, [isFollowingQuery]);
+
+                                        if (isFollowingQuery.isLoading ||
+                                            !isFollowingQuery.hasData) {
+                                          return const SizedBox(
+                                            height: 20,
+                                            width: 20,
+                                            child: CircularProgressIndicator(),
+                                          );
+                                        }
+
+                                        if (isFollowingQuery.data!) {
+                                          return OutlinedButton(
+                                            onPressed: followUnfollow,
+                                            child: Text(context.l10n.following),
+                                          );
+                                        }
+
+                                        return FilledButton(
+                                          onPressed: followUnfollow,
+                                          child: Text(context.l10n.follow),
+                                        );
+                                      },
+                                    ),
+                                  const SizedBox(width: 5),
+                                  IconButton(
+                                    tooltip:
+                                        context.l10n.add_artist_to_blacklist,
+                                    icon: Icon(
+                                      SpotubeIcons.userRemove,
+                                      color: !isBlackListed
+                                          ? Colors.red[400]
+                                          : Colors.white,
+                                    ),
+                                    style: IconButton.styleFrom(
+                                      backgroundColor: isBlackListed
+                                          ? Colors.red[400]
+                                          : null,
+                                    ),
+                                    onPressed: () async {
+                                      if (isBlackListed) {
+                                        ref
+                                            .read(BlackListNotifier
+                                                .provider.notifier)
+                                            .remove(
+                                              BlacklistedElement.artist(
+                                                  data.id!, data.name!),
+                                            );
+                                      } else {
+                                        ref
+                                            .read(BlackListNotifier
+                                                .provider.notifier)
+                                            .add(
+                                              BlacklistedElement.artist(
+                                                  data.id!, data.name!),
+                                            );
+                                      }
+                                    },
+                                  ),
+                                  IconButton(
+                                    icon: const Icon(SpotubeIcons.share),
+                                    onPressed: () async {
+                                      if (data.externalUrls?.spotify != null) {
+                                        await Clipboard.setData(
+                                          ClipboardData(
+                                            text: data.externalUrls!.spotify!,
+                                          ),
+                                        );
+                                      }
+
+                                      if (!context.mounted) return;
+
+                                      scaffoldMessenger.showSnackBar(
+                                        SnackBar(
+                                          width: 300,
+                                          behavior: SnackBarBehavior.floating,
+                                          content: Text(
+                                            context.l10n.artist_url_copied,
+                                            textAlign: TextAlign.center,
+                                          ),
+                                        ),
+                                      );
+                                    },
+                                  )
+                                ],
+                              )
+                            ],
+                          ),
+                        ),
+                      ],
+                    ),
+                    const SizedBox(height: 50),
+                    HookBuilder(
+                      builder: (context) {
+                        final topTracksQuery = useQueries.artist.topTracksOf(
+                          ref,
+                          artistId,
+                        );
+
+                        final isPlaylistPlaying = playlist.containsTracks(
+                          topTracksQuery.data ?? <Track>[],
+                        );
+
+                        if (topTracksQuery.isLoading ||
+                            !topTracksQuery.hasData) {
+                          return const CircularProgressIndicator();
+                        } else if (topTracksQuery.hasError) {
+                          return Center(
+                            child: Text(topTracksQuery.error.toString()),
+                          );
+                        }
+
+                        final topTracks = topTracksQuery.data!;
+
+                        void playPlaylist(List<Track> tracks,
+                            {Track? currentTrack}) async {
+                          currentTrack ??= tracks.first;
+                          if (!isPlaylistPlaying) {
+                            playlistNotifier.load(
+                              tracks,
+                              initialIndex: tracks
+                                  .indexWhere((s) => s.id == currentTrack?.id),
+                              autoPlay: true,
+                            );
+                          } else if (isPlaylistPlaying &&
+                              currentTrack.id != null &&
+                              currentTrack.id != playlist.activeTrack?.id) {
+                            await playlistNotifier.jumpToTrack(currentTrack);
+                          }
+                        }
+
+                        return Column(
+                          children: [
+                            Row(
+                              children: [
+                                Padding(
+                                  padding: const EdgeInsets.all(8.0),
+                                  child: Text(
+                                    context.l10n.top_tracks,
+                                    style: theme.textTheme.headlineSmall,
+                                  ),
+                                ),
+                                if (!isPlaylistPlaying)
+                                  IconButton(
+                                    icon: const Icon(
+                                      SpotubeIcons.queueAdd,
+                                    ),
+                                    onPressed: () {
+                                      playlistNotifier
+                                          .addTracks(topTracks.toList());
+                                      scaffoldMessenger.showSnackBar(
+                                        SnackBar(
+                                          width: 300,
+                                          behavior: SnackBarBehavior.floating,
+                                          content: Text(
+                                            context.l10n.added_to_queue(
+                                              topTracks.length,
+                                            ),
+                                            textAlign: TextAlign.center,
+                                          ),
                                         ),
                                       );
                                     },
                                   ),
                                 const SizedBox(width: 5),
-                                PlatformIconButton(
-                                  tooltip: "Add to blacklisted artists",
+                                IconButton(
                                   icon: Icon(
-                                    SpotubeIcons.userRemove,
-                                    color: !isBlackListed
-                                        ? Colors.red[400]
-                                        : Colors.white,
+                                    isPlaylistPlaying
+                                        ? SpotubeIcons.stop
+                                        : SpotubeIcons.play,
+                                    color: Colors.white,
                                   ),
-                                  backgroundColor:
-                                      isBlackListed ? Colors.red[400] : null,
-                                  onPressed: () async {
-                                    if (isBlackListed) {
-                                      ref
-                                          .read(BlackListNotifier
-                                              .provider.notifier)
-                                          .remove(
-                                            BlacklistedElement.artist(
-                                                data.id!, data.name!),
-                                          );
-                                    } else {
-                                      ref
-                                          .read(BlackListNotifier
-                                              .provider.notifier)
-                                          .add(
-                                            BlacklistedElement.artist(
-                                                data.id!, data.name!),
-                                          );
-                                    }
-                                  },
-                                ),
-                                PlatformIconButton(
-                                  icon: const Icon(SpotubeIcons.share),
-                                  onPressed: () async {
-                                    await Clipboard.setData(
-                                      ClipboardData(
-                                          text: data.externalUrls?.spotify),
-                                    );
-
-                                    ScaffoldMessenger.of(context).showSnackBar(
-                                      const SnackBar(
-                                        width: 300,
-                                        behavior: SnackBarBehavior.floating,
-                                        content: PlatformText(
-                                          "Artist URL copied to clipboard",
-                                          textAlign: TextAlign.center,
-                                        ),
-                                      ),
-                                    );
-                                  },
+                                  style: IconButton.styleFrom(
+                                    backgroundColor: theme.colorScheme.primary,
+                                  ),
+                                  onPressed: () =>
+                                      playPlaylist(topTracks.toList()),
                                 )
                               ],
-                            )
-                          ],
-                        ),
-                      ),
-                    ],
-                  ),
-                  const SizedBox(height: 50),
-                  HookBuilder(
-                    builder: (context) {
-                      final topTracksQuery = useQueries.artist.topTracksOf(
-                        ref,
-                        artistId,
-                      );
-
-                      final isPlaylistPlaying =
-                          playlistNotifier.isPlayingPlaylist(
-                        topTracksQuery.data ?? <Track>[],
-                      );
-
-                      if (topTracksQuery.isLoading || !topTracksQuery.hasData) {
-                        return const PlatformCircularProgressIndicator();
-                      } else if (topTracksQuery.hasError) {
-                        return Center(
-                          child: PlatformText(topTracksQuery.error.toString()),
-                        );
-                      }
-
-                      final topTracks = topTracksQuery.data!;
-
-                      void playPlaylist(List<Track> tracks,
-                          {Track? currentTrack}) async {
-                        currentTrack ??= tracks.first;
-                        if (!isPlaylistPlaying) {
-                          playlistNotifier.loadAndPlay(tracks,
-                              active: tracks
-                                  .indexWhere((s) => s.id == currentTrack?.id));
-                        } else if (isPlaylistPlaying &&
-                            currentTrack.id != null &&
-                            currentTrack.id != playlist?.activeTrack.id) {
-                          await playlistNotifier.playTrack(currentTrack);
-                        }
-                      }
-
-                      return Column(children: [
-                        Row(
-                          children: [
-                            PlatformText(
-                              "Top Tracks",
-                              style:
-                                  PlatformTheme.of(context).textTheme?.headline,
                             ),
-                            if (!isPlaylistPlaying)
-                              PlatformIconButton(
-                                icon: const Icon(
-                                  SpotubeIcons.queueAdd,
-                                ),
-                                onPressed: () {
-                                  playlistNotifier.add(topTracks.toList());
-                                  ScaffoldMessenger.of(context).showSnackBar(
-                                    SnackBar(
-                                      width: 300,
-                                      behavior: SnackBarBehavior.floating,
-                                      content: PlatformText(
-                                        "Added ${topTracks.length} tracks to queue",
-                                        textAlign: TextAlign.center,
-                                      ),
-                                    ),
+                            ...topTracks.mapIndexed((i, track) {
+                              return TrackTile(
+                                index: i,
+                                track: track,
+                                onTap: () {
+                                  playPlaylist(
+                                    topTracks.toList(),
+                                    currentTrack: track,
                                   );
                                 },
-                              ),
-                            if (platform != TargetPlatform.linux)
-                              const SizedBox(width: 5),
-                            PlatformIconButton(
-                              icon: Icon(
-                                isPlaylistPlaying
-                                    ? SpotubeIcons.stop
-                                    : SpotubeIcons.play,
-                                color: Colors.white,
-                              ),
-                              backgroundColor:
-                                  PlatformTheme.of(context).primaryColor,
-                              onPressed: () => playPlaylist(topTracks.toList()),
-                            )
+                              );
+                            }),
                           ],
-                        ),
-                        ...topTracks.toList().asMap().entries.map((track) {
-                          String duration =
-                              "${track.value.duration?.inMinutes.remainder(60)}:${PrimitiveUtils.zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}";
-                          return TrackTile(
-                            playlist,
-                            duration: duration,
-                            track: track,
-                            isActive:
-                                playlist?.activeTrack.id == track.value.id,
-                            onTrackPlayButtonPressed: (currentTrack) =>
-                                playPlaylist(
-                              topTracks.toList(),
-                              currentTrack: track.value,
-                            ),
-                          );
-                        }),
-                      ]);
-                    },
-                  ),
-                  const SizedBox(height: 50),
-                  PlatformText(
-                    "Albums",
-                    style: PlatformTheme.of(context).textTheme?.headline,
-                  ),
-                  const SizedBox(height: 10),
-                  ArtistAlbumList(artistId),
-                  const SizedBox(height: 20),
-                  PlatformText(
-                    "Fans also likes",
-                    style: PlatformTheme.of(context).textTheme?.headline,
-                  ),
-                  const SizedBox(height: 10),
-                  HookBuilder(
-                    builder: (context) {
-                      final relatedArtists = useQueries.artist.relatedArtistsOf(
-                        ref,
-                        artistId,
-                      );
-
-                      if (relatedArtists.isLoading || !relatedArtists.hasData) {
-                        return const PlatformCircularProgressIndicator();
-                      } else if (relatedArtists.hasError) {
-                        return Center(
-                          child: PlatformText(relatedArtists.error.toString()),
                         );
-                      }
+                      },
+                    ),
+                    const SizedBox(height: 50),
+                    Padding(
+                      padding: const EdgeInsets.all(8.0),
+                      child: Text(
+                        context.l10n.albums,
+                        style: theme.textTheme.headlineSmall,
+                      ),
+                    ),
+                    ArtistAlbumList(artistId),
+                    const SizedBox(height: 20),
+                    Padding(
+                      padding: const EdgeInsets.all(8.0),
+                      child: Text(
+                        context.l10n.fans_also_like,
+                        style: theme.textTheme.headlineSmall,
+                      ),
+                    ),
+                    const SizedBox(height: 10),
+                    HookBuilder(
+                      builder: (context) {
+                        final relatedArtists =
+                            useQueries.artist.relatedArtistsOf(
+                          ref,
+                          artistId,
+                        );
 
-                      return Center(
-                        child: Wrap(
-                          spacing: 20,
-                          runSpacing: 20,
-                          children: relatedArtists.data!
-                              .map((artist) => ArtistCard(artist))
-                              .toList(),
-                        ),
-                      );
-                    },
-                  ),
-                ],
+                        if (relatedArtists.isLoading ||
+                            !relatedArtists.hasData) {
+                          return const CircularProgressIndicator();
+                        } else if (relatedArtists.hasError) {
+                          return Center(
+                            child: Text(relatedArtists.error.toString()),
+                          );
+                        }
+
+                        return Center(
+                          child: Wrap(
+                            spacing: 20,
+                            runSpacing: 20,
+                            children: relatedArtists.data!
+                                .map((artist) => ArtistCard(artist))
+                                .toList(),
+                          ),
+                        );
+                      },
+                    ),
+                  ],
+                ),
               ),
             );
           },
diff --git a/lib/pages/desktop_login/desktop_login.dart b/lib/pages/desktop_login/desktop_login.dart
index aaa59f7e..c2cc3695 100644
--- a/lib/pages/desktop_login/desktop_login.dart
+++ b/lib/pages/desktop_login/desktop_login.dart
@@ -1,24 +1,26 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotube/collections/assets.gen.dart';
 import 'package:spotube/components/desktop_login/login_form.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
 
 class DesktopLoginPage extends HookConsumerWidget {
   const DesktopLoginPage({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context, ref) {
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
+    final theme = Theme.of(context);
+    final color = theme.colorScheme.surfaceVariant.withOpacity(.3);
 
     return SafeArea(
-      child: PlatformScaffold(
-        appBar: PageWindowTitleBar(
-          leading: const PlatformBackButton(),
-          hideWhenWindows: false,
+      child: Scaffold(
+        appBar: const PageWindowTitleBar(
+          leading: BackButton(),
         ),
         body: SingleChildScrollView(
           child: Center(
@@ -26,20 +28,22 @@ class DesktopLoginPage extends HookConsumerWidget {
               margin: const EdgeInsets.all(10),
               padding: const EdgeInsets.all(10),
               decoration: BoxDecoration(
-                color: PlatformTheme.of(context).secondaryBackgroundColor,
+                color: color,
                 borderRadius: BorderRadius.circular(10),
               ),
               child: Column(
                 children: [
                   Assets.spotubeLogoPng.image(
                     width: MediaQuery.of(context).size.width *
-                        (breakpoint <= Breakpoints.md ? .5 : .3),
+                        (mediaQuery.mdAndDown ? .5 : .3),
                   ),
-                  PlatformText.subheading(
-                    "Add your spotify credentials to get started",
+                  Text(
+                    context.l10n.add_spotify_credentials,
+                    style: theme.textTheme.titleMedium,
                   ),
-                  PlatformText.label(
-                    "Don't worry, any of your credentials won't be collected or shared with anyone",
+                  Text(
+                    context.l10n.credentials_will_not_be_shared_disclaimer,
+                    style: theme.textTheme.labelMedium,
                   ),
                   const SizedBox(height: 10),
                   TokenLoginForm(
@@ -50,10 +54,10 @@ class DesktopLoginPage extends HookConsumerWidget {
                     alignment: WrapAlignment.center,
                     crossAxisAlignment: WrapCrossAlignment.center,
                     children: [
-                      const PlatformText("Don't know how to do this?"),
-                      PlatformTextButton(
-                        child: const PlatformText(
-                          "Follow along the Step by Step guide",
+                      Text(context.l10n.know_how_to_login),
+                      TextButton(
+                        child: Text(
+                          context.l10n.follow_step_by_step_guide,
                         ),
                         onPressed: () => GoRouter.of(context).push(
                           "/login-tutorial",
diff --git a/lib/pages/desktop_login/login_tutorial.dart b/lib/pages/desktop_login/login_tutorial.dart
index 8f211013..24373e75 100644
--- a/lib/pages/desktop_login/login_tutorial.dart
+++ b/lib/pages/desktop_login/login_tutorial.dart
@@ -2,11 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import 'package:introduction_screen/introduction_screen.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotube/collections/assets.gen.dart';
 import 'package:spotube/components/desktop_login/login_form.dart';
 import 'package:spotube/components/shared/links/hyper_link.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/utils/service_utils.dart';
 
@@ -19,16 +20,16 @@ class LoginTutorial extends ConsumerWidget {
     final authenticationNotifier =
         ref.watch(AuthenticationNotifier.provider.notifier);
     final key = GlobalKey<State<IntroductionScreen>>();
+    final theme = Theme.of(context);
 
     final pageDecoration = PageDecoration(
-      bodyTextStyle: PlatformTheme.of(context).textTheme!.body!,
-      titleTextStyle: PlatformTheme.of(context).textTheme!.subheading!,
+      bodyTextStyle: theme.textTheme.bodyMedium!,
+      titleTextStyle: theme.textTheme.headlineMedium!,
     );
-    return PlatformScaffold(
+    return Scaffold(
       appBar: PageWindowTitleBar(
-        hideWhenWindows: false,
-        leading: PlatformTextButton(
-          child: const PlatformText("Exit"),
+        leading: TextButton(
+          child: Text(context.l10n.exit),
           onPressed: () {
             Navigator.of(context).pop();
           },
@@ -36,86 +37,77 @@ class LoginTutorial extends ConsumerWidget {
       ),
       body: IntroductionScreen(
         key: key,
-        globalBackgroundColor:
-            PlatformTheme.of(context).scaffoldBackgroundColor,
-        overrideBack: PlatformFilledButton(
-          isSecondary: true,
-          child: const Center(child: PlatformText("Previous")),
+        globalBackgroundColor: theme.scaffoldBackgroundColor,
+        overrideBack: OutlinedButton(
+          child: Center(child: Text(context.l10n.previous)),
           onPressed: () {
             (key.currentState as IntroductionScreenState).previous();
           },
         ),
-        overrideNext: PlatformFilledButton(
-          child: const Center(child: PlatformText("Next")),
+        overrideNext: FilledButton(
+          child: Center(child: Text(context.l10n.next)),
           onPressed: () {
             (key.currentState as IntroductionScreenState).next();
           },
         ),
         showBackButton: true,
-        overrideDone: PlatformFilledButton(
+        overrideDone: FilledButton(
           onPressed: authenticationNotifier.isLoggedIn
               ? () {
-                  ServiceUtils.navigate(context, "/");
+                  ServiceUtils.push(context, "/");
                 }
               : null,
-          child: const Center(child: PlatformText("Done")),
+          child: Center(child: Text(context.l10n.done)),
         ),
         pages: [
           PageViewModel(
             decoration: pageDecoration,
-            title: "Step 1",
+            title: context.l10n.step_1,
             image: Assets.tutorial.step1.image(),
             bodyWidget: Wrap(
-              children: const [
-                PlatformText(
-                  "First, Go to ",
-                ),
-                Hyperlink(
+              children: [
+                Text(context.l10n.first_go_to),
+                const SizedBox(width: 5),
+                const Hyperlink(
                   "accounts.spotify.com ",
                   "https://accounts.spotify.com",
                 ),
-                PlatformText(
-                  "and Login/Sign up if you're not logged in",
-                ),
+                Text(context.l10n.login_if_not_logged_in),
               ],
             ),
           ),
           PageViewModel(
             decoration: pageDecoration,
-            title: "Step 2",
+            title: context.l10n.step_2,
             image: Assets.tutorial.step2.image(),
-            bodyWidget: const PlatformText(
-              "1. Once you're logged in, press F12 or Mouse Right Click > Inspect to Open the Browser devtools.\n2. Then go the \"Application\" Tab (Chrome, Edge, Brave etc..) or \"Storage\" Tab (Firefox, Palemoon etc..)\n3. Go to the \"Cookies\" section then the \"https://accounts.spotify.com\" subsection",
-              textAlign: TextAlign.left,
-            ),
+            bodyWidget:
+                Text(context.l10n.step_2_steps, textAlign: TextAlign.left),
           ),
           PageViewModel(
             decoration: pageDecoration,
-            title: "Step 3",
+            title: context.l10n.step_3,
             image: Assets.tutorial.step3.image(),
-            bodyWidget: const PlatformText(
-              "Copy the values of \"sp_dc\" and \"sp_key\" Cookies",
-              textAlign: TextAlign.left,
-            ),
+            bodyWidget:
+                Text(context.l10n.step_3_steps, textAlign: TextAlign.left),
           ),
           if (authenticationNotifier.isLoggedIn)
             PageViewModel(
               decoration: pageDecoration.copyWith(
                 bodyAlignment: Alignment.center,
               ),
-              title: "Success🥳",
+              title: context.l10n.success_emoji,
               image: Assets.success.image(),
-              body:
-                  "Now you're successfully Logged In with your Spotify account. Good Job, mate!",
+              body: context.l10n.success_message,
             )
           else
             PageViewModel(
               decoration: pageDecoration,
-              title: "Step 5",
+              title: context.l10n.step_4,
               bodyWidget: Column(
                 children: [
-                  PlatformText.label(
-                    "Paste the copied \"sp_dc\" and \"sp_key\" values in the respective fields",
+                  Text(
+                    context.l10n.step_4_steps,
+                    style: theme.textTheme.labelMedium,
                   ),
                   const SizedBox(height: 10),
                   TokenLoginForm(
diff --git a/lib/pages/home/genres.dart b/lib/pages/home/genres.dart
index 3b997e10..af0d3836 100644
--- a/lib/pages/home/genres.dart
+++ b/lib/pages/home/genres.dart
@@ -4,14 +4,14 @@ import 'package:collection/collection.dart';
 import 'package:fuzzywuzzy/fuzzywuzzy.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
+import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/genre/category_card.dart';
-import 'package:spotube/components/shared/compact_search.dart';
+import 'package:spotube/components/shared/expandable_search/expandable_search.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_categories.dart';
 import 'package:spotube/components/shared/waypoint.dart';
 
 import 'package:spotube/provider/user_preferences_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
-import 'package:tuple/tuple.dart';
 
 class GenrePage extends HookConsumerWidget {
   const GenrePage({Key? key}) : super(key: key);
@@ -23,10 +23,15 @@ class GenrePage extends HookConsumerWidget {
       userPreferencesProvider.select((s) => s.recommendationMarket),
     );
     final categoriesQuery = useQueries.category.list(ref, recommendationMarket);
+    final isFiltering = useState(false);
 
     final isMounted = useIsMounted();
 
-    final searchText = useState("");
+    final searchController = useTextEditingController();
+    final searchFocus = useFocusNode();
+
+    useValueListenable(searchController);
+
     final categories = useMemoized(
       () {
         final categories = categoriesQuery.pages
@@ -34,27 +39,20 @@ class GenrePage extends HookConsumerWidget {
               (page) => page.items ?? const Iterable.empty(),
             )
             .toList();
-        if (searchText.value.isEmpty) {
+        if (searchController.text.isEmpty) {
           return categories;
         }
         return categories
-            .map((e) => Tuple2(
-                  weightedRatio(e.name!, searchText.value),
+            .map((e) => (
+                  weightedRatio(e.name!, searchController.text),
                   e,
                 ))
-            .sorted((a, b) => b.item1.compareTo(a.item1))
-            .where((e) => e.item1 > 50)
-            .map((e) => e.item2)
+            .sorted((a, b) => b.$1.compareTo(a.$1))
+            .where((e) => e.$1 > 50)
+            .map((e) => e.$2)
             .toList();
       },
-      [categoriesQuery.pages, searchText.value],
-    );
-
-    final searchbar = CompactSearch(
-      onChanged: (value) {
-        searchText.value = value;
-      },
-      placeholder: "Filter categories or genres...",
+      [categoriesQuery.pages, searchController.text],
     );
 
     final list = RefreshIndicator(
@@ -68,17 +66,32 @@ class GenrePage extends HookConsumerWidget {
           }
         },
         controller: scrollController,
-        child: ListView.builder(
-          physics: const AlwaysScrollableScrollPhysics(),
-          controller: scrollController,
-          itemCount: categories.length,
-          itemBuilder: (context, index) {
-            final category = categories[index];
-            if (searchText.value.isEmpty && index == categories.length - 1) {
-              return const ShimmerCategories();
-            }
-            return CategoryCard(category);
-          },
+        child: Column(
+          children: [
+            ExpandableSearchField(
+              isFiltering: isFiltering,
+              searchController: searchController,
+              searchFocus: searchFocus,
+            ),
+            Expanded(
+              child: ListView.builder(
+                controller: scrollController,
+                itemCount: categories.length,
+                itemBuilder: (context, index) {
+                  return AnimatedCrossFade(
+                    crossFadeState: searchController.text.isEmpty &&
+                            index == categories.length - 1 &&
+                            categoriesQuery.hasNextPage
+                        ? CrossFadeState.showFirst
+                        : CrossFadeState.showSecond,
+                    duration: const Duration(milliseconds: 300),
+                    firstChild: const ShimmerCategories(),
+                    secondChild: CategoryCard(categories[index]),
+                  );
+                },
+              ),
+            ),
+          ],
         ),
       ),
     );
@@ -89,7 +102,20 @@ class GenrePage extends HookConsumerWidget {
         Positioned(
           top: 0,
           right: 10,
-          child: searchbar,
+          child: ExpandableSearchButton(
+            isFiltering: isFiltering,
+            searchFocus: searchFocus,
+            icon: const Icon(SpotubeIcons.search),
+            onPressed: (value) {
+              if (isFiltering.value) {
+                scrollController.animateTo(
+                  0,
+                  duration: const Duration(milliseconds: 300),
+                  curve: Curves.easeInOut,
+                );
+              }
+            },
+          ),
         ),
       ],
     );
diff --git a/lib/pages/home/home.dart b/lib/pages/home/home.dart
index 0b7681e3..34f136b6 100644
--- a/lib/pages/home/home.dart
+++ b/lib/pages/home/home.dart
@@ -1,9 +1,8 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
-import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
+import 'package:spotube/components/shared/themed_button_tab_bar.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/pages/home/genres.dart';
 import 'package:spotube/pages/home/personalized.dart';
 
@@ -12,57 +11,25 @@ class HomePage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    final index = useState(0);
-    final tabbar = PlatformTabBar(
-      androidIsScrollable: true,
-      selectedIndex: index.value,
-      onSelectedIndexChanged: (value) => index.value = value,
-      isNavigational:
-          PlatformProperty.byPlatformGroup(mobile: false, desktop: true),
-      tabs: [
-        PlatformTab(
-          label: 'Genres',
-          icon: PlatformProperty.only(
-            android: const SizedBox.shrink(),
-            other: const Icon(SpotubeIcons.genres),
-          ).resolve(platform!),
-        ),
-        PlatformTab(
-          label: 'Personalized',
-          icon: PlatformProperty.only(
-            android: const SizedBox.shrink(),
-            other: const Icon(SpotubeIcons.personalized),
-          ).resolve(platform!),
-        ),
-      ],
-    );
-
-    return PlatformScaffold(
-      appBar: platform == TargetPlatform.windows
-          ? PreferredSize(
-              preferredSize: const Size.fromHeight(40),
-              child: tabbar,
-            )
-          : PageWindowTitleBar(
-              titleWidth: 347,
-              centerTitle: true,
-              center: tabbar,
-            ),
-      body: AnimatedSwitcher(
-        duration: const Duration(milliseconds: 300),
-        transitionBuilder: (child, animation) => SlideTransition(
-          position: animation.drive(
-            Tween<Offset>(
-              begin: const Offset(1, 0),
-              end: const Offset(0, 0),
-            ),
+    return DefaultTabController(
+      length: 2,
+      child: Scaffold(
+        appBar: PageWindowTitleBar(
+          centerTitle: true,
+          leadingWidth: double.infinity,
+          leading: ThemedButtonsTabBar(
+            tabs: [
+              Tab(text: "  ${context.l10n.personalized}  "),
+              Tab(text: "  ${context.l10n.genre}  "),
+            ],
           ),
-          child: child,
         ),
-        child: [
-          const GenrePage(),
-          const PersonalizedPage(),
-        ][index.value],
+        body: const TabBarView(
+          children: [
+            PersonalizedPage(),
+            GenrePage(),
+          ],
+        ),
       ),
     );
   }
diff --git a/lib/pages/home/personalized.dart b/lib/pages/home/personalized.dart
index a502103d..29f6ecb5 100644
--- a/lib/pages/home/personalized.dart
+++ b/lib/pages/home/personalized.dart
@@ -2,19 +2,21 @@ import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart' hide Page;
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/album/album_card.dart';
 import 'package:spotube/components/playlist/playlist_card.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
 import 'package:spotube/components/shared/waypoint.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/models/logger.dart';
+import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 class PersonalizedItemCard extends HookWidget {
-  final Iterable<Page<PlaylistSimple>>? playlists;
-  final Iterable<Page<AlbumSimple>>? albums;
+  final Iterable<PlaylistSimple>? playlists;
+  final Iterable<AlbumSimple>? albums;
   final String title;
   final bool hasNextPage;
   final void Function() onFetchMore;
@@ -35,31 +37,20 @@ class PersonalizedItemCard extends HookWidget {
   Widget build(BuildContext context) {
     final scrollController = useScrollController();
 
-    final playlistItems = playlists
-        ?.expand(
-          (page) => page.items ?? const Iterable<PlaylistSimple>.empty(),
-        )
-        .toList();
-
-    final albumItems = albums
-        ?.expand(
-          (page) => page.items ?? const Iterable<AlbumSimple>.empty(),
-        )
-        .toList();
-
-    return Column(
-      children: [
-        Padding(
-          padding: const EdgeInsets.all(8.0),
-          child: Row(
-            children: [
-              PlatformText.headline(title),
-            ],
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Text(
+              title,
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
           ),
-        ),
-        SizedBox(
-          height: playlists != null ? 245 : 285,
-          child: ScrollConfiguration(
+          ScrollConfiguration(
             behavior: ScrollConfiguration.of(context).copyWith(
               dragDevices: {
                 PointerDeviceKind.touch,
@@ -72,27 +63,29 @@ class PersonalizedItemCard extends HookWidget {
               child: Waypoint(
                 controller: scrollController,
                 onTouchEdge: hasNextPage ? onFetchMore : null,
-                child: ListView(
+                child: SingleChildScrollView(
                   scrollDirection: Axis.horizontal,
-                  shrinkWrap: true,
                   controller: scrollController,
                   physics: const AlwaysScrollableScrollPhysics(),
-                  children: [
-                    ...?playlistItems
-                        ?.map((playlist) => PlaylistCard(playlist)),
-                    ...?albumItems?.map(
-                      (album) => AlbumCard(
-                        TypeConversionUtils.simpleAlbum_X_Album(album),
+                  padding: const EdgeInsets.symmetric(vertical: 8.0),
+                  child: Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      ...?playlists?.map((playlist) => PlaylistCard(playlist)),
+                      ...?albums?.map(
+                        (album) => AlbumCard(
+                          TypeConversionUtils.simpleAlbum_X_Album(album),
+                        ),
                       ),
-                    ),
-                    if (hasNextPage) const ShimmerPlaybuttonCard(count: 1),
-                  ],
+                      if (hasNextPage) const ShimmerPlaybuttonCard(count: 1),
+                    ],
+                  ),
                 ),
               ),
             ),
           ),
-        ),
-      ],
+        ],
+      ),
     );
   }
 }
@@ -102,25 +95,67 @@ class PersonalizedPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
+    final auth = ref.watch(AuthenticationNotifier.provider);
     final featuredPlaylistsQuery = useQueries.playlist.featured(ref);
+    final playlists = useMemoized(
+      () => featuredPlaylistsQuery.pages
+          .whereType<Page<PlaylistSimple>>()
+          .expand((page) => page.items ?? const <PlaylistSimple>[]),
+      [featuredPlaylistsQuery.pages],
+    );
+
+    final madeForUser = useQueries.views.get(ref, "made-for-x-hub");
 
     final newReleases = useQueries.album.newReleases(ref);
+    final userArtists = useQueries.artist
+            .followedByMeAll(ref)
+            .data
+            ?.map((s) => s.id!)
+            .toList() ??
+        const [];
+
+    final albums = useMemoized(
+      () => newReleases.pages
+          .whereType<Page<AlbumSimple>>()
+          .expand((page) => page.items ?? const <AlbumSimple>[])
+          .where((album) {
+        return album.artists
+                ?.any((artist) => userArtists.contains(artist.id!)) ==
+            true;
+      }),
+      [newReleases.pages],
+    );
 
     return ListView(
       children: [
         PersonalizedItemCard(
-          playlists:
-              featuredPlaylistsQuery.pages.whereType<Page<PlaylistSimple>>(),
-          title: 'Featured',
+          playlists: playlists,
+          title: context.l10n.featured,
           hasNextPage: featuredPlaylistsQuery.hasNextPage,
           onFetchMore: featuredPlaylistsQuery.fetchNext,
         ),
-        PersonalizedItemCard(
-          albums: newReleases.pages.whereType<Page<AlbumSimple>>(),
-          title: 'New Releases',
-          hasNextPage: newReleases.hasNextPage,
-          onFetchMore: newReleases.fetchNext,
-        ),
+        if (auth != null)
+          PersonalizedItemCard(
+            albums: albums,
+            title: context.l10n.new_releases,
+            hasNextPage: newReleases.hasNextPage,
+            onFetchMore: newReleases.fetchNext,
+          ),
+        ...?madeForUser.data?["content"]?["items"]?.map((item) {
+          final playlists = item["content"]?["items"]
+                  ?.where((itemL2) => itemL2["type"] == "playlist")
+                  .map((itemL2) => PlaylistSimple.fromJson(itemL2))
+                  .toList()
+                  .cast<PlaylistSimple>() ??
+              <PlaylistSimple>[];
+          if (playlists.isEmpty) return const SizedBox.shrink();
+          return PersonalizedItemCard(
+            playlists: playlists,
+            title: item["name"] ?? "",
+            hasNextPage: false,
+            onFetchMore: () {},
+          );
+        })
       ],
     );
   }
diff --git a/lib/pages/library/library.dart b/lib/pages/library/library.dart
index d18ce290..15434f19 100644
--- a/lib/pages/library/library.dart
+++ b/lib/pages/library/library.dart
@@ -1,55 +1,57 @@
 import 'package:flutter/material.dart' hide Image;
-import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotube/components/library/user_local_tracks.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
 import 'package:spotube/components/library/user_albums.dart';
 import 'package:spotube/components/library/user_artists.dart';
 import 'package:spotube/components/library/user_downloads.dart';
 import 'package:spotube/components/library/user_playlists.dart';
+import 'package:spotube/components/shared/themed_button_tab_bar.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/provider/download_manager_provider.dart';
 
 class LibraryPage extends HookConsumerWidget {
   const LibraryPage({Key? key}) : super(key: key);
   @override
   Widget build(BuildContext context, ref) {
-    final index = useState(0);
+    final downloadingCount =
+        ref.watch(downloadManagerProvider.select((s) => s.length));
 
-    final body = [
-      const UserPlaylists(),
-      const UserLocalTracks(),
-      const UserDownloads(),
-      const UserArtists(),
-      const UserAlbums(),
-    ][index.value];
-
-    final tabbar = PlatformTabBar(
-      androidIsScrollable: true,
-      selectedIndex: index.value,
-      onSelectedIndexChanged: (value) => index.value = value,
-      isNavigational:
-          PlatformProperty.byPlatformGroup(mobile: false, desktop: true),
-      tabs: [
-        PlatformTab(label: 'Playlists', icon: const SizedBox.shrink()),
-        PlatformTab(label: 'Tracks', icon: const SizedBox.shrink()),
-        PlatformTab(label: 'Downloads', icon: const SizedBox.shrink()),
-        PlatformTab(label: 'Artists', icon: const SizedBox.shrink()),
-        PlatformTab(label: 'Albums', icon: const SizedBox.shrink()),
-      ],
-    );
-    return SafeArea(
-      child: PlatformScaffold(
-        appBar: platform == TargetPlatform.windows
-            ? PreferredSize(
-                preferredSize: const Size.fromHeight(40),
-                child: tabbar,
-              )
-            : PageWindowTitleBar(
-                titleWidth: 347,
-                centerTitle: true,
-                center: tabbar,
-              ),
-        body: body,
+    return DefaultTabController(
+      length: 5,
+      child: SafeArea(
+        bottom: false,
+        child: Scaffold(
+          appBar: PageWindowTitleBar(
+            centerTitle: true,
+            leading: ThemedButtonsTabBar(
+              tabs: [
+                Tab(text: "  ${context.l10n.playlists}  "),
+                Tab(text: "  ${context.l10n.tracks}  "),
+                Tab(
+                  child: Badge(
+                    isLabelVisible: downloadingCount > 0,
+                    label: Text(downloadingCount.toString()),
+                    child: Text("  ${context.l10n.downloads}  "),
+                  ),
+                ),
+                Tab(text: "  ${context.l10n.artists}  "),
+                Tab(text: "  ${context.l10n.albums}  "),
+              ],
+            ),
+            leadingWidth: double.infinity,
+          ),
+          body: const TabBarView(
+            children: [
+              UserPlaylists(),
+              UserLocalTracks(),
+              UserDownloads(),
+              UserArtists(),
+              UserAlbums(),
+            ],
+          ),
+        ),
       ),
     );
   }
diff --git a/lib/pages/library/playlist_generate/playlist_generate.dart b/lib/pages/library/playlist_generate/playlist_generate.dart
new file mode 100644
index 00000000..c6f65fb6
--- /dev/null
+++ b/lib/pages/library/playlist_generate/playlist_generate.dart
@@ -0,0 +1,504 @@
+import 'package:collection/collection.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:go_router/go_router.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/collections/spotify_markets.dart';
+import 'package:spotube/collections/spotube_icons.dart';
+import 'package:spotube/components/library/playlist_generate/multi_select_field.dart';
+import 'package:spotube/components/library/playlist_generate/recommendation_attribute_dials.dart';
+import 'package:spotube/components/library/playlist_generate/recommendation_attribute_fields.dart';
+import 'package:spotube/components/library/playlist_generate/seeds_multi_autocomplete.dart';
+import 'package:spotube/components/library/playlist_generate/simple_track_tile.dart';
+import 'package:spotube/components/shared/image/universal_image.dart';
+import 'package:spotube/components/shared/page_window_title_bar.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/pages/library/playlist_generate/playlist_generate_result.dart';
+import 'package:spotube/provider/spotify_provider.dart';
+import 'package:spotube/provider/user_preferences_provider.dart';
+import 'package:spotube/services/queries/queries.dart';
+import 'package:spotube/utils/type_conversion_utils.dart';
+
+const RecommendationAttribute zeroValues = (min: 0, target: 0, max: 0);
+
+class PlaylistGeneratorPage extends HookConsumerWidget {
+  const PlaylistGeneratorPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final spotify = ref.watch(spotifyProvider);
+
+    final theme = Theme.of(context);
+    final textTheme = theme.textTheme;
+    final preferences = ref.watch(userPreferencesProvider);
+
+    final genresCollection = useQueries.category.genreSeeds(ref);
+
+    final limit = useValueNotifier<int>(10);
+    final market = useValueNotifier<String>(preferences.recommendationMarket);
+
+    final genres = useState<List<String>>([]);
+    final artists = useState<List<Artist>>([]);
+    final tracks = useState<List<Track>>([]);
+
+    final enabled =
+        genres.value.length + artists.value.length + tracks.value.length < 5;
+
+    final leftSeedCount =
+        5 - genres.value.length - artists.value.length - tracks.value.length;
+
+    // Dial (int 0-1) attributes
+    final acousticness = useState<RecommendationAttribute>(zeroValues);
+    final danceability = useState<RecommendationAttribute>(zeroValues);
+    final energy = useState<RecommendationAttribute>(zeroValues);
+    final instrumentalness = useState<RecommendationAttribute>(zeroValues);
+    final key = useState<RecommendationAttribute>(zeroValues);
+    final liveness = useState<RecommendationAttribute>(zeroValues);
+    final loudness = useState<RecommendationAttribute>(zeroValues);
+    final popularity = useState<RecommendationAttribute>(zeroValues);
+    final speechiness = useState<RecommendationAttribute>(zeroValues);
+    final valence = useState<RecommendationAttribute>(zeroValues);
+
+    // Field editable attributes
+    final tempo = useState<RecommendationAttribute>(zeroValues);
+    final durationMs = useState<RecommendationAttribute>(zeroValues);
+    final mode = useState<RecommendationAttribute>(zeroValues);
+    final timeSignature = useState<RecommendationAttribute>(zeroValues);
+
+    final artistAutoComplete = SeedsMultiAutocomplete<Artist>(
+      seeds: artists,
+      enabled: enabled,
+      inputDecoration: InputDecoration(
+        labelText: context.l10n.artists,
+        labelStyle: textTheme.titleMedium,
+        helperText: context.l10n.select_up_to_count_type(
+          leftSeedCount,
+          context.l10n.artists,
+        ),
+      ),
+      fetchSeeds: (textEditingValue) => spotify.search
+          .get(
+            textEditingValue.text,
+            types: [SearchType.artist],
+          )
+          .first(6)
+          .then(
+            (v) => List.castFrom<dynamic, Artist>(
+              v.expand((e) => e.items ?? []).toList(),
+            )
+                .where(
+                  (element) =>
+                      artists.value.none((artist) => element.id == artist.id),
+                )
+                .toList(),
+          ),
+      autocompleteOptionBuilder: (option, onSelected) => ListTile(
+        leading: CircleAvatar(
+          backgroundImage: UniversalImage.imageProvider(
+            TypeConversionUtils.image_X_UrlString(
+              option.images,
+              placeholder: ImagePlaceholder.artist,
+            ),
+          ),
+        ),
+        horizontalTitleGap: 20,
+        title: Text(option.name!),
+        subtitle: option.genres?.isNotEmpty != true
+            ? null
+            : Wrap(
+                spacing: 4,
+                runSpacing: 4,
+                children: option.genres!.mapIndexed(
+                  (index, genre) {
+                    return Chip(
+                      label: Text(genre),
+                      labelStyle: textTheme.bodySmall?.copyWith(
+                        color: theme.colorScheme.secondary,
+                        fontWeight: FontWeight.w600,
+                      ),
+                      side: BorderSide.none,
+                      backgroundColor: theme.colorScheme.secondaryContainer,
+                    );
+                  },
+                ).toList(),
+              ),
+        onTap: () => onSelected(option),
+      ),
+      displayStringForOption: (option) => option.name!,
+      selectedSeedBuilder: (artist) => Chip(
+        avatar: CircleAvatar(
+          backgroundImage: UniversalImage.imageProvider(
+            TypeConversionUtils.image_X_UrlString(
+              artist.images,
+              placeholder: ImagePlaceholder.artist,
+            ),
+          ),
+        ),
+        label: Text(artist.name!),
+        onDeleted: () {
+          artists.value = [
+            ...artists.value..removeWhere((element) => element.id == artist.id)
+          ];
+        },
+      ),
+    );
+
+    final tracksAutocomplete = SeedsMultiAutocomplete<Track>(
+      seeds: tracks,
+      enabled: enabled,
+      selectedItemDisplayType: SelectedItemDisplayType.list,
+      inputDecoration: InputDecoration(
+        labelText: context.l10n.tracks,
+        labelStyle: textTheme.titleMedium,
+        helperText: context.l10n.select_up_to_count_type(
+          leftSeedCount,
+          context.l10n.tracks,
+        ),
+      ),
+      fetchSeeds: (textEditingValue) => spotify.search
+          .get(
+            textEditingValue.text,
+            types: [SearchType.track],
+          )
+          .first(6)
+          .then(
+            (v) => List.castFrom<dynamic, Track>(
+              v.expand((e) => e.items ?? []).toList(),
+            )
+                .where(
+                  (element) =>
+                      tracks.value.none((track) => element.id == track.id),
+                )
+                .toList(),
+          ),
+      autocompleteOptionBuilder: (option, onSelected) => ListTile(
+        leading: CircleAvatar(
+          backgroundImage: UniversalImage.imageProvider(
+            TypeConversionUtils.image_X_UrlString(
+              option.album?.images,
+              placeholder: ImagePlaceholder.artist,
+            ),
+          ),
+        ),
+        horizontalTitleGap: 20,
+        title: Text(option.name!),
+        subtitle: Text(
+          option.artists?.map((e) => e.name).join(", ") ??
+              option.album?.name ??
+              "",
+        ),
+        onTap: () => onSelected(option),
+      ),
+      displayStringForOption: (option) => option.name!,
+      selectedSeedBuilder: (option) => SimpleTrackTile(
+        track: option,
+        onDelete: () {
+          tracks.value = [
+            ...tracks.value..removeWhere((element) => element.id == option.id)
+          ];
+        },
+      ),
+    );
+
+    final genreSelector = MultiSelectField<String>(
+      options: genresCollection.data ?? [],
+      selectedOptions: genres.value,
+      getValueForOption: (option) => option,
+      onSelected: (value) {
+        genres.value = value;
+      },
+      dialogTitle: Text(context.l10n.select_genres),
+      label: Text(context.l10n.add_genres),
+      helperText: context.l10n.select_up_to_count_type(
+        leftSeedCount,
+        context.l10n.genre,
+      ),
+      enabled: enabled,
+    );
+    final countrySelector = ValueListenableBuilder(
+      valueListenable: market,
+      builder: (context, value, _) {
+        return DropdownButtonFormField<String>(
+          decoration: InputDecoration(
+            labelText: context.l10n.country,
+            labelStyle: textTheme.titleMedium,
+          ),
+          isExpanded: true,
+          items: spotifyMarkets
+              .map(
+                (country) => DropdownMenuItem(
+                  value: country.$1,
+                  child: Text(country.$2),
+                ),
+              )
+              .toList(),
+          value: market.value,
+          onChanged: (value) {
+            market.value = value!;
+          },
+        );
+      },
+    );
+
+    return Scaffold(
+      appBar: PageWindowTitleBar(
+        leading: const BackButton(),
+        title: Text(context.l10n.generate_playlist),
+        centerTitle: true,
+      ),
+      body: SliderTheme(
+        data: const SliderThemeData(
+          overlayShape: RoundSliderOverlayShape(),
+        ),
+        child: SafeArea(
+          child: LayoutBuilder(builder: (context, constrains) {
+            return ListView(
+              padding: const EdgeInsets.all(16),
+              children: [
+                ValueListenableBuilder(
+                  valueListenable: limit,
+                  builder: (context, value, child) {
+                    return Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          context.l10n.number_of_tracks_generate,
+                          style: textTheme.titleMedium,
+                        ),
+                        Row(
+                          children: [
+                            Container(
+                              width: 40,
+                              height: 40,
+                              alignment: Alignment.center,
+                              decoration: BoxDecoration(
+                                color: theme.colorScheme.primary,
+                                shape: BoxShape.circle,
+                              ),
+                              child: Text(
+                                value.round().toString(),
+                                style: textTheme.bodyLarge?.copyWith(
+                                  color: theme.colorScheme.primaryContainer,
+                                ),
+                              ),
+                            ),
+                            Expanded(
+                              child: Slider.adaptive(
+                                value: value.toDouble(),
+                                min: 10,
+                                max: 100,
+                                divisions: 9,
+                                label: value.round().toString(),
+                                onChanged: (value) {
+                                  limit.value = value.round();
+                                },
+                              ),
+                            )
+                          ],
+                        )
+                      ],
+                    );
+                  },
+                ),
+                const SizedBox(height: 16),
+                if (constrains.mdAndUp)
+                  Row(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Expanded(
+                        child: countrySelector,
+                      ),
+                      const SizedBox(width: 16),
+                      Expanded(
+                        child: genreSelector,
+                      ),
+                    ],
+                  )
+                else ...[
+                  countrySelector,
+                  const SizedBox(height: 16),
+                  genreSelector,
+                ],
+                const SizedBox(height: 16),
+                if (constrains.mdAndUp)
+                  Row(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Expanded(
+                        child: artistAutoComplete,
+                      ),
+                      const SizedBox(width: 16),
+                      Expanded(
+                        child: tracksAutocomplete,
+                      ),
+                    ],
+                  )
+                else ...[
+                  artistAutoComplete,
+                  const SizedBox(height: 16),
+                  tracksAutocomplete,
+                ],
+                const SizedBox(height: 16),
+                RecommendationAttributeDials(
+                  title: Text(context.l10n.acousticness),
+                  values: acousticness.value,
+                  onChanged: (value) {
+                    acousticness.value = value;
+                  },
+                ),
+                RecommendationAttributeDials(
+                  title: Text(context.l10n.danceability),
+                  values: danceability.value,
+                  onChanged: (value) {
+                    danceability.value = value;
+                  },
+                ),
+                RecommendationAttributeDials(
+                  title: Text(context.l10n.energy),
+                  values: energy.value,
+                  onChanged: (value) {
+                    energy.value = value;
+                  },
+                ),
+                RecommendationAttributeDials(
+                  title: Text(context.l10n.instrumentalness),
+                  values: instrumentalness.value,
+                  onChanged: (value) {
+                    instrumentalness.value = value;
+                  },
+                ),
+                RecommendationAttributeDials(
+                  title: Text(context.l10n.liveness),
+                  values: liveness.value,
+                  onChanged: (value) {
+                    liveness.value = value;
+                  },
+                ),
+                RecommendationAttributeDials(
+                  title: Text(context.l10n.loudness),
+                  values: loudness.value,
+                  onChanged: (value) {
+                    loudness.value = value;
+                  },
+                ),
+                RecommendationAttributeDials(
+                  title: Text(context.l10n.speechiness),
+                  values: speechiness.value,
+                  onChanged: (value) {
+                    speechiness.value = value;
+                  },
+                ),
+                RecommendationAttributeDials(
+                  title: Text(context.l10n.valence),
+                  values: valence.value,
+                  onChanged: (value) {
+                    valence.value = value;
+                  },
+                ),
+                RecommendationAttributeDials(
+                  title: Text(context.l10n.popularity),
+                  values: popularity.value,
+                  base: 100,
+                  onChanged: (value) {
+                    popularity.value = value;
+                  },
+                ),
+                RecommendationAttributeDials(
+                  title: Text(context.l10n.key),
+                  values: key.value,
+                  base: 11,
+                  onChanged: (value) {
+                    key.value = value;
+                  },
+                ),
+                RecommendationAttributeFields(
+                  title: Text(context.l10n.duration),
+                  values: (
+                    max: durationMs.value.max / 1000,
+                    target: durationMs.value.target / 1000,
+                    min: durationMs.value.min / 1000,
+                  ),
+                  onChanged: (value) {
+                    durationMs.value = (
+                      max: value.max * 1000,
+                      target: value.target * 1000,
+                      min: value.min * 1000,
+                    );
+                  },
+                  presets: {
+                    context.l10n.short: (min: 50, target: 90, max: 120),
+                    context.l10n.medium: (min: 120, target: 180, max: 200),
+                    context.l10n.long: (min: 480, target: 560, max: 640)
+                  },
+                ),
+                RecommendationAttributeFields(
+                  title: Text(context.l10n.tempo),
+                  values: tempo.value,
+                  onChanged: (value) {
+                    tempo.value = value;
+                  },
+                ),
+                RecommendationAttributeFields(
+                  title: Text(context.l10n.mode),
+                  values: mode.value,
+                  onChanged: (value) {
+                    mode.value = value;
+                  },
+                ),
+                RecommendationAttributeFields(
+                  title: Text(context.l10n.time_signature),
+                  values: timeSignature.value,
+                  onChanged: (value) {
+                    timeSignature.value = value;
+                  },
+                ),
+                const SizedBox(height: 20),
+                FilledButton.icon(
+                  icon: const Icon(SpotubeIcons.magic),
+                  label: Text(context.l10n.generate_playlist),
+                  onPressed: artists.value.isEmpty &&
+                          tracks.value.isEmpty &&
+                          genres.value.isEmpty
+                      ? null
+                      : () {
+                          final PlaylistGenerateResultRouteState routeState = (
+                            seeds: (
+                              artists: artists.value.map((a) => a.id!).toList(),
+                              tracks: tracks.value.map((t) => t.id!).toList(),
+                              genres: genres.value
+                            ),
+                            market: market.value,
+                            limit: limit.value,
+                            parameters: (
+                              acousticness: acousticness.value,
+                              danceability: danceability.value,
+                              energy: energy.value,
+                              instrumentalness: instrumentalness.value,
+                              liveness: liveness.value,
+                              loudness: loudness.value,
+                              speechiness: speechiness.value,
+                              valence: valence.value,
+                              popularity: popularity.value,
+                              key: key.value,
+                              duration_ms: durationMs.value,
+                              tempo: tempo.value,
+                              mode: mode.value,
+                              time_signature: timeSignature.value,
+                            )
+                          );
+                          GoRouter.of(context).push(
+                            "/library/generate/result",
+                            extra: routeState,
+                          );
+                        },
+                ),
+              ],
+            );
+          }),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/library/playlist_generate/playlist_generate_result.dart b/lib/pages/library/playlist_generate/playlist_generate_result.dart
new file mode 100644
index 00000000..653a2263
--- /dev/null
+++ b/lib/pages/library/playlist_generate/playlist_generate_result.dart
@@ -0,0 +1,257 @@
+import 'package:fl_query_hooks/fl_query_hooks.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:go_router/go_router.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/collections/spotube_icons.dart';
+import 'package:spotube/components/library/playlist_generate/simple_track_tile.dart';
+import 'package:spotube/components/playlist/playlist_create_dialog.dart';
+import 'package:spotube/components/shared/dialogs/playlist_add_track_dialog.dart';
+import 'package:spotube/components/shared/page_window_title_bar.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/services/queries/playlist.dart';
+import 'package:spotube/services/queries/queries.dart';
+
+typedef PlaylistGenerateResultRouteState = ({
+  ({List<String> tracks, List<String> artists, List<String> genres})? seeds,
+  RecommendationParameters? parameters,
+  int limit,
+  String? market,
+});
+
+class PlaylistGenerateResultPage extends HookConsumerWidget {
+  final PlaylistGenerateResultRouteState state;
+
+  const PlaylistGenerateResultPage({
+    Key? key,
+    required this.state,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final router = GoRouter.of(context);
+    final scaffoldMessenger = ScaffoldMessenger.of(context);
+    final playlistNotifier = ref.watch(ProxyPlaylistNotifier.notifier);
+    final (:seeds, :parameters, :limit, :market) = state;
+
+    final queryClient = useQueryClient();
+    final generatedPlaylist = useQueries.playlist.generate(
+      ref,
+      seeds: seeds,
+      parameters: parameters,
+      limit: limit,
+      market: market,
+    );
+
+    final selectedTracks = useState<List<String>>(
+      generatedPlaylist.data?.map((e) => e.id!).toList() ?? [],
+    );
+
+    useEffect(() {
+      if (generatedPlaylist.data != null) {
+        selectedTracks.value =
+            generatedPlaylist.data!.map((e) => e.id!).toList();
+      }
+      return null;
+    }, [generatedPlaylist.data]);
+
+    final isAllTrackSelected =
+        selectedTracks.value.length == (generatedPlaylist.data?.length ?? 0);
+
+    return WillPopScope(
+      onWillPop: () async {
+        queryClient.cache.removeQuery(generatedPlaylist);
+        return true;
+      },
+      child: Scaffold(
+        appBar: const PageWindowTitleBar(leading: BackButton()),
+        body: generatedPlaylist.isLoading
+            ? Center(
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    const CircularProgressIndicator(),
+                    Text(context.l10n.generating_playlist),
+                  ],
+                ),
+              )
+            : Padding(
+                padding: const EdgeInsets.all(8.0),
+                child: ListView(
+                  children: [
+                    GridView(
+                      gridDelegate:
+                          const SliverGridDelegateWithFixedCrossAxisCount(
+                        crossAxisCount: 2,
+                        crossAxisSpacing: 8,
+                        mainAxisSpacing: 8,
+                        mainAxisExtent: 32,
+                      ),
+                      shrinkWrap: true,
+                      children: [
+                        FilledButton.tonalIcon(
+                          icon: const Icon(SpotubeIcons.play),
+                          label: Text(context.l10n.play),
+                          onPressed: selectedTracks.value.isEmpty
+                              ? null
+                              : () async {
+                                  await playlistNotifier.load(
+                                    generatedPlaylist.data!.where(
+                                      (e) =>
+                                          selectedTracks.value.contains(e.id!),
+                                    ),
+                                    autoPlay: true,
+                                  );
+                                },
+                        ),
+                        FilledButton.tonalIcon(
+                          icon: const Icon(SpotubeIcons.queueAdd),
+                          label: Text(context.l10n.add_to_queue),
+                          onPressed: selectedTracks.value.isEmpty
+                              ? null
+                              : () async {
+                                  await playlistNotifier.addTracks(
+                                    generatedPlaylist.data!.where(
+                                      (e) =>
+                                          selectedTracks.value.contains(e.id!),
+                                    ),
+                                  );
+                                  if (context.mounted) {
+                                    scaffoldMessenger.showSnackBar(
+                                      SnackBar(
+                                        content: Text(
+                                          context.l10n.add_count_to_queue(
+                                            selectedTracks.value.length,
+                                          ),
+                                        ),
+                                      ),
+                                    );
+                                  }
+                                },
+                        ),
+                        FilledButton.tonalIcon(
+                          icon: const Icon(SpotubeIcons.addFilled),
+                          label: Text(context.l10n.create_a_playlist),
+                          onPressed: selectedTracks.value.isEmpty
+                              ? null
+                              : () async {
+                                  final playlist = await showDialog<Playlist>(
+                                    context: context,
+                                    builder: (context) => PlaylistCreateDialog(
+                                      trackIds: selectedTracks.value,
+                                    ),
+                                  );
+
+                                  if (playlist != null) {
+                                    router.go(
+                                      '/playlist/${playlist.id}',
+                                      extra: playlist,
+                                    );
+                                  }
+                                },
+                        ),
+                        FilledButton.tonalIcon(
+                          icon: const Icon(SpotubeIcons.playlistAdd),
+                          label: Text(context.l10n.add_to_playlist),
+                          onPressed: selectedTracks.value.isEmpty
+                              ? null
+                              : () async {
+                                  final hasAdded = await showDialog<bool>(
+                                    context: context,
+                                    builder: (context) =>
+                                        PlaylistAddTrackDialog(
+                                      tracks: selectedTracks.value
+                                          .map(
+                                            (e) => generatedPlaylist.data!
+                                                .firstWhere(
+                                              (element) => element.id == e,
+                                            ),
+                                          )
+                                          .toList(),
+                                    ),
+                                  );
+
+                                  if (context.mounted && hasAdded == true) {
+                                    scaffoldMessenger.showSnackBar(
+                                      SnackBar(
+                                        content: Text(
+                                          context.l10n.add_count_to_playlist(
+                                            selectedTracks.value.length,
+                                          ),
+                                        ),
+                                      ),
+                                    );
+                                  }
+                                },
+                        )
+                      ],
+                    ),
+                    const SizedBox(height: 16),
+                    if (generatedPlaylist.data != null)
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          Text(
+                            context.l10n.selected_count_tracks(
+                              selectedTracks.value.length,
+                            ),
+                          ),
+                          ElevatedButton.icon(
+                            onPressed: () {
+                              if (isAllTrackSelected) {
+                                selectedTracks.value = [];
+                              } else {
+                                selectedTracks.value = generatedPlaylist.data
+                                        ?.map((e) => e.id!)
+                                        .toList() ??
+                                    [];
+                              }
+                            },
+                            icon: const Icon(SpotubeIcons.selectionCheck),
+                            label: Text(
+                              isAllTrackSelected
+                                  ? context.l10n.deselect_all
+                                  : context.l10n.select_all,
+                            ),
+                          ),
+                        ],
+                      ),
+                    const SizedBox(height: 8),
+                    Card(
+                      margin: const EdgeInsets.all(0),
+                      child: SafeArea(
+                        child: Column(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            for (final track in generatedPlaylist.data ?? [])
+                              CheckboxListTile(
+                                value: selectedTracks.value.contains(track.id),
+                                onChanged: (value) {
+                                  if (value == true) {
+                                    selectedTracks.value.add(track.id!);
+                                  } else {
+                                    selectedTracks.value.remove(track.id);
+                                  }
+                                  selectedTracks.value =
+                                      selectedTracks.value.toList();
+                                },
+                                controlAffinity:
+                                    ListTileControlAffinity.leading,
+                                contentPadding: EdgeInsets.zero,
+                                dense: true,
+                                title: SimpleTrackTile(track: track),
+                              )
+                          ],
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/lyrics/lyrics.dart b/lib/pages/lyrics/lyrics.dart
index 3f1167a0..c97649d7 100644
--- a/lib/pages/lyrics/lyrics.dart
+++ b/lib/pages/lyrics/lyrics.dart
@@ -3,17 +3,20 @@ import 'dart:ui';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
+import 'package:spotube/components/shared/themed_button_tab_bar.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/hooks/use_custom_status_bar_color.dart';
 import 'package:spotube/hooks/use_palette_color.dart';
 import 'package:spotube/pages/lyrics/plain_lyrics.dart';
 import 'package:spotube/pages/lyrics/synced_lyrics.dart';
 import 'package:spotube/provider/authentication_provider.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/utils/platform.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
@@ -23,17 +26,17 @@ class LyricsPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    final playlist = ref.watch(PlaylistQueueNotifier.provider);
+    final playlist = ref.watch(ProxyPlaylistNotifier.provider);
     String albumArt = useMemoized(
       () => TypeConversionUtils.image_X_UrlString(
-        playlist?.activeTrack.album?.images,
-        index: (playlist?.activeTrack.album?.images?.length ?? 1) - 1,
+        playlist.activeTrack?.album?.images,
+        index: (playlist.activeTrack?.album?.images?.length ?? 1) - 1,
         placeholder: ImagePlaceholder.albumArt,
       ),
-      [playlist?.activeTrack.album?.images],
+      [playlist.activeTrack?.album?.images],
     );
     final palette = usePaletteColor(albumArt, ref);
-    final index = useState(0);
+    final mediaQuery = MediaQuery.of(context);
 
     useCustomStatusBarColor(
       palette.color,
@@ -41,113 +44,114 @@ class LyricsPage extends HookConsumerWidget {
       noSetBGColor: true,
     );
 
+    final tabbar = ThemedButtonsTabBar(
+      tabs: [
+        Tab(text: "  ${context.l10n.synced}  "),
+        Tab(text: "  ${context.l10n.plain}  "),
+      ],
+    );
+
     final auth = ref.watch(AuthenticationNotifier.provider);
 
     if (auth == null) {
-      return PlatformScaffold(
-        appBar: !kIsMacOS && platform != TargetPlatform.windows && !isModal
-            ? PageWindowTitleBar()
-            : null,
+      return Scaffold(
+        appBar: !kIsMacOS && !isModal ? const PageWindowTitleBar() : null,
         body: const AnonymousFallback(),
       );
     }
 
-    Widget body = [
-      SyncedLyrics(palette: palette, isModal: isModal),
-      PlainLyrics(palette: palette, isModal: isModal),
-    ][index.value];
-
-    final tabbar = PreferredSize(
-      preferredSize: const Size.fromHeight(50),
-      child: PlatformTabBar(
-        isNavigational: PlatformProperty.only(linux: true, other: false),
-        selectedIndex: index.value,
-        onSelectedIndexChanged: (value) => index.value = value,
-        backgroundColor: PlatformTheme.of(context).scaffoldBackgroundColor,
-        tabs: [
-          PlatformTab(
-            label: "Synced",
-            icon: const SizedBox.shrink(),
-            color: PlatformTextTheme.of(context).caption?.color,
-          ),
-          PlatformTab(
-            label: "Plain",
-            icon: const SizedBox.shrink(),
-            color: PlatformTextTheme.of(context).caption?.color,
-          ),
-        ],
-      ),
-    );
-
     if (isModal) {
-      return SafeArea(
-        child: Container(
-          clipBehavior: Clip.hardEdge,
-          decoration: BoxDecoration(
-            color: Theme.of(context).colorScheme.background.withOpacity(.4),
-            borderRadius: const BorderRadius.only(
-              topLeft: Radius.circular(10),
-              topRight: Radius.circular(10),
-            ),
-          ),
+      return DefaultTabController(
+        length: 2,
+        child: SafeArea(
           child: BackdropFilter(
-            filter: ImageFilter.blur(sigmaX: 50, sigmaY: 50),
-            child: Column(
-              children: [
-                const SizedBox(height: 5),
-                Container(
-                  height: 7,
-                  width: 150,
-                  decoration: BoxDecoration(
-                    color: palette.titleTextColor,
-                    borderRadius: BorderRadius.circular(10),
-                  ),
+            filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
+            child: Container(
+              clipBehavior: Clip.hardEdge,
+              decoration: BoxDecoration(
+                color: Theme.of(context).colorScheme.background.withOpacity(.4),
+                borderRadius: const BorderRadius.only(
+                  topLeft: Radius.circular(10),
+                  topRight: Radius.circular(10),
                 ),
-                PlatformAppBar(
-                  title: tabbar,
-                  backgroundColor: Colors.transparent,
-                  automaticallyImplyLeading: false,
-                  toolbarOpacity: platform == TargetPlatform.iOS ? 0 : 1,
-                  actions: [
-                    PlatformIconButton(
-                      icon: const Icon(SpotubeIcons.minimize),
-                      onPressed: () => Navigator.of(context).pop(),
+              ),
+              child: Column(
+                children: [
+                  const SizedBox(height: 5),
+                  Container(
+                    height: 7,
+                    width: 150,
+                    decoration: BoxDecoration(
+                      color: palette.titleTextColor,
+                      borderRadius: BorderRadius.circular(10),
                     ),
-                    const SizedBox(width: 5),
-                  ],
-                ),
-                Expanded(child: body),
-              ],
+                  ),
+                  AppBar(
+                    leadingWidth: double.infinity,
+                    leading: tabbar,
+                    backgroundColor: Colors.transparent,
+                    automaticallyImplyLeading: false,
+                    actions: [
+                      IconButton(
+                        icon: const Icon(SpotubeIcons.minimize),
+                        onPressed: () => Navigator.of(context).pop(),
+                      ),
+                      const SizedBox(width: 5),
+                    ],
+                  ),
+                  Expanded(
+                    child: TabBarView(
+                      children: [
+                        SyncedLyrics(palette: palette, isModal: isModal),
+                        PlainLyrics(palette: palette, isModal: isModal),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
             ),
           ),
         ),
       );
     }
-    return PlatformScaffold(
-      extendBodyBehindAppBar: true,
-      appBar: !kIsMacOS
-          ? (platform != TargetPlatform.windows && !isModal
+    return DefaultTabController(
+      length: 2,
+      child: SafeArea(
+        bottom: mediaQuery.mdAndUp,
+        child: Scaffold(
+          extendBodyBehindAppBar: true,
+          appBar: !kIsMacOS
               ? PageWindowTitleBar(
-                  toolbarOpacity: 0,
                   backgroundColor: Colors.transparent,
-                  center: tabbar,
+                  title: tabbar,
                 )
-              : tabbar)
-          : null,
-      body: Container(
-        clipBehavior: Clip.hardEdge,
-        decoration: BoxDecoration(
-          image: DecorationImage(
-            image: UniversalImage.imageProvider(albumArt),
-            fit: BoxFit.cover,
-          ),
-          borderRadius: BorderRadius.circular(8),
-        ),
-        child: BackdropFilter(
-          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
-          child: ColoredBox(
-            color: palette.color.withOpacity(.7),
-            child: SafeArea(child: body),
+              : tabbar,
+          body: Container(
+            clipBehavior: Clip.hardEdge,
+            decoration: BoxDecoration(
+              image: DecorationImage(
+                image: UniversalImage.imageProvider(albumArt),
+                fit: BoxFit.cover,
+              ),
+              borderRadius: const BorderRadius.only(
+                bottomLeft: Radius.circular(10),
+              ),
+            ),
+            margin: const EdgeInsets.only(bottom: 10),
+            child: BackdropFilter(
+              filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
+              child: ColoredBox(
+                color: palette.color.withOpacity(.7),
+                child: SafeArea(
+                  child: TabBarView(
+                    children: [
+                      SyncedLyrics(palette: palette, isModal: isModal),
+                      PlainLyrics(palette: palette, isModal: isModal),
+                    ],
+                  ),
+                ),
+              ),
+            ),
           ),
         ),
       ),
diff --git a/lib/pages/lyrics/mini_lyrics.dart b/lib/pages/lyrics/mini_lyrics.dart
new file mode 100644
index 00000000..e99674c8
--- /dev/null
+++ b/lib/pages/lyrics/mini_lyrics.dart
@@ -0,0 +1,241 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:go_router/go_router.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:palette_generator/palette_generator.dart';
+import 'package:spotube/collections/spotube_icons.dart';
+import 'package:spotube/components/player/player_controls.dart';
+import 'package:spotube/components/player/player_queue.dart';
+import 'package:spotube/components/root/sidebar.dart';
+import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
+import 'package:spotube/components/shared/page_window_title_bar.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/hooks/use_force_update.dart';
+import 'package:spotube/pages/lyrics/plain_lyrics.dart';
+import 'package:spotube/pages/lyrics/synced_lyrics.dart';
+import 'package:spotube/provider/authentication_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/utils/platform.dart';
+
+class MiniLyricsPage extends HookConsumerWidget {
+  const MiniLyricsPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final theme = Theme.of(context);
+    final update = useForceUpdate();
+    final prevSize = useRef<Size?>(null);
+    final wasMaximized = useRef<bool>(false);
+
+    final playlistQueue = ref.watch(ProxyPlaylistNotifier.provider);
+
+    final areaActive = useState(false);
+    final hoverMode = useState(true);
+
+    useEffect(() {
+      WidgetsBinding.instance.addPostFrameCallback((_) async {
+        prevSize.value = await DesktopTools.window.getSize();
+        wasMaximized.value = await DesktopTools.window.isMaximized();
+      });
+      return null;
+    }, []);
+
+    final auth = ref.watch(AuthenticationNotifier.provider);
+
+    if (auth == null) {
+      return const Scaffold(
+        appBar: PageWindowTitleBar(),
+        body: AnonymousFallback(),
+      );
+    }
+
+    return MouseRegion(
+      onEnter: !hoverMode.value
+          ? null
+          : (event) {
+              areaActive.value = true;
+            },
+      onExit: !hoverMode.value
+          ? null
+          : (event) {
+              areaActive.value = false;
+            },
+      child: DefaultTabController(
+        length: 2,
+        child: Scaffold(
+          backgroundColor: theme.colorScheme.surface.withOpacity(0.4),
+          appBar: PreferredSize(
+            preferredSize: const Size.fromHeight(60),
+            child: AnimatedCrossFade(
+              duration: const Duration(milliseconds: 200),
+              crossFadeState: areaActive.value
+                  ? CrossFadeState.showFirst
+                  : CrossFadeState.showSecond,
+              secondChild: const SizedBox(),
+              firstChild: DragToMoveArea(
+                child: Row(
+                  children: [
+                    const SizedBox(width: 10),
+                    SizedBox(
+                      height: 30,
+                      width: 30,
+                      child: Sidebar.brandLogo(),
+                    ),
+                    const Spacer(),
+                    SizedBox(
+                      height: 30,
+                      child: TabBar(
+                        tabs: [
+                          Tab(text: context.l10n.synced),
+                          Tab(text: context.l10n.plain),
+                        ],
+                        isScrollable: true,
+                      ),
+                    ),
+                    const Spacer(),
+                    IconButton(
+                      tooltip: context.l10n.show_hide_ui_on_hover,
+                      icon: hoverMode.value
+                          ? const Icon(SpotubeIcons.hoverOn)
+                          : const Icon(SpotubeIcons.hoverOff),
+                      style: ButtonStyle(
+                        foregroundColor: hoverMode.value
+                            ? MaterialStateProperty.all(
+                                theme.colorScheme.primary)
+                            : null,
+                      ),
+                      onPressed: () async {
+                        if (!hoverMode.value == true) {
+                          areaActive.value = true;
+                        }
+                        hoverMode.value = !hoverMode.value;
+                      },
+                    ),
+                    FutureBuilder(
+                      future: DesktopTools.window.isAlwaysOnTop(),
+                      builder: (context, snapshot) {
+                        return IconButton(
+                          tooltip: context.l10n.always_on_top,
+                          icon: Icon(
+                            snapshot.data == true
+                                ? SpotubeIcons.pinOn
+                                : SpotubeIcons.pinOff,
+                          ),
+                          style: ButtonStyle(
+                            foregroundColor: snapshot.data == true
+                                ? MaterialStateProperty.all(
+                                    theme.colorScheme.primary)
+                                : null,
+                          ),
+                          onPressed: snapshot.data == null
+                              ? null
+                              : () async {
+                                  await DesktopTools.window.setAlwaysOnTop(
+                                    snapshot.data == true ? false : true,
+                                  );
+                                  update();
+                                },
+                        );
+                      },
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+          body: Column(
+            children: [
+              if (playlistQueue.activeTrack != null)
+                Text(
+                  playlistQueue.activeTrack!.name!,
+                  style: theme.textTheme.titleMedium,
+                ),
+              Expanded(
+                child: TabBarView(
+                  children: [
+                    SyncedLyrics(
+                      palette: PaletteColor(theme.colorScheme.background, 0),
+                      isModal: true,
+                      defaultTextZoom: 65,
+                    ),
+                    PlainLyrics(
+                      palette: PaletteColor(theme.colorScheme.background, 0),
+                      isModal: true,
+                      defaultTextZoom: 65,
+                    ),
+                  ],
+                ),
+              ),
+              AnimatedCrossFade(
+                crossFadeState: areaActive.value
+                    ? CrossFadeState.showFirst
+                    : CrossFadeState.showSecond,
+                duration: const Duration(milliseconds: 200),
+                secondChild: const SizedBox(),
+                firstChild: Row(
+                  children: [
+                    IconButton(
+                      icon: const Icon(SpotubeIcons.queue),
+                      tooltip: context.l10n.queue,
+                      onPressed: playlistQueue.activeTrack != null
+                          ? () {
+                              showModalBottomSheet(
+                                context: context,
+                                isDismissible: true,
+                                enableDrag: true,
+                                isScrollControlled: true,
+                                backgroundColor: Colors.black12,
+                                barrierColor: Colors.black12,
+                                shape: RoundedRectangleBorder(
+                                  borderRadius: BorderRadius.circular(10),
+                                ),
+                                constraints: BoxConstraints(
+                                  maxHeight:
+                                      MediaQuery.of(context).size.height * .7,
+                                ),
+                                builder: (context) {
+                                  return const PlayerQueue(floating: true);
+                                },
+                              );
+                            }
+                          : null,
+                    ),
+                    Flexible(child: PlayerControls(compact: true)),
+                    IconButton(
+                      tooltip: context.l10n.exit_mini_player,
+                      icon: const Icon(SpotubeIcons.maximize),
+                      onPressed: () async {
+                        try {
+                          await DesktopTools.window
+                              .setMinimumSize(const Size(300, 700));
+                          await DesktopTools.window.setAlwaysOnTop(false);
+                          if (wasMaximized.value) {
+                            await DesktopTools.window.maximize();
+                          } else {
+                            await DesktopTools.window.setSize(prevSize.value!);
+                          }
+                          await DesktopTools.window
+                              .setAlignment(Alignment.center);
+                          if (!kIsLinux) {
+                            await DesktopTools.window.setHasShadow(true);
+                          }
+                          await Future.delayed(
+                              const Duration(milliseconds: 200));
+                        } finally {
+                          if (context.mounted) {
+                            GoRouter.of(context).go('/lyrics');
+                          }
+                        }
+                      },
+                    ),
+                  ],
+                ),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/lyrics/plain_lyrics.dart b/lib/pages/lyrics/plain_lyrics.dart
index 17a4785c..1d1237e6 100644
--- a/lib/pages/lyrics/plain_lyrics.dart
+++ b/lib/pages/lyrics/plain_lyrics.dart
@@ -6,8 +6,9 @@ import 'package:palette_generator/palette_generator.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/lyrics/zoom_controls.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_lyrics.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/extensions/constrains.dart';
+
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 
 import 'package:spotube/services/queries/queries.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
@@ -15,23 +16,23 @@ import 'package:spotube/utils/type_conversion_utils.dart';
 class PlainLyrics extends HookConsumerWidget {
   final PaletteColor palette;
   final bool? isModal;
+  final int defaultTextZoom;
   const PlainLyrics({
     required this.palette,
     this.isModal,
+    this.defaultTextZoom = 100,
     Key? key,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context, ref) {
-    final playlist = ref.watch(PlaylistQueueNotifier.provider);
-    final lyricsQuery = useQueries.lyrics.spotifySynced(
-      ref,
-      playlist?.activeTrack,
-    );
-    final breakpoint = useBreakpoints();
+    final playlist = ref.watch(ProxyPlaylistNotifier.provider);
+    final lyricsQuery =
+        useQueries.lyrics.spotifySynced(ref, playlist.activeTrack);
+    final mediaQuery = MediaQuery.of(context);
     final textTheme = Theme.of(context).textTheme;
 
-    final textZoomLevel = useState<int>(100);
+    final textZoomLevel = useState<int>(defaultTextZoom);
 
     return Stack(
       children: [
@@ -41,8 +42,8 @@ class PlainLyrics extends HookConsumerWidget {
             if (isModal != true) ...[
               Center(
                 child: Text(
-                  playlist?.activeTrack.name ?? "",
-                  style: breakpoint >= Breakpoints.md
+                  playlist.activeTrack?.name ?? "",
+                  style: mediaQuery.mdAndUp
                       ? textTheme.displaySmall
                       : textTheme.headlineMedium?.copyWith(
                           fontSize: 25,
@@ -53,8 +54,8 @@ class PlainLyrics extends HookConsumerWidget {
               Center(
                 child: Text(
                   TypeConversionUtils.artists_X_String<Artist>(
-                      playlist?.activeTrack.artists ?? []),
-                  style: (breakpoint >= Breakpoints.md
+                      playlist.activeTrack?.artists ?? []),
+                  style: (mediaQuery.mdAndUp
                           ? textTheme.headlineSmall
                           : textTheme.titleLarge)
                       ?.copyWith(color: palette.bodyTextColor),
@@ -72,7 +73,7 @@ class PlainLyrics extends HookConsumerWidget {
                           return const ShimmerLyrics();
                         } else if (lyricsQuery.hasError) {
                           return Text(
-                            "Sorry, no Lyrics were found for `${playlist?.activeTrack.name}` :'(\n${lyricsQuery.error.toString()}",
+                            "Sorry, no Lyrics were found for `${playlist.activeTrack?.name}` :'(\n${lyricsQuery.error.toString()}",
                             style: textTheme.bodyLarge?.copyWith(
                               color: palette.bodyTextColor,
                             ),
@@ -104,7 +105,7 @@ class PlainLyrics extends HookConsumerWidget {
                                     : 2,
                           ),
                           child: Text(
-                            lyrics == null && playlist?.activeTrack == null
+                            lyrics == null && playlist.activeTrack == null
                                 ? "No Track being played currently"
                                 : lyrics ?? "",
                           ),
diff --git a/lib/pages/lyrics/synced_lyrics.dart b/lib/pages/lyrics/synced_lyrics.dart
index b19b83ab..2566a7a2 100644
--- a/lib/pages/lyrics/synced_lyrics.dart
+++ b/lib/pages/lyrics/synced_lyrics.dart
@@ -6,12 +6,11 @@ import 'package:spotify/spotify.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/lyrics/zoom_controls.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_lyrics.dart';
-import 'package:spotube/components/shared/spotube_marquee_text.dart';
+import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/hooks/use_auto_scroll_controller.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
 import 'package:spotube/hooks/use_synced_lyrics.dart';
 import 'package:scroll_to_index/scroll_to_index.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
 
 import 'package:spotube/utils/type_conversion_utils.dart';
@@ -21,24 +20,26 @@ final _delay = StateProvider<int>((ref) => 0);
 class SyncedLyrics extends HookConsumerWidget {
   final PaletteColor palette;
   final bool? isModal;
+  final int defaultTextZoom;
 
   const SyncedLyrics({
     required this.palette,
     this.isModal,
+    this.defaultTextZoom = 100,
     Key? key,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context, ref) {
-    final playlist = ref.watch(PlaylistQueueNotifier.provider);
+    final playlist = ref.watch(ProxyPlaylistNotifier.provider);
 
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
     final controller = useAutoScrollController();
 
     final delay = ref.watch(_delay);
 
     final timedLyricsQuery =
-        useQueries.lyrics.spotifySynced(ref, playlist?.activeTrack);
+        useQueries.lyrics.spotifySynced(ref, playlist.activeTrack);
 
     final lyricValue = timedLyricsQuery.data;
 
@@ -52,135 +53,144 @@ class SyncedLyrics extends HookConsumerWidget {
       [lyricValue],
     );
     final currentTime = useSyncedLyrics(ref, lyricsMap, delay);
-    final textZoomLevel = useState<int>(100);
+    final textZoomLevel = useState<int>(defaultTextZoom);
 
     final textTheme = Theme.of(context).textTheme;
 
-    useEffect(() {
-      controller.scrollToIndex(0);
-      WidgetsBinding.instance.addPostFrameCallback((_) {
+    ref.listen(
+      ProxyPlaylistNotifier.provider.select((s) => s.activeTrack),
+      (previous, next) {
+        controller.scrollToIndex(0);
         ref.read(_delay.notifier).state = 0;
-      });
-      return null;
-    }, [playlist?.activeTrack]);
+      },
+    );
 
-    final headlineTextStyle = (breakpoint >= Breakpoints.md
+    final headlineTextStyle = (mediaQuery.mdAndUp
             ? textTheme.displaySmall
             : textTheme.headlineMedium?.copyWith(fontSize: 25))
         ?.copyWith(color: palette.titleTextColor);
 
-    return HookBuilder(builder: (context) {
-      return Stack(
-        children: [
-          Column(
-            children: [
-              if (isModal != true)
-                Center(
-                  child: SpotubeMarqueeText(
-                    text: playlist?.activeTrack.name ?? "Not Playing",
-                    style: headlineTextStyle,
-                    isHovering: true,
-                  ),
+    return Stack(
+      children: [
+        Column(
+          children: [
+            if (isModal != true)
+              Center(
+                child: Text(
+                  playlist.activeTrack?.name ?? "Not Playing",
+                  style: headlineTextStyle,
                 ),
-              if (isModal != true)
-                Center(
-                  child: Text(
-                    TypeConversionUtils.artists_X_String<Artist>(
-                        playlist?.activeTrack.artists ?? []),
-                    style: breakpoint >= Breakpoints.md
-                        ? textTheme.headlineSmall
-                        : textTheme.titleLarge,
-                  ),
+              ),
+            if (isModal != true)
+              Center(
+                child: Text(
+                  TypeConversionUtils.artists_X_String<Artist>(
+                      playlist.activeTrack?.artists ?? []),
+                  style: mediaQuery.mdAndUp
+                      ? textTheme.headlineSmall
+                      : textTheme.titleLarge,
                 ),
-              if (lyricValue != null && lyricValue.lyrics.isNotEmpty)
-                Expanded(
-                  child: ListView.builder(
-                    controller: controller,
-                    itemCount: lyricValue.lyrics.length,
-                    itemBuilder: (context, index) {
-                      final lyricSlice = lyricValue.lyrics[index];
-                      final isActive = lyricSlice.time.inSeconds == currentTime;
+              ),
+            if (lyricValue != null && lyricValue.lyrics.isNotEmpty)
+              Expanded(
+                child: ListView.builder(
+                  controller: controller,
+                  itemCount: lyricValue.lyrics.length,
+                  itemBuilder: (context, index) {
+                    final lyricSlice = lyricValue.lyrics[index];
+                    final isActive = lyricSlice.time.inSeconds == currentTime;
 
-                      if (isActive) {
-                        controller.scrollToIndex(
-                          index,
-                          preferPosition: AutoScrollPosition.middle,
-                        );
-                      }
-                      return AutoScrollTag(
-                        key: ValueKey(index),
-                        index: index,
-                        controller: controller,
-                        child: lyricSlice.text.isEmpty
-                            ? Container()
-                            : Center(
-                                child: Padding(
-                                  padding: const EdgeInsets.all(8.0),
-                                  child: AnimatedDefaultTextStyle(
-                                    duration: const Duration(milliseconds: 250),
-                                    style: TextStyle(
-                                      color: isActive
-                                          ? Colors.white
-                                          : palette.bodyTextColor,
-                                      fontWeight: isActive
-                                          ? FontWeight.bold
-                                          : FontWeight.normal,
-                                      fontSize: (isActive ? 30 : 26) *
-                                          (textZoomLevel.value / 100),
-                                    ),
-                                    child: Text(
-                                      lyricSlice.text,
-                                      maxLines: 2,
-                                      textAlign: TextAlign.center,
-                                    ),
+                    if (isActive) {
+                      controller.scrollToIndex(
+                        index,
+                        preferPosition: AutoScrollPosition.middle,
+                      );
+                    }
+                    return AutoScrollTag(
+                      key: ValueKey(index),
+                      index: index,
+                      controller: controller,
+                      child: lyricSlice.text.isEmpty
+                          ? Container(
+                              padding: index == lyricValue.lyrics.length - 1
+                                  ? EdgeInsets.only(
+                                      bottom:
+                                          MediaQuery.of(context).size.height /
+                                              2,
+                                    )
+                                  : null,
+                            )
+                          : Center(
+                              child: Padding(
+                                padding: index == lyricValue.lyrics.length - 1
+                                    ? const EdgeInsets.all(8.0).copyWith(
+                                        bottom: 100,
+                                      )
+                                    : const EdgeInsets.all(8.0),
+                                child: AnimatedDefaultTextStyle(
+                                  duration: const Duration(milliseconds: 250),
+                                  style: TextStyle(
+                                    color: isActive
+                                        ? Colors.white
+                                        : palette.bodyTextColor,
+                                    fontWeight: isActive
+                                        ? FontWeight.w500
+                                        : FontWeight.normal,
+                                    fontSize: (isActive ? 28 : 26) *
+                                        (textZoomLevel.value / 100),
+                                    shadows: kElevationToShadow[9],
+                                  ),
+                                  child: Text(
+                                    lyricSlice.text,
+                                    textAlign: TextAlign.center,
                                   ),
                                 ),
                               ),
-                      );
-                    },
-                  ),
-                ),
-              if (playlist?.activeTrack != null &&
-                  (lyricValue == null || lyricValue.lyrics.isEmpty == true))
-                const Expanded(child: ShimmerLyrics()),
-            ],
-          ),
-          Align(
-            alignment: Alignment.bottomRight,
-            child: Builder(builder: (context) {
-              final actions = [
-                ZoomControls(
-                  value: delay,
-                  onChanged: (value) => ref.read(_delay.notifier).state = value,
-                  interval: 1,
-                  unit: "s",
-                  increaseIcon: const Icon(SpotubeIcons.add),
-                  decreaseIcon: const Icon(SpotubeIcons.remove),
-                  direction: isModal == true ? Axis.horizontal : Axis.vertical,
-                ),
-                ZoomControls(
-                  value: textZoomLevel.value,
-                  onChanged: (value) => textZoomLevel.value = value,
-                  min: 50,
-                  max: 200,
-                ),
-              ];
-
-              return isModal == true
-                  ? Row(
-                      mainAxisSize: MainAxisSize.min,
-                      crossAxisAlignment: CrossAxisAlignment.end,
-                      children: actions,
-                    )
-                  : Column(
-                      mainAxisSize: MainAxisSize.min,
-                      crossAxisAlignment: CrossAxisAlignment.end,
-                      children: actions,
+                            ),
                     );
-            }),
-          ),
-        ],
-      );
-    });
+                  },
+                ),
+              ),
+            if (playlist.activeTrack != null &&
+                (lyricValue == null || lyricValue.lyrics.isEmpty == true))
+              const Expanded(child: ShimmerLyrics()),
+          ],
+        ),
+        Align(
+          alignment: Alignment.bottomRight,
+          child: Builder(builder: (context) {
+            final actions = [
+              ZoomControls(
+                value: delay,
+                onChanged: (value) => ref.read(_delay.notifier).state = value,
+                interval: 1,
+                unit: "s",
+                increaseIcon: const Icon(SpotubeIcons.add),
+                decreaseIcon: const Icon(SpotubeIcons.remove),
+                direction: isModal == true ? Axis.horizontal : Axis.vertical,
+              ),
+              ZoomControls(
+                value: textZoomLevel.value,
+                onChanged: (value) => textZoomLevel.value = value,
+                min: 50,
+                max: 200,
+              ),
+            ];
+
+            return isModal == true
+                ? Row(
+                    mainAxisSize: MainAxisSize.min,
+                    crossAxisAlignment: CrossAxisAlignment.end,
+                    children: actions,
+                  )
+                : Column(
+                    mainAxisSize: MainAxisSize.min,
+                    crossAxisAlignment: CrossAxisAlignment.end,
+                    children: actions,
+                  );
+          }),
+        ),
+      ],
+    );
   }
 }
diff --git a/lib/pages/mobile_login/mobile_login.dart b/lib/pages/mobile_login/mobile_login.dart
index 82edaa78..7ab0ea2a 100644
--- a/lib/pages/mobile_login/mobile_login.dart
+++ b/lib/pages/mobile_login/mobile_login.dart
@@ -3,7 +3,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:flutter_inappwebview/flutter_inappwebview.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/utils/platform.dart';
 
@@ -24,7 +24,7 @@ class WebViewLogin extends HookConsumerWidget {
       );
     }
 
-    return PlatformScaffold(
+    return Scaffold(
       body: SafeArea(
         child: InAppWebView(
           initialOptions: InAppWebViewGroupOptions(
diff --git a/lib/pages/player/player.dart b/lib/pages/player/player.dart
index 6ebdb99e..dbe2ca82 100644
--- a/lib/pages/player/player.dart
+++ b/lib/pages/player/player.dart
@@ -1,26 +1,28 @@
-import 'dart:ui';
-
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:palette_generator/palette_generator.dart';
-import 'package:platform_ui/platform_ui.dart';
-import 'package:spotify/spotify.dart';
+
+import 'package:spotify/spotify.dart' hide Offset;
+import 'package:spotube/collections/assets.gen.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/player/player_actions.dart';
 import 'package:spotube/components/player/player_controls.dart';
+import 'package:spotube/components/player/player_queue.dart';
+import 'package:spotube/components/player/volume_slider.dart';
+import 'package:spotube/components/shared/animated_gradient.dart';
+import 'package:spotube/components/shared/dialogs/track_details_dialog.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
-import 'package:spotube/components/shared/spotube_marquee_text.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/hooks/use_custom_status_bar_color.dart';
 import 'package:spotube/hooks/use_palette_color.dart';
 import 'package:spotube/models/local_track.dart';
 import 'package:spotube/pages/lyrics/lyrics.dart';
 import 'package:spotube/provider/authentication_provider.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
-import 'package:spotube/provider/user_preferences_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 class PlayerView extends HookConsumerWidget {
@@ -30,26 +32,24 @@ class PlayerView extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
+    final theme = Theme.of(context);
     final auth = ref.watch(AuthenticationNotifier.provider);
-    final currentTrack = ref.watch(PlaylistQueueNotifier.provider.select(
-      (value) => value?.activeTrack,
+    final currentTrack = ref.watch(ProxyPlaylistNotifier.provider.select(
+      (value) => value.activeTrack,
     ));
-    final isLocalTrack = ref.watch(PlaylistQueueNotifier.provider.select(
-      (value) => value?.activeTrack is LocalTrack,
+    final isLocalTrack = ref.watch(ProxyPlaylistNotifier.provider.select(
+      (value) => value.activeTrack is LocalTrack,
     ));
-    final breakpoint = useBreakpoints();
-    final canRotate = ref.watch(
-      userPreferencesProvider.select((s) => s.rotatingAlbumArt),
-    );
+    final mediaQuery = MediaQuery.of(context);
 
     useEffect(() {
-      if (breakpoint.isMoreThan(Breakpoints.md)) {
+      if (mediaQuery.lgAndUp) {
         WidgetsBinding.instance.addPostFrameCallback((_) {
           GoRouter.of(context).pop();
         });
       }
       return null;
-    }, [breakpoint]);
+    }, [mediaQuery.lgAndUp]);
 
     String albumArt = useMemoized(
       () => TypeConversionUtils.image_X_UrlString(
@@ -59,179 +59,259 @@ class PlayerView extends HookConsumerWidget {
       [currentTrack?.album?.images],
     );
 
-    final PaletteColor paletteColor = usePaletteColor(albumArt, ref);
+    final palette = usePaletteGenerator(albumArt);
+    final bgColor = palette.dominantColor?.color ?? theme.colorScheme.primary;
+    final titleTextColor = palette.dominantColor?.titleTextColor;
+    final bodyTextColor = palette.dominantColor?.bodyTextColor;
 
     useCustomStatusBarColor(
-      paletteColor.color,
+      bgColor,
       GoRouter.of(context).location == "/player",
       noSetBGColor: true,
     );
 
-    return PlatformScaffold(
-      appBar: PageWindowTitleBar(
-        hideWhenWindows: false,
-        backgroundColor: Colors.transparent,
-        foregroundColor: paletteColor.titleTextColor,
-        toolbarOpacity:
-            PlatformProperty.only(android: 1.0, windows: 1.0, other: 0.0)
-                .resolve(platform ?? Theme.of(context).platform),
-        leading: PlatformBackButton(
-          color: PlatformProperty.only(
-            macos: Colors.black,
-            other: paletteColor.titleTextColor,
-          ).resolve(platform!),
+    return IconTheme(
+      data: theme.iconTheme.copyWith(color: bodyTextColor),
+      child: Scaffold(
+        appBar: PageWindowTitleBar(
+          backgroundColor: Colors.transparent,
+          foregroundColor: titleTextColor,
+          toolbarOpacity: 1,
+          leading: const BackButton(),
+          actions: [
+            IconButton(
+              icon: const Icon(SpotubeIcons.info, size: 18),
+              tooltip: context.l10n.details,
+              style: IconButton.styleFrom(foregroundColor: bodyTextColor),
+              onPressed: currentTrack == null
+                  ? null
+                  : () {
+                      showDialog(
+                          context: context,
+                          builder: (context) {
+                            return TrackDetailsDialog(
+                              track: currentTrack,
+                            );
+                          });
+                    },
+            )
+          ],
         ),
-      ),
-      extendBodyBehindAppBar: true,
-      body: Container(
-        decoration: BoxDecoration(
-          image: DecorationImage(
-            image: UniversalImage.imageProvider(albumArt),
-            fit: BoxFit.cover,
-          ),
-        ),
-        child: BackdropFilter(
-          filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
-          child: Material(
-            textStyle: PlatformTheme.of(context).textTheme!.body!,
-            color: paletteColor.color.withOpacity(.5),
-            child: SafeArea(
-              child: Column(
-                children: [
-                  Padding(
-                    padding: const EdgeInsets.all(10),
-                    child: Column(
-                      children: [
-                        SizedBox(
-                          height: 30,
-                          child: SpotubeMarqueeText(
-                            text: currentTrack?.name ?? "Not playing",
-                            style: Theme.of(context)
-                                .textTheme
-                                .headlineSmall
-                                ?.copyWith(
-                                  fontWeight: FontWeight.bold,
-                                  color: paletteColor.titleTextColor,
+        extendBodyBehindAppBar: true,
+        body: SizedBox(
+          height: double.infinity,
+          child: AnimateGradient(
+            animateAlignments: true,
+            primaryBegin: Alignment.topLeft,
+            primaryEnd: Alignment.bottomLeft,
+            secondaryBegin: Alignment.bottomRight,
+            secondaryEnd: Alignment.topRight,
+            duration: const Duration(seconds: 15),
+            primaryColors: [
+              palette.dominantColor?.color ?? theme.colorScheme.primary,
+              palette.mutedColor?.color ?? theme.colorScheme.secondary,
+            ],
+            secondaryColors: [
+              (palette.darkVibrantColor ?? palette.lightVibrantColor)?.color ??
+                  theme.colorScheme.primaryContainer,
+              (palette.darkMutedColor ?? palette.lightMutedColor)?.color ??
+                  theme.colorScheme.secondaryContainer,
+            ],
+            child: SingleChildScrollView(
+              child: Container(
+                alignment: Alignment.center,
+                width: double.infinity,
+                child: ConstrainedBox(
+                  constraints: const BoxConstraints(maxWidth: 580),
+                  child: SafeArea(
+                    child: Padding(
+                      padding: const EdgeInsets.all(8.0),
+                      child: Column(
+                        children: [
+                          Container(
+                            margin: const EdgeInsets.all(8),
+                            constraints: const BoxConstraints(
+                                maxHeight: 300, maxWidth: 300),
+                            decoration: BoxDecoration(
+                              borderRadius: BorderRadius.circular(20),
+                              boxShadow: const [
+                                BoxShadow(
+                                  color: Colors.black26,
+                                  spreadRadius: 2,
+                                  blurRadius: 10,
+                                  offset: Offset(0, 0),
                                 ),
-                            isHovering: true,
-                          ),
-                        ),
-                        if (isLocalTrack)
-                          Text(
-                            TypeConversionUtils.artists_X_String<Artist>(
-                              currentTrack?.artists ?? [],
+                              ],
+                            ),
+                            child: ClipRRect(
+                              borderRadius: BorderRadius.circular(20),
+                              child: UniversalImage(
+                                path: albumArt,
+                                placeholder: Assets.albumPlaceholder.path,
+                                fit: BoxFit.cover,
+                              ),
                             ),
-                            style: Theme.of(context)
-                                .textTheme
-                                .titleLarge!
-                                .copyWith(
-                                  fontWeight: FontWeight.bold,
-                                  color: paletteColor.bodyTextColor,
-                                ),
-                          )
-                        else
-                          TypeConversionUtils.artists_X_ClickableArtists(
-                            currentTrack?.artists ?? [],
-                            textStyle: Theme.of(context)
-                                .textTheme
-                                .titleLarge!
-                                .copyWith(
-                                  fontWeight: FontWeight.bold,
-                                  color: paletteColor.bodyTextColor,
-                                ),
-                            onRouteChange: (route) {
-                              GoRouter.of(context).pop();
-                              GoRouter.of(context).push(route);
-                            },
                           ),
-                      ],
+                          const SizedBox(height: 60),
+                          Container(
+                            padding: const EdgeInsets.symmetric(horizontal: 16),
+                            alignment: Alignment.centerLeft,
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                AutoSizeText(
+                                  currentTrack?.name ?? "Not playing",
+                                  style: TextStyle(
+                                    color: titleTextColor,
+                                    fontSize: 22,
+                                  ),
+                                  maxFontSize: 22,
+                                  maxLines: 1,
+                                  textAlign: TextAlign.start,
+                                ),
+                                if (isLocalTrack)
+                                  Text(
+                                    TypeConversionUtils.artists_X_String<
+                                        Artist>(
+                                      currentTrack?.artists ?? [],
+                                    ),
+                                    style: theme.textTheme.bodyMedium!.copyWith(
+                                      fontWeight: FontWeight.bold,
+                                      color: bodyTextColor,
+                                    ),
+                                  )
+                                else
+                                  TypeConversionUtils
+                                      .artists_X_ClickableArtists(
+                                    currentTrack?.artists ?? [],
+                                    textStyle:
+                                        theme.textTheme.bodyMedium!.copyWith(
+                                      fontWeight: FontWeight.bold,
+                                      color: bodyTextColor,
+                                    ),
+                                    onRouteChange: (route) {
+                                      GoRouter.of(context).pop();
+                                      GoRouter.of(context).push(route);
+                                    },
+                                  ),
+                              ],
+                            ),
+                          ),
+                          const SizedBox(height: 10),
+                          PlayerControls(palette: palette),
+                          const SizedBox(height: 25),
+                          PlayerActions(
+                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                            showQueue: false,
+                          ),
+                          const SizedBox(height: 10),
+                          Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                            children: [
+                              const SizedBox(width: 10),
+                              Expanded(
+                                child: OutlinedButton.icon(
+                                    icon: const Icon(SpotubeIcons.queue),
+                                    label: Text(context.l10n.queue),
+                                    style: OutlinedButton.styleFrom(
+                                      foregroundColor: bodyTextColor,
+                                      side: BorderSide(
+                                        color: bodyTextColor ?? Colors.white,
+                                      ),
+                                    ),
+                                    onPressed: currentTrack != null
+                                        ? () {
+                                            showModalBottomSheet(
+                                              context: context,
+                                              isDismissible: true,
+                                              enableDrag: true,
+                                              isScrollControlled: true,
+                                              backgroundColor: Colors.black12,
+                                              barrierColor: Colors.black12,
+                                              shape: RoundedRectangleBorder(
+                                                borderRadius:
+                                                    BorderRadius.circular(10),
+                                              ),
+                                              constraints: BoxConstraints(
+                                                maxHeight:
+                                                    MediaQuery.of(context)
+                                                            .size
+                                                            .height *
+                                                        .7,
+                                              ),
+                                              builder: (context) {
+                                                return const PlayerQueue(
+                                                    floating: false);
+                                              },
+                                            );
+                                          }
+                                        : null),
+                              ),
+                              if (auth != null) const SizedBox(width: 10),
+                              if (auth != null)
+                                Expanded(
+                                  child: OutlinedButton.icon(
+                                    label: Text(context.l10n.lyrics),
+                                    icon: const Icon(SpotubeIcons.music),
+                                    style: OutlinedButton.styleFrom(
+                                      foregroundColor: bodyTextColor,
+                                      side: BorderSide(
+                                        color: bodyTextColor ?? Colors.white,
+                                      ),
+                                    ),
+                                    onPressed: () {
+                                      showModalBottomSheet(
+                                        context: context,
+                                        isDismissible: true,
+                                        enableDrag: true,
+                                        isScrollControlled: true,
+                                        backgroundColor: Colors.black38,
+                                        barrierColor: Colors.black12,
+                                        shape: const RoundedRectangleBorder(
+                                          borderRadius: BorderRadius.only(
+                                            topLeft: Radius.circular(20),
+                                            topRight: Radius.circular(20),
+                                          ),
+                                        ),
+                                        constraints: BoxConstraints(
+                                          maxHeight: MediaQuery.of(context)
+                                                  .size
+                                                  .height *
+                                              0.8,
+                                        ),
+                                        builder: (context) =>
+                                            const LyricsPage(isModal: true),
+                                      );
+                                    },
+                                  ),
+                                ),
+                              const SizedBox(width: 10),
+                            ],
+                          ),
+                          const SizedBox(height: 25),
+                          SliderTheme(
+                            data: theme.sliderTheme.copyWith(
+                              activeTrackColor: titleTextColor,
+                              inactiveTrackColor: bodyTextColor,
+                              thumbColor: titleTextColor,
+                              overlayColor: titleTextColor?.withOpacity(0.2),
+                              trackHeight: 2,
+                              thumbShape: const RoundSliderThumbShape(
+                                enabledThumbRadius: 8,
+                              ),
+                            ),
+                            child: const Padding(
+                              padding: EdgeInsets.symmetric(horizontal: 16),
+                              child: VolumeSlider(
+                                fullWidth: true,
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
                     ),
                   ),
-                  const Spacer(),
-                  HookBuilder(builder: (context) {
-                    final ticker = useSingleTickerProvider();
-                    final controller = useAnimationController(
-                      duration: const Duration(seconds: 10),
-                      vsync: ticker,
-                    );
-
-                    useEffect(
-                      () {
-                        controller.repeat();
-                        if (!canRotate) controller.stop();
-                        return null;
-                      },
-                      [controller],
-                    );
-                    return RotationTransition(
-                      turns: Tween(begin: 0.0, end: 1.0).animate(controller),
-                      child: Container(
-                        decoration: BoxDecoration(
-                          border: canRotate
-                              ? Border.all(
-                                  color: paletteColor.titleTextColor,
-                                  width: 2,
-                                )
-                              : null,
-                          borderRadius:
-                              !canRotate ? BorderRadius.circular(15) : null,
-                          shape:
-                              canRotate ? BoxShape.circle : BoxShape.rectangle,
-                        ),
-                        child: !canRotate
-                            ? ClipRRect(
-                                borderRadius: BorderRadius.circular(15),
-                                child: UniversalImage(
-                                  path: albumArt,
-                                  width: MediaQuery.of(context).size.width *
-                                      (breakpoint.isSm ? 0.8 : 0.5),
-                                ),
-                              )
-                            : CircleAvatar(
-                                backgroundImage:
-                                    UniversalImage.imageProvider(albumArt),
-                                radius: MediaQuery.of(context).size.width *
-                                    (breakpoint.isSm ? 0.4 : 0.3),
-                              ),
-                      ),
-                    );
-                  }),
-                  const Spacer(),
-                  PlayerActions(
-                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                    floatingQueue: false,
-                    extraActions: [
-                      if (auth != null)
-                        PlatformIconButton(
-                          tooltip: "Open Lyrics",
-                          icon: const Icon(SpotubeIcons.music),
-                          onPressed: () {
-                            showModalBottomSheet(
-                              context: context,
-                              isDismissible: true,
-                              enableDrag: true,
-                              isScrollControlled: true,
-                              backgroundColor: Colors.black38,
-                              barrierColor: Colors.black12,
-                              shape: const RoundedRectangleBorder(
-                                borderRadius: BorderRadius.only(
-                                  topLeft: Radius.circular(20),
-                                  topRight: Radius.circular(20),
-                                ),
-                              ),
-                              constraints: BoxConstraints(
-                                maxHeight:
-                                    MediaQuery.of(context).size.height * 0.8,
-                              ),
-                              builder: (context) =>
-                                  const LyricsPage(isModal: true),
-                            );
-                          },
-                        )
-                    ],
-                  ),
-                  PlayerControls(iconColor: paletteColor.bodyTextColor),
-                ],
+                ),
               ),
             ),
           ),
diff --git a/lib/pages/playlist/playlist.dart b/lib/pages/playlist/playlist.dart
index 0377ad89..de89429a 100644
--- a/lib/pages/playlist/playlist.dart
+++ b/lib/pages/playlist/playlist.dart
@@ -2,13 +2,13 @@ import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotube/components/shared/heart_button.dart';
-import 'package:spotube/components/shared/track_table/track_collection_view.dart';
+import 'package:spotube/components/shared/track_table/track_collection_view/track_collection_view.dart';
 import 'package:spotube/components/shared/track_table/tracks_table_view.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
+import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/models/logger.dart';
 import 'package:flutter/material.dart';
 import 'package:spotify/spotify.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
 
 import 'package:spotube/utils/service_utils.dart';
@@ -20,39 +20,42 @@ class PlaylistView extends HookConsumerWidget {
   PlaylistView(this.playlist, {Key? key}) : super(key: key);
 
   Future<void> playPlaylist(
-    PlaylistQueueNotifier playlistNotifier,
     List<Track> tracks,
     WidgetRef ref, {
     Track? currentTrack,
   }) async {
+    final proxyPlaylist = ref.read(ProxyPlaylistNotifier.provider);
+    final playback = ref.read(ProxyPlaylistNotifier.notifier);
     final sortBy = ref.read(trackCollectionSortState(playlist.id!));
     final sortedTracks = ServiceUtils.sortTracks(tracks, sortBy);
     currentTrack ??= sortedTracks.first;
-    final isPlaylistPlaying = playlistNotifier.isPlayingPlaylist(tracks);
+    final isPlaylistPlaying = proxyPlaylist.containsTracks(tracks);
     if (!isPlaylistPlaying) {
-      await playlistNotifier.loadAndPlay(
+      await playback.load(
         sortedTracks,
-        active: sortedTracks.indexWhere((s) => s.id == currentTrack?.id),
+        initialIndex: sortedTracks.indexWhere((s) => s.id == currentTrack?.id),
+        autoPlay: true,
       );
+      playback.addCollection(playlist.id!);
     } else if (isPlaylistPlaying &&
         currentTrack.id != null &&
-        currentTrack.id != playlistNotifier.state?.activeTrack.id) {
-      await playlistNotifier.playTrack(currentTrack);
+        currentTrack.id != proxyPlaylist.activeTrack?.id) {
+      await playback.jumpToTrack(currentTrack);
     }
   }
 
   @override
   Widget build(BuildContext context, ref) {
-    ref.watch(PlaylistQueueNotifier.provider);
-    final playlistNotifier = ref.watch(PlaylistQueueNotifier.notifier);
+    final proxyPlaylist = ref.watch(ProxyPlaylistNotifier.provider);
+    final playlistNotifier = ref.watch(ProxyPlaylistNotifier.notifier);
 
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
 
     final meSnapshot = useQueries.user.me(ref);
     final tracksSnapshot = useQueries.playlist.tracksOfQuery(ref, playlist.id!);
 
     final isPlaylistPlaying = useMemoized(
-      () => playlistNotifier.isPlayingPlaylist(tracksSnapshot.data ?? []),
+      () => proxyPlaylist.containsTracks(tracksSnapshot.data ?? []),
       [playlistNotifier, tracksSnapshot.data],
     );
 
@@ -76,29 +79,29 @@ class PlaylistView extends HookConsumerWidget {
         if (tracksSnapshot.hasData) {
           if (!isPlaylistPlaying) {
             playPlaylist(
-              playlistNotifier,
               tracksSnapshot.data!,
               ref,
               currentTrack: track,
             );
           } else if (isPlaylistPlaying && track != null) {
             playPlaylist(
-              playlistNotifier,
               tracksSnapshot.data!,
               ref,
               currentTrack: track,
             );
           } else {
-            playlistNotifier.remove(tracksSnapshot.data!);
+            playlistNotifier
+                .removeTracks(tracksSnapshot.data!.map((e) => e.id!));
           }
         }
       },
       onAddToQueue: () {
         if (tracksSnapshot.hasData && !isPlaylistPlaying) {
-          playlistNotifier.add(tracksSnapshot.data!);
+          playlistNotifier.addTracks(tracksSnapshot.data!);
+          playlistNotifier.addCollection(playlist.id!);
         }
       },
-      bottomSpace: breakpoint.isLessThanOrEqualTo(Breakpoints.md),
+      bottomSpace: mediaQuery.mdAndDown,
       showShare: playlist.id != "user-liked-tracks",
       routePath: "/playlist/${playlist.id}",
       onShare: () {
@@ -125,20 +128,19 @@ class PlaylistView extends HookConsumerWidget {
         if (tracksSnapshot.hasData) {
           if (!isPlaylistPlaying) {
             playPlaylist(
-              playlistNotifier,
               tracks,
               ref,
               currentTrack: track,
             );
           } else if (isPlaylistPlaying && track != null) {
             playPlaylist(
-              playlistNotifier,
               tracks,
               ref,
               currentTrack: track,
             );
           } else {
-            playlistNotifier.stop();
+            // TODO: Remove the ability to stop the playlist
+            // playlistNotifier.stop();
           }
         }
       },
diff --git a/lib/pages/root/root_app.dart b/lib/pages/root/root_app.dart
index b2705b94..930c7f55 100644
--- a/lib/pages/root/root_app.dart
+++ b/lib/pages/root/root_app.dart
@@ -1,17 +1,16 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
 import 'package:spotube/components/shared/dialogs/replace_downloaded_dialog.dart';
 import 'package:spotube/components/root/bottom_player.dart';
 import 'package:spotube/components/root/sidebar.dart';
 import 'package:spotube/components/root/spotube_navigation_bar.dart';
-import 'package:spotube/components/shared/page_window_title_bar.dart';
 import 'package:spotube/hooks/use_update_checker.dart';
-import 'package:spotube/provider/authentication_provider.dart';
-import 'package:spotube/provider/downloader_provider.dart';
+import 'package:spotube/provider/download_manager_provider.dart';
 
 const rootPaths = {
   0: "/",
@@ -31,19 +30,38 @@ class RootApp extends HookConsumerWidget {
   Widget build(BuildContext context, ref) {
     final index = useState(0);
     final isMounted = useIsMounted();
-    final auth = ref.watch(AuthenticationNotifier.provider);
+    final showingDialogCompleter = useRef(Completer()..complete());
+    final downloader = ref.watch(downloadManagerProvider.notifier);
 
-    final downloader = ref.watch(downloaderProvider);
     useEffect(() {
       downloader.onFileExists = (track) async {
         if (!isMounted()) return false;
-        return await showPlatformAlertDialog<bool>(
-              context,
-              builder: (context) => ReplaceDownloadedDialog(
-                track: track,
-              ),
-            ) ??
-            false;
+
+        if (!showingDialogCompleter.value.isCompleted) {
+          await showingDialogCompleter.value.future;
+        }
+
+        final replaceAll = ref.read(replaceDownloadedFileState);
+
+        if (replaceAll != null) return replaceAll;
+
+        showingDialogCompleter.value = Completer();
+
+        if (context.mounted) {
+          final result = await showDialog<bool>(
+                context: context,
+                builder: (context) => ReplaceDownloadedDialog(
+                  track: track,
+                ),
+              ) ??
+              false;
+
+          showingDialogCompleter.value.complete();
+          return result;
+        }
+
+        // it'll never reach here as root_app is always mounted
+        return false;
       };
       return null;
     }, [downloader]);
@@ -51,7 +69,7 @@ class RootApp extends HookConsumerWidget {
     // checks for latest version of the application
     useUpdateChecker(ref);
 
-    final backgroundColor = PlatformTheme.of(context).scaffoldBackgroundColor!;
+    final backgroundColor = Theme.of(context).scaffoldBackgroundColor;
 
     useEffect(() {
       SystemChrome.setSystemUIOverlayStyle(
@@ -65,10 +83,7 @@ class RootApp extends HookConsumerWidget {
       return null;
     }, [backgroundColor]);
 
-    return PlatformScaffold(
-      appBar: platform == TargetPlatform.windows
-          ? PageWindowTitleBar(hideWhenWindows: false) as PreferredSizeWidget?
-          : null,
+    return Scaffold(
       body: Sidebar(
         selectedIndex: index.value,
         onSelectedIndexChanged: (i) {
diff --git a/lib/pages/search/search.dart b/lib/pages/search/search.dart
index 1c4b247b..9d5e7eed 100644
--- a/lib/pages/search/search.dart
+++ b/lib/pages/search/search.dart
@@ -4,7 +4,7 @@ import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart' hide Page;
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotify/spotify.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/album/album_card.dart';
@@ -16,13 +16,13 @@ import 'package:spotube/components/shared/track_table/track_tile.dart';
 import 'package:spotube/components/shared/waypoint.dart';
 import 'package:spotube/components/artist/artist_card.dart';
 import 'package:spotube/components/playlist/playlist_card.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/authentication_provider.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
 
 import 'package:spotube/utils/platform.dart';
-import 'package:spotube/utils/primitive_utils.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 import 'package:collection/collection.dart';
 
@@ -33,13 +33,14 @@ class SearchPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
+    final theme = Theme.of(context);
     ref.watch(AuthenticationNotifier.provider);
     final authenticationNotifier =
         ref.watch(AuthenticationNotifier.provider.notifier);
     final albumController = useScrollController();
     final playlistController = useScrollController();
     final artistController = useScrollController();
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
 
     final searchTerm = ref.watch(searchTermStateProvider);
 
@@ -62,8 +63,9 @@ class SearchPage extends HookConsumerWidget {
     }
 
     return SafeArea(
-      child: PlatformScaffold(
-        appBar: kIsDesktop && !kIsMacOS ? PageWindowTitleBar() : null,
+      bottom: false,
+      child: Scaffold(
+        appBar: kIsDesktop && !kIsMacOS ? const PageWindowTitleBar() : null,
         body: !authenticationNotifier.isLoggedIn
             ? const AnonymousFallback()
             : Column(
@@ -73,15 +75,13 @@ class SearchPage extends HookConsumerWidget {
                       horizontal: 20,
                       vertical: 10,
                     ),
-                    color: PlatformTheme.of(context).scaffoldBackgroundColor,
-                    child: PlatformTextField(
-                      prefixIcon: SpotubeIcons.search,
-                      prefixIconColor: PlatformProperty.only(
-                        ios:
-                            PlatformTheme.of(context).textTheme?.caption?.color,
-                        other: null,
-                      ).resolve(platform!),
-                      placeholder: "Search...",
+                    color: theme.scaffoldBackgroundColor,
+                    child: TextField(
+                      autofocus: true,
+                      decoration: InputDecoration(
+                        prefixIcon: const Icon(SpotubeIcons.search),
+                        hintText: "${context.l10n.search}...",
+                      ),
                       onSubmitted: (value) async {
                         ref.read(searchTermStateProvider.notifier).state =
                             value;
@@ -96,9 +96,9 @@ class SearchPage extends HookConsumerWidget {
                   HookBuilder(
                     builder: (context) {
                       final playlist =
-                          ref.watch(PlaylistQueueNotifier.provider);
+                          ref.watch(ProxyPlaylistNotifier.provider);
                       final playlistNotifier =
-                          ref.watch(PlaylistQueueNotifier.notifier);
+                          ref.watch(ProxyPlaylistNotifier.notifier);
                       List<AlbumSimple> albums = [];
                       List<Artist> artists = [];
                       List<Track> tracks = [];
@@ -129,224 +129,241 @@ class SearchPage extends HookConsumerWidget {
                               vertical: 8,
                               horizontal: 20,
                             ),
-                            child: Column(
-                              crossAxisAlignment: CrossAxisAlignment.start,
-                              children: [
-                                if (tracks.isNotEmpty)
-                                  PlatformText.headline("Songs"),
-                                if (searchTrack.isLoadingPage)
-                                  const PlatformCircularProgressIndicator()
-                                else if (searchTrack.hasPageError)
-                                  PlatformText(searchTrack.errors.lastOrNull
-                                          ?.toString() ??
-                                      "")
-                                else
-                                  ...tracks.asMap().entries.map((track) {
-                                    String duration =
-                                        "${track.value.duration?.inMinutes.remainder(60)}:${PrimitiveUtils.zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}";
-                                    return TrackTile(
-                                      playlist,
-                                      track: track,
-                                      duration: duration,
-                                      isActive: playlist?.activeTrack.id ==
-                                          track.value.id,
-                                      onTrackPlayButtonPressed:
-                                          (currentTrack) async {
-                                        final isTrackPlaying =
-                                            playlist?.activeTrack.id ==
-                                                currentTrack.id;
-                                        if (!isTrackPlaying &&
-                                            context.mounted) {
-                                          final shouldPlay =
-                                              (playlist?.tracks.length ?? 0) >
-                                                      20
-                                                  ? await showPromptDialog(
-                                                      context: context,
-                                                      title:
-                                                          "Playing ${currentTrack.name}",
-                                                      message:
-                                                          "This will clear the current queue. "
-                                                          "${playlist?.tracks.length ?? 0} tracks will be removed\n"
-                                                          "Do you want to continue?",
-                                                    )
-                                                  : true;
+                            child: SafeArea(
+                              child: Column(
+                                crossAxisAlignment: CrossAxisAlignment.start,
+                                children: [
+                                  if (tracks.isNotEmpty)
+                                    Text(
+                                      context.l10n.songs,
+                                      style: theme.textTheme.titleLarge!,
+                                    ),
+                                  if (searchTrack.isLoadingPage)
+                                    const CircularProgressIndicator()
+                                  else if (searchTrack.hasPageError)
+                                    Text(
+                                      searchTrack.errors.lastOrNull
+                                              ?.toString() ??
+                                          "",
+                                    )
+                                  else
+                                    ...tracks.mapIndexed((i, track) {
+                                      return TrackTile(
+                                        index: i,
+                                        track: track,
+                                        onTap: () async {
+                                          final isTrackPlaying =
+                                              playlist.activeTrack?.id ==
+                                                  track.id;
+                                          if (!isTrackPlaying &&
+                                              context.mounted) {
+                                            final shouldPlay =
+                                                (playlist.tracks.length) > 20
+                                                    ? await showPromptDialog(
+                                                        context: context,
+                                                        title: context.l10n
+                                                            .playing_track(
+                                                          track.name!,
+                                                        ),
+                                                        message: context.l10n
+                                                            .queue_clear_alert(
+                                                          playlist
+                                                              .tracks.length,
+                                                        ),
+                                                      )
+                                                    : true;
 
-                                          if (shouldPlay) {
-                                            await playlistNotifier
-                                                .loadAndPlay([currentTrack]);
-                                          }
-                                        }
-                                      },
-                                    );
-                                  }),
-                                if (searchTrack.hasNextPage &&
-                                    tracks.isNotEmpty)
-                                  Center(
-                                    child: PlatformTextButton(
-                                      onPressed: searchTrack.isRefreshingPage
-                                          ? null
-                                          : () => searchTrack.fetchNext(),
-                                      child: searchTrack.isRefreshingPage
-                                          ? const PlatformCircularProgressIndicator()
-                                          : const PlatformText("Load more"),
-                                    ),
-                                  ),
-                                if (playlists.isNotEmpty)
-                                  PlatformText.headline("Playlists"),
-                                const SizedBox(height: 10),
-                                ScrollConfiguration(
-                                  behavior:
-                                      ScrollConfiguration.of(context).copyWith(
-                                    dragDevices: {
-                                      PointerDeviceKind.touch,
-                                      PointerDeviceKind.mouse,
-                                    },
-                                  ),
-                                  child: Scrollbar(
-                                    scrollbarOrientation:
-                                        breakpoint > Breakpoints.md
-                                            ? ScrollbarOrientation.bottom
-                                            : ScrollbarOrientation.top,
-                                    controller: playlistController,
-                                    child: Waypoint(
-                                      onTouchEdge: () {
-                                        searchPlaylist.fetchNext();
-                                      },
-                                      controller: playlistController,
-                                      child: SingleChildScrollView(
-                                        scrollDirection: Axis.horizontal,
-                                        controller: playlistController,
-                                        child: Row(
-                                          children: [
-                                            ...playlists.mapIndexed(
-                                              (i, playlist) {
-                                                if (i == playlists.length - 1 &&
-                                                    searchPlaylist
-                                                        .hasNextPage) {
-                                                  return const ShimmerPlaybuttonCard(
-                                                      count: 1);
-                                                }
-                                                return PlaylistCard(playlist);
-                                              },
-                                            ),
-                                          ],
-                                        ),
-                                      ),
-                                    ),
-                                  ),
-                                ),
-                                if (searchPlaylist.isLoadingPage)
-                                  const PlatformCircularProgressIndicator(),
-                                if (searchPlaylist.hasPageError)
-                                  PlatformText(
-                                    searchPlaylist.errors.lastOrNull
-                                            ?.toString() ??
-                                        "",
-                                  ),
-                                const SizedBox(height: 20),
-                                if (artists.isNotEmpty)
-                                  PlatformText.headline("Artists"),
-                                const SizedBox(height: 10),
-                                ScrollConfiguration(
-                                  behavior:
-                                      ScrollConfiguration.of(context).copyWith(
-                                    dragDevices: {
-                                      PointerDeviceKind.touch,
-                                      PointerDeviceKind.mouse,
-                                    },
-                                  ),
-                                  child: Scrollbar(
-                                    controller: artistController,
-                                    child: Waypoint(
-                                      controller: artistController,
-                                      onTouchEdge: () {
-                                        searchArtist.fetchNext();
-                                      },
-                                      child: SingleChildScrollView(
-                                        scrollDirection: Axis.horizontal,
-                                        controller: artistController,
-                                        child: Row(
-                                          children: [
-                                            ...artists.mapIndexed(
-                                              (i, artist) {
-                                                if (i == artists.length - 1 &&
-                                                    searchArtist.hasNextPage) {
-                                                  return const ShimmerPlaybuttonCard(
-                                                      count: 1);
-                                                }
-                                                return Container(
-                                                  margin: const EdgeInsets
-                                                          .symmetric(
-                                                      horizontal: 15),
-                                                  child: ArtistCard(artist),
-                                                );
-                                              },
-                                            ),
-                                          ],
-                                        ),
-                                      ),
-                                    ),
-                                  ),
-                                ),
-                                if (searchArtist.isLoadingPage)
-                                  const PlatformCircularProgressIndicator(),
-                                if (searchArtist.hasPageError)
-                                  PlatformText(
-                                    searchArtist.errors.lastOrNull
-                                            ?.toString() ??
-                                        "",
-                                  ),
-                                const SizedBox(height: 20),
-                                if (albums.isNotEmpty)
-                                  PlatformText.subheading("Albums"),
-                                const SizedBox(height: 10),
-                                ScrollConfiguration(
-                                  behavior:
-                                      ScrollConfiguration.of(context).copyWith(
-                                    dragDevices: {
-                                      PointerDeviceKind.touch,
-                                      PointerDeviceKind.mouse,
-                                    },
-                                  ),
-                                  child: Scrollbar(
-                                    controller: albumController,
-                                    child: Waypoint(
-                                      controller: albumController,
-                                      onTouchEdge: () {
-                                        searchAlbum.fetchNext();
-                                      },
-                                      child: SingleChildScrollView(
-                                        scrollDirection: Axis.horizontal,
-                                        controller: albumController,
-                                        child: Row(
-                                          children: [
-                                            ...albums.mapIndexed((i, album) {
-                                              if (i == albums.length - 1 &&
-                                                  searchAlbum.hasNextPage) {
-                                                return const ShimmerPlaybuttonCard(
-                                                    count: 1);
-                                              }
-                                              return AlbumCard(
-                                                TypeConversionUtils
-                                                    .simpleAlbum_X_Album(
-                                                  album,
-                                                ),
+                                            if (shouldPlay) {
+                                              await playlistNotifier.load(
+                                                [track],
+                                                autoPlay: true,
                                               );
-                                            }),
-                                          ],
+                                            }
+                                          }
+                                        },
+                                      );
+                                    }),
+                                  if (searchTrack.hasNextPage &&
+                                      tracks.isNotEmpty)
+                                    Center(
+                                      child: TextButton(
+                                        onPressed: searchTrack.isRefreshingPage
+                                            ? null
+                                            : () => searchTrack.fetchNext(),
+                                        child: searchTrack.isRefreshingPage
+                                            ? const CircularProgressIndicator()
+                                            : Text(context.l10n.load_more),
+                                      ),
+                                    ),
+                                  if (playlists.isNotEmpty)
+                                    Text(
+                                      context.l10n.playlists,
+                                      style: theme.textTheme.titleLarge!,
+                                    ),
+                                  const SizedBox(height: 10),
+                                  ScrollConfiguration(
+                                    behavior: ScrollConfiguration.of(context)
+                                        .copyWith(
+                                      dragDevices: {
+                                        PointerDeviceKind.touch,
+                                        PointerDeviceKind.mouse,
+                                      },
+                                    ),
+                                    child: Scrollbar(
+                                      scrollbarOrientation: mediaQuery.lgAndUp
+                                          ? ScrollbarOrientation.bottom
+                                          : ScrollbarOrientation.top,
+                                      controller: playlistController,
+                                      child: Waypoint(
+                                        onTouchEdge: () {
+                                          searchPlaylist.fetchNext();
+                                        },
+                                        controller: playlistController,
+                                        child: SingleChildScrollView(
+                                          scrollDirection: Axis.horizontal,
+                                          controller: playlistController,
+                                          child: Row(
+                                            children: [
+                                              ...playlists.mapIndexed(
+                                                (i, playlist) {
+                                                  if (i ==
+                                                          playlists.length -
+                                                              1 &&
+                                                      searchPlaylist
+                                                          .hasNextPage) {
+                                                    return const ShimmerPlaybuttonCard(
+                                                        count: 1);
+                                                  }
+                                                  return PlaylistCard(playlist);
+                                                },
+                                              ),
+                                            ],
+                                          ),
                                         ),
                                       ),
                                     ),
                                   ),
-                                ),
-                                if (searchAlbum.isLoadingPage)
-                                  const PlatformCircularProgressIndicator(),
-                                if (searchAlbum.hasPageError)
-                                  PlatformText(
-                                    searchAlbum.errors.lastOrNull?.toString() ??
-                                        "",
+                                  if (searchPlaylist.isLoadingPage)
+                                    const CircularProgressIndicator(),
+                                  if (searchPlaylist.hasPageError)
+                                    Text(
+                                      searchPlaylist.errors.lastOrNull
+                                              ?.toString() ??
+                                          "",
+                                    ),
+                                  const SizedBox(height: 20),
+                                  if (artists.isNotEmpty)
+                                    Text(
+                                      context.l10n.artists,
+                                      style: theme.textTheme.titleLarge!,
+                                    ),
+                                  const SizedBox(height: 10),
+                                  ScrollConfiguration(
+                                    behavior: ScrollConfiguration.of(context)
+                                        .copyWith(
+                                      dragDevices: {
+                                        PointerDeviceKind.touch,
+                                        PointerDeviceKind.mouse,
+                                      },
+                                    ),
+                                    child: Scrollbar(
+                                      controller: artistController,
+                                      child: Waypoint(
+                                        controller: artistController,
+                                        onTouchEdge: () {
+                                          searchArtist.fetchNext();
+                                        },
+                                        child: SingleChildScrollView(
+                                          scrollDirection: Axis.horizontal,
+                                          controller: artistController,
+                                          child: Row(
+                                            children: [
+                                              ...artists.mapIndexed(
+                                                (i, artist) {
+                                                  if (i == artists.length - 1 &&
+                                                      searchArtist
+                                                          .hasNextPage) {
+                                                    return const ShimmerPlaybuttonCard(
+                                                        count: 1);
+                                                  }
+                                                  return Container(
+                                                    margin: const EdgeInsets
+                                                            .symmetric(
+                                                        horizontal: 15),
+                                                    child: ArtistCard(artist),
+                                                  );
+                                                },
+                                              ),
+                                            ],
+                                          ),
+                                        ),
+                                      ),
+                                    ),
                                   ),
-                              ],
+                                  if (searchArtist.isLoadingPage)
+                                    const CircularProgressIndicator(),
+                                  if (searchArtist.hasPageError)
+                                    Text(
+                                      searchArtist.errors.lastOrNull
+                                              ?.toString() ??
+                                          "",
+                                    ),
+                                  const SizedBox(height: 20),
+                                  if (albums.isNotEmpty)
+                                    Text(
+                                      context.l10n.albums,
+                                      style: theme.textTheme.titleMedium!,
+                                    ),
+                                  const SizedBox(height: 10),
+                                  ScrollConfiguration(
+                                    behavior: ScrollConfiguration.of(context)
+                                        .copyWith(
+                                      dragDevices: {
+                                        PointerDeviceKind.touch,
+                                        PointerDeviceKind.mouse,
+                                      },
+                                    ),
+                                    child: Scrollbar(
+                                      controller: albumController,
+                                      child: Waypoint(
+                                        controller: albumController,
+                                        onTouchEdge: () {
+                                          searchAlbum.fetchNext();
+                                        },
+                                        child: SingleChildScrollView(
+                                          scrollDirection: Axis.horizontal,
+                                          controller: albumController,
+                                          child: Row(
+                                            children: [
+                                              ...albums.mapIndexed((i, album) {
+                                                if (i == albums.length - 1 &&
+                                                    searchAlbum.hasNextPage) {
+                                                  return const ShimmerPlaybuttonCard(
+                                                      count: 1);
+                                                }
+                                                return AlbumCard(
+                                                  TypeConversionUtils
+                                                      .simpleAlbum_X_Album(
+                                                    album,
+                                                  ),
+                                                );
+                                              }),
+                                            ],
+                                          ),
+                                        ),
+                                      ),
+                                    ),
+                                  ),
+                                  if (searchAlbum.isLoadingPage)
+                                    const CircularProgressIndicator(),
+                                  if (searchAlbum.hasPageError)
+                                    Text(
+                                      searchAlbum.errors.lastOrNull
+                                              ?.toString() ??
+                                          "",
+                                    ),
+                                ],
+                              ),
                             ),
                           ),
                         ),
diff --git a/lib/pages/settings/about.dart b/lib/pages/settings/about.dart
index 0ae82686..97a0aae9 100644
--- a/lib/pages/settings/about.dart
+++ b/lib/pages/settings/about.dart
@@ -1,14 +1,19 @@
 import 'package:flutter/material.dart';
-import 'package:platform_ui/platform_ui.dart';
+import 'package:flutter/services.dart';
 import 'package:spotube/collections/assets.gen.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
+import 'package:spotube/components/shared/links/hyper_link.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/hooks/use_package_info.dart';
 
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:url_launcher/url_launcher.dart';
-import 'package:url_launcher/url_launcher_string.dart';
+
+final _licenseProvider = FutureProvider<String>((ref) async {
+  return await rootBundle.loadString("LICENSE");
+});
 
 class AboutSpotube extends HookConsumerWidget {
   const AboutSpotube({Key? key}) : super(key: key);
@@ -16,11 +21,15 @@ class AboutSpotube extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, ref) {
     final packageInfo = usePackageInfo();
+    final license = ref.watch(_licenseProvider);
+    final theme = Theme.of(context);
 
-    return PlatformScaffold(
+    const colon = Text(":");
+
+    return Scaffold(
       appBar: PageWindowTitleBar(
-        leading: const PlatformBackButton(),
-        center: const PlatformText("About Spotube"),
+        leading: const BackButton(),
+        title: Text(context.l10n.about_spotube),
       ),
       body: SingleChildScrollView(
         child: Padding(
@@ -33,76 +42,75 @@ class AboutSpotube extends HookConsumerWidget {
               ),
               Center(
                 child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    PlatformText.headline(
-                      "Spotube, a light-weight, cross-platform, free-for-all spotify client",
+                    Text(
+                      context.l10n.spotube_description,
+                      style: theme.textTheme.titleLarge,
                     ),
                     const SizedBox(height: 20),
-                    Row(
-                      mainAxisSize: MainAxisSize.min,
+                    Table(
+                      columnWidths: const {
+                        0: FixedColumnWidth(95),
+                        1: FixedColumnWidth(10),
+                        2: IntrinsicColumnWidth(),
+                      },
                       children: [
-                        const PlatformText(
-                          "Founder:   Kingkor Roy Tirtho",
-                          style: TextStyle(
-                            fontWeight: FontWeight.bold,
-                          ),
+                        TableRow(
+                          children: [
+                            Text(context.l10n.founder),
+                            colon,
+                            Hyperlink(
+                              context.l10n.kingkor_roy_tirtho,
+                              "https://github.com/KRTirtho",
+                            )
+                          ],
                         ),
-                        const SizedBox(width: 5),
-                        CircleAvatar(
-                          radius: 20,
-                          child: ClipOval(
-                            child: Image.network(
-                              "https://avatars.githubusercontent.com/u/61944859?v=4",
+                        TableRow(
+                          children: [
+                            Text(context.l10n.version),
+                            colon,
+                            Text("v${packageInfo.version}")
+                          ],
+                        ),
+                        TableRow(
+                          children: [
+                            Text(context.l10n.build_number),
+                            colon,
+                            Text(packageInfo.buildNumber.replaceAll(".", " "))
+                          ],
+                        ),
+                        TableRow(
+                          children: [
+                            Text(context.l10n.repository),
+                            colon,
+                            const Hyperlink(
+                              "github.com/KRTirtho/spotube",
+                              "https://github.com/KRTirtho/spotube",
                             ),
-                          ),
+                          ],
+                        ),
+                        TableRow(
+                          children: [
+                            Text(context.l10n.license),
+                            colon,
+                            const Hyperlink(
+                              "BSD-4-Clause",
+                              "https://raw.githubusercontent.com/KRTirtho/spotube/master/LICENSE",
+                            ),
+                          ],
+                        ),
+                        TableRow(
+                          children: [
+                            Text(context.l10n.bug_issues),
+                            colon,
+                            const Hyperlink(
+                              "github.com/KRTirtho/spotube/issues",
+                              "https://github.com/KRTirtho/spotube/issues",
+                            ),
+                          ],
                         ),
                       ],
                     ),
-                    const SizedBox(height: 5),
-                    PlatformText(
-                      "Version:              v${packageInfo.version}",
-                    ),
-                    const SizedBox(height: 5),
-                    PlatformText(
-                      "Build Number:  ${packageInfo.buildNumber.replaceAll(".", " ")}",
-                    ),
-                    const SizedBox(height: 5),
-                    InkWell(
-                      onTap: () {
-                        launchUrlString(
-                          "https://github.com/KRTirtho/spotube",
-                          mode: LaunchMode.externalApplication,
-                        );
-                      },
-                      child: const PlatformText(
-                        "Repository:        https://github.com/KRTirtho/spotube",
-                      ),
-                    ),
-                    const SizedBox(height: 5),
-                    InkWell(
-                      onTap: () {
-                        launchUrlString(
-                          "https://raw.githubusercontent.com/KRTirtho/spotube/master/LICENSE",
-                          mode: LaunchMode.externalApplication,
-                        );
-                      },
-                      child: const PlatformText(
-                        "License:              BSD-4-Clause",
-                      ),
-                    ),
-                    const SizedBox(height: 5),
-                    InkWell(
-                      onTap: () {
-                        launchUrlString(
-                          "https://github.com/KRTirtho/spotube/issues",
-                          mode: LaunchMode.externalApplication,
-                        );
-                      },
-                      child: const PlatformText(
-                        "Bugs+Issues:     https://github.com/KRTirtho/spotube/issues",
-                      ),
-                    ),
                   ],
                 ),
               ),
@@ -178,21 +186,38 @@ class AboutSpotube extends HookConsumerWidget {
                 ],
               ),
               const SizedBox(height: 20),
-              PlatformText.caption(
-                "Made with ❤️ in Bangladesh🇧🇩",
+              Text(
+                context.l10n.made_with,
                 textAlign: TextAlign.center,
+                style: theme.textTheme.bodySmall,
               ),
-              PlatformText.caption(
-                "© 2021-${DateTime.now().year} Kingkor Roy Tirtho",
+              Text(
+                context.l10n.copyright(DateTime.now().year),
                 textAlign: TextAlign.center,
+                style: theme.textTheme.bodySmall,
               ),
               const SizedBox(height: 20),
               ConstrainedBox(
                 constraints: const BoxConstraints(maxWidth: 750),
                 child: SafeArea(
-                  child: PlatformText.caption(
-                    licenseText,
-                    textAlign: TextAlign.justify,
+                  child: license.when(
+                    data: (data) {
+                      return Text(
+                        data,
+                        style: theme.textTheme.bodySmall,
+                      );
+                    },
+                    loading: () {
+                      return const Center(
+                        child: CircularProgressIndicator(),
+                      );
+                    },
+                    error: (e, s) {
+                      return Text(
+                        e.toString(),
+                        style: theme.textTheme.bodySmall,
+                      );
+                    },
                   ),
                 ),
               ),
@@ -203,18 +228,3 @@ class AboutSpotube extends HookConsumerWidget {
     );
   }
 }
-
-const licenseText = """
-BSD-4-Clause License
-
-Copyright (c) 2022 Kingkor Roy Tirtho. All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-3. All advertising materials mentioning features or use of this software must display the following acknowledgement:
-This product includes software developed by Kingkor Roy Tirtho.
-4. Neither the name of the Software nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-THIS SOFTWARE IS PROVIDED BY KINGKOR ROY TIRTHO AND CONTRIBUTORS  "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL KINGKOR ROY TIRTHO AND CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-""";
diff --git a/lib/pages/settings/blacklist.dart b/lib/pages/settings/blacklist.dart
index 7297b024..a41a38eb 100644
--- a/lib/pages/settings/blacklist.dart
+++ b/lib/pages/settings/blacklist.dart
@@ -3,11 +3,11 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:collection/collection.dart';
 import 'package:fuzzywuzzy/fuzzywuzzy.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/blacklist_provider.dart';
-import 'package:tuple/tuple.dart';
 
 class BlackListPage extends HookConsumerWidget {
   const BlackListPage({Key? key}) : super(key: key);
@@ -23,35 +23,37 @@ class BlackListPage extends HookConsumerWidget {
           return blacklist;
         }
         return blacklist
-            .map((e) => Tuple2(
-                  weightedRatio("${e.name} ${e.type.name}", searchText.value),
-                  e,
-                ))
-            .sorted((a, b) => b.item1.compareTo(a.item1))
-            .where((e) => e.item1 > 50)
-            .map((e) => e.item2)
+            .map(
+              (e) => (
+                weightedRatio("${e.name} ${e.type.name}", searchText.value),
+                e,
+              ),
+            )
+            .sorted((a, b) => b.$1.compareTo(a.$1))
+            .where((e) => e.$1 > 50)
+            .map((e) => e.$2)
             .toList();
       },
       [blacklist, searchText.value],
     );
 
-    return PlatformScaffold(
+    return Scaffold(
       appBar: PageWindowTitleBar(
-        center: const PlatformText("Blacklist"),
+        title: Text(context.l10n.blacklist),
         centerTitle: true,
-        leading: const PlatformBackButton(),
+        leading: const BackButton(),
       ),
       body: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
           Padding(
-            padding: platform == TargetPlatform.windows
-                ? const EdgeInsets.all(8.0).copyWith(left: 45)
-                : const EdgeInsets.all(8.0),
-            child: PlatformTextField(
+            padding: const EdgeInsets.all(8.0),
+            child: TextField(
               onChanged: (value) => searchText.value = value,
-              placeholder: "Search",
-              prefixIcon: SpotubeIcons.search,
+              decoration: InputDecoration(
+                hintText: context.l10n.search,
+                prefixIcon: const Icon(SpotubeIcons.search),
+              ),
             ),
           ),
           ListView.builder(
@@ -59,11 +61,11 @@ class BlackListPage extends HookConsumerWidget {
             itemCount: filteredBlacklist.length,
             itemBuilder: (context, index) {
               final item = filteredBlacklist.elementAt(index);
-              return PlatformListTile(
-                leading: PlatformText("${index + 1}."),
-                title: PlatformText("${item.name} (${item.type.name})"),
-                subtitle: PlatformText.caption(item.id),
-                trailing: PlatformIconButton(
+              return ListTile(
+                leading: Text("${index + 1}."),
+                title: Text("${item.name} (${item.type.name})"),
+                subtitle: Text(item.id),
+                trailing: IconButton(
                   icon: Icon(SpotubeIcons.trash, color: Colors.red[400]),
                   onPressed: () {
                     ref
diff --git a/lib/pages/settings/logs.dart b/lib/pages/settings/logs.dart
new file mode 100644
index 00000000..3bc1319f
--- /dev/null
+++ b/lib/pages/settings/logs.dart
@@ -0,0 +1,139 @@
+import 'dart:async';
+import 'dart:io';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:spotube/collections/spotube_icons.dart';
+import 'package:spotube/components/settings/section_card_with_heading.dart';
+import 'package:spotube/components/shared/page_window_title_bar.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/models/logger.dart';
+
+class LogsPage extends HookWidget {
+  const LogsPage({Key? key}) : super(key: key);
+
+  List<({DateTime? date, String body})> parseLogs(String raw) {
+    return raw
+        .split(
+          "======================================================================",
+        )
+        .map(
+          (line) {
+            DateTime? date;
+            line = line
+                .replaceAll(
+                  "============================== CATCHER LOG ==============================",
+                  "",
+                )
+                .split("\n")
+                .map((l) {
+                  if (l.startsWith("Crash occurred on")) {
+                    date = DateTime.parse(
+                      l.split("Crash occurred on")[1].trim(),
+                    );
+                    return "";
+                  }
+                  return l;
+                })
+                .where((l) => l.replaceAll("\n", "").trim().isNotEmpty)
+                .join("\n");
+
+            return (
+              date: date,
+              body: line,
+            );
+          },
+        )
+        .where((e) => e.date != null && e.body.isNotEmpty)
+        .toList()
+      ..sort((a, b) => b.date!.compareTo(a.date!));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final logs = useState<List<({DateTime? date, String body})>>([]);
+    final rawLogs = useRef<String>("");
+    final path = useRef<File?>(null);
+
+    useEffect(() {
+      final timer = Timer.periodic(const Duration(seconds: 5), (t) async {
+        path.value ??= await getLogsPath();
+        final raw = await path.value!.readAsString();
+        final hasChanged = rawLogs.value != raw;
+        rawLogs.value = raw;
+        if (hasChanged) logs.value = parseLogs(rawLogs.value);
+      });
+
+      return () {
+        timer.cancel();
+      };
+    }, []);
+
+    return Scaffold(
+      appBar: PageWindowTitleBar(
+        title: Text(context.l10n.logs),
+        leading: const BackButton(),
+        actions: [
+          IconButton(
+            icon: const Icon(SpotubeIcons.clipboard),
+            iconSize: 16,
+            onPressed: () async {
+              await Clipboard.setData(ClipboardData(text: rawLogs.value));
+              if (context.mounted) {
+                ScaffoldMessenger.of(context).showSnackBar(
+                  SnackBar(
+                    content: Text(context.l10n.copied_to_clipboard("")),
+                  ),
+                );
+              }
+            },
+          ),
+        ],
+      ),
+      body: SafeArea(
+        child: ListView.builder(
+          itemCount: logs.value.length,
+          itemBuilder: (context, index) {
+            final log = logs.value[index];
+            return Stack(
+              children: [
+                SectionCardWithHeading(
+                  heading: log.date.toString(),
+                  children: [
+                    Padding(
+                      padding: const EdgeInsets.all(12.0),
+                      child: SelectableText(log.body),
+                    ),
+                  ],
+                ),
+                Positioned(
+                  right: 10,
+                  top: 0,
+                  child: IconButton(
+                    icon: const Icon(SpotubeIcons.clipboard),
+                    onPressed: () async {
+                      await Clipboard.setData(
+                        ClipboardData(text: log.body),
+                      );
+                      if (context.mounted) {
+                        ScaffoldMessenger.of(context).showSnackBar(
+                          SnackBar(
+                            content: Text(
+                              context.l10n.copied_to_clipboard(
+                                log.date.toString(),
+                              ),
+                            ),
+                          ),
+                        );
+                      }
+                    },
+                  ),
+                ),
+              ],
+            );
+          },
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/settings/settings.dart b/lib/pages/settings/settings.dart
index b71cf751..9a91cb2c 100644
--- a/lib/pages/settings/settings.dart
+++ b/lib/pages/settings/settings.dart
@@ -1,18 +1,30 @@
 import 'package:auto_size_text/auto_size_text.dart';
+import 'package:collection/collection.dart';
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:platform_ui/platform_ui.dart';
+import 'package:piped_client/piped_client.dart';
+import 'package:spotube/collections/env.dart';
+import 'package:spotube/collections/language_codes.dart';
+
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/settings/color_scheme_picker_dialog.dart';
+import 'package:spotube/components/settings/section_card_with_heading.dart';
 import 'package:spotube/components/shared/adaptive/adaptive_list_tile.dart';
+import 'package:spotube/components/shared/adaptive/adaptive_select_tile.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
-import 'package:spotube/main.dart';
 import 'package:spotube/collections/spotify_markets.dart';
+import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/l10n/l10n.dart';
+import 'package:spotube/models/matched_track.dart';
+import 'package:spotube/provider/download_manager_provider.dart';
 import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/provider/user_preferences_provider.dart';
+import 'package:spotube/provider/piped_instances_provider.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 
 class SettingsPage extends HookConsumerWidget {
@@ -22,27 +34,32 @@ class SettingsPage extends HookConsumerWidget {
   Widget build(BuildContext context, ref) {
     final UserPreferences preferences = ref.watch(userPreferencesProvider);
     final auth = ref.watch(AuthenticationNotifier.provider);
+    final isDownloading =
+        ref.watch(downloadManagerProvider.select((s) => s.isNotEmpty));
+    final theme = Theme.of(context);
+    final mediaQuery = MediaQuery.of(context);
 
-    final pickColorScheme = useCallback((ColorSchemeType schemeType) {
-      return () => showPlatformAlertDialog(context, builder: (context) {
-            return ColorSchemePickerDialog(
-              schemeType: schemeType,
-            );
+    final pickColorScheme = useCallback(() {
+      return () => showDialog(
+          context: context,
+          builder: (context) {
+            return const ColorSchemePickerDialog();
           });
     }, []);
 
     final pickDownloadLocation = useCallback(() async {
       final dirStr = await FilePicker.platform.getDirectoryPath(
-        dialogTitle: "Download Location",
+        dialogTitle: context.l10n.download_location,
       );
       if (dirStr == null) return;
       preferences.setDownloadLocation(dirStr);
     }, [preferences.downloadLocation]);
 
     return SafeArea(
-      child: PlatformScaffold(
+      bottom: false,
+      child: Scaffold(
         appBar: PageWindowTitleBar(
-          center: PlatformText.headline("Settings"),
+          title: Text(context.l10n.settings),
           centerTitle: true,
         ),
         body: Row(
@@ -53,408 +70,476 @@ class SettingsPage extends HookConsumerWidget {
                 constraints: const BoxConstraints(maxWidth: 1366),
                 child: ListView(
                   children: [
-                    PlatformText(
-                      " Account",
-                      style: PlatformTextTheme.of(context)
-                          .headline
-                          ?.copyWith(fontWeight: FontWeight.bold),
-                    ),
-                    if (auth == null)
-                      AdaptiveListTile(
-                        leading: Icon(
-                          SpotubeIcons.login,
-                          color: PlatformTheme.of(context).primaryColor,
-                        ),
-                        title: SizedBox(
-                          height: 50,
-                          width: 200,
-                          child: Align(
-                            alignment: Alignment.centerLeft,
-                            child: AutoSizeText(
-                              "Login with your Spotify account",
-                              maxLines: 1,
-                              style: TextStyle(
-                                color: PlatformTheme.of(context).primaryColor,
-                              ),
+                    SectionCardWithHeading(
+                      heading: context.l10n.account,
+                      children: [
+                        if (auth == null)
+                          AdaptiveListTile(
+                            leading: Icon(
+                              SpotubeIcons.login,
+                              color: theme.colorScheme.primary,
                             ),
-                          ),
-                        ),
-                        trailing: (context, update) => PlatformFilledButton(
-                          onPressed: () {
-                            GoRouter.of(context).push("/login");
-                          },
-                          style: ButtonStyle(
-                            shape: MaterialStateProperty.all(
-                              RoundedRectangleBorder(
-                                borderRadius: BorderRadius.circular(25.0),
-                              ),
-                            ),
-                          ),
-                          child: PlatformText(
-                              "Connect with Spotify".toUpperCase()),
-                        ),
-                      )
-                    else
-                      Builder(builder: (context) {
-                        return PlatformListTile(
-                          leading: const Icon(SpotubeIcons.logout),
-                          title: SizedBox(
-                            height: 50,
-                            width: 180,
-                            child: Align(
+                            title: Align(
                               alignment: Alignment.centerLeft,
                               child: AutoSizeText(
-                                "Log out of this account",
+                                context.l10n.login_with_spotify,
                                 maxLines: 1,
-                                style: PlatformTextTheme.of(context).body,
+                                style: TextStyle(
+                                  color: theme.colorScheme.primary,
+                                ),
                               ),
                             ),
-                          ),
-                          trailing: PlatformFilledButton(
-                            style: ButtonStyle(
-                              backgroundColor:
-                                  MaterialStateProperty.all(Colors.red),
-                              foregroundColor:
-                                  MaterialStateProperty.all(Colors.white),
+                            trailing: (context, update) => FilledButton(
+                              onPressed: () {
+                                GoRouter.of(context).push("/login");
+                              },
+                              style: ButtonStyle(
+                                shape: MaterialStateProperty.all(
+                                  RoundedRectangleBorder(
+                                    borderRadius: BorderRadius.circular(25.0),
+                                  ),
+                                ),
+                              ),
+                              child: Text(
+                                context.l10n.connect_with_spotify.toUpperCase(),
+                              ),
                             ),
-                            onPressed: () async {
-                              ref
-                                  .read(
-                                      AuthenticationNotifier.provider.notifier)
-                                  .logout();
-                              GoRouter.of(context).pop();
-                            },
-                            child: const PlatformText("Logout"),
-                          ),
-                        );
-                      }),
-                    PlatformText(
-                      " Appearance",
-                      style: PlatformTextTheme.of(context)
-                          .headline
-                          ?.copyWith(fontWeight: FontWeight.bold),
+                          )
+                        else
+                          Builder(builder: (context) {
+                            return ListTile(
+                              leading: const Icon(SpotubeIcons.logout),
+                              title: SizedBox(
+                                height: 50,
+                                width: 180,
+                                child: Align(
+                                  alignment: Alignment.centerLeft,
+                                  child: AutoSizeText(
+                                    context.l10n.logout_of_this_account,
+                                    maxLines: 1,
+                                  ),
+                                ),
+                              ),
+                              trailing: FilledButton(
+                                style: ButtonStyle(
+                                  backgroundColor:
+                                      MaterialStateProperty.all(Colors.red),
+                                  foregroundColor:
+                                      MaterialStateProperty.all(Colors.white),
+                                ),
+                                onPressed: () async {
+                                  ref
+                                      .read(AuthenticationNotifier
+                                          .provider.notifier)
+                                      .logout();
+                                  GoRouter.of(context).pop();
+                                },
+                                child: Text(context.l10n.logout),
+                              ),
+                            );
+                          }),
+                      ],
                     ),
-                    AdaptiveListTile(
-                      leading: const Icon(SpotubeIcons.dashboard),
-                      title: const PlatformText("Layout Mode"),
-                      subtitle: const PlatformText(
-                        "Override responsive layout mode settings",
-                      ),
-                      trailing: (context, update) =>
-                          PlatformDropDownMenu<LayoutMode>(
-                        value: preferences.layoutMode,
-                        items: [
-                          PlatformDropDownMenuItem(
-                            value: LayoutMode.adaptive,
-                            child: const PlatformText(
-                              "Adaptive",
+                    SectionCardWithHeading(
+                      heading: context.l10n.language_region,
+                      children: [
+                        AdaptiveSelectTile<Locale>(
+                          value: preferences.locale,
+                          onChanged: (locale) {
+                            if (locale == null) return;
+                            preferences.setLocale(locale);
+                          },
+                          title: Text(context.l10n.language),
+                          secondary: const Icon(SpotubeIcons.language),
+                          options: [
+                            DropdownMenuItem(
+                              value: const Locale("system", "system"),
+                              child: Text(context.l10n.system_default),
                             ),
-                          ),
-                          PlatformDropDownMenuItem(
-                            value: LayoutMode.compact,
-                            child: const PlatformText(
-                              "Compact",
-                            ),
-                          ),
-                          PlatformDropDownMenuItem(
-                            value: LayoutMode.extended,
-                            child: const PlatformText("Extended"),
-                          ),
-                        ],
-                        onChanged: (value) {
-                          if (value != null) {
-                            preferences.setLayoutMode(value);
-                            update?.call(() {});
-                          }
-                        },
-                      ),
-                    ),
-                    AdaptiveListTile(
-                      leading: const Icon(SpotubeIcons.darkMode),
-                      title: const PlatformText("Theme"),
-                      trailing: (context, update) =>
-                          PlatformDropDownMenu<ThemeMode>(
-                        value: preferences.themeMode,
-                        items: [
-                          PlatformDropDownMenuItem(
-                            value: ThemeMode.dark,
-                            child: const PlatformText("Dark"),
-                          ),
-                          PlatformDropDownMenuItem(
-                            value: ThemeMode.light,
-                            child: const PlatformText("Light"),
-                          ),
-                          PlatformDropDownMenuItem(
-                            value: ThemeMode.system,
-                            child: const PlatformText("System"),
-                          ),
-                        ],
-                        onChanged: (value) {
-                          if (value != null) {
-                            preferences.setThemeMode(value);
-                            update?.call(() {});
-                          }
-                        },
-                      ),
-                    ),
-                    AdaptiveListTile(
-                      leading: const Icon(SpotubeIcons.platform),
-                      title: const PlatformText("Mimic Platform"),
-                      trailing: (context, update) =>
-                          DropdownButton<TargetPlatform>(
-                        value: Spotube.of(context).appPlatform,
-                        items: const [
-                          DropdownMenuItem(
-                            value: TargetPlatform.android,
-                            child: PlatformText("Android (Material You)"),
-                          ),
-                          DropdownMenuItem(
-                            value: TargetPlatform.iOS,
-                            child: PlatformText("iOS (Cupertino)"),
-                          ),
-                          DropdownMenuItem(
-                            value: TargetPlatform.macOS,
-                            child: PlatformText("macOS (Aqua)"),
-                          ),
-                          DropdownMenuItem(
-                            value: TargetPlatform.linux,
-                            child: PlatformText("Linux (GTK+Libadwaita)"),
-                          ),
-                          DropdownMenuItem(
-                            value: TargetPlatform.windows,
-                            child: PlatformText("Windows 11 (Fluent UI)"),
-                          ),
-                        ],
-                        onChanged: (value) {
-                          if (value != null) {
-                            Spotube.of(context).changePlatform(value);
-                            update?.call(() {});
-                          }
-                        },
-                      ),
-                    ),
-                    PlatformListTile(
-                      leading: const Icon(SpotubeIcons.palette),
-                      title: const PlatformText("Accent Color"),
-                      contentPadding: const EdgeInsets.symmetric(
-                        horizontal: 15,
-                        vertical: 5,
-                      ),
-                      trailing: ColorTile(
-                        color: preferences.accentColorScheme,
-                        onPressed: pickColorScheme(ColorSchemeType.accent),
-                        isActive: true,
-                      ),
-                      onTap: pickColorScheme(ColorSchemeType.accent),
-                    ),
-                    PlatformListTile(
-                      leading: const Icon(SpotubeIcons.album),
-                      title: const PlatformText("Rotating Album Art"),
-                      trailing: PlatformSwitch(
-                        value: preferences.rotatingAlbumArt,
-                        onChanged: (state) {
-                          preferences.setRotatingAlbumArt(state);
-                        },
-                      ),
-                    ),
-                    PlatformText(
-                      " Playback",
-                      style: PlatformTextTheme.of(context)
-                          .headline
-                          ?.copyWith(fontWeight: FontWeight.bold),
-                    ),
-                    AdaptiveListTile(
-                      leading: const Icon(SpotubeIcons.audioQuality),
-                      title: const PlatformText("Audio Quality"),
-                      trailing: (context, update) =>
-                          PlatformDropDownMenu<AudioQuality>(
-                        value: preferences.audioQuality,
-                        items: [
-                          PlatformDropDownMenuItem(
-                            value: AudioQuality.high,
-                            child: const PlatformText(
-                              "High",
-                            ),
-                          ),
-                          PlatformDropDownMenuItem(
-                            value: AudioQuality.low,
-                            child: const PlatformText("Low"),
-                          ),
-                        ],
-                        onChanged: (value) {
-                          if (value != null) {
-                            preferences.setAudioQuality(value);
-                            update?.call(() {});
-                          }
-                        },
-                      ),
-                    ),
-                    PlatformListTile(
-                      leading: const Icon(SpotubeIcons.download),
-                      title: const PlatformText(
-                        "Pre download and play",
-                      ),
-                      subtitle: const PlatformText(
-                        "Instead of streaming audio, download bytes and play instead (Recommended for higher bandwidth users)",
-                      ),
-                      trailing: PlatformSwitch(
-                        value: preferences.predownload,
-                        onChanged: (state) {
-                          preferences.setPredownload(state);
-                        },
-                      ),
-                    ),
-                    PlatformListTile(
-                      leading: const Icon(SpotubeIcons.fastForward),
-                      title: const PlatformText(
-                        "Skip non-music segments (SponsorBlock)",
-                      ),
-                      trailing: PlatformSwitch(
-                        value: preferences.skipSponsorSegments,
-                        onChanged: (state) {
-                          preferences.setSkipSponsorSegments(state);
-                        },
-                      ),
-                    ),
-                    PlatformListTile(
-                      leading: const Icon(SpotubeIcons.playlistRemove),
-                      title: const PlatformText("Blacklist"),
-                      subtitle: const PlatformText(
-                        "Blacklisted tracks and artists",
-                      ),
-                      onTap: () {
-                        GoRouter.of(context).push("/settings/blacklist");
-                      },
-                      trailing: const Icon(SpotubeIcons.angleRight),
-                    ),
-                    PlatformText(
-                      " Search",
-                      style: PlatformTextTheme.of(context)
-                          .headline
-                          ?.copyWith(fontWeight: FontWeight.bold),
-                    ),
-                    AdaptiveListTile(
-                      leading: const Icon(SpotubeIcons.shoppingBag),
-                      title: const PlatformText("Market Place"),
-                      subtitle: PlatformText.caption(
-                        "Recommendation Country",
-                      ),
-                      trailing: (context, update) => ConstrainedBox(
-                        constraints: const BoxConstraints(maxWidth: 350),
-                        child: PlatformDropDownMenu(
+                            for (final locale in L10n.all)
+                              DropdownMenuItem(
+                                value: locale,
+                                child: Builder(builder: (context) {
+                                  final isoCodeName =
+                                      LanguageLocals.getDisplayLanguage(
+                                    locale.languageCode,
+                                  );
+                                  return Text(
+                                    "${isoCodeName.name} (${isoCodeName.nativeName})",
+                                  );
+                                }),
+                              ),
+                          ],
+                        ),
+                        AdaptiveSelectTile<String>(
+                          breakLayout: mediaQuery.lgAndUp,
+                          secondary: const Icon(SpotubeIcons.shoppingBag),
+                          title: Text(context.l10n.market_place_region),
+                          subtitle: Text(context.l10n.recommendation_country),
                           value: preferences.recommendationMarket,
-                          items: spotifyMarkets
+                          onChanged: (value) {
+                            if (value == null) return;
+                            preferences.setRecommendationMarket(value);
+                          },
+                          options: spotifyMarkets
                               .map(
-                                (country) => (PlatformDropDownMenuItem(
-                                  value: country.first,
-                                  child: PlatformText(country.last),
-                                )),
+                                (country) => DropdownMenuItem(
+                                  value: country.$1,
+                                  child: Text(country.$2),
+                                ),
                               )
                               .toList(),
+                        ),
+                      ],
+                    ),
+                    SectionCardWithHeading(
+                      heading: context.l10n.appearance,
+                      children: [
+                        AdaptiveSelectTile<LayoutMode>(
+                          secondary: const Icon(SpotubeIcons.dashboard),
+                          title: Text(context.l10n.layout_mode),
+                          subtitle: Text(context.l10n.override_layout_settings),
+                          value: preferences.layoutMode,
+                          onChanged: (value) {
+                            if (value != null) {
+                              preferences.setLayoutMode(value);
+                            }
+                          },
+                          options: [
+                            DropdownMenuItem(
+                              value: LayoutMode.adaptive,
+                              child: Text(context.l10n.adaptive),
+                            ),
+                            DropdownMenuItem(
+                              value: LayoutMode.compact,
+                              child: Text(context.l10n.compact),
+                            ),
+                            DropdownMenuItem(
+                              value: LayoutMode.extended,
+                              child: Text(context.l10n.extended),
+                            ),
+                          ],
+                        ),
+                        AdaptiveSelectTile<ThemeMode>(
+                          secondary: const Icon(SpotubeIcons.darkMode),
+                          title: Text(context.l10n.theme),
+                          value: preferences.themeMode,
+                          options: [
+                            DropdownMenuItem(
+                              value: ThemeMode.dark,
+                              child: Text(context.l10n.dark),
+                            ),
+                            DropdownMenuItem(
+                              value: ThemeMode.light,
+                              child: Text(context.l10n.light),
+                            ),
+                            DropdownMenuItem(
+                              value: ThemeMode.system,
+                              child: Text(context.l10n.system),
+                            ),
+                          ],
+                          onChanged: (value) {
+                            if (value != null) {
+                              preferences.setThemeMode(value);
+                            }
+                          },
+                        ),
+                        ListTile(
+                          leading: const Icon(SpotubeIcons.palette),
+                          title: Text(context.l10n.accent_color),
+                          contentPadding: const EdgeInsets.symmetric(
+                            horizontal: 15,
+                            vertical: 5,
+                          ),
+                          trailing: ColorTile.compact(
+                            color: preferences.accentColorScheme,
+                            onPressed: pickColorScheme(),
+                            isActive: true,
+                          ),
+                          onTap: pickColorScheme(),
+                        ),
+                        SwitchListTile(
+                          secondary: const Icon(SpotubeIcons.colorSync),
+                          title: Text(context.l10n.sync_album_color),
+                          subtitle:
+                              Text(context.l10n.sync_album_color_description),
+                          value: preferences.albumColorSync,
+                          onChanged: preferences.setAlbumColorSync,
+                        ),
+                      ],
+                    ),
+                    SectionCardWithHeading(
+                      heading: context.l10n.playback,
+                      children: [
+                        AdaptiveSelectTile<AudioQuality>(
+                          secondary: const Icon(SpotubeIcons.audioQuality),
+                          title: Text(context.l10n.audio_quality),
+                          value: preferences.audioQuality,
+                          options: [
+                            DropdownMenuItem(
+                              value: AudioQuality.high,
+                              child: Text(context.l10n.high),
+                            ),
+                            DropdownMenuItem(
+                              value: AudioQuality.low,
+                              child: Text(context.l10n.low),
+                            ),
+                          ],
+                          onChanged: (value) {
+                            if (value != null) {
+                              preferences.setAudioQuality(value);
+                            }
+                          },
+                        ),
+                        AdaptiveSelectTile<YoutubeApiType>(
+                          secondary: const Icon(SpotubeIcons.youtube),
+                          title: Text(context.l10n.youtube_api_type),
+                          value: preferences.youtubeApiType,
+                          options: YoutubeApiType.values
+                              .map((e) => DropdownMenuItem(
+                                    value: e,
+                                    child: Text(e.label),
+                                  ))
+                              .toList(),
                           onChanged: (value) {
                             if (value == null) return;
-                            preferences.setRecommendationMarket(
-                              value as String,
-                            );
-                            update?.call(() {});
+                            preferences.setYoutubeApiType(value);
                           },
                         ),
+                        AnimatedSwitcher(
+                          duration: const Duration(milliseconds: 300),
+                          child: preferences.youtubeApiType ==
+                                  YoutubeApiType.youtube
+                              ? const SizedBox.shrink()
+                              : Consumer(builder: (context, ref, child) {
+                                  final instanceList =
+                                      ref.watch(pipedInstancesFutureProvider);
+
+                                  return instanceList.when(
+                                    data: (data) {
+                                      return AdaptiveSelectTile<String>(
+                                        secondary:
+                                            const Icon(SpotubeIcons.piped),
+                                        title:
+                                            Text(context.l10n.piped_instance),
+                                        subtitle: Text(
+                                            context.l10n.piped_description),
+                                        value: preferences.pipedInstance,
+                                        showValueWhenUnfolded: false,
+                                        options: data
+                                            .sortedBy((e) => e.name)
+                                            .map(
+                                              (e) => DropdownMenuItem(
+                                                value: e.apiUrl,
+                                                child: Text(
+                                                  "${e.name}\n"
+                                                  "${e.locations.map(countryCodeToEmoji).join(" ")}",
+                                                ),
+                                              ),
+                                            )
+                                            .toList(),
+                                        onChanged: (value) {
+                                          if (value != null) {
+                                            preferences.setPipedInstance(value);
+                                          }
+                                        },
+                                      );
+                                    },
+                                    loading: () => const Center(
+                                      child: CircularProgressIndicator(),
+                                    ),
+                                    error: (error, stackTrace) =>
+                                        Text(error.toString()),
+                                  );
+                                }),
+                        ),
+                        AnimatedSwitcher(
+                          duration: const Duration(milliseconds: 300),
+                          child: preferences.youtubeApiType ==
+                                  YoutubeApiType.youtube
+                              ? const SizedBox.shrink()
+                              : AdaptiveSelectTile<SearchMode>(
+                                  secondary: const Icon(SpotubeIcons.search),
+                                  title: Text(context.l10n.search_mode),
+                                  value: preferences.searchMode,
+                                  options: SearchMode.values
+                                      .map((e) => DropdownMenuItem(
+                                            value: e,
+                                            child: Text(e.label),
+                                          ))
+                                      .toList(),
+                                  onChanged: (value) {
+                                    if (value == null) return;
+                                    preferences.setSearchMode(value);
+                                  },
+                                ),
+                        ),
+                        AnimatedSwitcher(
+                          duration: const Duration(milliseconds: 300),
+                          child: preferences.searchMode ==
+                                      SearchMode.youtubeMusic &&
+                                  preferences.youtubeApiType ==
+                                      YoutubeApiType.piped
+                              ? const SizedBox.shrink()
+                              : SwitchListTile(
+                                  secondary: const Icon(SpotubeIcons.skip),
+                                  title: Text(context.l10n.skip_non_music),
+                                  value: preferences.skipNonMusic,
+                                  onChanged: (state) {
+                                    preferences.setSkipNonMusic(state);
+                                  },
+                                ),
+                        ),
+                        ListTile(
+                          leading: const Icon(SpotubeIcons.playlistRemove),
+                          title: Text(context.l10n.blacklist),
+                          subtitle: Text(context.l10n.blacklist_description),
+                          onTap: () {
+                            GoRouter.of(context).push("/settings/blacklist");
+                          },
+                          trailing: const Icon(SpotubeIcons.angleRight),
+                        ),
+                      ],
+                    ),
+                    SectionCardWithHeading(
+                      heading: context.l10n.downloads,
+                      children: [
+                        Tooltip(
+                          message: isDownloading
+                              ? context.l10n.wait_for_download_to_finish
+                              : "",
+                          child: ListTile(
+                            leading: const Icon(SpotubeIcons.download),
+                            title: Text(context.l10n.download_location),
+                            subtitle: Text(preferences.downloadLocation),
+                            trailing: FilledButton(
+                              onPressed:
+                                  isDownloading ? null : pickDownloadLocation,
+                              child: const Icon(SpotubeIcons.folder),
+                            ),
+                            onTap: isDownloading ? null : pickDownloadLocation,
+                          ),
+                        ),
+                        SwitchListTile(
+                          secondary: const Icon(SpotubeIcons.lyrics),
+                          title: Text(context.l10n.download_lyrics),
+                          value: preferences.saveTrackLyrics,
+                          onChanged: (state) {
+                            preferences.setSaveTrackLyrics(state);
+                          },
+                        ),
+                      ],
+                    ),
+                    if (DesktopTools.platform.isDesktop)
+                      SectionCardWithHeading(
+                        heading: context.l10n.desktop,
+                        children: [
+                          AdaptiveSelectTile<CloseBehavior>(
+                            secondary: const Icon(SpotubeIcons.close),
+                            title: Text(context.l10n.close_behavior),
+                            value: preferences.closeBehavior,
+                            options: [
+                              DropdownMenuItem(
+                                value: CloseBehavior.close,
+                                child: Text(context.l10n.close),
+                              ),
+                              DropdownMenuItem(
+                                value: CloseBehavior.minimizeToTray,
+                                child: Text(context.l10n.minimize_to_tray),
+                              ),
+                            ],
+                            onChanged: (value) {
+                              if (value != null) {
+                                preferences.setCloseBehavior(value);
+                              }
+                            },
+                          ),
+                          SwitchListTile(
+                            secondary: const Icon(SpotubeIcons.tray),
+                            title: Text(context.l10n.show_tray_icon),
+                            value: preferences.showSystemTrayIcon,
+                            onChanged: preferences.setShowSystemTrayIcon,
+                          ),
+                        ],
                       ),
+                    SectionCardWithHeading(
+                      heading: context.l10n.developers,
+                      children: [
+                        ListTile(
+                          leading: const Icon(SpotubeIcons.logs),
+                          title: Text(context.l10n.logs),
+                          trailing: const Icon(SpotubeIcons.angleRight),
+                          onTap: () {
+                            GoRouter.of(context).push("/settings/logs");
+                          },
+                        )
+                      ],
                     ),
-                    PlatformText(
-                      " Downloads",
-                      style: PlatformTextTheme.of(context)
-                          .headline
-                          ?.copyWith(fontWeight: FontWeight.bold),
-                    ),
-                    PlatformListTile(
-                      leading: const Icon(SpotubeIcons.download),
-                      title: const PlatformText("Download Location"),
-                      subtitle: PlatformText(preferences.downloadLocation),
-                      trailing: PlatformFilledButton(
-                        onPressed: pickDownloadLocation,
-                        child: const Icon(SpotubeIcons.folder),
-                      ),
-                      onTap: pickDownloadLocation,
-                    ),
-                    PlatformListTile(
-                      leading: const Icon(SpotubeIcons.lyrics),
-                      title: const PlatformText(
-                          "Download lyrics along with the Track"),
-                      trailing: PlatformSwitch(
-                        value: preferences.saveTrackLyrics,
-                        onChanged: (state) {
-                          preferences.setSaveTrackLyrics(state);
-                        },
-                      ),
-                    ),
-                    PlatformText(
-                      " About",
-                      style: PlatformTextTheme.of(context)
-                          .headline
-                          ?.copyWith(fontWeight: FontWeight.bold),
-                    ),
-                    AdaptiveListTile(
-                      leading: const Icon(
-                        SpotubeIcons.heart,
-                        color: Colors.pink,
-                      ),
-                      title: const SizedBox(
-                        height: 50,
-                        width: 200,
-                        child: Align(
-                          alignment: Alignment.centerLeft,
-                          child: AutoSizeText(
-                            "We know you Love Spotube",
-                            maxLines: 1,
-                            style: TextStyle(
-                              color: Colors.pink,
-                              fontWeight: FontWeight.bold,
+                    SectionCardWithHeading(
+                      heading: context.l10n.about,
+                      children: [
+                        AdaptiveListTile(
+                          leading: const Icon(
+                            SpotubeIcons.heart,
+                            color: Colors.pink,
+                          ),
+                          title: SizedBox(
+                            height: 50,
+                            width: 200,
+                            child: Align(
+                              alignment: Alignment.centerLeft,
+                              child: AutoSizeText(
+                                context.l10n.u_love_spotube,
+                                maxLines: 1,
+                                style: const TextStyle(
+                                  color: Colors.pink,
+                                  fontWeight: FontWeight.bold,
+                                ),
+                              ),
+                            ),
+                          ),
+                          trailing: (context, update) => FilledButton(
+                            style: ButtonStyle(
+                              backgroundColor:
+                                  MaterialStatePropertyAll(Colors.red[100]),
+                              foregroundColor: const MaterialStatePropertyAll(
+                                  Colors.pinkAccent),
+                              padding: const MaterialStatePropertyAll(
+                                  EdgeInsets.all(15)),
+                            ),
+                            onPressed: () {
+                              launchUrlString(
+                                "https://opencollective.com/spotube",
+                                mode: LaunchMode.externalApplication,
+                              );
+                            },
+                            child: Row(
+                              mainAxisSize: MainAxisSize.min,
+                              children: [
+                                const Icon(SpotubeIcons.heart),
+                                const SizedBox(width: 5),
+                                Text(context.l10n.please_sponsor),
+                              ],
                             ),
                           ),
                         ),
-                      ),
-                      trailing: (context, update) => PlatformFilledButton(
-                        style: ButtonStyle(
-                          backgroundColor:
-                              MaterialStatePropertyAll(Colors.red[100]),
-                          foregroundColor:
-                              const MaterialStatePropertyAll(Colors.pinkAccent),
-                          padding: const MaterialStatePropertyAll(
-                              EdgeInsets.all(15)),
-                        ),
-                        onPressed: () {
-                          launchUrlString(
-                            "https://opencollective.com/spotube",
-                            mode: LaunchMode.externalApplication,
-                          );
-                        },
-                        child: Row(
-                          mainAxisSize: MainAxisSize.min,
-                          children: const [
-                            Icon(SpotubeIcons.heart),
-                            SizedBox(width: 5),
-                            PlatformText("Please Sponsor/Donate"),
-                          ],
-                        ),
-                      ),
-                    ),
-                    PlatformListTile(
-                      leading: const Icon(SpotubeIcons.update),
-                      title: const PlatformText("Check for Update"),
-                      trailing: PlatformSwitch(
-                        value: preferences.checkUpdate,
-                        onChanged: (checked) =>
-                            preferences.setCheckUpdate(checked),
-                      ),
-                    ),
-                    PlatformListTile(
-                      leading: const Icon(SpotubeIcons.info),
-                      title: const PlatformText("About Spotube"),
-                      trailing: const Icon(SpotubeIcons.angleRight),
-                      onTap: () {
-                        GoRouter.of(context).push("/settings/about");
-                      },
+                        if (Env.enableUpdateChecker)
+                          SwitchListTile(
+                            secondary: const Icon(SpotubeIcons.update),
+                            title: Text(context.l10n.check_for_updates),
+                            value: preferences.checkUpdate,
+                            onChanged: (checked) =>
+                                preferences.setCheckUpdate(checked),
+                          ),
+                        ListTile(
+                          leading: const Icon(SpotubeIcons.info),
+                          title: Text(context.l10n.about_spotube),
+                          trailing: const Icon(SpotubeIcons.angleRight),
+                          onTap: () {
+                            GoRouter.of(context).push("/settings/about");
+                          },
+                        )
+                      ],
                     ),
                   ],
                 ),
diff --git a/lib/provider/blacklist_provider.dart b/lib/provider/blacklist_provider.dart
index 0533b196..363d4b4c 100644
--- a/lib/provider/blacklist_provider.dart
+++ b/lib/provider/blacklist_provider.dart
@@ -1,3 +1,4 @@
+import 'package:collection/collection.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/models/current_playlist.dart';
@@ -55,18 +56,23 @@ class BlackListNotifier
     state = state.difference({element});
   }
 
+  bool contains(TrackSimple track) {
+    final containsTrack =
+        state.contains(BlacklistedElement.track(track.id!, track.name!));
+
+    final containsTrackArtists = track.artists?.any(
+          (artist) => state.contains(
+            BlacklistedElement.artist(artist.id!, artist.name!),
+          ),
+        ) ??
+        false;
+
+    return containsTrack || containsTrackArtists;
+  }
+
+  /// Filters the non blacklisted tracks from the given [tracks]
   Iterable<TrackSimple> filter(Iterable<TrackSimple> tracks) {
-    return tracks.where(
-      (track) {
-        return !state
-                .contains(BlacklistedElement.track(track.id!, track.name!)) &&
-            !(track.artists ?? []).any(
-              (artist) => state.contains(
-                BlacklistedElement.artist(artist.id!, artist.name!),
-              ),
-            );
-      },
-    ).toList();
+    return tracks.whereNot(contains).toList();
   }
 
   CurrentPlaylist filterPlaylist(CurrentPlaylist playlist) {
diff --git a/lib/provider/custom_spotify_endpoint_provider.dart b/lib/provider/custom_spotify_endpoint_provider.dart
new file mode 100644
index 00000000..4857a358
--- /dev/null
+++ b/lib/provider/custom_spotify_endpoint_provider.dart
@@ -0,0 +1,8 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotube/provider/authentication_provider.dart';
+import 'package:spotube/services/custom_spotify_endpoints/spotify_endpoints.dart';
+
+final customSpotifyEndpointProvider = Provider<CustomSpotifyEndpoints>((ref) {
+  final auth = ref.watch(AuthenticationNotifier.provider);
+  return CustomSpotifyEndpoints(auth?.accessToken ?? "");
+});
diff --git a/lib/provider/download_manager_provider.dart b/lib/provider/download_manager_provider.dart
new file mode 100644
index 00000000..a568c7a4
--- /dev/null
+++ b/lib/provider/download_manager_provider.dart
@@ -0,0 +1,193 @@
+import 'dart:async';
+import 'dart:io';
+
+import 'package:background_downloader/background_downloader.dart';
+import 'package:collection/collection.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:http/http.dart';
+import 'package:metadata_god/metadata_god.dart';
+import 'package:path/path.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/collections/routes.dart';
+import 'package:spotube/components/shared/dialogs/replace_downloaded_dialog.dart';
+import 'package:spotube/models/spotube_track.dart';
+
+import 'package:spotube/provider/user_preferences_provider.dart';
+import 'package:spotube/provider/youtube_provider.dart';
+import 'package:spotube/services/youtube/youtube.dart';
+import 'package:spotube/utils/type_conversion_utils.dart';
+
+class DownloadManagerProvider extends StateNotifier<List<SpotubeTrack>> {
+  final Ref ref;
+
+  final StreamController<TaskProgressUpdate> activeDownloadProgress;
+  final StreamController<Task> failedDownloads;
+  Track? _activeItem;
+
+  FutureOr<bool> Function(Track)? onFileExists;
+
+  DownloadManagerProvider(this.ref)
+      : activeDownloadProgress = StreamController.broadcast(),
+        failedDownloads = StreamController.broadcast(),
+        super([]) {
+    FileDownloader().registerCallbacks(
+      group: FileDownloader.defaultGroup,
+      taskNotificationTapCallback: (task, notificationType) {
+        router.go("/library");
+      },
+      taskStatusCallback: (update) async {
+        if (update.status == TaskStatus.running) {
+          _activeItem =
+              state.firstWhereOrNull((track) => track.id == update.task.taskId);
+          state = state.toList();
+        }
+
+        if (update.status == TaskStatus.failed ||
+            update.status == TaskStatus.notFound) {
+          failedDownloads.add(update.task);
+        }
+
+        if (update.status == TaskStatus.complete) {
+          final track =
+              state.firstWhere((element) => element.id == update.task.taskId);
+
+          // resetting the replace downloaded file state on queue completion
+          if (state.last == track) {
+            ref.read(replaceDownloadedFileState.notifier).state = null;
+          }
+
+          state = state
+              .where((element) => element.id != update.task.taskId)
+              .toList();
+
+          final imageUri = TypeConversionUtils.image_X_UrlString(
+            track.album?.images ?? [],
+            placeholder: ImagePlaceholder.online,
+          );
+          final response = await get(Uri.parse(imageUri));
+
+          final tempFile = File(await update.task.filePath());
+
+          final file = tempFile.copySync(_getPathForTrack(track));
+
+          await tempFile.delete();
+
+          await MetadataGod.writeMetadata(
+            file: file.path,
+            metadata: Metadata(
+              title: track.name,
+              artist: track.artists?.map((a) => a.name).join(", "),
+              album: track.album?.name,
+              albumArtist: track.artists?.map((a) => a.name).join(", "),
+              year: track.album?.releaseDate != null
+                  ? int.tryParse(track.album!.releaseDate!)
+                  : null,
+              trackNumber: track.trackNumber,
+              discNumber: track.discNumber,
+              durationMs: track.durationMs?.toDouble(),
+              fileSize: file.lengthSync(),
+              trackTotal: track.album?.tracks?.length,
+              picture: response.headers['content-type'] != null
+                  ? Picture(
+                      data: response.bodyBytes,
+                      mimeType: response.headers['content-type']!,
+                    )
+                  : null,
+            ),
+          );
+        }
+      },
+      taskProgressCallback: (update) {
+        activeDownloadProgress.add(update);
+      },
+    );
+    FileDownloader().trackTasks(markDownloadedComplete: true);
+  }
+
+  UserPreferences get preferences => ref.read(userPreferencesProvider);
+  YoutubeEndpoints get youtube => ref.read(youtubeProvider);
+
+  int get totalDownloads => state.length;
+  List<Track> get items => state;
+  Track? get activeItem => _activeItem;
+
+  String _getPathForTrack(Track track) => join(
+        preferences.downloadLocation,
+        "${track.name} - ${track.artists?.map((a) => a.name).join(", ")}.m4a",
+      );
+
+  Future<Task> _ensureSpotubeTrack(Track track) async {
+    if (state.any((element) => element.id == track.id)) {
+      final task = await FileDownloader().taskForId(track.id!);
+      if (task != null) {
+        return task;
+      }
+      // this makes sure we already have the fetched track
+      track = state.firstWhere((element) => element.id == track.id);
+      state.removeWhere((element) => element.id == track.id);
+    }
+    final spotubeTrack = track is SpotubeTrack
+        ? track
+        : await SpotubeTrack.fetchFromTrack(
+            track,
+            youtube,
+          );
+    state = [...state, spotubeTrack];
+    final task = DownloadTask(
+      url: spotubeTrack.ytUri,
+      baseDirectory: BaseDirectory.applicationSupport,
+      taskId: spotubeTrack.id!,
+      updates: Updates.statusAndProgress,
+    );
+    return task;
+  }
+
+  Future<Task?> enqueue(Track track) async {
+    final replaceFileGlobal = ref.read(replaceDownloadedFileState);
+    final file = File(_getPathForTrack(track));
+    if (file.existsSync() &&
+        (replaceFileGlobal ?? await onFileExists?.call(track)) != true) {
+      if (state.isEmpty) {
+        ref.read(replaceDownloadedFileState.notifier).state = null;
+      }
+      return null;
+    }
+
+    final task = await _ensureSpotubeTrack(track);
+
+    await FileDownloader().enqueue(task);
+    return task;
+  }
+
+  Future<List<Task>> enqueueAll(List<Track> tracks) async {
+    final tasks = await Future.wait(tracks.mapIndexed((i, e) {
+      if (i != 0) {
+        /// One second delay between each download to avoid
+        /// clogging the Piped server with too many requests
+        return Future.delayed(const Duration(seconds: 1), () => enqueue(e));
+      }
+      return enqueue(e);
+    }));
+
+    if (tasks.isEmpty) {
+      ref.read(replaceDownloadedFileState.notifier).state = null;
+    }
+
+    return tasks.whereType<Task>().toList();
+  }
+
+  Future<void> cancel(Track track) async {
+    await FileDownloader().cancelTaskWithId(track.id!);
+    state = state.where((element) => element.id != track.id).toList();
+  }
+
+  Future<void> cancelAll() async {
+    (await FileDownloader().reset());
+    state = [];
+  }
+}
+
+final downloadManagerProvider =
+    StateNotifierProvider<DownloadManagerProvider, List<Track>>(
+  DownloadManagerProvider.new,
+);
diff --git a/lib/provider/downloader_provider.dart b/lib/provider/downloader_provider.dart
deleted file mode 100644
index c12ec644..00000000
--- a/lib/provider/downloader_provider.dart
+++ /dev/null
@@ -1,176 +0,0 @@
-import 'dart:async';
-import 'dart:io';
-
-import 'package:flutter/foundation.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:http/http.dart';
-import 'package:metadata_god/metadata_god.dart';
-import 'package:queue/queue.dart';
-import 'package:path/path.dart' as path;
-import 'package:spotify/spotify.dart' hide Image, Queue;
-import 'package:spotube/components/shared/dialogs/replace_downloaded_dialog.dart';
-
-import 'package:spotube/models/logger.dart';
-import 'package:spotube/models/spotube_track.dart';
-import 'package:spotube/provider/user_preferences_provider.dart';
-import 'package:spotube/services/youtube.dart';
-import 'package:spotube/utils/type_conversion_utils.dart';
-import 'package:youtube_explode_dart/youtube_explode_dart.dart' hide Comment;
-
-Queue queueInstance = Queue(delay: const Duration(seconds: 5));
-Queue grabberQueue = Queue(delay: const Duration(seconds: 5));
-
-class Downloader with ChangeNotifier {
-  Ref ref;
-  Queue _queue;
-  YoutubeExplode yt;
-  String downloadPath;
-  FutureOr<bool> Function(SpotubeTrack track)? onFileExists;
-  Downloader(
-    this.ref,
-    this._queue, {
-    required this.downloadPath,
-    required this.yt,
-    this.onFileExists,
-  });
-
-  int currentlyRunning = 0;
-  // ignore: prefer_collection_literals
-  Set<Track> inQueue = Set();
-
-  final logger = getLogger(Downloader);
-
-  // Playback get _playback => ref.read(playbackProvider);
-
-  void addToQueue(Track baseTrack) async {
-    if (kIsWeb) return;
-    if (inQueue.any((t) => t.id == baseTrack.id!)) return;
-    inQueue.add(baseTrack);
-    currentlyRunning++;
-    notifyListeners();
-
-    // Using android Audio Focus to keep the app run in background
-    // _playback.mobileAudioService?.session?.setActive(true);
-    grabberQueue.add(() async {
-      final track = await SpotubeTrack.fetchFromTrack(
-        baseTrack,
-        ref.read(userPreferencesProvider),
-      );
-
-      _queue.add(() async {
-        final cleanTitle = track.ytTrack.title.replaceAll(
-          RegExp(r'[/\\?%*:|"<>]'),
-          "",
-        );
-        final filename = '$cleanTitle.m4a';
-        final file = File(path.join(downloadPath, filename));
-        try {
-          final replaceFileGlobal = ref.read(replaceDownloadedFileState);
-          logger.v("[addToQueue] Download starting for ${file.path}");
-          if (file.existsSync() &&
-              (replaceFileGlobal ?? await onFileExists?.call(track)) != true) {
-            return;
-          }
-          file.createSync(recursive: true);
-          StreamManifest manifest =
-              await yt.videos.streamsClient.getManifest(track.ytTrack.url);
-          logger.v(
-            "[addToQueue] Getting download information for ${file.path}",
-          );
-          final audioStream = yt.videos.streamsClient
-              .get(
-                manifest.audioOnly
-                    .where(
-                      (audio) => audio.codec.mimeType == "audio/mp4",
-                    )
-                    .withHighestBitrate(),
-              )
-              .asBroadcastStream();
-
-          logger.v(
-            "[addToQueue] ${file.path} download started",
-          );
-
-          IOSink outputFileStream = file.openWrite();
-          await audioStream.pipe(outputFileStream);
-          await outputFileStream.flush();
-          logger.v(
-            "[addToQueue] Download of ${file.path} is done successfully",
-          );
-
-          logger.v(
-            "[addToQueue] Writing metadata to ${file.path}",
-          );
-          final imageUri = TypeConversionUtils.image_X_UrlString(
-            track.album?.images ?? [],
-            placeholder: ImagePlaceholder.online,
-          );
-          final response = await get(Uri.parse(imageUri));
-
-          await MetadataGod.writeMetadata(
-            file: file.path,
-            metadata: Metadata(
-              title: track.name,
-              artist: track.artists?.map((a) => a.name).join(", "),
-              album: track.album?.name,
-              albumArtist: track.artists?.map((a) => a.name).join(", "),
-              year: track.album?.releaseDate != null
-                  ? int.tryParse(track.album!.releaseDate!)
-                  : null,
-              trackNumber: track.trackNumber,
-              discNumber: track.discNumber,
-              durationMs: track.durationMs?.toDouble(),
-              fileSize: file.lengthSync(),
-              trackTotal: track.album?.tracks?.length,
-              picture: response.headers['content-type'] != null
-                  ? Picture(
-                      data: response.bodyBytes,
-                      mimeType: response.headers['content-type']!,
-                    )
-                  : null,
-            ),
-          );
-          logger.v(
-            "[addToQueue] Writing metadata to ${file.path} is successful",
-          );
-        } catch (e) {
-          logger.v("[addToQueue] Failed download of ${file.path}", e);
-          rethrow;
-        } finally {
-          currentlyRunning--;
-          inQueue.removeWhere((t) => t.id == track.id);
-          // if (currentlyRunning == 0 && !PlaylistProvider.isPlaying) {
-          // _playback.mobileAudioService?.session?.setActive(false);
-          // }
-          notifyListeners();
-        }
-      });
-    });
-  }
-
-  cancelAll() {
-    grabberQueue.cancel();
-    grabberQueue = Queue();
-    inQueue.clear();
-    currentlyRunning = 0;
-    _queue.cancel();
-    queueInstance = Queue();
-    _queue = queueInstance;
-    notifyListeners();
-  }
-}
-
-final downloaderProvider = ChangeNotifierProvider(
-  (ref) {
-    return Downloader(
-      ref,
-      queueInstance,
-      yt: youtube,
-      downloadPath: ref.watch(
-        userPreferencesProvider.select(
-          (s) => s.downloadLocation,
-        ),
-      ),
-    );
-  },
-);
diff --git a/lib/provider/palette_provider.dart b/lib/provider/palette_provider.dart
new file mode 100644
index 00000000..8f0e9e29
--- /dev/null
+++ b/lib/provider/palette_provider.dart
@@ -0,0 +1,4 @@
+import 'package:palette_generator/palette_generator.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+final paletteProvider = StateProvider<PaletteGenerator?>((ref) => null);
diff --git a/lib/provider/piped_instances_provider.dart b/lib/provider/piped_instances_provider.dart
new file mode 100644
index 00000000..290ad2c4
--- /dev/null
+++ b/lib/provider/piped_instances_provider.dart
@@ -0,0 +1,10 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:piped_client/piped_client.dart';
+import 'package:spotube/provider/youtube_provider.dart';
+
+final pipedInstancesFutureProvider = FutureProvider<List<PipedInstance>>(
+  (ref) async {
+    final youtube = ref.watch(youtubeProvider);
+    return await youtube.piped?.instanceList() ?? [];
+  },
+);
diff --git a/lib/provider/playlist_queue_provider.dart b/lib/provider/playlist_queue_provider.dart
deleted file mode 100644
index 013406f9..00000000
--- a/lib/provider/playlist_queue_provider.dart
+++ /dev/null
@@ -1,552 +0,0 @@
-import 'package:audio_service/audio_service.dart';
-import 'package:audioplayers/audioplayers.dart';
-import 'package:flutter_cache_manager/flutter_cache_manager.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:spotify/spotify.dart';
-import 'package:spotube/models/local_track.dart';
-import 'package:spotube/models/spotube_track.dart';
-import 'package:spotube/extensions/track.dart';
-import 'package:spotube/provider/blacklist_provider.dart';
-import 'package:spotube/provider/user_preferences_provider.dart';
-import 'package:spotube/services/audio_player.dart';
-import 'package:spotube/services/linux_audio_service.dart';
-import 'package:spotube/services/mobile_audio_service.dart';
-import 'package:spotube/utils/persisted_state_notifier.dart';
-import 'package:spotube/utils/platform.dart';
-import 'package:spotube/utils/type_conversion_utils.dart';
-import 'package:youtube_explode_dart/youtube_explode_dart.dart' hide Playlist;
-import 'package:collection/collection.dart';
-
-class PlaylistQueue {
-  final Set<Track> tracks;
-  final Set<Track> tempTracks;
-  final bool loop;
-  final int active;
-
-  Track get activeTrack => tracks.elementAt(active);
-
-  static Future<PlaylistQueue> fromJson(
-      Map<String, dynamic> json, UserPreferences preferences) async {
-    final List? tracks = json['tracks'];
-    final List? tempTracks = json['tempTracks'];
-    return PlaylistQueue(
-      Set.from(
-        await Future.wait(
-          tracks?.mapIndexed(
-                (i, e) async {
-                  final jsonTrack =
-                      Map.castFrom<dynamic, dynamic, String, dynamic>(e);
-
-                  if (e["path"] != null) {
-                    return LocalTrack.fromJson(jsonTrack);
-                  } else if (i == json["active"] && !json.containsKey("path")) {
-                    return await SpotubeTrack.fetchFromTrack(
-                      Track.fromJson(jsonTrack),
-                      preferences,
-                    );
-                  } else {
-                    return Track.fromJson(jsonTrack);
-                  }
-                },
-              ) ??
-              [],
-        ),
-      ),
-      active: json['active'],
-      tempTracks: Set.from(
-        await Future.wait(
-          tempTracks?.mapIndexed(
-                (i, e) async {
-                  final jsonTrack =
-                      Map.castFrom<dynamic, dynamic, String, dynamic>(e);
-
-                  if (e["path"] != null) {
-                    return LocalTrack.fromJson(jsonTrack);
-                  } else if (i == json["active"] && !json.containsKey("path")) {
-                    return await SpotubeTrack.fetchFromTrack(
-                      Track.fromJson(jsonTrack),
-                      preferences,
-                    );
-                  } else {
-                    return Track.fromJson(jsonTrack);
-                  }
-                },
-              ) ??
-              [],
-        ),
-      ),
-    );
-  }
-
-  Map<String, dynamic> toJson() {
-    return {
-      'tracks': tracks.map(
-        (e) {
-          if (e is SpotubeTrack) {
-            return e.toJson();
-          } else if (e is LocalTrack) {
-            return e.toJson();
-          } else {
-            return e.toJson();
-          }
-        },
-      ).toList(),
-      'active': active,
-      'tempTracks': tempTracks.map(
-        (e) {
-          if (e is SpotubeTrack) {
-            return e.toJson();
-          } else if (e is LocalTrack) {
-            return e.toJson();
-          } else {
-            return e.toJson();
-          }
-        },
-      ).toList(),
-    };
-  }
-
-  bool get isLoading =>
-      activeTrack is LocalTrack ? false : activeTrack is! SpotubeTrack;
-  bool get isShuffled => tempTracks.isNotEmpty;
-  bool get isLooping => loop;
-
-  PlaylistQueue(
-    this.tracks, {
-    required this.tempTracks,
-    this.active = 0,
-    this.loop = false,
-  }) : assert(active < tracks.length && active >= 0, "Invalid active index");
-
-  PlaylistQueue copyWith({
-    Set<Track>? tracks,
-    Set<Track>? tempTracks,
-    int? active,
-    bool? loop,
-  }) {
-    return PlaylistQueue(
-      tracks ?? this.tracks,
-      active: active ?? this.active,
-      tempTracks: tempTracks ?? this.tempTracks,
-      loop: loop ?? this.loop,
-    );
-  }
-}
-
-class PlaylistQueueNotifier extends PersistedStateNotifier<PlaylistQueue?> {
-  final Ref ref;
-  MobileAudioService? mobileService;
-  LinuxAudioService? linuxService;
-
-  static final provider =
-      StateNotifierProvider<PlaylistQueueNotifier, PlaylistQueue?>(
-    (ref) => PlaylistQueueNotifier._(ref),
-  );
-
-  static final notifier = provider.notifier;
-
-  PlaylistQueueNotifier._(this.ref) : super(null, "playlist") {
-    configure();
-  }
-
-  void configure() async {
-    if (kIsMobile || kIsMacOS) {
-      mobileService = await AudioService.init(
-        builder: () => MobileAudioService(
-          this,
-          ref.read(VolumeProvider.provider.notifier),
-        ),
-        config: const AudioServiceConfig(
-          androidNotificationChannelId: 'com.krtirtho.Spotube',
-          androidNotificationChannelName: 'Spotube',
-          androidNotificationOngoing: true,
-        ),
-      );
-    }
-    if (kIsLinux) {
-      linuxService = LinuxAudioService(ref, this);
-    }
-    addListener((state) {
-      linuxService?.player.updateProperties();
-    });
-
-    audioPlayer.onPlayerStateChanged.listen((event) {
-      linuxService?.player.updateProperties();
-    });
-
-    audioPlayer.onPlayerComplete.listen((event) async {
-      if (!isLoaded) return;
-      if (state!.isLooping) {
-        await audioPlayer.seek(Duration.zero);
-        await audioPlayer.resume();
-      } else {
-        await next();
-      }
-    });
-
-    bool isPreSearching = false;
-
-    audioPlayer.onPositionChanged.listen((pos) async {
-      if (!isLoaded) return;
-      await linuxService?.player.updateProperties();
-      final currentDuration = await audioPlayer.getDuration() ?? Duration.zero;
-
-      // skip all the activeTrack.skipSegments
-      if (state?.isLoading != true &&
-          (state?.activeTrack as SpotubeTrack).skipSegments.isNotEmpty &&
-          preferences.skipSponsorSegments) {
-        for (final segment
-            in (state!.activeTrack as SpotubeTrack).skipSegments) {
-          if ((pos.inSeconds >= segment["start"]! &&
-              pos.inSeconds < segment["end"]!)) {
-            await audioPlayer.seek(Duration(seconds: segment["end"]!));
-          }
-        }
-      }
-
-      // when the track progress is above 80%, track isn't the last
-      // and is not already fetched and nothing is fetching currently
-      if (pos.inSeconds > currentDuration.inSeconds * .8 &&
-          state!.active != state!.tracks.length - 1 &&
-          state!.tracks.elementAt(state!.active + 1) is! SpotubeTrack &&
-          !isPreSearching) {
-        isPreSearching = true;
-        final tracks = state!.tracks.toList();
-        tracks[state!.active + 1] = await SpotubeTrack.fetchFromTrack(
-          state!.tracks.elementAt(state!.active + 1),
-          preferences,
-        );
-        state = state!.copyWith(tracks: Set.from(tracks));
-        isPreSearching = false;
-      }
-    });
-  }
-
-  // properties
-
-  // getters
-  UserPreferences get preferences => ref.read(userPreferencesProvider);
-  BlackListNotifier get blacklist =>
-      ref.read(BlackListNotifier.provider.notifier);
-
-  bool get isLoaded => state != null;
-
-  // redirectors
-  static bool get isPlaying => audioPlayer.state == PlayerState.playing;
-  static bool get isPaused => audioPlayer.state == PlayerState.paused;
-  static bool get isStopped => audioPlayer.state == PlayerState.stopped;
-
-  static Stream<Duration> get duration =>
-      audioPlayer.onDurationChanged.asBroadcastStream();
-  static Stream<Duration> get position =>
-      audioPlayer.onPositionChanged.asBroadcastStream();
-  static Stream<bool> get playing => audioPlayer.onPlayerStateChanged
-      .map((event) => event == PlayerState.playing)
-      .asBroadcastStream();
-
-  List<Video> get siblings => state?.isLoading == false
-      ? (state!.activeTrack as SpotubeTrack).siblings
-      : [];
-
-  // modifiers
-  void add(List<Track> tracks) {
-    if (!isLoaded) {
-      loadAndPlay(tracks);
-    } else {
-      state = state?.copyWith(
-        tracks: state!.tracks..addAll(tracks),
-      );
-    }
-  }
-
-  void remove(List<Track> tracks) {
-    if (!isLoaded) return;
-    final trackIds = tracks.map((e) => e.id!).toSet();
-    final newTracks = state!.tracks.whereNot(
-      (element) => trackIds.contains(element.id),
-    );
-
-    if (newTracks.isEmpty) {
-      stop();
-      return;
-    }
-    state = state?.copyWith(
-      tracks: newTracks.toSet(),
-      active: !newTracks.contains(state!.activeTrack)
-          ? state!.active > newTracks.length - 1
-              ? newTracks.length - 1
-              : state!.active
-          : null,
-    );
-    if (state!.isLoading) {
-      play();
-    }
-  }
-
-  void shuffle() {
-    if (!isLoaded || state!.isShuffled) return;
-    state = state?.copyWith(
-      tempTracks: state!.tracks,
-      tracks: {
-        state!.activeTrack,
-        ...state!.tracks.toList()
-          ..removeAt(state!.active)
-          ..shuffle()
-      },
-      active: 0,
-    );
-  }
-
-  void unshuffle() {
-    if (!isLoaded || !state!.isShuffled) return;
-    state = state?.copyWith(
-      tracks: state!.tempTracks,
-      active: state!.tempTracks
-          .toList()
-          .indexWhere((element) => element.id == state!.activeTrack.id),
-      tempTracks: {},
-    );
-  }
-
-  void loop() {
-    if (!isLoaded || state!.isLooping) return;
-    state = state?.copyWith(
-      loop: true,
-    );
-  }
-
-  void unloop() {
-    if (!isLoaded || !state!.isLooping) return;
-    state = state?.copyWith(
-      loop: false,
-    );
-  }
-
-  Future<void> swapSibling(Video video) async {
-    if (!isLoaded || state!.isLoading) return;
-    await pause();
-    final tracks = state!.tracks.toList();
-    final track = await (state!.activeTrack as SpotubeTrack)
-        .swappedCopy(video, preferences);
-    if (track == null) return;
-    tracks[state!.active] = track;
-
-    state = state!.copyWith(tracks: Set.from(tracks));
-    await play();
-  }
-
-  Future<void> populateSibling() async {
-    if (!isLoaded || state!.isLoading) return;
-    final tracks = state!.tracks.toList();
-    final track = await (state!.activeTrack as SpotubeTrack).populatedCopy();
-    tracks[state!.active] = track;
-    state = state!.copyWith(tracks: Set.from(tracks));
-  }
-
-  Future<void> play() async {
-    if (!isLoaded) return;
-    await pause();
-    await mobileService?.session?.setActive(true);
-    final mediaItem = MediaItem(
-      id: state!.activeTrack.id!,
-      title: state!.activeTrack.name!,
-      album: state!.activeTrack.album?.name,
-      artist: TypeConversionUtils.artists_X_String(
-          state!.activeTrack.artists ?? <ArtistSimple>[]),
-      artUri: Uri.parse(
-        TypeConversionUtils.image_X_UrlString(
-          state!.activeTrack.album?.images,
-          placeholder: ImagePlaceholder.online,
-        ),
-      ),
-      duration: state!.activeTrack.duration,
-    );
-    mobileService?.addItem(mediaItem);
-    if (state!.activeTrack is LocalTrack) {
-      await audioPlayer.play(
-        DeviceFileSource((state!.activeTrack as LocalTrack).path),
-        mode: PlayerMode.mediaPlayer,
-      );
-      return;
-    }
-    if (state!.activeTrack is! SpotubeTrack) {
-      final tracks = state!.tracks.toList();
-      tracks[state!.active] = await SpotubeTrack.fetchFromTrack(
-        state!.activeTrack,
-        preferences,
-      );
-      final tempTracks = state!.tempTracks
-          .map((e) =>
-              e.id == tracks[state!.active].id ? tracks[state!.active] : e)
-          .toList();
-
-      state = state!.copyWith(
-        tracks: Set.from(tracks),
-        tempTracks: Set.from(tempTracks),
-      );
-    }
-
-    mobileService?.addItem(mediaItem.copyWith(
-      duration: (state!.activeTrack as SpotubeTrack).ytTrack.duration,
-    ));
-
-    final cached =
-        await DefaultCacheManager().getFileFromCache(state!.activeTrack.id!);
-    if (preferences.predownload && cached != null) {
-      await audioPlayer.play(
-        DeviceFileSource(cached.file.path),
-        mode: PlayerMode.mediaPlayer,
-      );
-    } else {
-      await audioPlayer.play(
-        UrlSource((state!.activeTrack as SpotubeTrack).ytUri),
-        mode: PlayerMode.mediaPlayer,
-      );
-    }
-  }
-
-  Future<void> playTrack(Track track) async {
-    if (!isLoaded) return;
-    final active =
-        state!.tracks.toList().indexWhere((element) => element.id == track.id);
-    if (active == -1) return;
-    state = state!.copyWith(active: active);
-    return play();
-  }
-
-  void load(Iterable<Track> tracks, {int active = 0}) {
-    final activeTrack = tracks.elementAt(active);
-    final filtered = Set.from(blacklist.filter(tracks));
-    state = PlaylistQueue(
-      Set.from(blacklist.filter(tracks)),
-      tempTracks: {},
-      active: filtered
-          .toList()
-          .indexWhere((element) => element.id == activeTrack.id),
-    );
-  }
-
-  Future<void> loadAndPlay(Iterable<Track> tracks, {int active = 0}) async {
-    load(tracks, active: active);
-    await play();
-  }
-
-  Future<void> pause() {
-    return audioPlayer.pause();
-  }
-
-  Future<void> resume() {
-    return audioPlayer.resume();
-  }
-
-  Future<void> stop() async {
-    (mobileService)?.session?.setActive(false);
-    state = null;
-
-    return audioPlayer.stop();
-  }
-
-  Future<void> next() async {
-    if (!isLoaded) return;
-    if (state!.active == state!.tracks.length - 1) {
-      state = state!.copyWith(
-        active: 0,
-      );
-    } else {
-      state = state!.copyWith(
-        active: state!.active + 1,
-      );
-    }
-    return play();
-  }
-
-  Future<void> previous() async {
-    if (!isLoaded) return;
-    if (state!.active == 0) {
-      state = state!.copyWith(
-        active: state!.tracks.length - 1,
-      );
-    } else {
-      state = state!.copyWith(
-        active: state!.active - 1,
-      );
-    }
-    return play();
-  }
-
-  Future<void> seek(Duration position) async {
-    if (!isLoaded) return;
-    await audioPlayer.seek(position);
-    await resume();
-  }
-
-  // utility
-  bool isPlayingPlaylist(Iterable<TrackSimple> playlist) {
-    if (!isLoaded || playlist.isEmpty) return false;
-
-    final trackIds = (state!.isShuffled ? state!.tempTracks : state!.tracks)
-        .map((track) => track.id!);
-    return blacklist
-        .filter(playlist)
-        .every((track) => trackIds.contains(track.id!));
-  }
-
-  bool isTrackOnQueue(TrackSimple track) {
-    if (!isLoaded) return false;
-    if (state!.isShuffled) {
-      final trackIds = state!.tempTracks.map((track) => track.id!);
-      return trackIds.contains(track.id!);
-    }
-    final trackIds = state!.tracks.map((track) => track.id!);
-    return trackIds.contains(track.id!);
-  }
-
-  @override
-  Future<PlaylistQueue>? fromJson(Map<String, dynamic> json) {
-    if (json.isEmpty) return null;
-    return PlaylistQueue.fromJson(json, preferences);
-  }
-
-  @override
-  Map<String, dynamic> toJson() {
-    return state?.toJson() ?? {};
-  }
-}
-
-class VolumeProvider extends PersistedStateNotifier<double> {
-  VolumeProvider() : super(1, 'volume');
-
-  static final provider = StateNotifierProvider<VolumeProvider, double>((ref) {
-    return VolumeProvider();
-  });
-
-  Future<void> setVolume(double volume) async {
-    if (volume > 1) {
-      state = 1;
-    } else if (volume < 0) {
-      state = 0;
-    } else {
-      state = volume;
-    }
-    await audioPlayer.setVolume(state);
-    await audioPlayer.setVolume(state);
-  }
-
-  void increaseVolume() {
-    setVolume(state + 0.1);
-  }
-
-  void decreaseVolume() {
-    setVolume(state - 0.1);
-  }
-
-  @override
-  double fromJson(Map<String, dynamic> json) {
-    return json['volume'] as double;
-  }
-
-  @override
-  Map<String, dynamic> toJson() {
-    return {'volume': state};
-  }
-}
diff --git a/lib/provider/proxy_playlist/next_fetcher_mixin.dart b/lib/provider/proxy_playlist/next_fetcher_mixin.dart
new file mode 100644
index 00000000..ac8f5bbc
--- /dev/null
+++ b/lib/provider/proxy_playlist/next_fetcher_mixin.dart
@@ -0,0 +1,128 @@
+import 'package:collection/collection.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/models/local_track.dart';
+import 'package:spotube/models/matched_track.dart';
+import 'package:spotube/models/spotube_track.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist.dart';
+import 'package:spotube/provider/user_preferences_provider.dart';
+import 'package:spotube/services/supabase.dart';
+import 'package:spotube/services/youtube/youtube.dart';
+
+mixin NextFetcher on StateNotifier<ProxyPlaylist> {
+  Future<List<SpotubeTrack>> fetchTracks(
+    UserPreferences preferences,
+    YoutubeEndpoints youtube, {
+    int count = 3,
+    int offset = 0,
+  }) async {
+    /// get [count] [state.tracks] that are not [SpotubeTrack] and [LocalTrack]
+
+    final bareTracks = state.tracks
+        .skip(offset)
+        .where((element) => element is! SpotubeTrack && element is! LocalTrack)
+        .take(count);
+
+    /// fetch [bareTracks] one by one with 100ms delay
+    final fetchedTracks = await Future.wait(
+      bareTracks.mapIndexed((i, track) async {
+        final future = SpotubeTrack.fetchFromTrack(
+          track,
+          youtube,
+        );
+        if (i == 0) {
+          return await future;
+        }
+        return await Future.delayed(
+          const Duration(milliseconds: 100),
+          () => future,
+        );
+      }),
+    );
+
+    return fetchedTracks;
+  }
+
+  /// Merges List of [SpotubeTrack]s with [Track]s and outputs a mixed List
+  Set<Track> mergeTracks(
+    Iterable<SpotubeTrack> fetchTracks,
+    Iterable<Track> tracks,
+  ) {
+    return tracks.map((track) {
+      final fetchedTrack = fetchTracks.firstWhereOrNull(
+        (fetchTrack) => fetchTrack.id == track.id,
+      );
+      if (fetchedTrack != null) {
+        return fetchedTrack;
+      }
+      return track;
+    }).toSet();
+  }
+
+  /// Checks if [Track] is playable
+  bool isUnPlayable(String source) {
+    return source.startsWith('https://youtube.com/unplayable.m4a?id=');
+  }
+
+  bool isPlayable(String source) => !isUnPlayable(source);
+
+  /// Returns [Track.id] from [isUnPlayable] source that is not playable
+  String getIdFromUnPlayable(String source) {
+    return source
+        .split('&')
+        .first
+        .replaceFirst('https://youtube.com/unplayable.m4a?id=', '');
+  }
+
+  /// Returns appropriate Media source for [Track]
+  ///
+  /// * If [Track] is [SpotubeTrack] then return [SpotubeTrack.ytUri]
+  /// * If [Track] is [LocalTrack] then return [LocalTrack.path]
+  /// * If [Track] is [Track] then return [Track.id] with [isUnPlayable] source
+  String makeAppropriateSource(Track track) {
+    if (track is SpotubeTrack) {
+      return track.ytUri;
+    } else if (track is LocalTrack) {
+      return track.path;
+    } else {
+      return "https://youtube.com/unplayable.m4a?id=${track.id}&title=${track.name?.replaceAll(
+        RegExp(r'\s+', caseSensitive: false),
+        '-',
+      )}";
+    }
+  }
+
+  List<Track> mapSourcesToTracks(List<String> sources) {
+    final tracks = state.tracks;
+
+    return sources
+        .map((source) {
+          final track = tracks.firstWhereOrNull(
+            (track) => makeAppropriateSource(track) == source,
+          );
+          return track;
+        })
+        .whereNotNull()
+        .toList();
+  }
+
+  /// This method must be called after any playback operation as
+  /// it can increase the latency
+  Future<void> storeTrack(Track track, SpotubeTrack spotubeTrack) async {
+    try {
+      if (track is! SpotubeTrack) {
+        await supabase.insertTrack(
+          MatchedTrack(
+            youtubeId: spotubeTrack.ytTrack.id,
+            spotifyId: spotubeTrack.id!,
+            searchMode: spotubeTrack.ytTrack.searchMode,
+          ),
+        );
+      }
+    } catch (e, stackTrace) {
+      debugPrint(e.toString());
+      debugPrintStack(stackTrace: stackTrace);
+    }
+  }
+}
diff --git a/lib/provider/proxy_playlist/proxy_playlist.dart b/lib/provider/proxy_playlist/proxy_playlist.dart
new file mode 100644
index 00000000..c0563f21
--- /dev/null
+++ b/lib/provider/proxy_playlist/proxy_playlist.dart
@@ -0,0 +1,84 @@
+import 'package:collection/collection.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/extensions/track.dart';
+import 'package:spotube/models/local_track.dart';
+import 'package:spotube/models/spotube_track.dart';
+
+class ProxyPlaylist {
+  final Set<Track> tracks;
+  final Set<String> collections;
+  final int? active;
+
+  ProxyPlaylist(this.tracks, [this.active, this.collections = const {}]);
+
+  factory ProxyPlaylist.fromJson(Map<String, dynamic> json) {
+    return ProxyPlaylist(
+      List.castFrom<dynamic, Map<String, dynamic>>(
+        json['tracks'] ?? <Map<String, dynamic>>[],
+      ).map(_makeAppropriateTrack).toSet(),
+      json['active'] as int?,
+      json['collections'] == null
+          ? {}
+          : (json['collections'] as List).toSet().cast<String>(),
+    );
+  }
+
+  Track? get activeTrack =>
+      active == null || active == -1 ? null : tracks.elementAtOrNull(active!);
+
+  bool get isFetching =>
+      activeTrack != null &&
+      activeTrack is! SpotubeTrack &&
+      activeTrack is! LocalTrack;
+
+  bool containsCollection(String collection) {
+    return collections.contains(collection);
+  }
+
+  bool containsTrack(TrackSimple track) {
+    return tracks.firstWhereOrNull((element) => element.id == track.id) != null;
+  }
+
+  bool containsTracks(Iterable<TrackSimple> tracks) {
+    if (tracks.isEmpty) return false;
+    return tracks.every(containsTrack);
+  }
+
+  static Track _makeAppropriateTrack(Map<String, dynamic> track) {
+    if (track.containsKey("ytUri")) {
+      return SpotubeTrack.fromJson(track);
+    } else if (track.containsKey("path")) {
+      return LocalTrack.fromJson(track);
+    } else {
+      return Track.fromJson(track);
+    }
+  }
+
+  static Map<String, dynamic> _makeAppropriateTrackJson(Track track) {
+    if (track is LocalTrack) {
+      return track.toJson();
+    } else {
+      return track.toJson();
+    }
+  }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'tracks': tracks.map(_makeAppropriateTrackJson).toList(),
+      'active': active,
+      'collections': collections.toList(),
+    };
+  }
+
+  ProxyPlaylist copyWith({
+    Set<Track>? tracks,
+    int? active,
+    Set<String>? collections,
+  }) {
+    return ProxyPlaylist(
+      tracks ?? this.tracks,
+      active ?? this.active,
+      collections ?? this.collections,
+    );
+  }
+}
diff --git a/lib/provider/proxy_playlist/proxy_playlist_provider.dart b/lib/provider/proxy_playlist/proxy_playlist_provider.dart
new file mode 100644
index 00000000..6dab7b74
--- /dev/null
+++ b/lib/provider/proxy_playlist/proxy_playlist_provider.dart
@@ -0,0 +1,598 @@
+import 'dart:async';
+import 'dart:convert';
+
+import 'package:catcher/catcher.dart';
+import 'package:collection/collection.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:http/http.dart';
+import 'package:palette_generator/palette_generator.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/components/shared/image/universal_image.dart';
+import 'package:spotube/models/local_track.dart';
+import 'package:spotube/models/logger.dart';
+import 'package:spotube/models/matched_track.dart';
+import 'package:spotube/models/skip_segment.dart';
+import 'package:spotube/models/spotube_track.dart';
+import 'package:spotube/provider/blacklist_provider.dart';
+import 'package:spotube/provider/palette_provider.dart';
+import 'package:spotube/provider/proxy_playlist/next_fetcher_mixin.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist.dart';
+import 'package:spotube/provider/user_preferences_provider.dart';
+import 'package:spotube/provider/youtube_provider.dart';
+import 'package:spotube/services/audio_player/audio_player.dart';
+import 'package:spotube/services/audio_services/audio_services.dart';
+import 'package:spotube/services/youtube/youtube.dart';
+import 'package:spotube/utils/persisted_state_notifier.dart';
+import 'package:spotube/utils/type_conversion_utils.dart';
+
+/// Things implemented:
+/// * [x] Sponsor-Block skip
+/// * [x] Prefetch next track as [SpotubeTrack] on 80% of current track
+/// * [x] Mixed Queue containing both [SpotubeTrack] and [LocalTrack]
+/// * [x] Modification of the Queue
+///       * [x] Add track at the end
+///       * [x] Add track at the beginning
+///       * [x] Remove track
+///       * [x] Reorder track
+/// * [x] Caching and loading of cache of tracks
+/// * [x] Shuffling
+/// * [x] loop => playlist, track, none
+/// * [x] Alternative Track Source
+/// * [x] Blacklisting of tracks and artist
+///
+/// Don'ts:
+/// * It'll not have any proxy method for [SpotubeAudioPlayer]
+/// * It'll not store any sort of player state e.g playing, paused, shuffled etc
+///   * For that, use [SpotubeAudioPlayer]
+
+class ProxyPlaylistNotifier extends PersistedStateNotifier<ProxyPlaylist>
+    with NextFetcher {
+  final Ref ref;
+  late final AudioServices notificationService;
+
+  UserPreferences get preferences => ref.read(userPreferencesProvider);
+  YoutubeEndpoints get youtube => ref.read(youtubeProvider);
+  ProxyPlaylist get playlist => state;
+  BlackListNotifier get blacklist =>
+      ref.read(BlackListNotifier.provider.notifier);
+
+  static final provider =
+      StateNotifierProvider<ProxyPlaylistNotifier, ProxyPlaylist>(
+    (ref) => ProxyPlaylistNotifier(ref),
+  );
+
+  static AlwaysAliveRefreshable<ProxyPlaylistNotifier> get notifier =>
+      provider.notifier;
+
+  ProxyPlaylistNotifier(this.ref) : super(ProxyPlaylist({}), "playlist") {
+    () async {
+      notificationService = await AudioServices.create(ref, this);
+
+      (String, List<SkipSegment>)? currentSegments;
+      bool isFetchingSegments = false;
+      audioPlayer.activeSourceChangedStream.listen((newActiveSource) async {
+        final newActiveTrack =
+            mapSourcesToTracks([newActiveSource]).firstOrNull;
+
+        if (newActiveTrack == null ||
+            newActiveTrack.id == state.activeTrack?.id) {
+          return;
+        }
+
+        notificationService.addTrack(newActiveTrack);
+        state = state.copyWith(
+          active: state.tracks
+              .toList()
+              .indexWhere((element) => element.id == newActiveTrack.id),
+        );
+
+        isFetchingSegments = true;
+
+        isFetchingSegments = false;
+
+        updatePalette();
+      });
+
+      audioPlayer.shuffledStream.listen((event) {
+        final newlyOrderedTracks = mapSourcesToTracks(audioPlayer.sources);
+
+        final newActiveIndex = newlyOrderedTracks.indexWhere(
+          (element) => element.id == state.activeTrack?.id,
+        );
+
+        if (newActiveIndex == -1) return;
+
+        state = state.copyWith(
+          tracks: newlyOrderedTracks.toSet(),
+          active: newActiveIndex,
+        );
+      });
+
+      bool isPreSearching = false;
+
+      listenTo60Percent(percent) async {
+        if (isPreSearching ||
+            audioPlayer.currentSource == null ||
+            audioPlayer.nextSource == null) return;
+        try {
+          isPreSearching = true;
+
+          // TODO: Make repeat mode sensitive changes later
+          final oldTrack =
+              mapSourcesToTracks([audioPlayer.nextSource!]).firstOrNull;
+          final track = await ensureSourcePlayable(audioPlayer.nextSource!);
+
+          if (track != null) {
+            state = state.copyWith(tracks: mergeTracks([track], state.tracks));
+            if (currentSegments == null ||
+                (oldTrack?.id != null &&
+                        currentSegments!.$1 != oldTrack!.id!) &&
+                    !isFetchingSegments) {
+              isFetchingSegments = true;
+              currentSegments = (
+                audioPlayer.currentSource!,
+                await getAndCacheSkipSegments(
+                  track.ytTrack.id,
+                ),
+              );
+              isFetchingSegments = false;
+            }
+          }
+
+          if (oldTrack != null && track != null) {
+            await storeTrack(
+              oldTrack,
+              track,
+            );
+          }
+        } finally {
+          isPreSearching = false;
+
+          /// Sometimes fetching can take a lot of time, so we need to check
+          /// if next source is playable or not at 99% progress. If not, then
+          /// it'll be paused automatically
+          ///
+          /// After fetching the nextSource and replacing it, we need to check
+          /// if the player is paused or not. If it is paused, then we need to
+          /// resume it to skip to next track
+          if (audioPlayer.isPaused) {
+            await audioPlayer.resume();
+          }
+        }
+      }
+
+      audioPlayer.percentCompletedStream(60).listen(listenTo60Percent);
+
+      // player stops at 99% if nextSource is still not playable
+      audioPlayer.percentCompletedStream(99).listen((_) async {
+        if (audioPlayer.nextSource == null ||
+            isPlayable(audioPlayer.nextSource!)) return;
+        await audioPlayer.pause();
+      });
+
+      audioPlayer.positionStream.listen((position) async {
+        if (preferences.searchMode == SearchMode.youtubeMusic ||
+            !preferences.skipNonMusic) return;
+
+        if (currentSegments == null ||
+            currentSegments!.$1 != state.activeTrack!.id! &&
+                !isFetchingSegments) {
+          isFetchingSegments = true;
+          currentSegments = (
+            audioPlayer.currentSource!,
+            await getAndCacheSkipSegments(
+              (state.activeTrack as SpotubeTrack).ytTrack.id,
+            ),
+          );
+          isFetchingSegments = false;
+        }
+
+        final (_, segments) = currentSegments!;
+        if (segments.isEmpty) return;
+
+        for (final segment in segments) {
+          if ((position.inSeconds >= segment.start &&
+              position.inSeconds < segment.end)) {
+            await audioPlayer.seek(Duration(seconds: segment.end));
+          }
+        }
+      });
+    }();
+  }
+
+  Future<SpotubeTrack?> ensureSourcePlayable(String source) async {
+    if (isPlayable(source)) return null;
+
+    final track = mapSourcesToTracks([source]).firstOrNull;
+
+    if (track == null || track is LocalTrack) {
+      return null;
+    }
+
+    final nthFetchedTrack = switch (track.runtimeType) {
+      SpotubeTrack => track as SpotubeTrack,
+      _ => await SpotubeTrack.fetchFromTrack(track, youtube),
+    };
+
+    await audioPlayer.replaceSource(
+      source,
+      nthFetchedTrack.ytUri,
+    );
+
+    return nthFetchedTrack;
+  }
+
+  // Basic methods for adding or removing tracks to playlist
+
+  Future<void> addTrack(Track track) async {
+    if (blacklist.contains(track)) return;
+    state = state.copyWith(tracks: {...state.tracks, track});
+    await audioPlayer.addTrack(makeAppropriateSource(track));
+  }
+
+  Future<void> addTracks(Iterable<Track> tracks) async {
+    tracks = blacklist.filter(tracks).toList() as List<Track>;
+    state = state.copyWith(tracks: {...state.tracks, ...tracks});
+    for (final track in tracks) {
+      await audioPlayer.addTrack(makeAppropriateSource(track));
+    }
+  }
+
+  void addCollection(String collectionId) {
+    state = state.copyWith(collections: {
+      ...state.collections,
+      collectionId,
+    });
+  }
+
+  void removeCollection(String collectionId) {
+    state = state.copyWith(collections: {
+      ...state.collections..remove(collectionId),
+    });
+  }
+
+  // TODO: Safely Remove playing tracks
+
+  Future<void> removeTrack(String trackId) async {
+    final track =
+        state.tracks.firstWhereOrNull((element) => element.id == trackId);
+    if (track == null) return;
+    state = state.copyWith(tracks: {...state.tracks..remove(track)});
+    final index = audioPlayer.sources.indexOf(makeAppropriateSource(track));
+    if (index == -1) return;
+    await audioPlayer.removeTrack(index);
+  }
+
+  Future<void> removeTracks(Iterable<String> tracksIds) async {
+    final tracks =
+        state.tracks.where((element) => tracksIds.contains(element.id));
+
+    state = state.copyWith(tracks: {
+      ...state.tracks..removeWhere((element) => tracksIds.contains(element.id))
+    });
+
+    for (final track in tracks) {
+      final index = audioPlayer.sources.indexOf(makeAppropriateSource(track));
+      if (index == -1) continue;
+      await audioPlayer.removeTrack(index);
+    }
+  }
+
+  Future<void> load(
+    Iterable<Track> tracks, {
+    int initialIndex = 0,
+    bool autoPlay = false,
+  }) async {
+    tracks = blacklist.filter(tracks).toList() as List<Track>;
+    final indexTrack = tracks.elementAtOrNull(initialIndex) ?? tracks.first;
+
+    if (indexTrack is LocalTrack) {
+      state = state.copyWith(
+        tracks: tracks.toSet(),
+        active: initialIndex,
+        collections: {},
+      );
+      await notificationService.addTrack(indexTrack);
+    } else {
+      final addableTrack = await SpotubeTrack.fetchFromTrack(
+        tracks.elementAtOrNull(initialIndex) ?? tracks.first,
+        youtube,
+      );
+
+      state = state.copyWith(
+        tracks: mergeTracks([addableTrack], tracks),
+        active: initialIndex,
+        collections: {},
+      );
+      await notificationService.addTrack(addableTrack);
+      await storeTrack(
+        tracks.elementAt(initialIndex),
+        addableTrack,
+      );
+    }
+
+    await audioPlayer.openPlaylist(
+      state.tracks.map(makeAppropriateSource).toList(),
+      initialIndex: initialIndex,
+      autoPlay: autoPlay,
+    );
+  }
+
+  Future<void> jumpTo(int index) async {
+    final oldTrack =
+        mapSourcesToTracks([audioPlayer.currentSource!]).firstOrNull;
+    state = state.copyWith(active: index);
+    await audioPlayer.pause();
+    final track = await ensureSourcePlayable(audioPlayer.sources[index]);
+    if (track != null) {
+      state = state.copyWith(
+        tracks: mergeTracks([track], state.tracks),
+        active: index,
+      );
+    }
+    await audioPlayer.jumpTo(index);
+
+    if (oldTrack != null || track != null) {
+      await notificationService.addTrack(track ?? oldTrack!);
+    }
+
+    if (oldTrack != null && track != null) {
+      await storeTrack(
+        oldTrack,
+        track,
+      );
+    }
+  }
+
+  Future<void> jumpToTrack(Track track) async {
+    final index =
+        state.tracks.toList().indexWhere((element) => element.id == track.id);
+    if (index == -1) return;
+    await jumpTo(index);
+  }
+
+  // TODO: add safe guards for active/playing track that needs to be moved
+  Future<void> moveTrack(int oldIndex, int newIndex) async {
+    if (oldIndex == newIndex ||
+        newIndex < 0 ||
+        oldIndex < 0 ||
+        newIndex > state.tracks.length - 1 ||
+        oldIndex > state.tracks.length - 1) return;
+
+    final tracks = state.tracks.toList();
+    final track = tracks.removeAt(oldIndex);
+    tracks.insert(newIndex, track);
+    state = state.copyWith(tracks: {...tracks});
+
+    await audioPlayer.moveTrack(oldIndex, newIndex);
+  }
+
+  Future<void> addTracksAtFirst(Iterable<Track> tracks) async {
+    tracks = blacklist.filter(tracks).toList() as List<Track>;
+    final destIndex = state.active != null ? state.active! + 1 : 0;
+    final newTracks = state.tracks.toList()..insertAll(destIndex, tracks);
+    state = state.copyWith(tracks: newTracks.toSet());
+
+    tracks.forEachIndexed((index, track) async {
+      audioPlayer.addTrackAt(
+        makeAppropriateSource(track),
+        destIndex + index,
+      );
+    });
+  }
+
+  Future<void> populateSibling() async {
+    if (state.activeTrack is SpotubeTrack) {
+      final activeTrackWithSiblingsForSure =
+          await (state.activeTrack as SpotubeTrack).populatedCopy(youtube);
+
+      state = state.copyWith(
+        tracks: mergeTracks([activeTrackWithSiblingsForSure], state.tracks),
+        active: state.tracks.toList().indexWhere(
+            (element) => element.id == activeTrackWithSiblingsForSure.id),
+      );
+    }
+  }
+
+  Future<void> swapSibling(YoutubeVideoInfo video) async {
+    if (state.activeTrack is SpotubeTrack) {
+      await populateSibling();
+      final newTrack =
+          await (state.activeTrack as SpotubeTrack).swappedCopy(video, youtube);
+      if (newTrack == null) return;
+      state = state.copyWith(
+        tracks: mergeTracks([newTrack], state.tracks),
+        active: state.tracks
+            .toList()
+            .indexWhere((element) => element.id == newTrack.id),
+      );
+      await audioPlayer.pause();
+      await audioPlayer.replaceSource(
+        audioPlayer.currentSource!,
+        makeAppropriateSource(newTrack),
+      );
+    }
+  }
+
+  Future<void> next() async {
+    if (audioPlayer.nextSource == null) return;
+    final oldTrack = mapSourcesToTracks([audioPlayer.nextSource!]).firstOrNull;
+    state = state.copyWith(
+      active: state.tracks
+          .toList()
+          .indexWhere((element) => element.id == oldTrack?.id),
+    );
+    await audioPlayer.pause();
+    final track = await ensureSourcePlayable(audioPlayer.nextSource!);
+    if (track != null) {
+      state = state.copyWith(
+        tracks: mergeTracks([track], state.tracks),
+        active: state.tracks
+            .toList()
+            .indexWhere((element) => element.id == track.id),
+      );
+    }
+    await audioPlayer.skipToNext();
+
+    if (oldTrack != null || track != null) {
+      await notificationService.addTrack(track ?? oldTrack!);
+    }
+    if (oldTrack != null && track != null) {
+      await storeTrack(
+        oldTrack,
+        track,
+      );
+    }
+  }
+
+  Future<void> previous() async {
+    if (audioPlayer.previousSource == null) return;
+    final oldTrack =
+        mapSourcesToTracks([audioPlayer.previousSource!]).firstOrNull;
+    state = state.copyWith(
+      active: state.tracks
+          .toList()
+          .indexWhere((element) => element.id == oldTrack?.id),
+    );
+    await audioPlayer.pause();
+    final track = await ensureSourcePlayable(audioPlayer.previousSource!);
+    if (track != null) {
+      state = state.copyWith(
+        tracks: mergeTracks([track], state.tracks),
+        active: state.tracks
+            .toList()
+            .indexWhere((element) => element.id == track.id),
+      );
+    }
+    await audioPlayer.skipToPrevious();
+    if (oldTrack != null || track != null) {
+      await notificationService.addTrack(track ?? oldTrack!);
+    }
+    if (oldTrack != null && track != null) {
+      await storeTrack(
+        oldTrack,
+        track,
+      );
+    }
+  }
+
+  Future<void> stop() async {
+    state = ProxyPlaylist({});
+    await audioPlayer.stop();
+  }
+
+  Future<void> updatePalette() async {
+    final palette = ref.read(paletteProvider);
+    if (!preferences.albumColorSync) {
+      if (palette != null) ref.read(paletteProvider.notifier).state = null;
+      return;
+    }
+    return Future.microtask(() async {
+      final activeTrack = state.tracks.elementAtOrNull(state.active ?? 0);
+
+      if (activeTrack == null) return;
+
+      final palette = await PaletteGenerator.fromImageProvider(
+        UniversalImage.imageProvider(
+          TypeConversionUtils.image_X_UrlString(
+            activeTrack.album?.images,
+            placeholder: ImagePlaceholder.albumArt,
+          ),
+          height: 50,
+          width: 50,
+        ),
+      );
+      ref.read(paletteProvider.notifier).state = palette;
+    });
+  }
+
+  Future<List<SkipSegment>> getAndCacheSkipSegments(String id) async {
+    if (!preferences.skipNonMusic ||
+        preferences.searchMode != SearchMode.youtube) return [];
+
+    try {
+      final cached = await SkipSegment.box.get(id);
+      if (cached != null && cached.isNotEmpty) {
+        return List.castFrom<dynamic, SkipSegment>(cached);
+      }
+
+      final res = await get(Uri(
+        scheme: "https",
+        host: "sponsor.ajay.app",
+        path: "/api/skipSegments",
+        queryParameters: {
+          "videoID": id,
+          "category": [
+            'sponsor',
+            'selfpromo',
+            'interaction',
+            'intro',
+            'outro',
+            'music_offtopic'
+          ],
+          "actionType": 'skip'
+        },
+      ));
+
+      if (res.body == "Not Found") {
+        return List.castFrom<dynamic, SkipSegment>([]);
+      }
+
+      final data = jsonDecode(res.body) as List;
+      final segments = data.map((obj) {
+        final start = obj["segment"].first.toInt();
+        final end = obj["segment"].last.toInt();
+        return SkipSegment(
+          start,
+          end,
+        );
+      }).toList();
+      getLogger('getSkipSegments').v(
+        "[SponsorBlock] successfully fetched skip segments for $id",
+      );
+
+      await SkipSegment.box.put(
+        id,
+        segments,
+      );
+      return List.castFrom<dynamic, SkipSegment>(segments);
+    } catch (e, stack) {
+      await SkipSegment.box.put(id, []);
+      Catcher.reportCheckedError(e, stack);
+      return List.castFrom<dynamic, SkipSegment>([]);
+    }
+  }
+
+  @override
+  set state(state) {
+    super.state = state;
+    if (state.tracks.isEmpty && ref.read(paletteProvider) != null) {
+      ref.read(paletteProvider.notifier).state = null;
+    } else {
+      updatePalette();
+    }
+  }
+
+  @override
+  onInit() async {
+    if (state.tracks.isEmpty) return null;
+    final oldCollections = state.collections;
+    await load(
+      state.tracks,
+      initialIndex: state.active ?? 0,
+      autoPlay: false,
+    );
+    state = state.copyWith(collections: oldCollections);
+  }
+
+  @override
+  FutureOr<ProxyPlaylist> fromJson(Map<String, dynamic> json) {
+    return ProxyPlaylist.fromJson(json);
+  }
+
+  @override
+  Map<String, dynamic> toJson() {
+    final json = state.toJson();
+    return json;
+  }
+}
diff --git a/lib/provider/sleep_timer_provider.dart b/lib/provider/sleep_timer_provider.dart
new file mode 100644
index 00000000..32678ac7
--- /dev/null
+++ b/lib/provider/sleep_timer_provider.dart
@@ -0,0 +1,31 @@
+import 'dart:async';
+import 'dart:io';
+
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+class SleepTimerNotifier extends StateNotifier<Duration?> {
+  SleepTimerNotifier() : super(null);
+
+  Timer? _timer;
+
+  static final provider = StateNotifierProvider<SleepTimerNotifier, Duration?>(
+    (ref) => SleepTimerNotifier(),
+  );
+
+  static AlwaysAliveRefreshable<SleepTimerNotifier> get notifier =>
+      provider.notifier;
+
+  void setSleepTimer(Duration duration) {
+    state = duration;
+
+    _timer = Timer(duration, () {
+      //! This can be a reason  for app termination in iOS AppStore
+      exit(0);
+    });
+  }
+
+  void cancelSleepTimer() {
+    state = null;
+    _timer?.cancel();
+  }
+}
diff --git a/lib/provider/user_preferences_provider.dart b/lib/provider/user_preferences_provider.dart
index b61e313c..fcd95109 100644
--- a/lib/provider/user_preferences_provider.dart
+++ b/lib/provider/user_preferences_provider.dart
@@ -1,12 +1,15 @@
 import 'dart:async';
+import 'dart:convert';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:spotube/components/settings/color_scheme_picker_dialog.dart';
+import 'package:spotube/models/matched_track.dart';
+import 'package:spotube/provider/palette_provider.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 
 import 'package:spotube/utils/persisted_change_notifier.dart';
-import 'package:collection/collection.dart';
 import 'package:spotube/utils/platform.dart';
 import 'package:path/path.dart' as path;
 
@@ -21,6 +24,18 @@ enum AudioQuality {
   low,
 }
 
+enum CloseBehavior {
+  minimizeToTray,
+  close,
+}
+
+enum YoutubeApiType {
+  youtube,
+  piped;
+
+  String get label => name[0].toUpperCase() + name.substring(1);
+}
+
 class UserPreferences extends PersistedChangeNotifier {
   ThemeMode themeMode;
   String recommendationMarket;
@@ -28,28 +43,47 @@ class UserPreferences extends PersistedChangeNotifier {
   bool checkUpdate;
   AudioQuality audioQuality;
 
-  MaterialColor accentColorScheme;
-  bool skipSponsorSegments;
+  SpotubeColor accentColorScheme;
+  bool albumColorSync;
 
   String downloadLocation;
 
   LayoutMode layoutMode;
-  bool rotatingAlbumArt;
 
-  bool predownload;
+  CloseBehavior closeBehavior;
 
-  UserPreferences({
+  bool showSystemTrayIcon;
+
+  Locale locale;
+
+  String pipedInstance;
+
+  SearchMode searchMode;
+
+  bool skipNonMusic;
+
+  YoutubeApiType youtubeApiType;
+
+  final Ref ref;
+
+  UserPreferences(
+    this.ref, {
     required this.recommendationMarket,
     required this.themeMode,
     required this.layoutMode,
-    required this.predownload,
+    required this.accentColorScheme,
+    this.albumColorSync = true,
     this.saveTrackLyrics = false,
-    this.accentColorScheme = Colors.green,
     this.checkUpdate = true,
     this.audioQuality = AudioQuality.high,
-    this.skipSponsorSegments = true,
     this.downloadLocation = "",
-    this.rotatingAlbumArt = true,
+    this.closeBehavior = CloseBehavior.minimizeToTray,
+    this.showSystemTrayIcon = true,
+    this.locale = const Locale("system", "system"),
+    this.pipedInstance = "https://pipedapi.kavin.rocks",
+    this.searchMode = SearchMode.youtube,
+    this.skipNonMusic = true,
+    this.youtubeApiType = YoutubeApiType.youtube,
   }) : super() {
     if (downloadLocation.isEmpty) {
       _getDefaultDownloadDirectory().then(
@@ -60,12 +94,6 @@ class UserPreferences extends PersistedChangeNotifier {
     }
   }
 
-  void setPredownload(bool value) {
-    predownload = value;
-    notifyListeners();
-    updatePersistence();
-  }
-
   void setThemeMode(ThemeMode mode) {
     themeMode = mode;
     notifyListeners();
@@ -84,13 +112,19 @@ class UserPreferences extends PersistedChangeNotifier {
     updatePersistence();
   }
 
-  void setAccentColorScheme(MaterialColor color) {
+  void setAccentColorScheme(SpotubeColor color) {
     accentColorScheme = color;
     notifyListeners();
     updatePersistence();
   }
 
-  void setBackgroundColorScheme(MaterialColor color) {
+  void setAlbumColorSync(bool sync) {
+    albumColorSync = sync;
+    if (!sync) {
+      ref.read(paletteProvider.notifier).state = null;
+    } else {
+      ref.read(ProxyPlaylistNotifier.notifier).updatePalette();
+    }
     notifyListeners();
     updatePersistence();
   }
@@ -107,12 +141,6 @@ class UserPreferences extends PersistedChangeNotifier {
     updatePersistence();
   }
 
-  void setSkipSponsorSegments(bool should) {
-    skipSponsorSegments = should;
-    notifyListeners();
-    updatePersistence();
-  }
-
   void setDownloadLocation(String downloadDir) {
     if (downloadDir.isEmpty) return;
     downloadLocation = downloadDir;
@@ -126,8 +154,44 @@ class UserPreferences extends PersistedChangeNotifier {
     updatePersistence();
   }
 
-  void setRotatingAlbumArt(bool should) {
-    rotatingAlbumArt = should;
+  void setCloseBehavior(CloseBehavior behavior) {
+    closeBehavior = behavior;
+    notifyListeners();
+    updatePersistence();
+  }
+
+  void setShowSystemTrayIcon(bool show) {
+    showSystemTrayIcon = show;
+    notifyListeners();
+    updatePersistence();
+  }
+
+  void setLocale(Locale locale) {
+    this.locale = locale;
+    notifyListeners();
+    updatePersistence();
+  }
+
+  void setPipedInstance(String instance) {
+    pipedInstance = instance;
+    notifyListeners();
+    updatePersistence();
+  }
+
+  void setSearchMode(SearchMode mode) {
+    searchMode = mode;
+    notifyListeners();
+    updatePersistence();
+  }
+
+  void setSkipNonMusic(bool skip) {
+    skipNonMusic = skip;
+    notifyListeners();
+    updatePersistence();
+  }
+
+  void setYoutubeApiType(YoutubeApiType type) {
+    youtubeApiType = type;
     notifyListeners();
     updatePersistence();
   }
@@ -151,13 +215,13 @@ class UserPreferences extends PersistedChangeNotifier {
     checkUpdate = map["checkUpdate"] ?? checkUpdate;
 
     themeMode = ThemeMode.values[map["themeMode"] ?? 0];
-    accentColorScheme = colorsMap.values
-            .firstWhereOrNull((e) => e.value == map["accentColorScheme"]) ??
-        accentColorScheme;
+    accentColorScheme = map["accentColorScheme"] != null
+        ? SpotubeColor.fromString(map["accentColorScheme"])
+        : accentColorScheme;
+    albumColorSync = map["albumColorSync"] ?? albumColorSync;
     audioQuality = map["audioQuality"] != null
         ? AudioQuality.values[map["audioQuality"]]
         : audioQuality;
-    skipSponsorSegments = map["skipSponsorSegments"] ?? skipSponsorSegments;
     downloadLocation =
         map["downloadLocation"] ?? await _getDefaultDownloadDirectory();
 
@@ -165,8 +229,30 @@ class UserPreferences extends PersistedChangeNotifier {
       (mode) => mode.name == map["layoutMode"],
       orElse: () => kIsDesktop ? LayoutMode.extended : LayoutMode.compact,
     );
-    rotatingAlbumArt = map["rotatingAlbumArt"] ?? rotatingAlbumArt;
-    predownload = map["predownload"] ?? predownload;
+
+    closeBehavior = map["closeBehavior"] != null
+        ? CloseBehavior.values[map["closeBehavior"]]
+        : closeBehavior;
+
+    showSystemTrayIcon = map["showSystemTrayIcon"] ?? showSystemTrayIcon;
+
+    final localeMap = map["locale"] != null ? jsonDecode(map["locale"]) : null;
+    locale =
+        localeMap != null ? Locale(localeMap?["lc"], localeMap?["cc"]) : locale;
+
+    pipedInstance = map["pipedInstance"] ?? pipedInstance;
+
+    searchMode = SearchMode.values.firstWhere(
+      (mode) => mode.name == map["searchMode"],
+      orElse: () => SearchMode.youtubeMusic,
+    );
+
+    skipNonMusic = map["skipNonMusic"] ?? skipNonMusic;
+
+    youtubeApiType = YoutubeApiType.values.firstWhere(
+      (type) => type.name == map["youtubeApiType"],
+      orElse: () => YoutubeApiType.youtube,
+    );
   }
 
   @override
@@ -175,23 +261,30 @@ class UserPreferences extends PersistedChangeNotifier {
       "saveTrackLyrics": saveTrackLyrics,
       "recommendationMarket": recommendationMarket,
       "themeMode": themeMode.index,
-      "accentColorScheme": accentColorScheme.value,
+      "accentColorScheme": accentColorScheme.toString(),
+      "albumColorSync": albumColorSync,
       "checkUpdate": checkUpdate,
       "audioQuality": audioQuality.index,
-      "skipSponsorSegments": skipSponsorSegments,
       "downloadLocation": downloadLocation,
       "layoutMode": layoutMode.name,
-      "rotatingAlbumArt": rotatingAlbumArt,
-      "predownload": predownload,
+      "closeBehavior": closeBehavior.index,
+      "showSystemTrayIcon": showSystemTrayIcon,
+      "locale":
+          jsonEncode({"lc": locale.languageCode, "cc": locale.countryCode}),
+      "pipedInstance": pipedInstance,
+      "searchMode": searchMode.name,
+      "skipNonMusic": skipNonMusic,
+      "youtubeApiType": youtubeApiType.name,
     };
   }
 }
 
 final userPreferencesProvider = ChangeNotifierProvider(
-  (_) => UserPreferences(
+  (ref) => UserPreferences(
+    ref,
+    accentColorScheme: SpotubeColor(Colors.blue.value, name: "Blue"),
     recommendationMarket: 'US',
     themeMode: ThemeMode.system,
-    layoutMode: kIsMobile ? LayoutMode.compact : LayoutMode.adaptive,
-    predownload: kIsMobile,
+    layoutMode: LayoutMode.adaptive,
   ),
 );
diff --git a/lib/provider/volume_provider.dart b/lib/provider/volume_provider.dart
new file mode 100644
index 00000000..464b5e42
--- /dev/null
+++ b/lib/provider/volume_provider.dart
@@ -0,0 +1,32 @@
+import 'dart:async';
+
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotube/services/audio_player/audio_player.dart';
+import 'package:spotube/utils/persisted_state_notifier.dart';
+
+class VolumeProvider extends PersistedStateNotifier<double> {
+  VolumeProvider() : super(1, 'volume');
+
+  Future<void> setVolume(double volume) async {
+    state = volume;
+    await audioPlayer.setVolume(volume);
+  }
+
+  @override
+  FutureOr<void> onInit() async {
+    await audioPlayer.setVolume(state);
+  }
+
+  @override
+  FutureOr<double> fromJson(Map<String, dynamic> json) {
+    return json['volume'] as double? ?? 0.0;
+  }
+
+  @override
+  Map<String, dynamic> toJson() {
+    return {'volume': state};
+  }
+}
+
+final volumeProvider =
+    StateNotifierProvider<VolumeProvider, double>((ref) => VolumeProvider());
diff --git a/lib/provider/youtube_provider.dart b/lib/provider/youtube_provider.dart
new file mode 100644
index 00000000..0e7b7d0e
--- /dev/null
+++ b/lib/provider/youtube_provider.dart
@@ -0,0 +1,8 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotube/provider/user_preferences_provider.dart';
+import 'package:spotube/services/youtube/youtube.dart';
+
+final youtubeProvider = Provider<YoutubeEndpoints>((ref) {
+  final preferences = ref.watch(userPreferencesProvider);
+  return YoutubeEndpoints(preferences);
+});
diff --git a/lib/services/audio_player.dart b/lib/services/audio_player.dart
deleted file mode 100644
index 01e33a64..00000000
--- a/lib/services/audio_player.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-import 'package:audioplayers/audioplayers.dart';
-
-final audioPlayer = AudioPlayer();
diff --git a/lib/services/audio_player/audio_player.dart b/lib/services/audio_player/audio_player.dart
new file mode 100644
index 00000000..fd0e5a5a
--- /dev/null
+++ b/lib/services/audio_player/audio_player.dart
@@ -0,0 +1,143 @@
+import 'package:catcher/catcher.dart';
+import 'package:spotube/services/audio_player/mk_state_player.dart';
+// import 'package:just_audio/just_audio.dart' as ja;
+import 'dart:async';
+
+import 'package:media_kit/media_kit.dart' as mk;
+
+import 'package:spotube/models/spotube_track.dart';
+import 'package:spotube/services/audio_player/loop_mode.dart';
+import 'package:spotube/services/audio_player/playback_state.dart';
+
+part 'audio_players_streams_mixin.dart';
+part 'audio_player_impl.dart';
+
+abstract class AudioPlayerInterface {
+  final MkPlayerWithState _mkPlayer;
+  // final ja.AudioPlayer? _justAudio;
+
+  AudioPlayerInterface() : _mkPlayer = MkPlayerWithState()
+  // _mkPlayer = _mkSupportedPlatform ? MkPlayerWithState() : null,
+  // _justAudio = !_mkSupportedPlatform ? ja.AudioPlayer() : null
+  {
+    _mkPlayer.streams.error.listen((event) {
+      Catcher.reportCheckedError(event, StackTrace.current);
+    });
+  }
+
+  /// Whether the current platform supports the audioplayers plugin
+  static const bool _mkSupportedPlatform = true;
+  // DesktopTools.platform.isWindows || DesktopTools.platform.isLinux;
+
+  bool get mkSupportedPlatform => _mkSupportedPlatform;
+
+  Future<Duration?> get duration async {
+    return _mkPlayer.state.duration;
+    // if (mkSupportedPlatform) {
+    // } else {
+    //   return _justAudio!.duration;
+    // }
+  }
+
+  Future<Duration?> get position async {
+    return _mkPlayer.state.position;
+    // if (mkSupportedPlatform) {
+    // } else {
+    //   return _justAudio!.position;
+    // }
+  }
+
+  Future<Duration?> get bufferedPosition async {
+    if (mkSupportedPlatform) {
+      // audioplayers doesn't have the capability to get buffered position
+      return null;
+    } else {
+      return null;
+    }
+  }
+
+  bool get hasSource {
+    return _mkPlayer.playlist.medias.isNotEmpty;
+    // if (mkSupportedPlatform) {
+    //   return _mkPlayer.playlist.medias.isNotEmpty;
+    // } else {
+    //   return _justAudio!.audioSource != null;
+    // }
+  }
+
+  // states
+  bool get isPlaying {
+    return _mkPlayer.state.playing;
+    // if (mkSupportedPlatform) {
+    //   return _mkPlayer.state.playing;
+    // } else {
+    //   return _justAudio!.playing;
+    // }
+  }
+
+  bool get isPaused {
+    return !_mkPlayer.state.playing;
+    // if (mkSupportedPlatform) {
+    //   return !_mkPlayer.state.playing;
+    // } else {
+    //   return !isPlaying;
+    // }
+  }
+
+  bool get isStopped {
+    return !hasSource;
+    // if (mkSupportedPlatform) {
+    // return !hasSource;
+    // } else {
+    //   return _justAudio!.processingState == ja.ProcessingState.idle;
+    // }
+  }
+
+  Future<bool> get isCompleted async {
+    return _mkPlayer.state.completed;
+    // if (mkSupportedPlatform) {
+    // return _mkPlayer.state.completed;
+    // } else {
+    //   return _justAudio!.processingState == ja.ProcessingState.completed;
+    // }
+  }
+
+  Future<bool> get isShuffled async {
+    return _mkPlayer.shuffled;
+    // if (mkSupportedPlatform) {
+    //   return _mkPlayer.shuffled;
+    // } else {
+    //   return _justAudio!.shuffleModeEnabled;
+    // }
+  }
+
+  Future<PlaybackLoopMode> get loopMode async {
+    return PlaybackLoopMode.fromPlaylistMode(_mkPlayer.loopMode);
+    // if (mkSupportedPlatform) {
+    //   return PlaybackLoopMode.fromPlaylistMode(_mkPlayer.loopMode);
+    // } else {
+    //   return PlaybackLoopMode.fromLoopMode(_justAudio!.loopMode);
+    // }
+  }
+
+  /// Returns the current volume of the player, between 0 and 1
+  double get volume {
+    return _mkPlayer.state.volume / 100;
+    // if (mkSupportedPlatform) {
+    //   return _mkPlayer.state.volume / 100;
+    // } else {
+    //   return _justAudio!.volume;
+    // }
+  }
+
+  bool get isBuffering {
+    return false;
+    // if (mkSupportedPlatform) {
+    //   // audioplayers doesn't have the capability to get buffering state
+    //   return false;
+    // } else {
+    //   return _justAudio!.processingState == ja.ProcessingState.buffering ||
+    //       _justAudio!.processingState == ja.ProcessingState.loading;
+    // }
+  }
+}
diff --git a/lib/services/audio_player/audio_player_impl.dart b/lib/services/audio_player/audio_player_impl.dart
new file mode 100644
index 00000000..cca8c36c
--- /dev/null
+++ b/lib/services/audio_player/audio_player_impl.dart
@@ -0,0 +1,305 @@
+part of 'audio_player.dart';
+
+final audioPlayer = SpotubeAudioPlayer();
+
+class SpotubeAudioPlayer extends AudioPlayerInterface
+    with SpotubeAudioPlayersStreams {
+  Object _resolveUrlType(String url) {
+    // if (mkSupportedPlatform) {
+    return mk.Media(url);
+    // } else {
+    //   if (url.startsWith("https")) {
+    //     return ja.AudioSource.uri(Uri.parse(url));
+    //   } else {
+    //     return ja.AudioSource.file(url);
+    //   }
+    // }
+  }
+
+  Future<void> preload(String url) async {
+    throw UnimplementedError();
+    // final urlType = _resolveUrlType(url);
+    // if (mkSupportedPlatform && urlType is ap.Source) {
+    //   // audioplayers doesn't have the capability to preload
+    //   return;
+    // } else {
+    //   return;
+    // }
+  }
+
+  Future<void> play(String url) async {
+    final urlType = _resolveUrlType(url);
+    // if (mkSupportedPlatform && urlType is mk.Media) {
+    await _mkPlayer.open(urlType as mk.Media, play: true);
+    // } else {
+    //   if (_justAudio?.audioSource is ja.ProgressiveAudioSource &&
+    //       (_justAudio?.audioSource as ja.ProgressiveAudioSource)
+    //               .uri
+    //               .toString() ==
+    //           url) {
+    //     await _justAudio?.play();
+    //   } else {
+    //     await _justAudio?.stop();
+    //     await _justAudio?.setAudioSource(
+    //       urlType as ja.AudioSource,
+    //       preload: true,
+    //     );
+    //     await _justAudio?.play();
+    //   }
+    // }
+  }
+
+  Future<void> pause() async {
+    await _mkPlayer.pause();
+    // await _justAudio?.pause();
+  }
+
+  Future<void> resume() async {
+    await _mkPlayer.play();
+    // await _justAudio?.play();
+  }
+
+  Future<void> stop() async {
+    await _mkPlayer.stop();
+    // await _justAudio?.stop();
+    // await _justAudio?.setShuffleModeEnabled(false);
+    // await _justAudio?.setLoopMode(ja.LoopMode.off);
+  }
+
+  Future<void> seek(Duration position) async {
+    await _mkPlayer.seek(position);
+    // await _justAudio?.seek(position);
+  }
+
+  /// Volume is between 0 and 1
+  Future<void> setVolume(double volume) async {
+    assert(volume >= 0 && volume <= 1);
+    await _mkPlayer.setVolume(volume * 100);
+    // await _justAudio?.setVolume(volume);
+  }
+
+  Future<void> setSpeed(double speed) async {
+    await _mkPlayer.setRate(speed);
+    // await _justAudio?.setSpeed(speed);
+  }
+
+  Future<void> dispose() async {
+    await _mkPlayer.dispose();
+    // await _justAudio?.dispose();
+  }
+
+  // Playlist related
+
+  Future<void> openPlaylist(
+    List<String> tracks, {
+    bool autoPlay = true,
+    int initialIndex = 0,
+  }) async {
+    assert(tracks.isNotEmpty);
+    assert(initialIndex <= tracks.length - 1);
+    // if (mkSupportedPlatform) {
+    await _mkPlayer.open(
+      mk.Playlist(
+        tracks.map(mk.Media.new).toList(),
+        index: initialIndex,
+      ),
+      play: autoPlay,
+    );
+    // } else {
+    // await _justAudio!.setAudioSource(
+    //   ja.ConcatenatingAudioSource(
+    //     useLazyPreparation: true,
+    //     children:
+    //         tracks.map((e) => ja.AudioSource.uri(Uri.parse(e))).toList(),
+    //   ),
+    //   preload: true,
+    //   initialIndex: initialIndex,
+    // );
+    // if (autoPlay) {
+    //   await _justAudio!.play();
+    // }
+    // }
+  }
+
+  List<SpotubeTrack> resolveTracksForSource(List<SpotubeTrack> tracks) {
+    return tracks.where((e) => sources.contains(e.ytUri)).toList();
+  }
+
+  bool tracksExistsInPlaylist(List<SpotubeTrack> tracks) {
+    return resolveTracksForSource(tracks).length == tracks.length;
+  }
+
+  List<String> get sources {
+    // if (mkSupportedPlatform) {
+    return _mkPlayer.playlist.medias.map((e) => e.uri).toList();
+    // } else {
+    //   return _justAudio!.sequenceState?.effectiveSequence
+    //           .map((e) => (e as ja.UriAudioSource).uri.toString())
+    //           .toList() ??
+    //       <String>[];
+    // }
+  }
+
+  String? get currentSource {
+    // if (mkSupportedPlatform) {
+    return _mkPlayer.playlist.medias
+        .elementAtOrNull(_mkPlayer.playlist.index)
+        ?.uri;
+    // } else {
+    //   return (_justAudio?.sequenceState?.effectiveSequence
+    //               .elementAtOrNull(_justAudio!.sequenceState!.currentIndex)
+    //           as ja.UriAudioSource?)
+    //       ?.uri
+    //       .toString();
+    // }
+  }
+
+  String? get nextSource {
+    // if (mkSupportedPlatform) {
+    return _mkPlayer.playlist.medias
+        .elementAtOrNull(_mkPlayer.playlist.index + 1)
+        ?.uri;
+    // } else {
+    //   return (_justAudio?.sequenceState?.effectiveSequence
+    //               .elementAtOrNull(_justAudio!.sequenceState!.currentIndex + 1)
+    //           as ja.UriAudioSource?)
+    //       ?.uri
+    //       .toString();
+    // }
+  }
+
+  String? get previousSource {
+    // if (mkSupportedPlatform) {
+    return _mkPlayer.playlist.medias
+        .elementAtOrNull(_mkPlayer.playlist.index - 1)
+        ?.uri;
+    // } else {
+    //   return (_justAudio?.sequenceState?.effectiveSequence
+    //               .elementAtOrNull(_justAudio!.sequenceState!.currentIndex - 1)
+    //           as ja.UriAudioSource?)
+    //       ?.uri
+    //       .toString();
+    // }
+  }
+
+  Future<void> skipToNext() async {
+    // if (mkSupportedPlatform) {
+    await _mkPlayer.next();
+    // } else {
+    //   await _justAudio!.seekToNext();
+    // }
+  }
+
+  Future<void> skipToPrevious() async {
+    // if (mkSupportedPlatform) {
+    await _mkPlayer.previous();
+    // } else {
+    //   await _justAudio!.seekToPrevious();
+    // }
+  }
+
+  Future<void> jumpTo(int index) async {
+    // if (mkSupportedPlatform) {
+    await _mkPlayer.jump(index);
+    // } else {
+    //   await _justAudio!.seek(Duration.zero, index: index);
+    // }
+  }
+
+  Future<void> addTrack(String url) async {
+    final urlType = _resolveUrlType(url);
+    // if (mkSupportedPlatform && urlType is mk.Media) {
+    await _mkPlayer.add(urlType as mk.Media);
+    // } else {
+    //   await (_justAudio!.audioSource as ja.ConcatenatingAudioSource)
+    //       .add(urlType as ja.AudioSource);
+    // }
+  }
+
+  Future<void> addTrackAt(String url, int index) async {
+    final urlType = _resolveUrlType(url);
+    // if (mkSupportedPlatform && urlType is mk.Media) {
+    await _mkPlayer.insert(index, urlType as mk.Media);
+    // } else {
+    //   await (_justAudio!.audioSource as ja.ConcatenatingAudioSource)
+    //       .insert(index, urlType as ja.AudioSource);
+    // }
+  }
+
+  Future<void> removeTrack(int index) async {
+    // if (mkSupportedPlatform) {
+    await _mkPlayer.remove(index);
+    // } else {
+    //   await (_justAudio!.audioSource as ja.ConcatenatingAudioSource)
+    //       .removeAt(index);
+    // }
+  }
+
+  Future<void> moveTrack(int from, int to) async {
+    // if (mkSupportedPlatform) {
+    await _mkPlayer.move(from, to);
+    // } else {
+    //   await (_justAudio!.audioSource as ja.ConcatenatingAudioSource)
+    //       .move(from, to);
+    // }
+  }
+
+  Future<void> replaceSource(
+    String oldSource,
+    String newSource, {
+    bool exclusive = false,
+  }) async {
+    final oldSourceIndex = sources.indexOf(oldSource);
+    if (oldSourceIndex == -1) return;
+
+    // if (mkSupportedPlatform) {
+    _mkPlayer.replace(oldSource, newSource);
+    // } else {
+    //   final playlist = _justAudio!.audioSource as ja.ConcatenatingAudioSource;
+
+    //   print('oldSource: $oldSource');
+    //   print('newSource: $newSource');
+    //   final oldSourceIndexInPlaylist =
+    //       _justAudio?.sequenceState?.effectiveSequence.indexWhere(
+    //     (e) => (e as ja.UriAudioSource).uri.toString() == oldSource,
+    //   );
+
+    //   print('oldSourceIndexInPlaylist: $oldSourceIndexInPlaylist');
+
+    //   // ignores non existing source
+    //   if (oldSourceIndexInPlaylist == null || oldSourceIndexInPlaylist == -1) {
+    //     return;
+    //   }
+
+    //   await playlist.removeAt(oldSourceIndexInPlaylist);
+    //   await playlist.insert(
+    //     oldSourceIndexInPlaylist,
+    //     ja.AudioSource.uri(Uri.parse(newSource)),
+    //   );
+    // }
+  }
+
+  Future<void> clearPlaylist() async {
+    // if (mkSupportedPlatform) {
+    _mkPlayer.stop();
+    // } else {
+    //   await (_justAudio!.audioSource as ja.ConcatenatingAudioSource).clear();
+    // }
+  }
+
+  Future<void> setShuffle(bool shuffle) async {
+    // if (mkSupportedPlatform) {
+    await _mkPlayer.setShuffle(shuffle);
+    // } else {
+    //   await _justAudio!.setShuffleModeEnabled(shuffle);
+    // }
+  }
+
+  Future<void> setLoopMode(PlaybackLoopMode loop) async {
+    // if (mkSupportedPlatform) {
+    await _mkPlayer.setPlaylistMode(loop.toPlaylistMode());
+    // } else {
+    //   await _justAudio!.setLoopMode(loop.toLoopMode());
+    // }
+  }
+}
diff --git a/lib/services/audio_player/audio_players_streams_mixin.dart b/lib/services/audio_player/audio_players_streams_mixin.dart
new file mode 100644
index 00000000..b3d43602
--- /dev/null
+++ b/lib/services/audio_player/audio_players_streams_mixin.dart
@@ -0,0 +1,143 @@
+part of 'audio_player.dart';
+
+mixin SpotubeAudioPlayersStreams on AudioPlayerInterface {
+  // stream getters
+  Stream<Duration> get durationStream {
+    // if (mkSupportedPlatform) {
+    return _mkPlayer.streams.duration;
+    // } else {
+    //   return _justAudio!.durationStream
+    //       .where((event) => event != null)
+    //       .map((event) => event!)
+    //       ;
+    // }
+  }
+
+  Stream<Duration> get positionStream {
+    // if (mkSupportedPlatform) {
+    return _mkPlayer.streams.position;
+    // } else {
+    //   return _justAudio!.positionStream;
+    // }
+  }
+
+  Stream<Duration> get bufferedPositionStream {
+    // if (mkSupportedPlatform) {
+    // audioplayers doesn't have the capability to get buffered position
+    return _mkPlayer.streams.buffer;
+    // } else {
+    //   return _justAudio!.bufferedPositionStream;
+    // }
+  }
+
+  Stream<void> get completedStream {
+    // if (mkSupportedPlatform) {
+    return _mkPlayer.streams.completed;
+    // } else {
+    //   return _justAudio!.playerStateStream
+    //       .where(
+    //           (event) => event.processingState == ja.ProcessingState.completed)
+    //       ;
+    // }
+  }
+
+  /// Stream that emits when the player is almost (%) complete
+  Stream<int> percentCompletedStream(double percent) {
+    return positionStream
+        .asyncMap(
+          (position) async => (await duration)?.inSeconds == 0
+              ? 0
+              : (position.inSeconds /
+                      ((await duration)?.inSeconds ?? 100) *
+                      100)
+                  .toInt(),
+        )
+        .where((event) => event >= percent);
+  }
+
+  Stream<bool> get playingStream {
+    // if (mkSupportedPlatform) {
+    return _mkPlayer.streams.playing;
+    // } else {
+    //   return _justAudio!.playingStream;
+    // }
+  }
+
+  Stream<bool> get shuffledStream {
+    // if (mkSupportedPlatform) {
+    return _mkPlayer.shuffleStream;
+    // } else {
+    //   return _justAudio!.shuffleModeEnabledStream;
+    // }
+  }
+
+  Stream<PlaybackLoopMode> get loopModeStream {
+    // if (mkSupportedPlatform) {
+    return _mkPlayer.loopModeStream.map(PlaybackLoopMode.fromPlaylistMode);
+    // } else {
+    //   return _justAudio!.loopModeStream
+    //       .map(PlaybackLoopMode.fromLoopMode)
+    //       ;
+    // }
+  }
+
+  Stream<double> get volumeStream {
+    // if (mkSupportedPlatform) {
+    return _mkPlayer.streams.volume.map((event) => event / 100);
+    // } else {
+    //   return _justAudio!.volumeStream;
+    // }
+  }
+
+  Stream<bool> get bufferingStream {
+    // if (mkSupportedPlatform) {
+    return Stream.value(false);
+    // } else {
+    //   return _justAudio!.playerStateStream
+    //       .map(
+    //         (event) =>
+    //             event.processingState == ja.ProcessingState.buffering ||
+    //             event.processingState == ja.ProcessingState.loading,
+    //       )
+    //       ;
+    // }
+  }
+
+  Stream<AudioPlaybackState> get playerStateStream {
+    // if (mkSupportedPlatform) {
+    return _mkPlayer.playerStateStream;
+    // } else {
+    //   return _justAudio!.playerStateStream
+    //       .map(AudioPlaybackState.fromJaPlayerState)
+    //       ;
+    // }
+  }
+
+  Stream<int> get currentIndexChangedStream {
+    // if (mkSupportedPlatform) {
+    return _mkPlayer.indexChangeStream;
+    // } else {
+    //   return _justAudio!.sequenceStateStream
+    //       .map((event) => event?.currentIndex ?? -1)
+    //       ;
+    // }
+  }
+
+  Stream<String> get activeSourceChangedStream {
+    // if (mkSupportedPlatform) {
+    return _mkPlayer.indexChangeStream
+        .map((event) {
+          return _mkPlayer.playlist.medias.elementAtOrNull(event)?.uri;
+        })
+        .where((event) => event != null)
+        .cast<String>();
+    // } else {
+    //   return _justAudio!.sequenceStateStream
+    //       .map((event) {
+    //         return (event?.currentSource as ja.UriAudioSource?)?.uri.toString();
+    //       })
+    //       .where((event) => event != null)
+    //       .cast<String>();
+    // }
+  }
+}
diff --git a/lib/services/audio_player/loop_mode.dart b/lib/services/audio_player/loop_mode.dart
new file mode 100644
index 00000000..78da43ba
--- /dev/null
+++ b/lib/services/audio_player/loop_mode.dart
@@ -0,0 +1,90 @@
+import 'package:audio_service/audio_service.dart';
+import 'package:media_kit/media_kit.dart';
+
+/// An unified loop mode for both [LoopMode] and [PlaylistMode]
+enum PlaybackLoopMode {
+  all,
+  one,
+  none;
+
+  // static PlaybackLoopMode fromLoopMode(LoopMode loopMode) {
+  //   switch (loopMode) {
+  //     case LoopMode.all:
+  //       return PlaybackLoopMode.all;
+  //     case LoopMode.one:
+  //       return PlaybackLoopMode.one;
+  //     case LoopMode.off:
+  //       return PlaybackLoopMode.none;
+  //   }
+  // }
+
+  // LoopMode toLoopMode() {
+  //   switch (this) {
+  //     case PlaybackLoopMode.all:
+  //       return LoopMode.all;
+  //     case PlaybackLoopMode.one:
+  //       return LoopMode.one;
+  //     case PlaybackLoopMode.none:
+  //       return LoopMode.off;
+  //   }
+  // }
+
+  static PlaybackLoopMode fromPlaylistMode(PlaylistMode mode) {
+    switch (mode) {
+      case PlaylistMode.single:
+        return PlaybackLoopMode.one;
+      case PlaylistMode.loop:
+        return PlaybackLoopMode.all;
+      case PlaylistMode.none:
+        return PlaybackLoopMode.none;
+    }
+  }
+
+  PlaylistMode toPlaylistMode() {
+    switch (this) {
+      case PlaybackLoopMode.all:
+        return PlaylistMode.loop;
+      case PlaybackLoopMode.one:
+        return PlaylistMode.single;
+      case PlaybackLoopMode.none:
+        return PlaylistMode.none;
+    }
+  }
+
+  static PlaybackLoopMode fromAudioServiceRepeatMode(
+      AudioServiceRepeatMode mode) {
+    switch (mode) {
+      case AudioServiceRepeatMode.all:
+      case AudioServiceRepeatMode.group:
+        return PlaybackLoopMode.all;
+      case AudioServiceRepeatMode.one:
+        return PlaybackLoopMode.one;
+      case AudioServiceRepeatMode.none:
+        return PlaybackLoopMode.none;
+    }
+  }
+
+  AudioServiceRepeatMode toAudioServiceRepeatMode() {
+    switch (this) {
+      case PlaybackLoopMode.all:
+        return AudioServiceRepeatMode.all;
+      case PlaybackLoopMode.one:
+        return AudioServiceRepeatMode.one;
+      case PlaybackLoopMode.none:
+        return AudioServiceRepeatMode.none;
+    }
+  }
+
+  static PlaybackLoopMode fromString(String? value) {
+    switch (value) {
+      case 'all':
+        return PlaybackLoopMode.all;
+      case 'one':
+        return PlaybackLoopMode.one;
+      case 'none':
+        return PlaybackLoopMode.none;
+      default:
+        return PlaybackLoopMode.none;
+    }
+  }
+}
diff --git a/lib/services/audio_player/mk_state_player.dart b/lib/services/audio_player/mk_state_player.dart
new file mode 100644
index 00000000..053cd89f
--- /dev/null
+++ b/lib/services/audio_player/mk_state_player.dart
@@ -0,0 +1,306 @@
+import 'dart:async';
+
+import 'package:collection/collection.dart';
+import 'package:media_kit/media_kit.dart';
+// ignore: implementation_imports
+import 'package:media_kit/src/models/playable.dart';
+import 'package:spotube/services/audio_player/playback_state.dart';
+
+/// MediaKit [Player] by default doesn't have a state stream.
+/// This class adds a state stream to the [Player] class.
+class MkPlayerWithState extends Player {
+  final StreamController<AudioPlaybackState> _playerStateStream;
+  final StreamController<Playlist> _playlistStream;
+  final StreamController<bool> _shuffleStream;
+  final StreamController<PlaylistMode> _loopModeStream;
+
+  late final List<StreamSubscription> _subscriptions;
+
+  bool _shuffled;
+  PlaylistMode _loopMode;
+
+  Playlist? _playlist;
+  List<Media>? _tempMedias;
+
+  MkPlayerWithState({super.configuration})
+      : _playerStateStream = StreamController.broadcast(),
+        _shuffleStream = StreamController.broadcast(),
+        _loopModeStream = StreamController.broadcast(),
+        _playlistStream = StreamController.broadcast(),
+        _shuffled = false,
+        _loopMode = PlaylistMode.none {
+    _subscriptions = [
+      streams.buffering.listen((event) {
+        _playerStateStream.add(AudioPlaybackState.buffering);
+      }),
+      streams.playing.listen((playing) {
+        if (playing) {
+          _playerStateStream.add(AudioPlaybackState.playing);
+        } else {
+          _playerStateStream.add(AudioPlaybackState.paused);
+        }
+      }),
+      streams.position.listen((position) async {
+        final isComplete = state.duration != Duration.zero &&
+            position != Duration.zero &&
+            state.duration.inSeconds == position.inSeconds;
+
+        if (!isComplete || _playlist == null) return;
+        _playerStateStream.add(AudioPlaybackState.completed);
+
+        if (loopMode == PlaylistMode.single) {
+          await super.open(_playlist!.medias[_playlist!.index], play: true);
+        } else {
+          await next();
+          await Future.delayed(const Duration(milliseconds: 250), play);
+        }
+      }),
+      streams.playlist.listen((event) {
+        if (event.medias.isEmpty) {
+          _playerStateStream.add(AudioPlaybackState.stopped);
+        }
+      }),
+    ];
+  }
+
+  bool get shuffled => _shuffled;
+  PlaylistMode get loopMode => _loopMode;
+  Playlist get playlist => _playlist ?? const Playlist([], index: -1);
+
+  Stream<AudioPlaybackState> get playerStateStream => _playerStateStream.stream;
+  Stream<bool> get shuffleStream => _shuffleStream.stream;
+  Stream<PlaylistMode> get loopModeStream => _loopModeStream.stream;
+  Stream<Playlist> get playlistStream => _playlistStream.stream;
+  Stream<int> get indexChangeStream {
+    int oldIndex = playlist.index;
+    return playlistStream.map((event) => event.index).where((newIndex) {
+      if (newIndex != oldIndex) {
+        oldIndex = newIndex;
+        return true;
+      }
+      return false;
+    });
+  }
+
+  set playlist(Playlist playlist) {
+    _playlist = playlist;
+    _playlistStream.add(playlist);
+  }
+
+  @override
+  Future<void> setShuffle(bool shuffle) async {
+    _shuffled = shuffle;
+    if (shuffle) {
+      _tempMedias = _playlist!.medias;
+      final active = _playlist!.medias[_playlist!.index];
+      final newMedias = _playlist!.medias.toList()..shuffle();
+      playlist = _playlist!.copyWith(
+        medias: newMedias,
+        index: newMedias.indexOf(active),
+      );
+    } else {
+      if (_tempMedias == null) return;
+      playlist = _playlist!.copyWith(
+        medias: _tempMedias!,
+        index: _tempMedias?.indexOf(
+          _playlist!.medias[_playlist!.index],
+        ),
+      );
+      _tempMedias = null;
+    }
+    await super.setShuffle(shuffle);
+    _shuffleStream.add(shuffle);
+  }
+
+  @override
+  Future<void> setPlaylistMode(PlaylistMode playlistMode) async {
+    _loopMode = playlistMode;
+    await super.setPlaylistMode(playlistMode);
+    _loopModeStream.add(playlistMode);
+  }
+
+  Future<void> stop() async {
+    await pause();
+    await seek(Duration.zero);
+
+    _loopMode = PlaylistMode.none;
+    _shuffled = false;
+    _playlist = null;
+    _tempMedias = null;
+    _playerStateStream.add(AudioPlaybackState.stopped);
+  }
+
+  @override
+  FutureOr<void> dispose({int code = 0}) {
+    for (var element in _subscriptions) {
+      element.cancel();
+    }
+    return super.dispose(code: code);
+  }
+
+  @override
+  Future<void> open(
+    Playable playable, {
+    bool play = true,
+  }) async {
+    await stop();
+    if (playable is Playlist) {
+      playlist = playable;
+      super.open(playable.medias[playable.index], play: play);
+    }
+    await super.open(playable, play: play);
+  }
+
+  @override
+  FutureOr<void> next() {
+    if (_playlist == null || _playlist!.index + 1 >= _playlist!.medias.length) {
+      return null;
+    }
+
+    final isLast = _playlist!.index == _playlist!.medias.length - 1;
+
+    if (loopMode == PlaylistMode.loop && isLast) {
+      playlist = _playlist!.copyWith(index: 0);
+      return super.open(_playlist!.medias[_playlist!.index], play: true);
+    } else if (!isLast) {
+      playlist = _playlist!.copyWith(index: _playlist!.index + 1);
+      return super.open(_playlist!.medias[_playlist!.index], play: true);
+    }
+  }
+
+  @override
+  FutureOr<void> previous() {
+    if (_playlist == null || _playlist!.index - 1 < 0) return null;
+
+    if (loopMode == PlaylistMode.loop && _playlist!.index == 0) {
+      playlist = _playlist!.copyWith(index: _playlist!.medias.length - 1);
+      return super.open(_playlist!.medias[_playlist!.index], play: true);
+    } else if (_playlist!.index != 0) {
+      playlist = _playlist!.copyWith(index: _playlist!.index - 1);
+      return super.open(_playlist!.medias[_playlist!.index], play: true);
+    }
+  }
+
+  @override
+  FutureOr<void> jump(int index) {
+    if (_playlist == null || index < 0 || index >= _playlist!.medias.length) {
+      return null;
+    }
+
+    playlist = _playlist!.copyWith(index: index);
+    return super.open(_playlist!.medias[index], play: true);
+  }
+
+  @override
+  FutureOr<void> move(int from, int to) {
+    if (_playlist == null ||
+        from >= _playlist!.medias.length ||
+        to >= _playlist!.medias.length) return null;
+
+    final active = _playlist!.medias[_playlist!.index];
+    final newPlaylist = _playlist!.copyWith(
+      medias: _playlist!.medias.mapIndexed((index, element) {
+        if (index == from) {
+          return _playlist!.medias[to];
+        } else if (index == to) {
+          return _playlist!.medias[from];
+        }
+        return element;
+      }).toList(),
+    );
+    playlist = _playlist!.copyWith(
+      index: newPlaylist.medias.indexOf(active),
+      medias: newPlaylist.medias,
+    );
+  }
+
+  /// This replaces the old source with a new one
+  ///
+  /// If the old source is playing, the new one will play
+  /// from the beginning
+  ///
+  /// This doesn't work when [playlist] is null
+  void replace(String oldUrl, String newUrl) {
+    if (_playlist == null) {
+      return;
+    }
+
+    final isOldUrlPlaying = _playlist!.medias[_playlist!.index].uri == oldUrl;
+
+    for (var i = 0; i < _playlist!.medias.length - 1; i++) {
+      final media = _playlist!.medias[i];
+      if (media.uri == oldUrl) {
+        if (isOldUrlPlaying) {
+          pause();
+        }
+        final newMedias = _playlist!.medias.toList();
+        newMedias[i] = Media(newUrl, extras: media.extras);
+        playlist = _playlist!.copyWith(medias: newMedias);
+        if (isOldUrlPlaying) {
+          super.open(
+            newMedias[i],
+            play: true,
+          );
+        }
+        break;
+      }
+    }
+  }
+
+  @override
+  FutureOr<void> add(Media media) {
+    if (_playlist == null) return null;
+
+    playlist = _playlist!.copyWith(
+      medias: [..._playlist!.medias, media],
+    );
+
+    if (shuffled && _tempMedias != null) {
+      _tempMedias!.add(media);
+    }
+  }
+
+  FutureOr<void> insert(int index, Media media) {
+    if (_playlist == null ||
+        index < 0 ||
+        index > _playlist!.medias.length - 1) {
+      return null;
+    }
+
+    final newMedias = _playlist!.medias.toList()..insert(index, media);
+
+    playlist = _playlist!.copyWith(
+      medias: newMedias,
+      index: newMedias.indexOf(_playlist!.medias[_playlist!.index]),
+    );
+
+    if (shuffled && _tempMedias != null) {
+      _tempMedias!.insert(index, media);
+    }
+  }
+
+  /// Doesn't work when active media is the one to be removed
+  @override
+  FutureOr<void> remove(int index) async {
+    if (_playlist == null ||
+        index < 0 ||
+        index > _playlist!.medias.length - 1 ||
+        _playlist!.index == index) {
+      return null;
+    }
+
+    final targetItem = _playlist!.medias.elementAtOrNull(index);
+    if (targetItem == null) return null;
+
+    if (shuffled && _tempMedias != null) {
+      _tempMedias!.remove(targetItem);
+    }
+
+    final newMedias = _playlist!.medias.toList()..removeAt(index);
+
+    playlist = _playlist!.copyWith(
+      medias: newMedias,
+      index: newMedias.indexOf(_playlist!.medias[_playlist!.index]),
+    );
+  }
+}
diff --git a/lib/services/audio_player/playback_state.dart b/lib/services/audio_player/playback_state.dart
new file mode 100644
index 00000000..a4743a48
--- /dev/null
+++ b/lib/services/audio_player/playback_state.dart
@@ -0,0 +1,28 @@
+// import 'package:just_audio/just_audio.dart';
+
+/// An unified playback state enum
+enum AudioPlaybackState {
+  playing,
+  paused,
+  completed,
+  buffering,
+  stopped;
+
+  // static AudioPlaybackState fromJaPlayerState(PlayerState state) {
+  //   if (state.playing) {
+  //     return AudioPlaybackState.playing;
+  //   }
+
+  //   switch (state.processingState) {
+  //     case ProcessingState.idle:
+  //       return AudioPlaybackState.stopped;
+  //     case ProcessingState.ready:
+  //       return AudioPlaybackState.paused;
+  //     case ProcessingState.completed:
+  //       return AudioPlaybackState.completed;
+  //     case ProcessingState.loading:
+  //     case ProcessingState.buffering:
+  //       return AudioPlaybackState.buffering;
+  //   }
+  // }
+}
diff --git a/lib/services/audio_services/audio_services.dart b/lib/services/audio_services/audio_services.dart
new file mode 100644
index 00000000..6d6c9d43
--- /dev/null
+++ b/lib/services/audio_services/audio_services.dart
@@ -0,0 +1,91 @@
+import 'package:audio_service/audio_service.dart';
+import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/models/spotube_track.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/services/audio_player/audio_player.dart';
+import 'package:spotube/services/audio_services/linux_audio_service.dart';
+import 'package:spotube/services/audio_services/mobile_audio_service.dart';
+import 'package:spotube/services/audio_services/windows_audio_service.dart';
+import 'package:spotube/utils/type_conversion_utils.dart';
+
+class AudioServices {
+  final MobileAudioService? mobile;
+  final WindowsAudioService? smtc;
+  final LinuxAudioService? mpris;
+
+  AudioServices(this.mobile, this.smtc, this.mpris);
+
+  static Future<AudioServices> create(
+    Ref ref,
+    ProxyPlaylistNotifier playback,
+  ) async {
+    final mobile =
+        DesktopTools.platform.isMobile || DesktopTools.platform.isMacOS
+            ? await AudioService.init(
+                builder: () => MobileAudioService(playback),
+                config: const AudioServiceConfig(
+                  androidNotificationChannelId: 'com.krtirtho.Spotube',
+                  androidNotificationChannelName: 'Spotube',
+                  androidNotificationOngoing: true,
+                ),
+              )
+            : null;
+    final smtc = DesktopTools.platform.isWindows
+        ? WindowsAudioService(ref, playback)
+        : null;
+    final mpris =
+        DesktopTools.platform.isLinux ? LinuxAudioService(ref, playback) : null;
+
+    if (mpris != null) {
+      playback.addListener((state) {
+        mpris.player.updateProperties();
+      });
+      audioPlayer.playerStateStream.listen((state) {
+        mpris.player.updateProperties();
+      });
+      audioPlayer.positionStream.listen((state) async {
+        await mpris.player.emitPropertiesChanged(
+          "org.mpris.MediaPlayer2.Player",
+          changedProperties: {
+            "Position": (await mpris.player.getPosition()).returnValues.first,
+          },
+        );
+      });
+    }
+
+    return AudioServices(mobile, smtc, mpris);
+  }
+
+  Future<void> addTrack(Track track) async {
+    await smtc?.addTrack(track);
+    mobile?.addItem(MediaItem(
+      id: track.id!,
+      album: track.album?.name ?? "",
+      title: track.name!,
+      artist: TypeConversionUtils.artists_X_String(track.artists ?? <Artist>[]),
+      duration: track is SpotubeTrack
+          ? track.ytTrack.duration
+          : Duration(milliseconds: track.durationMs ?? 0),
+      artUri: Uri.parse(TypeConversionUtils.image_X_UrlString(
+        track.album?.images ?? <Image>[],
+        placeholder: ImagePlaceholder.albumArt,
+      )),
+      playable: true,
+    ));
+  }
+
+  void activateSession() {
+    mobile?.session?.setActive(true);
+  }
+
+  void deactivateSession() {
+    mobile?.session?.setActive(false);
+  }
+
+  void dispose() {
+    smtc?.dispose();
+    mpris?.dispose();
+  }
+}
diff --git a/lib/services/linux_audio_service.dart b/lib/services/audio_services/linux_audio_service.dart
similarity index 92%
rename from lib/services/linux_audio_service.dart
rename to lib/services/audio_services/linux_audio_service.dart
index 9b30b28e..99d840a4 100644
--- a/lib/services/linux_audio_service.dart
+++ b/lib/services/audio_services/linux_audio_service.dart
@@ -5,8 +5,10 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import 'package:spotube/provider/dbus_provider.dart';
 import 'package:spotube/models/spotube_track.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
-import 'package:spotube/services/audio_player.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/services/audio_player/audio_player.dart';
+import 'package:spotube/services/audio_player/loop_mode.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 import 'package:window_manager/window_manager.dart';
 
@@ -57,7 +59,9 @@ class _MprisMediaPlayer2 extends DBusObject {
 
   /// Gets value of property org.mpris.MediaPlayer2.DesktopEntry
   Future<DBusMethodResponse> getDesktopEntry() async {
-    return DBusMethodSuccessResponse([const DBusString("spotube")]);
+    return DBusMethodSuccessResponse(
+      [const DBusString("/usr/share/application/spotube")],
+    );
   }
 
   /// Gets value of property org.mpris.MediaPlayer2.SupportedUriSchemes
@@ -220,7 +224,7 @@ class _MprisMediaPlayer2 extends DBusObject {
 
 class _MprisMediaPlayer2Player extends DBusObject {
   final Ref ref;
-  final PlaylistQueueNotifier playlistNotifier;
+  final ProxyPlaylistNotifier playlistNotifier;
 
   /// Creates a new object to expose on [path].
   _MprisMediaPlayer2Player(this.ref, this.playlistNotifier)
@@ -235,10 +239,7 @@ class _MprisMediaPlayer2Player extends DBusObject {
     }());
   }
 
-  PlaylistQueue? get playlist => playlistNotifier.state;
-  double get volume => ref.read(VolumeProvider.provider);
-  VolumeProvider get volumeNotifier =>
-      ref.read(VolumeProvider.provider.notifier);
+  ProxyPlaylist get playlist => playlistNotifier.playlist;
 
   void dispose() {
     dbus.unregisterObject(this);
@@ -246,9 +247,9 @@ class _MprisMediaPlayer2Player extends DBusObject {
 
   /// Gets value of property org.mpris.MediaPlayer2.Player.PlaybackStatus
   Future<DBusMethodResponse> getPlaybackStatus() async {
-    final status = PlaylistQueueNotifier.isPlaying
+    final status = audioPlayer.isPlaying
         ? "Playing"
-        : playlist == null
+        : playlist.active == null
             ? "Stopped"
             : "Paused";
     return DBusMethodSuccessResponse([DBusString(status)]);
@@ -258,11 +259,13 @@ class _MprisMediaPlayer2Player extends DBusObject {
 
   /// Gets value of property org.mpris.MediaPlayer2.Player.LoopStatus
   Future<DBusMethodResponse> getLoopStatus() async {
-    return DBusMethodSuccessResponse([
-      /* playlistNotifier.isLoop */ false
-          ? const DBusString("Track")
-          : const DBusString("None"),
-    ]);
+    final loopMode = switch (await audioPlayer.loopMode) {
+      PlaybackLoopMode.all => "Playlist",
+      PlaybackLoopMode.one => "Track",
+      PlaybackLoopMode.none => "None",
+    };
+
+    return DBusMethodSuccessResponse([DBusString(loopMode)]);
   }
 
   /// Sets property org.mpris.MediaPlayer2.Player.LoopStatus
@@ -284,46 +287,43 @@ class _MprisMediaPlayer2Player extends DBusObject {
   /// Gets value of property org.mpris.MediaPlayer2.Player.Shuffle
   Future<DBusMethodResponse> getShuffle() async {
     return DBusMethodSuccessResponse(
-        [DBusBoolean(playlist?.isShuffled ?? false)]);
+        [DBusBoolean(await audioPlayer.isShuffled)]);
   }
 
   /// Sets property org.mpris.MediaPlayer2.Player.Shuffle
   Future<DBusMethodResponse> setShuffle(bool value) async {
-    if (value) {
-      playlistNotifier.shuffle();
-    } else {
-      playlistNotifier.unshuffle();
-    }
+    audioPlayer.setShuffle(value);
     return DBusMethodSuccessResponse();
   }
 
   /// Gets value of property org.mpris.MediaPlayer2.Player.Metadata
   Future<DBusMethodResponse> getMetadata() async {
-    if (playlist == null || playlist!.isLoading) {
+    if (playlist.activeTrack == null || playlist.isFetching) {
       return DBusMethodSuccessResponse([DBusDict.stringVariant({})]);
     }
-    final id = playlist!.active;
+    final id = playlist.activeTrack!.id;
 
     return DBusMethodSuccessResponse([
       DBusDict.stringVariant({
         "mpris:trackid": DBusString("${path.value}/Track/$id"),
-        "mpris:length":
-            DBusInt32((await audioPlayer.getDuration())?.inMicroseconds ?? 0),
+        "mpris:length": DBusInt32(
+          (await audioPlayer.duration)?.inMicroseconds ?? 0,
+        ),
         "mpris:artUrl": DBusString(
           TypeConversionUtils.image_X_UrlString(
-            playlist?.activeTrack.album?.images,
+            playlist.activeTrack?.album?.images,
             placeholder: ImagePlaceholder.albumArt,
           ),
         ),
-        "xesam:album": DBusString(playlist!.activeTrack.album!.name!),
+        "xesam:album": DBusString(playlist.activeTrack!.album!.name!),
         "xesam:artist": DBusArray.string(
-          playlist!.activeTrack.artists!.map((artist) => artist.name!),
+          playlist.activeTrack!.artists!.map((artist) => artist.name!),
         ),
-        "xesam:title": DBusString(playlist!.activeTrack.name!),
+        "xesam:title": DBusString(playlist.activeTrack!.name!),
         "xesam:url": DBusString(
-          playlist!.activeTrack is SpotubeTrack
-              ? (playlist!.activeTrack as SpotubeTrack).ytUri
-              : playlist!.activeTrack.previewUrl!,
+          playlist.activeTrack is SpotubeTrack
+              ? (playlist.activeTrack as SpotubeTrack).ytUri
+              : playlist.activeTrack!.previewUrl ?? "",
         ),
         "xesam:genre": const DBusString("Unknown"),
       }),
@@ -332,19 +332,19 @@ class _MprisMediaPlayer2Player extends DBusObject {
 
   /// Gets value of property org.mpris.MediaPlayer2.Player.Volume
   Future<DBusMethodResponse> getVolume() async {
-    return DBusMethodSuccessResponse([DBusDouble(volume)]);
+    return DBusMethodSuccessResponse([DBusDouble(audioPlayer.volume)]);
   }
 
   /// Sets property org.mpris.MediaPlayer2.Player.Volume
   Future<DBusMethodResponse> setVolume(double value) async {
-    await volumeNotifier.setVolume(value);
+    await audioPlayer.setVolume(value);
     return DBusMethodSuccessResponse();
   }
 
   /// Gets value of property org.mpris.MediaPlayer2.Player.Position
   Future<DBusMethodResponse> getPosition() async {
     return DBusMethodSuccessResponse([
-      DBusInt64((await audioPlayer.getDuration())?.inMicroseconds ?? 0),
+      DBusInt64((await audioPlayer.position)?.inMicroseconds ?? 0),
     ]);
   }
 
@@ -362,7 +362,7 @@ class _MprisMediaPlayer2Player extends DBusObject {
   Future<DBusMethodResponse> getCanGoNext() async {
     return DBusMethodSuccessResponse([
       DBusBoolean(
-        (playlist?.tracks.length ?? 0) > 1,
+        (playlist.tracks.length) > 1,
       )
     ]);
   }
@@ -371,7 +371,7 @@ class _MprisMediaPlayer2Player extends DBusObject {
   Future<DBusMethodResponse> getCanGoPrevious() async {
     return DBusMethodSuccessResponse([
       DBusBoolean(
-        (playlist?.tracks.length ?? 0) > 1,
+        (playlist.tracks.length) > 1,
       )
     ]);
   }
@@ -410,15 +410,15 @@ class _MprisMediaPlayer2Player extends DBusObject {
 
   /// Implementation of org.mpris.MediaPlayer2.Player.Pause()
   Future<DBusMethodResponse> doPause() async {
-    playlistNotifier.pause();
+    await audioPlayer.pause();
     return DBusMethodSuccessResponse();
   }
 
   /// Implementation of org.mpris.MediaPlayer2.Player.PlayPause()
   Future<DBusMethodResponse> doPlayPause() async {
-    PlaylistQueueNotifier.isPlaying
-        ? await playlistNotifier.pause()
-        : await playlistNotifier.resume();
+    audioPlayer.isPlaying
+        ? await audioPlayer.pause()
+        : await audioPlayer.resume();
     return DBusMethodSuccessResponse();
   }
 
@@ -430,13 +430,13 @@ class _MprisMediaPlayer2Player extends DBusObject {
 
   /// Implementation of org.mpris.MediaPlayer2.Player.Play()
   Future<DBusMethodResponse> doPlay() async {
-    playlistNotifier.resume();
+    await audioPlayer.resume();
     return DBusMethodSuccessResponse();
   }
 
   /// Implementation of org.mpris.MediaPlayer2.Player.Seek()
   Future<DBusMethodResponse> doSeek(int offset) async {
-    await playlistNotifier.seek(Duration(microseconds: offset));
+    await audioPlayer.seek(Duration(microseconds: offset));
     return DBusMethodSuccessResponse();
   }
 
@@ -727,7 +727,7 @@ class LinuxAudioService {
   _MprisMediaPlayer2 mp2;
   _MprisMediaPlayer2Player player;
 
-  LinuxAudioService(Ref ref, PlaylistQueueNotifier playlistNotifier)
+  LinuxAudioService(Ref ref, ProxyPlaylistNotifier playlistNotifier)
       : mp2 = _MprisMediaPlayer2(),
         player = _MprisMediaPlayer2Player(ref, playlistNotifier);
 
diff --git a/lib/services/mobile_audio_service.dart b/lib/services/audio_services/mobile_audio_service.dart
similarity index 56%
rename from lib/services/mobile_audio_service.dart
rename to lib/services/audio_services/mobile_audio_service.dart
index ccc1d3d6..e9bf7a3e 100644
--- a/lib/services/mobile_audio_service.dart
+++ b/lib/services/audio_services/mobile_audio_service.dart
@@ -2,38 +2,41 @@ import 'dart:async';
 
 import 'package:audio_service/audio_service.dart';
 import 'package:audio_session/audio_session.dart';
-import 'package:audioplayers/audioplayers.dart';
-import 'package:spotube/provider/playlist_queue_provider.dart';
-import 'package:spotube/services/audio_player.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/services/audio_player/audio_player.dart';
+import 'package:spotube/services/audio_player/loop_mode.dart';
 
 class MobileAudioService extends BaseAudioHandler {
   AudioSession? session;
-  final PlaylistQueueNotifier playlistNotifier;
-  final VolumeProvider volumeNotifier;
+  final ProxyPlaylistNotifier playlistNotifier;
 
-  PlaylistQueue? get playlist => playlistNotifier.state;
+  ProxyPlaylist get playlist => playlistNotifier.state;
 
-  MobileAudioService(this.playlistNotifier, this.volumeNotifier) {
+  MobileAudioService(this.playlistNotifier) {
     AudioSession.instance.then((s) {
       session = s;
       session?.configure(const AudioSessionConfiguration.music());
       s.interruptionEventStream.listen((event) async {
         switch (event.type) {
           case AudioInterruptionType.duck:
-            await volumeNotifier.setVolume(event.begin ? 0.5 : 1.0);
+            await audioPlayer.setVolume(event.begin ? 0.5 : 1.0);
             break;
           case AudioInterruptionType.pause:
           case AudioInterruptionType.unknown:
-            await playlistNotifier.pause();
+            await audioPlayer.pause();
             break;
         }
       });
     });
-    audioPlayer.onPlayerStateChanged.listen((state) async {
+    audioPlayer.playerStateStream.listen((state) async {
       playbackState.add(await _transformEvent());
     });
 
-    audioPlayer.onPositionChanged.listen((pos) async {
+    audioPlayer.positionStream.listen((pos) async {
+      playbackState.add(await _transformEvent());
+    });
+    audioPlayer.bufferedPositionStream.listen((pos) async {
       playbackState.add(await _transformEvent());
     });
   }
@@ -44,33 +47,27 @@ class MobileAudioService extends BaseAudioHandler {
   }
 
   @override
-  Future<void> play() => playlistNotifier.resume();
+  Future<void> play() => audioPlayer.resume();
 
   @override
-  Future<void> pause() => playlistNotifier.pause();
+  Future<void> pause() => audioPlayer.pause();
 
   @override
-  Future<void> seek(Duration position) => playlistNotifier.seek(position);
+  Future<void> seek(Duration position) => audioPlayer.seek(position);
 
   @override
   Future<void> setShuffleMode(AudioServiceShuffleMode shuffleMode) async {
     await super.setShuffleMode(shuffleMode);
 
-    if (shuffleMode == AudioServiceShuffleMode.all) {
-      playlistNotifier.shuffle();
-    } else {
-      playlistNotifier.unshuffle();
-    }
+    audioPlayer.setShuffle(shuffleMode == AudioServiceShuffleMode.all);
   }
 
   @override
   Future<void> setRepeatMode(AudioServiceRepeatMode repeatMode) async {
     super.setRepeatMode(repeatMode);
-    if (repeatMode == AudioServiceRepeatMode.all) {
-      playlistNotifier.loop();
-    } else {
-      playlistNotifier.unloop();
-    }
+    audioPlayer.setLoopMode(
+      PlaybackLoopMode.fromAudioServiceRepeatMode(repeatMode),
+    );
   }
 
   @override
@@ -93,18 +90,15 @@ class MobileAudioService extends BaseAudioHandler {
   @override
   Future<void> onTaskRemoved() async {
     await playlistNotifier.stop();
-    await audioPlayer.release();
     return super.onTaskRemoved();
   }
 
   Future<PlaybackState> _transformEvent() async {
-    final position = (await audioPlayer.getCurrentPosition()) ?? Duration.zero;
+    final position = (await audioPlayer.position) ?? Duration.zero;
     return PlaybackState(
       controls: [
         MediaControl.skipToPrevious,
-        audioPlayer.state == PlayerState.playing
-            ? MediaControl.pause
-            : MediaControl.play,
+        audioPlayer.isPlaying ? MediaControl.pause : MediaControl.play,
         MediaControl.skipToNext,
         MediaControl.stop,
       ],
@@ -112,16 +106,14 @@ class MobileAudioService extends BaseAudioHandler {
         MediaAction.seek,
       },
       androidCompactActionIndices: const [0, 1, 2],
-      playing: audioPlayer.state == PlayerState.playing,
+      playing: audioPlayer.isPlaying,
       updatePosition: position,
-      bufferedPosition: position,
-      shuffleMode: playlist?.isShuffled == true
+      bufferedPosition: await audioPlayer.bufferedPosition ?? Duration.zero,
+      shuffleMode: await audioPlayer.isShuffled == true
           ? AudioServiceShuffleMode.all
           : AudioServiceShuffleMode.none,
-      repeatMode: playlist?.isLooping == true
-          ? AudioServiceRepeatMode.one
-          : AudioServiceRepeatMode.all,
-      processingState: playlist?.isLoading == true
+      repeatMode: (await audioPlayer.loopMode).toAudioServiceRepeatMode(),
+      processingState: playlist.isFetching == true
           ? AudioProcessingState.loading
           : AudioProcessingState.ready,
     );
diff --git a/lib/services/audio_services/windows_audio_service.dart b/lib/services/audio_services/windows_audio_service.dart
new file mode 100644
index 00000000..4481140b
--- /dev/null
+++ b/lib/services/audio_services/windows_audio_service.dart
@@ -0,0 +1,104 @@
+import 'dart:async';
+
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:smtc_windows/smtc_windows.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
+import 'package:spotube/services/audio_player/audio_player.dart';
+import 'package:spotube/services/audio_player/playback_state.dart';
+import 'package:spotube/utils/type_conversion_utils.dart';
+
+class WindowsAudioService {
+  final SMTCWindows smtc;
+  final Ref ref;
+  final ProxyPlaylistNotifier playlistNotifier;
+
+  final subscriptions = <StreamSubscription>[];
+
+  WindowsAudioService(this.ref, this.playlistNotifier)
+      : smtc = SMTCWindows(enabled: false) {
+    smtc.setPlaybackStatus(PlaybackStatus.Stopped);
+    final buttonStream = smtc.buttonPressStream.listen((event) {
+      switch (event) {
+        case PressedButton.play:
+          audioPlayer.resume();
+          break;
+        case PressedButton.pause:
+          audioPlayer.pause();
+          break;
+        case PressedButton.next:
+          playlistNotifier.next();
+          break;
+        case PressedButton.previous:
+          playlistNotifier.previous();
+          break;
+        case PressedButton.stop:
+          playlistNotifier.stop();
+          break;
+        default:
+          break;
+      }
+    });
+
+    final playerStateStream =
+        audioPlayer.playerStateStream.listen((state) async {
+      switch (state) {
+        case AudioPlaybackState.playing:
+          await smtc.setPlaybackStatus(PlaybackStatus.Playing);
+          break;
+        case AudioPlaybackState.paused:
+          await smtc.setPlaybackStatus(PlaybackStatus.Paused);
+          break;
+        case AudioPlaybackState.stopped:
+          await smtc.setPlaybackStatus(PlaybackStatus.Stopped);
+          await smtc.disableSmtc();
+          break;
+        case AudioPlaybackState.completed:
+          await smtc.setPlaybackStatus(PlaybackStatus.Changing);
+          await smtc.disableSmtc();
+          break;
+        default:
+          break;
+      }
+    });
+
+    final positionStream = audioPlayer.positionStream.listen((pos) async {
+      await smtc.setPosition(pos);
+    });
+
+    final durationStream = audioPlayer.durationStream.listen((duration) async {
+      await smtc.setEndTime(duration);
+    });
+
+    subscriptions.addAll([
+      buttonStream,
+      playerStateStream,
+      positionStream,
+      durationStream,
+    ]);
+  }
+
+  Future<void> addTrack(Track track) async {
+    if (!smtc.enabled) {
+      await smtc.enableSmtc();
+    }
+    await smtc.updateMetadata(MusicMetadata(
+      title: track.name!,
+      albumArtist: track.artists?.firstOrNull?.name ?? "Unknown",
+      artist: TypeConversionUtils.artists_X_String<Artist>(track.artists ?? []),
+      album: track.album?.name ?? "Unknown",
+      thumbnail: TypeConversionUtils.image_X_UrlString(
+        track.album?.images ?? [],
+        placeholder: ImagePlaceholder.albumArt,
+      ),
+    ));
+  }
+
+  void dispose() {
+    smtc.disableSmtc();
+    smtc.dispose();
+    for (var element in subscriptions) {
+      element.cancel();
+    }
+  }
+}
diff --git a/lib/services/custom_spotify_endpoints/spotify_endpoints.dart b/lib/services/custom_spotify_endpoints/spotify_endpoints.dart
new file mode 100644
index 00000000..a0c54fb9
--- /dev/null
+++ b/lib/services/custom_spotify_endpoints/spotify_endpoints.dart
@@ -0,0 +1,165 @@
+import 'dart:convert';
+
+import 'package:http/http.dart' as http;
+import 'package:spotify/spotify.dart';
+
+class CustomSpotifyEndpoints {
+  static const _baseUrl = 'https://api.spotify.com/v1';
+  final String accessToken;
+  final http.Client _client;
+
+  CustomSpotifyEndpoints(this.accessToken) : _client = http.Client();
+
+  // views API
+
+  /// Get a single view of given genre
+  ///
+  /// Currently known genres are:
+  /// - new-releases-page
+  /// - made-for-x-hub (it requires authentication)
+  /// - my-mix-genres (it requires authentication)
+  /// - artist-seed-mixes (it requires authentication)
+  /// - my-mix-decades (it requires authentication)
+  /// - my-mix-moods (it requires authentication)
+  /// - podcasts-and-more (it requires authentication)
+  /// - uniquely-yours-in-hub (it requires authentication)
+  /// - made-for-x-dailymix (it requires authentication)
+  /// - made-for-x-discovery (it requires authentication)
+  Future<Map<String, dynamic>> getView(
+    String view, {
+    int limit = 20,
+    int contentLimit = 10,
+    List<String> types = const [
+      "album",
+      "playlist",
+      "artist",
+      "show",
+      "station",
+      "episode",
+      "merch",
+      "artist_concerts",
+      "uri_link"
+    ],
+    String imageStyle = "gradient_overlay",
+    String includeExternal = "audio",
+    String? locale,
+    String? market,
+    String? country,
+  }) async {
+    if (accessToken.isEmpty) {
+      throw Exception('[CustomSpotifyEndpoints.getView]: accessToken is empty');
+    }
+
+    final queryParams = {
+      'limit': limit.toString(),
+      'content_limit': contentLimit.toString(),
+      'types': types.join(','),
+      'image_style': imageStyle,
+      'include_external': includeExternal,
+      'timestamp': DateTime.now().toUtc().toIso8601String(),
+      if (locale != null) 'locale': locale,
+      if (market != null) 'market': market,
+      if (country != null) 'country': country,
+    }.entries.map((e) => '${e.key}=${e.value}').join('&');
+
+    final res = await _client.get(
+      Uri.parse('$_baseUrl/views/$view?$queryParams'),
+      headers: {
+        "content-type": "application/json",
+        "authorization": "Bearer $accessToken",
+        "accept": "application/json",
+      },
+    );
+
+    if (res.statusCode == 200) {
+      return jsonDecode(res.body);
+    } else {
+      throw Exception(
+        '[CustomSpotifyEndpoints.getView]: Failed to get view'
+        '\nStatus code: ${res.statusCode}'
+        '\nBody: ${res.body}',
+      );
+    }
+  }
+
+  Future<List<String>> listGenreSeeds() async {
+    final res = await _client.get(
+      Uri.parse("$_baseUrl/recommendations/available-genre-seeds"),
+      headers: {
+        "content-type": "application/json",
+        if (accessToken.isNotEmpty) "authorization": "Bearer $accessToken",
+        "accept": "application/json",
+      },
+    );
+
+    if (res.statusCode == 200) {
+      final body = jsonDecode(res.body);
+      return List<String>.from(body["genres"] ?? []);
+    } else {
+      throw Exception(
+        '[CustomSpotifyEndpoints.listGenreSeeds]: Failed to get genre seeds'
+        '\nStatus code: ${res.statusCode}'
+        '\nBody: ${res.body}',
+      );
+    }
+  }
+
+  void _addList(
+      Map<String, String> parameters, String key, Iterable<String> paramList) {
+    if (paramList.isNotEmpty) {
+      parameters[key] = paramList.join(',');
+    }
+  }
+
+  void _addTunableTrackMap(
+      Map<String, String> parameters, Map<String, num>? tunableTrackMap) {
+    if (tunableTrackMap != null) {
+      parameters.addAll(tunableTrackMap.map<String, String>((k, v) =>
+          MapEntry(k, v is int ? v.toString() : v.toStringAsFixed(2))));
+    }
+  }
+
+  Future<List<Track>> getRecommendations({
+    Iterable<String>? seedArtists,
+    Iterable<String>? seedGenres,
+    Iterable<String>? seedTracks,
+    int limit = 20,
+    String? market,
+    Map<String, num>? max,
+    Map<String, num>? min,
+    Map<String, num>? target,
+  }) async {
+    assert(limit >= 1 && limit <= 100, 'limit should be 1 <= limit <= 100');
+    final seedsNum = (seedArtists?.length ?? 0) +
+        (seedGenres?.length ?? 0) +
+        (seedTracks?.length ?? 0);
+    assert(
+        seedsNum >= 1 && seedsNum <= 5,
+        'Up to 5 seed values may be provided in any combination of seed_artists,'
+        ' seed_tracks and seed_genres.');
+    final parameters = <String, String>{'limit': limit.toString()};
+    final _ = {
+      'seed_artists': seedArtists,
+      'seed_genres': seedGenres,
+      'seed_tracks': seedTracks
+    }.forEach((key, list) => _addList(parameters, key, list!));
+    if (market != null) parameters['market'] = market;
+    for (var map in [min, max, target]) {
+      _addTunableTrackMap(parameters, map);
+    }
+    final pathQuery =
+        "$_baseUrl/recommendations?${parameters.entries.map((e) => '${e.key}=${e.value}').join('&')}";
+    final res = await _client.get(
+      Uri.parse(pathQuery),
+      headers: {
+        "content-type": "application/json",
+        if (accessToken.isNotEmpty) "authorization": "Bearer $accessToken",
+        "accept": "application/json",
+      },
+    );
+    final result = jsonDecode(res.body);
+    return List.castFrom<dynamic, Track>(
+      result["tracks"].map((track) => Track.fromJson(track)).toList(),
+    );
+  }
+}
diff --git a/lib/services/pocketbase.dart b/lib/services/pocketbase.dart
deleted file mode 100644
index f590c3ee..00000000
--- a/lib/services/pocketbase.dart
+++ /dev/null
@@ -1,14 +0,0 @@
-import 'package:catcher/catcher.dart';
-import 'package:pocketbase/pocketbase.dart';
-import 'package:spotube/collections/env.dart';
-
-final pb = PocketBase(Env.pocketbaseUrl);
-bool isLoggedIn = false;
-Future<void> initializePocketBase() async {
-  try {
-    await pb.collection("users").authWithPassword(Env.username, Env.password);
-    isLoggedIn = true;
-  } catch (e, stack) {
-    Catcher.reportCheckedError(e, stack);
-  }
-}
diff --git a/lib/services/queries/album.dart b/lib/services/queries/album.dart
index 27c1e483..d4ffa2f5 100644
--- a/lib/services/queries/album.dart
+++ b/lib/services/queries/album.dart
@@ -58,7 +58,7 @@ class AlbumQueries {
         try {
           final albums = await spotify.browse
               .getNewReleases(country: market)
-              .getPage(5, pageParam);
+              .getPage(50, pageParam);
 
           return albums;
         } catch (e, stack) {
diff --git a/lib/services/queries/artist.dart b/lib/services/queries/artist.dart
index fed55429..27a58572 100644
--- a/lib/services/queries/artist.dart
+++ b/lib/services/queries/artist.dart
@@ -38,6 +38,32 @@ class ArtistQueries {
     );
   }
 
+  Query<List<Artist>, dynamic> followedByMeAll(WidgetRef ref) {
+    return useSpotifyQuery(
+      "user-following-artists-all",
+      (spotify) async {
+        CursorPage<Artist>? page =
+            await spotify.me.following(FollowingType.artist).getPage(50);
+
+        final following = <Artist>[];
+
+        if (page.isLast == true) {
+          return page.items?.toList() ?? [];
+        }
+
+        while (page?.isLast != true) {
+          following.addAll(page?.items ?? []);
+          page = await spotify.me
+              .following(FollowingType.artist)
+              .getPage(50, page?.after ?? '');
+        }
+
+        return following;
+      },
+      ref: ref,
+    );
+  }
+
   Query<bool, dynamic> doIFollow(
     WidgetRef ref,
     String artist,
diff --git a/lib/services/queries/category.dart b/lib/services/queries/category.dart
index 4f646b13..91513fd7 100644
--- a/lib/services/queries/category.dart
+++ b/lib/services/queries/category.dart
@@ -1,25 +1,37 @@
 import 'package:fl_query/fl_query.dart';
+import 'package:fl_query_hooks/fl_query_hooks.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/hooks/use_spotify_infinite_query.dart';
+import 'package:spotube/provider/custom_spotify_endpoint_provider.dart';
+import 'package:spotube/provider/user_preferences_provider.dart';
 
 class CategoryQueries {
   const CategoryQueries();
 
   InfiniteQuery<Page<Category>, dynamic, int> list(
-      WidgetRef ref, String recommendationMarket) {
+    WidgetRef ref,
+    String recommendationMarket,
+  ) {
+    ref.watch(userPreferencesProvider.select((s) => s.locale));
+    final locale = useContext().l10n.localeName;
     return useSpotifyInfiniteQuery<Page<Category>, dynamic, int>(
       "category-playlists",
       (pageParam, spotify) async {
         final categories = await spotify.categories
-            .list(country: recommendationMarket)
-            .getPage(15, pageParam);
+            .list(
+              country: recommendationMarket,
+              locale: locale,
+            )
+            .getPage(8, pageParam);
 
         return categories;
       },
       initialPage: 0,
       nextPage: (lastPage, lastPageData) {
-        if (lastPageData.isLast || (lastPageData.items ?? []).length < 15) {
+        if (lastPageData.isLast || (lastPageData.items ?? []).length < 8) {
           return null;
         }
         return lastPageData.nextOffset;
@@ -28,16 +40,24 @@ class CategoryQueries {
     );
   }
 
-  InfiniteQuery<Page<PlaylistSimple>, dynamic, int> playlistsOf(
+  InfiniteQuery<Page<PlaylistSimple?>, dynamic, int> playlistsOf(
     WidgetRef ref,
     String category,
   ) {
-    return useSpotifyInfiniteQuery<Page<PlaylistSimple>, dynamic, int>(
+    ref.watch(userPreferencesProvider.select((s) => s.locale));
+    final market = ref
+        .watch(userPreferencesProvider.select((s) => s.recommendationMarket));
+    final locale = useContext().l10n.localeName;
+    return useSpotifyInfiniteQuery<Page<PlaylistSimple?>, dynamic, int>(
       "category-playlists/$category",
       (pageParam, spotify) async {
-        final playlists = await spotify.playlists
-            .getByCategoryId(category)
-            .getPage(5, pageParam);
+        final playlists = await Pages<PlaylistSimple?>(
+          spotify,
+          "v1/browse/categories/$category/playlists?country=$market&locale=$locale",
+          (json) => json == null ? null : PlaylistSimple.fromJson(json),
+          'playlists',
+          (json) => PlaylistsFeatured.fromJson(json),
+        ).getPage(5, pageParam);
 
         return playlists;
       },
@@ -51,4 +71,25 @@ class CategoryQueries {
       ref: ref,
     );
   }
+
+  Query<List<String>, dynamic> genreSeeds(WidgetRef ref) {
+    final customSpotify = ref.watch(customSpotifyEndpointProvider);
+    final query = useQuery<List<String>, dynamic>(
+      "genre-seeds",
+      customSpotify.listGenreSeeds,
+    );
+
+    useEffect(() {
+      return ref.listenManual(
+        customSpotifyEndpointProvider,
+        (previous, next) {
+          if (previous != next) {
+            query.refresh();
+          }
+        },
+      ).close;
+    }, [query]);
+
+    return query;
+  }
 }
diff --git a/lib/services/queries/playlist.dart b/lib/services/queries/playlist.dart
index 06f8d952..194e1e46 100644
--- a/lib/services/queries/playlist.dart
+++ b/lib/services/queries/playlist.dart
@@ -1,11 +1,112 @@
 import 'package:catcher/catcher.dart';
 import 'package:fl_query/fl_query.dart';
+import 'package:fl_query_hooks/fl_query_hooks.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
+import 'package:spotube/components/library/playlist_generate/recommendation_attribute_dials.dart';
 import 'package:spotube/extensions/map.dart';
 import 'package:spotube/extensions/track.dart';
 import 'package:spotube/hooks/use_spotify_infinite_query.dart';
 import 'package:spotube/hooks/use_spotify_query.dart';
+import 'package:spotube/pages/library/playlist_generate/playlist_generate.dart';
+import 'package:spotube/provider/custom_spotify_endpoint_provider.dart';
+import 'package:spotube/provider/user_preferences_provider.dart';
+
+typedef RecommendationParameters = ({
+  RecommendationAttribute acousticness,
+  RecommendationAttribute danceability,
+  RecommendationAttribute duration_ms,
+  RecommendationAttribute energy,
+  RecommendationAttribute instrumentalness,
+  RecommendationAttribute key,
+  RecommendationAttribute liveness,
+  RecommendationAttribute loudness,
+  RecommendationAttribute mode,
+  RecommendationAttribute popularity,
+  RecommendationAttribute speechiness,
+  RecommendationAttribute tempo,
+  RecommendationAttribute time_signature,
+  RecommendationAttribute valence,
+});
+
+Map<String, num> recommendationAttributeToMap(RecommendationAttribute attr) => {
+      "min": attr.min,
+      "target": attr.target,
+      "max": attr.max,
+    };
+
+({Map<String, num> min, Map<String, num> target, Map<String, num> max})
+    recommendationParametersToMap(RecommendationParameters params) {
+  final maxMap = <String, num>{
+    if (params.acousticness != zeroValues)
+      "acousticness": params.acousticness.max,
+    if (params.danceability != zeroValues)
+      "danceability": params.danceability.max,
+    if (params.duration_ms != zeroValues) "duration_ms": params.duration_ms.max,
+    if (params.energy != zeroValues) "energy": params.energy.max,
+    if (params.instrumentalness != zeroValues)
+      "instrumentalness": params.instrumentalness.max,
+    if (params.key != zeroValues) "key": params.key.max,
+    if (params.liveness != zeroValues) "liveness": params.liveness.max,
+    if (params.loudness != zeroValues) "loudness": params.loudness.max,
+    if (params.mode != zeroValues) "mode": params.mode.max,
+    if (params.popularity != zeroValues) "popularity": params.popularity.max,
+    if (params.speechiness != zeroValues) "speechiness": params.speechiness.max,
+    if (params.tempo != zeroValues) "tempo": params.tempo.max,
+    if (params.time_signature != zeroValues)
+      "time_signature": params.time_signature.max,
+    if (params.valence != zeroValues) "valence": params.valence.max,
+  };
+  final minMap = <String, num>{
+    if (params.acousticness != zeroValues)
+      "acousticness": params.acousticness.min,
+    if (params.danceability != zeroValues)
+      "danceability": params.danceability.min,
+    if (params.duration_ms != zeroValues) "duration_ms": params.duration_ms.min,
+    if (params.energy != zeroValues) "energy": params.energy.min,
+    if (params.instrumentalness != zeroValues)
+      "instrumentalness": params.instrumentalness.min,
+    if (params.key != zeroValues) "key": params.key.min,
+    if (params.liveness != zeroValues) "liveness": params.liveness.min,
+    if (params.loudness != zeroValues) "loudness": params.loudness.min,
+    if (params.mode != zeroValues) "mode": params.mode.min,
+    if (params.popularity != zeroValues) "popularity": params.popularity.min,
+    if (params.speechiness != zeroValues) "speechiness": params.speechiness.min,
+    if (params.tempo != zeroValues) "tempo": params.tempo.min,
+    if (params.time_signature != zeroValues)
+      "time_signature": params.time_signature.min,
+    if (params.valence != zeroValues) "valence": params.valence.min,
+  };
+  final targetMap = <String, num>{
+    if (params.acousticness != zeroValues)
+      "acousticness": params.acousticness.target,
+    if (params.danceability != zeroValues)
+      "danceability": params.danceability.target,
+    if (params.duration_ms != zeroValues)
+      "duration_ms": params.duration_ms.target,
+    if (params.energy != zeroValues) "energy": params.energy.target,
+    if (params.instrumentalness != zeroValues)
+      "instrumentalness": params.instrumentalness.target,
+    if (params.key != zeroValues) "key": params.key.target,
+    if (params.liveness != zeroValues) "liveness": params.liveness.target,
+    if (params.loudness != zeroValues) "loudness": params.loudness.target,
+    if (params.mode != zeroValues) "mode": params.mode.target,
+    if (params.popularity != zeroValues) "popularity": params.popularity.target,
+    if (params.speechiness != zeroValues)
+      "speechiness": params.speechiness.target,
+    if (params.tempo != zeroValues) "tempo": params.tempo.target,
+    if (params.time_signature != zeroValues)
+      "time_signature": params.time_signature.target,
+    if (params.valence != zeroValues) "valence": params.valence.target,
+  };
+
+  return (
+    max: maxMap,
+    min: minMap,
+    target: targetMap,
+  );
+}
 
 class PlaylistQueries {
   const PlaylistQueries();
@@ -94,4 +195,50 @@ class PlaylistQueries {
       ref: ref,
     );
   }
+
+  Query<List<Track>, dynamic> generate(
+    WidgetRef ref, {
+    ({List<String> tracks, List<String> artists, List<String> genres})? seeds,
+    RecommendationParameters? parameters,
+    int limit = 20,
+    String? market,
+  }) {
+    final marketOfPreference = ref.watch(
+      userPreferencesProvider.select((s) => s.recommendationMarket),
+    );
+    final customSpotify = ref.watch(customSpotifyEndpointProvider);
+
+    final parametersMap =
+        parameters == null ? null : recommendationParametersToMap(parameters);
+
+    final query = useQuery<List<Track>, dynamic>(
+      "generate-playlist",
+      () async {
+        final tracks = await customSpotify.getRecommendations(
+          limit: limit,
+          market: market ?? marketOfPreference,
+          max: parametersMap?.max,
+          min: parametersMap?.min,
+          target: parametersMap?.target,
+          seedArtists: seeds?.artists,
+          seedGenres: seeds?.genres,
+          seedTracks: seeds?.tracks,
+        );
+        return tracks;
+      },
+    );
+
+    useEffect(() {
+      return ref.listenManual(
+        customSpotifyEndpointProvider,
+        (previous, next) {
+          if (previous != next) {
+            query.refresh();
+          }
+        },
+      ).close;
+    }, [query]);
+
+    return query;
+  }
 }
diff --git a/lib/services/queries/queries.dart b/lib/services/queries/queries.dart
index d6f59f4f..cc3ce132 100644
--- a/lib/services/queries/queries.dart
+++ b/lib/services/queries/queries.dart
@@ -5,6 +5,7 @@ import 'package:spotube/services/queries/lyrics.dart';
 import 'package:spotube/services/queries/playlist.dart';
 import 'package:spotube/services/queries/search.dart';
 import 'package:spotube/services/queries/user.dart';
+import 'package:spotube/services/queries/views.dart';
 
 class Queries {
   const Queries._();
@@ -15,6 +16,7 @@ class Queries {
   final playlist = const PlaylistQueries();
   final search = const SearchQueries();
   final user = const UserQueries();
+  final views = const ViewsQueries();
 }
 
 const useQueries = Queries._();
diff --git a/lib/services/queries/user.dart b/lib/services/queries/user.dart
index 6f94264d..63d58afd 100644
--- a/lib/services/queries/user.dart
+++ b/lib/services/queries/user.dart
@@ -2,15 +2,17 @@ import 'package:fl_query/fl_query.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/hooks/use_spotify_query.dart';
+import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 class UserQueries {
   const UserQueries();
-  Query<User, dynamic> me(WidgetRef ref) {
+  Query<User?, dynamic> me(WidgetRef ref) {
     return useSpotifyQuery<User, dynamic>(
       "current-user",
       (spotify) async {
         final me = await spotify.me.get();
+        if (ref.read(AuthenticationNotifier.provider) == null) return null;
         if (me.images == null || me.images?.isEmpty == true) {
           me.images = [
             Image()
diff --git a/lib/services/queries/views.dart b/lib/services/queries/views.dart
new file mode 100644
index 00000000..b56f07d9
--- /dev/null
+++ b/lib/services/queries/views.dart
@@ -0,0 +1,47 @@
+import 'package:fl_query/fl_query.dart';
+import 'package:fl_query_hooks/fl_query_hooks.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotube/extensions/context.dart';
+import 'package:spotube/provider/authentication_provider.dart';
+import 'package:spotube/provider/custom_spotify_endpoint_provider.dart';
+import 'package:spotube/provider/user_preferences_provider.dart';
+
+class ViewsQueries {
+  const ViewsQueries();
+
+  Query<Map<String, dynamic>?, dynamic> get(
+    WidgetRef ref,
+    String view,
+  ) {
+    final customSpotify = ref.watch(customSpotifyEndpointProvider);
+    final auth = ref.watch(AuthenticationNotifier.provider);
+    final market = ref
+        .watch(userPreferencesProvider.select((s) => s.recommendationMarket));
+
+    final locale = useContext().l10n.localeName;
+
+    final query = useQuery<Map<String, dynamic>?, dynamic>("views/$view", () {
+      if (auth == null) return null;
+      return customSpotify.getView(
+        view,
+        market: market,
+        country: market,
+        locale: locale,
+      );
+    });
+
+    useEffect(() {
+      return ref.listenManual(
+        customSpotifyEndpointProvider,
+        (previous, next) {
+          if (previous != next) {
+            query.refresh();
+          }
+        },
+      ).close;
+    }, [query]);
+
+    return query;
+  }
+}
diff --git a/lib/services/supabase.dart b/lib/services/supabase.dart
new file mode 100644
index 00000000..08bd508e
--- /dev/null
+++ b/lib/services/supabase.dart
@@ -0,0 +1,12 @@
+import 'package:spotube/models/matched_track.dart';
+import 'package:supabase_flutter/supabase_flutter.dart';
+
+class SupabaseService {
+  static SupabaseClient get api => Supabase.instance.client;
+
+  Future<void> insertTrack(MatchedTrack track) async {
+    await api.from("tracks").insert(track.toJson());
+  }
+}
+
+final supabase = SupabaseService();
diff --git a/lib/services/youtube.dart b/lib/services/youtube.dart
deleted file mode 100644
index c6662ad3..00000000
--- a/lib/services/youtube.dart
+++ /dev/null
@@ -1,3 +0,0 @@
-import 'package:youtube_explode_dart/youtube_explode_dart.dart';
-
-final youtube = YoutubeExplode();
diff --git a/lib/services/youtube/youtube.dart b/lib/services/youtube/youtube.dart
new file mode 100644
index 00000000..9ae6a224
--- /dev/null
+++ b/lib/services/youtube/youtube.dart
@@ -0,0 +1,221 @@
+import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
+import 'package:piped_client/piped_client.dart';
+import 'package:spotube/models/matched_track.dart';
+import 'package:spotube/provider/user_preferences_provider.dart';
+import 'package:spotube/utils/primitive_utils.dart';
+import 'package:youtube_explode_dart/youtube_explode_dart.dart';
+
+class YoutubeVideoInfo {
+  final SearchMode searchMode;
+  final String title;
+  final Duration duration;
+  final String thumbnailUrl;
+  final String id;
+  final int likes;
+  final int dislikes;
+  final int views;
+  final String channelName;
+  final String channelId;
+  final DateTime publishedAt;
+
+  YoutubeVideoInfo({
+    required this.searchMode,
+    required this.title,
+    required this.duration,
+    required this.thumbnailUrl,
+    required this.id,
+    required this.likes,
+    required this.dislikes,
+    required this.views,
+    required this.channelName,
+    required this.publishedAt,
+    required this.channelId,
+  });
+
+  YoutubeVideoInfo.fromJson(Map<String, dynamic> json)
+      : title = json['title'],
+        searchMode = SearchMode.fromString(json['searchMode']),
+        duration = Duration(seconds: json['duration']),
+        thumbnailUrl = json['thumbnailUrl'],
+        id = json['id'],
+        likes = json['likes'],
+        dislikes = json['dislikes'],
+        views = json['views'],
+        channelName = json['channelName'],
+        channelId = json['channelId'],
+        publishedAt = DateTime.tryParse(json['publishedAt']) ?? DateTime.now();
+
+  Map<String, dynamic> toJson() => {
+        'title': title,
+        'duration': duration.inSeconds,
+        'thumbnailUrl': thumbnailUrl,
+        'id': id,
+        'likes': likes,
+        'dislikes': dislikes,
+        'views': views,
+        'channelName': channelName,
+        'channelId': channelId,
+        'publishedAt': publishedAt.toIso8601String(),
+        'searchMode': searchMode.name,
+      };
+
+  factory YoutubeVideoInfo.fromVideo(Video video) {
+    return YoutubeVideoInfo(
+      searchMode: SearchMode.youtube,
+      title: video.title,
+      duration: video.duration ?? Duration.zero,
+      thumbnailUrl: video.thumbnails.mediumResUrl,
+      id: video.id.value,
+      likes: video.engagement.likeCount ?? 0,
+      dislikes: video.engagement.dislikeCount ?? 0,
+      views: video.engagement.viewCount,
+      channelName: video.author,
+      channelId: '/c/${video.channelId.value}',
+      publishedAt: video.uploadDate ?? DateTime(2003, 9, 9),
+    );
+  }
+
+  factory YoutubeVideoInfo.fromSearchItemStream(
+    PipedSearchItemStream searchItem,
+    SearchMode searchMode,
+  ) {
+    return YoutubeVideoInfo(
+      searchMode: searchMode,
+      title: searchItem.title,
+      duration: searchItem.duration,
+      thumbnailUrl: searchItem.thumbnail,
+      id: searchItem.id,
+      likes: 0,
+      dislikes: 0,
+      views: searchItem.views,
+      channelName: searchItem.uploaderName,
+      channelId: searchItem.uploaderUrl ?? "",
+      publishedAt: searchItem.uploadedDate != null
+          ? DateTime.tryParse(searchItem.uploadedDate!) ?? DateTime(2003, 9, 9)
+          : DateTime(2003, 9, 9),
+    );
+  }
+
+  factory YoutubeVideoInfo.fromStreamResponse(
+      PipedStreamResponse stream, SearchMode searchMode) {
+    return YoutubeVideoInfo(
+      searchMode: searchMode,
+      title: stream.title,
+      duration: stream.duration,
+      thumbnailUrl: stream.thumbnailUrl,
+      id: stream.id,
+      likes: stream.likes,
+      dislikes: stream.dislikes,
+      views: stream.views,
+      channelName: stream.uploader,
+      publishedAt: stream.uploadedDate != null
+          ? DateTime.tryParse(stream.uploadedDate!) ?? DateTime(2003, 9, 9)
+          : DateTime(2003, 9, 9),
+      channelId: stream.uploaderUrl,
+    );
+  }
+}
+
+class YoutubeEndpoints {
+  PipedClient? piped;
+  YoutubeExplode? youtube;
+
+  final UserPreferences preferences;
+
+  YoutubeEndpoints(this.preferences) {
+    switch (preferences.youtubeApiType) {
+      case YoutubeApiType.youtube:
+        youtube = YoutubeExplode();
+        break;
+      case YoutubeApiType.piped:
+        piped = PipedClient(instance: preferences.pipedInstance);
+        break;
+    }
+  }
+
+  Future<List<YoutubeVideoInfo>> search(String query) async {
+    if (youtube != null) {
+      final res = await youtube!.search(
+        query,
+        filter: TypeFilters.video,
+      );
+
+      return res.map(YoutubeVideoInfo.fromVideo).toList();
+    } else {
+      final res = await piped!.search(
+        query,
+        switch (preferences.searchMode) {
+          SearchMode.youtube => PipedFilter.video,
+          SearchMode.youtubeMusic => PipedFilter.musicSongs,
+        },
+      );
+      return res.items
+          .whereType<PipedSearchItemStream>()
+          .map(
+            (e) => YoutubeVideoInfo.fromSearchItemStream(
+              e,
+              preferences.searchMode,
+            ),
+          )
+          .toList();
+    }
+  }
+
+  String _pipedStreamResponseToStreamUrl(PipedStreamResponse stream) {
+    final streamFormat = DesktopTools.platform.isLinux
+        ? PipedAudioStreamFormat.webm
+        : PipedAudioStreamFormat.m4a;
+
+    return switch (preferences.audioQuality) {
+      AudioQuality.high =>
+        stream.highestBitrateAudioStreamOfFormat(streamFormat)!.url,
+      AudioQuality.low =>
+        stream.lowestBitrateAudioStreamOfFormat(streamFormat)!.url,
+    };
+  }
+
+  Future<String> streamingUrl(String id) async {
+    if (youtube != null) {
+      final res = await PrimitiveUtils.raceMultiple(
+        () => youtube!.videos.streams.getManifest(id),
+      );
+      final audioOnlyManifests = res.audioOnly.where((info) {
+        final isMp4a = info.codec.mimeType == "audio/mp4";
+        if (DesktopTools.platform.isLinux) {
+          return !isMp4a;
+        } else if (DesktopTools.platform.isMacOS ||
+            DesktopTools.platform.isIOS) {
+          return isMp4a;
+        } else {
+          return true;
+        }
+      });
+
+      return switch (preferences.audioQuality) {
+        AudioQuality.high =>
+          audioOnlyManifests.withHighestBitrate().url.toString(),
+        AudioQuality.low =>
+          audioOnlyManifests.sortByBitrate().last.url.toString(),
+      };
+    } else {
+      return _pipedStreamResponseToStreamUrl(await piped!.streams(id));
+    }
+  }
+
+  Future<(YoutubeVideoInfo info, String streamingUrl)> video(
+      String id, SearchMode searchMode) async {
+    if (youtube != null) {
+      final res = await youtube!.videos.get(id);
+      return (
+        YoutubeVideoInfo.fromVideo(res),
+        await streamingUrl(id),
+      );
+    } else {
+      final res = await piped!.streams(id);
+      return (
+        YoutubeVideoInfo.fromStreamResponse(res, searchMode),
+        _pipedStreamResponseToStreamUrl(res),
+      );
+    }
+  }
+}
diff --git a/lib/themes/dark_theme.dart b/lib/themes/dark_theme.dart
deleted file mode 100644
index a2d735e1..00000000
--- a/lib/themes/dark_theme.dart
+++ /dev/null
@@ -1,120 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:spotube/extensions/theme.dart';
-
-ThemeData darkTheme({
-  required MaterialColor accentMaterialColor,
-  required MaterialColor backgroundMaterialColor,
-}) {
-  return ThemeData(
-    useMaterial3: true,
-    brightness: Brightness.dark,
-    extensions: [
-      ShimmerColorTheme(
-        shimmerBackgroundColor: backgroundMaterialColor[700],
-        shimmerColor: backgroundMaterialColor[800],
-      )
-    ],
-    primaryColor: accentMaterialColor,
-    splashFactory: NoSplash.splashFactory,
-    primarySwatch: accentMaterialColor,
-    backgroundColor: backgroundMaterialColor[900],
-    scaffoldBackgroundColor: backgroundMaterialColor[900],
-    dialogBackgroundColor: backgroundMaterialColor[800],
-    shadowColor: Colors.black26,
-    buttonTheme: ButtonThemeData(
-      buttonColor: accentMaterialColor,
-    ),
-    iconTheme: IconThemeData(size: 16, color: Colors.grey[50]),
-    inputDecorationTheme: InputDecorationTheme(
-      focusedBorder: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(20),
-        borderSide: BorderSide(
-          color: accentMaterialColor[400]!,
-          width: 2.0,
-        ),
-      ),
-      enabledBorder: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(20),
-        borderSide: BorderSide(
-          color: backgroundMaterialColor[800]!,
-        ),
-      ),
-    ),
-    navigationRailTheme: NavigationRailThemeData(
-      backgroundColor: backgroundMaterialColor[800],
-      unselectedIconTheme: IconThemeData(
-        color: Colors.grey[300],
-        opacity: 1,
-        size: 18,
-      ),
-      selectedIconTheme: IconThemeData(
-        color: backgroundMaterialColor[850],
-        size: 18,
-      ),
-      selectedLabelTextStyle: TextStyle(color: accentMaterialColor[300]),
-      unselectedLabelTextStyle: TextStyle(color: Colors.grey[300]),
-      indicatorColor: accentMaterialColor[300],
-    ),
-    navigationBarTheme: NavigationBarThemeData(
-      backgroundColor: backgroundMaterialColor[900],
-      height: 45,
-      indicatorColor: accentMaterialColor[300],
-      labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,
-      iconTheme: MaterialStateProperty.resolveWith((states) {
-        if (states.contains(MaterialState.selected)) {
-          return IconThemeData(
-            color: Colors.grey[900],
-            size: 18,
-          );
-        }
-        return IconThemeData(
-          color: Colors.grey[300],
-          size: 18,
-        );
-      }),
-    ),
-    cardTheme: CardTheme(
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
-      color: backgroundMaterialColor[900],
-      elevation: 20,
-    ),
-    elevatedButtonTheme: ElevatedButtonThemeData(
-      style: ElevatedButton.styleFrom(
-        foregroundColor: accentMaterialColor[300],
-        textStyle: const TextStyle(
-          fontWeight: FontWeight.bold,
-        ),
-      ),
-    ),
-    popupMenuTheme: PopupMenuThemeData(
-      color: backgroundMaterialColor[800],
-      elevation: 2,
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(18.0),
-      ),
-    ),
-    dialogTheme: DialogTheme(backgroundColor: backgroundMaterialColor[900]),
-    cardColor: backgroundMaterialColor[800],
-    canvasColor: backgroundMaterialColor[800],
-    listTileTheme: const ListTileThemeData(horizontalTitleGap: 0),
-    checkboxTheme: CheckboxThemeData(
-      fillColor: MaterialStateProperty.resolveWith((states) {
-        if (states.contains(MaterialState.selected)) {
-          return accentMaterialColor[500];
-        }
-        return null;
-      }),
-    ),
-    tabBarTheme: TabBarTheme(
-      indicator: const BoxDecoration(color: Colors.transparent),
-      labelColor: accentMaterialColor[500],
-      unselectedLabelColor: Colors.white,
-      labelStyle: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
-      unselectedLabelStyle:
-          const TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
-    ),
-    appBarTheme: AppBarTheme(
-      backgroundColor: backgroundMaterialColor[900],
-    ),
-  );
-}
diff --git a/lib/themes/light_theme.dart b/lib/themes/light_theme.dart
deleted file mode 100644
index d38f529c..00000000
--- a/lib/themes/light_theme.dart
+++ /dev/null
@@ -1,122 +0,0 @@
-import 'package:adwaita/adwaita.dart';
-import 'package:flutter/cupertino.dart';
-import 'package:flutter/material.dart';
-import 'package:macos_ui/macos_ui.dart';
-import 'package:spotube/extensions/theme.dart';
-import 'package:fluent_ui/fluent_ui.dart' as fluent_ui;
-
-ThemeData theme(Color seed, Brightness brightness) {
-  final scheme = ColorScheme.fromSeed(
-    seedColor: seed,
-    shadow: Colors.black12,
-    brightness: brightness,
-  );
-  return ThemeData(
-    useMaterial3: true,
-    colorScheme: scheme,
-    listTileTheme: ListTileThemeData(
-      horizontalTitleGap: 0,
-      iconColor: scheme.onSurface,
-    ),
-    inputDecorationTheme: InputDecorationTheme(
-      border: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(15),
-      ),
-    ),
-    iconTheme: IconThemeData(size: 16, color: scheme.onSurface),
-    navigationBarTheme: const NavigationBarThemeData(
-      labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,
-      height: 50,
-      iconTheme: MaterialStatePropertyAll(
-        IconThemeData(size: 18),
-      ),
-    ),
-    tabBarTheme: TabBarTheme(
-      indicatorSize: TabBarIndicatorSize.tab,
-      labelStyle: const TextStyle(fontWeight: FontWeight.w600),
-      labelColor: scheme.primary,
-      overlayColor: MaterialStateProperty.all(Colors.transparent),
-      indicator: BoxDecoration(
-        color: scheme.secondaryContainer,
-        borderRadius: BorderRadius.circular(15),
-      ),
-    ),
-  );
-}
-
-final windowsTheme = fluent_ui.ThemeData.light().copyWith(
-  iconTheme: const IconThemeData(size: 16),
-  buttonTheme: fluent_ui.ButtonThemeData(
-    iconButtonStyle: fluent_ui.ButtonStyle(
-      iconSize: fluent_ui.ButtonState.all(20),
-    ),
-  ),
-);
-final windowsDarkTheme = fluent_ui.ThemeData.dark().copyWith(
-  iconTheme: const IconThemeData(size: 16),
-  buttonTheme: fluent_ui.ButtonThemeData(
-    iconButtonStyle: fluent_ui.ButtonStyle(
-      iconSize: fluent_ui.ButtonState.all(20),
-    ),
-  ),
-);
-final macosTheme = MacosThemeData.light().copyWith(
-  pushButtonTheme: const PushButtonThemeData(
-    secondaryColor: Colors.white,
-  ),
-  iconTheme: const MacosIconThemeData(size: 16),
-  typography: MacosTypography(color: Colors.grey[900]!),
-);
-final macosDarkTheme = MacosThemeData.dark().copyWith(
-  pushButtonTheme: const PushButtonThemeData(
-    secondaryColor: Colors.white,
-  ),
-  iconTheme: const MacosIconThemeData(size: 16),
-  typography: MacosTypography(color: MacosColors.textColor),
-);
-const iosTheme = CupertinoThemeData(brightness: Brightness.light);
-const iosDarkTheme = CupertinoThemeData(
-  brightness: Brightness.dark,
-);
-
-final linuxTheme = AdwaitaThemeData.light().copyWith(
-  primaryColor: const Color(0xFF3582e5),
-  iconTheme: const IconThemeData(size: 16),
-  extensions: [
-    ShimmerColorTheme(
-      shimmerBackgroundColor: Colors.grey[300],
-      shimmerColor: Colors.grey[400],
-    )
-  ],
-  switchTheme: SwitchThemeData(
-    trackColor: MaterialStateProperty.resolveWith((states) {
-      if (states.contains(MaterialState.selected)) {
-        return const Color(0xFF3582e5);
-      }
-      return Colors.grey[300];
-    }),
-  ),
-  colorScheme: const ColorScheme.light(
-    primary: Color(0xFF3582e5),
-  ),
-  progressIndicatorTheme: const ProgressIndicatorThemeData(
-    color: Color(0xFF3582e5),
-  ),
-  listTileTheme: ListTileThemeData(
-    iconColor: Colors.grey[900],
-    horizontalTitleGap: 0,
-  ),
-);
-final linuxDarkTheme = AdwaitaThemeData.dark().copyWith(
-  iconTheme: IconThemeData(size: 16, color: Colors.grey[50]),
-  extensions: [
-    ShimmerColorTheme(
-      shimmerBackgroundColor: Colors.grey[800],
-      shimmerColor: Colors.grey[900],
-    )
-  ],
-  listTileTheme: ListTileThemeData(
-    iconColor: Colors.grey[50],
-    horizontalTitleGap: 0,
-  ),
-);
diff --git a/lib/themes/theme.dart b/lib/themes/theme.dart
new file mode 100644
index 00000000..7f107d56
--- /dev/null
+++ b/lib/themes/theme.dart
@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+
+ThemeData theme(Color seed, Brightness brightness) {
+  final scheme = ColorScheme.fromSeed(
+    seedColor: seed,
+    shadow: Colors.black12,
+    brightness: brightness,
+  );
+  return ThemeData(
+    useMaterial3: true,
+    colorScheme: scheme,
+    listTileTheme: ListTileThemeData(
+      horizontalTitleGap: 5,
+      iconColor: scheme.onSurface,
+    ),
+    appBarTheme: const AppBarTheme(surfaceTintColor: Colors.transparent),
+    inputDecorationTheme: InputDecorationTheme(
+      border: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(15),
+      ),
+    ),
+    iconTheme: IconThemeData(size: 16, color: scheme.onSurface),
+    navigationBarTheme: const NavigationBarThemeData(
+      labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,
+      height: 50,
+      iconTheme: MaterialStatePropertyAll(
+        IconThemeData(size: 18),
+      ),
+    ),
+    tabBarTheme: TabBarTheme(
+      indicatorSize: TabBarIndicatorSize.tab,
+      labelStyle: const TextStyle(fontWeight: FontWeight.w600),
+      labelColor: scheme.primary,
+      dividerColor: Colors.transparent,
+      indicator: BoxDecoration(
+        color: scheme.secondaryContainer,
+        borderRadius: BorderRadius.circular(15),
+      ),
+    ),
+    popupMenuTheme: PopupMenuThemeData(
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
+      color: scheme.surface,
+      elevation: 4,
+    ),
+    snackBarTheme: SnackBarThemeData(
+      behavior: SnackBarBehavior.floating,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
+      backgroundColor: scheme.onSurface,
+      contentTextStyle: TextStyle(color: scheme.surface),
+    ),
+    sliderTheme: SliderThemeData(overlayShape: SliderComponentShape.noOverlay),
+    searchBarTheme: SearchBarThemeData(
+      constraints: const BoxConstraints(maxWidth: double.infinity),
+      backgroundColor: MaterialStatePropertyAll(
+        Color.lerp(
+          scheme.surfaceVariant,
+          scheme.surface,
+          brightness == Brightness.light ? .9 : .7,
+        ),
+      ),
+      elevation: const MaterialStatePropertyAll(0),
+      shape: MaterialStatePropertyAll(
+        RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(10),
+        ),
+      ),
+    ),
+  );
+}
diff --git a/lib/utils/persisted_state_notifier.dart b/lib/utils/persisted_state_notifier.dart
index 9f444c1b..551d7438 100644
--- a/lib/utils/persisted_state_notifier.dart
+++ b/lib/utils/persisted_state_notifier.dart
@@ -53,7 +53,7 @@ abstract class PersistedStateNotifier<T> extends StateNotifier<T> {
     }
   }
 
-  static Future<void> initializeBoxes() async {
+  static Future<void> initializeBoxes({required String path}) async {
     String? boxName = await read(kKeyBoxName);
 
     if (boxName == null) {
@@ -73,7 +73,10 @@ abstract class PersistedStateNotifier<T> extends StateNotifier<T> {
       encryptionCipher: HiveAesCipher(base64Url.decode(encryptionKey)),
     );
 
-    _box = await Hive.openLazyBox("spotube_cache");
+    _box = await Hive.openLazyBox(
+      "spotube_cache",
+      path: path,
+    );
   }
 
   LazyBox get box => encrypted ? _encryptedBox : _box;
@@ -109,7 +112,7 @@ abstract class PersistedStateNotifier<T> extends StateNotifier<T> {
   }
 
   void save() async {
-    box.put(cacheKey, toJson());
+    await box.put(cacheKey, toJson());
   }
 
   FutureOr<T> fromJson(Map<String, dynamic> json);
diff --git a/lib/utils/primitive_utils.dart b/lib/utils/primitive_utils.dart
index 34dbb21a..2298f14f 100644
--- a/lib/utils/primitive_utils.dart
+++ b/lib/utils/primitive_utils.dart
@@ -27,7 +27,7 @@ abstract class PrimitiveUtils {
     } else if (num > 999999999) {
       return "${(num / 1000000000).toStringAsFixed(0)}B";
     } else {
-      return num.toString();
+      return num.toStringAsFixed(0);
     }
   }
 
diff --git a/lib/utils/service_utils.dart b/lib/utils/service_utils.dart
index c1ad94c7..c9c2943c 100644
--- a/lib/utils/service_utils.dart
+++ b/lib/utils/service_utils.dart
@@ -251,6 +251,10 @@ abstract class ServiceUtils {
   }
 
   static void navigate(BuildContext context, String location, {Object? extra}) {
+    GoRouter.of(context).go(location, extra: extra);
+  }
+
+  static void push(BuildContext context, String location, {Object? extra}) {
     GoRouter.of(context).push(location, extra: extra);
   }
 
@@ -267,12 +271,14 @@ abstract class ServiceUtils {
                 0;
           case SortBy.ascending:
             return a.name?.compareTo(b.name ?? "") ?? 0;
-          case SortBy.dateAdded:
-            final aDate =
-                double.parse(a.album?.releaseDate?.split("-").first ?? "2069");
-            final bDate =
-                double.parse(b.album?.releaseDate?.split("-").first ?? "2069");
+          case SortBy.oldest:
+            final aDate = DateTime.parse(a.album?.releaseDate ?? "2069-01-01");
+            final bDate = DateTime.parse(b.album?.releaseDate ?? "2069-01-01");
             return aDate.compareTo(bDate);
+          case SortBy.newest:
+            final aDate = DateTime.parse(a.album?.releaseDate ?? "2069-01-01");
+            final bDate = DateTime.parse(b.album?.releaseDate ?? "2069-01-01");
+            return bDate.compareTo(aDate);
           case SortBy.descending:
             return b.name?.compareTo(a.name ?? "") ?? 0;
           default:
diff --git a/lib/utils/type_conversion_utils.dart b/lib/utils/type_conversion_utils.dart
index 85ec7f19..16a930c9 100644
--- a/lib/utils/type_conversion_utils.dart
+++ b/lib/utils/type_conversion_utils.dart
@@ -3,15 +3,16 @@
 import 'dart:io';
 
 import 'package:flutter/widgets.dart' hide Image;
-import 'package:metadata_god/metadata_god.dart' hide Image;
+import 'package:metadata_god/metadata_god.dart';
 import 'package:path/path.dart';
 import 'package:spotube/collections/assets.gen.dart';
 import 'package:spotube/components/shared/links/anchor_button.dart';
 import 'package:spotify/spotify.dart';
+import 'package:spotube/models/matched_track.dart';
 import 'package:spotube/models/spotube_track.dart';
+import 'package:spotube/services/youtube/youtube.dart';
 import 'package:spotube/utils/primitive_utils.dart';
 import 'package:spotube/utils/service_utils.dart';
-import 'package:youtube_explode_dart/youtube_explode_dart.dart';
 
 enum ImagePlaceholder {
   albumArt,
@@ -127,26 +128,22 @@ abstract class TypeConversionUtils {
     String? art,
   }) {
     final track = SpotubeTrack(
-      Video(
-        VideoId("dQw4w9WgXcQ"),
-        basenameWithoutExtension(file.path),
-        metadata?.artist ?? "",
-        ChannelId(
-          "https://www.youtube.com/channel/UCuAXFkgsw1L7xaCfnd5JJOw",
-        ),
-        DateTime.now(),
-        "",
-        DateTime.now(),
-        "",
-        Duration(milliseconds: metadata?.durationMs?.toInt() ?? 0),
-        ThumbnailSet(metadata?.title ?? ""),
-        [],
-        const Engagement(0, 0, 0),
-        false,
+      YoutubeVideoInfo(
+        searchMode: SearchMode.youtube,
+        id: "dQw4w9WgXcQ",
+        title: basenameWithoutExtension(file.path),
+        duration: Duration(milliseconds: metadata?.durationMs?.toInt() ?? 0),
+        dislikes: 0,
+        likes: 0,
+        thumbnailUrl: art ?? "",
+        views: 0,
+        channelName: metadata?.albumArtist ?? "Spotube",
+        channelId: metadata?.albumArtist ?? "Spotube",
+        publishedAt:
+            metadata?.year != null ? DateTime(metadata!.year!) : DateTime(2003),
       ),
       file.path,
       [],
-      [],
     );
     track.album = Album()
       ..name = metadata?.album ?? "Spotube"
diff --git a/linux/com.github.KRTirtho.Spotube.appdata.xml b/linux/com.github.KRTirtho.Spotube.appdata.xml
index 5fde9939..7b6c92c2 100644
--- a/linux/com.github.KRTirtho.Spotube.appdata.xml
+++ b/linux/com.github.KRTirtho.Spotube.appdata.xml
@@ -3,8 +3,7 @@
   <id>com.github.KRTirtho.Spotube</id>
   <name>Spotube</name>
   <summary>
-    A lightweight free Spotify crossplatform-client which handles playback manually, streams music
-    using Youtube &amp; no Spotify premium account is needed
+    🎧 Open source Spotify client that doesn't require Premium nor uses Electron! Available for both desktop &amp; mobile!
   </summary>
   <metadata_license>CC0-1.0</metadata_license>
   <project_license>BSD-4-Clause</project_license>
@@ -16,52 +15,54 @@
   <developer_name>Kingkor Roy Tirtho</developer_name>
   <url type="homepage">https://github.com/krtirtho/spotube</url>
   <description>
-    <p>Spotube is a Flutter based lightweight Spotify client. It utilizes the power of Spotify &amp;
-      Youtube's public API &amp; creates a hazardless, performant &amp; resource friendly User
-      Experience</p>
+    <p>🎧 Open source Spotify client that doesn't require Premium nor uses Electron! Available for
+      both desktop &amp; mobile!</p>
     <p>Following are the features that currently spotube offers:</p>
     <ul>
-      <li>Open Source</li>
-      <li>Anonymous/Guest Login</li>
-      <li>Cross platform</li>
-      <li>No telemetry, diagnostics or user data collection</li>
-      <li>Lightweight &amp; resource friendly</li>
-      <li>Native performance (Thanks to Flutter+Skia)</li>
-      <li>Playback control is on user&#39;s machine instead of server based</li>
-      <li>Small size &amp; less data hungry</li>
-      <li>No spotify or youtube ads since it uses all public &amp; free APIs (But it&#39;s
-        recommended to support the creators by watching/liking/subscribing to the artists youtube
-        channel or add as favourite track in spotify. Mostly buying spotify premium is the best way
-        to support their valuable creations)</li>
-      <li>Synced Lyrics</li>
-      <li>Downloadable track</li>
+      <li>🚫 No ads, thanks to the use of public &amp; free Spotify and YT Music APIs¹</li>
+      <li>⬇️ Downloadable tracks</li>
+      <li>🖥️ 📱 Cross-platform support</li>
+      <li>🪶 Small size &amp; less data usage</li>
+      <li>🕵️ Anonymous/guest login</li>
+      <li>🕒 Time synced lyrics</li>
+      <li>✋ No telemetry, diagnostics or user data collection</li>
+      <li>🚀 Native performance</li>
+      <li>📖 Open source/libre software</li>
+      <li>🔉 Playback control is done locally, not on the server</li>
     </ul>
+
   </description>
   <screenshots>
     <screenshot>
       <image type="source">
-        https://rawcdn.githack.com/KRTirtho/spotube/ebb00cdcb68c98ee785144568a5af1690ec7e6a3/assets/spotube-screenshot.jpg</image>
+        https://rawcdn.githack.com/KRTirtho/spotube/62055018feade0b895663a0bfc5f85f265ae2154/assets/spotube-screenshot.png</image>
     </screenshot>
   </screenshots>
   <launchable type="desktop-id">com.github.KRTirtho.Spotube.desktop</launchable>
-  <releases> 
-    %{{APPDATA_RELEASE}}%
-    <release version="2.6.0" date="2022-12-09" />
-    <release version="2.5.0" date="2022-10-13" />
+  <releases> %{{APPDATA_RELEASE}}% <release version="2.6.0" date="2022-12-09" />
+    <release
+      version="2.5.0" date="2022-10-13" />
     <release version="2.4.1" date="2022-09-13" />
-    <release version="2.4.0" date="2022-09-09" />
+    <release
+      version="2.4.0" date="2022-09-09" />
     <release version="2.3.1" date="2022-07-11" />
-    <release version="2.2.1" date="2022-06-09" />
+    <release
+      version="2.2.1" date="2022-06-09" />
     <release version="2.2.0" date="2022-06-05" />
-    <release version="2.1.0" date="2022-05-10" />
+    <release
+      version="2.1.0" date="2022-05-10" />
     <release version="2.0.0" date="2022-03-24" />
-    <release version="1.2.0" date="2022-02-02" />
+    <release
+      version="1.2.0" date="2022-02-02" />
     <release version="1.1.0" date="2022-01-27" />
-    <release version="1.0.1" date="2022-01-15" />
+    <release
+      version="1.0.1" date="2022-01-15" />
     <release version="1.0.0" date="2022-01-14" />
-    <release version="0.0.3" date="2021-05-08" />
+    <release
+      version="0.0.3" date="2021-05-08" />
     <release version="0.0.2" date="2021-03-31" />
-    <release version="0.0.1" date="2021-03-20" />
+    <release
+      version="0.0.1" date="2021-03-20" />
   </releases>
   <content_rating type="oars-1.1" />
   <update_contact>krtirtho@gmail.com</update_contact>
diff --git a/linux/flutter/generated_plugin_registrant.cc b/linux/flutter/generated_plugin_registrant.cc
index aa4a749d..eef22b2f 100644
--- a/linux/flutter/generated_plugin_registrant.cc
+++ b/linux/flutter/generated_plugin_registrant.cc
@@ -6,27 +6,39 @@
 
 #include "generated_plugin_registrant.h"
 
-#include <audioplayers_linux/audioplayers_linux_plugin.h>
 #include <catcher/catcher_plugin.h>
 #include <flutter_secure_storage_linux/flutter_secure_storage_linux_plugin.h>
+#include <local_notifier/local_notifier_plugin.h>
+#include <media_kit_libs_linux/media_kit_libs_linux_plugin.h>
 #include <screen_retriever/screen_retriever_plugin.h>
+#include <system_theme/system_theme_plugin.h>
+#include <system_tray/system_tray_plugin.h>
 #include <url_launcher_linux/url_launcher_plugin.h>
 #include <window_manager/window_manager_plugin.h>
 #include <window_size/window_size_plugin.h>
 
 void fl_register_plugins(FlPluginRegistry* registry) {
-  g_autoptr(FlPluginRegistrar) audioplayers_linux_registrar =
-      fl_plugin_registry_get_registrar_for_plugin(registry, "AudioplayersLinuxPlugin");
-  audioplayers_linux_plugin_register_with_registrar(audioplayers_linux_registrar);
   g_autoptr(FlPluginRegistrar) catcher_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "CatcherPlugin");
   catcher_plugin_register_with_registrar(catcher_registrar);
   g_autoptr(FlPluginRegistrar) flutter_secure_storage_linux_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "FlutterSecureStorageLinuxPlugin");
   flutter_secure_storage_linux_plugin_register_with_registrar(flutter_secure_storage_linux_registrar);
+  g_autoptr(FlPluginRegistrar) local_notifier_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "LocalNotifierPlugin");
+  local_notifier_plugin_register_with_registrar(local_notifier_registrar);
+  g_autoptr(FlPluginRegistrar) media_kit_libs_linux_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "MediaKitLibsLinuxPlugin");
+  media_kit_libs_linux_plugin_register_with_registrar(media_kit_libs_linux_registrar);
   g_autoptr(FlPluginRegistrar) screen_retriever_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "ScreenRetrieverPlugin");
   screen_retriever_plugin_register_with_registrar(screen_retriever_registrar);
+  g_autoptr(FlPluginRegistrar) system_theme_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "SystemThemePlugin");
+  system_theme_plugin_register_with_registrar(system_theme_registrar);
+  g_autoptr(FlPluginRegistrar) system_tray_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "SystemTrayPlugin");
+  system_tray_plugin_register_with_registrar(system_tray_registrar);
   g_autoptr(FlPluginRegistrar) url_launcher_linux_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "UrlLauncherPlugin");
   url_launcher_plugin_register_with_registrar(url_launcher_linux_registrar);
diff --git a/linux/flutter/generated_plugins.cmake b/linux/flutter/generated_plugins.cmake
index 1b330ca5..1d7de67a 100644
--- a/linux/flutter/generated_plugins.cmake
+++ b/linux/flutter/generated_plugins.cmake
@@ -3,16 +3,20 @@
 #
 
 list(APPEND FLUTTER_PLUGIN_LIST
-  audioplayers_linux
   catcher
   flutter_secure_storage_linux
+  local_notifier
+  media_kit_libs_linux
   screen_retriever
+  system_theme
+  system_tray
   url_launcher_linux
   window_manager
   window_size
 )
 
 list(APPEND FLUTTER_FFI_PLUGIN_LIST
+  media_kit_native_event_loop
   metadata_god
 )
 
diff --git a/linux/packaging/deb/make_config.yaml b/linux/packaging/deb/make_config.yaml
index 84522d85..1b086c31 100644
--- a/linux/packaging/deb/make_config.yaml
+++ b/linux/packaging/deb/make_config.yaml
@@ -10,9 +10,11 @@ section: x11
 installed_size: 24400
 
 dependencies:
-  - libgstreamer1.0-dev
-  - libgstreamer-plugins-base1.0-dev
+  - mpv
+  - libappindicator3-1
+  - gir1.2-appindicator3-0.1
   - libsecret-1-0
+  - libnotify-bin
 
 essential: false
 icon: assets/spotube-logo.png
diff --git a/linux/packaging/rpm/make_config.yaml b/linux/packaging/rpm/make_config.yaml
index 60e37a55..55e772ce 100644
--- a/linux/packaging/rpm/make_config.yaml
+++ b/linux/packaging/rpm/make_config.yaml
@@ -7,12 +7,11 @@ packagerEmail: krtirtho@gmail.com
 license: BSD-4-Clause
 url: https://github.com/KRTirtho/spotube
 requires:
-  - gstreamer1-devel
-  - gstreamer1-plugins-base-tools
-  - gstreamer1-plugins-base-devel
-  - gstreamer1-plugins-good
+  - mpv
+  - libappindicator
   - jsoncpp
   - libsecret
+  - libnotify
 
 display_name: Spotube
 
diff --git a/macos/Flutter/GeneratedPluginRegistrant.swift b/macos/Flutter/GeneratedPluginRegistrant.swift
index f5ba69bb..aa7d7e1d 100644
--- a/macos/Flutter/GeneratedPluginRegistrant.swift
+++ b/macos/Flutter/GeneratedPluginRegistrant.swift
@@ -5,35 +5,45 @@
 import FlutterMacOS
 import Foundation
 
+import app_links
 import audio_service
 import audio_session
-import audioplayers_darwin
 import catcher
+import connectivity_plus
 import device_info_plus
 import flutter_secure_storage_macos
-import macos_ui
+import local_notifier
+import media_kit_libs_macos_audio
 import package_info_plus
 import path_provider_foundation
 import screen_retriever
 import shared_preferences_foundation
+import sign_in_with_apple
 import sqflite
+import system_theme
+import system_tray
 import url_launcher_macos
 import window_manager
 import window_size
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
+  AppLinksMacosPlugin.register(with: registry.registrar(forPlugin: "AppLinksMacosPlugin"))
   AudioServicePlugin.register(with: registry.registrar(forPlugin: "AudioServicePlugin"))
   AudioSessionPlugin.register(with: registry.registrar(forPlugin: "AudioSessionPlugin"))
-  AudioplayersDarwinPlugin.register(with: registry.registrar(forPlugin: "AudioplayersDarwinPlugin"))
   CatcherPlugin.register(with: registry.registrar(forPlugin: "CatcherPlugin"))
+  ConnectivityPlugin.register(with: registry.registrar(forPlugin: "ConnectivityPlugin"))
   DeviceInfoPlusMacosPlugin.register(with: registry.registrar(forPlugin: "DeviceInfoPlusMacosPlugin"))
   FlutterSecureStoragePlugin.register(with: registry.registrar(forPlugin: "FlutterSecureStoragePlugin"))
-  MacOSUiPlugin.register(with: registry.registrar(forPlugin: "MacOSUiPlugin"))
+  LocalNotifierPlugin.register(with: registry.registrar(forPlugin: "LocalNotifierPlugin"))
+  MediaKitLibsMacosAudioPlugin.register(with: registry.registrar(forPlugin: "MediaKitLibsMacosAudioPlugin"))
   FLTPackageInfoPlusPlugin.register(with: registry.registrar(forPlugin: "FLTPackageInfoPlusPlugin"))
   PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
   ScreenRetrieverPlugin.register(with: registry.registrar(forPlugin: "ScreenRetrieverPlugin"))
   SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
+  SignInWithApplePlugin.register(with: registry.registrar(forPlugin: "SignInWithApplePlugin"))
   SqflitePlugin.register(with: registry.registrar(forPlugin: "SqflitePlugin"))
+  SystemThemePlugin.register(with: registry.registrar(forPlugin: "SystemThemePlugin"))
+  SystemTrayPlugin.register(with: registry.registrar(forPlugin: "SystemTrayPlugin"))
   UrlLauncherPlugin.register(with: registry.registrar(forPlugin: "UrlLauncherPlugin"))
   WindowManagerPlugin.register(with: registry.registrar(forPlugin: "WindowManagerPlugin"))
   WindowSizePlugin.register(with: registry.registrar(forPlugin: "WindowSizePlugin"))
diff --git a/macos/Runner/DebugProfile.entitlements b/macos/Runner/DebugProfile.entitlements
index 2788f09e..6fc950ef 100644
--- a/macos/Runner/DebugProfile.entitlements
+++ b/macos/Runner/DebugProfile.entitlements
@@ -6,10 +6,16 @@
     <true />
     <key>com.apple.security.cs.allow-jit</key>
     <true />
-    <key>com.apple.security.network.client</key>
-    <true />
     <key>com.apple.security.network.server</key>
     <true />
+    <key>com.apple.security.network.client</key>
+    <true />
+    <!-- Just Audio Config -->
+    <!-- <key>NSAppTransportSecurity</key>
+    <dict>
+      <key>NSAllowsArbitraryLoads</key>
+      <true />
+    </dict> -->
     <!-- Requires Certification -->
     <!-- <key>keychain-access-groups</key>
     <array /> -->
diff --git a/macos/Runner/Release.entitlements b/macos/Runner/Release.entitlements
index db95233f..4a447fde 100644
--- a/macos/Runner/Release.entitlements
+++ b/macos/Runner/Release.entitlements
@@ -4,10 +4,16 @@
   <dict>
     <key>com.apple.security.app-sandbox</key>
     <true />
-    <key>com.apple.security.network.client</key>
-    <true />
     <key>com.apple.security.network.server</key>
     <true />
+    <key>com.apple.security.network.client</key>
+    <true />
+    <!-- Just Audio Config -->
+    <!-- <key>NSAppTransportSecurity</key>
+    <dict>
+      <key>NSAllowsArbitraryLoads</key>
+      <true />
+    </dict> -->
     <!-- Requires Certification -->
     <!-- <key>keychain-access-groups</key>
     <array /> -->
diff --git a/metadata/en-US/full_description.txt b/metadata/en-US/full_description.txt
index db8cd81c..a30d10c7 100644
--- a/metadata/en-US/full_description.txt
+++ b/metadata/en-US/full_description.txt
@@ -2,14 +2,13 @@ Open source Spotify client that doesn't require Premium nor uses Electron! Avail
 
 
 Features:
-* Open source/libre software
-* Anonymous/guest login
-* Cross platform support
-* No telemetry, diagnostics or user data collection
-* Lightweight & resource-friendly
-* Native performance (Thanks to Flutter+Skia)
-* Playback control is done locally instead of on the server
-* Small size & less data usage
-* No Spotify or YouTube ads since it uses all public & free APIs (It is still recommended to support the creators by watching/liking/subscribing to the artists' YouTube channels or liking their tracks on Spotify. Purchasing Spotify Premium is usually the best way to support their valuable creations.)
-* Time synced lyrics
+* No ads, thanks to the use of public & free Spotify and YT Music APIs¹
 * Downloadable tracks
+* Cross-platform support
+* Small size & less data usage
+* Anonymous/guest login
+* Time synced lyrics
+* No telemetry, diagnostics or user data collection
+* Native performance
+* Open source/libre software
+* Playback control is done locally, not on the server
diff --git a/metadata/en-US/images/phoneScreenshots/screenshot-home-dark.jpg b/metadata/en-US/images/phoneScreenshots/screenshot-home-dark.jpg
index 2912649c..bdad74f8 100644
Binary files a/metadata/en-US/images/phoneScreenshots/screenshot-home-dark.jpg and b/metadata/en-US/images/phoneScreenshots/screenshot-home-dark.jpg differ
diff --git a/metadata/en-US/images/phoneScreenshots/screenshot-home-light.jpg b/metadata/en-US/images/phoneScreenshots/screenshot-home-light.jpg
new file mode 100644
index 00000000..930d496a
Binary files /dev/null and b/metadata/en-US/images/phoneScreenshots/screenshot-home-light.jpg differ
diff --git a/metadata/en-US/images/phoneScreenshots/screenshot-lockscreen.jpg b/metadata/en-US/images/phoneScreenshots/screenshot-lockscreen.jpg
index 402a4fb0..a826c68c 100644
Binary files a/metadata/en-US/images/phoneScreenshots/screenshot-lockscreen.jpg and b/metadata/en-US/images/phoneScreenshots/screenshot-lockscreen.jpg differ
diff --git a/metadata/en-US/images/phoneScreenshots/screenshot-player-view.jpg b/metadata/en-US/images/phoneScreenshots/screenshot-player-view.jpg
index 60b0a663..3bad761e 100644
Binary files a/metadata/en-US/images/phoneScreenshots/screenshot-player-view.jpg and b/metadata/en-US/images/phoneScreenshots/screenshot-player-view.jpg differ
diff --git a/metadata/en-US/images/phoneScreenshots/screentshot-home-light.jpg b/metadata/en-US/images/phoneScreenshots/screentshot-home-light.jpg
deleted file mode 100644
index 021c8e2d..00000000
Binary files a/metadata/en-US/images/phoneScreenshots/screentshot-home-light.jpg and /dev/null differ
diff --git a/pubspec.lock b/pubspec.lock
index d059d5e5..e830beba 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -9,14 +9,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "52.0.0"
-  adwaita:
-    dependency: "direct main"
-    description:
-      name: adwaita
-      sha256: "535781747357779fa2830815e0a1b6b7888c8c538194ba73ac4fc8d82412baec"
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.5.2"
   analyzer:
     dependency: transitive
     description:
@@ -25,6 +17,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "5.4.0"
+  app_links:
+    dependency: transitive
+    description:
+      name: app_links
+      sha256: d572dcdff49c4cfcfa6f315e2683e518ec6eb54e084d01e51d9631a4dcc1b5e8
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.4.2"
   app_package_maker:
     dependency: transitive
     description:
@@ -93,26 +93,26 @@ packages:
     dependency: transitive
     description:
       name: archive
-      sha256: d6347d54a2d8028e0437e3c099f66fdb8ae02c4720c1e7534c9f24c10351f85d
+      sha256: "80e5141fafcb3361653ce308776cfd7d45e6e9fbb429e14eec571382c0c5fecb"
       url: "https://pub.dev"
     source: hosted
-    version: "3.3.6"
+    version: "3.3.2"
   args:
     dependency: "direct main"
     description:
       name: args
-      sha256: "139d809800a412ebb26a3892da228b2d0ba36f0ef5d9a82166e5e52ec8d61611"
+      sha256: c372bb384f273f0c2a8aaaa226dad84dc27c8519a691b888725dec59518ad53a
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.2"
+    version: "2.4.1"
   async:
     dependency: "direct main"
     description:
       name: async
-      sha256: bfe67ef28df125b7dddcea62755991f807aa39a2492a23e1550161692950bbe0
+      sha256: "947bfcf187f74dbc5e146c9eb9c0f10c9f8b30743e341481c1e2ed3ecc18c20c"
       url: "https://pub.dev"
     source: hosted
-    version: "2.10.0"
+    version: "2.11.0"
   audio_service:
     dependency: "direct main"
     description:
@@ -145,62 +145,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.1.13"
-  audioplayers:
-    dependency: "direct main"
-    description:
-      name: audioplayers
-      sha256: "16451eab798b23ad9307aef6f9ca62bb8fb06542af8810eead0d236d3fd40a42"
-      url: "https://pub.dev"
-    source: hosted
-    version: "3.0.1"
-  audioplayers_android:
-    dependency: transitive
-    description:
-      name: audioplayers_android
-      sha256: b2c833e6f718b6b030454e329931229afafe9327fdb002874dd544dc8bf2484d
-      url: "https://pub.dev"
-    source: hosted
-    version: "2.0.0"
-  audioplayers_darwin:
-    dependency: transitive
-    description:
-      name: audioplayers_darwin
-      sha256: e7a3c8759bf11ecfe4b20df338bf9f3d37c7719a5761c46a3833aba0ceeaacff
-      url: "https://pub.dev"
-    source: hosted
-    version: "3.0.1"
-  audioplayers_linux:
-    dependency: transitive
-    description:
-      name: audioplayers_linux
-      sha256: e95b65e1f4d4764601dac5e65f8d8186fc29401043ab020f1dacec483d708707
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.0.4"
-  audioplayers_platform_interface:
-    dependency: transitive
-    description:
-      name: audioplayers_platform_interface
-      sha256: "178581a44cb685fd798d2108111d2e98cca3400e30b9c3a05546f124fb37f600"
-      url: "https://pub.dev"
-    source: hosted
-    version: "4.0.0"
-  audioplayers_web:
-    dependency: transitive
-    description:
-      name: audioplayers_web
-      sha256: "859ba09be2a57e57a787273f18c8cf0d9b61383870c5ee4b5632fe9adbc37edf"
-      url: "https://pub.dev"
-    source: hosted
-    version: "2.2.0"
-  audioplayers_windows:
-    dependency: transitive
-    description:
-      name: audioplayers_windows
-      sha256: "622e01c4c357c2aaf1b956c3a0f89d97c3cb40315c03f16e3b6c2a31ff9c38bc"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.1.3"
   auto_size_text:
     dependency: "direct main"
     description:
@@ -209,14 +153,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.0"
-  badges:
+  background_downloader:
     dependency: "direct main"
     description:
-      name: badges
-      sha256: "727580d938b7a1ff47ea42df730d581415606b4224cfa708671c10287f8d3fe6"
+      name: background_downloader
+      sha256: "5e38a1d5d88a5cfea35c44cb376b89427688070518471ee52f6b04d07d85668e"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.3"
+    version: "7.4.0"
   boolean_selector:
     dependency: transitive
     description:
@@ -297,6 +241,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "8.4.3"
+  buttons_tabbar:
+    dependency: "direct main"
+    description:
+      name: buttons_tabbar
+      sha256: d8a53cd3be0ce5b662d01378b1cd842eb44ee68da5abeeff3c081ee3bf614160
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.6"
   cached_network_image:
     dependency: "direct main"
     description:
@@ -326,18 +278,26 @@ packages:
     description:
       path: "."
       ref: HEAD
-      resolved-ref: "5ccf7c0d8bbb07329667cff561aede1a9bee4934"
+      resolved-ref: "5c91db2578abd0c1609dc409ee3daee168d8b20e"
       url: "https://github.com/ThexXTURBOXx/catcher"
     source: git
-    version: "0.7.1"
+    version: "0.8.0"
+  change_case:
+    dependency: transitive
+    description:
+      name: change_case
+      sha256: f4e08feaa845e75e4f5ad2b0e15f24813d7ea6c27e7b78252f0c17f752cf1157
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
   characters:
     dependency: transitive
     description:
       name: characters
-      sha256: e6a326c8af69605aec75ed6c187d06b349707a27fbff8222ca9cc2cff167975c
+      sha256: "04a925763edad70e8443c99234dc3328f442e811f1d8fd1a72f1c8ad0f69a605"
       url: "https://pub.dev"
     source: hosted
-    version: "1.2.1"
+    version: "1.3.0"
   checked_yaml:
     dependency: transitive
     description:
@@ -350,10 +310,10 @@ packages:
     dependency: transitive
     description:
       name: cli_util
-      sha256: "66f86e916d285c1a93d3b79587d94bd71984a66aac4ff74e524cfa7877f1395c"
+      sha256: b8db3080e59b2503ca9e7922c3df2072cf13992354d5e944074ffa836fba43b7
       url: "https://pub.dev"
     source: hosted
-    version: "0.3.5"
+    version: "0.4.0"
   clock:
     dependency: transitive
     description:
@@ -374,10 +334,10 @@ packages:
     dependency: "direct main"
     description:
       name: collection
-      sha256: cfc915e6923fe5ce6e153b0723c753045de46de1b4d63771530504004a45fae0
+      sha256: "4a07be6cb69c84d677a6c3096fcf960cc3285a8330b4603e0d463d15d9bd934c"
       url: "https://pub.dev"
     source: hosted
-    version: "1.17.0"
+    version: "1.17.1"
   color:
     dependency: transitive
     description:
@@ -394,6 +354,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.0"
+  connectivity_plus:
+    dependency: transitive
+    description:
+      name: connectivity_plus
+      sha256: "8599ae9edca5ff96163fca3e36f8e481ea917d1e71cdad912c084b5579913f34"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.1"
+  connectivity_plus_platform_interface:
+    dependency: transitive
+    description:
+      name: connectivity_plus_platform_interface
+      sha256: cf1d1c28f4416f8c654d7dc3cd638ec586076255d407cef3ddbdaf178272a71a
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.4"
   convert:
     dependency: transitive
     description:
@@ -426,6 +402,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.5"
+  curved_navigation_bar:
+    dependency: "direct main"
+    description:
+      name: curved_navigation_bar
+      sha256: ea6412d00c5d83501bbf1cf9d1ac2ff11a20fbaf910c103c95ace7de82910334
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.3"
   dart_style:
     dependency: transitive
     description:
@@ -450,14 +434,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.7.8"
+  device_frame:
+    dependency: transitive
+    description:
+      name: device_frame
+      sha256: afe76182aec178d171953d9b4a50a43c57c7cf3c77d8b09a48bf30c8fa04dd9d
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
   device_info_plus:
     dependency: transitive
     description:
       name: device_info_plus
-      sha256: "1d6e5a61674ba3a68fb048a7c7b4ff4bebfed8d7379dbe8f2b718231be9a7c95"
+      sha256: "9b1a0c32b2a503f8fe9f8764fac7b5fcd4f6bd35d8f49de5350bccf9e2a33b8a"
       url: "https://pub.dev"
     source: hosted
-    version: "8.1.0"
+    version: "9.0.0"
   device_info_plus_platform_interface:
     dependency: transitive
     description:
@@ -466,14 +458,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "7.0.0"
+  device_preview:
+    dependency: "direct main"
+    description:
+      name: device_preview
+      sha256: "2f097bf31b929e15e6756dbe0ec1bcb63952ab9ed51c25dc5a2c722d2b21fdaf"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
   dio:
     dependency: transitive
     description:
       name: dio
-      sha256: "7d328c4d898a61efc3cd93655a0955858e29a0aa647f0f9e02d59b3bb275e2e8"
+      sha256: "347d56c26d63519552ef9a569f2a593dda99a81fdbdff13c584b7197cfe05059"
       url: "https://pub.dev"
     source: hosted
-    version: "4.0.6"
+    version: "5.1.2"
+  disable_battery_optimization:
+    dependency: "direct main"
+    description:
+      name: disable_battery_optimization
+      sha256: b3441975ab2a3ab0c19ed78e909a88d245ce689d43d17f9b23582b1ed41c047b
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0+1"
   dots_indicator:
     dependency: transitive
     description:
@@ -482,30 +490,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.0"
+  duration:
+    dependency: "direct main"
+    description:
+      name: duration
+      sha256: d0b29d0a345429e3986ac56d60e4aef65b37d11e653022b2b9a4b361332b777f
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.12"
   envied:
     dependency: "direct main"
     description:
       name: envied
-      sha256: d5d978fbd578b5c00123003609c39185e0b1ddf9d2ac460d710dd0eb2fc223d7
+      sha256: "60d3f5606c7b35bc6ef493e650d916b34351d8af2e58b7ac45881ba59dfcf039"
       url: "https://pub.dev"
     source: hosted
-    version: "0.3.0"
+    version: "0.3.0+3"
   envied_generator:
     dependency: "direct dev"
     description:
       name: envied_generator
-      sha256: "6c5a98c27c5eae925807692eb252ccac2b8e81f09bace1f07207c47dfb6a4eb0"
+      sha256: dfdbe5dc52863e54c036a4c4042afbdf1bd528cb4c1e638ecba26228ba72e9e5
       url: "https://pub.dev"
     source: hosted
-    version: "0.3.0"
-  fading_edge_scrollview:
-    dependency: transitive
-    description:
-      name: fading_edge_scrollview
-      sha256: c25c2231652ce774cc31824d0112f11f653881f43d7f5302c05af11942052031
-      url: "https://pub.dev"
-    source: hosted
-    version: "3.0.0"
+    version: "0.3.0+3"
   fake_async:
     dependency: transitive
     description:
@@ -534,10 +542,10 @@ packages:
     dependency: "direct main"
     description:
       name: file_picker
-      sha256: d090ae03df98b0247b82e5928f44d1b959867049d18d73635e2e0bc3f49542b9
+      sha256: c7a8e25ca60e7f331b153b0cb3d405828f18d3e72a6fa1d9440c86556fffc877
       url: "https://pub.dev"
     source: hosted
-    version: "5.2.5"
+    version: "5.3.0"
   fixnum:
     dependency: transitive
     description:
@@ -550,26 +558,26 @@ packages:
     dependency: "direct main"
     description:
       name: fl_query
-      sha256: b119e0d7e4cb615780f6cab00e7b40f88f8f549d9f8d20f6e1076e08cbf97c42
+      sha256: "64f482fc09eb1166adca232f68772b2b11c616d88bce3208b2753c940ebc9f71"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.0-alpha.2"
+    version: "1.0.0-alpha.3"
+  fl_query_connectivity_plus_adapter:
+    dependency: "direct main"
+    description:
+      name: fl_query_connectivity_plus_adapter
+      sha256: a0e69615e25f6dfe74d1e5a0909aeeb865e93c65dd4e0b236f0846f9e54f758b
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.0-alpha.2"
   fl_query_hooks:
     dependency: "direct main"
     description:
       name: fl_query_hooks
-      sha256: "9a4263cc5e1ef6e246089602256011172a9d3be212c41c08d67bc365ce6fec22"
+      sha256: b0ffc81fb047cbcedd9766776f9c72b95382730ce173226f0695c3f45774b0bc
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.0-alpha.2"
-  fluent_ui:
-    dependency: "direct main"
-    description:
-      name: fluent_ui
-      sha256: ff172e78492faad2c9eca01b24ea8341f2bd6e1ce6986b15d4886fd2e7c3fb09
-      url: "https://pub.dev"
-    source: hosted
-    version: "4.3.0"
+    version: "1.0.0-alpha.3"
   fluentui_system_icons:
     dependency: "direct main"
     description:
@@ -615,6 +623,15 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.3.0"
+  flutter_desktop_tools:
+    dependency: "direct main"
+    description:
+      path: "."
+      ref: "1f0bec3283626dcbd8ee2f54e238d096d8dea50e"
+      resolved-ref: "1f0bec3283626dcbd8ee2f54e238d096d8dea50e"
+      url: "https://github.com/KRTirtho/flutter_desktop_tools.git"
+    source: git
+    version: "0.0.1"
   flutter_distributor:
     dependency: "direct dev"
     description:
@@ -623,6 +640,11 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.0.2"
+  flutter_driver:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
   flutter_feather_icons:
     dependency: "direct main"
     description:
@@ -667,10 +689,10 @@ packages:
     dependency: "direct dev"
     description:
       name: flutter_launcher_icons
-      sha256: ce0e501cfc258907842238e4ca605e74b7fd1cdf04b3b43e86c43f3e40a1592c
+      sha256: "526faf84284b86a4cb36d20a5e45147747b7563d921373d4ee0559c54fcdbcea"
       url: "https://pub.dev"
     source: hosted
-    version: "0.11.0"
+    version: "0.13.1"
   flutter_lints:
     dependency: "direct dev"
     description:
@@ -680,7 +702,7 @@ packages:
     source: hosted
     version: "2.0.1"
   flutter_localizations:
-    dependency: transitive
+    dependency: "direct main"
     description: flutter
     source: sdk
     version: "0.0.0"
@@ -692,14 +714,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.2"
+  flutter_native_splash:
+    dependency: "direct main"
+    description:
+      name: flutter_native_splash
+      sha256: af665ef80a213a9ed502845a3d7a61b9acca4100ee7e9f067a7440bc3acd6730
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.19"
   flutter_plugin_android_lifecycle:
     dependency: transitive
     description:
       name: flutter_plugin_android_lifecycle
-      sha256: "60fc7b78455b94e6de2333d2f95196d32cf5c22f4b0b0520a628804cb463503b"
+      sha256: "96af49aa6b57c10a312106ad6f71deed5a754029c24789bbf620ba784f0bd0b0"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.7"
+    version: "2.0.14"
   flutter_riverpod:
     dependency: "direct main"
     description:
@@ -806,6 +836,19 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.2.0"
+  fuchsia_remote_debug_protocol:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  functions_client:
+    dependency: transitive
+    description:
+      name: functions_client
+      sha256: "26059c5fb000ffd0986ae3144d43c2a6f54931610fd61c2584e18e308c7eaa52"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.1"
   fuzzywuzzy:
     dependency: "direct main"
     description:
@@ -830,6 +873,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "6.0.6"
+  gotrue:
+    dependency: transitive
+    description:
+      name: gotrue
+      sha256: c08f5ac76dcae2dd06cc7f8e80a8ede12c66454fef06caac3b191c8c7a603811
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.7.1"
   graphs:
     dependency: transitive
     description:
@@ -882,10 +933,10 @@ packages:
     dependency: "direct main"
     description:
       name: html
-      sha256: d9793e10dbe0e6c364f4c59bf3e01fb33a9b2a674bc7a1081693dba0614b6269
+      sha256: "58e3491f7bf0b6a4ea5110c0c688877460d1a6366731155c4a4580e7ded773e8"
       url: "https://pub.dev"
     source: hosted
-    version: "0.15.1"
+    version: "0.15.3"
   http:
     dependency: "direct main"
     description:
@@ -914,18 +965,23 @@ packages:
     dependency: transitive
     description:
       name: image
-      sha256: "8e9d133755c3e84c73288363e6343157c383a0c6c56fc51afcc5d4d7180306d6"
+      sha256: a72242c9a0ffb65d03de1b7113bc4e189686fc07c7147b8b41811d0dd0e0d9bf
       url: "https://pub.dev"
     source: hosted
-    version: "3.3.0"
+    version: "4.0.17"
+  integration_test:
+    dependency: "direct dev"
+    description: flutter
+    source: sdk
+    version: "0.0.0"
   intl:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: intl
-      sha256: "910f85bce16fb5c6f614e117efa303e85a1731bb0081edf3604a2ae6e9a3cc91"
+      sha256: a3715e3bc90294e971cb7dc063fbf3cd9ee0ebf8604ffeafabd9e6f16abbdbe6
       url: "https://pub.dev"
     source: hosted
-    version: "0.17.0"
+    version: "0.18.0"
   introduction_screen:
     dependency: "direct main"
     description:
@@ -946,42 +1002,34 @@ packages:
     dependency: transitive
     description:
       name: js
-      sha256: "5528c2f391ededb7775ec1daa69e65a2d61276f7552de2b5f7b8d34ee9fd4ab7"
+      sha256: f2c445dce49627136094980615a031419f7f3eb393237e4ecd97ac15dea343f3
       url: "https://pub.dev"
     source: hosted
-    version: "0.6.5"
+    version: "0.6.7"
   json_annotation:
     dependency: "direct main"
     description:
       name: json_annotation
-      sha256: c33da08e136c3df0190bd5bbe51ae1df4a7d96e7954d1d7249fea2968a72d317
+      sha256: b10a7b2ff83d83c777edba3c6a0f97045ddadd56c944e1a23a3fdf43a1bf4467
       url: "https://pub.dev"
     source: hosted
-    version: "4.8.0"
+    version: "4.8.1"
   json_serializable:
-    dependency: "direct main"
+    dependency: "direct dev"
     description:
       name: json_serializable
-      sha256: dadc08bd61f72559f938dd08ec20dbfec6c709bba83515085ea943d2078d187a
+      sha256: "43793352f90efa5d8b251893a63d767b2f7c833120e3cc02adad55eefec04dc7"
       url: "https://pub.dev"
     source: hosted
-    version: "6.6.1"
-  libadwaita:
-    dependency: "direct main"
-    description:
-      name: libadwaita
-      sha256: de4dba194e6ba468af70988891164cc616126dc7ccbc4f42756851be93aa6de6
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.2.5"
-  libadwaita_core:
+    version: "6.6.2"
+  jwt_decode:
     dependency: transitive
     description:
-      name: libadwaita_core
-      sha256: "1a7689e4130e96be4b0ec615863fded25cd86c2b95a682e7cec9659d420de37c"
+      name: jwt_decode
+      sha256: d2e9f68c052b2225130977429d30f187aa1981d789c76ad104a32243cfdebfbb
       url: "https://pub.dev"
     source: hosted
-    version: "0.5.4"
+    version: "0.3.1"
   lints:
     dependency: transitive
     description:
@@ -990,6 +1038,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.1"
+  local_notifier:
+    dependency: transitive
+    description:
+      name: local_notifier
+      sha256: cc855aa6362c8840e3d3b35b1c3b058a3a8becdb2b03d5a9aa3f3a1e861f0a03
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.5"
   logger:
     dependency: "direct main"
     description:
@@ -1006,14 +1062,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
-  macos_ui:
-    dependency: "direct main"
-    description:
-      name: macos_ui
-      sha256: "2b31858b56d44e807cf192c58cf6660b584c997f4746496d4892a903c1c27a49"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.9.1"
   mailer:
     dependency: transitive
     description:
@@ -1022,22 +1070,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "6.0.0"
-  marquee:
-    dependency: "direct main"
-    description:
-      name: marquee
-      sha256: "4b5243d2804373bdc25fc93d42c3b402d6ec1f4ee8d0bb72276edd04ae7addb8"
-      url: "https://pub.dev"
-    source: hosted
-    version: "2.2.3"
   matcher:
     dependency: transitive
     description:
       name: matcher
-      sha256: "16db949ceee371e9b99d22f88fa3a73c4e59fd0afed0bd25fc336eb76c198b72"
+      sha256: "6501fbd55da300384b768785b83e5ce66991266cec21af89ab9ae7f5ce1c4cbb"
       url: "https://pub.dev"
     source: hosted
-    version: "0.12.13"
+    version: "0.12.15"
   material_color_utilities:
     dependency: transitive
     description:
@@ -1046,22 +1086,78 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.2.0"
+  media_kit:
+    dependency: "direct main"
+    description:
+      name: media_kit
+      sha256: d9a32b3f6eafdfbba6aff2e37045a3a80009b6dfbdeec638d51d85e8b254a6a2
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.0.7+1"
+  media_kit_libs_android_audio:
+    dependency: "direct main"
+    description:
+      name: media_kit_libs_android_audio
+      sha256: e16292bbb1d737ce026fa68154b2fcf5c6f88d6fa752bdb4c0d079c98a82b523
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.4"
+  media_kit_libs_ios_audio:
+    dependency: "direct main"
+    description:
+      name: media_kit_libs_ios_audio
+      sha256: bb18ed87e8a155fc1d2ee4bf59462ca04d02a0eeb38d0b454facee6d32441ce7
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.4"
+  media_kit_libs_linux:
+    dependency: "direct main"
+    description:
+      name: media_kit_libs_linux
+      sha256: "21acc71cbae3518b3aeef9023a6a3a3decb579a40153764333814987ccd61040"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.2"
+  media_kit_libs_macos_audio:
+    dependency: "direct main"
+    description:
+      name: media_kit_libs_macos_audio
+      sha256: b9f4a2995396fd5cc243901e618c0586d4f1781eecf2302999b77d6faee8b250
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.5"
+  media_kit_libs_windows_audio:
+    dependency: "direct main"
+    description:
+      name: media_kit_libs_windows_audio
+      sha256: f6ad5a1b910a6748a7350360756cd99a718fc9661a9583a7fd86a308d068dd81
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.3"
+  media_kit_native_event_loop:
+    dependency: "direct main"
+    description:
+      name: media_kit_native_event_loop
+      sha256: "521125e534603c3f603b93283db3938f557f33ecc383fbd62edd4beb3bf73747"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.4"
   meta:
     dependency: transitive
     description:
       name: meta
-      sha256: "6c268b42ed578a53088d834796959e4a1814b5e9e164f147f580a386e5decf42"
+      sha256: "3c74dbf8763d36539f114c799d8a2d87343b5067e9d796ca22b5eb8437090ee3"
       url: "https://pub.dev"
     source: hosted
-    version: "1.8.0"
+    version: "1.9.1"
   metadata_god:
     dependency: "direct main"
     description:
       name: metadata_god
-      sha256: "02de939fc2dcfdc959ed34768eecc97038b6e95ebaa3415f9f7582d71a2ad047"
+      sha256: "562c223d83a7bbf0a289ed0d5ed6a8cf8d94d673263203e9ff4930b44bd2f066"
       url: "https://pub.dev"
     source: hosted
-    version: "0.4.1"
+    version: "0.5.0"
   mime:
     dependency: "direct main"
     description:
@@ -1078,6 +1174,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.1"
+  nested:
+    dependency: transitive
+    description:
+      name: nested
+      sha256: "03bac4c528c64c95c722ec99280375a6f2fc708eec17c7b3f07253b626cd2a20"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0"
+  nm:
+    dependency: transitive
+    description:
+      name: nm
+      sha256: "2c9aae4127bdc8993206464fcc063611e0e36e72018696cd9631023a31b24254"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.5.0"
   oauth2:
     dependency: transitive
     description:
@@ -1130,10 +1242,10 @@ packages:
     dependency: "direct main"
     description:
       name: path
-      sha256: db9d4f58c908a4ba5953fcee2ae317c94889433e5024c27ce74a37f94267945b
+      sha256: "8829d8a55c13fc0e37127c29fedf290c102f4e40ae94ada574091fe0ff96c917"
       url: "https://pub.dev"
     source: hosted
-    version: "1.8.2"
+    version: "1.8.3"
   path_drawing:
     dependency: transitive
     description:
@@ -1194,10 +1306,10 @@ packages:
     dependency: transitive
     description:
       name: path_provider_windows
-      sha256: bcabbe399d4042b8ee687e17548d5d3f527255253b4a639f5f8d2094a9c2b45c
+      sha256: d3f80b32e83ec208ac95253e0cd4d298e104fbc63cb29c5c69edaed43b0c69d6
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.3"
+    version: "2.1.6"
   pedantic:
     dependency: transitive
     description:
@@ -1254,6 +1366,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "5.1.0"
+  piped_client:
+    dependency: "direct main"
+    description:
+      name: piped_client
+      sha256: "8b96e1f9d8533c1da7eff7fbbd4bf188256fc76a20900d378b52be09418ea771"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.0"
   platform:
     dependency: transitive
     description:
@@ -1262,39 +1382,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.1.0"
-  platform_ui:
-    dependency: "direct main"
-    description:
-      path: "."
-      ref: "339ea7922d2f881d9a72b565aeebc7e2c4b22509"
-      resolved-ref: "339ea7922d2f881d9a72b565aeebc7e2c4b22509"
-      url: "https://github.com/KRTirtho/platform_ui.git"
-    source: git
-    version: "0.1.0"
   plugin_platform_interface:
     dependency: transitive
     description:
       name: plugin_platform_interface
-      sha256: dbf0f707c78beedc9200146ad3cb0ab4d5da13c246336987be6940f026500d3a
+      sha256: "6a2128648c854906c53fa8e33986fc0247a1116122f9534dd20e3ab9e16a32bc"
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.3"
-  pocketbase:
-    dependency: "direct main"
-    description:
-      name: pocketbase
-      sha256: "125e32fe39393cc54436ce518ccfd5649419f15879a1278599f2f58564e5231c"
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.7.1+1"
-  pointycastle:
-    dependency: transitive
-    description:
-      name: pointycastle
-      sha256: db7306cf0249f838d1a24af52b5a5887c5bf7f31d8bb4e827d071dc0939ad346
-      url: "https://pub.dev"
-    source: hosted
-    version: "3.6.2"
+    version: "2.1.4"
   pool:
     dependency: transitive
     description:
@@ -1311,14 +1406,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.2.8+1"
-  popover_gtk:
+  postgrest:
     dependency: transitive
     description:
-      name: popover_gtk
-      sha256: c293bfa3bcb9436fe189f20f6397199ce996ba40d4b081e26793adcf3ceac45b
+      name: postgrest
+      sha256: "7b91eb7b40621d07aaae687f47f3032f30e1b86a9ccebfcfca52d001223f8b6e"
       url: "https://pub.dev"
     source: hosted
-    version: "0.2.6+3"
+    version: "1.2.4"
   process:
     dependency: transitive
     description:
@@ -1327,6 +1422,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.2.4"
+  provider:
+    dependency: transitive
+    description:
+      name: provider
+      sha256: cdbe7530b12ecd9eb455bdaa2fcb8d4dad22e80b8afb4798b41479d5ce26847f
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.0.5"
   pub_api_client:
     dependency: "direct dev"
     description:
@@ -1367,14 +1470,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.22.0"
-  queue:
-    dependency: "direct main"
-    description:
-      name: queue
-      sha256: "9a41ecadc15db79010108c06eae229a45c56b18db699760f34e8c9ac9b831ff9"
-      url: "https://pub.dev"
-    source: hosted
-    version: "3.1.0+2"
   quiver:
     dependency: transitive
     description:
@@ -1383,14 +1478,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.2.1"
-  recase:
+  realtime_client:
     dependency: transitive
     description:
-      name: recase
-      sha256: e4eb4ec2dcdee52dcf99cb4ceabaffc631d7424ee55e56f280bc039737f89213
+      name: realtime_client
+      sha256: "0f2614f72e5639ddd7abc3dede336f23554f9f744d0b064d41009f9ca94a53d2"
       url: "https://pub.dev"
     source: hosted
-    version: "4.1.0"
+    version: "1.0.4"
+  retry:
+    dependency: transitive
+    description:
+      name: retry
+      sha256: a8a1e475a100a0bdc73f529ca8ea1e9c9c76bec8ad86a1f47780139a34ce7aea
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.1"
   riverpod:
     dependency: transitive
     description:
@@ -1407,6 +1510,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.27.7"
+  safe_local_storage:
+    dependency: transitive
+    description:
+      name: safe_local_storage
+      sha256: ede4eb6cb7d88a116b3d3bf1df70790b9e2038bc37cb19112e381217c74d9440
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.2"
   screen_retriever:
     dependency: transitive
     description:
@@ -1415,14 +1526,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.1.6"
-  scroll_pos:
-    dependency: transitive
-    description:
-      name: scroll_pos
-      sha256: cfca311b6b8d51538ff90e206fbe6ce3b36e7125ea6da4a40eb626c7f9f083b1
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.3.0"
   scroll_to_index:
     dependency: "direct main"
     description:
@@ -1435,66 +1538,66 @@ packages:
     dependency: transitive
     description:
       name: sentry
-      sha256: "81c1f32496ff04476d6ddfe5894215b1034d185301d2e3dffd272853392c5ea7"
+      sha256: "1c5498c8d1754dbf4fa51ca14d31c8c34ea0a0f897ff666ecd516dbd588dad6a"
       url: "https://pub.dev"
     source: hosted
-    version: "6.20.1"
+    version: "7.5.2"
   shared_preferences:
     dependency: "direct main"
     description:
       name: shared_preferences
-      sha256: "5949029e70abe87f75cfe59d17bf5c397619c4b74a099b10116baeb34786fad9"
+      sha256: "858aaa72d8f61637d64e776aca82e1c67e6d9ee07979123c5d17115031c1b13b"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.17"
+    version: "2.1.0"
   shared_preferences_android:
     dependency: transitive
     description:
       name: shared_preferences_android
-      sha256: "955e9736a12ba776bdd261cf030232b30eadfcd9c79b32a3250dd4a494e8c8f7"
+      sha256: "8304d8a1f7d21a429f91dee552792249362b68a331ac5c3c1caf370f658873f6"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.15"
+    version: "2.1.0"
   shared_preferences_foundation:
     dependency: transitive
     description:
       name: shared_preferences_foundation
-      sha256: "2b55c18636a4edc529fa5cd44c03d3f3100c00513f518c5127c951978efcccd0"
+      sha256: cf2a42fb20148502022861f71698db12d937c7459345a1bdaa88fc91a91b3603
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.3"
+    version: "2.2.0"
   shared_preferences_linux:
     dependency: transitive
     description:
       name: shared_preferences_linux
-      sha256: f8ea038aa6da37090093974ebdcf4397010605fd2ff65c37a66f9d28394cb874
+      sha256: "9d387433ca65717bbf1be88f4d5bb18f10508917a8fa2fb02e0fd0d7479a9afa"
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.3"
+    version: "2.2.0"
   shared_preferences_platform_interface:
     dependency: transitive
     description:
       name: shared_preferences_platform_interface
-      sha256: da9431745ede5ece47bc26d5d73a9d3c6936ef6945c101a5aca46f62e52c1cf3
+      sha256: fb5cf25c0235df2d0640ac1b1174f6466bd311f621574997ac59018a6664548d
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.0"
+    version: "2.2.0"
   shared_preferences_web:
     dependency: transitive
     description:
       name: shared_preferences_web
-      sha256: a4b5bc37fe1b368bbc81f953197d55e12f49d0296e7e412dfe2d2d77d6929958
+      sha256: "74083203a8eae241e0de4a0d597dbedab3b8fef5563f33cf3c12d7e93c655ca5"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.4"
+    version: "2.1.0"
   shared_preferences_windows:
     dependency: transitive
     description:
       name: shared_preferences_windows
-      sha256: "5eaf05ae77658d3521d0e993ede1af962d4b326cd2153d312df716dc250f00c9"
+      sha256: "5e588e2efef56916a3b229c3bfe81e6a525665a454519ca51dbcc4236a274173"
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.3"
+    version: "2.2.0"
   shelf:
     dependency: transitive
     description:
@@ -1519,6 +1622,38 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.3"
+  sidebarx:
+    dependency: "direct main"
+    description:
+      name: sidebarx
+      sha256: "26a8392ceddb659c8f2c688beba6c04bcbf520b4d5decb143c5fd7253653081f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.15.0"
+  sign_in_with_apple:
+    dependency: transitive
+    description:
+      name: sign_in_with_apple
+      sha256: ac3b113767dfdd765078c507dad9d4d9fe96b669cc7bd88fc36fc15376fb3400
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.3.0"
+  sign_in_with_apple_platform_interface:
+    dependency: transitive
+    description:
+      name: sign_in_with_apple_platform_interface
+      sha256: a5883edee09ed6be19de19e7d9f618a617fe41a6fa03f76d082dfb787e9ea18d
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0"
+  sign_in_with_apple_web:
+    dependency: transitive
+    description:
+      name: sign_in_with_apple_web
+      sha256: "44b66528f576e77847c14999d5e881e17e7223b7b0625a185417829e5306f47a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.1"
   skeleton_text:
     dependency: "direct main"
     description:
@@ -1532,6 +1667,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.99"
+  smtc_windows:
+    dependency: "direct main"
+    description:
+      name: smtc_windows
+      sha256: dd86d0f29b5a73ffed5650279e6abee01846017b9bc16c07c708e129648c08ac
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.0"
   source_gen:
     dependency: transitive
     description:
@@ -1559,12 +1702,11 @@ packages:
   spotify:
     dependency: "direct main"
     description:
-      path: "."
-      ref: "9e8ef4556942d42d74874de5491253156e7e6f43"
-      resolved-ref: "9e8ef4556942d42d74874de5491253156e7e6f43"
-      url: "https://github.com/rinukkusu/spotify-dart"
-    source: git
-    version: "0.9.0"
+      name: spotify
+      sha256: c7c3f157f052143f713477bd5a764b080a0023ed084428bd0cf5a9e3bc260cc6
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.11.0"
   sqflite:
     dependency: transitive
     description:
@@ -1597,6 +1739,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.7.2+1"
+  storage_client:
+    dependency: transitive
+    description:
+      name: storage_client
+      sha256: "4ed4dc8a990d178c96962319d6d8c267c3e206fca2c2b98660bad6e001220ffc"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.1"
   stream_channel:
     dependency: transitive
     description:
@@ -1621,14 +1771,62 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.2.0"
+  supabase:
+    dependency: transitive
+    description:
+      name: supabase
+      sha256: "403739cdfea48ba633450e5b191ceeaae81ac10ec89166c0e109235b3e1532f3"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.8.1"
+  supabase_flutter:
+    dependency: "direct main"
+    description:
+      name: supabase_flutter
+      sha256: "7cbdd9a7264dd5b7ab5a6e2da63346054b8e5ddf358467c7f2bc23d5c14d732c"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.9.1"
+  sync_http:
+    dependency: transitive
+    description:
+      name: sync_http
+      sha256: "7f0cd72eca000d2e026bcd6f990b81d0ca06022ef4e32fb257b30d3d1014a961"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.3.1"
   synchronized:
     dependency: transitive
     description:
       name: synchronized
-      sha256: "33b31b6beb98100bf9add464a36a8dd03eb10c7a8cf15aeec535e9b054aaf04b"
+      sha256: "5fcbd27688af6082f5abd611af56ee575342c30e87541d0245f7ff99faa02c60"
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.1"
+    version: "3.1.0"
+  system_theme:
+    dependency: "direct main"
+    description:
+      name: system_theme
+      sha256: "28bb63b997c252eee7fea6dc9e3528a9a6bf4b566ccbc8b49926389ca3e2c96b"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
+  system_theme_web:
+    dependency: transitive
+    description:
+      name: system_theme_web
+      sha256: "7566f5a928f6d28d7a60c97bea8a851d1c6bc9b86a4df2366230a97458489219"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.0.2"
+  system_tray:
+    dependency: transitive
+    description:
+      name: system_tray
+      sha256: "087edb877f22f286d82d42f330fa640138c192e98aa9d20c2b83aa4e406bb432"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.2"
   term_glyph:
     dependency: transitive
     description:
@@ -1641,10 +1839,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: ad540f65f92caa91bf21dfc8ffb8c589d6e4dc0c2267818b4cc2792857706206
+      sha256: eb6ac1540b26de412b3403a163d919ba86f6a973fe6cc50ae3541b80092fdcfb
       url: "https://pub.dev"
     source: hosted
-    version: "0.4.16"
+    version: "0.5.1"
   time:
     dependency: transitive
     description:
@@ -1661,8 +1859,16 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.1"
-  tuple:
+  titlebar_buttons:
     dependency: "direct main"
+    description:
+      name: titlebar_buttons
+      sha256: babf62b48b80f290b9ef8b0135df7d9e9bebcb9c27e8380a53df9bb72f3fb03c
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0"
+  tuple:
+    dependency: transitive
     description:
       name: tuple
       sha256: "0ea99cd2f9352b2586583ab2ce6489d1f95a5f6de6fb9492faaf97ae2060f0aa"
@@ -1681,10 +1887,10 @@ packages:
     dependency: transitive
     description:
       name: universal_io
-      sha256: "79f78ddad839ee3aae3ec7c01eb4575faf0d5c860f8e5223bc9f9c17f7f03cef"
+      sha256: "06866290206d196064fd61df4c7aea1ffe9a4e7c4ccaa8fcded42dd41948005d"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.4"
+    version: "2.2.0"
   uri:
     dependency: transitive
     description:
@@ -1693,6 +1899,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.0"
+  uri_parser:
+    dependency: transitive
+    description:
+      name: uri_parser
+      sha256: "6543c9fd86d2862fac55d800a43e67c0dcd1a41677cb69c2f8edfe73bbcf1835"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.2"
   url_launcher:
     dependency: "direct main"
     description:
@@ -1789,6 +2003,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.3.3"
+  vm_service:
+    dependency: transitive
+    description:
+      name: vm_service
+      sha256: f6deed8ed625c52864792459709183da231ebf66ff0cf09e69b573227c377efe
+      url: "https://pub.dev"
+    source: hosted
+    version: "11.3.0"
   watcher:
     dependency: transitive
     description:
@@ -1805,14 +2027,62 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.3.0"
+  webdriver:
+    dependency: transitive
+    description:
+      name: webdriver
+      sha256: "3c923e918918feeb90c4c9fdf1fe39220fa4c0e8e2c0fffaded174498ef86c49"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.2"
+  webview_flutter:
+    dependency: transitive
+    description:
+      name: webview_flutter
+      sha256: "1a37bdbaaf5fbe09ad8579ab09ecfd473284ce482f900b5aea27cf834386a567"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.2.0"
+  webview_flutter_android:
+    dependency: transitive
+    description:
+      name: webview_flutter_android
+      sha256: "1acea8def62592123e2fbbca164ed8681a98a890bdcbb88f916d5b4a22687759"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.7.0"
+  webview_flutter_platform_interface:
+    dependency: transitive
+    description:
+      name: webview_flutter_platform_interface
+      sha256: "78715dc442b7849dbde74e92bb67de1cecf5addf95531c5fb474e72f5fe9a507"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.0"
+  webview_flutter_wkwebview:
+    dependency: transitive
+    description:
+      name: webview_flutter_wkwebview
+      sha256: "4646bb68297803bdbb96d46853e8fcb560d6cb5e04153fa64581535767875dfe"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.4.3"
   win32:
     dependency: transitive
     description:
       name: win32
-      sha256: c9ebe7ee4ab0c2194e65d3a07d8c54c5d00bb001b76081c4a04cdb8448b59e46
+      sha256: "5a751eddf9db89b3e5f9d50c20ab8612296e4e8db69009788d6c8b060a84191c"
       url: "https://pub.dev"
     source: hosted
-    version: "3.1.3"
+    version: "4.1.4"
+  win32_registry:
+    dependency: transitive
+    description:
+      name: win32_registry
+      sha256: "1c52f994bdccb77103a6231ad4ea331a244dbcef5d1f37d8462f713143b0bfae"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
   window_manager:
     dependency: "direct main"
     description:
@@ -1854,14 +2124,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.1.1"
+  yet_another_json_isolate:
+    dependency: transitive
+    description:
+      name: yet_another_json_isolate
+      sha256: "94ba4947ac1ce44bd6a1634d9df712e07b9b5025ba12abd6750be77ba5c08f18"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.4"
   youtube_explode_dart:
     dependency: "direct main"
     description:
       name: youtube_explode_dart
-      sha256: "3e2eb05dedc072a6275e8a061c675d9a53b7c6123265f0aa4ee1e6d50644dbd2"
+      sha256: "07889a6229a63e78f8d45a3b852897c2e0fa42e96c4daa38d411be211575bc38"
       url: "https://pub.dev"
     source: hosted
-    version: "1.12.3"
+    version: "1.12.4"
 sdks:
-  dart: ">=2.19.2 <3.0.0"
-  flutter: ">=3.7.0"
+  dart: ">=3.0.0 <4.0.0"
+  flutter: ">=3.10.0"
diff --git a/pubspec.yaml b/pubspec.yaml
index 7ffa368c..20df062c 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -3,39 +3,45 @@ description: Open source Spotify client that doesn't require Premium nor uses El
 
 publish_to: "none"
 
-version: 2.7.1+18
+version: 3.0.0+19
 
 environment:
-  sdk: ">=2.17.0 <3.0.0"
+  sdk: ">=3.0.0 <4.0.0"
+  flutter: ">=3.10.0"
 
 dependencies:
-  adwaita: ^0.5.2
   args: ^2.3.2
   async: ^2.9.0
   audio_service: ^0.18.9
   audio_session: ^0.1.13
-  audioplayers: ^3.0.1
   auto_size_text: ^3.0.0
-  badges: ^2.0.3
+  buttons_tabbar: ^1.3.6
   cached_network_image: ^3.2.2
   catcher:
     git:
       url: https://github.com/ThexXTURBOXx/catcher
   collection: ^1.15.0
   cupertino_icons: ^1.0.5
-  dbus: ^0.7.8
+  curved_navigation_bar: ^1.0.3
   envied: ^0.3.0
   file_picker: ^5.2.2
-  fl_query: ^1.0.0-alpha.2
-  fl_query_hooks: ^1.0.0-alpha.2
-  fluent_ui: 4.3.0
+  fl_query: ^1.0.0-alpha.3
+  fl_query_hooks: ^1.0.0-alpha.3
+  fl_query_connectivity_plus_adapter: ^0.1.0-alpha.2
   fluentui_system_icons: ^1.1.189
   flutter:
     sdk: flutter
   flutter_cache_manager: ^3.3.0
+  flutter_desktop_tools:
+    git:
+      url: https://github.com/KRTirtho/flutter_desktop_tools.git
+      ref: 1f0bec3283626dcbd8ee2f54e238d096d8dea50e
   flutter_feather_icons: ^2.0.0+1
   flutter_hooks: ^0.18.2+1
   flutter_inappwebview: ^5.7.2+3
+  flutter_localizations:
+    sdk: flutter
+  flutter_native_splash: ^2.2.19
   flutter_riverpod: ^2.1.1
   flutter_secure_storage: ^8.0.0
   flutter_svg: ^1.1.6
@@ -46,35 +52,32 @@ dependencies:
   hooks_riverpod: ^2.1.1
   html: ^0.15.1
   http: ^0.13.5
+  intl: ^0.18.0
   introduction_screen: ^3.0.2
-  json_annotation: ^4.8.0
-  json_serializable: ^6.6.0
-  libadwaita: ^1.2.5
+  json_annotation: ^4.8.1
   logger: ^1.1.0
-  macos_ui: ^1.9.0
-  marquee: ^2.2.3
-  metadata_god: ^0.4.1
+  media_kit: ^0.0.7+1
+  media_kit_libs_android_audio: ^1.0.4
+  media_kit_libs_ios_audio: ^1.0.4 
+  media_kit_libs_linux: ^1.0.2
+  media_kit_libs_macos_audio: ^1.0.5
+  media_kit_libs_windows_audio: ^1.0.3
+  metadata_god: ^0.5.0
   mime: ^1.0.2
   package_info_plus: ^3.0.2
   palette_generator: ^0.3.3
   path: ^1.8.0
   path_provider: ^2.0.8
   permission_handler: ^10.2.0
-  platform_ui:
-    git:
-      url: https://github.com/KRTirtho/platform_ui.git
-      ref: 339ea7922d2f881d9a72b565aeebc7e2c4b22509
-  pocketbase: ^0.7.1+1
   popover: ^0.2.6+3
-  queue: ^3.1.0+1
   scroll_to_index: ^3.0.1
   shared_preferences: ^2.0.11
+  sidebarx: ^0.15.0
   skeleton_text: ^3.0.0
-  spotify:
-    git:
-      url: https://github.com/rinukkusu/spotify-dart
-      ref: 9e8ef4556942d42d74874de5491253156e7e6f43
-  tuple: ^2.0.1
+  smtc_windows: ^0.1.0
+  spotify: ^0.11.0
+  system_theme: ^2.1.0
+  titlebar_buttons: ^1.0.0
   url_launcher: ^6.1.7
   uuid: ^3.0.7
   version: ^3.0.2
@@ -85,18 +88,29 @@ dependencies:
       url: https://github.com/google/flutter-desktop-embedding.git
       ref: a738913c8ce2c9f47515382d40827e794a334274
       path: plugins/window_size
-  youtube_explode_dart: ^1.12.1
+  piped_client: ^0.1.0
+  supabase_flutter: ^1.9.1
+  device_preview: ^1.1.0
+  media_kit_native_event_loop: ^1.0.4
+  dbus: ^0.7.8
+  background_downloader: ^7.4.0
+  duration: ^3.0.12
+  disable_battery_optimization: ^1.1.0+1
+  youtube_explode_dart: ^1.12.4
 
 dev_dependencies:
   build_runner: ^2.3.2
-  envied_generator: ^0.3.0
+  envied_generator: ^0.3.0+3
   flutter_distributor: ^0.0.2
   flutter_gen_runner: ^5.1.0+1
-  flutter_launcher_icons: ^0.11.0
+  flutter_launcher_icons: ^0.13.1
   flutter_lints: ^2.0.1
   flutter_test:
     sdk: flutter
+  integration_test:
+    sdk: flutter
   hive_generator: ^2.0.0
+  json_serializable: ^6.6.2
   pub_api_client: ^2.4.0
   pubspec_parse: ^1.2.2
 
@@ -104,10 +118,12 @@ dependency_overrides:
   package_info_plus: ^3.0.2
 
 flutter:
+  generate: true
   uses-material-design: true
   assets:
     - assets/
     - assets/tutorial/
+    - LICENSE
 
 flutter_icons:
   android: true
@@ -124,3 +140,14 @@ flutter_icons:
 
 flutter_gen:
   output: lib/collections
+
+flutter_native_splash:
+  background_image: assets/bengali-patterns-bg.jpg
+  image: assets/spotube-logo.png
+  branding: assets/branding.png
+  android_12:
+    image: assets/spotube-logo_android12.png
+    branding: assets/branding.png
+    color: "#000000"
+    icon_background_color: "#000000"
+  web: false
diff --git a/scripts/install.sh b/scripts/install.sh
new file mode 100755
index 00000000..52526f95
--- /dev/null
+++ b/scripts/install.sh
@@ -0,0 +1,182 @@
+#!/bin/bash
+
+
+INSTLLATION_DIR=/usr/share/spotube
+DESKTOP_FILE_PATH=/usr/share/applications/spotube.desktop
+APP_DATA_PATH=/usr/share/appdata/spotube.appdata.xml
+ICON_PATH=/usr/share/icons/spotube/spotube-logo.png
+BIN_SYMLINK_PATH=/usr/bin/spotube
+
+TEMP_DIR=/tmp/spotube-installer
+
+# get latest version from github api
+VERSION=$(curl --silent "https://api.github.com/repos/KRTirtho/spotube/releases/latest" \
+          | grep -Po '"tag_name": "\K.*?(?=")')
+
+function spotube_help(){
+  # available flags are -v or --version to specify what version to download
+  echo "Usage: ./install.sh [flags]"
+  echo "Flags:"
+  echo "  -v, --version <version>    Specify what version to download. Default: $VERSION"
+  echo "  -h, --help                 Show this help message"
+  echo "  -r, --remove               Remove spotube from your system"
+  exit 0
+}
+
+# a function to check if a given command exists or not and returns bool
+function command_exists() {
+    command -v "$@" >/dev/null 2>&1
+}
+
+function install_deps(){
+    local DEBIAN_DEPS="curl tar mpv libappindicator3-1 gir1.2-appindicator3-0.1 libsecret-1-0 libnotify-bin libjsoncpp25"
+    local RPM_DEPS="curl tar mpv libappindicator jsoncpp libsecret libnotify"
+    local ARCH_DEPS="curl tar mpv libappindicator-gtk3 libsecret jsoncpp libnotify"
+
+    if command_exists apt; then
+        sudo apt install -y $DEBIAN_DEPS
+    elif command_exists dnf; then
+        sudo dnf install -y $RPM_DEPS
+    elif command_exists yum; then
+        sudo yum install -y $RPM_DEPS
+    elif command_exists zypper; then
+        sudo zypper install -y $RPM_DEPS
+    elif command_exists pacman; then
+        sudo pacman -Sy $ARCH_DEPS
+    else
+        echo "Your package manager is not supported by this script. Please install the dependencies manually."
+        echo "The dependencies are: curl, tar, mpv, appindicator, libsecret, jsoncpp, libnotify"
+fi
+}
+
+function download_extract_spotube(){
+  local TAR_PATH=/tmp/spotube-$VERSION.tar.xz
+  local DOWNLOAD_URL=https://github.com/KRTirtho/spotube/releases/download/v$VERSION/spotube-linux-$VERSION-x86_64.tar.xz
+
+  # check if version is nightly
+
+  if [ "$VERSION" = "nightly" ]; then
+      DOWNLOAD_URL=https://github.com/KRTirtho/spotube/releases/download/nightly/spotube-linux-nightly-x86_64.tar.xz
+  fi
+
+  
+  rm -rf $TEMP_DIR
+  mkdir -p $TEMP_DIR
+  
+
+  # check if already exists downloaded file
+  if [ -f $TAR_PATH ]; then
+    echo "Found spotube-$VERSION.tar.xz in /tmp. Skipping download..."
+  else
+    echo "Downloading spotube-$VERSION.tar.xz..."
+    curl -L $DOWNLOAD_URL -o $TAR_PATH
+  fi
+
+  # Extract the tarball
+  tar -xf $TAR_PATH -C $TEMP_DIR
+
+  # check if $TEMP_DIR empty or not
+
+  if [ ! "$(ls -A $TEMP_DIR)" ]; then
+    echo "Failed to extract the tarball. Redownloading..."
+    rm -f $TAR_PATH
+    curl -L $DOWNLOAD_URL -o $TAR_PATH
+    tar -xf $TAR_PATH -C $TEMP_DIR
+  fi
+  
+  # checking one last time
+  if [ ! "$(ls -A $TEMP_DIR)" ]; then
+    echo "Failed to extract the tarball. Aborting installation..."
+    exit 1
+  fi
+}
+
+function install_spotube(){
+    # check if exists and uninstall if user allows
+
+    if [ -d $INSTLLATION_DIR ]; then
+        echo "Spotube is already installed. Do you want to uninstall it and then install? [y/N]"
+        read -r uninstall
+        if [ "$uninstall" = "y" ] || [ "$uninstall" = "Y" ]; then
+            uninstall_spotube
+        else
+            echo "Aborting installation..."
+            exit 1
+        fi
+    fi
+  
+    # Move the files to /usr/share/spotube
+
+    sudo mkdir -p $INSTLLATION_DIR
+
+    sudo mv $TEMP_DIR/data $INSTLLATION_DIR
+    sudo mv $TEMP_DIR/lib $INSTLLATION_DIR
+    sudo mv $TEMP_DIR/spotube $INSTLLATION_DIR
+
+    # Move the desktop file to /usr/share/applications
+
+    sudo mv $TEMP_DIR/spotube.desktop $DESKTOP_FILE_PATH
+
+    # Move the appdata file to /usr/share/appdata
+
+    sudo mv $TEMP_DIR/com.github.KRTirtho.Spotube.appdata.xml $APP_DATA_PATH
+
+    # Move the logo to /usr/share/icons/spotube
+
+    sudo mkdir -p /usr/share/icons/spotube
+
+    sudo mv $TEMP_DIR/spotube-logo.png $ICON_PATH
+
+    # Create a symlink to /usr/bin
+
+    sudo ln -s /usr/share/spotube/spotube $BIN_SYMLINK_PATH
+
+    # Clean up
+
+    rm -rf $TEMP_DIR
+
+    echo "Spotube $VERSION has been installed successfully!"
+}
+
+function uninstall_spotube(){
+    # confirm
+
+    echo "Are you sure you want to uninstall Spotube?"
+    echo
+    echo "This will remove following files and directories:"
+    echo "  $INSTLLATION_DIR"
+    echo "  $DESKTOP_FILE_PATH"
+    echo "  $APP_DATA_PATH"
+    echo "  $ICON_PATH"
+    echo "  $BIN_SYMLINK_PATH"
+    echo
+    echo "[y/N]"
+
+    read -r CONFIRMATION
+
+    if [[ "$CONFIRMATION" != "y" ]]; then
+        echo "Aborting uninstallation..."
+        exit 0
+    fi
+
+    # remove the files
+
+
+    sudo rm -rf $INSTLLATION_DIR $DESKTOP_FILE_PATH $APP_DATA_PATH $ICON_PATH $BIN_SYMLINK_PATH
+}
+
+# parse arguments -v, --version, -r, --remove, -h, --help
+
+while [[ "$#" -gt 0 ]]; do
+    case $1 in
+        -v|--version) VERSION="$2"; shift ;;
+        -r|--remove) uninstall_spotube; exit 0 ;;
+        -h|--help) spotube_help; exit 0 ;;
+        *) echo "Unknown parameter passed: $1"; spotube_help; exit 1 ;;
+    esac
+    shift
+done
+
+install_deps
+download_extract_spotube
+install_spotube
\ No newline at end of file
diff --git a/scripts/update_flathub_version.py b/scripts/update_flathub_version.py
index 27d6682d..3ac5d6f7 100644
--- a/scripts/update_flathub_version.py
+++ b/scripts/update_flathub_version.py
@@ -15,6 +15,7 @@ with open(YAML_FILENAME, mode="r", encoding="utf-8") as input:
 # Requires the 2nd VERSION argument to be passed
 version = sys.argv[1:][0]
 
+
 tar_url = f"https://github.com/{REPO}/releases/download/v{version}/spotube-linux-{version}-x86_64.tar.xz"
 tar_sha256 = hashlib.sha256()
 print(f"Downloading file {tar_url} to generete sha256 sum")
@@ -23,7 +24,7 @@ for chunk in tar.iter_content():
     if chunk:
         tar_sha256.update(chunk)
 
-tar_source = config["modules"][0]["sources"][0]
+tar_source = config["modules"][-1]["sources"][0]
 tar_source["url"] = tar_url
 tar_source["sha256"] = tar_sha256.hexdigest()
 
diff --git a/untranslated_messages.json b/untranslated_messages.json
new file mode 100644
index 00000000..9e26dfee
--- /dev/null
+++ b/untranslated_messages.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/website/components/DownloadButton.tsx b/website/components/DownloadButton.tsx
index 4805640b..1aa43e70 100644
--- a/website/components/DownloadButton.tsx
+++ b/website/components/DownloadButton.tsx
@@ -50,7 +50,7 @@ const DownloadLinks = Object.freeze({
   [Platform.mac]: [
     {
       name: "dmg",
-      url: baseURL + "Spotube-macos-x86_64.dmg",
+      url: baseURL + "Spotube-macos-universal.dmg",
       icon: <FaApple />,
     },
   ],
diff --git a/website/posts/getting-started-with-spotube.md b/website/posts/getting-started-with-spotube.md
index 81a8712e..e0da2574 100644
--- a/website/posts/getting-started-with-spotube.md
+++ b/website/posts/getting-started-with-spotube.md
@@ -1,6 +1,6 @@
 ---
 title: Getting Started With Spotube
-cover_image: https://github.com/KRTirtho/spotube/raw/master/assets/spotube-screenshot.jpg
+cover_image: https://github.com/KRTirtho/spotube/raw/master/assets/spotube-screenshot.png
 date: "July 16, 2022"
 author: Kingkor Roy Tirtho
 author_avatar_url: https://avatars.githubusercontent.com/u/61944859?v=4
diff --git a/windows/flutter/generated_plugin_registrant.cc b/windows/flutter/generated_plugin_registrant.cc
index 552e8d72..93029f40 100644
--- a/windows/flutter/generated_plugin_registrant.cc
+++ b/windows/flutter/generated_plugin_registrant.cc
@@ -6,26 +6,41 @@
 
 #include "generated_plugin_registrant.h"
 
-#include <audioplayers_windows/audioplayers_windows_plugin.h>
+#include <app_links/app_links_plugin_c_api.h>
 #include <catcher/catcher_plugin.h>
+#include <connectivity_plus/connectivity_plus_windows_plugin.h>
 #include <flutter_secure_storage_windows/flutter_secure_storage_windows_plugin.h>
+#include <local_notifier/local_notifier_plugin.h>
+#include <media_kit_libs_windows_audio/media_kit_libs_windows_audio_plugin_c_api.h>
 #include <permission_handler_windows/permission_handler_windows_plugin.h>
 #include <screen_retriever/screen_retriever_plugin.h>
+#include <system_theme/system_theme_plugin.h>
+#include <system_tray/system_tray_plugin.h>
 #include <url_launcher_windows/url_launcher_windows.h>
 #include <window_manager/window_manager_plugin.h>
 #include <window_size/window_size_plugin.h>
 
 void RegisterPlugins(flutter::PluginRegistry* registry) {
-  AudioplayersWindowsPluginRegisterWithRegistrar(
-      registry->GetRegistrarForPlugin("AudioplayersWindowsPlugin"));
+  AppLinksPluginCApiRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("AppLinksPluginCApi"));
   CatcherPluginRegisterWithRegistrar(
       registry->GetRegistrarForPlugin("CatcherPlugin"));
+  ConnectivityPlusWindowsPluginRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("ConnectivityPlusWindowsPlugin"));
   FlutterSecureStorageWindowsPluginRegisterWithRegistrar(
       registry->GetRegistrarForPlugin("FlutterSecureStorageWindowsPlugin"));
+  LocalNotifierPluginRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("LocalNotifierPlugin"));
+  MediaKitLibsWindowsAudioPluginCApiRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("MediaKitLibsWindowsAudioPluginCApi"));
   PermissionHandlerWindowsPluginRegisterWithRegistrar(
       registry->GetRegistrarForPlugin("PermissionHandlerWindowsPlugin"));
   ScreenRetrieverPluginRegisterWithRegistrar(
       registry->GetRegistrarForPlugin("ScreenRetrieverPlugin"));
+  SystemThemePluginRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("SystemThemePlugin"));
+  SystemTrayPluginRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("SystemTrayPlugin"));
   UrlLauncherWindowsRegisterWithRegistrar(
       registry->GetRegistrarForPlugin("UrlLauncherWindows"));
   WindowManagerPluginRegisterWithRegistrar(
diff --git a/windows/flutter/generated_plugins.cmake b/windows/flutter/generated_plugins.cmake
index aedb0000..eeb98007 100644
--- a/windows/flutter/generated_plugins.cmake
+++ b/windows/flutter/generated_plugins.cmake
@@ -3,18 +3,25 @@
 #
 
 list(APPEND FLUTTER_PLUGIN_LIST
-  audioplayers_windows
+  app_links
   catcher
+  connectivity_plus
   flutter_secure_storage_windows
+  local_notifier
+  media_kit_libs_windows_audio
   permission_handler_windows
   screen_retriever
+  system_theme
+  system_tray
   url_launcher_windows
   window_manager
   window_size
 )
 
 list(APPEND FLUTTER_FFI_PLUGIN_LIST
+  media_kit_native_event_loop
   metadata_god
+  smtc_windows
 )
 
 set(PLUGIN_BUNDLED_LIBRARIES)