diff --git a/.syncedlyrics/musixmatch_token.json b/.syncedlyrics/musixmatch_token.json
index 2818718..71160cc 100644
--- a/.syncedlyrics/musixmatch_token.json
+++ b/.syncedlyrics/musixmatch_token.json
@@ -1 +1 @@
-{"token": "240425a54f5df91735a14b241dcfb1e5df28f942d95b9cad8ea6a4", "expiration_time": 1714086845}
\ No newline at end of file
+{"token": "240507e3d5a3f0210db7ad74bb1eebef70713e8e38024240de58b0", "expiration_time": 1715113140}
\ No newline at end of file
diff --git a/spotifycontroller.py b/spotifycontroller.py
index e3c710e..da52687 100644
--- a/spotifycontroller.py
+++ b/spotifycontroller.py
@@ -103,6 +103,7 @@ def appdata():
 
     currently_playing = requests.get("https://api.spotify.com/v1/me/player/currently-playing", headers=user_headers)
     
+    # needs to add an if statement that says if song is not playing then, becuase when nothing is playing the json response is different.
     if currently_playing.content:
         if currently_playing.json()["is_playing"] is True and currently_playing.json()["item"]["id"] == request.args.get('id'):
                 print("QUICK" + str(time.time() - stime))
diff --git a/templates/webapp.html b/templates/webapp.html
index 2a4199f..b44b0f3 100644
--- a/templates/webapp.html
+++ b/templates/webapp.html
@@ -7,6 +7,20 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
 <style>
+    :root {
+        --start-color: #d734e9;
+        --end-color: #FFFFFF;
+    }
+    @keyframes bg-fade {
+        from { background-color: var(--start-color); }
+        to { background-color: var(--end-color); }
+    }
+    body {
+        background-color: #d734e9
+    }
+    .animateBackground {
+        animation: bg-fade 4s;
+    }
     .progress-container {
         position: fixed;
         bottom: 8px;
@@ -229,15 +243,37 @@
             const colorThief = new ColorThief();
             const img = document.getElementById('image');
             img.crossOrigin = 'Anonymous';
+//set property: 
 
+document.documentElement.style
+    .setProperty('--my-variable-name', '100px');
+
+//get property
+
+getComputedStyle(document.documentElement)
+    .getPropertyValue('--my-variable-name'); // returns value
             if (img.complete) {
                 const color = colorThief.getColor(img);
-                document.body.style.backgroundColor = 'rgb(' + color + ')';
+                oldColor = getComputedStyle(document.documentElement)
+                    .getPropertyValue('--end-color');
+                document.documentElement.style
+                    .setProperty('--start-color', oldColor);
+                document.documentElement.style
+                    .setProperty('--end-color', color);
+                document.body.classList.add('animateBackground');
+                // document.body.style.backgroundColor = 'rgb(' + color + ')';
                 getLuminance(color);
             } else {
                 img.addEventListener('load', function() {
                     const color = colorThief.getColor(img);
-                    document.body.style.backgroundColor = 'rgb(' + color + ')';
+                    oldColor = getComputedStyle(document.documentElement)
+                        .getPropertyValue('--end-color');
+                    document.documentElement.style
+                        .setProperty('--start-color', oldColor);
+                    document.documentElement.style
+                        .setProperty('--end-color', color);
+                    document.body.classList.add('animateBackground');
+                    // document.body.style.backgroundColor = 'rgb(' + color + ')';
                     getLuminance(color);
                 });
             }