diff --git a/bookwyrm/templates/directory/community_filter.html b/bookwyrm/templates/directory/community_filter.html
new file mode 100644
index 00000000..bd0ba778
--- /dev/null
+++ b/bookwyrm/templates/directory/community_filter.html
@@ -0,0 +1,14 @@
+{% extends 'snippets/filters_panel/filter_field.html' %}
+{% load i18n %}
+
+{% block filter %}
+<legend class="label">{% trans "Community" %}</legend>
+<label class="is-block">
+    <input type="radio" class="radio" name="scope" value="local" {% if request.GET.scope == "local" %}checked{% endif %}>
+    {% trans "Local users" %}
+</label>
+<label class="is-block">
+    <input type="radio" class="radio" name="scope" value="federated" {% if not request.GET.sort or request.GET.scope == "federated" %}checked{% endif %}>
+    {% trans "Federated community" %}
+</label>
+{% endblock %}
diff --git a/bookwyrm/templates/directory.html b/bookwyrm/templates/directory/directory.html
similarity index 56%
rename from bookwyrm/templates/directory.html
rename to bookwyrm/templates/directory/directory.html
index 3d47e26b..7413f67d 100644
--- a/bookwyrm/templates/directory.html
+++ b/bookwyrm/templates/directory/directory.html
@@ -36,64 +36,7 @@
 </div></div>
 {% endif %}
 
-<div class="notification content">
-    <h2 class="columns is-mobile mb-0">
-        <span class="column pb-0">Filters</span>
-
-        <span class="column is-narrow pb-0">
-            {% trans "Show filters" as text %}
-            {% include 'snippets/toggle/open_button.html' with text=text controls_text="filters" icon="arrow-down" class="is-small" focus="filters" %}
-            {% trans "Hide filters" as text %}
-            {% include 'snippets/toggle/close_button.html' with text=text controls_text="filters" icon="x" class="is-small" %}
-        </span>
-    </h2>
-
-    <form class="hidden mt-3" id="filters" method-"get" action="{% url 'directory' %}" tabindex="0">
-        <div class="columns">
-            <div class="column is-flex">
-                <div class="box is-flex-grow-1">
-                    <legend class="label">{% trans "User type" %}</legend>
-                    <label class="is-block">
-                        <input type="radio" class="radio" name="software" value="bookwyrm" {% if not request.GET.sort or  request.GET.software == 'bookwyrm' %}checked{% endif %}>
-                        {% trans "BookWyrm users" %}
-                    </label>
-                    <label class="is-block">
-                        <input type="radio" class="radio" name="software" value="all" {% if request.GET.software == 'all' %}checked{% endif %}>
-                        {% trans "All known users" %}
-                    </label>
-                </div>
-            </div>
-            <div class="column is-flex">
-                <div class="box is-flex-grow-1">
-                    <legend class="label">{% trans "Community" %}</legend>
-                    <label class="is-block">
-                        <input type="radio" class="radio" name="scope" value="local" {% if request.GET.scope == "local" %}checked{% endif %}>
-                        {% trans "Local users" %}
-                    </label>
-                    <label class="is-block">
-                        <input type="radio" class="radio" name="scope" value="federated" {% if not request.GET.sort or request.GET.scope == "federated" %}checked{% endif %}>
-                        {% trans "Federated community" %}
-                    </label>
-                </div>
-            </div>
-            <div class="column is-flex">
-                <div class="box is-flex-grow-1">
-                    <label class="label" for="id_sort">{% trans "Order by" %}</label>
-                    <div class="select">
-                        <select name="sort" id="id_sort">
-                            <option value="suggested" {% if not request.GET.sort or request.GET.sort == "suggested" %}checked{% endif %}>{% trans "Suggested" %}</option>
-                            <option value="recent" {% if request.GET.sort == "suggested" %}checked{% endif %}>{% trans "Recently active" %}</option>
-                        </select>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <button class="button is-primary">{% trans "Apply filters" %}</button>
-    </form>
-    {% if request.GET %}
-    <a class="help" href="{% url 'directory' %}">{% trans "Clear filters" %}</a>
-    {% endif %}
-</div>
+{% include 'directory/filters.html' %}
 
 <div class="columns is-multiline">
     {% for user in users %}
