diff --git a/web/static/css/main.css b/web/static/css/main.css
index af0728f..04e9754 100644
--- a/web/static/css/main.css
+++ b/web/static/css/main.css
@@ -448,6 +448,7 @@ a {
     flex: 1;
     display: flex;
     justify-content: center;
+    z-index: 1;
 }
 
 .track {
diff --git a/web/static/js/action.js b/web/static/js/action.js
index 5bc39a5..eee4c89 100644
--- a/web/static/js/action.js
+++ b/web/static/js/action.js
@@ -12,25 +12,25 @@ $(document).ready(function () {
     img.crossOrigin = "Anonymous";
     img.onload = function () {
         try {
-            const context = canvas.getContext('2d', {willReadFrequently: true});
+            const context = canvas.getContext('2d', { willReadFrequently: true });
             const width = canvas.width = img.width;
             const height = canvas.height = Math.round(img.height * 0.7); // set canvas height to 80% of image height
             const startY = Math.round((img.height - height) / 2); // calculate starting Y coordinate to center the canvas
             context.drawImage(img, 0, startY, width, height, 0, 0, width, height);
             getMainColorsFromImage(4)
-            .then(colors => {
-                $(".thumbnail-background").css({
-                    "background": `linear-gradient(-132deg, ${colors[0]}, ${colors[1]}, ${colors[2]}, ${colors[3]})`,
-                    "width": "70%",
-                    "padding-bottom": "70%",
-                });
-            })
-            .catch(error => { return });
+                .then(colors => {
+                    $(".thumbnail-background").css({
+                        "background": `linear-gradient(-132deg, ${colors[0]}, ${colors[1]}, ${colors[2]}, ${colors[3]})`,
+                        "width": "70%",
+                        "padding-bottom": "70%",
+                    });
+                })
+                .catch(error => { return });
+
+        } catch (e) {
 
-        } catch(e) {
-            
         }
-        
+
     }
 
     function getMainColorsFromImage(numColors) {
@@ -196,4 +196,5 @@ $(document).ready(function () {
         navigator.clipboard.writeText(selectedTrack?.track.uri);
         $("#context-menu").fadeOut(200);
     })
-});
+
+});
\ No newline at end of file
diff --git a/web/static/js/objects.js b/web/static/js/objects.js
index 56f5db3..7502fb5 100644
--- a/web/static/js/objects.js
+++ b/web/static/js/objects.js
@@ -226,6 +226,7 @@ class Track {
         this.length = object["info"]["length"];
         this.track_id = object["track_id"];
         this.uri = object["info"]["uri"];
+        this.source = object["info"]["sourceName"];
     }
 }
 
@@ -463,8 +464,13 @@ class Player {
             $("#author").text(currentTrack.author);
             $("#length").text(this.msToReadableTime(currentTrack.length));
             $("#image").attr("src", currentTrack.imageUrl);
+            
+            var image = "";
+            if (currentTrack.source == "youtube") {
+                image += `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`;
+            }
+            image += currentTrack.imageUrl;
 
-            var image = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/` + currentTrack.imageUrl
             if ($("#largeImage").attr("src") != image) {
                 $("#largeImage").attr("src", image);
             }