diff --git a/web-app/app/(housing)/housing/page.tsx b/web-app/app/(housing)/housing/page.tsx
index ba0d72c..3006d76 100644
--- a/web-app/app/(housing)/housing/page.tsx
+++ b/web-app/app/(housing)/housing/page.tsx
@@ -1,5 +1,6 @@
 import { getHousingListings } from "./_actions";
 import { HousingList } from "./_components/housing-list";
+import { HousingFilter } from "./_components/housing-filter";
 
 const PAGE_SIZE = 9;
 
@@ -11,6 +12,9 @@ export default async function Housing() {
       <div className="max-w-7xl mx-auto">
         <h1 className="text-2xl font-semibold text-foreground mb-6">Housing Listings</h1>
 
+        {/* filter dialog (UI only for now) */}
+        <HousingFilter onApply={(filters) => console.log("apply filters", filters)} />
+
         <HousingList initialListings={listings} total={total} pageSize={PAGE_SIZE} />
       </div>
     </div>