diff --git a/index.html b/index.html
index c96e590..4c7913a 100644
--- a/index.html
+++ b/index.html
@@ -126,7 +126,7 @@
             </select>
         </div>
 
-        <div class="category-buttons">
+        <div class="category-buttons" id="category-buttons-box">
             <button data-category="frekwencja" onclick="showInnerTab('frekwencja')">Frekwencja</button>
             <button data-category="olimpiady" onclick="showInnerTab('olimpiady')">Olimpiady</button>
             <button data-category="konkursy" onclick="showInnerTab('konkursy')">Konkursy Szkolne</button>
diff --git a/js/script.js b/js/script.js
index 7daeaee..c080565 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,35 +1,3 @@
-// Definicja kategorii i ich kryteriów
-const categories = {
-    frekwencja: [
-        { name: "Frekwencja 95-100%", id: "frekwencja" },
-        { name: "Brak godzin nieusprawiedliwionych", id: "brak_godzin" },
-        { name: "Minimum 85% frekwencja", id: "min_85" }
-    ],
-    olimpiady: [
-        { name: "Etap szkolny", id: "etap_szkolny" },
-        { name: "Etap rejonowy", id: "etap_rejonowy" },
-        { name: "Etap wojewódzki", id: "etap_wojewodzki" },
-        { name: "Etap ogólnopolski", id: "etap_ogolnopolski" }
-    ],
-    konkursy: [
-        { name: "Udział w konkursach", id: "udzial_konkurs" },
-        { name: "Wyróżnienie w konkursie", id: "wyroznienie_konkurs" }
-    ],
-    reprezentacja: [
-        { name: "Reprezentacja indywidualna", id: "reprezentacja_indywidualna" },
-        { name: "Reprezentacja zespołowa", id: "reprezentacja_zespolowa" },
-        { name: "Udział w zawodach", id: "udzial_zawody" }
-    ],
-    aktywnosc: [
-        { name: "Organizacja imprez", id: "organizacja_imprez" },
-        { name: "Funkcje w klasie", id: "funkcja_klasa" },
-        { name: "Uroczystości okolicznościowe", id: "uroczystosci" },
-        { name: "Udział w poczcie sztandarowej", id: "poczta_sztandar" },
-        { name: "Pomoc nauczycielowi", id: "pomoc_nauczyciel" },
-        { name: "Wolontariat", id: "wolontariat" }
-    ]
-};
-
 // Zmienne globalne
 let currentCategory = 'frekwencja';
 let currentClass = '';
@@ -120,6 +88,27 @@ async function loadStudents(classFilePath) {
     }
 }
 
+async function getCategoriesWithCriteria() {
+    const criteriaFilePath = '/data/criteria.json';
+    const criteria = await fetchJSONFile(criteriaFilePath);
+    let categoriesWithCriteria = {}
+    
+    criteria.categories.forEach(category => {
+        let criteriaForCategory = []
+        criteria.criteria.forEach(criteria => {
+            if(category.criteria_ids.includes(criteria.id)) {
+                console.log(`!!! ${category.name} posiada ${criteria.name}`)
+                criteriaForCategory.push({name: criteria.name, id: criteria.id})
+            }
+        })
+        categoriesWithCriteria[category.id] = criteriaForCategory
+    })
+
+    return categoriesWithCriteria
+
+    
+}
+
 // Funkcja do wczytania pliku criteria.json
 async function loadCriteria() {
     const criteriaFilePath = '/data/criteria.json';
@@ -127,7 +116,11 @@ async function loadCriteria() {
 
     console.log("Załadowane kryteria:", criteria);
     
+    //
+    // LADOWANIE ROL
+    //
     const roles = criteria.roles;
+    
     const selectroleByid = document.getElementById("select-role");
     let selectroleHTML = ""; // Zainicjalizuj pusty string na HTML
 
@@ -138,6 +131,17 @@ async function loadCriteria() {
 
     // Wstawienie HTML do elementu select
     selectroleByid.innerHTML = selectroleHTML;
+
+    // category-buttons-box
+    const categoriesCriteria = criteria.categories;
+    const categoryButtonsBox = document.getElementById("category-buttons-box");
+    let categoryButtonHTML = ""
+    categoriesCriteria.forEach(category => {
+        // categoryButtonHTML += `<option value="${key}">${value.name}</option>`;
+        categoryButtonHTML += `<button data-category="${category.id}" onclick="showInnerTab('${category.id}')">${category.name}</button>`
+    })
+
+    categoryButtonsBox.innerHTML = categoryButtonHTML;
 }
 
 
@@ -301,7 +305,7 @@ function getGrade(points) {
 }
 
 // Funkcja do generowania tabeli uczniów na podstawie wybranej kategorii
-function generateTable(category) {
+async function generateTable(category) {
     const table = document.getElementById('student-table');
     const thead = table.querySelector('thead tr');
     const tbody = table.querySelector('tbody');
@@ -316,6 +320,8 @@ function generateTable(category) {
     thead.appendChild(thName);
 
     // Pobierz kolumny dla wybranej kategorii
+    const categories = await getCategoriesWithCriteria()
+    console.log("łot:", categories)
     const categoryColumns = categories[category];
 
     // Dodaj nagłówki dla kryteriów w kategorii