diff --git a/app/assets/javascripts/components/saved_annotations/saved_annotation_list.ts b/app/assets/javascripts/components/saved_annotations/saved_annotation_list.ts
index 4e7501fdf3..940bc0d601 100644
--- a/app/assets/javascripts/components/saved_annotations/saved_annotation_list.ts
+++ b/app/assets/javascripts/components/saved_annotations/saved_annotation_list.ts
@@ -5,6 +5,8 @@ import "components/pagination";
 import { searchQueryState } from "state/SearchQuery";
 import { DodonaElement } from "components/meta/dodona_element";
 import { i18n } from "i18n/i18n";
+import { FilterOptions } from "components/search/filter_element";
+import { search } from "search";
 
 /**
  * This component represents a list of saved annotations
@@ -43,7 +45,19 @@ export class SavedAnnotationList extends DodonaElement {
         return pagination;
     }
 
+    lastFilters: FilterOptions[] = [];
+    get filters(): FilterOptions[] {
+        const filters = savedAnnotationState.getFilters(this.queryParams, this.arrayQueryParams);
+        if (filters === undefined) {
+            // return last filters if the updated filters are not yet available
+            return this.lastFilters;
+        }
+        this.lastFilters = filters;
+        return filters;
+    }
+
     render(): TemplateResult {
+        search.updateFilters(this.filters);
         return this.savedAnnotations.length > 0 ? html`
             <div class="table-scroll-wrapper">
                 <table class="table table-index table-resource">
diff --git a/app/assets/javascripts/components/search/dropdown_filter.ts b/app/assets/javascripts/components/search/dropdown_filter.ts
index fb5bc8a16e..e5e189696c 100644
--- a/app/assets/javascripts/components/search/dropdown_filter.ts
+++ b/app/assets/javascripts/components/search/dropdown_filter.ts
@@ -1,8 +1,12 @@
 import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { FilterCollection, Label, FilterCollectionElement } from "components/search/filter_collection_element";
+import {
+    Label,
+    FilterElement,
+    AccentColor
+} from "components/search/filter_element";
 import { i18n } from "i18n/i18n";
-import { DodonaElement } from "components/meta/dodona_element";
+import { FilterCollection } from "components/search/filter_collection";
 
 /**
  * This component inherits from FilterCollectionElement.
@@ -10,19 +14,15 @@ import { DodonaElement } from "components/meta/dodona_element";
  *
  * @element d-dropdown-filter
  *
- * @prop {(s: Label) => string} color - a function that fetches the color associated with each label
- * @prop {string} type - The type of the filter collection, used to determine the dropdown button text
+ * @prop {AccentColor} color - the color associated with the filter
  * @prop {string} param - the searchQuery param to be used for this filter
  * @prop {boolean} multi - whether one or more labels can be selected at the same time
- * @prop {(l: Label) => string} paramVal - a function that extracts the value that should be used in a searchQuery for a selected label
  * @prop {[Label]} labels - all labels that could potentially be selected
  */
 @customElement("d-dropdown-filter")
