From 44a4b88809e6eaacb9246f25499a734bb1889081 Mon Sep 17 00:00:00 2001
From: Jeff <42182408+jeffvli@users.noreply.github.com>
Date: Sat, 28 Jan 2023 20:46:07 -0800
Subject: [PATCH] Migrate to mantine v6 (#15)

* Add letter spacing to cell text

* Set window control height in px

* Add temp unused routes

* Migrate text title font weights

* Bump mantine to v6 alpha

* Migrate modals / notifications

* Increase header bar to 65px

* Adjust play button props

* Migrate various components

* Migrate various pages and root styles

* Adjust default badge padding

* Fix sidebar spacing

* Fix list header badges

* Adjust default theme
---
 package-lock.json                             | 419 +++++++++++-----
 package.json                                  |  18 +-
 src/renderer/app.tsx                          |  88 ++--
 src/renderer/components/badge/index.tsx       |   1 -
 src/renderer/components/button/index.tsx      |   6 +-
 .../components/dropdown-menu/index.tsx        |   1 -
 .../components/feature-carousel/index.tsx     |  47 +-
 .../components/grid-carousel/index.tsx        |   4 +-
 src/renderer/components/modal/index.tsx       |   2 -
 src/renderer/components/page-header/index.tsx |   2 +-
 .../components/search-input/index.tsx         |   1 +
 src/renderer/components/text-title/index.tsx  |   4 +
 src/renderer/components/toast/index.tsx       |   1 -
 .../cells/combined-title-cell.tsx             |   1 +
 .../virtual-table/cells/generic-cell.tsx      |   1 +
 .../headers/generic-table-header.tsx          |   2 +-
 .../hooks/use-fixed-table-header.tsx          |   2 +-
 .../components/mpv-required.tsx               |   2 +-
 .../components/server-credential-required.tsx |   4 +-
 .../components/server-required.tsx            |   2 +-
 .../components/album-detail-content.tsx       |   4 +-
 .../albums/components/album-detail-header.tsx |   4 +-
 .../albums/components/album-list-header.tsx   |  15 +-
 .../albums/routes/album-detail-route.tsx      |   4 +-
 .../album-artist-detail-content.tsx           |  12 +-
 ...-artist-detail-discography-detail-list.tsx | 198 ++++++++
 ...album-artist-detail-discography-header.tsx | 473 ++++++++++++++++++
 .../album-artist-detail-discography-list.tsx  |   0
 .../components/album-artist-detail-header.tsx |   2 +-
 .../album-artist-detail-song-list-content.tsx |  48 +-
 .../album-artist-detail-song-list-header.tsx  |   5 +-
 ...um-artist-detail-top-songs-list-header.tsx |   2 +-
 .../components/album-artist-list-header.tsx   |  30 +-
 .../album-artist-detail-discography-route.tsx |  83 +++
 .../routes/album-artist-list-route.tsx        |  22 +
 .../features/home/routes/home-route.tsx       |   8 +-
 .../components/now-playing-header.tsx         |   2 +-
 .../components/sidebar-play-queue.tsx         |   4 +-
 .../components/playlist-detail-header.tsx     |   2 +-
 .../playlist-detail-song-list-header.tsx      |   2 +-
 .../servers/components/server-list-item.tsx   |  24 +-
 .../servers/components/server-list.tsx        |   2 +-
 .../settings/components/general-tab.tsx       |   2 +-
 .../settings/components/playback-tab.tsx      |   2 +-
 .../shared/components/library-header-bar.tsx  |  11 +-
 .../shared/components/library-header.tsx      |   9 +-
 .../shared/components/play-button.tsx         |   4 +-
 .../features/sidebar/components/sidebar.tsx   |  53 +-
 .../songs/components/song-list-header.tsx     |   5 +-
 src/renderer/router/titlebar-outlet.tsx       |   2 +-
 src/renderer/styles/ag-grid.scss              |   2 +-
 src/renderer/themes/default.scss              |   6 +-
 52 files changed, 1301 insertions(+), 349 deletions(-)
 create mode 100644 src/renderer/features/artists/components/album-artist-detail-discography-detail-list.tsx
 create mode 100644 src/renderer/features/artists/components/album-artist-detail-discography-header.tsx
 create mode 100644 src/renderer/features/artists/components/album-artist-detail-discography-list.tsx
 create mode 100644 src/renderer/features/artists/routes/album-artist-detail-discography-route.tsx

diff --git a/package-lock.json b/package-lock.json
index 8d3fe4ad..5810daa1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "feishin",
-  "version": "0.0.1-alpha3",
+  "version": "0.0.1-alpha4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "feishin",
-      "version": "0.0.1-alpha3",
+      "version": "0.0.1-alpha4",
       "hasInstallScript": true,
       "license": "GPL-3.0",
       "dependencies": {
@@ -16,17 +16,17 @@
         "@ag-grid-community/react": "^28.2.1",
         "@ag-grid-community/styles": "^28.2.1",
         "@emotion/react": "^11.10.4",
-        "@mantine/core": "^5.9.5",
-        "@mantine/dates": "^5.9.5",
-        "@mantine/dropzone": "^5.9.5",
-        "@mantine/form": "^5.9.5",
-        "@mantine/hooks": "^5.9.5",
-        "@mantine/modals": "^5.9.5",
-        "@mantine/notifications": "^5.9.5",
-        "@mantine/spotlight": "^5.9.5",
+        "@mantine/core": "^6.0.0-alpha.0",
+        "@mantine/dates": "^6.0.0-alpha.0",
+        "@mantine/dropzone": "^6.0.0-alpha.0",
+        "@mantine/form": "^6.0.0-alpha.0",
+        "@mantine/hooks": "^6.0.0-alpha.0",
+        "@mantine/modals": "^6.0.0-alpha.0",
+        "@mantine/notifications": "^6.0.0-alpha.0",
+        "@mantine/utils": "^6.0.0-alpha.0",
         "@tanstack/react-query": "^4.16.1",
         "@tanstack/react-query-devtools": "^4.16.1",
-        "@tanstack/react-virtual": "^3.0.0-beta.34",
+        "@tanstack/react-virtual": "^3.0.0-beta.39",
         "dayjs": "^1.11.6",
         "electron-debug": "^3.2.0",
         "electron-localshortcut": "^3.2.1",
@@ -1694,55 +1694,56 @@
       }
     },
     "node_modules/@mantine/core": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.9.5.tgz",
-      "integrity": "sha512-A3cYzGOJ9BpU6tgqTl8qzOe8mmqzvuB76N6IHsPjk+uhbQCBXuNaoxOemP0wEM4HpEAzH1FR1kGhk6tO3gogUA==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-GUeofUfoD84JviBZjXCwzpejjgXs57jbqU9RrpzeFo90nHPrCLp+gCPGMRmpJGShQVlAHk5AWBqDMFDQOSMIwA==",
       "dependencies": {
         "@floating-ui/react-dom-interactions": "^0.10.1",
-        "@mantine/styles": "5.9.5",
-        "@mantine/utils": "5.9.5",
+        "@mantine/styles": "6.0.0-alpha.0",
+        "@mantine/utils": "6.0.0-alpha.0",
         "@radix-ui/react-scroll-area": "1.0.2",
+        "react-remove-scroll": "^2.5.5",
         "react-textarea-autosize": "8.3.4"
       },
       "peerDependencies": {
-        "@mantine/hooks": "5.9.5",
+        "@mantine/hooks": "6.0.0-alpha.0",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"
       }
     },
     "node_modules/@mantine/dates": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-5.9.5.tgz",
-      "integrity": "sha512-lxjkoZ3DXIrJ/81X6FMd14PNoLE5qFm/cJumba0wy1OkhFjj2Ua9qEWOQs3lnjnrj9ocxCAy5DkRAoGdNfUNtQ==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-T8KpdhU71Y0TuPvmzwuOIzEwFDzaoutqzAr1YuzwArGNJ4G1Dab9Yzlv+rJyobkEkv51zH9DY6G/NBYLOTvj3g==",
       "dependencies": {
-        "@mantine/utils": "5.9.5"
+        "@mantine/utils": "6.0.0-alpha.0"
       },
       "peerDependencies": {
-        "@mantine/core": "5.9.5",
-        "@mantine/hooks": "5.9.5",
+        "@mantine/core": "6.0.0-alpha.0",
+        "@mantine/hooks": "6.0.0-alpha.0",
         "dayjs": ">=1.0.0",
         "react": ">=16.8.0"
       }
     },
     "node_modules/@mantine/dropzone": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-5.9.5.tgz",
-      "integrity": "sha512-Xh/U3dEK//p23yCGCPnd/9Q0HyjOrm9fsxRYifvmCFfzpSUKsBu25HxtiYJaG50nSHCincJCmIvbTB10kyDWCA==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-c7geyTSklNfAnVUFFSha7mEXVTAHMydrpIccMbEOJKgNrRIYVCE14lk+1G+FGBEBYjkd3ezAfpugHVKmWThBFw==",
       "dependencies": {
-        "@mantine/utils": "5.9.5",
+        "@mantine/utils": "6.0.0-alpha.0",
         "react-dropzone": "14.2.3"
       },
       "peerDependencies": {
-        "@mantine/core": "5.9.5",
-        "@mantine/hooks": "5.9.5",
+        "@mantine/core": "6.0.0-alpha.0",
+        "@mantine/hooks": "6.0.0-alpha.0",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"
       }
     },
     "node_modules/@mantine/form": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/form/-/form-5.9.5.tgz",
-      "integrity": "sha512-paOJggdQR+KGUtpCW3inH8hu12TwHMwDrOmMbqgaWuuRuwY+kZUnLtf7akLLnwH/C9S/YsDJ9B9QGHaQElilFw==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/form/-/form-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-lTBsF2k4Lg1ci5votYEc3UiOkCBUbUEBDuIVhq30T78cYrHwfaLuw+WgxpY3eJC+HKOkzmowjWLCDOslRy81WQ==",
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "klona": "^2.0.5"
@@ -1752,60 +1753,46 @@
       }
     },
     "node_modules/@mantine/hooks": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.9.5.tgz",
-      "integrity": "sha512-6u0oj5zFYAP8bY+iW5Y5HEFS6tZmvJN5KwNPH+F2Omw61hN7shehHED7Jbe5zkxcggFvqmkA/6FMk+VYfovmkA==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-nM07MwufE1u0TztsKqFcxWoiWVtPq9ksm9pa6YiiS7pHtnq6BE+8qK8ASBqCtTpXydMYGeIQ2fgJH2hRGVtQjg==",
       "peerDependencies": {
         "react": ">=16.8.0"
       }
     },
     "node_modules/@mantine/modals": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-5.9.5.tgz",
-      "integrity": "sha512-ZVtvzHCyjkkztWhz3gkbsX8wdm7j0lN8dAaF51xvQHs9eZPgP5gXzyGpqeU23trk8O+4b6nY/TT2+5amJ/SKrQ==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-SAAuS/Z5qMzeP0ZMVfSwy5B/C4YHi3e6C2wzJ9WrDYAxmwVKFTShDffY8X0QHq452n16oc5q2H9nhsm2/4+lCg==",
       "dependencies": {
-        "@mantine/utils": "5.9.5"
+        "@mantine/utils": "6.0.0-alpha.0"
       },
       "peerDependencies": {
-        "@mantine/core": "5.9.5",
-        "@mantine/hooks": "5.9.5",
+        "@mantine/core": "6.0.0-alpha.0",
+        "@mantine/hooks": "6.0.0-alpha.0",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"
       }
     },
     "node_modules/@mantine/notifications": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-5.9.5.tgz",
-      "integrity": "sha512-RGr48xPVMjlt0l6LEG7sncgTf4oKHxBDtLYOBwybNuLs1pcpmoHGdcgCkvINnXKWFHF8IQG/l3eDlKBseromJQ==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-itxhWPiOBfNvNPnrmNEuuDsjCyOYznYYrsnklYywwGpvMfXFXJjOiAhgGqEf7VsEo56k787jDATt9aveBIDofQ==",
       "dependencies": {
-        "@mantine/utils": "5.9.5",
+        "@mantine/utils": "6.0.0-alpha.0",
         "react-transition-group": "4.4.2"
       },
       "peerDependencies": {
-        "@mantine/core": "5.9.5",
-        "@mantine/hooks": "5.9.5",
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@mantine/spotlight": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/spotlight/-/spotlight-5.9.5.tgz",
-      "integrity": "sha512-JFk9UKaagwMJjljySYpWq2QR3yHrFcxgWltY2ebjtFsPIKllzXxHAy/+VetytyNl9LtKnF8q0A93OctlGamq4A==",
-      "dependencies": {
-        "@mantine/utils": "5.9.5"
-      },
-      "peerDependencies": {
-        "@mantine/core": "5.9.5",
-        "@mantine/hooks": "5.9.5",
+        "@mantine/core": "6.0.0-alpha.0",
+        "@mantine/hooks": "6.0.0-alpha.0",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"
       }
     },
     "node_modules/@mantine/styles": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.9.5.tgz",
