diff --git a/src/components/MusicPlayer.astro b/src/components/MusicPlayer.astro
index ef12ec9..f6d6fd2 100644
--- a/src/components/MusicPlayer.astro
+++ b/src/components/MusicPlayer.astro
@@ -27,12 +27,12 @@ const {
 ---
 
 <section class={sectionClass}>
-  <div class="relative w-[416px] h-[416px] mb-4">
+  <div class="mb-4 items-center justify-center flex">
     <Image
       id="player-image"
       src={me}
       alt="isabel roses"
-      class="absolute inset-0 w-full h-full rounded-sm transition-opacity duration-500 ease-in-out opacity-100"
+      class="rounded-sm transition duration-500 ease-in-out"
       width={416}
       height={416}
       loading="eager"
@@ -42,7 +42,7 @@ const {
       posts && (
         <div
           id="queue-view"
-          class="absolute inset-0 opacity-0 pointer-events-none transition-opacity duration-500 ease-in-out overflow-y-auto"
+          class="w-[416px] h-[416px] inset-0 hidden overflow-y-auto"
         >
           <ul class="flex flex-col p-2">
             {posts.entries().map(([i, post]) => (
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 7424dca..bc170d4 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -61,15 +61,11 @@ const nextSlug = posts[posts.indexOf(post) + 1]?.id || null;
     showingQueue = !showingQueue;
 
     if (showingQueue) {
-      playerImage.classList.remove("opacity-100");
-      playerImage.classList.add("opacity-0", "pointer-events-none");
-      queueView.classList.remove("pointer-events-none");
-      queueView.classList.add("opacity-100");
+      queueView.classList.remove("hidden");
+      playerImage.classList.add("hidden");
     } else {
-      queueView.classList.remove("opacity-100");
-      queueView.classList.add("opacity-0", "pointer-events-none");
-      playerImage.classList.remove("pointer-events-none");
-      playerImage.classList.add("opacity-100");
+      playerImage.classList.remove("hidden");
+      queueView.classList.add("hidden");
     }
   });
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d4dc935..6d54e30 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -19,7 +19,7 @@ import { SITE_TITLES, SITE_DESCRIPTIONS } from "@lib/consts";
   image="/index.png"
 >
   <div
-    class="flex md:flex-row flex-col items-start px-6 gap-24 mt-52 mb-18 md:my-0"
+    class="flex md:flex-row flex-col items-start px-6 gap-24 mt-18 mb-18 md:my-0"
   >
     <MusicPlayer
       nowPlaying="nix"