diff --git a/src/components/sound/sound.tsx b/src/components/sound/sound.tsx
index c6fc1eb..eb599b8 100644
--- a/src/components/sound/sound.tsx
+++ b/src/components/sound/sound.tsx
@@ -43,9 +43,9 @@ export function Sound({
 
   useEffect(() => {
     if (isSelected && isPlaying && functional) {
-      sound?.play();
+      sound?.fadeIn();
     } else {
-      sound?.pause();
+      sound?.fadeOut();
     }
   }, [isSelected, sound, isPlaying, functional]);
 
diff --git a/src/hooks/use-sound.ts b/src/hooks/use-sound.ts
index eb1e501..ff9e881 100644
--- a/src/hooks/use-sound.ts
+++ b/src/hooks/use-sound.ts
@@ -62,9 +62,28 @@ export function useSound(
     if (sound) sound.pause();
   }, [sound]);
 
+  const fadeIn = useCallback(() => {
+    if (sound) {
+      if (!sound.playing()) {
+        play();
+        sound.fade(0, options.volume || 0.5, 1000);
+      }
+    }
+  }, [play, sound, options.volume]);
+
+  const fadeOut = useCallback(() => {
+    if (sound) {
+      sound.fade(options.volume || 0.5, 0, 1000);
+
+      setTimeout(() => {
+        sound.pause();
+      }, 1200);
+    }
+  }, [sound, options.volume]);
+
   const control = useMemo(
-    () => ({ isLoading, pause, play, stop }),
-    [play, stop, pause, isLoading],
+    () => ({ fadeIn, fadeOut, isLoading, pause, play, stop }),
+    [play, stop, pause, isLoading, fadeIn, fadeOut],
   );
 
   return control;