diff --git a/.syncedlyrics/musixmatch_token.json b/.syncedlyrics/musixmatch_token.json
index bf89c99..bb2ffc8 100644
--- a/.syncedlyrics/musixmatch_token.json
+++ b/.syncedlyrics/musixmatch_token.json
@@ -1 +1 @@
-{"token": "2405094b2701c575f2a99e2a27bcc795a1413ae719c296da64cae9", "expiration_time": 1715289885}
\ No newline at end of file
+{"token": "2405132d7b80d1a072129196642e3c2675e8f036f7663fa58037a0", "expiration_time": 1715576057}
\ No newline at end of file
diff --git a/templates/webapp.html b/templates/webapp.html
index b3bd637..25d29d3 100644
--- a/templates/webapp.html
+++ b/templates/webapp.html
@@ -8,9 +8,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
 <style>
     .animated-background {
-        transition: background-color 1s ease-in-out; /* add a transition effect */
+        transition: background-color 1s ease-in-out, margin-left 0.5s; /* add a transition effect */
         background-color: var(--color); /* initial background color */
-        transition: margin-left 0.5s; /* add a transition effect */
     }
     .progress-container {
         position: fixed;
@@ -102,39 +101,45 @@
 </head>
 <body class="animated-background">
     <!-- <link href="http://127.0.0.1:8888/font" rel="stylesheet"> -->
-    <div class="total">
-        <div class="leftside" id="leftpage">
-            <a href="javascript:void(0)" onclick="closeNav()">Close</a>
-        </div>
-        <span onclick="openNav()">Swipe</span>
-        <div class="left">
-            <img id="image" src="{{ data['image'] }}" alt="Song Image" type="image/jpeg" style="max-width: 330px; padding-left: 25%;">
-            <video width="330" autoplay muted playsinline loop id="canvas_url" src="{{ data['canvas_url'] }}" type="video/mp4" style="display: none; padding-left: 10%;"></video>
-        </div>
-        <div class="middle">
-            <p id="name" class="song-text">{{ data['name'] }}</p>
-            <p id="artist" class="artist-text">{{ data['artist'] }}</p>
-            <!-- <p id="album" class="song-info">{{ data['album'] }}</p>
-            <p id="progress_ms">{{ data['progress_ms'] }}</p>
-            <p id="duration_ms">{{ data['duration_ms'] }}</p> -->
-            <p>
-            <div class="buttons">
-                <a><img id="previous" src="http://127.0.0.1:8888/icons/previous.png" class="buttons-individual"></a>
-                <a><img id="playpause" src="http://127.0.0.1:8888/icons/play.png" class="buttons-individual"></a>
-                <a><img id="next" src="http://127.0.0.1:8888/icons/next.png" class="buttons-individual"></a>
-                <a><img id="like" src="http://127.0.0.1:8888/icons/heart.png" class="buttons-individual" style="display:none;"></a>
+        <div class="total">
+            <div class="leftside" id="leftpage">
+                <a href="javascript:void(0)" onclick="closeNav()">Close</a>
+                <div class="total">
+                    <div class="left">
+
+                    </div>
+                    <div class="middle">
+                        <input type="range" id="volume">
+                    </div>
+                    <div class="right">
+
+                    </div>
+                </div>
+            </div>
+            <span onclick="openNav()">Swipe</span>
+            <div class="left">
+                <img id="image" src="{{ data['image'] }}" alt="Song Image" type="image/jpeg" style="max-width: 330px; padding-left: 25%;">
+                <video width="330" autoplay muted playsinline loop id="canvas_url" src="{{ data['canvas_url'] }}" type="video/mp4" style="display: none; padding-left: 10%;"></video>
+            </div>
+            <div class="middle">
+                <p id="name" class="song-text">{{ data['name'] }}</p>
+                <p id="artist" class="artist-text">{{ data['artist'] }}</p>
+                <!-- <p id="album" class="song-info">{{ data['album'] }}</p>
+                <p id="progress_ms">{{ data['progress_ms'] }}</p>
+                <p id="duration_ms">{{ data['duration_ms'] }}</p> -->
+                <p>
+                <div class="buttons">
+                    <a><img id="previous" src="http://127.0.0.1:8888/icons/previous.png" class="buttons-individual"></a>
+                    <a><img id="playpause" src="http://127.0.0.1:8888/icons/play.png" class="buttons-individual"></a>
+                    <a><img id="next" src="http://127.0.0.1:8888/icons/next.png" class="buttons-individual"></a>
+                    <a><img id="like" src="http://127.0.0.1:8888/icons/heart.png" class="buttons-individual" style="display:none;"></a>
+                </div>
+                </p>
+            </div>
+            <div class="right">
+                <p id="lyric" class="lyrics">{{ data['lyric'] }}</p>
             </div>
-            </p>
         </div>
-        <div class="right">
-            <p id="lyric" class="lyrics">{{ data['lyric'] }}</p>
-        </div>
-    </div>
-    <div style="padding-top: 5px;">
-        <div id="progress_container" class="progress-container">
-            <div id="progress_bar" class="progress-bar"></div>
-        </div>
-    </div>
     <script>
         let id, is_playing, is_liked, duration_ms, canvas_url, lyrics, progress_ms;
         // Function to update the values every second
@@ -276,16 +281,19 @@
             songText = document.querySelector('.song-text');
             artistText = document.querySelector('.artist-text');
             buttonsDiv = document.querySelector('.buttons');
+            lyricsDiv = document.querySelector('.lyrics');
             if (Math.sqrt(0.299 * (color[0] ** 2) + 0.587 * (color[1] ** 2) + 0.114 * (color[2] ** 2)) > 170) {
                 songText.style.color = 'black';
                 artistText.style.color = 'black';
                 buttonsDiv.style.filter = 'invert(100%)';
+                lyricsDiv.style.color = 'black';
                 darkColor = [color[0] - 75, color[1] - 75, color[2] - 75]
                 document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + darkColor + ')';
             } else {
                 songText.style.color = 'white';
                 artistText.style.color = 'white';
                 buttonsDiv.style.filter = '';
+                lyricsDiv.style.color = 'white';
                 lightColor = [color[0] + 75, color[1] + 75, color[2] + 75]
                 document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + lightColor + ')';
             }
@@ -362,4 +370,11 @@
         });
     </script>
 </body>
+<footer>
+    <div style="padding-top: 5px;">
+        <div id="progress_container" class="progress-container">
+            <div id="progress_bar" class="progress-bar"></div>
+        </div>
+    </div>
+</footer>
 </html>
\ No newline at end of file
diff --git a/todo.txt b/todo.txt
index 4415d8d..438fbcd 100644
--- a/todo.txt
+++ b/todo.txt
@@ -14,4 +14,7 @@ to js app, but maybe have js app do it from album art, explore which is better.
 CANT GET LYRICS VAR TO BE ACCESSED OUTSIDE OF FUNCTION. AHHHH
 
 MAKE album/canvas 33.3%, middle 33.3%, lyrics 33.3% to make sure nothing
-moves around if the album switches to a canvas
\ No newline at end of file
+moves around if the album switches to a canvas
+
+have animation for going to left side page not push content to the right, have it
+move the content (album, controls, song info, etc.) to the bottom with a nice animation.
\ No newline at end of file