-export class DropdownFilter extends FilterCollectionElement {
-    @property()
-    color: (s: Label) => string;
-    @property()
-    type: string;
+export class DropdownFilter extends FilterElement {
+    @property({ type: String })
+    color: AccentColor;
 
     @property({ state: true })
     filter = "";
@@ -35,16 +35,16 @@ export class DropdownFilter extends FilterCollectionElement {
         return this.showFilter ? this.labels.filter(s => s.name.toLowerCase().includes(this.filter.toLowerCase())) : this.labels;
     }
 
-    render(): TemplateResult {
-        if (this.labels.length === 0) {
-            return html``;
-        }
+    get disabled(): boolean {
+        return this.labels.length === 0 || (!this.multi && this.labels.length === 1);
+    }
 
+    render(): TemplateResult {
         return html`
             <div class="dropdown dropdown-filter">
-                <a class="token token-bordered" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
-                    ${this.getSelectedLabels().map( s => html`<i class="mdi mdi-circle mdi-12 mdi-colored-accent accent-${this.color(s)} left-icon"></i>`)}
-                    ${i18n.t(`js.dropdown.${this.multi?"multi":"single"}.${this.type}`)}
+                <a class="token token-bordered ${this.disabled ? "disabled" : ""}" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
+                    ${this.getSelectedLabels().map( () => html`<i class="mdi mdi-circle mdi-12 mdi-colored-accent accent-${this.color} left-icon"></i>`)}
+                    ${i18n.t(`js.search.filter.${this.param}`)}
                     <i class="mdi mdi-chevron-down mdi-18 right-icon"></i>
                 </a>
 
@@ -54,12 +54,13 @@ export class DropdownFilter extends FilterCollectionElement {
                             <input type="text" class="form-control " @input=${e => this.filter = e.target.value} placeholder="${i18n.t("js.dropdown.search")}">
                         </span></li>
                     ` : ""}
-                    ${this.filteredLabels.map(s => html`
+                    ${this.filteredLabels.sort((a, b) => b.count - a.count).map(s => html`
                             <li><span class="dropdown-item-text ">
                                 <div class="form-check">
                                     <input class="form-check-input" type="${this.multi?"checkbox":"radio"}" .checked=${this.isSelected(s)} @click="${() => this.toggle(s)}" id="check-${this.param}-${s.id}">
                                     <label class="form-check-label" for="check-${this.param}-${s.id}">
                                         ${s.name}
+                                        ${s.count ? html`<span class="text-muted float-end ms-4">${s.count}</span>` : ""}
                                     </label>
                                 </div>
                             </span></li>
@@ -75,27 +76,23 @@ export class DropdownFilter extends FilterCollectionElement {
  *
  * @element d-dropdown-filters
  *
- * @prop {[string, FilterCollection][]} filterCollections - the list of filterCollections for which a dropdown should be displayed
+ * @prop {FilterOptions[]} filters - the list of filterOptions for which a dropdown should be displayed
+ * @prop {string[]} hide - the list of filter params that should be hidden
  */
 @customElement("d-dropdown-filters")
-export class DropdownFilters extends DodonaElement {
-    @property( { type: Array })
-    filterCollections: [string, FilterCollection][];
-
+export class DropdownFilters extends FilterCollection {
     render(): TemplateResult {
-        if (!this.filterCollections) {
+        if (!this.visibleFilters) {
             return html``;
         }
 
         return html`
-            ${this.filterCollections.map(([type, c]) => html`
+            ${this.visibleFilters.map(c => html`
                 <d-dropdown-filter
                     .labels=${c.data}
                     .color=${c.color}
-                    .paramVal=${c.paramVal}
                     .param=${c.param}
                     .multi=${c.multi}
-                    .type=${type}
                 >
                 </d-dropdown-filter>
             `)}
diff --git a/app/assets/javascripts/components/search/filter_collection.ts b/app/assets/javascripts/components/search/filter_collection.ts
new file mode 100644
index 0000000000..b88a00b718
--- /dev/null
+++ b/app/assets/javascripts/components/search/filter_collection.ts
@@ -0,0 +1,20 @@
+import { DodonaElement } from "components/meta/dodona_element";
+import { property } from "lit/decorators.js";
+import { FilterOptions } from "components/search/filter_element";
+import { search } from "search";
+
+export class FilterCollection extends DodonaElement {
+    @property({ type: Array })
+    filters: FilterOptions[] = [];
+    @property({ type: Array })
+    hide: string[] = [];
+
+    constructor() {
+        super();
+        search.filterCollections.push(this);
+    }
+
+    get visibleFilters(): FilterOptions[] {
+        return this.filters.filter(f => !this.hide.includes(f.param));
+    }
+}
diff --git a/app/assets/javascripts/components/search/filter_collection_element.ts b/app/assets/javascripts/components/search/filter_element.ts
similarity index 82%
rename from app/assets/javascripts/components/search/filter_collection_element.ts
rename to app/assets/javascripts/components/search/filter_element.ts
index d90dc2acf1..fe103eb852 100644
--- a/app/assets/javascripts/components/search/filter_collection_element.ts
+++ b/app/assets/javascripts/components/search/filter_element.ts
@@ -2,12 +2,14 @@ import { property } from "lit/decorators.js";
 import { searchQueryState } from "state/SearchQuery";
 import { DodonaElement } from "components/meta/dodona_element";
 
-export type Label = {id: string, name: string};
-export type FilterCollection = {
+export type Label = {id: string, name: string, count?: number};
+export const ACCENT_COLORS = ["pink", "deep-purple", "teal", "orange", "brown", "blue-gray", "red", "purple", "indigo"];
+export type AccentColor = typeof ACCENT_COLORS[number];
+
+export type FilterOptions = {
     data: Label[],
     multi: boolean,
-    color: (l: Label) => string,
-    paramVal: (l: Label) => string,
+    color?: AccentColor,
     param: string
 };
 
@@ -21,13 +23,11 @@ export type FilterCollection = {
  * @prop {function(Label): string} paramVal - a function that extracts the value that should be used in a searchQuery for a selected label
  * @prop {[Label]} labels - all labels that could potentially be selected
  */
-export class FilterCollectionElement extends DodonaElement {
+export class FilterElement extends DodonaElement {
     @property()
     param: string;
     @property({ type: Boolean })
     multi: boolean;
-    @property()
-    paramVal: (l: Label) => string;
     @property({ type: Array })
     labels: Array<Label> = [];
 
@@ -47,24 +47,20 @@ export class FilterCollectionElement extends DodonaElement {
         super.update(changedProperties);
     }
 
-    private str(label: Label): string {
-        return this.paramVal(label).toString();
-    }
-
     private get multiSelected(): string[] {
         return searchQueryState.arrayQueryParams.get(this.param) || [];
     }
 
     private multiUnSelect(label: Label): void {
-        searchQueryState.arrayQueryParams.set(this.param, this.multiSelected.filter(s => s !== this.str(label)));
+        searchQueryState.arrayQueryParams.set(this.param, this.multiSelected.filter(s => s !== label.id));
     }
 
     private multiIsSelected(label: Label): boolean {
-        return this.multiSelected.includes(this.str(label));
+        return this.multiSelected.includes(label.id);
     }
 
     private multiSelect(label: Label): void {
-        searchQueryState.arrayQueryParams.set(this.param, [...this.multiSelected, this.str(label)]);
+        searchQueryState.arrayQueryParams.set(this.param, [...this.multiSelected, label.id]);
     }
 
     private singleUnSelect(): void {
@@ -72,11 +68,11 @@ export class FilterCollectionElement extends DodonaElement {
     }
 
     private singleSelect(label: Label): void {
-        searchQueryState.queryParams.set(this.param, this.str(label));
+        searchQueryState.queryParams.set(this.param, label.id);
     }
 
     private singleIsSelected(label: Label): boolean {
-        return searchQueryState.queryParams.get(this.param) === this.str(label);
+        return searchQueryState.queryParams.get(this.param) === label.id;
     }
 
     isSelected = this.singleIsSelected;
diff --git a/app/assets/javascripts/components/search/filter_tabs.ts b/app/assets/javascripts/components/search/filter_tabs.ts
index bf63f0e978..a3a5575cf5 100644
--- a/app/assets/javascripts/components/search/filter_tabs.ts
+++ b/app/assets/javascripts/components/search/filter_tabs.ts
@@ -1,6 +1,6 @@
 import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { FilterCollectionElement, Label } from "components/search/filter_collection_element";
+import { FilterElement, Label } from "components/search/filter_element";
 import { watchMixin } from "components/meta/watch_mixin";
 
 type TabInfo = {id: string, name: string, title?: string, count?: number};
@@ -14,13 +14,11 @@ type TabInfo = {id: string, name: string, title?: string, count?: number};
  * @prop {{id: string, name: string, title: string}[]} labels - all labels that could potentially be selected
  */
 @customElement("d-filter-tabs")
-export class FilterTabs extends watchMixin(FilterCollectionElement) {
+export class FilterTabs extends watchMixin(FilterElement) {
     @property()
     multi = false;
     @property()
     param = "tab";
-    @property()
-    paramVal = (label: Label): string => label.id.toString();
     @property({ type: Array })
     labels: TabInfo[];
 
diff --git a/app/assets/javascripts/components/search/search_field.ts b/app/assets/javascripts/components/search/search_field.ts
index 71f8ff62ef..16183d5cd1 100644
--- a/app/assets/javascripts/components/search/search_field.ts
+++ b/app/assets/javascripts/components/search/search_field.ts
@@ -3,18 +3,17 @@ import { html, TemplateResult } from "lit";
 import { createDelayer } from "utilities";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { ref } from "lit/directives/ref.js";
-import { FilterCollectionElement, Label } from "components/search/filter_collection_element";
+import { FilterElement, Label } from "components/search/filter_element";
 import { searchQueryState } from "state/SearchQuery";
 import { search } from "search";
-import { DodonaElement } from "components/meta/dodona_element";
 import { i18n } from "i18n/i18n";
+import { FilterCollection } from "components/search/filter_collection";
 /**
  * This component inherits from FilterCollectionElement.
  * It represents a list of filters to be used in a dropdown as typeahead suggestions
  *
  * @element d-search-field-suggestion
  *
- * @prop {string} type - The type of the filter collection, used to determine the dropdown button text
  * @prop {string} filter - The string for which typeahead suggestions should be provided
  * @prop {number} index - bookkeeping param to remember the order across multiple elements
  * @prop {string} param - the searchQuery param to be used for this filter
@@ -23,9 +22,7 @@ import { i18n } from "i18n/i18n";
  * @prop {[Label]} labels - all labels that could potentially be selected
  */
 @customElement("d-search-field-suggestion")
-export class SearchFieldSuggestion extends FilterCollectionElement {
-    @property()
-    type: string;
+export class SearchFieldSuggestion extends FilterElement {
     @property()
     filter: string;
     @property({ type: Number })
@@ -54,11 +51,12 @@ export class SearchFieldSuggestion extends FilterCollectionElement {
     render(): TemplateResult {
         return this.getFilteredLabels().length == 0 ? html`` : html`
             <li>
-                <h6 class='dropdown-header'>${i18n.t(`js.${this.type}`)}</h6>
+                <h6 class='dropdown-header'>${i18n.t(`js.search.filter.${this.param}`)}</h6>
             </li>
             ${ this.getFilteredLabels().map( label => html`
                 <li><a class="dropdown-item" href="#" @click=${e => this.handleClick(e, label)}>
                     ${unsafeHTML(this.getHighlightedLabel(label.name))}
+                    ${label.count ? html`<span class="text-muted float-end ms-4">${label.count}</span>` : ""}
                 </a></li>
             `)}
         `;
@@ -73,17 +71,16 @@ export class SearchFieldSuggestion extends FilterCollectionElement {
  *
  * @prop {string} placeholder - The placeholder text for an empty searchfield
  * @prop {boolean} eager - if true a search will be run before user input happens
- * @prop {Record<string, { data: Label[], multi: boolean, paramVal: (l: Label) => string, param: string }>} filterCollections
+ * @prop {FilterOptions[]} filters - The list of filter lists to be used as search suggestions
+ * @prop {string[]} hide - The list of filter lists to be ignored as search suggestions
  *  - The list of filter lists to be used as search suggestions
  */
 @customElement("d-search-field")
-export class SearchField extends DodonaElement {
+export class SearchField extends FilterCollection {
     @property({ type: String })
     placeholder: string;
     @property({ type: Boolean })
     eager: boolean;
-    @property( { type: Array })
-    filterCollections: Record<string, { data: Label[], multi: boolean, paramVal: (l: Label) => string, param: string }>;
 
     @property({ state: true })
     filter?: string = "";
@@ -150,7 +147,7 @@ export class SearchField extends DodonaElement {
     }
 
     render(): TemplateResult {
-        if (!this.filterCollections) {
+        if (!this.visibleFilters) {
             return html``;
         }
 
@@ -166,12 +163,10 @@ export class SearchField extends DodonaElement {
                 @keydown=${e => this.keydown(e)}
             />
             <ul class="dropdown-menu ${this.filter && this.hasSuggestions ? "show-search-dropdown" : ""}">
-                ${Object.entries(this.filterCollections).map(([type, c], i) => html`
+                ${this.visibleFilters.map((c, i) => html`
                     <d-search-field-suggestion
                         .labels=${c.data}
-                        .type=${type}
                         .filter=${this.filter}
-                        .paramVal=${c.paramVal}
                         .param=${c.param}
                         .multi=${c.multi}
                         .index=${i}
diff --git a/app/assets/javascripts/components/search/search_token.ts b/app/assets/javascripts/components/search/search_token.ts
index ebfb53c10b..5c18e7c8d9 100644
--- a/app/assets/javascripts/components/search/search_token.ts
+++ b/app/assets/javascripts/components/search/search_token.ts
@@ -1,7 +1,13 @@
 import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { FilterCollection, FilterCollectionElement, Label } from "components/search/filter_collection_element";
-import { DodonaElement } from "components/meta/dodona_element";
+import {
+    AccentColor,
+    FilterElement,
+    Label
+} from "components/search/filter_element";
+import { FilterCollection } from "components/search/filter_collection";
+import { searchQueryState } from "state/SearchQuery";
+import { i18n } from "i18n/i18n";
 
 /**
  * This component inherits from FilterCollectionElement.
@@ -9,16 +15,16 @@ import { DodonaElement } from "components/meta/dodona_element";
  *
  * @element d-search-token
  *
- * @prop {(s: Label) => string} color - a function that fetches the color associated with each label
+ * @prop {AccentColor} color - the color associated with the filter
  * @prop {string} param - the searchQuery param to be used for this filter
  * @prop {boolean} multi - whether one or more labels can be selected at the same time
  * @prop {(l: Label) => string} paramVal - a function that extracts the value that should be used in a searchQuery for a selected label
  * @prop {[Label]} labels - all labels that could potentially be selected
  */
 @customElement("d-search-token")
-export class SearchToken extends FilterCollectionElement {
-    @property()
-    color: (l: Label) => string;
+export class SearchToken extends FilterElement {
+    @property({ type: String })
+    color: AccentColor;
 
     processClick(e: Event, label: Label): void {
         this.unSelect(label);
@@ -28,7 +34,7 @@ export class SearchToken extends FilterCollectionElement {
     render(): TemplateResult {
         return html`
             ${ this.getSelectedLabels().map( label => html`
-                <div class="token accent-${this.color(label)}">
+                <div class="token accent-${this.color}">
                     <span class="token-label">${label.name}</span>
                     <a href="#" class="close" tabindex="-1"  @click=${e => this.processClick(e, label)}>
                         <i class="mdi mdi-close mdi-18"></i>
@@ -44,29 +50,56 @@ export class SearchToken extends FilterCollectionElement {
  *
  * @element d-search-tokens
  *
- * @prop {Record<string, FilterCollection>} filterCollections - the filter collections for which tokens should be shown
+ * @prop {FilterOptions[]} filters - the list of filterOptions for which tokens could be created
+ * @prop {string[]} hide - the list of filter params that should never be shown
  */
 @customElement("d-search-tokens")
-export class SearchTokens extends DodonaElement {
-    @property( { type: Array })
-    filterCollections: Record<string, FilterCollection>;
+export class SearchTokens extends FilterCollection {
+    get activeFilters(): number {
+        let count = 0;
+        this.visibleFilters.forEach(f => {
+            if (f.multi) {
+                count += searchQueryState.arrayQueryParams.get(f.param)?.length || 0;
+            } else {
+                count += searchQueryState.queryParams.get(f.param) ? 1 : 0;
+            }
+        });
+        return count;
+    }
+
+    clearAll(): void {
+        this.visibleFilters.forEach(f => {
+            if (f.multi) {
+                searchQueryState.arrayQueryParams.set(f.param, []);
+            } else {
+                searchQueryState.queryParams.set(f.param, undefined);
+            }
+        });
+    }
 
     render(): TemplateResult {
-        if (!this.filterCollections) {
+        if (!this.visibleFilters) {
             return html``;
         }
 
         return html`
-            ${Object.values(this.filterCollections).map(c => html`
+            ${this.visibleFilters.map(c => html`
                 <d-search-token
                     .labels=${c.data}
                     .color=${c.color}
-                    .paramVal=${c.paramVal}
                     .param=${c.param}
                     .multi=${c.multi}
                 >
                 </d-search-token>
             `)}
+            ${this.activeFilters > 0 ? html`
+                <div class="help-block ms-1">
+                    ${i18n.t("js.search.tokens.active_filters", { smart_count: this.activeFilters })}
+                    <a href="#" @click=${() => this.clearAll()}>
+                        ${i18n.t("js.search.tokens.clear")}
+                    </a>
+                </div>
+            ` : html``}
         `;
     }
 }
diff --git a/app/assets/javascripts/components/search/standalone-dropdown-filter.ts b/app/assets/javascripts/components/search/standalone-dropdown-filter.ts
index ed95745cf4..4b148b73a6 100644
--- a/app/assets/javascripts/components/search/standalone-dropdown-filter.ts
+++ b/app/assets/javascripts/components/search/standalone-dropdown-filter.ts
@@ -1,5 +1,5 @@
 import { customElement, property } from "lit/decorators.js";
-import { FilterCollectionElement, Label } from "components/search/filter_collection_element";
+import { FilterElement, Label } from "components/search/filter_element";
 import { html, TemplateResult } from "lit";
 import { watchMixin } from "components/meta/watch_mixin";
 
@@ -14,18 +14,16 @@ import { watchMixin } from "components/meta/watch_mixin";
  * @prop {[Label]} labels - all labels that could potentially be selected
  */
 @customElement("d-standalone-dropdown-filter")
-export class StandaloneDropdownFilter extends watchMixin(FilterCollectionElement) {
+export class StandaloneDropdownFilter extends watchMixin(FilterElement) {
     @property()
     multi = false;
-    @property()
-    paramVal = (label: Label): string => label.id.toString();
     @property({ type: String })
     default;
 
     watch = {
         default: () => {
             if (this.getSelectedLabels().length === 0) {
-                this.select(this.labels.find(label => this.paramVal(label) === this.default));
+                this.select(this.labels.find(label => label.id === this.default));
             }
         }
     };
diff --git a/app/assets/javascripts/i18n/translations.json b/app/assets/javascripts/i18n/translations.json
index d1a3f626c6..fa881ec177 100644
--- a/app/assets/javascripts/i18n/translations.json
+++ b/app/assets/javascripts/i18n/translations.json
@@ -193,40 +193,7 @@
       },
       "draft": "Draft",
       "dropdown": {
-        "multi": {
-          "activity_types": "Activity types",
-          "course_labels": "Member labels",
-          "courses": "Courses",
-          "description_languages": "Languages",
-          "event_types": "Event types",
-          "institutions": "Institutions",
-          "judges": "Judges",
-          "labels": "Labels",
-          "popularity": "Popularity",
-          "programming_languages": "Programming Languages",
-          "question_states": "Statuses",
-          "repositories": "Repositories",
-          "search_options": "Options",
-          "statuses": "Statuses"
-        },
-        "search": "Search",
-        "single": {
-          "activity_types": "Activity type",
-          "course_labels": "Member label",
-          "courses": "Course",
-          "description_languages": "Language",
-          "draft": "Draft",
-          "event_types": "Event type",
-          "exercises": "Exercise",
-          "institutions": "Institution",
-          "judges": "Judge",
-          "labels": "Label",
-          "popularity": "Popularity",
-          "programming_languages": "Programming Language",
-          "question_states": "Status",
-          "repositories": "Repository",
-          "statuses": "Status"
-        }
+        "search": "Search"
       },
       "en": "English",
       "event_types": "Event types",
@@ -363,6 +330,29 @@
       "score_item": {
         "error": "Error while updating"
       },
+      "search": {
+        "filter": {
+          "course_id": "Course",
+          "course_labels": "Member labels",
+          "description_languages": "Languages",
+          "draft": "Draft",
+          "event_type": "Type",
+          "exercise_id": "Exercise",
+          "institution_id": "Institution",
+          "judge_id": "Judge",
+          "labels": "Labels",
+          "popularity": "Popularity",
+          "programming_language": "Programming Language",
+          "question_state": "Status",
+          "repository_id": "Repository",
+          "status": "Status",
+          "type": "Type"
+        },
+        "tokens": {
+          "active_filters": "%{smart_count} active filter |||| %{smart_count} active filters",
+          "clear": "Clear all"
+        }
+      },
       "sign_in_search_bar": {
         "institution_search": "Type to search for your institution",
         "log_in": "Sign in"
@@ -698,40 +688,7 @@
       },
       "draft": "Concept",
       "dropdown": {
-        "multi": {
-          "activity_types": "Activiteitstypes",
-          "course_labels": "Gebruikerlabels",
-          "courses": "Cursussen",
-          "description_languages": "Talen",
-          "event_types": "Event types",
-          "institutions": "Onderwijsinstellingen",
-          "judges": "Judges",
-          "labels": "Labels",
-          "popularity": "Populariteit",
-          "programming_languages": "Programmeertalen",
-          "question_states": "Toestanden",
-          "repositories": "Repository's",
-          "search_options": "Opties",
-          "statuses": "Statussen"
-        },
-        "search": "Zoeken",
-        "single": {
-          "activity_types": "Activiteitstype",
-          "course_labels": "Gebruikerlabel",
-          "courses": "Cursus",
-          "description_languages": "Taal",
-          "draft": "Concept",
-          "event_types": "Event type",
-          "exercises": "Oefening",
-          "institutions": "Onderwijsinstelling",
-          "judges": "Judge",
-          "labels": "Label",
-          "popularity": "Populariteit",
-          "programming_languages": "Programmeertaal",
-          "question_states": "Toestand",
-          "repositories": "Repository",
-          "statuses": "Status"
-        }
+        "search": "Zoeken"
       },
       "en": "Engels",
       "event_types": "Event types",
@@ -868,6 +825,29 @@
       "score_item": {
         "error": "Fout bij bijwerken"
       },
+      "search": {
+        "filter": {
+          "course_id": "Cursus",
+          "course_labels": "Gebruikerlabels",
+          "description_languages": "Talen",
+          "draft": "Concept",
+          "event_type": "type",
+          "exercise_id": "Oefening",
+          "institution_id": "Onderwijsinstelling",
+          "judge_id": "Judge",
+          "labels": "Labels",
+          "popularity": "Populariteit",
+          "programming_language": "Programmeertaal",
+          "question_state": "Toestand",
+          "repository_id": "Repository",
+          "status": "Status",
+          "type": "Type"
+        },
+        "tokens": {
+          "active_filters": "%{smart_count} filter actief |||| %{smart_count} filters actief",
+          "clear": "Alles wissen"
+        }
+      },
       "sign_in_search_bar": {
         "institution_search": "Typ om jouw school te vinden",
         "log_in": "Aanmelden"
diff --git a/app/assets/javascripts/search.ts b/app/assets/javascripts/search.ts
index 879fbacda4..d60bc56bc7 100644
--- a/app/assets/javascripts/search.ts
+++ b/app/assets/javascripts/search.ts
@@ -2,6 +2,8 @@ import { createDelayer, fetch, getURLParameter, updateURLParameter } from "utili
 import { InactiveTimeout } from "auto_reload";
 import { LoadingBar } from "components/search/loading_bar";
 import { searchQueryState } from "state/SearchQuery";
+import { ACCENT_COLORS, FilterOptions } from "components/search/filter_element";
+import { FilterCollection } from "components/search/filter_collection";
 const RELOAD_SECONDS = 2;
 
 
@@ -12,6 +14,7 @@ class Search {
     searchIndex = 0;
     appliedIndex = 0;
     loadingBars: LoadingBar[] = [];
+    filterCollections: FilterCollection[] = [];
 
     setRefreshElement(refreshElement: string): void {
         this.refreshElement = refreshElement;
@@ -124,6 +127,15 @@ class Search {
                 }
             });
     }
+
+    public updateFilters(filterOptions: FilterOptions[] | undefined): void {
+        const coloredFilterOptions = (filterOptions || []).map((filterOption, index) => {
+            return { ...filterOption, color: ACCENT_COLORS[index % ACCENT_COLORS.length] };
+        });
+        this.filterCollections.forEach(collection => {
+            collection.filters = coloredFilterOptions;
+        });
+    }
 }
 
 export const search = new Search();
diff --git a/app/assets/javascripts/state/SavedAnnotations.ts b/app/assets/javascripts/state/SavedAnnotations.ts
index ab77a0ce17..e61c713f2c 100644
--- a/app/assets/javascripts/state/SavedAnnotations.ts
+++ b/app/assets/javascripts/state/SavedAnnotations.ts
@@ -5,6 +5,7 @@ import { State } from "state/state_system/State";
 import { stateProperty } from "state/state_system/StateProperty";
 import { StateMap } from "state/state_system/StateMap";
 import { i18n } from "i18n/i18n";
+import { FilterOptions } from "components/search/filter_element";
 
 export type SavedAnnotation = {
     annotations_count?: number;
@@ -33,6 +34,7 @@ function addParametersToUrl(url: string, params?: Map<string, string>, arrayPara
 class SavedAnnotationState extends State {
     @stateProperty private listByURL = new StateMap<string, SavedAnnotation[]>();
     @stateProperty private paginationByURL = new StateMap<string, Pagination>();
+    @stateProperty private filtersByURL = new StateMap<string, FilterOptions[]>();
     @stateProperty private byId = new StateMap<number, SavedAnnotation>();
 
     private get url(): string {
@@ -43,6 +45,7 @@ class SavedAnnotationState extends State {
         const response = await fetch(url);
         this.listByURL.set(url, await response.json());
         this.paginationByURL.set(url, JSON.parse(response.headers.get("X-Pagination")));
+        this.filtersByURL.set(url, JSON.parse(response.headers.get("X-Filters")));
         return this.listByURL.get(url);
     }
 
@@ -90,6 +93,16 @@ class SavedAnnotationState extends State {
         return this.paginationByURL.get(url);
     }
 
+    getFilters(params?: Map<string, string>, arrayParams?: Map<string, string[]>): FilterOptions[] {
+        const url = addParametersToUrl(`${this.url}.json`, params, arrayParams);
+        delayerByURL.get(url)(() => {
+            if (!this.paginationByURL.has(url)) {
+                this.fetchList(url);
+            }
+        }, 200);
+        return this.filtersByURL.get(url);
+    }
+
     get(id: number): SavedAnnotation {
         delayerByID.get(id)(() => {
             if (!this.byId.has(id)) {
diff --git a/app/assets/stylesheets/components/dropdown-filter.css.scss b/app/assets/stylesheets/components/dropdown-filter.css.scss
index 2cae0619e7..5a6fd32539 100644
--- a/app/assets/stylesheets/components/dropdown-filter.css.scss
+++ b/app/assets/stylesheets/components/dropdown-filter.css.scss
@@ -3,10 +3,18 @@
 
   .form-check-label {
     width: 100%;
+    min-width: max-content;
   }
 
   .dropdown-menu {
     max-height: 450px;
     overflow-y: auto;
   }
+
+  &.disabled {
+    .dropdown-toggle {
+      background-color: #f8f9fa;
+      color: #6c757d;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/components/token.css.scss b/app/assets/stylesheets/components/token.css.scss
index dd99635775..229ad950b5 100644
--- a/app/assets/stylesheets/components/token.css.scss
+++ b/app/assets/stylesheets/components/token.css.scss
@@ -36,6 +36,12 @@
 .token.token-bordered {
   border: 1px solid var(--d-divider);
   color: var(--d-on-surface);
+
+  &.disabled {
+    opacity: 0.38;
+    cursor: initial;
+    pointer-events: none;
+  }
 }
 
 a.token {
diff --git a/app/controllers/activities_controller.rb b/app/controllers/activities_controller.rb
index 45c2b8564e..f1ee8a07f4 100644
--- a/app/controllers/activities_controller.rb
+++ b/app/controllers/activities_controller.rb
@@ -2,6 +2,7 @@ class ActivitiesController < ApplicationController
   include SeriesHelper
   include SetLtiMessage
   include Sortable
+  include HasFilter
 
   INPUT_SERVICE_WORKER = 'inputServiceWorker.js'.freeze
 
@@ -18,14 +19,14 @@ class ActivitiesController < ApplicationController
   protect_from_forgery except: %i[media input_service_worker]
 
   has_scope :by_filter, as: 'filter'
-  has_scope :by_labels, as: 'labels', type: :array, if: ->(this) { this.params[:labels].is_a?(Array) }
-  has_scope :by_programming_language, as: 'programming_language'
-  has_scope :by_type, as: 'type'
-  has_scope :in_repository, as: 'repository_id'
-  has_scope :by_description_languages, as: 'description_languages', type: :array
-  has_scope :by_judge, as: 'judge_id'
-  has_scope :by_popularities, as: 'popularity', type: :array
-  has_scope :is_draft, as: 'draft'
+  has_filter :programming_language
+  has_filter :type
+  has_filter :judge_id
+  has_filter :labels, multi: true
+  has_filter :repository_id
+  has_filter :draft
+  has_filter :popularity
+  has_filter :description_languages, multi: true
 
   has_scope :repository_scope, as: 'tab' do |controller, scope, value|
     course = Series.find(controller.params[:id]).course if controller.params[:id]
@@ -70,10 +71,11 @@ def index
 
     if params[:repository_id]
       @repository = Repository.find(params[:repository_id])
-      @activities = @activities.in_repository(@repository)
+      @activities = @activities.by_repository_id(params[:repository_id])
     end
 
     unless @activities.empty?
+      @filters = filters(@activities)
       @activities = apply_scopes(@activities)
       @activities = @activities.paginate(page: parse_pagination_param(params[:page]))
     end
@@ -101,6 +103,7 @@ def available
     authorize @series, :edit?
     @activities = policy_scope(Activity)
     @activities = @activities.or(Activity.where(repository: @course.usable_repositories)).order_by_popularity(:DESC)
+    @filters = filters(@activities)
     @activities = apply_scopes(@activities)
     @activities = @activities.order("name_#{I18n.locale}").order(path: :asc).paginate(page: parse_pagination_param(params[:page]))
   end
diff --git a/app/controllers/activity_read_states_controller.rb b/app/controllers/activity_read_states_controller.rb
index 89c5d15eac..080ea4f273 100644
--- a/app/controllers/activity_read_states_controller.rb
+++ b/app/controllers/activity_read_states_controller.rb
@@ -75,10 +75,7 @@ def set_activity_read_states
       @read_states = @read_states.of_user(@user)
     end
 
-    if params[:course_id]
-      @course = Course.find(params[:course_id])
-      @course_labels = CourseLabel.where(course: @course) if @user.blank? && current_user&.course_admin?(@course)
-    end
+    @course = Course.find(params[:course_id]) if params[:course_id]
 
     @series = Series.find(params[:series_id]) if params[:series_id]
     @activity = ContentPage.find(params[:activity_id]) if params[:activity_id]
@@ -96,6 +93,14 @@ def set_activity_read_states
       @read_states = @read_states.in_course(@course)
     end
 
+    if @course.present? && @user.blank? && current_user&.course_admin?(@course)
+      @filters = [{
+        param: 'course_labels',
+        multi: true,
+        data: @read_states.course_labels_filter_options(@course.id)
+      }]
+    end
+
     @course_membership = CourseMembership.find_by(user: @user, course: @course) if @user.present? && @course.present?
   end
 end
diff --git a/app/controllers/annotations_controller.rb b/app/controllers/annotations_controller.rb
index 5f8a6c77c1..6c20c21f4b 100644
--- a/app/controllers/annotations_controller.rb
+++ b/app/controllers/annotations_controller.rb
@@ -1,10 +1,12 @@
 class AnnotationsController < ApplicationController
+  include HasFilter
   before_action :set_submission, only: %i[create]
   before_action :set_annotation, only: %i[show update destroy]
 
   has_scope :by_submission, as: :submission_id
   has_scope :by_user, as: :user_id
-  has_scope :by_course, as: :course_id
+  has_filter :course_id
+  has_filter :question_state
 
   has_scope :by_filter, as: 'filter' do |controller, scope, value|
     scope.by_filter(value, skip_user: controller.params[:user_id].present?, skip_exercise: controller.params[:exercise_id].present?)
@@ -19,8 +21,7 @@ def question_index
     authorize Question, :index?
     @user = User.find(params[:user_id]) if params[:user_id]
 
-    @questions = policy_scope(Question).merge(apply_scopes(Question).all)
-    @questions = @questions.where(question_state: params[:question_state]) if params[:question_state]
+    @questions = policy_scope(Question)
 
     @unfiltered = @user.nil? && params[:course_id].nil?
 
@@ -32,11 +33,12 @@ def question_index
       )
     end
 
+    @filters = filters(@questions)
+    @questions = @questions.merge(apply_scopes(Question).all)
+    @questions = @questions.where(question_state: params[:question_state]) if params[:question_state]
+
     # Preload dependencies for efficiency
     @questions = @questions.includes(:user, :last_updated_by, submission: %i[exercise course])
-
-    @courses = policy_scope(Course.where(id: @questions.pluck(:course_id)))
-
     @questions = @questions.order(created_at: :desc).paginate(page: parse_pagination_param(params[:page]))
     @title = I18n.t('questions.index.title')
     @crumbs = []
diff --git a/app/controllers/auth/authentication_controller.rb b/app/controllers/auth/authentication_controller.rb
index b4a22f1bc7..9dfd3addbc 100644
--- a/app/controllers/auth/authentication_controller.rb
+++ b/app/controllers/auth/authentication_controller.rb
@@ -1,7 +1,7 @@
 class Auth::AuthenticationController < Devise::SessionsController
   # A sign-out route is inherited from the parent controller.
 
-  has_scope :by_institution, as: 'institution_id'
+  has_scope :by_institution_id, as: 'institution_id'
 
   skip_before_action :verify_authenticity_token, raise: false
 
diff --git a/app/controllers/concerns/has_filter.rb b/app/controllers/concerns/has_filter.rb
new file mode 100644
index 0000000000..d487177fa3
--- /dev/null
+++ b/app/controllers/concerns/has_filter.rb
@@ -0,0 +1,40 @@
+module HasFilter
+  extend ActiveSupport::Concern
+  included do
+    class_attribute :filter_options
+    self.filter_options = []
+
+    def filters(target)
+      filter_options.map do |name, multi|
+        scope_params = params.except(:controller, :action, :page)
+        scope_params = scope_params.except(name) unless multi
+        {
+          param: name,
+          data: apply_scopes(target, scope_params).send("#{name}_filter_options"),
+          multi: multi
+        }
+      end
+    end
+  end
+
+  class_methods do
+    def has_filter(name, multi: false) # rubocop:disable Naming/PredicateName
+      if multi
+        has_scope "by_#{name}", as: name, type: :array, if: ->(this) { this.params[name].is_a?(Array) }
+      else
+        has_scope "by_#{name}", as: name
+      end
+
+      # inherit filter options from parent controller, but don't modify it
+      self.filter_options = filter_options.dup
+
+      filter_options << [name, multi]
+    end
+
+    def set_filter_headers(options = {})
+      after_action(options) do
+        headers['X-Filters'] = @filters.to_json
+      end
+    end
+  end
+end
diff --git a/app/controllers/course_members_controller.rb b/app/controllers/course_members_controller.rb
index 838eb9b6af..d1a8bacc6e 100644
--- a/app/controllers/course_members_controller.rb
+++ b/app/controllers/course_members_controller.rb
@@ -1,11 +1,12 @@
 class CourseMembersController < ApplicationController
+  include HasFilter
   before_action :set_course
   before_action :set_course_membership_and_user, only: %i[show edit update]
 
   has_scope :by_permission
-  has_scope :by_institution, as: 'institution_id'
   has_scope :by_filter, as: 'filter'
-  has_scope :by_course_labels, as: 'course_labels', type: :array
+  has_filter :course_labels, multi: true
+  has_filter :institution_id
 
   has_scope :order_by, using: %i[column direction], type: :hash do |controller, scope, value|
     column, direction = value
@@ -30,13 +31,15 @@ def index
                  %w[course_admin student]
                end
 
-    @course_memberships = apply_scopes(@course.course_memberships.order_by_status_in_course_and_name('ASC'))
+    @course_memberships = @course.course_memberships
+                                 .order_by_status_in_course_and_name('ASC')
+                                 .where(status: statuses)
+    @filters = filters(@course_memberships)
+    @course_memberships = apply_scopes(@course_memberships)
                           .includes(:course_labels, user: [:institution])
-                          .where(status: statuses)
 
     @title = I18n.t('courses.index.users')
     @crumbs = [[@course.name, course_path(@course)], [I18n.t('courses.index.users'), '#']]
-    @course_labels = CourseLabel.where(course: @course)
 
     respond_to do |format|
       format.html do
diff --git a/app/controllers/courses_controller.rb b/app/controllers/courses_controller.rb
index 62765203bd..a923fa92d8 100644
--- a/app/controllers/courses_controller.rb
+++ b/app/controllers/courses_controller.rb
@@ -2,13 +2,14 @@
 
 class CoursesController < ApplicationController
   include SetLtiMessage
+  include HasFilter
 
   before_action :set_course_and_current_membership, except: %i[index new create]
   before_action :set_lti_message, only: %i[show]
   before_action :set_lti_provider, only: %i[show]
 
   has_scope :by_filter, as: 'filter'
-  has_scope :by_institution, as: 'institution_id'
+  has_filter :institution_id
   has_scope :at_least_one_started, type: :boolean, only: :scoresheet do |controller, scope|
     scope.at_least_one_started_in_course(Course.find(controller.params[:id])).or(scope.at_least_one_read_in_course(Course.find(controller.params[:id])))
   end
@@ -50,6 +51,7 @@ def index
     @show_institution_courses = current_user&.institution && @courses.where(institution: current_user.institution).count > 0
 
     if params[:copy_courses]
+      @filters = filters(@courses)
       @courses = apply_scopes(@courses)
       @courses = @courses.reorder(featured: :desc, year: :desc, name: :asc)
       @own_courses = @courses.select { |course| current_user&.admin_of?(course) }
@@ -63,6 +65,7 @@ def index
       elsif params[:tab] == 'featured'
         @courses = @courses.where(featured: true)
       end
+      @filters = filters(@courses) unless current_user && params[:tab] == 'institution'
       @courses = apply_scopes(@courses)
     end
 
@@ -222,11 +225,15 @@ def statistics
   def scoresheet
     @title = I18n.t('courses.scoresheet.scoresheet')
     @crumbs = [[@course.name, course_path(@course)], [I18n.t('courses.scoresheet.scoresheet'), '#']]
-    @course_labels = CourseLabel.where(course: @course)
 
     unless request.format == :html
       scores = @course.scoresheet
       @users = apply_scopes(scores[:users])
+      @filters = [{
+        param: 'course_labels',
+        multi: true,
+        data: @users.course_labels_filter_options(@course.id)
+      }]
       @series = scores[:series]
 
       # this maps a [user_id, series_id] tuple to an object containing the number of accepted and started exercises
diff --git a/app/controllers/evaluations_controller.rb b/app/controllers/evaluations_controller.rb
index 8dfaeb42be..baeb149580 100644
--- a/app/controllers/evaluations_controller.rb
+++ b/app/controllers/evaluations_controller.rb
@@ -1,11 +1,12 @@
 class EvaluationsController < ApplicationController
   include SeriesHelper
   include EvaluationHelper
+  include HasFilter
 
   before_action :set_evaluation, only: %i[show edit update destroy overview set_multi_user add_user remove_user mark_undecided_complete export_grades modify_grading_visibility]
   before_action :set_series, only: %i[new]
 
-  has_scope :by_institution, as: 'institution_id'
+  has_filter :institution_id
   has_scope :by_filter, as: 'filter'
   has_scope :by_course_labels, as: 'course_labels', type: :array do |controller, scope, value|
     if controller.params[:action] == 'show'
@@ -22,8 +23,15 @@ def show
       return
     end
     @feedbacks = @evaluation.evaluation_sheet
+    @filters = filters(@evaluation.users)
     @users = apply_scopes(@evaluation.users)
-    @course_labels = CourseLabel.where(course: @evaluation.series.course)
+
+    course = @evaluation.series.course
+    @filters << {
+      param: 'course_labels',
+      multi: true,
+      data: @users.course_labels_filter_options(course.id)
+    }
     @crumbs = [[@evaluation.series.course.name, course_url(@evaluation.series.course)], [@evaluation.series.name, breadcrumb_series_path(@evaluation.series, current_user)], [I18n.t('evaluations.show.evaluation'), '#']]
     @title = I18n.t('evaluations.show.evaluation')
   end
@@ -47,7 +55,12 @@ def new
   def edit
     @should_confirm = params[:confirm].present?
     @course = @evaluation.series.course
-    @course_labels = CourseLabel.where(course: @course)
+    @filters = filters(@course.course_memberships)
+    @filters << {
+      param: 'course_labels',
+      multi: true,
+      data: apply_scopes(@course.course_memberships).course_labels_filter_options
+    }
     @course_memberships = apply_scopes(@course.course_memberships)
                           .includes(:course_labels, user: [:institution])
                           .order(status: :asc)
@@ -72,7 +85,12 @@ def create
     authorize @evaluation
     @evaluation.exercises = @evaluation.series.exercises
     @course = @evaluation.series.course
-    @course_labels = CourseLabel.where(course: @course)
+    @filters = filters(@course.course_memberships)
+    @filters << {
+      param: 'course_labels',
+      multi: true,
+      data: apply_scopes(@course.course_memberships).course_labels_filter_options
+    }
     @course_memberships = apply_scopes(@course.course_memberships)
                           .includes(:course_labels, user: [:institution])
                           .order(status: :asc)
diff --git a/app/controllers/events_controller.rb b/app/controllers/events_controller.rb
index 7f94d45278..7725184063 100644
--- a/app/controllers/events_controller.rb
+++ b/app/controllers/events_controller.rb
@@ -1,8 +1,11 @@
 class EventsController < ApplicationController
-  has_scope :by_type, as: 'type'
+  include HasFilter
+
+  has_filter :event_type
 
   def index
     authorize Event
+    @filters = filters(policy_scope(Event))
     @events = apply_scopes(policy_scope(Event)).paginate(page: parse_pagination_param(params[:page]))
     @title = I18n.t('events.index.title')
   end
diff --git a/app/controllers/feedbacks_controller.rb b/app/controllers/feedbacks_controller.rb
index f445dcbacf..cc36be0d61 100644
--- a/app/controllers/feedbacks_controller.rb
+++ b/app/controllers/feedbacks_controller.rb
@@ -1,5 +1,6 @@
 class FeedbacksController < ApplicationController
   include SeriesHelper
+  include HasFilter
 
   before_action :set_feedback, only: %i[show edit update destroy_scores]
 
@@ -7,7 +8,7 @@ class FeedbacksController < ApplicationController
     scope.by_filter(value, skip_user: true, skip_exercise: true)
   end
 
-  has_scope :by_status, as: 'status'
+  has_filter :status
 
   content_security_policy only: %i[show] do |policy|
     # allow sandboxed description
@@ -43,9 +44,10 @@ def show
   end
 
   def edit
-    @submissions = apply_scopes(Submission)
-                   .in_series(@feedback.evaluation.series)
-                   .where(user: @feedback.user, exercise: @feedback.exercise)
+    @submissions = Submission.in_series(@feedback.evaluation.series)
+                             .where(user: @feedback.user, exercise: @feedback.exercise)
+    @filters = filters(@submissions)
+    @submissions = apply_scopes(@submissions)
                    .paginate(page: parse_pagination_param(params[:page]))
     @crumbs = [
       [@feedback.evaluation.series.course.name, course_url(@feedback.evaluation.series.course)],
diff --git a/app/controllers/saved_annotations_controller.rb b/app/controllers/saved_annotations_controller.rb
index d74155918b..a832e500ab 100644
--- a/app/controllers/saved_annotations_controller.rb
+++ b/app/controllers/saved_annotations_controller.rb
@@ -1,11 +1,13 @@
 class SavedAnnotationsController < ApplicationController
   include Sortable
+  include HasFilter
   set_pagination_headers :saved_annotations, only: [:index]
+  set_filter_headers only: [:index]
   before_action :set_saved_annotation, only: %i[show update destroy edit]
 
   has_scope :by_user, as: 'user_id'
-  has_scope :by_course, as: 'course_id'
-  has_scope :by_exercise, as: 'exercise_id'
+  has_filter :course_id
+  has_filter :exercise_id
   has_scope :by_filter, as: 'filter'
 
   order_by :annotations_count, :title, :annotation_text, :created_at
@@ -14,10 +16,9 @@ def index
     authorize SavedAnnotation
     @title = I18n.t('saved_annotations.index.title')
     @crumbs = [[I18n.t('saved_annotations.index.title'), saved_annotations_path]]
-    saved_annotations = policy_scope(SavedAnnotation.order_by_annotations_count(:DESC))
-    @courses = Course.where(id: saved_annotations.pluck(:course_id).uniq)
-    @exercises = Activity.where(id: saved_annotations.pluck(:exercise_id).uniq)
-    @saved_annotations = apply_scopes(saved_annotations)
+    saved_annotations = policy_scope(SavedAnnotation)
+    @filters = filters(saved_annotations)
+    @saved_annotations = apply_scopes(saved_annotations.order_by_annotations_count(:DESC))
                          .includes(:course).includes(:user).includes(:exercise)
                          .paginate(page: parse_pagination_param(params[:page]), per_page: parse_pagination_param(params[:per_page]))
   end
@@ -42,6 +43,7 @@ def new
     authorize SavedAnnotation
     @annotations = AnnotationPolicy::Scope.new(current_user, Annotation.all).resolve
     @annotations = @annotations.where(saved_annotation_id: nil).where(user_id: current_user.id)
+    @filters = filters(@annotations)
     submissions = Submission.where(id: @annotations.pluck(:submission_id).uniq)
     @courses = Course.where(id: submissions.pluck(:course_id).uniq)
     @exercises = Activity.where(id: submissions.pluck(:exercise_id).uniq)
diff --git a/app/controllers/series_controller.rb b/app/controllers/series_controller.rb
index d2329b305e..22ef7315d9 100644
--- a/app/controllers/series_controller.rb
+++ b/app/controllers/series_controller.rb
@@ -1,6 +1,7 @@
 class SeriesController < ApplicationController
   include ExportHelper
   include SetLtiMessage
+  include HasFilter
 
   before_action :set_series, except: %i[index new create]
   before_action :check_token, only: %i[show overview]
@@ -191,6 +192,11 @@ def scoresheet
 
     scores = @series.scoresheet
     @users = apply_scopes(scores[:users])
+    @filters = [{
+      param: 'course_labels',
+      multi: true,
+      data: @users.course_labels_filter_options(@course.id)
+    }]
     @activities = scores[:activities]
     @submissions = scores[:submissions]
     @read_states = scores[:read_states]
diff --git a/app/controllers/submissions_controller.rb b/app/controllers/submissions_controller.rb
index 809f266841..98048ac161 100644
--- a/app/controllers/submissions_controller.rb
+++ b/app/controllers/submissions_controller.rb
@@ -3,6 +3,7 @@ class SubmissionsController < ApplicationController
   include TimeHelper
   include ActionView::Helpers::DateHelper
   include Sortable
+  include HasFilter
 
   before_action :set_submission, only: %i[show download evaluate edit media]
   before_action :set_submissions, only: %i[index mass_rejudge show]
@@ -12,7 +13,7 @@ class SubmissionsController < ApplicationController
     scope.by_filter(value, skip_user: controller.params[:user_id].present?, skip_exercise: controller.params[:activity_id].present?)
   end
 
-  has_scope :by_status, as: 'status'
+  has_filter :status
 
   has_scope :by_course_labels, as: 'course_labels', type: :array do |controller, scope, value|
     course = Course.find_by(id: controller.params[:course_id]) if controller.params[:course_id].present?
@@ -168,16 +169,13 @@ def set_submission
   # The logic here is very similar to that of set_activity_read_states in activity_read_states_controller
   # changes made here are potentially applicable to both functions
   def set_submissions
-    @submissions = policy_scope(Submission).merge(apply_scopes(Submission).all)
+    @submissions = policy_scope(Submission)
     if params[:user_id]
       @user = User.find(params[:user_id])
       @submissions = @submissions.of_user(@user)
     end
-    if params[:course_id]
-      @course = Course.find(params[:course_id])
-      @course_labels = CourseLabel.where(course: @course) if @user.blank? && current_user&.course_admin?(@course)
-    end
 
+    @course = Course.find(params[:course_id]) if params[:course_id]
     @series = Series.find(params[:series_id]) if params[:series_id]
     # both /activities/:id/submissions and /exercises/:id/submissions are valid routes
     activity_id = params[:activity_id] || params[:exercise_id]
@@ -199,6 +197,16 @@ def set_submissions
       @submissions = @submissions.of_judge(@judge)
     end
 
+    @filters = filters(@submissions)
+    @submissions = apply_scopes(@submissions)
+    if @course.present? && @user.blank? && current_user&.course_admin?(@course)
+      @filters << {
+        param: 'course_labels',
+        multi: true,
+        data: @submissions.course_labels_filter_options(@course.id)
+      }
+    end
+
     @course_membership = CourseMembership.find_by(user: @user, course: @course) if @user.present? && @course.present?
 
     return unless params[:most_recent_per_user]
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 0fd1ef660e..5f4bcd6114 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -1,9 +1,10 @@
 class UsersController < ApplicationController
+  include HasFilter
   before_action :set_user, only: %i[show edit update destroy impersonate token_sign_in]
   before_action :set_users, only: %i[index available_for_repository]
 
   has_scope :by_permission
-  has_scope :by_institution, as: 'institution_id'
+  has_filter :institution_id
   has_scope :by_filter, as: 'filter'
 
   # GET /users
@@ -122,6 +123,7 @@ def set_user
 
   def set_users
     authorize User
+    @filters = filters(User)
     @users = apply_scopes(User).order(permission: :desc, last_name: :asc, first_name: :asc).paginate(page: parse_pagination_param(params[:page]))
   end
 end
diff --git a/app/models/activity.rb b/app/models/activity.rb
index 27f27daa5c..0736283555 100644
--- a/app/models/activity.rb
+++ b/app/models/activity.rb
@@ -30,10 +30,10 @@
 
 class Activity < ApplicationRecord
   include ActionView::Helpers::DateHelper
-  include Filterable
   include StringHelper
   include Cacheable
   include Tokenable
+  include Filterable
 
   USERS_READ_CACHE_STRING = '/course/%<course_id>s/activity/%<id>s/users_read'.freeze
   CONFIG_FILE = 'config.json'.freeze
@@ -73,35 +73,43 @@ class Activity < ApplicationRecord
   scope :content_pages, -> { where(type: ContentPage.name) }
   scope :exercises, -> { where(type: Exercise.name) }
 
-  scope :in_repository, ->(repository) { where repository: repository }
-
   scope :by_name, ->(name) { where('name_nl LIKE ? OR name_en LIKE ? OR path LIKE ?', "%#{name}%", "%#{name}%", "%#{name}%") }
-  scope :by_status, ->(status) { where(status: status.in?(statuses) ? status : -1) }
-  scope :by_access, ->(access) { where(access: access.in?(accesses) ? access : -1) }
-  scope :by_labels, ->(labels) { includes(:labels).where(labels: { name: labels }).group(:id).having('COUNT(DISTINCT(activity_labels.label_id)) = ?', labels.uniq.length) }
-  scope :by_programming_language, ->(programming_language) { includes(:programming_language).where(programming_languages: { name: programming_language }) }
-  scope :by_type, ->(type) { where(type: type) }
-  scope :by_judge, ->(judge) { where(judge_id: judge) }
-  scope :is_draft, ->(value = true) { where(draft: value) }
+  search_by :name_nl, :name_en, :path
+  filterable_by :status, is_enum: true
+  filterable_by :access, is_enum: true
+  filterable_by :programming_language, column: 'programming_languages.name', associations: :programming_language
+  filterable_by :type, name_hash: ->(_) { { Exercise.name => Exercise.model_name.human, ContentPage.name => ContentPage.model_name.human } }
+  filterable_by :judge_id, model: Judge
+  filterable_by :labels, multi: true, associations: :labels, column: 'labels.name'
+  filterable_by :repository_id, model: Repository
+  filterable_by :draft, name_hash: ->(_) { { true => I18n.t('activities.index.filters.draft'), false => I18n.t('activities.index.filters.not_draft') } }
   scope :by_description_languages, lambda { |languages|
     by_language = all # allow chaining of scopes
     by_language = by_language.where(description_en_present: true) if languages.include? 'en'
     by_language = by_language.where(description_nl_present: true) if languages.include? 'nl'
     by_language
   }
+  filter_options_for :description_languages do
+    [{ id: 'nl', name: I18n.t('js.nl'), count: where(description_nl_present: true).count },
+     { id: 'en', name: I18n.t('js.en'), count: where(description_en_present: true).count }]
+      .filter { |lang| lang[:count].positive? }
+  end
   scope :by_popularity, lambda { |popularity|
     thresholds = POPULARITY_THRESHOLDS[popularity.to_sym]
     filtered = where("series_count >= #{thresholds[:min]}")
     filtered = filtered.where("series_count <= #{thresholds[:max]}") if thresholds[:max].present?
     filtered
   }
-  scope :by_popularities, lambda { |popularities|
-    filtered = by_popularity(popularities.first)
-    popularities.drop(1).each do |popularity|
-      filtered = filtered.or(by_popularity(popularity))
-    end
-    filtered
-  }
+  filter_options_for :popularity do
+    count_by_popularity = select(
+      POPULARITY_THRESHOLDS.map do |popularity, thresholds|
+        "COUNT(CASE WHEN series_count >= #{thresholds[:min]} #{thresholds[:max].present? ? "AND series_count <= #{thresholds[:max]}" : ''} THEN 1 ELSE NULL END) AS #{popularity}"
+      end
+    )
+    count_by_popularity.first.attributes.except('id').map do |popularity, count|
+      { id: popularity, name: human_enum_name(:popularity, popularity), count: count }
+    end.filter { |popularity| popularity[:count].positive? }
+  end
 
   scope :order_by_name, ->(direction) { reorder(Arel.sql("name_#{I18n.locale} IS NULL, name_#{I18n.locale} #{direction}")).order(path: direction) }
   scope :order_by_popularity, ->(direction) { reorder("series_count #{direction}") }
@@ -447,10 +455,6 @@ def safe_destroy
     destroy
   end
 
-  def set_search
-    self.search = "#{Activity.human_enum_name(:status, status, locale: :nl)} #{Activity.human_enum_name(:status, status, locale: :en)} #{Activity.human_enum_name(:access, access, locale: :en)} #{Activity.human_enum_name(:access, access, locale: :nl)} #{name_nl} #{name_en} #{path}"
-  end
-
   def self.parse_type(type)
     return Exercise.name unless type
     return type if types.include?(type)
diff --git a/app/models/activity_read_state.rb b/app/models/activity_read_state.rb
index 2ee09d67bf..01d15eab85 100644
--- a/app/models/activity_read_state.rb
+++ b/app/models/activity_read_state.rb
@@ -11,6 +11,9 @@
 #  series_id   :integer
 #
 class ActivityReadState < ApplicationRecord
+  include FilterableByCourseLabels
+  include Filterable
+
   belongs_to :activity
   belongs_to :course, optional: true
   belongs_to :series, optional: true
@@ -39,7 +42,7 @@ class ActivityReadState < ApplicationRecord
     end.reduce(&:merge)
   }
 
-  scope :by_course_labels, ->(labels, course_id) { where(user: CourseMembership.where(course_id: course_id).by_course_labels(labels).map(&:user)) }
+  filterable_by_course_labels through_user: true
 
   def invalidate_caches
     activity.invalidate_delayed_users_read
diff --git a/app/models/annotation.rb b/app/models/annotation.rb
index e0e9d45574..465ef45b61 100644
--- a/app/models/annotation.rb
+++ b/app/models/annotation.rb
@@ -22,6 +22,7 @@
 #
 class Annotation < ApplicationRecord
   include ApplicationHelper
+  include Filterable
 
   belongs_to :course
   belongs_to :submission
@@ -54,10 +55,10 @@ class Annotation < ApplicationRecord
   scope :by_submission, ->(submission_id) { where(submission_id: submission_id) }
   scope :by_user, ->(user_id) { where(user_id: user_id) }
   scope :released, -> { left_joins(:evaluation).where(evaluation_id: nil).or(where(evaluations: { released: true })) }
-  scope :by_course, ->(course_id) { where(submission: Submission.in_course(Course.find(course_id))) }
   scope :by_username, ->(name) { where(user: User.by_filter(name)) }
   scope :by_exercise_name, ->(name) { where(submission: Submission.by_exercise_name(name)) }
-  scope :by_exercise, ->(exercise_id) { where(submission: { exercise_id: exercise_id }) }
+  filterable_by :course_id, model: Course
+  filterable_by :exercise_id, associations: :submission, column: 'submissions.exercise_id', model: Exercise
 
   scope :order_by_annotation_text, ->(direction) { reorder(annotation_text: direction) }
   scope :order_by_created_at, ->(direction) { reorder(created_at: direction) }
diff --git a/app/models/concerns/filterable.rb b/app/models/concerns/filterable.rb
index 907efbfe8d..13e3448008 100644
--- a/app/models/concerns/filterable.rb
+++ b/app/models/concerns/filterable.rb
@@ -1,8 +1,92 @@
+# This concern allows models to define scopes for filtering by columns
+# These scopes are created with the name `by_#{column}`
+# and a correlating function that counts the possible values for the column is also created
 module Filterable
   extend ActiveSupport::Concern
 
-  included do
-    before_save :set_search
-    scope :by_filter, ->(filter) { filter.split.map(&:strip).compact_blank.inject(self) { |query, part| query.where("#{table_name}.search LIKE ?", "%#{part}%") } }
+  class_methods do
+    # Creates a scope called by_filter that searches for the give value in the search column
+    # Search should be a string column defined in the model
+    # It will be set to the concatenation of the values of the columns passed to the search_by method
+    # This is useful for searching for a value in multiple columns in an efficient way
+    # params:
+    # +columns+:: The columns to search for
+    def search_by(*columns)
+      define_method(:set_search) do
+        self.search = columns.map { |column| send(column) || '' }.join(' ')
+      end
+
+      before_save :set_search
+      scope :by_filter, ->(filter) { filter.split.map(&:strip).compact_blank.inject(self) { |query, part| query.where("#{table_name}.search LIKE ?", "%#{part}%") } }
+    end
+
+    # Creates a method that returns the possible values for the column
+    # The return value should be a list of hashes with the id, name and count of each value
+    def filter_options_for(name, &block)
+      define_singleton_method("#{name}_filter_options", &block)
+    end
+
+    # Creates a scope for the column, with the name `by_#{column}`
+    # It also creates a method `#{column}_filter_options` that returns the possible values for the column, with the count of each value
+    # params:
+    # +name+:: The name of the scope
+    # +column+:: The column to create the scope for
+    # +associations+:: The associations to include in the scope
+    # +multi+:: If the scope should accept multiple values
+    # +is_enum+:: If the column is an enum
+    # +model+:: If the column is a foreign key, the model to use to get the human readable name for the column values
+    # +name_hash+:: a lambda that takes a list af column values and returns a hash with the human readable name for each column value
+    # +always_match_nil+:: If the scope should always match nil values (ie. nil is treated as a wildcard, that should match all values)
+    def filterable_by(name, column: name, associations: [], multi: false, is_enum: false, model: nil, name_hash: nil, always_match_nil: false) # rubocop:disable Metrics/ParameterLists
+      value_check = if is_enum
+                      # We should only allow filtering with valid options in the enum
+                      ->(value) { value.in? send(column.to_s.pluralize.to_s) }
+                    elsif multi
+                      # If the scope accepts multiple values, the values should be an array
+                      ->(value) { value.is_a?(Array) }
+                    else
+                      ->(_) { true }
+                    end
+
+      name_hash ||= if is_enum
+                      # If the column is an enum, we should use the human readable name for the values
+                      ->(values) { values.index_with { |s| human_enum_name(column.to_s.pluralize.to_s, s) } }
+                    elsif model
+                      # If the column is a foreign key, we should use the name of the object
+                      ->(values) { model.where(id: values).to_h { |s| [s.id, s.name] } }
+                    else
+                      # Otherwise, we should just use the value itself
+                      ->(values) { values.to_h { |s| [s, s] } }
+                    end
+
+      scope "by_#{name}", lambda { |value|
+        if value_check.call(value)
+          scope = joins(associations).where(column => value)
+          scope = scope.or(joins(associations).where(column => nil)) if always_match_nil
+          # If the scope accepts multiple values, we should only return the results that match all the values
+          # This is done by grouping the results by id and checking if the count of distinct values is equal to the number of values
+          # To avoid the group by clause to impact future scopes, we reselect the currently filtered elements by id
+          scope = unscoped.where(id: scope.group(:id).having("COUNT(DISTINCT(#{column})) = ?", value.uniq.length).select(:id)) if multi
+          scope
+        else
+          none
+        end
+      }
+
+      # The method that returns the possible values for the column
+      # It returns a list of hashes with the id, name and count of each value
+      filter_options_for name do
+        count = joins(associations).group(column).count
+
+        names = name_hash.call(count.keys)
+
+        nil_count = count[nil] || 0
+
+        result = count.map { |key, value| { id: key.to_s, name: names[key].to_s, count: value } }
+        result = result.filter { |option| option[:name].present? } # Remove empty values
+        result = result.map { |o| { id: o[:id], name: o[:name], count: o[:count] + nil_count } } if always_match_nil
+        result
+      end
+    end
   end
 end
diff --git a/app/models/concerns/filterable_by_course_labels.rb b/app/models/concerns/filterable_by_course_labels.rb
new file mode 100644
index 0000000000..24d1e57240
--- /dev/null
+++ b/app/models/concerns/filterable_by_course_labels.rb
@@ -0,0 +1,34 @@
+module FilterableByCourseLabels
+  extend ActiveSupport::Concern
+
+  class_methods do
+    # Creates a scope for course_labels, with the name `by_course_labels`
+    # It also creates a method `course_labels_filter_options`
+    # that returns the possible values for the column, with the count of each value
+    # This is a special case of the filterable_by method of the Filterable concern,
+    # as the course_id is required to get the course_labels
+    def filterable_by_course_labels(through_user: false)
+      if through_user
+        has_many :course_memberships, through: :user
+        has_many :course_labels, through: :course_memberships
+      end
+
+      scope :by_course_labels, lambda { |labels, course_id|
+        unscoped.where(id: select(:id))
+                .joins(:course_memberships)
+                .where(course_memberships: { id: CourseMembership.where(course_id: course_id).by_course_labels(labels) })
+      }
+
+      define_singleton_method('course_labels_filter_options') do |course_id|
+        count = unscoped.where(id: select(:id))
+                        .joins(:course_labels)
+                        .where(course_memberships: { course_id: course_id })
+                        .group('course_labels.name')
+                        .count
+
+        count.map { |key, value| { id: key.to_s, name: key.to_s, count: value } }
+             .filter { |option| option[:name].present? }
+      end
+    end
+  end
+end
diff --git a/app/models/course.rb b/app/models/course.rb
index 60bc38e774..aab3bab18d 100644
--- a/app/models/course.rb
+++ b/app/models/course.rb
@@ -23,10 +23,10 @@
 require 'csv'
 
 class Course < ApplicationRecord
-  include Filterable
   include Cacheable
   include Tokenable
   include ActionView::Helpers::SanitizeHelper
+  include Filterable
 
   SUBSCRIBED_MEMBERS_COUNT_CACHE_STRING = '/courses/%<id>d/subscribed_members_count'.freeze
   ACTIVITIES_COUNT_CACHE_STRING = '/courses/%<id>d/activities_count'.freeze
@@ -161,9 +161,10 @@ class Course < ApplicationRecord
   validate :should_have_institution_when_visible_for_institution
   validate :should_have_institution_when_open_for_institution
 
+  search_by :name, :teacher, :year
   scope :by_name, ->(name) { where('name LIKE ?', "%#{name}%") }
   scope :by_teacher, ->(teacher) { where('teacher LIKE ?', "%#{teacher}%") }
-  scope :by_institution, ->(institution) { where(institution: institution) }
+  filterable_by :institution_id, model: Institution
   scope :can_register, lambda { |user|
     if user&.institutional?
       where(registration: %i[open_for_all open_for_institutional_users])
@@ -405,10 +406,6 @@ def self.format_year(year)
     year.sub(/ ?- ?/, '–')
   end
 
-  def set_search
-    self.search = "#{teacher || ''} #{name || ''} #{year || ''}"
-  end
-
   def color
     colors = %w[blue-gray orange cyan purple teal pink indigo brown deep-purple]
     colors[year.to_i % colors.size]
diff --git a/app/models/course_membership.rb b/app/models/course_membership.rb
index b4c9063ab9..9fc7ae58b2 100644
--- a/app/models/course_membership.rb
+++ b/app/models/course_membership.rb
@@ -12,6 +12,7 @@
 #
 
 class CourseMembership < ApplicationRecord
+  include Filterable
   enum :status, { pending: 0, course_admin: 1, student: 2, unsubscribed: 3 }
 
   belongs_to :course
@@ -28,15 +29,10 @@ class CourseMembership < ApplicationRecord
   after_save :invalidate_caches
   after_save :delete_unused_course_labels
 
-  scope :by_institution, ->(institution) { where(user: User.by_institution(institution)) }
   scope :by_permission, ->(permission) { where(user: User.by_permission(permission)) }
   scope :by_filter, ->(filter) { where(user: User.by_filter(filter)) }
-  scope :by_course_labels, lambda { |course_labels|
-    includes(:course_labels)
-      .where(course_labels: { name: course_labels })
-      .group(:id)
-      .having('COUNT(DISTINCT(course_membership_labels.course_label_id)) = ?', course_labels.uniq.length)
-  }
+  filterable_by :course_labels, associations: :course_labels, column: 'course_labels.name', multi: true
+  filterable_by :institution_id, associations: { user: [:institution] }, column: 'institutions.id', model: Institution
 
   scope :order_by_status_in_course_and_name, ->(direction) { joins(:user).merge(User.order_by_status_in_course_and_name(direction)) }
   scope :order_by_progress, ->(direction, course) { joins(:user).merge(User.order_by_progress(direction, course)) }
diff --git a/app/models/event.rb b/app/models/event.rb
index 619d21b3a4..c53fdfa03a 100644
--- a/app/models/event.rb
+++ b/app/models/event.rb
@@ -11,12 +11,13 @@
 #
 
 class Event < ApplicationRecord
+  include Filterable
   enum :event_type, { rejudge: 0, permission_change: 1, exercise_repository: 2, error: 3, other: 4 }
   belongs_to :user, optional: true
 
   validates :event_type, presence: true
   validates :message, presence: true
 
-  scope :by_type, ->(type) { where(event_type: type.in?(event_types) ? type : -1) }
+  filterable_by :event_type, is_enum: true
   default_scope { order(id: :desc) }
 end
diff --git a/app/models/provider.rb b/app/models/provider.rb
index 0ee5990973..2633e3e508 100644
--- a/app/models/provider.rb
+++ b/app/models/provider.rb
@@ -35,7 +35,7 @@ class Provider < ApplicationRecord
   scope :saml, -> { where(type: Provider::Saml.name) }
   scope :smartschool, -> { where(type: Provider::Smartschool.name) }
   scope :surf, -> { where(type: Provider::Surf.name) }
-  scope :by_institution, ->(institution) { where(institution_id: institution) }
+  scope :by_institution_id, ->(institution) { where(institution_id: institution) }
 
   validates :mode, presence: true
   validate :at_least_one_preferred
diff --git a/app/models/question.rb b/app/models/question.rb
index b4b806266d..120f32c63d 100644
--- a/app/models/question.rb
+++ b/app/models/question.rb
@@ -21,12 +21,14 @@
 #  columns             :integer
 #
 class Question < Annotation
+  include Filterable
   belongs_to :user, inverse_of: :questions
   counter_culture :user, column_name: proc { |question| question.answered? ? nil : 'open_questions_count' }
 
   after_save :schedule_reset_in_progress, if: :saved_change_to_question_state?
   after_commit :clear_transition
 
+  filterable_by :question_state, is_enum: true
   enum :question_state, { unanswered: 0, in_progress: 1, answered: 2 }
   alias_attribute :question_text, :annotation_text
 
diff --git a/app/models/saved_annotation.rb b/app/models/saved_annotation.rb
index 169cf5d915..d5dabe8844 100644
--- a/app/models/saved_annotation.rb
+++ b/app/models/saved_annotation.rb
@@ -13,6 +13,7 @@
 #  annotations_count :integer          default(0)
 #
 class SavedAnnotation < ApplicationRecord
+  include Filterable
   validates :title, presence: true
   validates :annotation_text, presence: true
 
@@ -24,8 +25,8 @@ class SavedAnnotation < ApplicationRecord
   has_many :submissions, through: :annotations
 
   scope :by_user, ->(user_id) { where user_id: user_id }
-  scope :by_course, ->(course_id) { where(course_id: course_id).or(where(course_id: nil)) }
-  scope :by_exercise, ->(exercise_id) { where(exercise_id: exercise_id).or(where(exercise_id: nil)) }
+  filterable_by :exercise_id, model: Exercise, always_match_nil: true
+  filterable_by :course_id, model: Course, always_match_nil: true
   scope :by_filter, ->(filter) { where 'title LIKE ? or annotation_text LIKE ?', "%#{filter}%", "%#{filter}%" }
 
   scope :order_by_annotations_count, ->(direction) { reorder(annotations_count: direction) }
diff --git a/app/models/submission.rb b/app/models/submission.rb
index 918fa55a5f..5d0d81ad62 100644
--- a/app/models/submission.rb
+++ b/app/models/submission.rb
@@ -20,6 +20,7 @@
 class Submission < ApplicationRecord
   include Cacheable
   include ActiveModel::Dirty
+  include Filterable
 
   SECONDS_BETWEEN_SUBMISSIONS = 5 # Used for rate limiting
   PUNCHCARD_MATRIX_CACHE_STRING = '/courses/%<course_id>s/user/%<user_id>s/timezone/%<timezone>s/punchcard_matrix'.freeze
@@ -68,6 +69,10 @@ class Submission < ApplicationRecord
   scope :judged, -> { where(status: ['unknown', 'correct', 'wrong', 'time limit exceeded', 'runtime error', 'compilation error', 'memory limit exceeded', 'internal error', 'output limit exceeded']) }
   scope :by_exercise_name, ->(name) { where(exercise: Exercise.by_name(name)) }
   scope :by_status, ->(status) { where(status: status.in?(statuses) ? status : -1) }
+  filter_options_for :status do
+    # Filter options without count as this is a very expensive operation
+    statuses.map { |key, _| { id: key.to_s, name: human_enum_name(:status, key) } }
+  end
   scope :by_username, ->(name) { where(user: User.by_filter(name)) }
   scope :by_filter, lambda { |filter, skip_user:, skip_exercise:|
     filter.split.map(&:strip).compact_blank.map do |part|
@@ -78,6 +83,10 @@ class Submission < ApplicationRecord
     end.reduce(&:merge)
   }
   scope :by_course_labels, ->(labels, course_id) { where(user: CourseMembership.where(course_id: course_id).by_course_labels(labels).map(&:user)) }
+  filter_options_for :course_labels do |course_id|
+    # Filter options without count as this is a very expensive operation
+    CourseLabel.where(course: course_id).map { |label| { id: label.name, name: label.name } }
+  end
 
   scope :most_recent, lambda {
     submissions = select('MAX(submissions.id) as id')
diff --git a/app/models/user.rb b/app/models/user.rb
index 796d04eadc..1c2c2a9374 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -24,11 +24,12 @@
 require 'securerandom'
 
 class User < ApplicationRecord
-  include Filterable
   include StringHelper
   include Cacheable
   include Tokenable
   include ActiveModel::Dirty
+  include FilterableByCourseLabels
+  include Filterable
 
   ATTEMPTED_EXERCISES_CACHE_STRING = '/courses/%<course_id>s/user/%<id>s/attempted_exercises'.freeze
   CORRECT_EXERCISES_CACHE_STRING = '/courses/%<course_id>s/user/%<id>s/correct_exercises'.freeze
@@ -117,6 +118,7 @@ class User < ApplicationRecord
 
   has_many :annotations, dependent: :restrict_with_error
   has_many :questions, dependent: :restrict_with_error
+  has_many :course_labels, through: :course_memberships
 
   devise :omniauthable, omniauth_providers: %i[google_oauth2 lti office365 oidc saml smartschool surf elixir]
 
@@ -134,11 +136,13 @@ class User < ApplicationRecord
 
   accepts_nested_attributes_for :identities, limit: 1
 
+  search_by :username, :first_name, :last_name
+
   scope :by_permission, ->(permission) { where(permission: permission) }
-  scope :by_institution, ->(institution) { where(institution: institution) }
+  filterable_by :institution_id, model: Institution
 
   scope :in_course, ->(course) { joins(:course_memberships).where(course_memberships: { course_id: course.id }) }
-  scope :by_course_labels, ->(labels, course_id) { where(id: CourseMembership.where(course_id: course_id).by_course_labels(labels).select(:user_id)) }
+  filterable_by_course_labels
   scope :at_least_one_started_in_series, ->(series) { where(id: Submission.where(course_id: series.course_id, exercise_id: series.exercises).select('DISTINCT(user_id)')) }
   scope :at_least_one_read_in_series, ->(series) { where(id: ActivityReadState.in_series(series).select('DISTINCT(user_id)')) }
   scope :at_least_one_started_in_course, ->(course) { where(id: Submission.where(course_id: course.id, exercise_id: course.exercises).select('DISTINCT(user_id)')) }
@@ -382,10 +386,6 @@ def self.from_username_and_institution(username, institution_id)
     find_by(username: username, institution_id: institution_id)
   end
 
-  def set_search
-    self.search = "#{username || ''} #{first_name || ''} #{last_name || ''}"
-  end
-
   # Be careful when using force institution. This expects the providers to be updated externally
   def merge_into(other, force: false, force_institution: false)
     errors.add(:merge, 'User belongs to different institution') if !force_institution && other.institution_id != institution_id && other.institution_id.present? && institution_id.present?
diff --git a/app/policies/annotation_policy.rb b/app/policies/annotation_policy.rb
index 1045da391d..6fa65d1c96 100644
--- a/app/policies/annotation_policy.rb
+++ b/app/policies/annotation_policy.rb
@@ -5,7 +5,7 @@ def resolve
         scope.all
       elsif user
         common = scope.joins(:submission)
-        common.released.where(submission: { user: user }).or(common.where(submission: { course_id: user.administrating_courses.map(&:id) }))
+        common.released.where(submissions: { user: user }).or(common.where(submissions: { course_id: user.administrating_courses.map(&:id) }))
       else
         scope.none
       end
diff --git a/app/views/activities/available.js.erb b/app/views/activities/available.js.erb
index 472417792a..a84d6a7cbf 100644
--- a/app/views/activities/available.js.erb
+++ b/app/views/activities/available.js.erb
@@ -1,2 +1,3 @@
 dodona.setHTMLExecuteScripts(document.querySelector("#activities-table-wrapper"), "<%= escape_javascript(render partial: 'series_activities_add_table', locals: {activities: @activities, series: @series}) %>");
 dodona.seriesEditActivitiesLoaded();
+dodona.search.updateFilters(<%= raw json_escape(@filters.to_json) %>);
diff --git a/app/views/activities/index.html.erb b/app/views/activities/index.html.erb
index fa3a8a3f1d..0a9111e1bd 100644
--- a/app/views/activities/index.html.erb
+++ b/app/views/activities/index.html.erb
@@ -6,7 +6,7 @@
       </div>
       <div class="card-supporting-text">
         <d-filter-tabs labels="<%= @tabs.to_json %>"></d-filter-tabs>
-        <%= render partial: 'layouts/searchbar', locals: {labels: @labels, programming_languages: @programming_languages, repositories: @repositories, activity_types: [ContentPage, Exercise], description_languages: ["en", "nl"], judges: @judges, popularity: Activity::POPULARITY_THRESHOLDS.keys, draft: current_user&.draft_exercises&.any?, no_dropdown_for: ["judges"]} %>
+        <%= render partial: 'layouts/searchbar', locals: {labels: @labels, no_dropdown_for: ["judge_id"]} %>
         <div id="activities-table-wrapper">
           <%= render partial: 'activities_table', locals: {activities: @activities} %>
         </div>
diff --git a/app/views/activities/index.js.erb b/app/views/activities/index.js.erb
index d5578dae44..5830329677 100644
--- a/app/views/activities/index.js.erb
+++ b/app/views/activities/index.js.erb
@@ -1 +1,2 @@
-dodona.setHTMLExecuteScripts(document.querySelector("#activities-table-wrapper"),"<%= escape_javascript(render partial: 'activities_table', locals: {activities: @activities}) %>");
\ No newline at end of file
+dodona.setHTMLExecuteScripts(document.querySelector("#activities-table-wrapper"),"<%= escape_javascript(render partial: 'activities_table', locals: {activities: @activities}) %>");
+dodona.search.updateFilters(<%= raw json_escape(@filters.to_json) %>);
diff --git a/app/views/activity_read_states/index.html.erb b/app/views/activity_read_states/index.html.erb
index d82a8c2672..22a733bee2 100644
--- a/app/views/activity_read_states/index.html.erb
+++ b/app/views/activity_read_states/index.html.erb
@@ -34,7 +34,7 @@
         <% end %>
       </div>
       <div class="card-supporting-text" id="refresh_element">
-        <%= render partial: 'layouts/searchbar', locals: {course_labels: @course_labels,  refresh_element: "#refresh_element"} %>
+        <%= render partial: 'layouts/searchbar', locals: {refresh_element: "#refresh_element"} %>
         <div id="read-states-table-wrapper">
           <%= render partial: 'read_states_table', locals: { read_states: @read_states, activity: @activity, course: @course, user: @user} %>
         </div>
diff --git a/app/views/annotations/question_index.html.erb b/app/views/annotations/question_index.html.erb
index beed5c2e38..6a3a7b0dda 100644
--- a/app/views/annotations/question_index.html.erb
+++ b/app/views/annotations/question_index.html.erb
@@ -26,7 +26,7 @@
           <% options << { label: t('questions.index.watch'), param: 'refresh' } %>
           <% options << { label: t('questions.index.everything'), param: 'everything' } if @unfiltered %>
         <% end %>
-        <%= render partial: 'layouts/searchbar', locals: { options: options, refresh_element: "#question-container", courses: @courses, question_states: Question.question_states.keys } %>
+        <%= render partial: 'layouts/searchbar', locals: { options: options, refresh_element: "#question-container"} %>
         <div id="questions-table-wrapper">
           <%= render partial: 'questions_table_with_pagination', locals: { questions: @questions } %>
         </div>
diff --git a/app/views/annotations/question_index.js.erb b/app/views/annotations/question_index.js.erb
index 942e429281..4544c7f154 100644
--- a/app/views/annotations/question_index.js.erb
+++ b/app/views/annotations/question_index.js.erb
@@ -1 +1,2 @@
 dodona.setHTMLExecuteScripts(document.querySelector("#questions-table-wrapper"), "<%= escape_javascript(render partial: 'questions_table_with_pagination', locals: {questions: @questions}) %>");
+dodona.search.updateFilters(<%= raw json_escape(@filters.to_json) %>);
diff --git a/app/views/course_members/index.html.erb b/app/views/course_members/index.html.erb
index f82adae00b..f42e7c79e7 100644
--- a/app/views/course_members/index.html.erb
+++ b/app/views/course_members/index.html.erb
@@ -86,8 +86,6 @@
                                url: course_members_path(@course, format: :csv),
                            }
                        ],
-                       course_labels: @course_labels,
-                       institutions: Institution.of_course_by_members(@course)
                    } %>
         <div id="users-table-wrapper">
           <%= render partial: 'members_table',
diff --git a/app/views/course_members/index.js.erb b/app/views/course_members/index.js.erb
index 3249f48b0d..f551a91050 100644
--- a/app/views/course_members/index.js.erb
+++ b/app/views/course_members/index.js.erb
@@ -1,2 +1,3 @@
 dodona.setHTMLExecuteScripts(document.querySelector("#users-table-wrapper"), "<%= escape_javascript(render partial: 'members_table', locals: {course_memberships: @course_memberships}) %>")
 dodona.ready.then(dodona.initTooltips);
+dodona.search.updateFilters(<%= raw json_escape(@filters.to_json) %>);
diff --git a/app/views/courses/index.html.erb b/app/views/courses/index.html.erb
index da1d490fd4..63e686800a 100644
--- a/app/views/courses/index.html.erb
+++ b/app/views/courses/index.html.erb
@@ -25,7 +25,7 @@
           labels << { name: t('courses.index.my_courses'), id: 'my' } if @show_my_courses
         %>
         <d-filter-tabs labels="<%= labels.to_json %>"></d-filter-tabs>
-        <%= render partial: 'layouts/searchbar', locals: {institutions: Institution.all, eager: true, no_dropdown_for: ["institutions"], options: [{param: 'can_register', label: "#{t(".only_show_can_register")}"}]  } %>
+        <%= render partial: 'layouts/searchbar', locals: {eager: true, no_dropdown_for: ["institutions"], options: [{param: 'can_register', label: "#{t(".only_show_can_register")}"}]  } %>
         <div id="courses-table-wrapper"></div>
       </div>
     </div>
diff --git a/app/views/courses/index.js.erb b/app/views/courses/index.js.erb
index 20ddef67ff..474982bfb9 100644
--- a/app/views/courses/index.js.erb
+++ b/app/views/courses/index.js.erb
@@ -11,3 +11,4 @@ if (dodona.copyCoursesLoaded) {
 <% else %>
 dodona.setHTMLExecuteScripts(document.querySelector("#courses-table-wrapper"), "<%= escape_javascript(render partial: 'courses/courses_table', locals: {courses: @courses}) %>")
 <% end %>
+dodona.search.updateFilters(<%= raw json_escape(@filters.to_json) %>);
diff --git a/app/views/courses/new.html.erb b/app/views/courses/new.html.erb
index 5689cfc632..2ef053b16b 100644
--- a/app/views/courses/new.html.erb
+++ b/app/views/courses/new.html.erb
@@ -69,7 +69,7 @@
         <div id="choose-step" class="panel-collapse collapse" role="tabpanel">
           <div class="panel-body">
             <div class="stepper-part">
-              <%= render(partial: 'layouts/searchbar', locals: {baseUrl: courses_path(copy_courses: true), eager: true, institutions: Institution.all}) %>
+              <%= render(partial: 'layouts/searchbar', locals: {baseUrl: courses_path(copy_courses: true), eager: true}) %>
               <div id="courses-table-wrapper"></div>
             </div>
           </div>
diff --git a/app/views/courses/scoresheet.html.erb b/app/views/courses/scoresheet.html.erb
index 2231c8b9ab..1070a4e5bf 100644
--- a/app/views/courses/scoresheet.html.erb
+++ b/app/views/courses/scoresheet.html.erb
@@ -29,7 +29,6 @@
           options: [
                 { label: t('.at_least_one_started'), param: 'at_least_one_started' }
             ],
-            course_labels: @course_labels,
             eager: true
         } %>
         <div id="scoresheet-table-wrapper"></div>
diff --git a/app/views/courses/scoresheet.js.erb b/app/views/courses/scoresheet.js.erb
index 0e56630e69..9c1bdc2625 100644
--- a/app/views/courses/scoresheet.js.erb
+++ b/app/views/courses/scoresheet.js.erb
@@ -1 +1,2 @@
 dodona.setHTMLExecuteScripts(document.querySelector("#scoresheet-table-wrapper"), "<%= escape_javascript(render partial: 'scoresheet_table', locals: {course: @course, series: @series, users: @users, hash: @hash, histogram: @histogram, total_activity_count: @total_activity_count, total_by_user: @total_by_user, total_histogram: @total_histogram}) %>")
+dodona.search.updateFilters(<%= raw json_escape(@filters.to_json) %>);
diff --git a/app/views/evaluations/_add_users.html.erb b/app/views/evaluations/_add_users.html.erb
index e4bc470b91..df10f7c4da 100644
--- a/app/views/evaluations/_add_users.html.erb
+++ b/app/views/evaluations/_add_users.html.erb
@@ -47,8 +47,6 @@
     <%= render partial: 'layouts/searchbar', locals: {
       baseUrl: edit_evaluation_url(@evaluation),
       eager: false,
-      course_labels: @course_labels,
-      institutions: Institution.of_course_by_members(@course),
       } %>
     <div id="users-table-wrapper">
       <%= render partial: 'members_table',
diff --git a/app/views/evaluations/add_users.js.erb b/app/views/evaluations/add_users.js.erb
index 13bd30fb6a..ab18a62cfe 100644
--- a/app/views/evaluations/add_users.js.erb
+++ b/app/views/evaluations/add_users.js.erb
@@ -1,3 +1,4 @@
 dodona.setHTMLExecuteScripts(document.querySelector("#users-table-wrapper"), "<%= escape_javascript(render partial: 'members_table', locals: {course_memberships: @course_memberships, confirm: false}) %>")
 window.dodona.initTooltips();
 window.dodona.initCheckboxes();
+dodona.search.updateFilters(<%= raw json_escape(@filters.to_json) %>);
diff --git a/app/views/evaluations/edit.html.erb b/app/views/evaluations/edit.html.erb
index 959f5ff4c4..fd947b4e10 100644
--- a/app/views/evaluations/edit.html.erb
+++ b/app/views/evaluations/edit.html.erb
@@ -50,8 +50,6 @@
               <%= render partial: 'layouts/searchbar', locals: {
                 baseUrl: edit_evaluation_url(@evaluation, confirm: true),
                 eager: false,
-                course_labels: @course_labels,
-                institutions: Institution.of_course_by_members(@course),
                 } %>
               <div id="users-table-wrapper">
                 <%= render partial: 'members_table',
diff --git a/app/views/evaluations/edit.js.erb b/app/views/evaluations/edit.js.erb
index 37ca3232aa..b48b4e8fdb 100644
--- a/app/views/evaluations/edit.js.erb
+++ b/app/views/evaluations/edit.js.erb
@@ -1,3 +1,4 @@
 dodona.setHTMLExecuteScripts(document.querySelector("#users-table-wrapper"), "<%= escape_javascript(render partial: 'members_table', locals: {course_memberships: @course_memberships, confirm: @should_confirm}) %>")
 window.dodona.initTooltips();
 window.dodona.initCheckboxes();
+dodona.search.updateFilters(<%= raw json_escape(@filters.to_json) %>);
diff --git a/app/views/evaluations/show.html.erb b/app/views/evaluations/show.html.erb
index 2c0c111434..f5834fe141 100644
--- a/app/views/evaluations/show.html.erb
+++ b/app/views/evaluations/show.html.erb
@@ -38,7 +38,7 @@
     </div>
     <div class="card">
       <div class="card-supporting-text">
-      <%= render partial: 'layouts/searchbar', locals: { course_labels: @course_labels } %>
+      <%= render partial: 'layouts/searchbar' %>
         <div class="card-tab">
           <ul id="user-tabs" class="nav nav-tabs" role="tablist">
             <li role="presentation">
diff --git a/app/views/evaluations/show.js.erb b/app/views/evaluations/show.js.erb
index 4ba37586ce..0a52128b3b 100644
--- a/app/views/evaluations/show.js.erb
+++ b/app/views/evaluations/show.js.erb
@@ -3,4 +3,5 @@ const gradeTable = document.querySelector("#evaluation-grade-table-wrapper");
 if(gradeTable) {
     dodona.setHTMLExecuteScripts(gradeTable, "<%= escape_javascript(render 'evaluation_grade_table', feedbacks: @feedbacks, evaluation: @evaluation, users: @users) %>")
 }
+dodona.search.updateFilters(<%= raw json_escape(@filters.to_json) %>);
 
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index cf78c4e7f8..dbacc229ef 100644
--- a/app/views/events/index.html.erb
+++ b/app/views/events/index.html.erb
@@ -5,7 +5,7 @@
         <h2 class="card-title-text"><%= t(".title") %></h2>
       </div>
       <div class="card-supporting-text">
-        <%= render partial: 'layouts/searchbar', locals: {event_types: Event.event_types.keys} %>
+        <%= render partial: 'layouts/searchbar'%>
         <div id="events-table-wrapper">
           <%= render partial: 'events_table', locals: {events: @events} %>
         </div>
diff --git a/app/views/events/index.js.erb b/app/views/events/index.js.erb
index ed6ead185b..115793afba 100644
--- a/app/views/events/index.js.erb
+++ b/app/views/events/index.js.erb
@@ -1 +1,2 @@
 dodona.setHTMLExecuteScripts(document.querySelector("#events-table-wrapper"), "<%= escape_javascript(render partial: 'events/events_table', locals: {events: @events}) %>")
+dodona.search.updateFilters(<%= raw json_escape(@filters.to_json) %>);
diff --git a/app/views/feedbacks/edit.html.erb b/app/views/feedbacks/edit.html.erb
index 472568e33a..67295bef2b 100644
--- a/app/views/feedbacks/edit.html.erb
+++ b/app/views/feedbacks/edit.html.erb
@@ -6,7 +6,7 @@
         <h2 class="card-title-text"><%= t('.title', user: @feedback.user.full_name, exercise: @feedback.exercise.name) %></h2>
       </div>
       <div class="card-supporting-text card-border">
-        <%= render partial: 'layouts/searchbar', locals: { statuses: Submission.statuses.keys } %>
+        <%= render partial: 'layouts/searchbar' %>
         <div id="submissions-table-wrapper">
           <%= render partial: 'submissions_table', locals: { submissions: @submissions } %>
         </div>
diff --git a/app/views/feedbacks/edit.js.erb b/app/views/feedbacks/edit.js.erb
index 15460db2c0..184b9666e9 100644
--- a/app/views/feedbacks/edit.js.erb
+++ b/app/views/feedbacks/edit.js.erb
@@ -1 +1,2 @@
 dodona.setHTMLExecuteScripts(document.querySelector("#submissions-table-wrapper"), "<%= escape_javascript(render partial: 'submissions_table', locals: { submissions: @submissions }) %>")
+dodona.search.updateFilters(<%= raw json_escape(@filters.to_json) %>);
diff --git a/app/views/judges/show.html.erb b/app/views/judges/show.html.erb
index 67ee75d0e5..f5e1db5594 100644
--- a/app/views/judges/show.html.erb
+++ b/app/views/judges/show.html.erb
@@ -32,7 +32,7 @@
             <strong><%= t ".all_submissions" %>:</strong> <%= link_to Submission.of_judge(@judge).count, judge_submissions_path(@judge), title: @judge.name, class: "ellipsis-overflow"  %>
           </p>
           <p>
-            <strong><%= t ".all_exercises" %>:</strong> <%= link_to Activity.by_judge(@judge).count, activities_url(judge_id: @judge.id), title: @judge.name, class: "ellipsis-overflow" %>
+            <strong><%= t ".all_exercises" %>:</strong> <%= link_to Activity.by_judge_id(@judge.id).count, activities_url(judge_id: @judge.id), title: @judge.name, class: "ellipsis-overflow" %>
           </p>
         </div>
         <div class="col-sm-6 col-12">
diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb
index dbdc79437c..d68b016cc7 100644
--- a/app/views/layouts/_searchbar.html.erb
+++ b/app/views/layouts/_searchbar.html.erb
@@ -1,12 +1,21 @@
 <%= content_for :javascripts do %>
   <%= javascript_include_tag 'search' %>
 <% end %>
+<%
+  no_filter_for = local_assigns.fetch :no_filter_for, []
+  no_dropdown_for = local_assigns.fetch :no_dropdown_for, []
+  no_dropdown_for += no_filter_for
+%>
 <div class='table-toolbar'>
-  <d-search-tokens class="search-tokens"></d-search-tokens>
+  <d-search-tokens class="search-tokens"
+                   hide="<%= no_filter_for.to_json %>"></d-search-tokens>
   <div class='table-toolbar-tools'>
     <i class="mdi mdi-magnify"></i>
     <form class='search' onsubmit="return false;">
-      <d-search-field placeholder="<%= t("layout.search.search") %>"></d-search-field>
+      <d-search-field placeholder="<%= t("layout.search.search") %>"
+                      eager="<%= local_assigns.fetch :eager, false %>"
+                      hide="<%= no_filter_for.to_json %>"
+      ></d-search-field>
       <d-loading-bar search-based></d-loading-bar>
     </form>
     <% if local_assigns[:options]&.any? %>
@@ -14,7 +23,9 @@
     <% end %>
   </div>
   <div class="d-flex align-items-center">
-    <d-dropdown-filters class="dropdown-filters"></d-dropdown-filters>
+    <d-dropdown-filters class="dropdown-filters"
+                        hide="<%= no_dropdown_for.to_json %>"
+    ></d-dropdown-filters>
     <% if local_assigns[:actions]&.any? %>
       <div class="flex-spacer"></div>
       <d-search-actions
@@ -29,198 +40,6 @@
 
 <script type="text/javascript">
     dodona.ready.then(function () {
-        const filterCollections = {};
-        <% if local_assigns.fetch :labels, false %>
-        filterCollections["labels"] = {
-            param: "labels",
-            paramVal: function(l) { return l.name.toString(); },
-            multi: true,
-            data: <%= raw render template: 'labels/index', formats: :json %>,
-            color: function (label) {
-                return label.color;
-            },
-        };
-        <% end %>
-        <% if local_assigns.fetch :programming_languages, false %>
-        filterCollections["programming_languages"] = {
-            param: "programming_language",
-            paramVal: function(p) { return p.name.toString(); },
-            multi: false,
-            data: <%= raw render template: 'programming_languages/index', formats: :json %>,
-            color: function () {
-                return "red";
-            },
-        };
-        <% end %>
-        <% if local_assigns.fetch :repositories, false %>
-        filterCollections["repositories"] = {
-            param: "repository_id",
-            paramVal: function(r) { return r.id.toString(); },
-            multi: false,
-            data: <%= raw render template: 'repositories/index', formats: :json %>,
-            color: function () {
-                return "blue-gray";
-            },
-        };
-        <% end %>
-        <% if local_assigns.fetch(:institutions, []).length > 1 %>
-        filterCollections["institutions"] = {
-            param: "institution_id",
-            paramVal: function(i) { return i.id.toString(); },
-            multi: false,
-            data: <%= raw local_assigns.fetch(:institutions, []).map{|i| {id: i.id, name: i.name}}.to_json %>,
-            color: function () {
-                return "pink";
-            },
-        };
-        <% end %>
-        <% if local_assigns.fetch :course_labels, false %>
-        filterCollections["course_labels"] = {
-            param: "course_labels",
-            paramVal: function (cl) {
-                return cl.name.toString();
-            },
-            multi: true,
-            data: <%= raw local_assigns.fetch(:course_labels, []).map{|cl| {id: cl.id, name: cl.name}}.to_json %>,
-            color: function () {
-                return "orange";
-            },
-        };
-        <% end %>
-        <% if local_assigns.fetch :statuses, false %>
-        filterCollections["statuses"] = {
-            param: "status",
-            paramVal: function (s) {
-                return s.id.toString();
-            },
-            multi: false,
-            data: <%= raw local_assigns.fetch(:statuses, []).map{|s| {id: s, name: Submission.human_enum_name(:status, s)}}.to_json %>,
-            color: function () {
-                return "indigo";
-            },
-        };
-        <% end %>
-        <% if local_assigns.fetch :question_states, false %>
-        filterCollections["question_states"] = {
-            param: "question_state",
-            paramVal: function (s) {
-                return s.id.toString();
-            },
-            multi: false,
-            data: <%= raw local_assigns.fetch(:question_states, []).map{|s| {id: s, name: Question.human_enum_name(:question_state, s)}}.to_json %>,
-            color: function () {
-                return "indigo";
-            },
-        };
-        <% end %>
-        <% if local_assigns.fetch :event_types, false %>
-        filterCollections["event_types"] = {
-            param: "type",
-            paramVal: function (s) {
-                return s.id.toString();
-            },
-            multi: false,
-            data: <%= raw local_assigns.fetch(:event_types, []).map{|s| {id: s, name: Event.human_enum_name(:event_type, s)}}.to_json %>,
-            color: function () {
-                return "deep-purple";
-            },
-        };
-        <% end %>
-        <% if local_assigns.fetch :activity_types, false %>
-        filterCollections["activity_types"] = {
-            param: "type",
-            paramVal: function (s) {
-                return s.id.toString();
-            },
-            multi: false,
-            data: <%= raw local_assigns.fetch(:activity_types, []).map{|s| {id: s.name, name: s.model_name.human}}.to_json %>,
-            color: function () {
-                return "deep-purple";
-            },
-        };
-        <% end %>
-        <% if local_assigns.fetch :description_languages, false %>
-        filterCollections["description_languages"] = {
-            param: "description_languages",
-            paramVal: function (lang) {
-                return lang.id.toString();
-            },
-            multi: true,
-            data: <%= raw local_assigns.fetch(:description_languages, []).map{|l| {id: l, name: t("js.#{l}")}}.to_json %>,
-            color: function () {
-                return "orange";
-            },
-        };
-        <% end %>
-        <% if local_assigns.fetch :judges, false %>
-        filterCollections["judges"] = {
-            param: "judge_id",
-            paramVal: function(judge) {
-                return judge.id.toString();
-            },
-            multi: false,
-            data: <%= raw local_assigns.fetch(:judges, []).map{|judge| {id: judge.id, name: "#{judge.name}-judge"}}.to_json %>,
-            color: function () {
-                return "red";
-            }
-        }
-        <% end %>
-        <% if local_assigns.fetch :courses, false %>
-        filterCollections["courses"] = {
-            param: "course_id",
-            paramVal: function(course) {
-                return course.id.toString();
-            },
-            multi: false,
-            data: <%= raw local_assigns.fetch(:courses, []).map{|course| {id: course.id, name: "#{course.name} (#{course.formatted_year})"}}.to_json %>,
-            color: function () {
-                return "orange";
-            }
-        };
-        <% end %>
-        <% if local_assigns.fetch :exercises, false %>
-        filterCollections["exercises"] = {
-          param: "exercise_id",
-          paramVal: function(exercise) {
-            return exercise.id.toString();
-          },
-          multi: false,
-          data: <%= raw local_assigns.fetch(:exercises, []).map{|exercise| {id: exercise.id, name: exercise.name}}.to_json %>,
-          color: function () {
-            return "blue-gray";
-          }
-        };
-        <% end %>
-        <% if local_assigns.fetch :popularity, false %>
-            filterCollections["popularity"] = {
-              param: "popularity",
-              paramVal: function (s) {
-                return s.id.toString();
-              },
-              multi: true,
-              data: <%= raw local_assigns.fetch(:popularity, []).map{|s| {id: s, name: Activity.human_enum_name(:popularity, s)}}.to_json %>,
-              color: function () {
-                return "pink";
-              },
-            };
-        <% end %>
-      <% if local_assigns.fetch :draft, false %>
-        filterCollections["draft"] = {
-          param: "draft",
-          paramVal: function (s) {
-            return s.id.toString();
-          },
-          multi: false,
-          data: [
-            {id: true, name: "<%= t("activities.index.filters.draft") %>"},
-            {id: false, name: "<%= t("activities.index.filters.not_draft") %>"}
-          ],
-          color: function () {
-            return "indigo";
-          },
-        };
-      <% end %>
-
         dodona.search.setRefreshElement("<%= local_assigns.fetch :refresh_element, "" %>");
 
         // load the given localStorageKey if present. This key is used to retrieve the values stored in localStorage
@@ -229,20 +48,6 @@
         dodona.search.autoSearch = <%= local_assigns.fetch :autoSearch, true %>;
         dodona.search.setLocalStorageKey(localStorageKey);
 
-        const searchFields = Array.from(document.getElementsByTagName("d-search-field"));
-        searchFields.forEach( searchField => {
-          searchField.filterCollections = filterCollections;
-          searchField.eager = <%= local_assigns.fetch :eager, false %>;
-          searchField.placeholder = '<%= t("layout.search.search") %>';
-        });
-
-        const searchTokens = Array.from(document.getElementsByTagName("d-search-tokens"));
-        searchTokens.forEach(st => st.filterCollections = filterCollections);
-
-        const noDropdownFilters = <%= raw (local_assigns.fetch :no_dropdown_for, []).to_json %>;
-        const dropdownFilterCollections = Object.entries(filterCollections).filter(([type, _]) => !noDropdownFilters.includes(type))
-        const dropdownFilters = Array.from(document.getElementsByTagName("d-dropdown-filters"));
-        dropdownFilters.forEach(df => df.filterCollections = dropdownFilterCollections);
-
+        dodona.search.updateFilters(<%= raw json_escape(@filters.to_json) %>);
     });
 </script>
diff --git a/app/views/repositories/admins.html.erb b/app/views/repositories/admins.html.erb
index b6847b96d0..1c3bad3aca 100644
--- a/app/views/repositories/admins.html.erb
+++ b/app/views/repositories/admins.html.erb
@@ -17,7 +17,7 @@
       </div>
       <div class="card-supporting-text card-border">
         <h3><%= t ".add_admins" %></h3>
-        <%= render(partial: 'layouts/searchbar', locals: {baseUrl: available_for_repository_users_path(:repository_id => @repository.id), eager: true, institutions: Institution.all}) %>
+        <%= render(partial: 'layouts/searchbar', locals: {baseUrl: available_for_repository_users_path(:repository_id => @repository.id), eager: true}) %>
         <div id="users-table-wrapper">
         </div>
       </div>
diff --git a/app/views/repositories/show.html.erb b/app/views/repositories/show.html.erb
index 73163af962..4efd4b155b 100644
--- a/app/views/repositories/show.html.erb
+++ b/app/views/repositories/show.html.erb
@@ -66,7 +66,7 @@
       </div>
       <div class="card-supporting-text card-border">
         <h4><%= t ".learning_activities" %></h4>
-        <%= render(partial: 'layouts/searchbar', locals: {baseUrl: activities_path(repository_id: @repository.id), eager: true, activity_types: [ContentPage, Exercise], description_languages: ["en", "nl"], labels: @labels, programming_languages: @programming_languages, judges: @judges}) %>
+        <%= render(partial: 'layouts/searchbar', locals: {baseUrl: activities_path(repository_id: @repository.id), eager: true, no_filter_for: ['repository_id']}) %>
         <div id="activities-table-wrapper">
         </div>
       </div>
diff --git a/app/views/saved_annotations/index.html.erb b/app/views/saved_annotations/index.html.erb
index a02435d104..d4b6326884 100644
--- a/app/views/saved_annotations/index.html.erb
+++ b/app/views/saved_annotations/index.html.erb
@@ -11,7 +11,7 @@
         <% end %>
       </div>
       <div class="card-supporting-text" id="refresh-element">
-        <%= render partial: 'layouts/searchbar', locals: { courses: @courses, exercises: @exercises, autoSearch: false } %>
+        <%= render partial: 'layouts/searchbar', locals: { autoSearch: false } %>
         <div id="questions-table-wrapper">
           <d-saved-annotation-list></d-saved-annotation-list>
         </div>
diff --git a/app/views/saved_annotations/new.html.erb b/app/views/saved_annotations/new.html.erb
index 7919e9a573..56b9870799 100644
--- a/app/views/saved_annotations/new.html.erb
+++ b/app/views/saved_annotations/new.html.erb
@@ -5,7 +5,7 @@
         <h2 class="card-title-text"><%= t ".title" %></h2>
       </div>
       <div class="card-supporting-text" id="annotation-container">
-        <%= render partial: 'layouts/searchbar', locals: { refresh_element: "#annotation-container", courses: @courses, exercises: @exercises } %>
+        <%= render partial: 'layouts/searchbar', locals: { refresh_element: "#annotation-container" } %>
         <div id="questions-table-wrapper">
           <%= render partial: 'annotations/annotations_table', locals: { annotations: @annotations, allow_save: true } %>
         </div>
diff --git a/app/views/saved_annotations/new.js.erb b/app/views/saved_annotations/new.js.erb
index 437a9c43ef..9b81695ae9 100644
--- a/app/views/saved_annotations/new.js.erb
+++ b/app/views/saved_annotations/new.js.erb
@@ -1 +1,2 @@
 dodona.setHTMLExecuteScripts(document.querySelector("#questions-table-wrapper"), "<%= escape_javascript(render partial: 'annotations/annotations_table', locals: { annotations: @annotations, allow_save: true }) %>");
+dodona.search.updateFilters(<%= raw json_escape(@filters.to_json) %>);
diff --git a/app/views/series/edit.html.erb b/app/views/series/edit.html.erb
index bd7055eb99..372922871a 100644
--- a/app/views/series/edit.html.erb
+++ b/app/views/series/edit.html.erb
@@ -87,7 +87,7 @@
           <div class="col-12">
             <h4 id="add-activities"><%= t ".add_activities" %></h4>
             <d-filter-tabs labels="<%= @tabs.to_json %>"></d-filter-tabs>
-            <%= render partial: 'layouts/searchbar', locals: {baseUrl: available_activities_series_path(@series), eager: true, labels: @labels, programming_languages: @programming_languages, repositories: @repositories, activity_types: [ContentPage, Exercise], description_languages: ["en", "nl"], popularity: Activity::POPULARITY_THRESHOLDS.keys, local_storage_key: 'seriesActivitySearch', draft: current_user&.draft_exercises&.any?} %>
+            <%= render partial: 'layouts/searchbar', locals: {baseUrl: available_activities_series_path(@series), eager: true, local_storage_key: 'seriesActivitySearch'} %>
             <div id="activities-table-wrapper">
             </div>
           </div>
diff --git a/app/views/series/scoresheet.html.erb b/app/views/series/scoresheet.html.erb
index a108e9a708..ca4ae3dc57 100644
--- a/app/views/series/scoresheet.html.erb
+++ b/app/views/series/scoresheet.html.erb
@@ -32,7 +32,6 @@
             options: [
                   { label: t('.at_least_one_started'), param: 'at_least_one_started' }
               ],
-              course_labels: @course_labels
           } %>
           <div id="scoresheet-table-wrapper">
             <%= render partial: "scoresheet_table", locals: {course: @course, series: @series, activities: @activities, users: @users, submissions: @submissions, read_states: @read_states, statuses: @statuses, read_state_counts: @read_state_counts, submission_counts: @submission_counts, summary_by_user: @summary_by_user, total: @total} %>
diff --git a/app/views/submissions/index.html.erb b/app/views/submissions/index.html.erb
index dad0b08d61..8f660d21d1 100644
--- a/app/views/submissions/index.html.erb
+++ b/app/views/submissions/index.html.erb
@@ -57,7 +57,7 @@
             </script>
           <% end %>
         <% end %>
-        <%= render partial: 'layouts/searchbar', locals: {actions: actions, options: options, course_labels: @course_labels, statuses: Submission.statuses.keys, refresh_element: "#refresh_element"} %>
+        <%= render partial: 'layouts/searchbar', locals: {actions: actions, options: options, refresh_element: "#refresh_element"} %>
         <div id="submissions-table-wrapper">
           <%= render partial: 'submissions_table', locals: {submissions: @submissions, exercise: @activity, course: @course, user: @user} %>
         </div>
diff --git a/app/views/submissions/index.js.erb b/app/views/submissions/index.js.erb
index c3e18555db..ef6a2ad3e0 100644
--- a/app/views/submissions/index.js.erb
+++ b/app/views/submissions/index.js.erb
@@ -6,3 +6,4 @@ if (dodona.feedbackTableLoaded) {
         <%= raw "#{@course&.id || 'undefined'}" %>
     );
 }
+dodona.search.updateFilters(<%= raw json_escape(@filters.to_json) %>);
diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb
index 995824747d..aa426427de 100644
--- a/app/views/users/index.html.erb
+++ b/app/views/users/index.html.erb
@@ -10,7 +10,7 @@
         <% end %>
       </div>
       <div class="card-supporting-text">
-        <%= render partial: 'layouts/searchbar', locals: {institutions: Institution.all} %>
+        <%= render partial: 'layouts/searchbar' %>
         <div id="users-table-wrapper">
           <%= render partial: 'users_table', locals: {users: @users, pagination_opts: @pagination_opts} %>
         </div>
diff --git a/app/views/users/index.js.erb b/app/views/users/index.js.erb
index cf8fcdea7f..ac06149ef3 100644
--- a/app/views/users/index.js.erb
+++ b/app/views/users/index.js.erb
@@ -1 +1,2 @@
 dodona.setHTMLExecuteScripts(document.querySelector("#users-table-wrapper"), "<%= escape_javascript(render partial: 'users/users_table', locals: {users: @users, pagination_opts: @pagination_opts }) %>");
+dodona.search.updateFilters(<%= raw json_escape(@filters.to_json) %>);
diff --git a/config/locales/js/en.yml b/config/locales/js/en.yml
index d2855d4d8a..8a5c683113 100644
--- a/config/locales/js/en.yml
+++ b/config/locales/js/en.yml
@@ -197,37 +197,26 @@ en:
       6: "Well done!"
     dropdown:
       search: Search
-      multi:
+    search:
+      tokens:
+        active_filters: "%{smart_count} active filter |||| %{smart_count} active filters"
+        clear: Clear all
+      filter:
         labels: Labels
-        programming_languages: Programming Languages
-        judges: Judges
-        repositories: Repositories
-        institutions: Institutions
+        programming_language: Programming Language
+        judge_id: Judge
+        repository_id: Repository
+        institution_id: Institution
         course_labels: Member labels
-        statuses: Statuses
-        event_types: Event types
-        activity_types: Activity types
+        status: Status
+        type: Type
         description_languages: Languages
-        courses: Courses
-        question_states: Statuses
+        course_id: Course
+        question_state: Status
         popularity: Popularity
-        search_options: Options
-      single:
-        labels: Label
-        programming_languages: Programming Language
-        judges: Judge
-        repositories: Repository
-        institutions: Institution
-        course_labels: Member label
-        statuses: Status
-        event_types: Event type
-        activity_types: Activity type
-        description_languages: Language
-        courses: Course
-        question_states: Status
-        popularity: Popularity
-        exercises: Exercise
+        exercise_id: Exercise
         draft: "Draft"
+        event_type: Type
     saved_annotation:
       title: Title
       annotation_text: Text
diff --git a/config/locales/js/nl.yml b/config/locales/js/nl.yml
index 41cc9d484a..33ea0931df 100644
--- a/config/locales/js/nl.yml
+++ b/config/locales/js/nl.yml
@@ -197,37 +197,26 @@ nl:
       6: "Goed gedaan!"
     dropdown:
       search: Zoeken
-      multi:
+    search:
+      tokens:
+        active_filters: "%{smart_count} filter actief |||| %{smart_count} filters actief"
+        clear: Alles wissen
+      filter:
         labels: Labels
-        programming_languages: Programmeertalen
-        judges: Judges
-        repositories: Repository's
-        institutions: Onderwijsinstellingen
+        programming_language: Programmeertaal
+        judge_id: Judge
+        repository_id: Repository
+        institution_id: Onderwijsinstelling
         course_labels: Gebruikerlabels
-        statuses: Statussen
-        event_types: Event types
-        activity_types: Activiteitstypes
+        status: Status
+        type: Type
         description_languages: Talen
-        courses: Cursussen
-        question_states: Toestanden
+        course_id: Cursus
+        question_state: Toestand
         popularity: Populariteit
-        search_options: Opties
-      single:
-        labels: Label
-        programming_languages: Programmeertaal
-        judges: Judge
-        repositories: Repository
-        institutions: Onderwijsinstelling
-        course_labels: Gebruikerlabel
-        statuses: Status
-        event_types: Event type
-        activity_types: Activiteitstype
-        description_languages: Taal
-        courses: Cursus
-        question_states: Toestand
-        popularity: Populariteit
-        exercises: Oefening
+        exercise_id: Oefening
         draft: "Concept"
+        event_type: type
     saved_annotation:
       title: Titel
       annotation_text: Tekst
diff --git a/test/javascript/components/search/dropdown_filter.test.ts b/test/javascript/components/search/dropdown_filter.test.ts
index 02a3a1fcc4..ea93102bb9 100644
--- a/test/javascript/components/search/dropdown_filter.test.ts
+++ b/test/javascript/components/search/dropdown_filter.test.ts
@@ -4,7 +4,6 @@ import { fixture, nextFrame } from "@open-wc/testing-helpers";
 import userEvent from "@testing-library/user-event";
 import { getByLabelText, screen } from "@testing-library/dom";
 import { html } from "lit/development";
-import { Label } from "components/search/filter_collection_element";
 import { searchQueryState } from "state/SearchQuery";
 
 describe("DropdownFilter", () => {
@@ -15,9 +14,7 @@ describe("DropdownFilter", () => {
         dropdownFilter = await fixture(html`
             <d-dropdown-filter param="foo"
                                        labels='[{ "name": "fool", "id": "1" }, { "name": "bar", "id": "2" }, { "name": "baz", "id": "3" }]'
-                                       type="test"
-                                       .paramVal=${(l: Label) => l.id}
-                                       .color=${() => "pink"}
+                                       color="pink"
                                        .multi=${false}>
             </d-dropdown-filter>`) as DropdownFilter;
     });
diff --git a/test/javascript/components/search/search_field.test.ts b/test/javascript/components/search/search_field.test.ts
index f57eacc0c0..eeff026585 100644
--- a/test/javascript/components/search/search_field.test.ts
+++ b/test/javascript/components/search/search_field.test.ts
@@ -3,7 +3,7 @@ import { aTimeout, fixture, nextFrame } from "@open-wc/testing-helpers";
 import userEvent from "@testing-library/user-event";
 import { screen } from "@testing-library/dom";
 import { SearchField, SearchFieldSuggestion } from "components/search/search_field";
-import { Label, FilterCollection } from "components/search/filter_collection_element";
+import { FilterOptions } from "components/search/filter_element";
 import { html } from "lit";
 import { searchQueryState } from "state/SearchQuery";
 import { textContentMatcher } from "../../test_helpers";
@@ -16,7 +16,6 @@ describe("SearchFieldSuggestion", () => {
             <d-search-field-suggestion param="foo"
                                        labels='[{ "name": "fool", "id": "1" }, { "name": "bar", "id": "2" }, { "name": "baz", "id": "3" }]'
                                        type="test"
-                                       .paramVal=${(l: Label) => l.id}
                                        filter="ba"
                                        .multi=${false}>
             </d-search-field-suggestion>`) as SearchFieldSuggestion;
@@ -65,8 +64,8 @@ describe("SearchField", () => {
     let searchField: SearchField;
     beforeEach(async () => {
         searchQueryState.queryParams.clear();
-        const filterCollections: Record<string, FilterCollection> = {
-            first: {
+        const filters: FilterOptions[] = [
+            {
                 param: "foo",
                 data: [
                     { name: "fool", id: "1" },
@@ -74,10 +73,9 @@ describe("SearchField", () => {
                     { name: "baz", id: "3" },
                 ],
                 multi: false,
-                color: () => "red",
-                paramVal: (l: Label) => l.id,
+                color: "red",
             },
-            second: {
+            {
                 param: "bar",
                 data: [
                     { name: "food", id: "1" },
@@ -85,14 +83,13 @@ describe("SearchField", () => {
                     { name: "baz", id: "3" },
                 ],
                 multi: false,
-                color: () => "red",
-                paramVal: (l: Label) => l.id,
+                color: "red",
             }
-        };
+        ];
 
         searchField = await fixture(html`
             <d-search-field placeholder="Search"
-                            .filterCollections="${filterCollections}"
+                            .filters="${filters}"
             ></d-search-field>
         `);
     });
diff --git a/test/javascript/components/search/search_token.test.ts b/test/javascript/components/search/search_token.test.ts
index c7c7812455..5e700d2f41 100644
--- a/test/javascript/components/search/search_token.test.ts
+++ b/test/javascript/components/search/search_token.test.ts
@@ -4,7 +4,7 @@ import { fixture, nextFrame } from "@open-wc/testing-helpers";
 import userEvent from "@testing-library/user-event";
 import { screen } from "@testing-library/dom";
 import { html } from "lit/development";
-import { Label } from "components/search/filter_collection_element";
+import { Label } from "components/search/filter_element";
 import { searchQueryState } from "state/SearchQuery";
 
 describe("SearchToken", () => {
diff --git a/test/models/activity_test.rb b/test/models/activity_test.rb
index 8a0fd4b9a0..1b097232d2 100644
--- a/test/models/activity_test.rb
+++ b/test/models/activity_test.rb
@@ -227,26 +227,6 @@ class ActivityTest < ActiveSupport::TestCase
     assert_equal [very_popular1.id], Activity.by_popularity(:very_popular).pluck(:id)
   end
 
-  test 'should be able to filter by popularity with multiple values' do
-    Activity.delete_all
-    unpopular1 = create :exercise
-    unpopular2 = create :exercise
-    neutral1 = create :exercise
-    popular1 = create :exercise
-    popular2 = create :exercise
-    very_popular1 = create :exercise
-
-    create :series, course: create(:course), exercises: [unpopular2]
-
-    3.times { create :series, course: create(:course), exercises: [neutral1] }
-    12.times { create :series, course: create(:course), exercises: [popular1] }
-    50.times { create :series, course: create(:course), exercises: [popular2] }
-    101.times { create :series, course: create(:course), exercises: [very_popular1] }
-
-    assert_equal [unpopular1.id, unpopular2.id, popular1.id, popular2.id], Activity.by_popularities(%i[unpopular popular]).order_by_popularity('ASC').pluck(:id)
-    assert_equal [neutral1.id, very_popular1.id], Activity.by_popularities(%i[neutral very_popular]).order_by_popularity('ASC').pluck(:id)
-  end
-
   test 'repository mine should filter correctly' do
     repository = create :repository, :git_stubbed
     user = create :staff
diff --git a/test/models/saved_annotation_test.rb b/test/models/saved_annotation_test.rb
index c413816661..a2dd64ca39 100644
--- a/test/models/saved_annotation_test.rb
+++ b/test/models/saved_annotation_test.rb
@@ -26,9 +26,9 @@ class SavedAnnotationTest < ActiveSupport::TestCase
     s2 = create :saved_annotation, course: course, user: user
     s3 = create :saved_annotation, course: create(:course), user: user
 
-    assert_includes SavedAnnotation.by_course(course), s1
-    assert_includes SavedAnnotation.by_course(course), s2
-    assert_not_includes SavedAnnotation.by_course(course), s3
+    assert_includes SavedAnnotation.by_course_id(course.id), s1
+    assert_includes SavedAnnotation.by_course_id(course.id), s2
+    assert_not_includes SavedAnnotation.by_course_id(course.id), s3
   end
 
   test 'filtering by exercise_id should contain nil values' do
@@ -38,8 +38,8 @@ class SavedAnnotationTest < ActiveSupport::TestCase
     s2 = create :saved_annotation, exercise: exercise, user: user
     s3 = create :saved_annotation, exercise: create(:exercise), user: user
 
-    assert_includes SavedAnnotation.by_exercise(exercise), s1
-    assert_includes SavedAnnotation.by_exercise(exercise), s2
-    assert_not_includes SavedAnnotation.by_exercise(exercise), s3
+    assert_includes SavedAnnotation.by_exercise_id(exercise.id), s1
+    assert_includes SavedAnnotation.by_exercise_id(exercise.id), s2
+    assert_not_includes SavedAnnotation.by_exercise_id(exercise.id), s3
   end
 end