diff --git a/static/js/citydetails.js b/static/js/citydetails.js
index a6e84d3..ad86494 100644
--- a/static/js/citydetails.js
+++ b/static/js/citydetails.js
@@ -182,8 +182,9 @@ function loadCityDetails() {
 $(document).ready( function() {
     document.getElementById('downloadButton').addEventListener('click', async () => {
     // const filename = 'testfilename';
-    const username = document.getElementById("userName").innerText;
-     
+ 
+    const username = document.getElementById("userName").dataset.username;
+ 
 
     const filename = getCityDetails()+' '+ username +'.xlsx';
 console.log(filename);
diff --git a/static/js/diag.js b/static/js/diag.js
index 351e1f4..2355379 100644
--- a/static/js/diag.js
+++ b/static/js/diag.js
@@ -313,7 +313,7 @@ $('#copyText').click(function () {
 
     saveToLocalStorage();
 
-    const userName = document.getElementById("userName").innerText;
+    const userName = document.getElementById("userName").dataset.username;
     console.log("userName ", userName);
      
     
diff --git a/views/home.ejs b/views/home.ejs
index dfcfed5..a79c0ef 100644
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -88,9 +88,7 @@
                 <div class="user-details">
                     <img src="<%= avatar %>" alt="User Photo" class="user-photo" style="width: 60px; height: 60px;">
                     <!-- Larger photo in dropdown -->
-                    <div id="userName" class="user-name">
-                        <%= username %>
-                    </div> <!-- Username -->
+                    <div id="userName" class="user-name" data-username="<%= username %>">Display Username</div>
                 </div>
                 <a class="dropdown-item" href="#"><i class="fa-solid fa-user"></i>&nbsp Profile</a>
                 <a class="dropdown-item" onclick="toggleOptionsBox()" href="#"><i class="fa-solid fa-gear"></i>&nbsp