diff --git a/public/viewjs/tasks.js b/public/viewjs/tasks.js
index 7ad30df2..9d132067 100644
--- a/public/viewjs/tasks.js
+++ b/public/viewjs/tasks.js
@@ -34,12 +34,28 @@ $("#status-filter").on("change", function()
 	tasksTable.column(tasksTable.colReorder.transpose(5)).search(value).draw();
 });
 
+$("#category-filter").on("change", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+
+	// Transfer CSS classes of selected element to dropdown element (for background)
+	$(this).attr("class", $("#" + $(this).attr("id") + " option[value='" + value + "']").attr("class") + " form-control");
+
+	tasksTable.column(tasksTable.colReorder.transpose(6)).search(value).draw();
+});
+
 $("#clear-filter-button").on("click", function()
 {
 	$("#search").val("");
 	$("#status-filter").val("all");
+	$("#category-filter").val("all");
 	$("#search").trigger("keyup");
 	$("#status-filter").trigger("change");
+	$("#category-filter").trigger("change");
 	$("#show-done-tasks").trigger('checked', false);
 });
 
diff --git a/views/tasks.blade.php b/views/tasks.blade.php
index 92385f8b..41aac57e 100644
--- a/views/tasks.blade.php
+++ b/views/tasks.blade.php
@@ -81,6 +81,20 @@
 			</select>
 		</div>
 	</div>
+<div class="col-12 col-md-6 col-xl-3">
+		<div class="input-group">
+			<div class="input-group-prepend">
+				<span class="input-group-text"><i class="fa-solid fa-filter"></i>&nbsp;{{ $__t('Category') }}</span>
+			</div>
+			<select class="custom-control custom-select"
+				id="category-filter">
+				<option value="all">{{ $__t('All') }}</option>
+				@foreach($taskCategories as $taskCategory)
+					<option value="{{ $taskCategory->name }}">{{ $__t($taskCategory->name) }}</option>
+				@endforeach
+			</select>
+		</div>
+	</div>
 	<div class="col-12 col-md-6 col-xl-3">
 		<div class="form-check custom-control custom-checkbox">
 			<input class="form-check-input custom-control-input"