diff --git a/src/lib/components/app/bottom-bar.svelte b/src/lib/components/app/bottom-bar.svelte
index 16ecefc..1b908f4 100644
--- a/src/lib/components/app/bottom-bar.svelte
+++ b/src/lib/components/app/bottom-bar.svelte
@@ -1,9 +1,7 @@
 <script>
-  import Button from "@/components/ui/button/button.svelte";
-  import Pause from '@lucide/svelte/icons/pause'
-
+  import MusicPlayer from "@/components/app/music-player.svelte";
 </script>
 
 <div class="fixed bottom-5 left-2 right-2 z-50 flex items-center justify-between p-4 bg-white/10 backdrop-blur-lg rounded-xl shadow-lg">
-  <Button size="icon"><Pause /></Button>
+  <MusicPlayer />
 </div>
\ No newline at end of file
diff --git a/src/lib/components/app/music-player.svelte b/src/lib/components/app/music-player.svelte
new file mode 100644
index 0000000..568aec0
--- /dev/null
+++ b/src/lib/components/app/music-player.svelte
@@ -0,0 +1,6 @@
+<script>
+  import { Button } from "@/components/ui/button";
+  import Pause from "@lucide/svelte/icons/pause";
+
+</script>
+<Button size="icon"><Pause /></Button>
\ No newline at end of file