diff --git a/.github/workflows/lint-format.yml b/.github/workflows/lint-format.yml
deleted file mode 100644
index 796fe5a..0000000
--- a/.github/workflows/lint-format.yml
+++ /dev/null
@@ -1,29 +0,0 @@
-name: Lint and Format
-
-on:
-  push:
-    branches:
-      - '**'
-
-jobs:
-  lint_format:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          token: ${{ secrets.GH_TOKEN }}
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: npm
-      - run: npm ci
-      - run: npm run format
-      - name: Commit and push formatting changes
-        run: |
-          git config --local user.email "github-actions[bot]@users.noreply.github.com"
-          git config --local user.name "github-actions[bot]"
-          git add -A
-          git diff --staged --quiet || git commit -m "style: auto-format code"
-          git push
-      - run: npm run lint
-        continue-on-error: true
diff --git a/api/maple.js b/api/maple.js
index 2b0ad1e..e957274 100644
--- a/api/maple.js
+++ b/api/maple.js
@@ -56,7 +56,7 @@ var options = {
 
 const slower = slowDown({
 	windowMs: 2 * 60 * 1000,
-	delayAfter: 5,
+	delayAfter: 50,
 	delayMs: (hits) => {
 		if (hits <= 15) return hits * 100;
 		return (hits - 15) * 1000 + 2000;
@@ -66,7 +66,7 @@ const slower = slowDown({
 
 const limiter = rateLimit({
 	windowMs: 2 * 60 * 1000,
-	limit: 35,
+	limit: 100,
 })
 
 try {
diff --git a/api/package-lock.json b/api/package-lock.json
index 9787940..897f0b5 100644
--- a/api/package-lock.json
+++ b/api/package-lock.json
@@ -776,8 +776,6 @@
 			"version": "4.21.2",
 			"resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
 			"integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
-			"peer": true,
-			"peer": true,
 			"dependencies": {
 				"accepts": "~1.3.8",
 				"array-flatten": "1.1.1",
@@ -866,39 +864,6 @@
 				"express": ">= 4.11"
 			}
 		},
-		"node_modules/express-slow-down": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/express-slow-down/-/express-slow-down-3.0.1.tgz",
-			"integrity": "sha512-Syl+K1o/z8zSTsMWbDpJEOF5WzSj923ktkv/WbNq6E3tmNwPoEcKIhqRxMLWq3a/4OudRciylEqEZvzMBdzn8w==",
-			"license": "MIT",
-			"dependencies": {
-				"express-rate-limit": "8"
-			},
-			"engines": {
-				"node": ">= 16"
-			},
-			"peerDependencies": {
-				"express": "4 || 5 || ^5.0.0-beta.1"
-			}
-		},
-		"node_modules/express-slow-down/node_modules/express-rate-limit": {
-			"version": "8.2.1",
-			"resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.2.1.tgz",
-			"integrity": "sha512-PCZEIEIxqwhzw4KF0n7QF4QqruVTcF73O5kFKUnGOyjbCCgizBBiFaYpd/fnBLUMPw/BWw9OsiN7GgrNYr7j6g==",
-			"license": "MIT",
-			"dependencies": {
-				"ip-address": "10.0.1"
-			},
-			"engines": {
-				"node": ">= 16"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/express-rate-limit"
-			},
-			"peerDependencies": {
-				"express": ">= 4.11"
-			}
-		},
 		"node_modules/express-validator": {
 			"version": "7.3.1",
 			"resolved": "https://registry.npmjs.org/express-validator/-/express-validator-7.3.1.tgz",
@@ -1233,15 +1198,6 @@
 				"node": ">= 12"
 			}
 		},
-		"node_modules/ip-address": {
-			"version": "10.0.1",
-			"resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz",
-			"integrity": "sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==",
-			"license": "MIT",
-			"engines": {
-				"node": ">= 12"
-			}
-		},
 		"node_modules/ipaddr.js": {
 			"version": "1.9.1",
 			"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
diff --git a/package-lock.json b/package-lock.json
index aa8fb45..86eaeba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1686,6 +1686,7 @@
 			"dev": true,
 			"license": "MIT",
 			"optional": true,
+			"peer": true,
 			"dependencies": {
 				"tslib": "^2.4.0"
 			}
@@ -3665,6 +3666,66 @@
 				"node": ">=14.0.0"
 			}
 		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+			"version": "1.4.3",
+			"dev": true,
+			"inBundle": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/wasi-threads": "1.0.2",
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+			"version": "1.4.3",
+			"dev": true,
+			"inBundle": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+			"version": "1.0.2",
+			"dev": true,
+			"inBundle": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+			"version": "0.2.11",
+			"dev": true,
+			"inBundle": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/core": "^1.4.3",
+				"@emnapi/runtime": "^1.4.3",
+				"@tybys/wasm-util": "^0.9.0"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+			"version": "0.9.0",
+			"dev": true,
+			"inBundle": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+			"version": "2.8.0",
+			"dev": true,
+			"inBundle": true,
+			"license": "0BSD",
+			"optional": true
+		},
 		"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
 			"version": "4.1.11",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",
@@ -7335,9 +7396,9 @@
 			}
 		},
 		"node_modules/minizlib": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
-			"integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+			"integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -7347,22 +7408,6 @@
 				"node": ">= 18"
 			}
 		},