diff --git a/bookwyrm/templates/directory/filters.html b/bookwyrm/templates/directory/filters.html
new file mode 100644
index 00000000..c6bbe157
--- /dev/null
+++ b/bookwyrm/templates/directory/filters.html
@@ -0,0 +1,7 @@
+{% extends 'snippets/filters_panel/filters_panel.html' %}
+
+{% block filter_fields %}
+{% include 'directory/user_type_filter.html' %}
+{% include 'directory/community_filter.html' %}
+{% include 'directory/sort_filter.html' %}
+{% endblock %}
diff --git a/bookwyrm/templates/directory/sort_filter.html b/bookwyrm/templates/directory/sort_filter.html
new file mode 100644
index 00000000..82b561fb
--- /dev/null
+++ b/bookwyrm/templates/directory/sort_filter.html
@@ -0,0 +1,12 @@
+{% extends 'snippets/filters_panel/filter_field.html' %}
+{% load i18n %}
+
+{% block filter %}
+<label class="label" for="id_sort">{% trans "Order by" %}</label>
+<div class="select">
+    <select name="sort" id="id_sort">
+        <option value="suggested" {% if not request.GET.sort or request.GET.sort == "suggested" %}checked{% endif %}>{% trans "Suggested" %}</option>
+        <option value="recent" {% if request.GET.sort == "suggested" %}checked{% endif %}>{% trans "Recently active" %}</option>
+    </select>
+</div>
+{% endblock %}
diff --git a/bookwyrm/templates/directory/user_type_filter.html b/bookwyrm/templates/directory/user_type_filter.html
new file mode 100644
index 00000000..b5961c82
--- /dev/null
+++ b/bookwyrm/templates/directory/user_type_filter.html
@@ -0,0 +1,14 @@
+{% extends 'snippets/filters_panel/filter_field.html' %}
+{% load i18n %}
+
+{% block filter %}
+<legend class="label">{% trans "User type" %}</legend>
+<label class="is-block">
+    <input type="radio" class="radio" name="software" value="bookwyrm" {% if not request.GET.sort or  request.GET.software == 'bookwyrm' %}checked{% endif %}>
+    {% trans "BookWyrm users" %}
+</label>
+<label class="is-block">
+    <input type="radio" class="radio" name="software" value="all" {% if request.GET.software == 'all' %}checked{% endif %}>
+    {% trans "All known users" %}
+</label>
+{% endblock %}
diff --git a/bookwyrm/templates/snippets/filters_panel/filter_field.html b/bookwyrm/templates/snippets/filters_panel/filter_field.html
new file mode 100644
index 00000000..0a8daaa1
--- /dev/null
+++ b/bookwyrm/templates/snippets/filters_panel/filter_field.html
@@ -0,0 +1,6 @@
+<div class="column is-flex">
+    <div class="box is-flex-grow-1">
+        {% block filter %}
+        {% endblock %}
+    </div>
+</div>
diff --git a/bookwyrm/templates/snippets/filters_panel/filters_panel.html b/bookwyrm/templates/snippets/filters_panel/filters_panel.html
new file mode 100644
index 00000000..185f5bc4
--- /dev/null
+++ b/bookwyrm/templates/snippets/filters_panel/filters_panel.html
@@ -0,0 +1,25 @@
+{% load i18n %}
+<div class="notification content">
+    <h2 class="columns is-mobile mb-0">
+        <span class="column pb-0">Filters</span>
+
+        <span class="column is-narrow pb-0">
+            {% trans "Show filters" as text %}
+            {% include 'snippets/toggle/open_button.html' with text=text controls_text="filters" icon="arrow-down" class="is-small" focus="filters" %}
+            {% trans "Hide filters" as text %}
+            {% include 'snippets/toggle/close_button.html' with text=text controls_text="filters" icon="x" class="is-small" %}
+        </span>
+    </h2>
+
+    <form class="hidden mt-3" id="filters" method-"get" action="{{ request.path }}" tabindex="0">
+        <div class="columns">
+            {% block filter_fields %}
+            {% endblock %}
+        </div>
+        <button class="button is-primary">{% trans "Apply filters" %}</button>
+    </form>
+
+    {% if request.GET %}
+    <a class="help" href="{{ request.path }}">{% trans "Clear filters" %}</a>
+    {% endif %}
+</div>
diff --git a/bookwyrm/views/directory.py b/bookwyrm/views/directory.py
index c57b47f7..b329eede 100644
--- a/bookwyrm/views/directory.py
+++ b/bookwyrm/views/directory.py
@@ -41,7 +41,7 @@ class Directory(View):
         data = {
             "users": paginated.page(page),
         }
-        return TemplateResponse(request, "directory.html", data)
+        return TemplateResponse(request, "directory/directory.html", data)
 
     def post(self, request):
         """ join the directory """