diff --git a/apps/api/serializers.py b/apps/api/serializers.py
index 8dff87a..473ee94 100644
--- a/apps/api/serializers.py
+++ b/apps/api/serializers.py
@@ -143,6 +143,7 @@ class SubscriptionSerializer_GET(DynamicModelSerializer):
 
     article_title_mutators = ArticleMutatorSerializer(many=True)
     article_desc_mutators = ArticleMutatorSerializer(many=True)
+    active = serializers.BooleanField(initial=True)
 
     class Meta:
         model = Subscription
diff --git a/apps/static/js/table.js b/apps/static/js/table.js
index b900993..97dc180 100644
--- a/apps/static/js/table.js
+++ b/apps/static/js/table.js
@@ -11,6 +11,8 @@ async function initTable(containingSelector, tableId, loadDataFunc, newRowFunc,
     createTableControls(containingSelector, pageSizeId);
 
     await bindSearchBar(searchId, loadDataFunc);
+    // await bindSortDropdown(sortDropdownId, loadDataFunc);
+    await bindFilterDropdown(filterDropdownId, loadDataFunc);
     await bindTablePagination(`${containingSelector} .table-pagination`, loadDataFunc);
     await bindTablePaginationResizer(`${containingSelector} .table-page-sizer`, loadDataFunc);
 }
@@ -50,8 +52,8 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
     if (options.sort) {
         $(`${containingSelector} .table-search-row .table-search-buttons`).append(`
             <div class="d-inline-block ms-3">
-                <div id=${sortDropdownId} class="dropdown table-sort-dropdown">
-                    <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown">
+                <div id="${sortDropdownId}" class="dropdown table-sort-dropdown">
+                    <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                         <i class="bi bi-sort-alpha-up"></i>
                     </button>
                     <ul class="dropdown-menu dropdown-menu-end">
@@ -63,11 +65,11 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
         populateSortDropdown(sortDropdownId, options.sort);
     }
 
-    if (options.actions.GET) {
+    if (options.filter && options.actions.GET) {
         $(`${containingSelector} .table-search-row .table-search-buttons`).append(`
             <div class="d-inline-block ms-3">
-                <div id=${filterDropdownId} class="dropdown table-filter-dropdown">
-                    <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown">
+                <div id="${filterDropdownId}" class="dropdown table-filter-dropdown">
+                    <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                         <i class="bi bi-funnel"></i>
                     </button>
                     <ul class="dropdown-menu dropdown-menu-end">
@@ -76,7 +78,7 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
                 </div>
             </div>
         `);
-        populateFilterDropdown();
+        populateFilterDropdown(filterDropdownId, options.actions.GET, options.filter);
     }
 
     if (deleteSelectedFunc) {
@@ -93,7 +95,7 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
 
 function populateSortDropdown(sortDropdownId, sortOptions) {
     sortOptions.forEach(sortKey => {
-        let label = sortKey.replace(/_/g, " ")
+        let label = sortKey.replace(/_/g, " ");
         $(`#${sortDropdownId} .dropdown-menu`).append(`
             <li>
                 <button type="button" class="dropdown-item text-capitalize d-flex justify-content-between" data-sortkey="${sortKey}">
@@ -109,19 +111,101 @@ function populateSortDropdown(sortDropdownId, sortOptions) {
     });
 }
 
-function populateFilterDropdown() { }
+function populateFilterDropdown(filterDropdownId, options, filterKeys) {
+    for (key in options) {
+        if (!filterKeys.includes(key))
+            continue;
+
+        let label = options[key].label; // key.replace(/_/g, " ");
+            id = key + "Filter";
+            $elem = null;
+
+        switch (options[key].type) {
+            case ("boolean"):
+                $elem = $(`
+                    <div>
+                        <input type="checkbox" name="${id}" id="${id}" class="btn-check" autocomplete="off" data-key="${key}">
+                        <label for="${id}" class="dropdown-item d-flex justify-content-between" role="button">
+                            <span>${label}</span>
+                            <i class="bi bi-x"></i>
+                        </label>
+                    </div>
+                `);
+                bindFilterBoolean($elem);
+                $elem.find('input[type="checkbox"]').prop("checked", options[key].default ? true : false).trigger("change");
+                updateCheckboxState($elem);
+                break
+
+            default:
+                continue;
+        }
+
+        $(`#${filterDropdownId} .dropdown-menu`).append($("<li>").append($elem));
+    }
+}
+
+function bindFilterBoolean($elem) {
+    $elem.find('label').on("click", function(event) {
+        event.preventDefault();
+        let $input = $elem.find('input[type="checkbox"]');
+        let state = $input.data("state");
+
+        switch (state) {
+            case true:
+                state = false;
+                break;
+            case false:
+                state = null;
+                break;
+            case null:
+            default:
+                state = true;
+                break;
+        }
+
+        $input.data("state", state);
+        updateCheckboxState($elem);
+    });
+}
+
+function updateCheckboxState($elem) {
+    let state = $elem.find('input[type="checkbox"]').data("state");
+    let $icon = $elem.find(".bi");
+
+    switch (state) {
+        case true:
+            $elem.find('input[type="checkbox"]').prop("checked", true);
+            $icon.removeClass().addClass("bi bi-check");
+            break;
+        case false:
+            $elem.find('input[type="checkbox"]').prop("checked", false);
+            $icon.removeClass().addClass("bi bi-x");
+            break;
+        case null:
+        default:
+            $elem.find('input[type="checkbox"]').prop("checked", false);
+            $icon.removeClass().addClass("bi bi-dash");
+            break;
+    }
+}
 
 async function bindSearchBar(searchBarSelector, loadDataFunc) {
     searchBar = $("#" + searchBarSelector)
     searchBar.on("input", async function() {
         clearTimeout(timeouts[searchBarSelector]);
-        searchString = $(this).val();
+        var searchString = $(this).val();
         timeouts[searchBarSelector] = setTimeout(async function() {
             await loadDataFunc(getCurrentlyActiveServer().guild_id, 1, null, searchString);
         }, 300);
     });
 }
 
+async function bindFilterDropdown(filterDropdownId, loadDataFunc) {
+    $(`#${filterDropdownId} input`).on("change", function() {
+        alert($(this).attr("data-key"));
+    });
+}
+
 function createTable(containingSelector, tableId) {
     $(containingSelector).append(`
     <div class="table-responsive my-3 px-3">