-		"node_modules/mkdirp": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
-			"integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
-			"dev": true,
-			"license": "MIT",
-			"bin": {
-				"mkdirp": "dist/cjs/src/bin.js"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -9200,17 +9245,16 @@
 			}
 		},
 		"node_modules/tar": {
-			"version": "7.4.3",
-			"resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
-			"integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+			"version": "7.5.9",
+			"resolved": "https://registry.npmjs.org/tar/-/tar-7.5.9.tgz",
+			"integrity": "sha512-BTLcK0xsDh2+PUe9F6c2TlRp4zOOBMTkoQHQIWSIzI0R7KG46uEwq4OPk2W7bZcprBMsuaeFsqwYr7pjh6CuHg==",
 			"dev": true,
-			"license": "ISC",
+			"license": "BlueOak-1.0.0",
 			"dependencies": {
 				"@isaacs/fs-minipass": "^4.0.0",
 				"chownr": "^3.0.0",
 				"minipass": "^7.1.2",
-				"minizlib": "^3.0.1",
-				"mkdirp": "^3.0.1",
+				"minizlib": "^3.1.0",
 				"yallist": "^5.0.0"
 			},
 			"engines": {
@@ -9341,7 +9385,8 @@
 			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
 			"dev": true,
 			"license": "0BSD",
-			"optional": true
+			"optional": true,
+			"peer": true
 		},
 		"node_modules/type-check": {
 			"version": "0.4.0",
diff --git a/src/lib/components/ListTrack.svelte b/src/lib/components/ListTrack.svelte
index 43dbdb4..926771c 100644
--- a/src/lib/components/ListTrack.svelte
+++ b/src/lib/components/ListTrack.svelte
@@ -237,7 +237,7 @@
 		ondrop={onDrop}
 		ondragend={onDragEnd}
 	>
-		<div class="flex min-w-0 items-center gap-4">
+		<div class="flex min-w-0 flex-1 items-center gap-4 overflow-hidden">
 			<span class="text-on-surface-variant w-8 shrink-0 text-right text-sm tabular-nums"
 				>{index}</span
 			>
@@ -245,12 +245,14 @@
 				{#if track.image}
 					{#await OPFS.getImageUrl(track.image as string) then imageUrl}
 						<Lazy height={40} keep={true}>
-							<img
-								src={imageUrl}
-								alt="{track.title} - {track.artist}"
-								class="h-10 w-10 shrink-0 rounded-md object-cover"
-								draggable="false"
-							/>
+							<div class="h-10 w-10 shrink-0">
+								<img
+									src={imageUrl}
+									alt="{track.title} - {track.artist}"
+									class="h-full w-full rounded-md object-cover"
+									draggable="false"
+								/>
+							</div>
 						</Lazy>
 					{:catch}
 						<Lazy height={40} keep={true}>
@@ -263,9 +265,9 @@
 					</Lazy>
 				{/if}
 			{/if}
-			<div class="min-w-0 flex-1">
-				<p class="text-on-surface truncate">{track.title}</p>
-				<p class="text-on-surface-variant truncate text-sm">{track.artist}</p>
+			<div class="min-w-0 flex-1 overflow-hidden">
+				<p class="text-on-surface truncate" title={track.title}>{track.title}</p>
+				<p class="text-on-surface-variant truncate text-sm" title={track.artist}>{track.artist}</p>
 			</div>
 		</div>
 		<div class="flex items-center gap-2">
@@ -386,3 +388,14 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	.text-on-surface.truncate,
+	.text-on-surface-variant.truncate {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 100%;
+		display: block;
+	}
+</style>
diff --git a/src/lib/components/SideBar.svelte b/src/lib/components/SideBar.svelte
index c42b207..ceb08bf 100644
--- a/src/lib/components/SideBar.svelte
+++ b/src/lib/components/SideBar.svelte
@@ -3,7 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { createLibrary } from '$lib/library';
-	import { SavedUser } from '$lib/store';
+	import { SavedUser, isLoggedIn } from '$lib/store';
 
 	const isActive = (path: string) => page.url.pathname === path;
 </script>
@@ -15,7 +15,7 @@
 		<div class="mt-3 mb-3 flex flex-col items-center justify-center gap-2">
 			<button
 				type="button"
-				onclick={() => goto('/settings')}
+				onclick={() => goto($isLoggedIn ? '/settings' : '/login')}
 				class="bg-primary text-on-primary hover:bg-primary/90 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full transition-colors"
 			>
 				{#if $SavedUser?.pfp}
diff --git a/src/lib/components/Track.svelte b/src/lib/components/Track.svelte
index 4c06a1c..0c2800c 100644
--- a/src/lib/components/Track.svelte
+++ b/src/lib/components/Track.svelte
@@ -404,7 +404,7 @@
 						onclick={handleTrackClick}
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 24 24"
-						class="text-primary bg-primary-container h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+						class="text-primary bg-primary-container h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 						><path
 							fill="currentColor"
 							d="M17.5 20q-1.05 0-1.775-.725T15 17.5t.725-1.775T17.5 15q.2 0 .45.038t.55.162V11q0-.425.288-.712T19.5 10H21q.425 0 .713.288T22 11t-.288.713T21 12h-1v5.5q0 1.05-.725 1.775T17.5 20M11 12q-1.65 0-2.825-1.175T7 8t1.175-2.825T11 4t2.825 1.175T15 8t-1.175 2.825T11 12m-7 8q-.425 0-.712-.288T3 19v-1.8q0-.875.438-1.575T4.6 14.55q1.55-.775 3.15-1.162T11 13q.7 0 1.388.075t1.387.225q.425.1.537.525t-.237.775q-.525.625-.788 1.363t-.262 1.537q0 .325.038.638t.137.637q.125.45-.112.838t-.663.387z"
@@ -417,7 +417,7 @@
 					<img
 						onclick={handleTrackClick}
 						src={DEFAULT_PLACEHOLDER}
-						class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+						class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 						alt="{track?.title || playlist?.name || album?.name || artist?.name} - {track?.artist ||
 							'' ||
 							album?.artist ||
@@ -433,7 +433,7 @@
 				<img
 					onclick={handleTrackClick}
 					src={imageUrl}
-					class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+					class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 					alt="{track?.title || playlist?.name || album?.name || artist?.name} - {track?.artist ||
 						'' ||
 						album?.artist ||
@@ -449,7 +449,7 @@
 						onclick={handleTrackClick}
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 24 24"
-						class="text-primary bg-primary-container h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+						class="text-primary bg-primary-container h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 						><path
 							fill="currentColor"
 							d="M17.5 20q-1.05 0-1.775-.725T15 17.5t.725-1.775T17.5 15q.2 0 .45.038t.55.162V11q0-.425.288-.712T19.5 10H21q.425 0 .713.288T22 11t-.288.713T21 12h-1v5.5q0 1.05-.725 1.775T17.5 20M11 12q-1.65 0-2.825-1.175T7 8t1.175-2.825T11 4t2.825 1.175T15 8t-1.175 2.825T11 12m-7 8q-.425 0-.712-.288T3 19v-1.8q0-.875.438-1.575T4.6 14.55q1.55-.775 3.15-1.162T11 13q.7 0 1.388.075t1.387.225q.425.1.537.525t-.237.775q-.525.625-.788 1.363t-.262 1.537q0 .325.038.638t.137.637q.125.45-.112.838t-.663.387z"
@@ -461,7 +461,7 @@
 					<img
 						onclick={handleTrackClick}
 						src={DEFAULT_PLACEHOLDER}
-						class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+						class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 						alt="{track?.title || playlist?.name || album?.name || artist?.name} - {track?.artist ||
 							'' ||
 							album?.artist ||
@@ -477,7 +477,7 @@
 			onclick={handleTrackClick}
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 24 24"
-			class="text-primary bg-primary-container h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+			class="text-primary bg-primary-container h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 			><path
 				fill="currentColor"
 				d="M17.5 20q-1.05 0-1.775-.725T15 17.5t.725-1.775T17.5 15q.2 0 .45.038t.55.162V11q0-.425.288-.712T19.5 10H21q.425 0 .713.288T22 11t-.288.713T21 12h-1v5.5q0 1.05-.725 1.775T17.5 20M11 12q-1.65 0-2.825-1.175T7 8t1.175-2.825T11 4t2.825 1.175T15 8t-1.175 2.825T11 12m-7 8q-.425 0-.712-.288T3 19v-1.8q0-.875.438-1.575T4.6 14.55q1.55-.775 3.15-1.162T11 13q.7 0 1.388.075t1.387.225q.425.1.537.525t-.237.775q-.525.625-.788 1.363t-.262 1.537q0 .325.038.638t.137.637q.125.45-.112.838t-.663.387z"
@@ -489,7 +489,7 @@
 		<img
 			onclick={handleTrackClick}
 			src={DEFAULT_PLACEHOLDER}
-			class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+			class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 			alt="{track?.title || playlist?.name || album?.name || artist?.name} - {track?.artist ||
 				'' ||
 				album?.artist ||
@@ -497,9 +497,16 @@
 			draggable="false"
 		/>
 	{/if}
-	<div class="flex max-w-[90%] flex-col select-none md:max-w-full">
-		<p class="song-titles mt-2">{track?.title || playlist?.name || album?.name || artist?.name}</p>
-		<p class="song-artists">{track?.artist || '' || album?.artist || ''}</p>
+	<div class="flex w-44 flex-col select-none md:w-60 lg:w-64">
+		<p
+			class="song-titles mt-2"
+			title={track?.title || playlist?.name || album?.name || artist?.name || ''}
+		>
+			{track?.title || playlist?.name || album?.name || artist?.name}
+		</p>
+		<p class="song-artists" title={track?.artist || '' || album?.artist || ''}>
+			{track?.artist || '' || album?.artist || ''}
+		</p>
 	</div>
 </div>
 
@@ -523,6 +530,10 @@
 			'YTFI' 728,
 			'YTLC' 514,
 			'YTUC' 712;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		width: 100%;
 	}
 
 	.song-artists {
@@ -544,6 +555,10 @@
 			'YTFI' 728,
 			'YTLC' 514,
 			'YTUC' 712;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		width: 100%;
 	}
 
 	@media (min-width: 768px) {
diff --git a/src/lib/player.ts b/src/lib/player.ts
index 7d38140..564d84e 100644
--- a/src/lib/player.ts
+++ b/src/lib/player.ts
@@ -22,6 +22,98 @@ import UserSettings from '$lib/preferences/usersettings';
 import { UserManager } from './api/UserManager';
 import { SERVER } from '$lib/api/server';
 
+let mediaSessionInitialized = false;
+
+function initMediaSession() {
+	if (!browser || mediaSessionInitialized || !('mediaSession' in navigator)) return;
+	mediaSessionInitialized = true;
+
+	navigator.mediaSession.setActionHandler('play', () => {
+		const state = get(audioPlayer);
+		if (state.audio instanceof HTMLAudioElement && !state.playing) {
+			togglePlay();
+		}
+	});
+
+	navigator.mediaSession.setActionHandler('pause', () => {
+		const state = get(audioPlayer);
+		if (state.audio instanceof HTMLAudioElement && state.playing) {
+			togglePlay();
+		}
+	});
+
+	navigator.mediaSession.setActionHandler('previoustrack', () => {
+		previous();
+	});
+
+	navigator.mediaSession.setActionHandler('nexttrack', () => {
+		next();
+	});
+
+	navigator.mediaSession.setActionHandler('seekbackward', (details) => {
+		const state = get(audioPlayer);
+		if (state.audio instanceof HTMLAudioElement) {
+			const skipTime = details.seekOffset || 10;
+			seekTo(Math.max(state.audio.currentTime - skipTime, 0));
+		}
+	});
+
+	navigator.mediaSession.setActionHandler('seekforward', (details) => {
+		const state = get(audioPlayer);
+		if (state.audio instanceof HTMLAudioElement) {
+			const skipTime = details.seekOffset || 10;
+			seekTo(Math.min(state.audio.currentTime + skipTime, state.audio.duration || 0));
+		}
+	});
+
+	navigator.mediaSession.setActionHandler('seekto', (details) => {
+		if (details.seekTime !== undefined) {
+			seekTo(details.seekTime);
+		}
+	});
+
+	navigator.mediaSession.setActionHandler('stop', () => {
+		const state = get(audioPlayer);
+		if (state.audio instanceof HTMLAudioElement) {
+			state.audio.pause();
+			state.audio.currentTime = 0;
+			audioPlayer.update((value) => ({ ...value, playing: false, currentTime: 0 }));
+		}
+	});
+}
+
+function updateMediaSessionMetadata(song: Song, artworkUrl?: string) {
+	if (!browser || !('mediaSession' in navigator)) return;
+	initMediaSession();
+
+	const artwork: MediaImage[] = artworkUrl ? [{ src: artworkUrl, sizes: '512x512', type: 'image/jpeg' }] : [];
+
+	navigator.mediaSession.metadata = new MediaMetadata({
+		title: song.title || 'Unknown Title',
+		artist: song.artist || 'Unknown Artist',
+		album: song.album || 'Unknown Album',
+		artwork
+	});
+}
+
+function updateMediaSessionPlaybackState(playing: boolean) {
+	if (!browser || !('mediaSession' in navigator)) return;
+	navigator.mediaSession.playbackState = playing ? 'playing' : 'paused';
+}
+
+function updateMediaSessionPositionState(audio: HTMLAudioElement) {
+	if (!browser || !('mediaSession' in navigator) || !audio.duration || !isFinite(audio.duration)) return;
+	try {
+		navigator.mediaSession.setPositionState({
+			duration: audio.duration,
+			playbackRate: audio.playbackRate,
+			position: audio.currentTime
+		});
+	} catch {
+
+	}
+}
+
 type QueueSourceState = QueueSnapshot['source'];
 
 function updateQueue(items: Song[], index: number, source?: QueueSourceState) {
@@ -39,6 +131,24 @@ async function getImageFile(imagePath: string): Promise<File> {
 	return new File([arrayBuffer], imagePath, { type: 'image/jpeg' });
 }
 
+async function uploadAlbumArt(song: Song): Promise<boolean> {
+	const isLoggedIn = await UserManager.isLoggedIn();
+	if (!isLoggedIn) return false;
+
+	if (!song.image || typeof song.image !== 'string') return false;
+
+	try {
+		const image = await getImageFile(song.image);
+		const imageBuffer = await image.arrayBuffer();
+		const imageFile = new File([imageBuffer], 'album.jpg', { type: 'image/jpeg' });
+		await UserManager.setAlbumArt(imageFile);
+		return true;
+	} catch (error) {
+		console.error('Error uploading album art:', error);
+		return false;
+	}
+}
+
 async function sendWebhook(song: Song) {
 	if (!UserSettings.webhook.enabled || !UserSettings.webhook.url) return;
 
@@ -46,15 +156,9 @@ async function sendWebhook(song: Song) {
 	if (!isLoggedIn) return;
 
 	if (!song.image || typeof song.image !== 'string') return;
-	const imagePath: string = song.image;
 
 	try {
-		const image = await getImageFile(imagePath);
-		const imageBuffer = await image.arrayBuffer();
-		const imageFile = new File([imageBuffer], 'album.jpg', { type: 'image/jpeg' });
-		await UserManager.setAlbumArt(imageFile);
-		await new Promise((resolve) => setTimeout(resolve, 100));
-
+		const image = await getImageFile(song.image);
 		const user = get(SavedUser);
 		const formData = new FormData();
 		formData.append('file', image, 'album.jpg');
@@ -114,6 +218,11 @@ async function emitNowPlaying(song: Song) {
 		source: 'Web'
 	};
 	s.emit('nowPlaying', { nowPlaying: payload });
+
+	const artworkUploaded = await uploadAlbumArt(song);
+	const artworkUrl = artworkUploaded ? `${SERVER}/public/get/albumArt/${user.id}/${crypto.randomUUID()}` : undefined;
+	updateMediaSessionMetadata(song, artworkUrl);
+
 	await sendWebhook(song);
 }
 
@@ -140,10 +249,14 @@ async function playAtIndex(index: number) {
 			audio.src = audioUrl;
 			audio.currentTime = 0;
 			audio.play();
+			audio.addEventListener('loadedmetadata', () => {
+				updateMediaSessionPositionState(audio);
+			}, { once: true });
 			return { ...value, audio, playing: true, currentTime: 0, onEnded: next };
 		}
 		return value;
 	});
+	updateMediaSessionPlaybackState(true);
 	await emitNowPlaying(song);
 }
 
@@ -190,6 +303,7 @@ export async function next() {
 			}
 			return { ...value, playing: false };
 		});
+		updateMediaSessionPlaybackState(false);
 		return;
 	}
 	statsManager.recordSkip();
@@ -210,6 +324,7 @@ export function togglePlay() {
 	} else {
 		statsManager.recordResume();
 	}
+	const newPlayingState = !state.playing;
 	audioPlayer.update((value) => {
 		if (value.audio instanceof HTMLAudioElement) {
 			if (value.playing) {
@@ -217,11 +332,13 @@ export function togglePlay() {
 			} else {
 				value.audio.play();
 			}
-			return { ...value, playing: !value.playing, currentTime: value.audio.currentTime };
+			updateMediaSessionPositionState(value.audio);
+			return { ...value, playing: newPlayingState, currentTime: value.audio.currentTime };
 		}
 		return value;
 	});
-}
+	updateMediaSessionPlaybackState(newPlayingState);
+} 
 
 export function setVolumeLevel(volume: number) {
 	audioPlayer.update((value) => ({ ...value, volume, changeVolume: true }));
@@ -233,6 +350,7 @@ export function seekTo(time: number) {
 	audioPlayer.update((value) => {
 		if (value.audio instanceof HTMLAudioElement) {
 			value.audio.currentTime = time;
+			updateMediaSessionPositionState(value.audio);
 			return { ...value, currentTime: time };
 		}
 		return value;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 11e0c04..3944a21 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -32,7 +32,7 @@
 <div class="mt-5 flex w-full flex-col">
 	<h1 class="ml-4 text-2xl font-bold md:ml-10">Recently Played</h1>
 	<div
-		class="mx-4 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-4 lg:grid-cols-4 lg:gap-x-2 xl:grid-cols-5 xl:gap-x-2"
+		class="mr-8 ml-2 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 	>
 		{#each recent as track}
 			<Track {track} queue={recent} queueSource={{ type: 'recent', label: 'Recently Played' }} />
diff --git a/src/routes/albums/+page.svelte b/src/routes/albums/+page.svelte
index c819e21..bf2be77 100644
--- a/src/routes/albums/+page.svelte
+++ b/src/routes/albums/+page.svelte
@@ -31,7 +31,7 @@
 />
 
 <div
-	class="mx-4 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-4 lg:grid-cols-4 lg:gap-x-2 xl:grid-cols-5 xl:gap-x-2"
+	class="mr-8 ml-2 mb-10 md:mb-0 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 >
 	{#each sortedAlbums as album (album.id)}
 		<div class="will-change-transform" animate:flip={{ duration: 300, easing: cubicOut }}>
diff --git a/src/routes/albums/album/[slug]/+page.svelte b/src/routes/albums/album/[slug]/+page.svelte
index d675d6c..7236db9 100644
--- a/src/routes/albums/album/[slug]/+page.svelte
+++ b/src/routes/albums/album/[slug]/+page.svelte
@@ -188,7 +188,7 @@
 	});
 </script>
 
-<div class="flex flex-col gap-8 pt-4 pr-3 pl-3 md:flex-row md:pt-14 md:pr-20 md:pl-14 lg:pl-28">
+<div class="flex flex-col gap-8 pt-4 pr-3 pl-3 md:flex-row md:pt-14 md:pr-20 md:pl-14 lg:pl-28 mb-5 md:mb-0">
 	<div class="w-full md:w-1/2 lg:w-2/5">
 		{#if imageUrl}
 			<img
diff --git a/src/routes/artists/+page.svelte b/src/routes/artists/+page.svelte
index 74f79b6..5650869 100644
--- a/src/routes/artists/+page.svelte
+++ b/src/routes/artists/+page.svelte
@@ -31,7 +31,7 @@
 />
 
 <div
-	class="mx-4 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-4 lg:grid-cols-4 lg:gap-x-2 xl:grid-cols-5 xl:gap-x-2"
+	class="mr-8 ml-2 mb-10 md:mb-0 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 >
 	{#each sortedArtists as artist (artist.id)}
 		<div class="will-change-transform" animate:flip={{ duration: 300, easing: cubicOut }}>
diff --git a/src/routes/artists/artist/[slug]/+page.svelte b/src/routes/artists/artist/[slug]/+page.svelte
index 4e5fb16..385ee29 100644
--- a/src/routes/artists/artist/[slug]/+page.svelte
+++ b/src/routes/artists/artist/[slug]/+page.svelte
@@ -107,7 +107,7 @@
 			onChange={handleAlbumFiltersChange}
 		/>
 		<div
-			class="grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:grid-cols-3 md:gap-x-4 lg:grid-cols-4 lg:gap-x-2 xl:grid-cols-5 xl:gap-x-2"
+			class="grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 		>
 			{#each sortedAlbums as album (album.id)}
 				<div class="will-change-transform" animate:flip={{ duration: 300, easing: cubicOut }}>
diff --git a/src/routes/playlists/+page.svelte b/src/routes/playlists/+page.svelte
index 743de50..d7d8872 100644
--- a/src/routes/playlists/+page.svelte
+++ b/src/routes/playlists/+page.svelte
@@ -43,14 +43,14 @@
 />
 
 <div
-	class="mr-5 mb-10 ml-2 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-4 lg:grid-cols-4 lg:gap-x-2 xl:grid-cols-5 xl:gap-x-2"
+	class="mr-5 mb-10 ml-2 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 >
 	<div class="mt-4 ml-4 flex w-full flex-col md:mt-5 md:ml-10">
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<div
 			onclick={createPlaylist}
-			class="bg-primary-container text-primary flash-slow flex h-44 w-44 cursor-pointer items-center justify-center rounded-lg transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+			class="bg-primary-container text-primary flash-slow flex h-44 w-44 cursor-pointer items-center justify-center rounded-lg transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 		>
 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-16 w-16">
 				<path
diff --git a/src/routes/playlists/playlist/[slug]/+page.svelte b/src/routes/playlists/playlist/[slug]/+page.svelte
index a230c2c..c4f92dc 100644
--- a/src/routes/playlists/playlist/[slug]/+page.svelte
+++ b/src/routes/playlists/playlist/[slug]/+page.svelte
@@ -203,20 +203,18 @@
 	<div class="w-full md:w-1/2 lg:w-2/5">
 		{#if playlist?.image}
 			{#await OPFS.getImageUrl(playlist.image as string) then imageUrl}
-				<img
-					src={imageUrl}
-					alt={playlist?.name}
-					class="mx-auto aspect-square w-full max-w-sm rounded-lg object-cover shadow-md md:mx-0"
-				/>
+				<div class="aspect-square max-w-sm w-full">
+					<img
+						src={imageUrl}
+						alt={playlist?.name}
+						class="w-full h-full rounded-lg object-cover shadow-md"
+					/>
+				</div>
 			{:catch}
-				<div
-					class="bg-surface-container mx-auto aspect-square w-full max-w-sm rounded-lg md:mx-0"
-				></div>
+				<div class="bg-surface-container aspect-square max-w-sm w-full rounded-lg"></div>
 			{/await}
 		{:else}
-			<div
-				class="bg-surface-container mx-auto aspect-square w-full max-w-sm rounded-lg md:mx-0"
-			></div>
+			<div class="bg-surface-container aspect-square max-w-sm w-full rounded-lg"></div>
 		{/if}
 		{#if editModeOn}
 			<div class="mt-4 space-y-2">
diff --git a/src/routes/tracks/+page.svelte b/src/routes/tracks/+page.svelte
index c14ab22..c2d95b9 100644
--- a/src/routes/tracks/+page.svelte
+++ b/src/routes/tracks/+page.svelte
@@ -34,7 +34,7 @@
 />
 
 <div
-	class="mr-8 ml-2 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-4 lg:grid-cols-4 lg:gap-x-2 xl:grid-cols-5 xl:gap-x-2"
+	class="mr-8 ml-2 mb-10 md:mb-0 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 >
 	{#each sortedTracks as track (track.id)}
 		<div class="will-change-transform" animate:flip={{ duration: 300, easing: cubicOut }}>
diff --git a/svelte.config.js b/svelte.config.js
index 72dcaca..2c950a2 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,7 +1,7 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 //import adapter from '@sveltejs/adapter-auto';
-//import adapter from '@sveltejs/adapter-node';
-import adapter from '@sveltejs/adapter-cloudflare';
+import adapter from '@sveltejs/adapter-node';
+//import adapter from '@sveltejs/adapter-cloudflare';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {