diff --git a/index.html b/index.html
index 2837bdc..04fe8a4 100644
--- a/index.html
+++ b/index.html
@@ -21,8 +21,6 @@
     }
   </script>
   <style>
-
-    
     body {
       margin: 0;
       padding: 0;
@@ -45,31 +43,113 @@
       z-index: -1;
       transition: background-image 1s ease-in-out;
     }
-#album-cover {
-  display: none; /* Hide the album cover element */
-}
+
+    #album-cover {
+      display: none; /* Hide the album cover element */
+    }
 
     #album-cover img.visible {
       opacity: 1;
     }
+
     #song {
       opacity: 0;
       transition: opacity 1s ease-in-out;
     }
+
     #song.updated {
       opacity: 1;
     }
+
     #lastfm-widget, #widget {
       padding: 20px;
       color: white;
     }
-    #gear-icon {
+
+    .navbar {
+      display: flex;
+      list-style: none;
+      padding: 10px;
+      margin: 0;
+    }
+
+    .navbar li {
+      margin-right: 20px;
+    }
+
+    .dropdown {
+      position: relative;
+    }
+
+    .dropdown-content {
+      display: none;
       position: absolute;
-      top: 20px;
-      right: 20px;
-      width: 30px;
-      height: 30px;
-      cursor: url(./link.cur), auto;
+      background-color: #000000;
+      min-width: 160px;
+      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+      z-index: 1;
+    }
+
+    .dropdown:hover .dropdown-content {
+      display: block;
+    }
+
+    .dropdown-content a {
+      color: black;
+      padding: 12px 16px;
+      text-decoration: none;
+      display: block;
+    }
+
+    .dropdown-content a:hover {
+      background-color: #4c4a4a;
+    }
+
+    #settings-modal {
+      display: none;
+      position: fixed;
+      z-index: 1;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.8); /* Dark background */
+    }
+
+    #modal-content {
+      background-color: #201f1f; /* Dark theme for modal */
+      padding: 20px;
+      margin: 15% auto;
+      width: 300px;
+      border-radius: 5px;
+      color: white;
+    }
+
+    #modal-content input {
+      width: 97%;
+      padding: 8px;
+      margin: 10px 0;
+      border: 1px solid #444;
+      background-color: #222;
+      color: white;
+    }
+
+    #modal-content button {
+      padding: 10px 15px;
+      border: none;
+      cursor: pointer;
+      margin-top: 10px;
+      width: 100%;
+      background-color: #2e2e2e;
+      color: aliceblue;
+    }
+
+    #modal-content button:hover {
+      background-color: #9a9393;
+    }
+
+    #gear-icon {
+      display: none; /* Removed gear icon */
     }
   </style>
 </head>
@@ -83,7 +163,7 @@
         <li><a href="./guides">guides</a></li>
         <li><a href="./media">media</a></li>
         <li class="dropdown">
-          <a href="#" class="dropbtn">disguise</a>
+          <a href="#">disguise</a>
           <div class="dropdown-content">
             <a href="#" data-title="prigoana.lol" data-icon="./favicon.png">Base</a>
             <a href="#" data-title="Home" data-icon="https://www.gstatic.com/classroom/ic_product_classroom_144.png">Classroom</a>
@@ -91,25 +171,28 @@
             <a href="#" data-title="Google Docs" data-icon="https://ssl.gstatic.com/docs/documents/images/kix-favicon-2023q4.ico">Docs</a>
           </div>
         </li>
+        <li><a href="#" onclick="openSettingsModal()">settings</a></li>
       </ul>
     </div>
   </header>
-  <svg id="gear-icon" onclick="openUsernamePrompt()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-    <defs>
-      <filter id="drop-shadow" x="-50%" y="-50%" width="200%" height="200%">
-        <feDropShadow dx="10" dy="10" stdDeviation="15" flood-color="black"/>
-      </filter>
-    </defs>
-    <path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" filter="url(#drop-shadow)"/>
-  </svg><p style="height: 210px;"></p>
-  <div id="app"></div><p style="height: 190px;"></p>
+
+  <div id="settings-modal">
+    <div id="modal-content"><center>
+      <h3>Update Last.fm Username</h3></center>
+      <input type="text" id="username-input" placeholder="Enter your Last.fm username" value="">
+      <button onclick="updateUsername()">Update</button>
+      <button onclick="closeSettingsModal()">Cancel</button>
+    </div>
+  </div>
+<p style="height: 200px;"></p>
+  <div id="app"></div><p style="height: 160px;"></p>
   <div id="lastfm-widget"></div>
   <div id="widget">
     <p>Last played song</p>
     <span id="song"></span><br>
     <div id="album-cover"></div>
   </div>
-  
+
   <script src="https://unpkg.com/webamp/built/webamp.bundle.min.js"></script>
   <script src="https://unpkg.com/butterchurn/lib/butterchurn.min.js"></script>
   <script src="https://unpkg.com/butterchurn-presets/lib/butterchurnPresets.min.js"></script>
@@ -122,7 +205,7 @@
     const backgroundElement = document.getElementById('background');
     const placeholderImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=";
     let previousAlbumImage = "";
-  
+
     function updateSongDisplay(track) {
       const { name, artist, album, image } = track;
       songElement.classList.remove('updated');
@@ -145,7 +228,7 @@
         backgroundElement.style.backgroundImage = `url(${albumImage})`;
       }
     }
-  
+
     async function fetchLastPlayedSong() {
       try {
         const response = await fetch(url);
@@ -158,25 +241,27 @@
         console.error('Error fetching LastFM data:', error);
       }
     }
-  
+
     fetchLastPlayedSong();
     setInterval(fetchLastPlayedSong, 3000);
-  
-    function openUsernamePrompt() {
-      const newUsername = prompt('Enter your Last.fm username:', username);
+
+    function openSettingsModal() {
+      document.getElementById('settings-modal').style.display = 'block';
+    }
+
+    function closeSettingsModal() {
+      document.getElementById('settings-modal').style.display = 'none';
+    }
+
+    function updateUsername() {
+      const newUsername = document.getElementById('username-input').value;
       if (newUsername && newUsername !== username) {
         username = newUsername;
         localStorage.setItem('lastfmUsername', username);
         window.location.reload();
       }
     }
-  
-    if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('./service-worker.js').catch(error => 
-        console.log('Service Worker registration failed:', error)
-      );
-    }
-  
+
     document.querySelectorAll('.dropdown-content a[data-title]').forEach(element => {
       element.addEventListener('click', function (event) {
         event.preventDefault();
@@ -186,22 +271,6 @@
         document.getElementById('favicon').href = newIcon;
       });
     });
-  
-    // New onTrackDidChange functionality
-    const unsubscribe = webamp.onTrackDidChange((trackInfo) => {
-      if (trackInfo && trackInfo.metaData) {
-        const { title = "Unknown Title", artist = "Unknown Artist" } = trackInfo.metaData;
-        console.log("New track playing:", { title, artist });
-      } else if (trackInfo) {
-        console.log("New track URL:", trackInfo.url);
-      } else {
-        console.log("No track is currently playing.");
-      }
-    });
-  
-    // Example: Unsubscribe when no longer needed
-    // unsubscribe();
   </script>
-  
 </body>
 </html>