diff --git a/package.json b/package.json
index 3f8d4ef..0aa3051 100644
--- a/package.json
+++ b/package.json
@@ -38,4 +38,4 @@
 	"dependencies": {
 		"svelte-tiny-virtual-list": "^2.0.5"
 	}
-}
+}
\ No newline at end of file
diff --git a/src/app.d.ts b/src/app.d.ts
index 824da68..2bc1360 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -11,4 +11,4 @@ declare global {
 	}
 }
 
-export {};
+export { };
diff --git a/src/routes/share/[token]/+page.server.ts b/src/routes/share/[token]/+page.server.ts
index fbd7a1d..acb8ef6 100644
--- a/src/routes/share/[token]/+page.server.ts
+++ b/src/routes/share/[token]/+page.server.ts
@@ -3,17 +3,29 @@ import { LOCAL_MUSIKQUAD_SERVER } from '$env/static/private';
 import { scheme } from '../../../utils';
 
 interface MusicInfo {
-	title: string;
-	album: string;
-	artist: string;
+  title: string;
+  album: string;
+  artist: string;
 }
 
 export async function load({ params }) {
-	const resp = await fetch(`${LOCAL_MUSIKQUAD_SERVER}/share/info/${params.token}`);
-	const info: MusicInfo = await resp.json();
-	return {
-		info,
-		thumbnail_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/thumbnail/${params.token}`,
-		audio_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/audio/${params.token}`
-	};
+  const token = params.token;
+  let color = '#222222';
+
+  const resp = await fetch(`${LOCAL_MUSIKQUAD_SERVER}/share/info/${token}`);
+  const info: MusicInfo = await resp.json();
+
+  /*const thumb_resp = await fetch(`${LOCAL_MUSIKQUAD_SERVER}/share/thumbnail/${token}`);
+  if (thumb_resp.ok) {
+    const thumb = await thumb_resp.blob();
+    const rawColor = await getColor(thumb);
+    color = rgbToHex(rawColor[0], rawColor[1], rawColor[2]);
+  }*/
+
+  return {
+    info,
+    color,
+    thumbnail_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/thumbnail/${token}`,
+    audio_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/audio/${token}`
+  };
 }
