diff --git a/lookbook/previews/open_project/filter/filters_component_preview.rb b/lookbook/previews/open_project/filter/filters_component_preview.rb
index fc9bc0f1154..39e4a9964e8 100644
--- a/lookbook/previews/open_project/filter/filters_component_preview.rb
+++ b/lookbook/previews/open_project/filter/filters_component_preview.rb
@@ -34,7 +34,9 @@ module OpenProject
     class FiltersComponentPreview < Lookbook::Preview
       def default
         @query = ProjectQuery.new
-        render(::Projects::ProjectsFiltersComponent.new(query: @query))
+        render(::Projects::ProjectsFiltersComponent.new(query: @query,
+                                                        initially_expanded: true))
+        render_with_template(locals: { query: ProjectQuery.new })
       end
     end
   end
diff --git a/lookbook/previews/open_project/filter/filters_component_preview/default.html.erb b/lookbook/previews/open_project/filter/filters_component_preview/default.html.erb
new file mode 100644
index 00000000000..67bf7e20d6d
--- /dev/null
+++ b/lookbook/previews/open_project/filter/filters_component_preview/default.html.erb
@@ -0,0 +1,7 @@
+<div
+  data-controller="filter--filters-form"
+  data-filter--filters-form-perform-turbo-requests-value="true"
+  data-filter--filters-form-clear-button-id-value="the_button"
+  data-filter--filters-form-display-filters-value="true">
+  <%= render(::Projects::ProjectsFiltersComponent.new(query:, initially_expanded: true)) %>
+</div>