diff --git a/frontend/www/exercise.html b/frontend/www/exercise.html
index 160af60fea8d981dfaae2cec7fe0cad4122c8fb4..9092491878ba2058ea26e505bc7fbd81b32039b0 100644
--- a/frontend/www/exercise.html
+++ b/frontend/www/exercise.html
@@ -40,8 +40,8 @@
             <div class="col-lg-6"></div>
             <div class="col-lg-6">
                 <label for="inputCategory" class="form-label">Category</label>
-                <select id="inputCategory" class="form-select" name="category" disabled>
-                    <option value="None"></option>
+                <select id="inputCategory" class="form-select" name="category" readonly>
+                    <option value=""></option>
                     <option value="Endurance">Endurance</option>
                     <option value="Strength">Strength</option>
                     <option value="Balance">Balance</option>
diff --git a/frontend/www/exercises.html b/frontend/www/exercises.html
index 4da55f0de343d145371383ba444bafddf49cb19b..fac6a60c2c13173bf676e297a2678acd464edc40 100644
--- a/frontend/www/exercises.html
+++ b/frontend/www/exercises.html
@@ -19,6 +19,21 @@
                 <h3 class="mt-5">View Exercises</h3>
                 <p>Here you can view, create, and edit exercise types defined by you and other athletes.</p>
                 <input type="button" class="btn btn-primary" id="btn-create-exercise" value="Create new exercise">
+            </div>
+        </div>
+            <div class="col-lg text-center"> <br>
+                <p>Sort exercises on category:</p>
+                <input type="checkbox" value="Endurance" name="sort" checked>
+                <label for="endurance">Endurance &nbsp;</label>
+                <input type="checkbox" value="Strength" name="sort" checked>
+                <label for="strength">Strength &nbsp;</label>
+                <input type="checkbox" value="Balance" name="sort" checked>
+                <label for="balance">Balance &nbsp;</label>
+                <input type="checkbox" value="Flexibility" name="sort" checked>
+                <label for="flexibility">Flexibility &nbsp;</label>
+                <input type="checkbox" value="Other" name="sort" checked>
+                <label for="other">Other</label> <br><br>
+            </div>
         </div>
         <div class="row">
             <div class="col-lg text-center">
diff --git a/frontend/www/scripts/exercises.js b/frontend/www/scripts/exercises.js
index fcdac275e585238bd7116bb0ddb5533402672b39..9638b875b3dea3ea351362effae5509aa291d2d1 100644
--- a/frontend/www/scripts/exercises.js
+++ b/frontend/www/scripts/exercises.js
@@ -5,19 +5,22 @@ async function fetchExerciseTypes(request) {
         let data = await response.json();
 
         let exercises = data.results;
+        document.getElementById('div-content').innerHTML = "";
         let container = document.getElementById('div-content');
         let exerciseTemplate = document.querySelector("#template-exercise");
         exercises.forEach(exercise => {
-            const exerciseAnchor = exerciseTemplate.content.firstElementChild.cloneNode(true);
-            exerciseAnchor.href = `exercise.html?id=${exercise.id}`;
+            if (getSelected().includes(exercise.category)) {
+                const exerciseAnchor = exerciseTemplate.content.firstElementChild.cloneNode(true);
+                exerciseAnchor.href = `exercise.html?id=${exercise.id}`;
 
-            const h5 = exerciseAnchor.querySelector("h5");
-            h5.textContent = exercise.name;
+                const h5 = exerciseAnchor.querySelector("h5");
+                h5.textContent = exercise.name;
 
-            const p = exerciseAnchor.querySelector("p");
-            p.textContent = exercise.description;   
+                const p = exerciseAnchor.querySelector("p");
+                p.textContent = exercise.description;   
 
-            container.appendChild(exerciseAnchor);
+                container.appendChild(exerciseAnchor);
+            }
         });
     }
 
@@ -28,15 +31,29 @@ function createExercise() {
     window.location.replace("exercise.html");
 }
 
+function getSelected() {
+    const checkboxes = document.querySelectorAll('input[name="sort"]:checked');
+    let selected = [];
+    checkboxes.forEach((checkbox) => {
+        selected.push(checkbox.value);
+    });
+    return selected
+}
+
+
 window.addEventListener("DOMContentLoaded", async () => {
     let createButton = document.querySelector("#btn-create-exercise");
     createButton.addEventListener("click", createExercise);
 
+    document.querySelectorAll('input[name="sort"]').forEach(item => {
+        item.addEventListener('change', fetchExerciseTypes);
+    });
+
     let response = await fetchExerciseTypes();
-    
+
     if (!response.ok) {
         let data = await response.json();
         let alert = createAlert("Could not retrieve exercise types!", data);
         document.body.prepend(alert);
     }
-});
+});
\ No newline at end of file