diff --git a/frontend/public/BgMusic.mp3 b/frontend/public/BgMusic.mp3
new file mode 100644
index 0000000..996135a
Binary files /dev/null and b/frontend/public/BgMusic.mp3 differ
diff --git a/frontend/public/muteAudio.png b/frontend/public/muteAudio.png
new file mode 100644
index 0000000..1899695
Binary files /dev/null and b/frontend/public/muteAudio.png differ
diff --git a/frontend/public/playAudio.png b/frontend/public/playAudio.png
new file mode 100644
index 0000000..85faf1e
Binary files /dev/null and b/frontend/public/playAudio.png differ
diff --git a/frontend/src/components/Audio/AudioPlayer.tsx b/frontend/src/components/Audio/AudioPlayer.tsx
new file mode 100644
index 0000000..752f2f5
--- /dev/null
+++ b/frontend/src/components/Audio/AudioPlayer.tsx
@@ -0,0 +1,39 @@
+import { useState, useRef } from "react";
+import playIcon from "../../../public/playAudio.png"; // Adjust the path as needed
+import muteIcon from "../../../public/muteAudio.png"; // Adjust the path as needed
+import audioFile from "../../../public/BgMusic.mp3"; // Adjust the path as needed
+
+const AudioControl = () => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  const toggleAudio = () => {
+    const audio = audioRef.current;
+    if (audio) {
+      if (isPlaying) {
+        audio.pause();
+      } else {
+        audio.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
+  return (
+    <div className="fixed bottom-4 right-6">
+      <button
+        onClick={toggleAudio}
+        className="bg-transparent border-none p-0 m-0 rounded-full mt-4"
+      >
+        <img
+          src={isPlaying ? playIcon : muteIcon}
+          alt={isPlaying ? "play" : "mute"}
+          className="w-12 h-12"
+        />
+      </button>
+      <audio ref={audioRef} src={audioFile} loop />
+    </div>
+  );
+};
+
+export default AudioControl;
diff --git a/frontend/src/components/home/Home.tsx b/frontend/src/components/home/Home.tsx
index 6fd2143..b6ca265 100644
--- a/frontend/src/components/home/Home.tsx
+++ b/frontend/src/components/home/Home.tsx
@@ -7,6 +7,7 @@ import p5 from "../../../public/p5.png";
 import p6 from "../../../public/p6.png";
 import p7 from "../../../public/p7.png";
 import p8 from "../../../public/p8.png";
+import AudioControl from "../Audio/AudioPlayer";
 
 const pokemonImages = [p1, p2, p3, p4, p5, p6, p7, p8];
 
@@ -25,6 +26,7 @@ const Home = () => {
       <a href="/Tutorial" className="text-white gba text-xl">
         How to contribute
       </a>
+      <AudioControl/>
     </div>
   );
 };