-      "integrity": "sha512-Rixu60eVS9aP8ugTM0Yoc5MpXXsfemRlu2PDZGL0fhcOyUYHi5mXvlhgxqrET3zkFrBJ+PHuPLQBgBimffGqiw==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-DEq94AX41zOr5wsRO5vn8rLb3cFhfycU0pELzMHi8TLUiMuiphTn8eM5QrrfX78AGDK4z6fFwT+KI7J5Brm+mA==",
       "dependencies": {
         "clsx": "1.1.1",
         "csstype": "3.0.9"
@@ -1822,9 +1809,9 @@
       "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
     },
     "node_modules/@mantine/utils": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.9.5.tgz",
-      "integrity": "sha512-OtMOvXMyqpZ+Tz25DYRwRkvERvmF4L0RJiq+JnXk+1yKDvG+JZQuMMLnt0nZ81T6q7uzDSA29cJ45syHL2BXmQ==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-1UggIXUVrsYi/Fo3wc/0v1A0rwV562TJmoqUtaJCyB/cyhemytEztpfl4XzxhITwoy7Ydziw3ubZnfMMchUX5w==",
       "peerDependencies": {
         "react": ">=16.8.0"
       }
@@ -2299,11 +2286,11 @@
       }
     },
     "node_modules/@tanstack/react-virtual": {
-      "version": "3.0.0-beta.34",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.34.tgz",
-      "integrity": "sha512-EQdy+jSObZzeuDSbFBxLbnRnvooth+4CBs5gh3FAhaaH3X99Km42pOWwXgPpu6mZCstxlopoFc4BY957i4uG5Q==",
+      "version": "3.0.0-beta.39",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.39.tgz",
+      "integrity": "sha512-odun31XKT4gQyJXw0ipsNmXL7AAO+mbg2omoxZyW+JJyqU5m1S3BeLpZQKMCv+Ek59mPGeGWPZXxaZd7TalnHg==",
       "dependencies": {
-        "@tanstack/virtual-core": "3.0.0-beta.34"
+        "@tanstack/virtual-core": "3.0.0-beta.39"
       },
       "funding": {
         "type": "github",
@@ -2314,9 +2301,9 @@
       }
     },
     "node_modules/@tanstack/virtual-core": {
-      "version": "3.0.0-beta.34",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.34.tgz",
-      "integrity": "sha512-9whWuShYSwpJV6kPufEGuNXXJfdkqspD55GMjqE1wPJ8g2iHk0HQdPlb5kGgt/2IDYrxAV/mMFWQM1lMj7cKkg==",
+      "version": "3.0.0-beta.39",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.39.tgz",
+      "integrity": "sha512-VZ1ESIo+PAPOsxqGzccFPWDD/gsJAViSTU6glhd5pLSMkYDsmtdklfYrE3bWLC3dsbLWI689yzpLgh436v26mQ==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
@@ -7010,6 +6997,11 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "node_modules/detect-port": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz",
@@ -10732,6 +10724,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-package-type": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@@ -12048,6 +12048,14 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -17548,6 +17556,51 @@
         "typescript": "^4"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.5.0.tgz",
@@ -17611,6 +17664,28 @@
         "react": "^16 || ^17 || ^18"
       }
     },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-test-renderer": {
       "version": "18.0.0",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.0.0.tgz",
@@ -22585,6 +22660,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
+      "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-composed-ref": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
@@ -22622,6 +22717,27 @@
         }
       }
     },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@@ -24993,78 +25109,71 @@
       }
     },
     "@mantine/core": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.9.5.tgz",
-      "integrity": "sha512-A3cYzGOJ9BpU6tgqTl8qzOe8mmqzvuB76N6IHsPjk+uhbQCBXuNaoxOemP0wEM4HpEAzH1FR1kGhk6tO3gogUA==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-GUeofUfoD84JviBZjXCwzpejjgXs57jbqU9RrpzeFo90nHPrCLp+gCPGMRmpJGShQVlAHk5AWBqDMFDQOSMIwA==",
       "requires": {
         "@floating-ui/react-dom-interactions": "^0.10.1",
-        "@mantine/styles": "5.9.5",
-        "@mantine/utils": "5.9.5",
+        "@mantine/styles": "6.0.0-alpha.0",
+        "@mantine/utils": "6.0.0-alpha.0",
         "@radix-ui/react-scroll-area": "1.0.2",
+        "react-remove-scroll": "^2.5.5",
         "react-textarea-autosize": "8.3.4"
       }
     },
     "@mantine/dates": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-5.9.5.tgz",
-      "integrity": "sha512-lxjkoZ3DXIrJ/81X6FMd14PNoLE5qFm/cJumba0wy1OkhFjj2Ua9qEWOQs3lnjnrj9ocxCAy5DkRAoGdNfUNtQ==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-T8KpdhU71Y0TuPvmzwuOIzEwFDzaoutqzAr1YuzwArGNJ4G1Dab9Yzlv+rJyobkEkv51zH9DY6G/NBYLOTvj3g==",
       "requires": {
-        "@mantine/utils": "5.9.5"
+        "@mantine/utils": "6.0.0-alpha.0"
       }
     },
     "@mantine/dropzone": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-5.9.5.tgz",
-      "integrity": "sha512-Xh/U3dEK//p23yCGCPnd/9Q0HyjOrm9fsxRYifvmCFfzpSUKsBu25HxtiYJaG50nSHCincJCmIvbTB10kyDWCA==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-c7geyTSklNfAnVUFFSha7mEXVTAHMydrpIccMbEOJKgNrRIYVCE14lk+1G+FGBEBYjkd3ezAfpugHVKmWThBFw==",
       "requires": {
-        "@mantine/utils": "5.9.5",
+        "@mantine/utils": "6.0.0-alpha.0",
         "react-dropzone": "14.2.3"
       }
     },
     "@mantine/form": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/form/-/form-5.9.5.tgz",
-      "integrity": "sha512-paOJggdQR+KGUtpCW3inH8hu12TwHMwDrOmMbqgaWuuRuwY+kZUnLtf7akLLnwH/C9S/YsDJ9B9QGHaQElilFw==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/form/-/form-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-lTBsF2k4Lg1ci5votYEc3UiOkCBUbUEBDuIVhq30T78cYrHwfaLuw+WgxpY3eJC+HKOkzmowjWLCDOslRy81WQ==",
       "requires": {
         "fast-deep-equal": "^3.1.3",
         "klona": "^2.0.5"
       }
     },
     "@mantine/hooks": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.9.5.tgz",
-      "integrity": "sha512-6u0oj5zFYAP8bY+iW5Y5HEFS6tZmvJN5KwNPH+F2Omw61hN7shehHED7Jbe5zkxcggFvqmkA/6FMk+VYfovmkA==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-nM07MwufE1u0TztsKqFcxWoiWVtPq9ksm9pa6YiiS7pHtnq6BE+8qK8ASBqCtTpXydMYGeIQ2fgJH2hRGVtQjg==",
       "requires": {}
     },
     "@mantine/modals": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-5.9.5.tgz",
-      "integrity": "sha512-ZVtvzHCyjkkztWhz3gkbsX8wdm7j0lN8dAaF51xvQHs9eZPgP5gXzyGpqeU23trk8O+4b6nY/TT2+5amJ/SKrQ==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-SAAuS/Z5qMzeP0ZMVfSwy5B/C4YHi3e6C2wzJ9WrDYAxmwVKFTShDffY8X0QHq452n16oc5q2H9nhsm2/4+lCg==",
       "requires": {
-        "@mantine/utils": "5.9.5"
+        "@mantine/utils": "6.0.0-alpha.0"
       }
     },
     "@mantine/notifications": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-5.9.5.tgz",
-      "integrity": "sha512-RGr48xPVMjlt0l6LEG7sncgTf4oKHxBDtLYOBwybNuLs1pcpmoHGdcgCkvINnXKWFHF8IQG/l3eDlKBseromJQ==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-itxhWPiOBfNvNPnrmNEuuDsjCyOYznYYrsnklYywwGpvMfXFXJjOiAhgGqEf7VsEo56k787jDATt9aveBIDofQ==",
       "requires": {
-        "@mantine/utils": "5.9.5",
+        "@mantine/utils": "6.0.0-alpha.0",
         "react-transition-group": "4.4.2"
       }
     },
-    "@mantine/spotlight": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/spotlight/-/spotlight-5.9.5.tgz",
-      "integrity": "sha512-JFk9UKaagwMJjljySYpWq2QR3yHrFcxgWltY2ebjtFsPIKllzXxHAy/+VetytyNl9LtKnF8q0A93OctlGamq4A==",
-      "requires": {
-        "@mantine/utils": "5.9.5"
-      }
-    },
     "@mantine/styles": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.9.5.tgz",
-      "integrity": "sha512-Rixu60eVS9aP8ugTM0Yoc5MpXXsfemRlu2PDZGL0fhcOyUYHi5mXvlhgxqrET3zkFrBJ+PHuPLQBgBimffGqiw==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-DEq94AX41zOr5wsRO5vn8rLb3cFhfycU0pELzMHi8TLUiMuiphTn8eM5QrrfX78AGDK4z6fFwT+KI7J5Brm+mA==",
       "requires": {
         "clsx": "1.1.1",
         "csstype": "3.0.9"
@@ -25078,9 +25187,9 @@
       }
     },
     "@mantine/utils": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.9.5.tgz",
-      "integrity": "sha512-OtMOvXMyqpZ+Tz25DYRwRkvERvmF4L0RJiq+JnXk+1yKDvG+JZQuMMLnt0nZ81T6q7uzDSA29cJ45syHL2BXmQ==",
+      "version": "6.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-6.0.0-alpha.0.tgz",
+      "integrity": "sha512-1UggIXUVrsYi/Fo3wc/0v1A0rwV562TJmoqUtaJCyB/cyhemytEztpfl4XzxhITwoy7Ydziw3ubZnfMMchUX5w==",
       "requires": {}
     },
     "@mdn/browser-compat-data": {
@@ -25423,17 +25532,17 @@
       }
     },
     "@tanstack/react-virtual": {
-      "version": "3.0.0-beta.34",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.34.tgz",
-      "integrity": "sha512-EQdy+jSObZzeuDSbFBxLbnRnvooth+4CBs5gh3FAhaaH3X99Km42pOWwXgPpu6mZCstxlopoFc4BY957i4uG5Q==",
+      "version": "3.0.0-beta.39",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.39.tgz",
+      "integrity": "sha512-odun31XKT4gQyJXw0ipsNmXL7AAO+mbg2omoxZyW+JJyqU5m1S3BeLpZQKMCv+Ek59mPGeGWPZXxaZd7TalnHg==",
       "requires": {
-        "@tanstack/virtual-core": "3.0.0-beta.34"
+        "@tanstack/virtual-core": "3.0.0-beta.39"
       }
     },
     "@tanstack/virtual-core": {
-      "version": "3.0.0-beta.34",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.34.tgz",
-      "integrity": "sha512-9whWuShYSwpJV6kPufEGuNXXJfdkqspD55GMjqE1wPJ8g2iHk0HQdPlb5kGgt/2IDYrxAV/mMFWQM1lMj7cKkg=="
+      "version": "3.0.0-beta.39",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.39.tgz",
+      "integrity": "sha512-VZ1ESIo+PAPOsxqGzccFPWDD/gsJAViSTU6glhd5pLSMkYDsmtdklfYrE3bWLC3dsbLWI689yzpLgh436v26mQ=="
     },
     "@teamsupercell/typings-for-css-modules-loader": {
       "version": "2.5.1",
@@ -29104,6 +29213,11 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
+    "detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "detect-port": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz",
@@ -31923,6 +32037,11 @@
         "has-symbols": "^1.0.3"
       }
     },
+    "get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="
+    },
     "get-package-type": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@@ -32923,6 +33042,14 @@
       "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
       "dev": true
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -37012,6 +37139,27 @@
       "dev": true,
       "requires": {}
     },
+    "react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "requires": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      }
+    },
+    "react-remove-scroll-bar": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+      "requires": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      }
+    },
     "react-router": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.5.0.tgz",
@@ -37053,6 +37201,16 @@
         "prop-types": "^15.8.1"
       }
     },
+    "react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "requires": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      }
+    },
     "react-test-renderer": {
       "version": "18.0.0",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.0.0.tgz",
@@ -40941,6 +41099,14 @@
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
       "dev": true
     },
+    "use-callback-ref": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
+      "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "use-composed-ref": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
@@ -40961,6 +41127,15 @@
         "use-isomorphic-layout-effect": "^1.1.1"
       }
     },
+    "use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "requires": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      }
+    },
     "use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
diff --git a/package.json b/package.json
index 3b411833..1f5b72f3 100644
--- a/package.json
+++ b/package.json
@@ -253,17 +253,17 @@
     "@ag-grid-community/react": "^28.2.1",
     "@ag-grid-community/styles": "^28.2.1",
     "@emotion/react": "^11.10.4",
