diff --git a/img/forest_river.mp3 b/audio/forest_river.mp3
similarity index 100%
rename from img/forest_river.mp3
rename to audio/forest_river.mp3
diff --git a/audio/orchard_glen.mp3 b/audio/orchard_glen.mp3
new file mode 100644
index 0000000..2297d50
Binary files /dev/null and b/audio/orchard_glen.mp3 differ
diff --git a/index.html b/index.html
index 62bf0f9..1e86126 100644
--- a/index.html
+++ b/index.html
@@ -31,12 +31,18 @@
   <main>
     <article>
       <span id='tagline'>Humble home of user gome</span>
-      <div class='music-box' id='music-box'>
-        <audio id='gomesong' src='img/forest_river.mp3' loop></audio>
+      <div class='music-box'>
+        <audio src='audio/forest_river.mp3' loop></audio>
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pause"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
         Play a song
       </div>
+      <div class='music-box'>
+        <audio src='audio/orchard_glen.mp3' loop></audio>
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pause"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
+        Play another song
+      </div>
     </article>
     <article id='wotd'>
       <h2 class='title'></h2>
diff --git a/js/gomesong.js b/js/gomesong.js
index 26429fe..2678c2b 100644
--- a/js/gomesong.js
+++ b/js/gomesong.js
@@ -1,11 +1,22 @@
-const gomesong = document.getElementById('gomesong');
-const music_box = document.getElementById('music-box');
-music_box.addEventListener('click', () => {
-  if (gomesong.paused) {
-    music_box.classList.add('playing');
-    gomesong.play();
-  } else {
-    music_box.classList.remove('playing');
-    gomesong.pause();
-  }
-});
+function get_audio(music_box) {
+  return music_box.querySelector('audio');
+}
+
+const music_boxes = document.getElementsByClassName('music-box');
+for (const music_box of music_boxes) {
+  music_box.addEventListener('click', () => {
+    const audio = get_audio(music_box);
+    if (audio.paused) {
+      // pause all other music boxes
+      for (const music_box of music_boxes) {
+        music_box.classList.remove('playing');
+        get_audio(music_box).pause();
+      }
+      music_box.classList.add('playing');
+      audio.play();
+    } else {
+      music_box.classList.remove('playing');
+      audio.pause();
+    }
+  });
+}