diff --git a/static/app.js b/static/app.js
index 37a76d9..982ef7e 100644
--- a/static/app.js
+++ b/static/app.js
@@ -1,6 +1,7 @@
 // Define global variables to track music files and the current index.
 let currentMusicFiles = []; // Array of objects with at least { path, index }
 let currentMusicIndex = -1; // Index of the current music file
+let currentTrackPath  = "";
 
 // Helper function: decode each segment then re-encode to avoid double encoding.
 function encodeSubpath(subpath) {
@@ -15,6 +16,21 @@ function encodeSubpath(subpath) {
 let currentGalleryImages = [];
 
 
+function paintFile() {
+    // Highlight the currently playing file
+    if (currentTrackPath) {
+      const currentMusicFile = currentMusicFiles.find(file => file.path === currentTrackPath);
+      if (currentMusicFile) {
+        const currentMusicFileElement = document.querySelector(`.play-file[data-url="${currentMusicFile.path}"]`);
+        if (currentMusicFileElement) {
+          currentMusicFileElement.closest('.file-item').classList.add('currently-playing');
+        }
+      } else {
+        console.log('Current track not found in the updated list.');
+      }
+    }
+  }
+
 function renderContent(data) {
 
   // Render breadcrumbs, directories (grid view when appropriate), and files.
@@ -62,9 +78,7 @@ function renderContent(data) {
         symbol = '🖼️';
       }
       const indexAttr = file.file_type === 'music' ? ` data-index="${currentMusicFiles.length - 1}"` : '';
-      // preserve currently-playing class during reloads
-      const isCurrentlyPlaying = file.file_type === 'music' && currentMusicIndex === currentMusicFiles.length - 1 ? ' currently-playing' : '';
-      contentHTML += `<li class="file-item ${isCurrentlyPlaying}">
+      contentHTML += `<li class="file-item">
                 <a href="#" class="play-file"${indexAttr} data-url="${file.path}" data-file-type="${file.file_type}">${symbol} ${file.name.replace('.mp3', '')}</a>`;
       if (file.has_transcript) {
         contentHTML += `<a href="#" class="show-transcript" data-url="${file.transcript_url}" title="Show Transcript">&#128196;</a>`;
@@ -132,6 +146,7 @@ function loadDirectory(subpath) {
     .then(response => response.json())
     .then(data => {
       renderContent(data);
+      paintFile();
       return data; // return data for further chaining
     })
     .catch(error => {
@@ -250,6 +265,7 @@ document.querySelectorAll('.play-file').forEach(link => {
         audioPlayer.src = mediaUrl;
         audioPlayer.load();
         await audioPlayer.play();
+        currentTrackPath = relUrl;
         playerButton.innerHTML = pauseIcon;
 
         // Process file path for display.
@@ -412,8 +428,6 @@ if ('mediaSession' in navigator) {
 }
 
 document.getElementById('globalAudio').addEventListener('ended', () => {
-  // Save the current track's path (if any)
-  const currentTrackPath = currentMusicFiles[currentMusicIndex] ? currentMusicFiles[currentMusicIndex].path : null;
   
   reloadDirectory().then(() => {
     
@@ -436,7 +450,7 @@ document.getElementById('globalAudio').addEventListener('ended', () => {
   });
 });
 
-document.addEventListener("DOMContentLoaded", function() {
-  // Automatically reload every 5 minutes (300,000 milliseconds)
-  setInterval(reloadDirectory, 300000);
-});
\ No newline at end of file
+// document.addEventListener("DOMContentLoaded", function() {
+//   // Automatically reload every 5 minutes (300,000 milliseconds)
+//   setInterval(reloadDirectory, 300000);
+// });
\ No newline at end of file