diff --git a/js/jedilnik.js b/js/jedilnik.js
index a5e1b02..b503901 100644
--- a/js/jedilnik.js
+++ b/js/jedilnik.js
@@ -284,10 +284,45 @@ function izrisiJedilnik(kategorija) { //dodala kategorijo kot parameter funkcije
 
 }
 
-const kategorije = ["Predjedi", "Glavne jedi", "Priloge", "Sladice"]; //ustvarjeno polje vseh kategorij
+const gumbi = document.querySelectorAll(".filter_gumb"); //element gumb za vsak button za pac izbiranje kategorije
+
+// Ob kliku spremeni aktivni gumb.
+for (const gumb of gumbi) {
+
+    gumb.addEventListener("click", function () { //ko kliknem na gumb za izbiro prikaza menija 
+
+        
+        for (const posamezenGumb of gumbi) { //najprej vsem gumbom odstranim aktivno
+            posamezenGumb.classList.remove("aktiven");
+        }
+
+      
+        gumb.classList.add("aktiven"); //dodam aktiven SAMO kliknjenemu gumbu (sem izven for zanke)
+
+        const kategorija = gumb.dataset.kategorija;
+
+        prikaziKategorije(kategorija);
+
+    });
 
-for (const kategorija of kategorije) {
-    izrisiJedilnik(kategorija);
 }
 
+const kategorije = ["Predjedi", "Glavne jedi", "Priloge", "Sladice"]; //ustvarjeno polje vseh kategorij
+
+// Prikaže samo izbrano kategorijo oziroma vse kategorije.
+function prikaziKategorije(izbranaKategorija) {
+    const jedilnik = document.querySelector("#jedilnik");
+
+    jedilnik.replaceChildren(); //iz elementa jedilnik odstrani vse njegove podrejene elemente
+
+    for (const kategorija of kategorije) {
+        if (izbranaKategorija === "Vse" || izbranaKategorija === kategorija) { // || pomeni ali, torej kadar uporabnik izbere vse ALI eno od kategorij
+            izrisiJedilnik(kategorija);
+        }
+    }
+}
+
+prikaziKategorije("Vse"); //da se ko se stan naloz najprej pokazejo vsi jedilniki
+
+