diff --git a/index.html b/index.html
index db97cb4..84f74e2 100644
--- a/index.html
+++ b/index.html
@@ -1,43 +1,51 @@
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />    
-    <link rel="stylesheet" href="style.css">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="style.css" />
     <title>Basic Layout Web</title>
   </head>
   <body>
     <h1>Hello Ges</h1>
     <p>Task 1 SCC 2020</p>
-    
-    <br><br>
-    <div class="box" id="imaget"></div>
-
+    <div class="contributors-section">
+      <h2>Contributors</h2>
+      <div class="contributors" id="contributors"></div>
+    </div>
     <script>
-      async function get() {
-        const res = await fetch(
-          'https://api.github.com/repos/rafiudd/basic-layout-web/contributors',
-        );
-        const data = await res.json();
-        console.log(data);
+      async function fetchContributors() {
+        try {
+          const response = await fetch(
+            'https://api.github.com/repos/rafiudd/basic-layout-web/contributors'
+          );
+          if (!response.ok) throw new Error('Failed to fetch contributors');
+          const contributors = await response.json();
 
-        let img = document.getElementById('imaget');
+          const container = document.getElementById('contributors');
+          container.innerHTML = ""; // Clear previous content
 
-        for (let i = 0; i < data.length; i++) {
-          let listName = '';
-          let listImg = '';
+          contributors.forEach(({ login, avatar_url, html_url }) => {
+            const contributor = document.createElement('div');
+            contributor.className = 'contributor';
 
-          let listData = data[i];
-          let {login: user, avatar_url: imgUser} = listData;
+            contributor.innerHTML = `
+              <a href="${html_url}" target="_blank" rel="noopener noreferrer" title="${login}">
+                <img src="${avatar_url}" alt="${login}'s avatar" width="80" height="80" style="border-radius:50%;" />
+                <div>${login}</div>
+              </a>
+            `;
 
-          listName += `<h3>${user}</h3>"`;
-          listImg += `<a href="https://rafiudd.github.io/basic-layout-web/${user}" ><img src="${imgUser}"></a>`;
-          img.innerHTML += listImg;
+            container.appendChild(contributor);
+          });
+        } catch (error) {
+          document.getElementById('contributors').textContent = "Could not load contributors.";
+          console.error(error);
         }
       }
-      window.onload = get();
+
+      window.addEventListener('DOMContentLoaded', fetchContributors);
     </script>
   </body>
 </html>