-    "@mantine/core": "^5.9.5",
-    "@mantine/dates": "^5.9.5",
-    "@mantine/dropzone": "^5.9.5",
-    "@mantine/form": "^5.9.5",
-    "@mantine/hooks": "^5.9.5",
-    "@mantine/modals": "^5.9.5",
-    "@mantine/notifications": "^5.9.5",
-    "@mantine/spotlight": "^5.9.5",
+    "@mantine/core": "^6.0.0-alpha.0",
+    "@mantine/dates": "^6.0.0-alpha.0",
+    "@mantine/dropzone": "^6.0.0-alpha.0",
+    "@mantine/form": "^6.0.0-alpha.0",
+    "@mantine/hooks": "^6.0.0-alpha.0",
+    "@mantine/modals": "^6.0.0-alpha.0",
+    "@mantine/notifications": "^6.0.0-alpha.0",
+    "@mantine/utils": "^6.0.0-alpha.0",
     "@tanstack/react-query": "^4.16.1",
     "@tanstack/react-query-devtools": "^4.16.1",
-    "@tanstack/react-virtual": "^3.0.0-beta.34",
+    "@tanstack/react-virtual": "^3.0.0-beta.39",
     "dayjs": "^1.11.6",
     "electron-debug": "^3.2.0",
     "electron-localshortcut": "^3.2.1",
diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
index 10847653..79bc64d1 100644
--- a/src/renderer/app.tsx
+++ b/src/renderer/app.tsx
@@ -4,10 +4,10 @@ import { ModuleRegistry } from '@ag-grid-community/core';
 import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
 import { MantineProvider } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
-import { NotificationsProvider } from '@mantine/notifications';
 import { initSimpleImg } from 'react-simple-img';
 import { BaseContextModal } from './components';
 import { useTheme } from './hooks';
+import { Notifications } from '@mantine/notifications';
 import { AppRouter } from './router/app-router';
 import { useSettingsStore } from './store/settings.store';
 import './styles/global.scss';
@@ -36,13 +36,6 @@ export const App = () => {
       withGlobalStyles
       withNormalizeCSS
       theme={{
-        breakpoints: {
-          lg: 1200,
-          md: 1000,
-          sm: 800,
-          xl: 1400,
-          xs: 500,
-        },
         colorScheme: theme as 'light' | 'dark',
         components: { Modal: { styles: { body: { padding: '.5rem' } } } },
         defaultRadius: 'xs',
@@ -60,53 +53,52 @@ export const App = () => {
         },
         fontFamily: 'var(--content-font-family)',
         fontSizes: {
-          lg: 16,
-          md: 14,
-          sm: 12,
-          xl: 18,
-          xs: 10,
+          lg: '1.5rem',
+          md: '1.1rem',
+          sm: '0.9rem',
+          xl: '2rem',
+          xs: '0.8rem',
+        },
+        headings: {
+          fontFamily: 'var(--content-font-family)',
+          fontWeight: 700,
+          sizes: {
+            h1: '6rem',
+            h2: '4rem',
+            h3: '3rem',
+            h4: '1.5rem',
+            h5: '1.2rem',
+            h6: '1rem',
+          },
         },
-        headings: { fontFamily: 'var(--content-font-family)' },
         other: {},
         spacing: {
-          lg: 12,
-          md: 8,
-          sm: 4,
-          xl: 16,
-          xs: 2,
+          lg: '2rem',
+          md: '1rem',
+          sm: '0.5rem',
+          xl: '4rem',
+          xs: '0rem',
         },
       }}
     >
-      <NotificationsProvider
-        autoClose={1500}
-        position="bottom-center"
-        style={{
-          marginBottom: '85px',
-          opacity: '.8',
-          userSelect: 'none',
-          width: '300px',
-        }}
-        transitionDuration={200}
-      >
-        <ModalsProvider
-          modalProps={{
-            centered: true,
-            exitTransitionDuration: 300,
-            overflow: 'inside',
-            overlayBlur: 0,
-            overlayOpacity: 0.8,
+      <ModalsProvider
+        modalProps={{
+          centered: true,
+          transitionDuration: 300,
+          transitionProps: {
+            exitDuration: 300,
             transition: 'slide-down',
-            transitionDuration: 300,
-          }}
-          modals={{ base: BaseContextModal }}
-        >
-          <PlayQueueHandlerContext.Provider value={{ handlePlayQueueAdd }}>
-            <ContextMenuProvider>
-              <AppRouter />
-            </ContextMenuProvider>
-          </PlayQueueHandlerContext.Provider>
-        </ModalsProvider>
-      </NotificationsProvider>
+          },
+        }}
+        modals={{ base: BaseContextModal }}
+      >
+        <PlayQueueHandlerContext.Provider value={{ handlePlayQueueAdd }}>
+          <ContextMenuProvider>
+            <Notifications />
+            <AppRouter />
+          </ContextMenuProvider>
+        </PlayQueueHandlerContext.Provider>
+      </ModalsProvider>
     </MantineProvider>
   );
 };
diff --git a/src/renderer/components/badge/index.tsx b/src/renderer/components/badge/index.tsx
index 4a1a1b98..5f6cb680 100644
--- a/src/renderer/components/badge/index.tsx
+++ b/src/renderer/components/badge/index.tsx
@@ -10,7 +10,6 @@ const StyledBadge = styled(MantineBadge)<BadgeProps>`
   }
 
   .mantine-Badge-inner {
-    padding: 0 0.5rem;
     color: var(--badge-fg);
   }
 `;
diff --git a/src/renderer/components/button/index.tsx b/src/renderer/components/button/index.tsx
index 00e1dd92..755de521 100644
--- a/src/renderer/components/button/index.tsx
+++ b/src/renderer/components/button/index.tsx
@@ -92,7 +92,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
     opacity: 0.6;
   }
 
