diff --git a/index.html b/index.html
index 6eeb571..5c09985 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,44 @@
             padding: 8px;
         }
     </style>
+    <script>
+        function fetchRoles() {
+            fetch('get1.php')
+                .then(response => response.json())
+                .then(data => {
+                    const select = document.getElementById('select-role');
+        
+                    data.forEach(role => {
+                        const option = document.createElement('option');
+                        option.value = role.id;
+                        option.textContent = role.role_name;
+                        select.appendChild(option);
+                        console.log(option);
+                    });
+                })
+        }
+        document.addEventListener('DOMContentLoaded', (event) => {
+            fetchRoles();
+        });
+        function fetchClasses() {
+            fetch('get2.php')
+                .then(response => response.json())
+                .then(data => {
+                    const select = document.getElementById('select-class');
+            
+                    data.forEach(cls => {
+                        const option = document.createElement('option');
+                        option.value = cls.id;
+                        option.textContent = cls.class_name;
+                        select.appendChild(option);
+                        console.log(option);
+                    });
+                })
+        }
+        document.addEventListener('DOMContentLoaded', (event) => {
+            fetchClasses();
+        });
+    </script>   
 </head>
 <body class="dark-background">
 
@@ -132,13 +170,12 @@
         <div class="select-role">
             <p class="tag">Wybierz role:</p>
             <select onchange="changeRole()" id="select-role" class="select-role">
-
             </select>
         </div>
 
         <div class="select-class" id="select-class-container">
             <p class="tag">Wybierz klasę:</p>
-            <select class="select-class" id="select-class-select">
+            <select id="select-class" class="select-class">
                 <!-- Opcje będą ładowane dynamicznie -->
             </select>
         </div>
