diff --git a/index.html b/index.html
index ddd467b..f3d412d 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,3 @@
-```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -17,10 +16,46 @@ <h1>GitHub Profile Viewer</h1>
 
   <script src="script.js"></script>
   <script>
-    document.addEventListener('DOMContentLoaded', function() {
-      document.getElementById('search-btn').addEventListener('click', getProfile);
+    document.addEventListener('DOMContentLoaded', async () => {
+      const searchBtn = document.getElementById('search-btn');
+      searchBtn.addEventListener('click', getProfile);
     });
+
+    function getProfile() {
+      const username = document.getElementById('username').value.trim();
+      if (username) {
+        const profileDiv = document.getElementById('profile');
+        profileDiv.innerHTML = '';
+        const xhr = new XMLHttpRequest();
+        xhr.onload = function() {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            const profileData = JSON.parse(xhr.responseText);
+            renderProfile(profileData);
+          } else {
+            profileDiv.innerHTML = `Error: ${xhr.statusText}`;
+          }
+        };
+        xhr.onerror = function() {
+          profileDiv.innerHTML = 'Error: Network request failed';
+        };
+        xhr.open('GET', `https://api.github.com/users/${username}`, true);
+        xhr.send();
+      } else {
+        alert('Please enter a GitHub username');
+      }
+    }
+
+    function renderProfile(profileData) {
+      const profileDiv = document.getElementById('profile');
+      const profileHTML = `
+        <h2>${profileData.name}</h2>
+        <p>Username: ${profileData.login}</p>
+        <p>Profile URL: <a href="${profileData.html_url}">${profileData.html_url}</a></p>
+        <p>Email: ${profileData.email}</p>
+        <p>Bio: ${profileData.bio}</p>
+      `;
+      profileDiv.innerHTML = profileHTML;
+    }
   </script>
 </body>
 </html>
-```
\ No newline at end of file
