diff --git a/css/style.css b/css/style.css
index 7b31771..6d73449 100644
--- a/css/style.css
+++ b/css/style.css
@@ -53,7 +53,10 @@ tr:nth-child(even) {
 
 /* Stylizacja kontenera klasy */
 .select-class {
-    margin-top: 20px;
+    text-align: center;
+}
+
+.select-role {
     text-align: center;
 }
 
@@ -64,6 +67,13 @@ tr:nth-child(even) {
     border-radius: 4px;
 }
 
+.select-role select {
+    padding: 5px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
 /* Stylizacja nagłówków */
 h1, h2, h3 {
     text-align: center;
diff --git a/data/criteria.json b/data/criteria.json
index c726e17..e9aac84 100644
--- a/data/criteria.json
+++ b/data/criteria.json
@@ -100,6 +100,7 @@
     ],
     "roles": {
         "teacher": {
+            "name": "Teacher",
             "criteria_ids": [
                 1,
                 2,
@@ -111,6 +112,7 @@
             ]
         },
         "homeroom_teacher": {
+            "name": "Homeroom Teacher",
             "criteria_ids": [
                 1,
                 2,
@@ -123,6 +125,7 @@
             ]
         },
         "principal": {
+            "name": "Principal",
             "criteria_ids": [
                 8,
                 9,
@@ -131,6 +134,7 @@
             ]
         },
         "student": {
+            "name": "Student",
             "criteria_ids": [
                 12,
                 13
diff --git a/index.html b/index.html
index a4a4215..c96e590 100644
--- a/index.html
+++ b/index.html
@@ -112,6 +112,13 @@
             <button onclick="changeDay(1)">Następny Dzień</button>
         </div>
 
+        <div class="select-role">
+            <p>Wybierz role:</p>
+            <select id="select-role" class="select-role">
+
+            </select>
+        </div>
+
         <div class="select-class" id="select-class-container">
             <p>Wybierz klasę:</p>
             <select class="select-class" id="select-class-select">
diff --git a/js/script.js b/js/script.js
index 8c6eaf7..7daeaee 100644
--- a/js/script.js
+++ b/js/script.js
@@ -126,9 +126,21 @@ async function loadCriteria() {
     const criteria = await fetchJSONFile(criteriaFilePath);
 
     console.log("Załadowane kryteria:", criteria);
-    // Implementacja dalszego przetwarzania kryteriów, jeśli jest potrzebna
+    
+    const roles = criteria.roles;
+    const selectroleByid = document.getElementById("select-role");
+    let selectroleHTML = ""; // Zainicjalizuj pusty string na HTML
+
+    // Iteracja przez klucze obiektu roles
+    for (const [key, value] of Object.entries(roles)) {
+        selectroleHTML += `<option value="${key}">${value.name}</option>`;
+    }
+
+    // Wstawienie HTML do elementu select
+    selectroleByid.innerHTML = selectroleHTML;
 }
 
+
 // Funkcja do przełączania głównych zakładek
 function showTab(tabName) {
     // Ukryj wszystkie główne taby