diff --git a/index.html b/index.html
index ddd467b..caf05b3 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,3 @@
-```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -18,9 +17,78 @@ <h1>GitHub Profile Viewer</h1>
   <script src="script.js"></script>
   <script>
     document.addEventListener('DOMContentLoaded', function() {
-      document.getElementById('search-btn').addEventListener('click', getProfile);
+      const searchBtn = document.getElementById('search-btn');
+      searchBtn.addEventListener('click', async function() {
+        const username = document.getElementById('username').value.trim();
+        if (username) {
+          try {
+            const url = `https://api.github.com/users/${username}`;
+            const response = await fetch(url);
+            const data = await response.json();
+            displayProfile(data);
+          } catch (error) {
+            console.error(error);
+            alert('Failed to load user profile');
+          }
+        } else {
+          alert('Please enter a GitHub username');
+        }
+      });
+
+      function displayProfile(profile) {
+        const profileDiv = document.getElementById('profile');
+        profileDiv.innerHTML = `
+          <h2>${profile.login}</h2>
+          <p>Public Repos: ${profile.public_repos}</p>
+          <p>Public Gists: ${profile.public_gists}</p>
+          <p>Followers: ${profile.followers}</p>
+          <p>Following: ${profile.following}</p>
+        `;
+      }
     });
   </script>
 </body>
 </html>
-```
\ No newline at end of file
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    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 || profileData.login}</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>
