diff --git a/components/Footer.jsx b/components/Footer.jsx
index 77d5327..5de9e10 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <div className="editor text-[11px] leading-[15px] text-white/60 sm:text-gray-400 w-[300px] sm:w-auto sm:max-w-[250px] px-[10px]">
+    <div className="editor text-[11px] leading-[15px] text-white sm:text-black w-[300px] sm:w-auto sm:max-w-[250px] px-[10px]">
       Simple web app for background music from the 
       <a href="https://boxradio.net/" rel="noopener noreferrer" target="_blank">
         Box Radio
diff --git a/hooks/use-stream-audio.js b/hooks/use-stream-audio.js
index 6326388..f09b6b6 100644
--- a/hooks/use-stream-audio.js
+++ b/hooks/use-stream-audio.js
@@ -12,36 +12,58 @@ function useStreamAudio() {
   const { playing, canplay } = useSnapshot(state)
   const audio = useRef()
 
+  const play = useCallback(async () => {
+    if (!canplay) return
+    await audio.current.play()
+  }, [canplay])
+
+  const pause = useCallback(() => {
+    if (!canplay) return
+    audio.current.pause()
+  }, [canplay])
+
   useEffect(() => {
     audio.current = new Audio(STREAM_URL)
-  }, [])
 
-  useEffect(() => {
-    const onCanPlay = () => {
-      state.canplay = true
+    if ('mediaSession' in navigator) {
+      navigator.mediaSession.metadata = new MediaMetadata({
+        title: 'Lo-Fi, Chillhop, ChillJazz, Sleep Music, Work Music etc.',
+        artist: 'LoFi Radio',
+        artwork: [
+          { src: '/mediasession/96.png', sizes: '96x96', type: 'image/png' },
+          { src: '/mediasession/128.png', sizes: '128x128', type: 'image/png' },
+          { src: '/mediasession/192.png', sizes: '192x192', type: 'image/png' },
+          { src: '/mediasession/256.png', sizes: '256x256', type: 'image/png' },
+          { src: '/mediasession/384.png', sizes: '384x384', type: 'image/png' },
+          { src: '/mediasession/512.png', sizes: '512x512', type: 'image/png' }
+        ]
+      })
     }
+  }, [])
 
-    audio.current.addEventListener('loadedmetadata', onCanPlay)
+  useEffect(() => {
+    const onPause = () => (state.playing = false)
+    audio.current.addEventListener('pause', onPause)
 
-    return () => {
-      audio.current.pause()
-      audio.current.removeEventListener('loadedmetadata', onCanPlay)
-    }
+    return () => audio.current.removeEventListener('pause', onPause)
   }, [])
 
-  const play = useCallback(() => {
-    if (!canplay) return
+  useEffect(() => {
+    const onPlay = () => (state.playing = true)
+    audio.current.addEventListener('play', onPlay)
 
-    audio.current.play()
-    state.playing = true
-  }, [canplay])
+    return () => audio.current.removeEventListener('play', onPlay)
+  }, [])
 
-  const pause = useCallback(() => {
-    if (!canplay) return
+  useEffect(() => {
+    const onCanplay = () => (state.canplay = true)
+    audio.current.addEventListener('loadedmetadata', onCanplay)
 
-    audio.current.pause()
-    state.playing = false
-  }, [canplay])
+    return () => {
+      audio.current.pause()
+      audio.current.removeEventListener('loadedmetadata', onCanplay)
+    }
+  }, [])
 
   return {
     canplay,
diff --git a/public/mediasession/128.png b/public/mediasession/128.png
new file mode 100644
index 0000000..da99b44
Binary files /dev/null and b/public/mediasession/128.png differ
diff --git a/public/mediasession/192.png b/public/mediasession/192.png
new file mode 100644
index 0000000..44258d0
Binary files /dev/null and b/public/mediasession/192.png differ
diff --git a/public/mediasession/256.png b/public/mediasession/256.png
new file mode 100644
index 0000000..cfc8780
Binary files /dev/null and b/public/mediasession/256.png differ
diff --git a/public/mediasession/384.png b/public/mediasession/384.png
new file mode 100644
index 0000000..d0dee3e
Binary files /dev/null and b/public/mediasession/384.png differ
diff --git a/public/mediasession/512.png b/public/mediasession/512.png
new file mode 100644
index 0000000..d3616c9
Binary files /dev/null and b/public/mediasession/512.png differ
diff --git a/public/mediasession/96.png b/public/mediasession/96.png
new file mode 100644
index 0000000..3d693b8
Binary files /dev/null and b/public/mediasession/96.png differ
diff --git a/styles/globals.css b/styles/globals.css
index 485c533..9e9ce5c 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -15,10 +15,7 @@
 
 @layer components {
   .editor a {
-    @apply text-white/80 sm:text-gray-600 hover:text-white sm:hover:text-gray-900 transition-colors;
-  }
-  .editor svg {
-    @apply inline-block -mt-[2.5px];
+    @apply text-white/50 sm:text-black/50 hover:text-white sm:hover:text-black transition-colors;
   }
   [data-plofier] {
     animation: Rotation 24s linear infinite;