diff --git a/src/main.rs b/src/main.rs
index cec216a..b443379 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -7,7 +7,7 @@ struct Song {
     id: u32,
     title: &'static str,
     artist: &'static str,
-    duration: &'static str,
+    duration_secs: u32,
     url: &'static str,
 }
 
@@ -19,70 +19,70 @@ pub(crate) fn songs() -> Vec<Song> {
             id: 1,
             title: "SoundHelix Song 1",
             artist: "SoundHelix",
-            duration: "6:13",
+            duration_secs: 373,
             url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
         },
         Song {
             id: 2,
             title: "SoundHelix Song 2",
             artist: "SoundHelix",
-            duration: "6:08",
+            duration_secs: 368,
             url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
         },
         Song {
             id: 3,
             title: "SoundHelix Song 3",
             artist: "SoundHelix",
-            duration: "6:18",
+            duration_secs: 378,
             url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3",
         },
         Song {
             id: 4,
             title: "SoundHelix Song 4",
             artist: "SoundHelix",
-            duration: "4:54",
+            duration_secs: 294,
             url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3",
         },
         Song {
             id: 5,
             title: "SoundHelix Song 5",
             artist: "SoundHelix",
-            duration: "6:42",
+            duration_secs: 402,
             url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3",
         },
         Song {
             id: 6,
             title: "SoundHelix Song 6",
             artist: "SoundHelix",
-            duration: "6:25",
+            duration_secs: 385,
             url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-6.mp3",
         },
         Song {
             id: 7,
             title: "SoundHelix Song 7",
             artist: "SoundHelix",
-            duration: "5:59",
+            duration_secs: 359,
             url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-7.mp3",
         },
         Song {
             id: 8,
             title: "SoundHelix Song 8",
             artist: "SoundHelix",
-            duration: "5:13",
+            duration_secs: 313,
             url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3",
         },
         Song {
             id: 9,
             title: "SoundHelix Song 9",
             artist: "SoundHelix",
-            duration: "4:30",
+            duration_secs: 270,
             url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-9.mp3",
         },
         Song {
             id: 10,
             title: "SoundHelix Song 10",
             artist: "SoundHelix",
-            duration: "6:01",
+            duration_secs: 361,
             url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-10.mp3",
         },
     ]
diff --git a/static/js/script.js b/static/js/script.js
index 17ae110..30c0c04 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -1,4 +1,19 @@
 console.log("RustTune loaded");
+
+/**
+ * Format an integer number of seconds into a "M:SS" display string.
+ * The backend returns duration_secs as a plain number (e.g. 373);
+ * this helper converts it to "6:13" for display in the UI.
+ *
+ * @param {number} secs - Total duration in seconds
+ * @returns {string} Formatted duration, e.g. "6:13"
+ */
+function formatDuration(secs) {
+  const m = Math.floor(secs / 60);
+  const s = String(secs % 60).padStart(2, "0");
+  return `${m}:${s}`;
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   console.log("RustTune volume controller initialized");
 
@@ -19,16 +34,16 @@ document.addEventListener("DOMContentLoaded", () => {
 
   volumeSlider.addEventListener("input", (e) => {
     const val = parseFloat(e.target.value);
-    
+
     if (val > 0) {
       savedVolume = val;
     }
-    
+
     updateIcon(val);
   });
 
   muteBtn.addEventListener("click", (e) => {
-    e.stopPropagation(); 
+    e.stopPropagation();
 
     const currentVal = parseFloat(volumeSlider.value);
 
@@ -41,4 +56,28 @@ document.addEventListener("DOMContentLoaded", () => {
       updateIcon(savedVolume);
     }
   });
+
+  // Populate song list from /api/songs.
+  // duration_secs is a plain integer from the API; formatDuration renders it as "M:SS".
+  const songList = document.querySelector(".song-list");
+  if (songList) {
+    fetch("/api/songs")
+      .then((res) => res.json())
+      .then((songs) => {
+        songList.innerHTML = songs
+          .map(
+            (song) => `
+          <li class="song-card">
+            <div class="song-cover">🎵</div>
+            <div class="song-meta">
+              <p class="song-title">${song.title}</p>
+              <p class="song-artist">${song.artist}</p>
+            </div>
+            <span class="song-duration">${formatDuration(song.duration_secs)}</span>
+          </li>`
+          )
+          .join("");
+      })
+      .catch((err) => console.error("Failed to load songs:", err));
+  }
 });
\ No newline at end of file