diff --git a/src/routes/share/[token]/+page.svelte b/src/routes/share/[token]/+page.svelte
index b446c0d..2c95f81 100644
--- a/src/routes/share/[token]/+page.svelte
+++ b/src/routes/share/[token]/+page.svelte
@@ -18,7 +18,7 @@
 		const hasAlbum = data.info.album;
 
 		if (hasArtist && hasAlbum) {
-			return `from ${data.info.album} by ${data.info.artist}`;
+			return `from ${data.info.album}\nby ${data.info.artist}`;
 		} else if (hasArtist) {
 			return `by ${data.info.artist}`;
 		} else if (hasAlbum) {
@@ -44,6 +44,7 @@
 	<meta property="og:description" content={getAlbumArtistInfo()} />
 	<meta property="og:image" content={data.thumbnail_url} />
 	<meta property="og:audio" content={data.audio_url} />
+	<meta name="theme-color" content={data.color} />
 </svelte:head>
 
 <div
@@ -59,7 +60,6 @@
 		bind:paused
 		bind:currentTime
 		bind:duration
-		on:loadstart={(event) => event.currentTarget.play()}
 	/>
 	<button
 		class="relative rounded placeholder w-16 h-16"
diff --git a/src/utils.ts b/src/utils.ts
index b8ddbae..f5a7344 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -4,77 +4,86 @@ import { PUBLIC_BASEURL } from '$env/static/public';
 export const scheme = dev ? 'http' : 'https';
 
 export function makeShareUrl(token: string) {
-  return `${scheme}://${PUBLIC_BASEURL}/share/${token}`;
+	return `${scheme}://${PUBLIC_BASEURL}/share/${token}`;
 }
 
 export function getAudioElement() {
-  const elem = document.getElementById('audio-source');
-  if (elem === null) {
-    return null;
-  }
-  return elem as HTMLAudioElement;
+	const elem = document.getElementById('audio-source');
+	if (elem === null) {
+		return null;
+	}
+	return elem as HTMLAudioElement;
 }
 
 export function calculateMinuteSecond(seconds: number) {
-  let secs = Math.floor(seconds);
-  let secsLeftover = secs % 60;
-  let minutes = (secs - secsLeftover) / 60;
+	let secs = Math.floor(seconds);
+	let secsLeftover = secs % 60;
+	let minutes = (secs - secsLeftover) / 60;
 
-  let secondsFormatted = secsLeftover < 10 ? `0${secsLeftover}` : `${secsLeftover}`;
-  let minutesFormatted = minutes < 10 ? `0${minutes}` : `${minutes}`;
+	let secondsFormatted = secsLeftover < 10 ? `0${secsLeftover}` : `${secsLeftover}`;
+	let minutesFormatted = minutes < 10 ? `0${minutes}` : `${minutes}`;
 
-  return `${minutesFormatted}:${secondsFormatted}`;
+	return `${minutesFormatted}:${secondsFormatted}`;
 }
 
 export function interceptKeys(
-  extraActions: [string, () => void][] = []
+	extraActions: [string, () => void][] = []
 ): (event: KeyboardEvent) => void {
-  return (event) => {
-    const tagName = document.activeElement?.tagName ?? '';
-    const audio = getAudioElement();
-    const actions = new Map([
-      ...extraActions,
-      [
-        'Space',
-        () => {
-          if (audio !== null) {
-            audio.paused ? audio.play() : audio.pause();
-          }
-        }
-      ],
-      [
-        'KeyM',
-        () => {
-          if (audio !== null) {
-            audio.muted = !audio.muted;
-          }
-        }
-      ],
-      [
-        'ArrowLeft',
-        () => {
-          if (audio !== null) {
-            audio.currentTime -= 5;
-          }
-        }
-      ],
-      [
-        'ArrowRight',
-        () => {
-          const audio = getAudioElement();
-          if (audio !== null) {
-            audio.currentTime += 5;
-          }
-        }
-      ]
-    ]);
-    if (tagName !== 'INPUT' && actions.has(event.code)) {
-      event.preventDefault();
-      event.stopPropagation();
-      const action = actions.get(event.code) ?? null;
-      if (action !== null) {
-        action();
-      }
-    }
-  };
+	return (event) => {
+		const tagName = document.activeElement?.tagName ?? '';
+		const audio = getAudioElement();
+		const actions = new Map([
+			...extraActions,
+			[
+				'Space',
+				() => {
+					if (audio !== null) {
+						audio.paused ? audio.play() : audio.pause();
+					}
+				}
+			],
+			[
+				'KeyM',
+				() => {
+					if (audio !== null) {
+						audio.muted = !audio.muted;
+					}
+				}
+			],
+			[
+				'ArrowLeft',
+				() => {
+					if (audio !== null) {
+						audio.currentTime -= 5;
+					}
+				}
+			],
+			[
+				'ArrowRight',
+				() => {
+					const audio = getAudioElement();
+					if (audio !== null) {
+						audio.currentTime += 5;
+					}
+				}
+			]
+		]);
+		if (tagName !== 'INPUT' && actions.has(event.code)) {
+			event.preventDefault();
+			event.stopPropagation();
+			const action = actions.get(event.code) ?? null;
+			if (action !== null) {
+				action();
+			}
+		}
+	};
+}
+
+function componentToHex(c: number) {
+	var hex = c.toString(16);
+	return hex.length == 1 ? '0' + hex : hex;
+}
+
+export function rgbToHex(r: number, g: number, b: number) {
+	return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
 }
diff --git a/yarn.lock b/yarn.lock
index e7870f8..4e4ee56 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -323,9 +323,9 @@
     svelte "^3.58.0"
 
 "@sveltejs/kit@^1.15.9":
-  version "1.16.2"
-  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.16.2.tgz#639fd71abbb48ec819b909f051418bd4193f40e0"
-  integrity sha512-yxcpA4nvlVlJ+VyYnj0zD3QN05kfmoh4OyitlPrVG34nnZSHzFpE4eZ33X1A/tc9prslSFRhpM6rWngCs0nM8w==
+  version "1.16.3"
+  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.16.3.tgz#2b7540dbe08ce5d2eb46a282043c5a345f25691e"
+  integrity sha512-8uv0udYRpVuE1BweFidcWHfL+u2gAANKmvIal1dN/FWPBl7DJYbt9zYEtr3bNTiXystT8Sn0Wp54RfwpbPqHjQ==
   dependencies:
     "@sveltejs/vite-plugin-svelte" "^2.1.1"
     "@types/cookie" "^0.5.1"