diff --git a/theme/boost/scss/moodle.scss b/theme/boost/scss/moodle.scss
index 1b9da99d353..049ab7c82bc 100644
--- a/theme/boost/scss/moodle.scss
+++ b/theme/boost/scss/moodle.scss
@@ -18,6 +18,7 @@ $breadcrumb-divider-rtl: "◀" !default;
 @import "moodle/drawer";
 @import "moodle/dashboard";
 @import "moodle/filemanager";
+@import "moodle/filter";
 @import "moodle/message";
 @import "moodle/question";
 @import "moodle/user";
diff --git a/theme/boost/scss/moodle/filter.scss b/theme/boost/scss/moodle/filter.scss
new file mode 100644
index 00000000000..aa10c7e4bd3
--- /dev/null
+++ b/theme/boost/scss/moodle/filter.scss
@@ -0,0 +1,19 @@
+/* The button used to display a filter. */
+.filter-button {
+    border-radius: 0.25em;
+    padding: 0.2em;
+}
+
+.filter-header {
+    @extend .popover-header;
+}
+
+.filter-body {
+    @extend .popover-body;
+}
+
+.filter-scrollable {
+    overflow-y: scroll;
+    max-height: 25em;
+    margin-bottom: 1em;
+}
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 9097d999edf..934871eaa2d 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -6684,7 +6684,7 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton {
       top: 1px;
       border-width: 0 0.5rem 0.5rem 0.5rem;
       border-bottom-color: #fff; }
-  .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
+  .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before, .bs-popover-bottom .filter-header::before, .bs-popover-auto[x-placement^="bottom"] .filter-header::before {
     position: absolute;
     top: 0;
     left: 50%;
@@ -6710,16 +6710,16 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton {
       border-width: 0.5rem 0 0.5rem 0.5rem;
       border-left-color: #fff; }
 
-.popover-header {
+.popover-header, .filter-header {
   padding: 0.5rem 0.75rem;
   margin-bottom: 0;
   font-size: 0.9375rem;
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb; }
-  .popover-header:empty {
+  .popover-header:empty, .filter-header:empty {
     display: none; }
 
-.popover-body {
+.popover-body, .filter-body {
   padding: 0.5rem 0.75rem;
   color: #373a3c; }
 
@@ -14413,6 +14413,16 @@ a.ygtvspacer:hover {
   display: inline-block;
   padding-left: 5px; }
 
+/* The button used to display a filter. */
+.filter-button {
+  border-radius: 0.25em;
+  padding: 0.2em; }
+
+.filter-scrollable {
+  overflow-y: scroll;
+  max-height: 25em;
+  margin-bottom: 1em; }
+
 /** The message area **/
 .hidden {
   display: none; }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 101885fadd5..d94638703bc 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -6930,7 +6930,7 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton {
       top: 1px;
       border-width: 0 0.5rem 0.5rem 0.5rem;
       border-bottom-color: #fff; }
-  .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
+  .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before, .bs-popover-bottom .filter-header::before, .bs-popover-auto[x-placement^="bottom"] .filter-header::before {
     position: absolute;
     top: 0;
     left: 50%;
@@ -6956,7 +6956,7 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton {
       border-width: 0.5rem 0 0.5rem 0.5rem;
       border-left-color: #fff; }
 
-.popover-header {
+.popover-header, .filter-header {
   padding: 0.5rem 0.75rem;
   margin-bottom: 0;
   font-size: 0.9375rem;
@@ -6964,10 +6964,10 @@ a.close.disabled, .moodle-dialogue-base a.disabled.closebutton {
   border-bottom: 1px solid #ebebeb;
   border-top-left-radius: calc(0.3rem - 1px);
   border-top-right-radius: calc(0.3rem - 1px); }
-  .popover-header:empty {
+  .popover-header:empty, .filter-header:empty {
     display: none; }
 
-.popover-body {
+.popover-body, .filter-body {
   padding: 0.5rem 0.75rem;
   color: #373a3c; }
 
@@ -14675,6 +14675,16 @@ a.ygtvspacer:hover {
   display: inline-block;
   padding-left: 5px; }
 
+/* The button used to display a filter. */
+.filter-button {
+  border-radius: 0.25em;
+  padding: 0.2em; }
+
+.filter-scrollable {
+  overflow-y: scroll;
+  max-height: 25em;
+  margin-bottom: 1em; }
+
 /** The message area **/
 .hidden {
   display: none; }