diff --git a/index.html b/index.html
index 77b8435..20f17cf 100644
--- a/index.html
+++ b/index.html
@@ -11,32 +11,44 @@
 </head>
 
 <body>
-    <div class="container py-4 py-xl-5">
+    <div class="container py-4 py-xl-5" id="modContainer">
         <div class="row gy-4 row-cols-1 row-cols-md-2 row-cols-xl-3">
-            <div class="col"><img src="https://avatars.githubusercontent.com/u/157155680?s=64&amp;v=4">
-                <h1 style="margin-top: -58px;padding-left: 66px;padding-top: 7px;">&nbsp;EaglerRinth</h1>
-            </div>
-            <div class="col-md-11 col-lg-12 col-xl-11">
-                <div class="card">
-                    <div class="card-body p-4">
-                        <h4 class="card-title" style="padding-top: 0px;margin-left: 3px;padding-bottom: 0px;margin-bottom: 2px;margin-top: 0px;padding-left: 112px;">mod 1</h4>
-                        <p style="padding-left: 108px;margin-top: 3px;margin-bottom: -25px;margin-left: 5px;">Author :&nbsp;</p><a href="#" style="padding-left: 113px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;margin-top: -23px;margin-bottom: -15px;margin-left: 65px;"><i class="far fa-user" style="font-size: 16px;"></i>&nbsp;%github-username%&nbsp;</a>
-                        <p class="card-text" style="margin-top: 3px;padding-left: 113px;margin-bottom: -35px;padding-bottom: 0px;padding-top: 6px;">this is a mod</p><img style="padding-top: 0px;padding-bottom: 0px;margin-bottom: -48px;margin-top: -89px;" src="https://cdn.modrinth.com/data/AANobbMI/icon.png" width="100">
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-11 col-lg-12 col-xl-11">
-                <div class="card">
-                    <div class="card-body p-4">
-                        <h4 class="card-title" style="padding-top: 0px;margin-left: 3px;padding-bottom: 0px;margin-bottom: 2px;margin-top: 0px;padding-left: 112px;">mod 2</h4>
-                        <p style="padding-left: 108px;margin-top: 3px;margin-bottom: -25px;margin-left: 5px;">Author :&nbsp;</p><a href="#" style="padding-left: 113px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;margin-top: -23px;margin-bottom: -15px;margin-left: 65px;"><i class="far fa-user"></i>&nbsp;%github-username%&nbsp;</a>
-                        <p class="card-text" style="margin-top: 3px;padding-left: 113px;margin-bottom: -35px;padding-bottom: 0px;padding-top: 6px;">this is another mod</p><img style="padding-top: 0px;padding-bottom: 0px;margin-bottom: -48px;margin-top: -89px;" width="100" src="https://cdn.modrinth.com/data/AANobbMI/icon.png">
-                    </div>
-                </div>
-            </div>
+            <!-- JavaScript will add mod cards here -->
         </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        fetch('mods.json')
+            .then(response => response.json())
+            .then(data => {
+                const modContainer = document.getElementById('modContainer');
+
+                // Remove existing cards
+                modContainer.innerHTML = '';
+
+                // Add cards from the JSON data
+                data.mods.forEach(mod => {
+                    const card = document.createElement('div');
+                    card.className = 'col-md-11 col-lg-12 col-xl-11';
+
+                    card.innerHTML = `
+                        <div class="card">
+                            <div class="card-body p-4">
+                                <h4 class="card-title" style="padding-top: 0px;margin-left: 3px;padding-bottom: 0px;margin-bottom: 2px;margin-top: 0px;padding-left: 112px;">${mod.name}</h4>
+                                <p style="padding-left: 108px;margin-top: 3px;margin-bottom: -25px;margin-left: 5px;">Author :&nbsp;</p>
+                                <a href="#" style="padding-left: 113px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;margin-top: -23px;margin-bottom: -15px;margin-left: 65px;">
+                                    <i class="far fa-user" style="font-size: 16px;"></i>&nbsp;${mod.author}&nbsp;
+                                </a>
+                                <p class="card-text" style="margin-top: 3px;padding-left: 113px;margin-bottom: -35px;padding-bottom: 0px;padding-top: 6px;">${mod.description}</p>
+                                <img style="padding-top: 0px;padding-bottom: 0px;margin-bottom: -48px;margin-top: -89px;" src="${mod.icon}" width="100">
+                            </div>
+                        </div>`;
+
+                    modContainer.appendChild(card);
+                });
+            })
+            .catch(error => console.error('Error fetching mods.json:', error));
+    </script>
 </body>
 
 </html>