-  &:hover {
+  &:not([data-disabled])&:hover {
     color: ${(props) => {
       switch (props.variant) {
         case 'default':
@@ -100,7 +100,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
         case 'filled':
           return 'var(--btn-primary-fg-hover)';
         case 'subtle':
-          return 'var(--btn-subtle-fg-hover)';
+          return 'var(--btn-subtle-fg-hover) !important';
         default:
           return '';
       }
@@ -134,7 +134,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
     }
   }
 
-  &:focus-visible {
+  &:not([data-disabled])&:focus-visible {
     color: ${(props) => {
       switch (props.variant) {
         case 'default':
diff --git a/src/renderer/components/dropdown-menu/index.tsx b/src/renderer/components/dropdown-menu/index.tsx
index 000befb5..09707fbb 100644
--- a/src/renderer/components/dropdown-menu/index.tsx
+++ b/src/renderer/components/dropdown-menu/index.tsx
@@ -63,7 +63,6 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
   & .mantine-Menu-itemLabel {
     color: ${(props) => (props.$danger ? 'var(--danger-color)' : 'var(--dropdown-menu-fg)')};
     font-weight: 500;
-    font-size: 1em;
   }
 
   & .mantine-Menu-itemRightSection {
diff --git a/src/renderer/components/feature-carousel/index.tsx b/src/renderer/components/feature-carousel/index.tsx
index 7add1ef8..31d2e3dd 100644
--- a/src/renderer/components/feature-carousel/index.tsx
+++ b/src/renderer/components/feature-carousel/index.tsx
@@ -27,8 +27,7 @@ const Grid = styled.div`
   grid-auto-columns: 1fr;
   grid-template-areas: 'image info';
   grid-template-rows: 1fr;
-  grid-template-columns: 225px 1fr;
-  gap: 0.5rem;
+  grid-template-columns: 200px 1fr;
   width: 100%;
   max-width: 100%;
   height: 100%;
@@ -152,16 +151,27 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
                 />
               </ImageColumn>
               <InfoColumn>
-                <Stack sx={{ width: '100%' }}>
+                <Stack
+                  spacing="md"
+                  sx={{ width: '100%' }}
+                >
                   <TitleWrapper>
-                    <TextTitle fw="bold">{currentItem?.name}</TextTitle>
+                    <TextTitle
+                      lh="4rem"
+                      lineClamp={2}
+                      order={1}
+                      sx={{ fontSize: '4rem' }}
+                      weight={900}
+                    >
+                      {currentItem?.name}
+                    </TextTitle>
                   </TitleWrapper>
                   <TitleWrapper>
                     {currentItem?.albumArtists.map((artist) => (
                       <TextTitle
                         key={`carousel-artist-${artist.id}`}
-                        fw="600"
-                        order={3}
+                        order={2}
+                        weight={600}
                       >
                         {artist.name}
                       </TextTitle>
@@ -169,10 +179,15 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
                   </TitleWrapper>
                   <Group>
                     {currentItem?.genres?.map((genre) => (
-                      <Badge key={`carousel-genre-${genre.id}`}>{genre.name}</Badge>
+                      <Badge
+                        key={`carousel-genre-${genre.id}`}
+                        size="lg"
+                      >
+                        {genre.name}
+                      </Badge>
                     ))}
-                    <Badge>{currentItem?.releaseYear}</Badge>
-                    <Badge>{currentItem?.songCount} tracks</Badge>
+                    <Badge size="lg">{currentItem?.releaseYear}</Badge>
+                    <Badge size="lg">{currentItem?.songCount} tracks</Badge>
                   </Group>
                 </Stack>
               </InfoColumn>
@@ -187,25 +202,25 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
       </AnimatePresence>
       <Group
         spacing="xs"
-        sx={{ bottom: 0, position: 'absolute', right: 0, zIndex: 20 }}
+        sx={{ bottom: '1rem', position: 'absolute', right: 0, zIndex: 20 }}
       >
         <Button
           disabled={itemIndex === 0}
-          px="lg"
           radius={100}
-          variant="subtle"
+          size="md"
+          variant="default"
           onClick={handlePrevious}
         >
-          <RiArrowLeftSLine size={15} />
+          <RiArrowLeftSLine size="2rem" />
         </Button>
         <Button
           disabled={itemIndex === (data?.length || 1) - 1}
-          px="lg"
           radius={100}
-          variant="subtle"
+          size="md"
+          variant="default"
           onClick={handleNext}
         >
-          <RiArrowRightSLine size={15} />
+          <RiArrowRightSLine size="2rem" />
         </Button>
       </Group>
     </Wrapper>
diff --git a/src/renderer/components/grid-carousel/index.tsx b/src/renderer/components/grid-carousel/index.tsx
index 7edb2e4c..8593876e 100644
--- a/src/renderer/components/grid-carousel/index.tsx
+++ b/src/renderer/components/grid-carousel/index.tsx
@@ -199,10 +199,11 @@ const Title = ({ children }: TitleProps) => {
     <Group position="apart">
       {children}
       {showPaginationButtons && (
-        <Group>
+        <Group spacing="sm">
           <Button
             compact
             disabled={!pagination?.hasPreviousPage}
+            size="md"
             variant="default"
             onClick={handlePreviousPage}
           >
@@ -210,6 +211,7 @@ const Title = ({ children }: TitleProps) => {
           </Button>
           <Button
             compact
+            size="md"
             variant="default"
             onClick={handleNextPage}
           >
diff --git a/src/renderer/components/modal/index.tsx b/src/renderer/components/modal/index.tsx
index 28565875..97b80b27 100644
--- a/src/renderer/components/modal/index.tsx
+++ b/src/renderer/components/modal/index.tsx
@@ -21,8 +21,6 @@ export interface ModalProps extends Omit<MantineModalProps, 'onClose'> {
 export const Modal = ({ children, handlers, ...rest }: ModalProps) => {
   return (
     <MantineModal
-      overlayBlur={2}
-      overlayOpacity={0.2}
       {...rest}
       onClose={handlers.close}
     >
diff --git a/src/renderer/components/page-header/index.tsx b/src/renderer/components/page-header/index.tsx
index 1ea2e2ec..60dd4483 100644
--- a/src/renderer/components/page-header/index.tsx
+++ b/src/renderer/components/page-header/index.tsx
@@ -11,7 +11,7 @@ const Container = styled(motion(Flex))<{
   position: ${(props) => props.position || 'relative'};
   z-index: 2000;
   width: 100%;
-  height: ${(props) => props.height || '60px'};
+  height: ${(props) => props.height || '65px'};
 `;
 
 const Header = styled(motion.div)<{ $isHidden?: boolean; $padRight?: boolean }>`
diff --git a/src/renderer/components/search-input/index.tsx b/src/renderer/components/search-input/index.tsx
index baede677..2154abc1 100644
--- a/src/renderer/components/search-input/index.tsx
+++ b/src/renderer/components/search-input/index.tsx
@@ -44,6 +44,7 @@ export const SearchInput = ({
       ref={mergedRef}
       {...props}
       icon={showIcon && <RiSearchLine size={15} />}
+      size="md"
       styles={{
         icon: { svg: { fill: 'var(--btn-default-fg)' } },
         input: {
diff --git a/src/renderer/components/text-title/index.tsx b/src/renderer/components/text-title/index.tsx
index e031c002..d1ec0383 100644
--- a/src/renderer/components/text-title/index.tsx
+++ b/src/renderer/components/text-title/index.tsx
@@ -28,6 +28,10 @@ const StyledTextTitle = styled(MantineHeader)<TextTitleProps>`
     color: ${(props) => props.$link && 'var(--main-fg)'};
     text-decoration: ${(props) => (props.$link ? 'underline' : 'none')};
   }
+
+  h1 {
+    font-size: 4rem;
+  }
 `;
 
 const _TextTitle = ({ children, $secondary, overflow, $noSelect, ...rest }: TextTitleProps) => {
diff --git a/src/renderer/components/toast/index.tsx b/src/renderer/components/toast/index.tsx
index 529a6c1e..03daa037 100644
--- a/src/renderer/components/toast/index.tsx
+++ b/src/renderer/components/toast/index.tsx
@@ -34,7 +34,6 @@ const showToast = ({ type, ...props }: NotificationProps) => {
 
   return showNotification({
     autoClose: defaultDuration,
-    disallowClose: true,
     styles: () => ({
       closeButton: {},
       description: {
diff --git a/src/renderer/components/virtual-table/cells/combined-title-cell.tsx b/src/renderer/components/virtual-table/cells/combined-title-cell.tsx
index 6ba27bd8..1e8f7fab 100644
--- a/src/renderer/components/virtual-table/cells/combined-title-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/combined-title-cell.tsx
@@ -22,6 +22,7 @@ const CellContainer = styled(motion.div)<{ height: number }>`
   width: 100%;
   max-width: 100%;
   height: 100%;
+  letter-spacing: 0.5px;
 `;
 
 const ImageWrapper = styled.div`
diff --git a/src/renderer/components/virtual-table/cells/generic-cell.tsx b/src/renderer/components/virtual-table/cells/generic-cell.tsx
index 46ba07d6..1813e5c5 100644
--- a/src/renderer/components/virtual-table/cells/generic-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/generic-cell.tsx
@@ -25,6 +25,7 @@ export const CellContainer = styled(motion.div)<{ position?: 'left' | 'center' |
       : 'flex-start'};
   width: 100%;
   height: 100%;
+  letter-spacing: 0.5px;
 `;
 
 type Options = {
diff --git a/src/renderer/components/virtual-table/headers/generic-table-header.tsx b/src/renderer/components/virtual-table/headers/generic-table-header.tsx
index c5c30a94..62d55c0b 100644
--- a/src/renderer/components/virtual-table/headers/generic-table-header.tsx
+++ b/src/renderer/components/virtual-table/headers/generic-table-header.tsx
@@ -77,9 +77,9 @@ export const GenericTableHeader = (
 
   return (
     <TextHeaderWrapper
-      fw="500"
       overflow="hidden"
       position={position}
+      weight={500}
     >
       {children || displayName}
     </TextHeaderWrapper>
diff --git a/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx b/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx
index f2a9d93a..09028e66 100644
--- a/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx
+++ b/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx
@@ -6,7 +6,7 @@ export const useFixedTableHeader = () => {
   const tableContainerRef = useRef<HTMLDivElement | null>(null);
 
   const isNotPastTableIntersection = useInView(intersectRef, {
-    margin: '-63px 0px 0px 0px',
+    margin: '-68px 0px 0px 0px',
   });
 
   const tableInView = useInView(tableContainerRef, {
diff --git a/src/renderer/features/action-required/components/mpv-required.tsx b/src/renderer/features/action-required/components/mpv-required.tsx
index 14bf9b32..1f7b97ad 100644
--- a/src/renderer/features/action-required/components/mpv-required.tsx
+++ b/src/renderer/features/action-required/components/mpv-required.tsx
@@ -22,7 +22,7 @@ export const MpvRequired = () => {
 
   return (
     <>
-      <Text size="lg">Set your MPV executable location below and restart the application.</Text>
+      <Text>Set your MPV executable location below and restart the application.</Text>
       <Text>
         MPV is available at the following:{' '}
         <a
diff --git a/src/renderer/features/action-required/components/server-credential-required.tsx b/src/renderer/features/action-required/components/server-credential-required.tsx
index ed19c0d1..cf5ed90d 100644
--- a/src/renderer/features/action-required/components/server-credential-required.tsx
+++ b/src/renderer/features/action-required/components/server-credential-required.tsx
@@ -6,11 +6,11 @@ export const ServerCredentialRequired = () => {
 
   return (
     <>
-      <Text size="lg">
+      <Text>
         The selected server &apos;{currentServer?.name}&apos; requires an additional login to
         access.
       </Text>
-      <Text size="lg">
+      <Text>
         Add your credentials in the &apos;manage servers&apos; menu or switch to a different server.
       </Text>
     </>
diff --git a/src/renderer/features/action-required/components/server-required.tsx b/src/renderer/features/action-required/components/server-required.tsx
index 920c2a9d..7e50379e 100644
--- a/src/renderer/features/action-required/components/server-required.tsx
+++ b/src/renderer/features/action-required/components/server-required.tsx
@@ -3,7 +3,7 @@ import { Text } from '/@/renderer/components';
 export const ServerRequired = () => {
   return (
     <>
-      <Text size="xl">No server selected.</Text>
+      <Text>No server selected.</Text>
       <Text>Add or select a server in the file menu.</Text>
     </>
   );
diff --git a/src/renderer/features/albums/components/album-detail-content.tsx b/src/renderer/features/albums/components/album-detail-content.tsx
index 4fb4861c..ca03a837 100644
--- a/src/renderer/features/albums/components/album-detail-content.tsx
+++ b/src/renderer/features/albums/components/album-detail-content.tsx
@@ -126,8 +126,8 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
       },
       title: (
         <TextTitle
-          fw="bold"
           order={3}
+          weight={700}
         >
           More from this artist
         </TextTitle>
@@ -189,7 +189,7 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
           ref={showGenres ? null : intersectRef}
           className="test"
           py="1rem"
-          spacing="lg"
+          spacing="md"
         >
           <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
           <Group spacing="xs">
diff --git a/src/renderer/features/albums/components/album-detail-header.tsx b/src/renderer/features/albums/components/album-detail-header.tsx
index 08f9ed1b..3c6f507d 100644
--- a/src/renderer/features/albums/components/album-detail-header.tsx
+++ b/src/renderer/features/albums/components/album-detail-header.tsx
@@ -47,7 +47,7 @@ export const AlbumDetailHeader = forwardRef(
           item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
           title={detailQuery?.data?.name || ''}
         >
-          <Stack mt="1rem">
+          <Stack spacing="sm">
             <Group>
               {metadataItems.map((item, index) => (
                 <Fragment key={`item-${item.id}-${index}`}>
@@ -79,10 +79,10 @@ export const AlbumDetailHeader = forwardRef(
                   <Text
                     $link
                     component={Link}
-                    fw="600"
                     to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
                       albumArtistId: artist.id,
                     })}
+                    weight={600}
                   >
                     {artist.name}
                   </Text>
diff --git a/src/renderer/features/albums/components/album-list-header.tsx b/src/renderer/features/albums/components/album-list-header.tsx
index 6921728e..48a09ba4 100644
--- a/src/renderer/features/albums/components/album-list-header.tsx
+++ b/src/renderer/features/albums/components/album-list-header.tsx
@@ -415,16 +415,17 @@ export const AlbumListHeader = ({
               >
                 <Group noWrap>
                   <TextTitle
-                    fw="bold"
                     maw="20vw"
-                    order={3}
+                    order={2}
                     overflow="hidden"
+                    weight={700}
                   >
                     {title || 'Albums'}
                   </TextTitle>
                   <Badge
+                    px="1rem"
                     radius="xl"
-                    size="lg"
+                    size="xl"
                   >
                     {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
                   </Badge>
@@ -510,7 +511,7 @@ export const AlbumListHeader = ({
             <DropdownMenu.Target>
               <Button
                 compact
-                fw="600"
+                fw={600}
                 variant="subtle"
               >
                 {sortByLabel}
@@ -531,7 +532,7 @@ export const AlbumListHeader = ({
           </DropdownMenu>
           <Button
             compact
-            fw="600"
+            fw={600}
             variant="subtle"
             onClick={handleToggleSortOrder}
           >
@@ -552,7 +553,7 @@ export const AlbumListHeader = ({
               <DropdownMenu.Target>
                 <Button
                   compact
-                  fw="600"
+                  fw={600}
                   variant="subtle"
                 >
                   {cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
@@ -574,7 +575,7 @@ export const AlbumListHeader = ({
           )}
           <Button
             compact
-            fw="600"
+            fw={600}
             variant="subtle"
             onClick={handleOpenFiltersModal}
           >
diff --git a/src/renderer/features/albums/routes/album-detail-route.tsx b/src/renderer/features/albums/routes/album-detail-route.tsx
index 5edb1b82..f481a4b4 100644
--- a/src/renderer/features/albums/routes/album-detail-route.tsx
+++ b/src/renderer/features/albums/routes/album-detail-route.tsx
@@ -1,5 +1,5 @@
 import { NativeScrollArea } from '/@/renderer/components';
-import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
+import { AnimatedPage, LibraryHeaderBar, PlayButton } from '/@/renderer/features/shared';
 import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
@@ -42,7 +42,7 @@ const AlbumDetailRoute = () => {
           backgroundColor: background,
           children: (
             <LibraryHeaderBar>
-              <LibraryHeaderBar.PlayButton onClick={handlePlay} />
+              <PlayButton onClick={handlePlay} />
               <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
             </LibraryHeaderBar>
           ),
diff --git a/src/renderer/features/artists/components/album-artist-detail-content.tsx b/src/renderer/features/artists/components/album-artist-detail-content.tsx
index 304dd33d..ebd7ae08 100644
--- a/src/renderer/features/artists/components/album-artist-detail-content.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-content.tsx
@@ -165,8 +165,8 @@ export const AlbumArtistDetailContent = () => {
       title: (
         <>
           <TextTitle
-            fw="bold"
             order={3}
+            weight={700}
           >
             Recent releases
           </TextTitle>
@@ -193,8 +193,8 @@ export const AlbumArtistDetailContent = () => {
       },
       title: (
         <TextTitle
-          fw="bold"
           order={3}
+          weight={700}
         >
           Appears on
         </TextTitle>
@@ -211,8 +211,8 @@ export const AlbumArtistDetailContent = () => {
       },
       title: (
         <TextTitle
-          fw="bold"
           order={3}
+          weight={700}
         >
           Related artists
         </TextTitle>
@@ -281,7 +281,7 @@ export const AlbumArtistDetailContent = () => {
   return (
     <ContentContainer ref={cq.ref}>
       <Box component="section">
-        <Group spacing="lg">
+        <Group spacing="md">
           <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
           <Group spacing="xs">
             <Button
@@ -369,8 +369,8 @@ export const AlbumArtistDetailContent = () => {
           maw="1280px"
         >
           <TextTitle
-            fw="bold"
             order={3}
+            weight={700}
           >
             About {detailQuery?.data?.name}
           </TextTitle>
@@ -393,8 +393,8 @@ export const AlbumArtistDetailContent = () => {
               align="flex-end"
             >
               <TextTitle
-                fw="bold"
                 order={3}
+                weight={700}
               >
                 Top Songs
               </TextTitle>
diff --git a/src/renderer/features/artists/components/album-artist-detail-discography-detail-list.tsx b/src/renderer/features/artists/components/album-artist-detail-discography-detail-list.tsx
new file mode 100644
index 00000000..5fa8b2b5
--- /dev/null
+++ b/src/renderer/features/artists/components/album-artist-detail-discography-detail-list.tsx
@@ -0,0 +1,198 @@
+import { useMemo, useRef } from 'react';
+import { ColDef } from '@ag-grid-community/core';
+import { Box, Group, Stack } from '@mantine/core';
+import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
+import { useParams } from 'react-router';
+import { AlbumListSort, SortOrder, SongListSort, Song } from '/@/renderer/api/types';
+import {
+  getColumnDefs,
+  VirtualTable,
+  Text,
+  TextTitle,
+  NativeScrollArea,
+} from '/@/renderer/components';
+import { useAlbumList } from '/@/renderer/features/albums';
+import { PlayButton } from '/@/renderer/features/shared';
+import { useSongList } from '/@/renderer/features/songs';
+import { useSongListStore } from '/@/renderer/store';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { Play } from '/@/renderer/types';
+
+const RowVirtualizer = ({
+  rows,
+  columnDefs,
+  handlePlay,
+  rowVirtualizer,
+}: {
+  columnDefs: ColDef[];
+  handlePlay: (play: Play, data: any[]) => void;
+  rowVirtualizer: Virtualizer<any, Element>;
+  rows: any[];
+}) => {
+  const items = rowVirtualizer.getVirtualItems();
+
+  return (
+    <div
+      style={{
+        height: `${rowVirtualizer.getTotalSize()}px`,
+        position: 'relative',
+        width: '100%',
+      }}
+    >
+      {items.map((virtualRow) => (
+        <div
+          key={rows?.[virtualRow.index].id}
+          style={{
+            height: `${(rows?.[virtualRow.index].songs?.length || 0) * 60 + 300}px`,
+            left: 0,
+            position: 'absolute',
+            top: 0,
+            transform: `translateY(${virtualRow.start}px)`,
+            width: '100%',
+          }}
+        >
+          <Stack
+            p="2rem"
+            spacing="lg"
+          >
+            <Group noWrap>
+              <img
+                alt={`${rows?.[virtualRow.index]?.name}-cover`}
+                height={150}
+                src={rows?.[virtualRow.index]?.imageUrl}
+                width={150}
+              />
+              <Stack>
+                <TextTitle
+                  order={1}
+                  weight={700}
+                >
+                  {rows?.[virtualRow.index]?.name}
+                </TextTitle>
+                <Text $secondary>{rows?.[virtualRow.index]?.releaseYear}</Text>
+                <PlayButton
+                  h="35px"
+                  w="35px"
+                  onClick={() => handlePlay?.(Play.NOW, rows?.[virtualRow.index]?.songs)}
+                />
+              </Stack>
+            </Group>
+            <Box sx={{ height: `${(rows?.[virtualRow.index].songs?.length || 0) * 60 + 60}px` }}>
+              <VirtualTable
+                autoFitColumns
+                suppressCellFocus
+                suppressHorizontalScroll
+                suppressLoadingOverlay
+                suppressRowDrag
+                transparentHeader
+                columnDefs={columnDefs}
+                getRowId={(data) => data.data.id}
+                rowData={rows?.[virtualRow.index]?.songs}
+                rowHeight={60}
+                rowModelType="clientSide"
+                rowSelection="multiple"
+              />
+            </Box>
+          </Stack>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const AlbumArtistDiscographyDetailList = () => {
+  const { albumArtistId } = useParams() as { albumArtistId: string };
+  // const albumArtistQuery = useAlbumArtistDetail({ id: albumArtistId });
+
+  const albumsQuery = useAlbumList({
+    jfParams: { artistIds: albumArtistId },
+    ndParams: { artist_id: albumArtistId },
+    sortBy: AlbumListSort.YEAR,
+    sortOrder: SortOrder.DESC,
+    startIndex: 0,
+  });
+
+  const songsQuery = useSongList(
+    {
+      albumIds: albumsQuery.data?.items?.map((album) => album.id),
+      sortBy: SongListSort.ALBUM,
+      sortOrder: SortOrder.ASC,
+      startIndex: 0,
+    },
+    {
+      enabled: !albumsQuery.isLoading,
+    },
+  );
+
+  const songsByAlbum = useMemo(() => {
+    if (songsQuery.isLoading || albumsQuery.isLoading) return null;
+
+    const songsByAlbumMap = songsQuery?.data?.items?.reduce((acc, song) => {
+      if (!acc[song.albumId as keyof typeof acc]) {
+        acc[song.albumId as keyof typeof acc] = [];
+      }
+
+      acc[song.albumId as keyof typeof acc].push(song);
+
+      return acc;
+    }, {} as Record<string, Song[]>);
+
+    const albumDetailWithSongs = albumsQuery?.data?.items?.map((album) => {
+      return {
+        ...album,
+        songs: songsByAlbumMap?.[album.id],
+      };
+    });
+
+    return albumDetailWithSongs;
+  }, [
+    albumsQuery?.data?.items,
+    albumsQuery?.isLoading,
+    songsQuery?.data?.items,
+    songsQuery?.isLoading,
+  ]);
+
+  const page = useSongListStore();
+
+  const columnDefs: ColDef[] = useMemo(
+    () =>
+      getColumnDefs(page.table.columns).filter((c) => c.colId !== 'album' && c.colId !== 'artist'),
+    [page.table.columns],
+  );
+
+  const handlePlayQueueAdd = usePlayQueueAdd();
+
+  const parentRef = useRef<any>();
+
+  const rowVirtualizer = useVirtualizer({
+    count: songsByAlbum?.length || 0,
+    estimateSize: (i) => (songsByAlbum?.[i].songs?.length || 0) * 60 + 300,
+    getScrollElement: () => parentRef.current,
+    overscan: 3,
+  });
+
+  const handlePlay = (play: Play, data: any[]) => {
+    handlePlayQueueAdd?.({
+      byData: data,
+      play,
+    });
+  };
+
+  if (albumsQuery.isLoading || songsQuery.isLoading) return null;
+
+  return (
+    <NativeScrollArea
+      ref={parentRef}
+      scrollBarOffset="0"
+    >
+      {songsByAlbum && (
+        <RowVirtualizer
+          columnDefs={columnDefs}
+          handlePlay={handlePlay}
+          rowVirtualizer={rowVirtualizer}
+          rows={songsByAlbum}
+        />
+      )}
+    </NativeScrollArea>
+  );
+};
diff --git a/src/renderer/features/artists/components/album-artist-detail-discography-header.tsx b/src/renderer/features/artists/components/album-artist-detail-discography-header.tsx
new file mode 100644
index 00000000..0304c9cf
--- /dev/null
+++ b/src/renderer/features/artists/components/album-artist-detail-discography-header.tsx
@@ -0,0 +1,473 @@
+import type { IDatasource } from '@ag-grid-community/core';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { Flex, Group, Stack } from '@mantine/core';
+import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
+import {
+  RiArrowDownSLine,
+  RiFilter3Line,
+  RiFolder2Line,
+  RiMoreFill,
+  RiSortAsc,
+  RiSortDesc,
+} from 'react-icons/ri';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import {
+  LibraryItem,
+  ServerType,
+  SongListQuery,
+  SongListSort,
+  SortOrder,
+} from '/@/renderer/api/types';
+import {
+  Button,
+  DropdownMenu,
+  PageHeader,
+  Slider,
+  TextTitle,
+  Switch,
+  MultiSelect,
+  Text,
+  SONG_TABLE_COLUMNS,
+  Badge,
+  SpinnerIcon,
+} from '/@/renderer/components';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { useMusicFolders } from '/@/renderer/features/shared';
+import { JellyfinSongFilters } from '/@/renderer/features/songs/components/jellyfin-song-filters';
+import { NavidromeSongFilters } from '/@/renderer/features/songs/components/navidrome-song-filters';
+import { useContainerQuery } from '/@/renderer/hooks';
+import { queryClient } from '/@/renderer/lib/react-query';
+import {
+  SongListFilter,
+  useCurrentServer,
+  useSetSongFilters,
+  useSetSongStore,
+  useSetSongTable,
+  useSetSongTablePagination,
+  useSongListStore,
+} from '/@/renderer/store';
+import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
+
+const FILTERS = {
+  jellyfin: [
+    { defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
+    { defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
+    { defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
+    { defaultOrder: SortOrder.ASC, name: 'Duration', value: SongListSort.DURATION },
+    { defaultOrder: SortOrder.ASC, name: 'Most Played', value: SongListSort.PLAY_COUNT },
+    { defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
+    { defaultOrder: SortOrder.ASC, name: 'Random', value: SongListSort.RANDOM },
+    { defaultOrder: SortOrder.ASC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
+    { defaultOrder: SortOrder.ASC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
+    { defaultOrder: SortOrder.ASC, name: 'Release Date', value: SongListSort.RELEASE_DATE },
+  ],
+  navidrome: [
+    { defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
+    { defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
+    { defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
+    { defaultOrder: SortOrder.DESC, name: 'BPM', value: SongListSort.BPM },
+    { defaultOrder: SortOrder.ASC, name: 'Channels', value: SongListSort.CHANNELS },
+    { defaultOrder: SortOrder.ASC, name: 'Comment', value: SongListSort.COMMENT },
+    { defaultOrder: SortOrder.DESC, name: 'Duration', value: SongListSort.DURATION },
+    { defaultOrder: SortOrder.DESC, name: 'Favorited', value: SongListSort.FAVORITED },
+    { defaultOrder: SortOrder.ASC, name: 'Genre', value: SongListSort.GENRE },
+    { defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
+    { defaultOrder: SortOrder.DESC, name: 'Play Count', value: SongListSort.PLAY_COUNT },
+    { defaultOrder: SortOrder.DESC, name: 'Rating', value: SongListSort.RATING },
+    { defaultOrder: SortOrder.DESC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
+    { defaultOrder: SortOrder.DESC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
+    { defaultOrder: SortOrder.DESC, name: 'Year', value: SongListSort.YEAR },
+  ],
+};
+
+const ORDER = [
+  { name: 'Ascending', value: SortOrder.ASC },
+  { name: 'Descending', value: SortOrder.DESC },
+];
+
+interface SongListHeaderProps {
+  itemCount?: number;
+  tableRef: MutableRefObject<AgGridReactType | null>;
+}
+
+export const AlbumArtistDiscographyHeader = ({ itemCount, tableRef }: SongListHeaderProps) => {
+  const server = useCurrentServer();
+  const page = useSongListStore();
+  const setPage = useSetSongStore();
+  const setFilter = useSetSongFilters();
+  const setTable = useSetSongTable();
+  const setPagination = useSetSongTablePagination();
+  const handlePlayQueueAdd = usePlayQueueAdd();
+  const cq = useContainerQuery();
+
+  const musicFoldersQuery = useMusicFolders();
+
+  const sortByLabel =
+    (server?.type &&
+      (FILTERS[server.type as keyof typeof FILTERS] as { name: string; value: string }[]).find(
+        (f) => f.value === page.filter.sortBy,
+      )?.name) ||
+    'Unknown';
+
+  const sortOrderLabel = ORDER.find((s) => s.value === page.filter.sortOrder)?.name;
+
+  const handleFilterChange = useCallback(
+    async (filters?: SongListFilter) => {
+      const dataSource: IDatasource = {
+        getRows: async (params) => {
+          const limit = params.endRow - params.startRow;
+          const startIndex = params.startRow;
+
+          const pageFilters = filters || page.filter;
+
+          const queryKey = queryKeys.songs.list(server?.id || '', {
+            limit,
+            startIndex,
+            ...pageFilters,
+          });
+
+          const songsRes = await queryClient.fetchQuery(
+            queryKey,
+            async ({ signal }) =>
+              api.controller.getSongList({
+                query: {
+                  limit,
+                  startIndex,
+                  ...pageFilters,
+                },
+                server,
+                signal,
+              }),
+            { cacheTime: 1000 * 60 * 1 },
+          );
+
+          const songs = api.normalize.songList(songsRes, server);
+          params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
+        },
+        rowCount: undefined,
+      };
+      tableRef.current?.api.setDatasource(dataSource);
+      tableRef.current?.api.purgeInfiniteCache();
+      tableRef.current?.api.ensureIndexVisible(0, 'top');
+      setPagination({ currentPage: 0 });
+    },
+    [page.filter, server, setPagination, tableRef],
+  );
+
+  const handleSetSortBy = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.currentTarget?.value || !server?.type) return;
+
+      const sortOrder = FILTERS[server.type as keyof typeof FILTERS].find(
+        (f) => f.value === e.currentTarget.value,
+      )?.defaultOrder;
+
+      const updatedFilters = setFilter({
+        sortBy: e.currentTarget.value as SongListSort,
+        sortOrder: sortOrder || SortOrder.ASC,
+      });
+
+      handleFilterChange(updatedFilters);
+    },
+    [handleFilterChange, server?.type, setFilter],
+  );
+
+  const handleSetMusicFolder = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.currentTarget?.value) return;
+
+      let updatedFilters = null;
+      if (e.currentTarget.value === String(page.filter.musicFolderId)) {
+        updatedFilters = setFilter({ musicFolderId: undefined });
+      } else {
+        updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
+      }
+
+      handleFilterChange(updatedFilters);
+    },
+    [handleFilterChange, page.filter.musicFolderId, setFilter],
+  );
+
+  const handleToggleSortOrder = useCallback(() => {
+    const newSortOrder = page.filter.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
+    const updatedFilters = setFilter({ sortOrder: newSortOrder });
+    handleFilterChange(updatedFilters);
+  }, [page.filter.sortOrder, handleFilterChange, setFilter]);
+
+  const handleSetViewType = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.currentTarget?.value) return;
+      const display = e.currentTarget.value as ListDisplayType;
+      setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } });
+
+      if (display === ListDisplayType.TABLE) {
+        tableRef.current?.api.paginationSetPageSize(tableRef.current.props.infiniteInitialRowCount);
+        setPagination({ currentPage: 0 });
+      } else if (display === ListDisplayType.TABLE_PAGINATED) {
+        setPagination({ currentPage: 0 });
+      }
+    },
+    [page, setPage, setPagination, tableRef],
+  );
+
+  // const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
+  //   const previousSearchTerm = page.filter.searchTerm;
+  //   const searchTerm = e.target.value === '' ? undefined : e.target.value;
+  //   const updatedFilters = setFilter({ searchTerm });
+  //   if (previousSearchTerm !== searchTerm) handleFilterChange(updatedFilters);
+  // }, 500);
+
+  const handleTableColumns = (values: TableColumn[]) => {
+    const existingColumns = page.table.columns;
+
+    if (values.length === 0) {
+      return setTable({
+        columns: [],
+      });
+    }
+
+    // If adding a column
+    if (values.length > existingColumns.length) {
+      const newColumn = { column: values[values.length - 1], width: 100 };
+
+      return setTable({ columns: [...existingColumns, newColumn] });
+    }
+
+    // If removing a column
+    const removed = existingColumns.filter((column) => !values.includes(column.column));
+    const newColumns = existingColumns.filter((column) => !removed.includes(column));
+
+    return setTable({ columns: newColumns });
+  };
+
+  const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
+    setTable({ autoFit: e.currentTarget.checked });
+
+    if (e.currentTarget.checked) {
+      tableRef.current?.api.sizeColumnsToFit();
+    }
+  };
+
+  const handleRowHeight = (e: number) => {
+    setTable({ rowHeight: e });
+  };
+
+  const handleRefresh = () => {
+    queryClient.invalidateQueries(queryKeys.songs.list(server?.id || ''));
+    handleFilterChange(page.filter);
+  };
+
+  const handlePlay = async (play: Play) => {
+    if (!itemCount || itemCount === 0) return;
+    const query: SongListQuery = { startIndex: 0, ...page.filter };
+
+    handlePlayQueueAdd?.({
+      byItemType: {
+        id: query,
+        type: LibraryItem.SONG,
+      },
+      play,
+    });
+  };
+
+  return (
+    <PageHeader p="1rem">
+      <Flex
+        ref={cq.ref}
+        direction="row"
+        justify="space-between"
+      >
+        <Flex
+          align="center"
+          gap="md"
+          justify="center"
+        >
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                rightIcon={<RiArrowDownSLine size={15} />}
+                size="xl"
+                sx={{ paddingLeft: 0, paddingRight: 0 }}
+                variant="subtle"
+              >
+                <Group noWrap>
+                  <TextTitle
+                    order={3}
+                    weight={700}
+                  >
+                    Tracks
+                  </TextTitle>
+                  <Badge
+                    radius="xl"
+                    size="lg"
+                  >
+                    {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
+                  </Badge>
+                </Group>
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              <DropdownMenu.Label>Display type</DropdownMenu.Label>
+              <DropdownMenu.Item
+                $isActive={page.display === ListDisplayType.TABLE}
+                value={ListDisplayType.TABLE}
+                onClick={handleSetViewType}
+              >
+                Table
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                $isActive={page.display === ListDisplayType.TABLE_PAGINATED}
+                value={ListDisplayType.TABLE_PAGINATED}
+                onClick={handleSetViewType}
+              >
+                Table (paginated)
+              </DropdownMenu.Item>
+              <DropdownMenu.Divider />
+              <DropdownMenu.Label>Item Size</DropdownMenu.Label>
+              <DropdownMenu.Item closeMenuOnClick={false}>
+                <Slider
+                  defaultValue={page.table.rowHeight || 0}
+                  label={null}
+                  max={100}
+                  min={25}
+                  onChangeEnd={handleRowHeight}
+                />
+              </DropdownMenu.Item>
+              <DropdownMenu.Label>Table Columns</DropdownMenu.Label>
+              <DropdownMenu.Item
+                closeMenuOnClick={false}
+                component="div"
+                sx={{ cursor: 'default' }}
+              >
+                <Stack>
+                  <MultiSelect
+                    clearable
+                    data={SONG_TABLE_COLUMNS}
+                    defaultValue={page.table?.columns.map((column) => column.column)}
+                    width={300}
+                    onChange={handleTableColumns}
+                  />
+                  <Group position="apart">
+                    <Text>Auto Fit Columns</Text>
+                    <Switch
+                      defaultChecked={page.table.autoFit}
+                      onChange={handleAutoFitColumns}
+                    />
+                  </Group>
+                </Stack>
+              </DropdownMenu.Item>
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                fw={600}
+                variant="subtle"
+              >
+                {sortByLabel}
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              {FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
+                <DropdownMenu.Item
+                  key={`filter-${filter.name}`}
+                  $isActive={filter.value === page.filter.sortBy}
+                  value={filter.value}
+                  onClick={handleSetSortBy}
+                >
+                  {filter.name}
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+          <Button
+            compact
+            fw={600}
+            variant="subtle"
+            onClick={handleToggleSortOrder}
+          >
+            {cq.isMd ? (
+              sortOrderLabel
+            ) : (
+              <>
+                {page.filter.sortOrder === SortOrder.ASC ? (
+                  <RiSortAsc size={15} />
+                ) : (
+                  <RiSortDesc size={15} />
+                )}
+              </>
+            )}
+          </Button>
+          {server?.type === ServerType.JELLYFIN && (
+            <DropdownMenu position="bottom-start">
+              <DropdownMenu.Target>
+                <Button
+                  compact
+                  fw={600}
+                  variant="subtle"
+                >
+                  {cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
+                </Button>
+              </DropdownMenu.Target>
+              <DropdownMenu.Dropdown>
+                {musicFoldersQuery.data?.map((folder) => (
+                  <DropdownMenu.Item
+                    key={`musicFolder-${folder.id}`}
+                    $isActive={page.filter.musicFolderId === folder.id}
+                    value={folder.id}
+                    onClick={handleSetMusicFolder}
+                  >
+                    {folder.name}
+                  </DropdownMenu.Item>
+                ))}
+              </DropdownMenu.Dropdown>
+            </DropdownMenu>
+          )}
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                fw="600"
+                variant="subtle"
+              >
+                {cq.isMd ? 'Filters' : <RiFilter3Line size={15} />}
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              {server?.type === ServerType.NAVIDROME ? (
+                <NavidromeSongFilters handleFilterChange={handleFilterChange} />
+              ) : (
+                <JellyfinSongFilters handleFilterChange={handleFilterChange} />
+              )}
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                fw="600"
+                variant="subtle"
+              >
+                <RiMoreFill size={15} />
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              <DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
+              <DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
+                Add to queue
+              </DropdownMenu.Item>
+              <DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
+                Add to queue next
+              </DropdownMenu.Item>
+              <DropdownMenu.Divider />
+              <DropdownMenu.Item onClick={handleRefresh}>Refresh</DropdownMenu.Item>
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+        </Flex>
+      </Flex>
+    </PageHeader>
+  );
+};
diff --git a/src/renderer/features/artists/components/album-artist-detail-discography-list.tsx b/src/renderer/features/artists/components/album-artist-detail-discography-list.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/renderer/features/artists/components/album-artist-detail-header.tsx b/src/renderer/features/artists/components/album-artist-detail-header.tsx
index 3415ef02..ff189d53 100644
--- a/src/renderer/features/artists/components/album-artist-detail-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-header.tsx
@@ -46,7 +46,7 @@ export const AlbumArtistDetailHeader = forwardRef(
           item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }}
           title={detailQuery?.data?.name || ''}
         >
-          <Stack mt="1rem">
+          <Stack>
             <Group>
               {metadataItems
                 .filter((i) => i.value)
diff --git a/src/renderer/features/artists/components/album-artist-detail-song-list-content.tsx b/src/renderer/features/artists/components/album-artist-detail-song-list-content.tsx
index 46c1378e..2a294ccc 100644
--- a/src/renderer/features/artists/components/album-artist-detail-song-list-content.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-song-list-content.tsx
@@ -1,6 +1,5 @@
 import { MutableRefObject, useCallback, useMemo } from 'react';
 import type {
-  BodyScrollEvent,
   ColDef,
   GridReadyEvent,
   IDatasource,
@@ -8,6 +7,7 @@ import type {
   RowDoubleClickedEvent,
 } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { useSetState } from '@mantine/hooks';
 import { useQueryClient } from '@tanstack/react-query';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
@@ -21,11 +21,9 @@ import {
   SongListFilter,
   useCurrentServer,
   useSetSongTable,
-  useSetSongTablePagination,
   useSongListStore,
-  useSongTablePagination,
 } from '/@/renderer/store';
-import { ListDisplayType } from '/@/renderer/types';
+import { ListDisplayType, TablePagination as TablePaginationType } from '/@/renderer/types';
 import { AnimatePresence } from 'framer-motion';
 import debounce from 'lodash/debounce';
 import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
@@ -49,8 +47,13 @@ export const AlbumArtistDetailSongListContent = ({
   const server = useCurrentServer();
   const page = useSongListStore();
 
-  const pagination = useSongTablePagination();
-  const setPagination = useSetSongTablePagination();
+  const [pagination, setPagination] = useSetState<TablePaginationType>({
+    currentPage: 0,
+    itemsPerPage: 100,
+    totalItems: itemCount || 0,
+    totalPages: 0,
+  });
+
   const setTable = useSetSongTable();
   const handlePlayQueueAdd = usePlayQueueAdd();
   const playButtonBehavior = usePlayButtonBehavior();
@@ -62,14 +65,6 @@ export const AlbumArtistDetailSongListContent = ({
     [page.table.columns],
   );
 
-  const defaultColumnDefs: ColDef = useMemo(() => {
-    return {
-      lockPinned: true,
-      lockVisible: true,
-      resizable: true,
-    };
-  }, []);
-
   const onGridReady = useCallback(
     (params: GridReadyEvent) => {
       const dataSource: IDatasource = {
@@ -79,10 +74,7 @@ export const AlbumArtistDetailSongListContent = ({
 
           const queryKey = queryKeys.songs.list(server?.id || '', {
             ...filter,
-            // artistIds: [albumArtistId],
             limit,
-            // sortBy: SongListSort.ALBUM,
-            // sortOrder: SortOrder.ASC,
             startIndex,
           });
 
@@ -91,11 +83,8 @@ export const AlbumArtistDetailSongListContent = ({
             async ({ signal }) =>
               api.controller.getSongList({
                 query: {
-                  // artistIds: [albumArtistId],
                   ...filter,
                   limit,
-                  // sortBy: SongListSort.ALBUM,
-                  // sortOrder: SortOrder.ASC,
                   startIndex,
                 },
                 server,
@@ -110,9 +99,8 @@ export const AlbumArtistDetailSongListContent = ({
         rowCount: undefined,
       };
       params.api.setDatasource(dataSource);
-      params.api.ensureIndexVisible(page.table.scrollOffset, 'top');
     },
-    [filter, page.table.scrollOffset, queryClient, server],
+    [filter, queryClient, server],
   );
 
   const onPaginationChanged = useCallback(
@@ -132,12 +120,6 @@ export const AlbumArtistDetailSongListContent = ({
     [isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
   );
 
-  const handleGridSizeChange = () => {
-    if (page.table.autoFit) {
-      tableRef?.current?.api.sizeColumnsToFit();
-    }
-  };
-
   const handleColumnChange = useCallback(() => {
     const { columnApi } = tableRef?.current || {};
     const columnsOrder = columnApi?.getAllGridColumns();
@@ -164,11 +146,6 @@ export const AlbumArtistDetailSongListContent = ({
 
   const debouncedColumnChange = debounce(handleColumnChange, 200);
 
-  const handleScroll = (e: BodyScrollEvent) => {
-    const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
-    setTable({ scrollOffset });
-  };
-
   const handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS);
 
   const handleRowDoubleClick = (e: RowDoubleClickedEvent<QueueSong>) => {
@@ -189,18 +166,17 @@ export const AlbumArtistDetailSongListContent = ({
           ref={tableRef}
           alwaysShowHorizontalScroll
           animateRows
-          autoFitColumns
           maintainColumnOrder
           suppressCopyRowsToClipboard
           suppressMoveWhenRowDragging
           suppressPaginationPanel
           suppressRowDrag
           suppressScrollOnNewData
+          autoFitColumns={page.table.autoFit}
           blockLoadDebounceMillis={200}
           cacheBlockSize={500}
           cacheOverflowSize={1}
           columnDefs={columnDefs}
-          defaultColDef={defaultColumnDefs}
           enableCellChangeFlash={false}
           getRowId={(data) => data.data.id}
           infiniteInitialRowCount={itemCount || 100}
@@ -211,12 +187,10 @@ export const AlbumArtistDetailSongListContent = ({
           rowHeight={page.table.rowHeight || 40}
           rowModelType="infinite"
           rowSelection="multiple"
-          onBodyScrollEnd={handleScroll}
           onCellContextMenu={handleContextMenu}
           onColumnMoved={handleColumnChange}
           onColumnResized={debouncedColumnChange}
           onGridReady={onGridReady}
-          onGridSizeChanged={handleGridSizeChange}
           onPaginationChanged={onPaginationChanged}
           onRowDoubleClicked={handleRowDoubleClick}
         />
diff --git a/src/renderer/features/artists/components/album-artist-detail-song-list-header.tsx b/src/renderer/features/artists/components/album-artist-detail-song-list-header.tsx
index f1e0a38d..e6406bbc 100644
--- a/src/renderer/features/artists/components/album-artist-detail-song-list-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-song-list-header.tsx
@@ -96,7 +96,6 @@ export const AlbumArtistDetailSongListHeader = ({
   const server = useCurrentServer();
   const page = useSongListStore();
   const setPage = useSetSongStore();
-  // const setFilter = useSetSongFilters();
   const setTable = useSetSongTable();
   const setPagination = useSetSongTablePagination();
   const handlePlayQueueAdd = usePlayQueueAdd();
@@ -300,10 +299,10 @@ export const AlbumArtistDetailSongListHeader = ({
               >
                 <Group noWrap>
                   <TextTitle
-                    fw="bold"
                     maw="20vw"
                     order={3}
                     overflow="hidden"
+                    weight={700}
                   >
                     {title}
                   </TextTitle>
@@ -402,7 +401,7 @@ export const AlbumArtistDetailSongListHeader = ({
               sortOrderLabel
             ) : (
               <>
-                {page.filter.sortOrder === SortOrder.ASC ? (
+                {filter.sortOrder === SortOrder.ASC ? (
                   <RiSortAsc size={15} />
                 ) : (
                   <RiSortDesc size={15} />
diff --git a/src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx b/src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx
index 2e16c107..449bf4cc 100644
--- a/src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx
@@ -54,10 +54,10 @@ export const AlbumArtistDetailTopSongsListHeader = ({
           >
             <Group noWrap>
               <TextTitle
-                fw="bold"
                 maw="20vw"
                 order={3}
                 overflow="hidden"
+                weight={700}
               >
                 {title}
               </TextTitle>
diff --git a/src/renderer/features/artists/components/album-artist-list-header.tsx b/src/renderer/features/artists/components/album-artist-list-header.tsx
index f65bd022..063a07a1 100644
--- a/src/renderer/features/artists/components/album-artist-list-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-list-header.tsx
@@ -12,12 +12,14 @@ import { queryKeys } from '/@/renderer/api/query-keys';
 import { AlbumArtistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
 import {
   ALBUMARTIST_TABLE_COLUMNS,
+  Badge,
   Button,
   DropdownMenu,
   MultiSelect,
   PageHeader,
   SearchInput,
   Slider,
+  SpinnerIcon,
   Switch,
   Text,
   TextTitle,
@@ -72,10 +74,15 @@ const HeaderItems = styled.div`
 
 interface AlbumArtistListHeaderProps {
   gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+  itemCount?: number;
   tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const AlbumArtistListHeader = ({ gridRef, tableRef }: AlbumArtistListHeaderProps) => {
+export const AlbumArtistListHeader = ({
+  itemCount,
+  gridRef,
+  tableRef,
+}: AlbumArtistListHeaderProps) => {
   const queryClient = useQueryClient();
   const server = useCurrentServer();
   const setPage = useSetAlbumArtistStore();
@@ -308,12 +315,21 @@ export const AlbumArtistListHeader = ({ gridRef, tableRef }: AlbumArtistListHead
                 size="xl"
                 variant="subtle"
               >
-                <TextTitle
-                  fw="bold"
-                  order={3}
-                >
-                  Album Artists
-                </TextTitle>
+                <Group noWrap>
+                  <TextTitle
+                    order={3}
+                    weight={700}
+                  >
+                    Album Artists
+                  </TextTitle>
+                  <Badge
+                    px="1rem"
+                    radius="xl"
+                    size="xl"
+                  >
+                    {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
+                  </Badge>
+                </Group>
               </Button>
             </DropdownMenu.Target>
             <DropdownMenu.Dropdown>
diff --git a/src/renderer/features/artists/routes/album-artist-detail-discography-route.tsx b/src/renderer/features/artists/routes/album-artist-detail-discography-route.tsx
new file mode 100644
index 00000000..96d5c45c
--- /dev/null
+++ b/src/renderer/features/artists/routes/album-artist-detail-discography-route.tsx
@@ -0,0 +1,83 @@
+import { useParams } from 'react-router';
+import { AlbumListSort, SortOrder, SongListSort } from '/@/renderer/api/types';
+import { VirtualGridContainer } from '/@/renderer/components';
+import { useAlbumList } from '/@/renderer/features/albums';
+import { AnimatedPage } from '/@/renderer/features/shared';
+import { useSongList } from '/@/renderer/features/songs';
+// import { useSongListStore } from '/@/renderer/store';
+// import { usePlayQueueAdd } from '/@/renderer/features/player';
+// import { Play } from '/@/renderer/types';
+// import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
+
+const AlbumArtistDetailDiscographyRoute = () => {
+  const { albumArtistId } = useParams() as { albumArtistId: string };
+  // const albumArtistQuery = useAlbumArtistDetail({ id: albumArtistId });
+
+  const albumsQuery = useAlbumList({
+    jfParams: { artistIds: albumArtistId },
+    ndParams: { artist_id: albumArtistId },
+    sortBy: AlbumListSort.YEAR,
+    sortOrder: SortOrder.DESC,
+    startIndex: 0,
+  });
+
+  const songsQuery = useSongList(
+    {
+      albumIds: albumsQuery.data?.items?.map((album) => album.id),
+      sortBy: SongListSort.ALBUM,
+      sortOrder: SortOrder.ASC,
+      startIndex: 0,
+    },
+    {
+      enabled: !albumsQuery.isLoading,
+    },
+  );
+
+  // const page = useSongListStore();
+
+  // const handlePlayQueueAdd = usePlayQueueAdd();
+
+  if (albumsQuery.isLoading || songsQuery.isLoading) return null;
+
+  // const handlePlay = (play: Play, data: any[]) => {
+  //   handlePlayQueueAdd?.({
+  //     byData: data,
+  //     play,
+  //   });
+  // };
+
+  return (
+    <AnimatedPage>
+      <VirtualGridContainer>
+        {/* <AlbumArtistDiscographyHeader />
+        <PageHeader>
+          <Group
+            position="apart"
+            w="100%"
+          >
+            {albumArtistQuery?.data?.name || ''}
+            <Group spacing="xs">
+              <Button
+                compact
+                radius="xl"
+                variant="subtle"
+              >
+                <RiListUnordered size="1.5em" />
+              </Button>
+              <Button
+                compact
+                radius="xl"
+                variant="subtle"
+              >
+                <RiLayoutGridFill size="1.5em" />
+              </Button>
+            </Group>
+          </Group>
+        </PageHeader> *
+        <AlbumArtistDiscographyDetailList /> */}
+      </VirtualGridContainer>
+    </AnimatedPage>
+  );
+};
+
+export default AlbumArtistDetailDiscographyRoute;
diff --git a/src/renderer/features/artists/routes/album-artist-list-route.tsx b/src/renderer/features/artists/routes/album-artist-list-route.tsx
index 74d49b48..9f8ef1f9 100644
--- a/src/renderer/features/artists/routes/album-artist-list-route.tsx
+++ b/src/renderer/features/artists/routes/album-artist-list-route.tsx
@@ -4,16 +4,38 @@ import { AnimatedPage } from '/@/renderer/features/shared';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { useRef } from 'react';
 import { AlbumArtistListContent } from '/@/renderer/features/artists/components/album-artist-list-content';
+import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
+import { useAlbumArtistListStore } from '/@/renderer/store';
 
 const AlbumArtistListRoute = () => {
   const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
   const tableRef = useRef<AgGridReactType | null>(null);
+  const page = useAlbumArtistListStore();
+  const filters = page.filter;
+
+  const itemCountCheck = useAlbumArtistList(
+    {
+      limit: 1,
+      startIndex: 0,
+      ...filters,
+    },
+    {
+      cacheTime: 1000 * 60 * 60 * 2,
+      staleTime: 1000 * 60 * 60 * 2,
+    },
+  );
+
+  const itemCount =
+    itemCountCheck.data?.totalRecordCount === null
+      ? undefined
+      : itemCountCheck.data?.totalRecordCount;
 
   return (
     <AnimatedPage>
       <VirtualGridContainer>
         <AlbumArtistListHeader
           gridRef={gridRef}
+          itemCount={itemCount}
           tableRef={tableRef}
         />
         <AlbumArtistListContent
diff --git a/src/renderer/features/home/routes/home-route.tsx b/src/renderer/features/home/routes/home-route.tsx
index 8afa632e..04d3478e 100644
--- a/src/renderer/features/home/routes/home-route.tsx
+++ b/src/renderer/features/home/routes/home-route.tsx
@@ -123,8 +123,8 @@ const HomeRoute = () => {
       },
       title: (
         <TextTitle
-          fw="bold"
           order={3}
+          weight={700}
         >
           Explore from your library
         </TextTitle>
@@ -142,8 +142,8 @@ const HomeRoute = () => {
       },
       title: (
         <TextTitle
-          fw="bold"
           order={3}
+          weight={700}
         >
           Recently played
         </TextTitle>
@@ -161,8 +161,8 @@ const HomeRoute = () => {
       },
       title: (
         <TextTitle
-          fw="bold"
           order={3}
+          weight={700}
         >
           Newly added releases
         </TextTitle>
@@ -180,8 +180,8 @@ const HomeRoute = () => {
       },
       title: (
         <TextTitle
-          fw="bold"
           order={3}
+          weight={700}
         >
           Most played
         </TextTitle>
diff --git a/src/renderer/features/now-playing/components/now-playing-header.tsx b/src/renderer/features/now-playing/components/now-playing-header.tsx
index 1806a14c..fb6e375e 100644
--- a/src/renderer/features/now-playing/components/now-playing-header.tsx
+++ b/src/renderer/features/now-playing/components/now-playing-header.tsx
@@ -9,8 +9,8 @@ export const NowPlayingHeader = () => {
     <PageHeader>
       <Group p="1rem">
         <TextTitle
-          fw="bold"
           order={3}
+          weight={700}
         >
           Queue
         </TextTitle>
diff --git a/src/renderer/features/now-playing/components/sidebar-play-queue.tsx b/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
index 395b92c6..a9d97bc1 100644
--- a/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
+++ b/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
@@ -23,7 +23,7 @@ export const SidebarPlayQueue = () => {
     <>
       <Flex
         bg="var(--titlebar-bg)"
-        h="60px"
+        h="65px"
         sx={{ position: 'relative' }}
         w="100%"
       >
@@ -40,7 +40,7 @@ export const SidebarPlayQueue = () => {
       </Flex>
       <Flex
         direction="column"
-        h="calc(100% - 60px)"
+        h="calc(100% - 65px)"
         sx={{ borderLeft: '2px solid var(--generic-border-color)' }}
         w="100%"
       >
diff --git a/src/renderer/features/playlists/components/playlist-detail-header.tsx b/src/renderer/features/playlists/components/playlist-detail-header.tsx
index 4d8b573c..31f43f36 100644
--- a/src/renderer/features/playlists/components/playlist-detail-header.tsx
+++ b/src/renderer/features/playlists/components/playlist-detail-header.tsx
@@ -45,7 +45,7 @@ export const PlaylistDetailHeader = forwardRef(
           item={{ route: AppRoute.PLAYLISTS, type: LibraryItem.PLAYLIST }}
           title={detailQuery?.data?.name || ''}
         >
-          <Stack mt="1rem">
+          <Stack>
             <Group>
               {metadataItems.map((item, index) => (
                 <Fragment key={`item-${item.id}-${index}`}>
diff --git a/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx b/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
index 994acf45..6e501470 100644
--- a/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
+++ b/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
@@ -262,8 +262,8 @@ export const PlaylistDetailSongListHeader = ({
                 variant="subtle"
               >
                 <TextTitle
-                  fw="bold"
                   order={3}
+                  weight={700}
                 >
                   {detailQuery?.data?.name}
                 </TextTitle>
diff --git a/src/renderer/features/servers/components/server-list-item.tsx b/src/renderer/features/servers/components/server-list-item.tsx
index a53c82ee..15daa1a6 100644
--- a/src/renderer/features/servers/components/server-list-item.tsx
+++ b/src/renderer/features/servers/components/server-list-item.tsx
@@ -20,16 +20,11 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
   };
 
   return (
-    <Stack
-      mt="1rem"
-      p="1rem"
-      spacing="xl"
-    >
+    <Stack>
       <ServerSection
         title={
           <Group position="apart">
             <Text>Server details</Text>
-            <Group spacing="md" />
           </Group>
         }
       >
@@ -39,30 +34,31 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
             onCancel={() => editHandlers.toggle()}
           />
         ) : (
-          <Group position="apart">
-            <Group>
+          <Stack>
+            <Group noWrap>
               <Stack>
                 <Text>URL</Text>
                 <Text>Username</Text>
               </Stack>
               <Stack>
-                <Text size="sm">{server.url}</Text>
-                <Text size="sm">{server.username}</Text>
+                <Text>{server.url}</Text>
+                <Text>{server.username}</Text>
               </Stack>
             </Group>
-            <Group>
+            <Group grow>
               <Button
+                leftIcon={<RiEdit2Fill />}
                 tooltip={{ label: 'Edit server details' }}
                 variant="subtle"
                 onClick={() => editHandlers.toggle()}
               >
-                <RiEdit2Fill />
+                Edit
               </Button>
             </Group>
-          </Group>
+          </Stack>
         )}
       </ServerSection>
-      <Divider my="xl" />
+      <Divider my="sm" />
       <TimeoutButton
         leftIcon={<RiDeleteBin2Line />}
         timeoutProps={{ callback: handleDeleteServer, duration: 1500 }}
diff --git a/src/renderer/features/servers/components/server-list.tsx b/src/renderer/features/servers/components/server-list.tsx
index 897718c9..56c641d4 100644
--- a/src/renderer/features/servers/components/server-list.tsx
+++ b/src/renderer/features/servers/components/server-list.tsx
@@ -30,7 +30,7 @@ export const ServerList = () => {
         sx={{
           position: 'absolute',
           right: 55,
-          transform: 'translateY(-4.5rem)',
+          transform: 'translateY(-2.5rem)',
         }}
       >
         <Button
diff --git a/src/renderer/features/settings/components/general-tab.tsx b/src/renderer/features/settings/components/general-tab.tsx
index ceead05c..9956665e 100644
--- a/src/renderer/features/settings/components/general-tab.tsx
+++ b/src/renderer/features/settings/components/general-tab.tsx
@@ -196,7 +196,7 @@ export const GeneralTab = () => {
   ];
 
   return (
-    <Stack spacing="xl">
+    <Stack spacing="md">
       {options
         .filter((o) => !o.isHidden)
         .map((option) => (
diff --git a/src/renderer/features/settings/components/playback-tab.tsx b/src/renderer/features/settings/components/playback-tab.tsx
index 01a54e15..48970d93 100644
--- a/src/renderer/features/settings/components/playback-tab.tsx
+++ b/src/renderer/features/settings/components/playback-tab.tsx
@@ -360,7 +360,7 @@ export const PlaybackTab = () => {
   ];
 
   return (
-    <Stack spacing="xl">
+    <Stack spacing="md">
       {playerOptions
         .filter((o) => !o.isHidden)
         .map((option) => (
diff --git a/src/renderer/features/shared/components/library-header-bar.tsx b/src/renderer/features/shared/components/library-header-bar.tsx
index 9f0b0304..a085f1f7 100644
--- a/src/renderer/features/shared/components/library-header-bar.tsx
+++ b/src/renderer/features/shared/components/library-header-bar.tsx
@@ -14,7 +14,7 @@ export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
       align="center"
       h="100%"
       px="1rem"
-      spacing="xl"
+      spacing="md"
     >
       {children}
     </Group>
@@ -28,9 +28,9 @@ interface TitleProps {
 const Title = ({ children }: TitleProps) => {
   return (
     <TextTitle
-      fw="bold"
       order={2}
       overflow="hidden"
+      weight={700}
     >
       {children}
     </TextTitle>
@@ -39,14 +39,13 @@ const Title = ({ children }: TitleProps) => {
 
 interface PlayButtonProps {
   onClick: () => void;
-  size?: number;
 }
 
-const PlayButton = ({ size, onClick }: PlayButtonProps) => {
+const PlayButton = ({ onClick }: PlayButtonProps) => {
   return (
     <PlayBtn
-      h={size || 45}
-      w={size || 45}
+      h="50px"
+      w="50px"
       onClick={onClick}
     />
   );
diff --git a/src/renderer/features/shared/components/library-header.tsx b/src/renderer/features/shared/components/library-header.tsx
index 5f9f4828..9ef4d879 100644
--- a/src/renderer/features/shared/components/library-header.tsx
+++ b/src/renderer/features/shared/components/library-header.tsx
@@ -134,20 +134,19 @@ export const LibraryHeader = forwardRef(
             <Text
               $link
               component={Link}
-              fw="600"
-              sx={{ textTransform: 'uppercase' }}
               to={item.route}
+              tt="uppercase"
+              weight={600}
             >
               {item.type}
             </Text>
           </Group>
           <TextTitle
-            fw="900"
-            lh="1.12"
+            lh="5rem"
             lineClamp={2}
             overflow="hidden"
-            pb=".06em"
             sx={{ fontSize: titleSize, overflow: 'hidden' }}
+            weight={900}
           >
             {title}
           </TextTitle>
diff --git a/src/renderer/features/shared/components/play-button.tsx b/src/renderer/features/shared/components/play-button.tsx
index 595a0091..f62abe4f 100644
--- a/src/renderer/features/shared/components/play-button.tsx
+++ b/src/renderer/features/shared/components/play-button.tsx
@@ -17,9 +17,9 @@ const MotionButton = styled(motion(_Button))`
 export const PlayButton = ({ ...props }: Omit<ButtonProps, 'children'>) => {
   return (
     <MotionButton
-      h={50}
+      h="50px"
       variant="filled"
-      w={50}
+      w="50px"
       whileHover={{ scale: 1.1 }}
       whileTap={{ scale: 0.95 }}
       {...props}
diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx
index 240ec979..bbb23b1a 100644
--- a/src/renderer/features/sidebar/components/sidebar.tsx
+++ b/src/renderer/features/sidebar/components/sidebar.tsx
@@ -1,7 +1,6 @@
 import { MouseEvent } from 'react';
 import { Stack, Grid, Accordion, Center, Group } from '@mantine/core';
 import { closeAllModals, openModal } from '@mantine/modals';
-import { SpotlightProvider } from '@mantine/spotlight';
 import { AnimatePresence, motion } from 'framer-motion';
 import { BsCollection } from 'react-icons/bs';
 import { Button, MotionStack, ScrollArea, TextInput } from '/@/renderer/components';
@@ -135,26 +134,28 @@ export const Sidebar = () => {
           spacing={0}
           sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
         >
-          <ActionsContainer p={10}>
+          <ActionsContainer
+            gutter="sm"
+            p={10}
+          >
             <Grid.Col span={8}>
-              <SpotlightProvider actions={[]}>
-                <TextInput
-                  disabled
-                  readOnly
-                  icon={<RiSearchLine />}
-                  placeholder="Search"
-                  rightSectionWidth={90}
-                  // onClick={() => openSpotlight()}
-                />
-              </SpotlightProvider>
+              <TextInput
+                disabled
+                readOnly
+                icon={<RiSearchLine />}
+                placeholder="Search"
+                rightSectionWidth={90}
+                size="md"
+              />
             </Grid.Col>
             <Grid.Col span={4}>
               <Group
                 grow
-                spacing={5}
+                spacing="sm"
               >
                 <Button
                   px={5}
+                  size="md"
                   sx={{ color: 'var(--titlebar-fg)' }}
                   variant="default"
                   onClick={() => navigate(-1)}
@@ -163,6 +164,7 @@ export const Sidebar = () => {
                 </Button>
                 <Button
                   px={5}
+                  size="md"
                   sx={{ color: 'var(--titlebar-fg)' }}
                   variant="default"
                   onClick={() => navigate(1)}
@@ -183,7 +185,7 @@ export const Sidebar = () => {
                 py="0.5rem"
                 to={AppRoute.HOME}
               >
-                <Group>
+                <Group spacing="sm">
                   {location.pathname === AppRoute.HOME ? (
                     <RiHome4Fill size="1.3em" />
                   ) : (
@@ -210,7 +212,7 @@ export const Sidebar = () => {
               >
                 <Accordion.Item value="library">
                   <Accordion.Control>
-                    <Group>
+                    <Group spacing="sm">
                       {location.pathname.includes('/library/') ? (
                         <RiDatabaseFill size="1.3em" />
                       ) : (
@@ -221,7 +223,7 @@ export const Sidebar = () => {
                   </Accordion.Control>
                   <Accordion.Panel>
                     <SidebarItem to={AppRoute.LIBRARY_ALBUMS}>
-                      <Group>
+                      <Group spacing="sm">
                         {location.pathname === AppRoute.LIBRARY_ALBUMS ? (
                           <RiAlbumFill size="1.1em" />
                         ) : (
@@ -231,7 +233,7 @@ export const Sidebar = () => {
                       </Group>
                     </SidebarItem>
                     <SidebarItem to={AppRoute.LIBRARY_SONGS}>
-                      <Group>
+                      <Group spacing="sm">
                         {location.pathname === AppRoute.LIBRARY_SONGS ? (
                           <RiMusic2Fill size="1.1em" />
                         ) : (
@@ -241,7 +243,7 @@ export const Sidebar = () => {
                       </Group>
                     </SidebarItem>
                     <SidebarItem to={AppRoute.LIBRARY_ALBUM_ARTISTS}>
-                      <Group>
+                      <Group spacing="sm">
                         {location.pathname === AppRoute.LIBRARY_ALBUM_ARTISTS ? (
                           <RiUserVoiceFill size="1.1em" />
                         ) : (
@@ -254,7 +256,7 @@ export const Sidebar = () => {
                       disabled
                       to={AppRoute.LIBRARY_FOLDERS}
                     >
-                      <Group>
+                      <Group spacing="sm">
                         <RiFlag2Line size="1.1em" />
                         Genres
                       </Group>
@@ -263,7 +265,7 @@ export const Sidebar = () => {
                       disabled
                       to={AppRoute.LIBRARY_FOLDERS}
                     >
-                      <Group>
+                      <Group spacing="sm">
                         <RiFolder3Line size="1.1em" />
                         Folders
                       </Group>
@@ -272,7 +274,7 @@ export const Sidebar = () => {
                 </Accordion.Item>
                 <Accordion.Item value="collections">
                   <Accordion.Control disabled>
-                    <Group>
+                    <Group spacing="sm">
                       <BsCollection size="1.3em" />
                       Collections
                     </Group>
@@ -285,7 +287,10 @@ export const Sidebar = () => {
                       noWrap
                       position="apart"
                     >
-                      <Group noWrap>
+                      <Group
+                        noWrap
+                        spacing="sm"
+                      >
                         {location.pathname.includes('/playlists/') ? (
                           <MdFeaturedPlayList size="1.3em" />
                         ) : (
@@ -300,7 +305,7 @@ export const Sidebar = () => {
                         <Button
                           compact
                           component="div"
-                          h="1.5em"
+                          h="1.5rem"
                           tooltip={{ label: 'Create playlist', openDelay: 500 }}
                           variant="default"
                           onClick={handleCreatePlaylistModal}
@@ -310,7 +315,7 @@ export const Sidebar = () => {
                         <Button
                           compact
                           component={Link}
-                          h="1.5em"
+                          h="1.5rem"
                           to={AppRoute.PLAYLISTS}
                           tooltip={{ label: 'Playlist list', openDelay: 500 }}
                           variant="default"
diff --git a/src/renderer/features/songs/components/song-list-header.tsx b/src/renderer/features/songs/components/song-list-header.tsx
index 97da27a4..1b6e9bb5 100644
--- a/src/renderer/features/songs/components/song-list-header.tsx
+++ b/src/renderer/features/songs/components/song-list-header.tsx
@@ -318,16 +318,17 @@ export const SongListHeader = ({
               >
                 <Group noWrap>
                   <TextTitle
-                    fw="bold"
                     maw="20vw"
                     order={3}
                     overflow="hidden"
+                    weight={700}
                   >
                     {title || 'Tracks'}
                   </TextTitle>
                   <Badge
+                    px="1rem"
                     radius="xl"
-                    size="lg"
+                    size="xl"
                   >
                     {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
                   </Badge>
diff --git a/src/renderer/router/titlebar-outlet.tsx b/src/renderer/router/titlebar-outlet.tsx
index a6b0b578..e73e4e72 100644
--- a/src/renderer/router/titlebar-outlet.tsx
+++ b/src/renderer/router/titlebar-outlet.tsx
@@ -7,7 +7,7 @@ const TitlebarContainer = styled.header`
   top: 0;
   right: 0;
   z-index: 5000;
-  height: 2.5rem;
+  height: 30px;
   background: var(--titlebar-controls-bg);
   -webkit-app-region: drag;
 `;
diff --git a/src/renderer/styles/ag-grid.scss b/src/renderer/styles/ag-grid.scss
index 0687f289..b6abd1fe 100644
--- a/src/renderer/styles/ag-grid.scss
+++ b/src/renderer/styles/ag-grid.scss
@@ -1,6 +1,6 @@
 .ag-header-fixed {
   position: fixed !important;
-  top: 60px;
+  top: 65px;
   z-index: 15;
   background: var(--table-header-bg) !important;
   margin: 0 -2rem;
diff --git a/src/renderer/themes/default.scss b/src/renderer/themes/default.scss
index 5c8c0801..8712863d 100644
--- a/src/renderer/themes/default.scss
+++ b/src/renderer/themes/default.scss
@@ -1,5 +1,5 @@
 :root {
-  --root-font-size: 12px;
+  --root-font-size: 13px;
   --icon-color: rgb(255, 255, 255);
 
   --primary-color: rgb(34, 104, 255);
@@ -65,8 +65,8 @@
 
   --dropdown-menu-bg: rgb(40, 40, 40);
   --dropdown-menu-fg: rgb(235, 235, 235);
-  --dropdown-menu-item-padding: 1rem 0.8rem;
-  --dropdown-menu-item-font-size: 0.9em;
+  --dropdown-menu-item-padding: 1rem 0.5rem;
+  --dropdown-menu-item-font-size: 1rem;
   --dropdown-menu-bg-hover: rgb(62, 62, 62);
   --dropdown-menu-border: none;
   --dropdown-menu-border-radius: 2px;