diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx
index e398562..0c5e70c 100644
--- a/src/components/app/app.tsx
+++ b/src/components/app/app.tsx
@@ -22,6 +22,9 @@ export function App() {
   const categories = useMemo(() => sounds.categories, []);
 
   const favorites = useSoundStore(useShallow(state => state.getFavorites()));
+  const play = useSoundStore(state => state.play);
+  const pause = useSoundStore(state => state.pause);
+  const isPlaying = useSoundStore(state => state.isPlaying);
 
   const favoriteSounds = useMemo(() => {
     const favoriteSounds = categories
@@ -53,6 +56,28 @@ export function App() {
     return () => document.removeEventListener('visibilitychange', onChange);
   }, []);
 
+  useEffect(() => {
+    try {
+      navigator.mediaSession.setActionHandler('play', play);
+      navigator.mediaSession.setActionHandler('pause', pause);
+      navigator.mediaSession.setActionHandler('stop', pause);
+    } catch (error) {
+      console.log('Media session is no supported yet');
+    }
+  }, [play, pause]);
+
+  useEffect(() => {
+    if (isPlaying) {
+      navigator.mediaSession.metadata = new MediaMetadata({
+        title: 'Moodist',
+      });
+
+      navigator.mediaSession.playbackState = 'playing';
+    } else {
+      navigator.mediaSession.playbackState = 'paused';
+    }
+  }, [isPlaying]);
+
   const allCategories = useMemo(() => {
     const favorites = [];