diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 39bdf70..2fa523d 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -40,7 +40,7 @@
 					</svg>
 				</button>
 				<div class="flex flex-col gap-y-1">
-					<div id="hero-playing-status" class="hidden  items-center gap-2 text-xs text-neutral-700 dark:text-neutral-300">
+					<div id="hero-playing-status" class="hidden items-center gap-2 text-xs text-neutral-700 dark:text-neutral-300">
 						<span>Sedang diputar</span>
 						<span class="loader mb-1"></span>
 					</div>
@@ -50,6 +50,7 @@
 					</div>
 				</div>
 			</div>
+			
 		</div>	
 	</div>
 </div>
diff --git a/src/lib/musicPlayer.ts b/src/lib/musicPlayer.ts
index 911185e..98ec104 100644
--- a/src/lib/musicPlayer.ts
+++ b/src/lib/musicPlayer.ts
@@ -52,6 +52,7 @@ function updatePlayState(isPlaying: boolean): void {
         musicControlPlayPauseButton.querySelector('.play-icon')?.classList.add('hidden');
         musicControlPlayPauseButton.querySelector('.pause-icon')?.classList.remove('hidden');
         heroPlayingStatus.classList.remove('hidden');
+        heroPlayingStatus.classList.add('inline-flex');
     } else {
         heroPlayPauseButton.innerHTML = '<svg class="w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M16.53,11.152l-8-5C8.221,5.958,7.833,5.949,7.515,6.125C7.197,6.302,7,6.636,7,7v10 c0,0.364,0.197,0.698,0.515,0.875C7.667,17.958,7.833,18,8,18c0.184,0,0.368-0.051,0.53-0.152l8-5C16.822,12.665,17,12.345,17,12 S16.822,11.335,16.53,11.152z"></path></svg>';
         musicControlPlayPauseButton.querySelector('.play-icon')?.classList.remove('hidden');