diff --git a/screenshots/screenshot.webp b/screenshots/screenshot.webp
index 7694c5a..75ad114 100644
Binary files a/screenshots/screenshot.webp and b/screenshots/screenshot.webp differ
diff --git a/src/main.rs b/src/main.rs
index 8166331..da3736b 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -33,18 +33,21 @@ async fn get_queue(_req: tide::Request<()>) -> tide::Result {
 
 #[derive(Template)]
 #[template(path = "player.html")]
-struct CurrentTemplate {
+struct PlayerTemplate {
     song: Option<mpdrs::Song>,
     name: Option<String>,
+    state: mpdrs::State,
 }
 
 async fn get_player(_req: tide::Request<()>) -> tide::Result {
     let mut mpd = mpd::connect()?;
     let song = mpd.currentsong()?;
+    let state = mpd.status()?.state;
 
-    let mut template = CurrentTemplate {
+    let mut template = PlayerTemplate {
         song: song.clone(),
         name: None,
+        state,
     };
 
     if let Some(song) = song {
diff --git a/templates/player.html b/templates/player.html
index c0ac05e..7b8edd8 100644
--- a/templates/player.html
+++ b/templates/player.html
@@ -41,14 +41,19 @@
       hx-post="/previous"
       class="control material-symbols-outlined" role="button" title="Previous track"
     >skip_previous</button>
-    <button 
-      hx-post="/play"
-      class="control material-symbols-outlined" role="button" title="Play"
-    >play_arrow</button>
+
+    {% if state == mpdrs::State::Play %}
     <button
       hx-post="/pause"
       class="control material-symbols-outlined" role="button" title="Pause"
     >pause</button>
+    {% else %}
+    <button 
+      hx-post="/play"
+      class="control material-symbols-outlined" role="button" title="Play"
+    >play_arrow</button>
+    {% endif %}
+    
     <button 
       hx-post="/next"
       class="control material-symbols-outlined" role="button" title="Next track"