diff --git a/frontend/index.html b/frontend/index.html
index 06d56a91..6c183692 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -73,11 +73,27 @@
           if (resp.ok) {
             const data = await resp.json();
             // data.picture is expected to be a Gravatar URL
-            document.getElementById("authSection").innerHTML = `
-              <img src="${data.picture}" alt="User Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
-              Logged in as <strong>${data.email}</strong>
-              <a href="/logout" class="ml-4 text-blue-600 hover:text-blue-800">Logout</a>
-            `;
+            const authSection = document.getElementById("authSection");
+            authSection.innerHTML = '';
+            
+            const img = document.createElement('img');
+            img.src = data.picture;
+            img.alt = 'User Avatar';
+            img.className = 'inline-block h-8 w-8 rounded-full mr-2';
+            
+            const textNode = document.createTextNode('Logged in as ');
+            const strong = document.createElement('strong');
+            strong.textContent = data.email;
+            
+            const logoutLink = document.createElement('a');
+            logoutLink.href = '/logout';
+            logoutLink.className = 'ml-4 text-blue-600 hover:text-blue-800';
+            logoutLink.textContent = 'Logout';
+            
+            authSection.appendChild(img);
+            authSection.appendChild(textNode);
+            authSection.appendChild(strong);
+            authSection.appendChild(logoutLink);
           } else {
             document.getElementById("authSection").innerHTML = 
               `<a href="/login" class="text-blue-600">Login</a>`;