diff --git a/core/templates/core/report.html b/core/templates/core/report.html
index d58a9d7..9745dce 100644
--- a/core/templates/core/report.html
+++ b/core/templates/core/report.html
@@ -30,25 +30,152 @@
     </div>
 </div>
 
-{# === FILTER PILLS === #}
-<div class="filter-pill-strip d-flex flex-wrap gap-2 mb-4 d-print-none">
-    <span class="filter-pill">
-        <i class="fas fa-calendar me-1"></i>{{ start_date|date:"d M Y" }} &ndash; {{ end_date|date:"d M Y" }}
-    </span>
-    <span class="filter-pill">
-        <i class="fas fa-folder me-1"></i>{{ project_name }}
+{# === FILTER PILLS (interactive — pill-as-dropdown) === #}
+{# Each pill is a clickable button that opens an inline popover with the #}
+{# relevant editor. The Apply button appears only when at least one pill #}
+{# has uncommitted changes. See the JS module lower in this file. #}
+<div class="filter-pill-strip d-flex flex-wrap gap-2 mb-4 d-print-none" id="filter-pill-strip">
+
+    {# --- Date pill --- #}
+    <div class="filter-pill-wrap position-relative">
+        <button type="button"
+                class="filter-pill filter-pill--editable"
+                id="filter-pill-date"
+                data-filter="date"
+                aria-expanded="false"
+                aria-controls="popover-date">
+            <i class="fas fa-calendar me-1"></i>
+            <span class="filter-pill__label">{{ start_date|date:"d M Y" }} &ndash; {{ end_date|date:"d M Y" }}</span>
+            <i class="fas fa-chevron-down ms-2 small filter-pill__chevron"></i>
+        </button>
+        <div class="filter-popover" id="popover-date" role="dialog" aria-label="Edit date range" hidden>
+            <div class="filter-popover__body">
+                <label class="form-label fw-semibold small">Date Selection</label>
+                <div class="btn-group w-100 mb-3" role="group">
+                    <input type="radio" class="btn-check" name="popover_date_mode" id="popDateModeMonth" value="month" checked>
+                    <label class="btn btn-outline-secondary btn-sm" for="popDateModeMonth">
+                        <i class="fas fa-calendar-alt me-1"></i>Month(s)
+                    </label>
+                    <input type="radio" class="btn-check" name="popover_date_mode" id="popDateModeCustom" value="custom">
+                    <label class="btn btn-outline-secondary btn-sm" for="popDateModeCustom">
+                        <i class="fas fa-calendar-week me-1"></i>Custom Dates
+                    </label>
+                </div>
+                <div class="row g-2" id="popoverMonthFields">
+                    <div class="col-6">
+                        <label class="form-label small">From</label>
+                        <input type="month" id="popoverFromMonth" class="form-control form-control-sm">
+                    </div>
+                    <div class="col-6">
+                        <label class="form-label small">To</label>
+                        <input type="month" id="popoverToMonth" class="form-control form-control-sm">
+                    </div>
+                </div>
+                <div class="row g-2 d-none" id="popoverCustomFields">
+                    <div class="col-6">
+                        <label class="form-label small">Start</label>
+                        <input type="date" id="popoverStartDate" class="form-control form-control-sm">
+                    </div>
+                    <div class="col-6">
+                        <label class="form-label small">End</label>
+                        <input type="date" id="popoverEndDate" class="form-control form-control-sm">
+                    </div>
+                </div>
+            </div>
+            <div class="filter-popover__footer">
+                <button type="button" class="btn btn-sm btn-outline-secondary popover-cancel">Cancel</button>
+                <button type="button" class="btn btn-sm btn-accent popover-ok">OK</button>
+            </div>
+        </div>
+    </div>
+
+    {# --- Projects pill --- #}
+    <div class="filter-pill-wrap position-relative">
+        <button type="button"
+                class="filter-pill filter-pill--editable"
+                id="filter-pill-projects"
+                data-filter="projects"
+                aria-expanded="false"
+                aria-controls="popover-projects">
+            <i class="fas fa-folder me-1"></i>
+            <span class="filter-pill__label">{{ project_name }}</span>
+            <i class="fas fa-chevron-down ms-2 small filter-pill__chevron"></i>
+        </button>
         {% if selected_project_ids %}
-        <a href="?{{ query_string_without_project|default:query_string }}" class="filter-pill__x" aria-label="Clear project filter">&times;</a>
+        <a href="?{{ query_string_without_project|default:query_string }}"
+           class="filter-pill__x"
+           aria-label="Clear project filter"
+           title="Clear project filter">&times;</a>
         {% endif %}
-    </span>
-    <span class="filter-pill">
-        <i class="fas fa-users me-1"></i>{{ team_name }}
+        <div class="filter-popover" id="popover-projects" role="dialog" aria-label="Edit projects" hidden>
+            <div class="filter-popover__body">
+                <label class="form-label fw-semibold small">Projects</label>
+                <select id="popoverProjects" class="form-select report-multi" multiple data-placeholder="All projects (leave empty for all)">
+                    {% for p in projects %}
+                    <option value="{{ p.id }}"{% if p.id|stringformat:"s" in selected_project_ids %} selected{% endif %}>{{ p.name }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="filter-popover__footer">
+                <button type="button" class="btn btn-sm btn-outline-secondary popover-cancel">Cancel</button>
+                <button type="button" class="btn btn-sm btn-accent popover-ok">OK</button>
+            </div>
+        </div>
+    </div>
+
+    {# --- Teams pill --- #}
+    <div class="filter-pill-wrap position-relative">
+        <button type="button"
+                class="filter-pill filter-pill--editable"
+                id="filter-pill-teams"
+                data-filter="teams"
+                aria-expanded="false"
+                aria-controls="popover-teams">
+            <i class="fas fa-users me-1"></i>
+            <span class="filter-pill__label">{{ team_name }}</span>
+            <i class="fas fa-chevron-down ms-2 small filter-pill__chevron"></i>
+        </button>
         {% if selected_team_ids %}
-        <a href="?{{ query_string_without_team|default:query_string }}" class="filter-pill__x" aria-label="Clear team filter">&times;</a>
+        <a href="?{{ query_string_without_team|default:query_string }}"
+           class="filter-pill__x"
+           aria-label="Clear team filter"
+           title="Clear team filter">&times;</a>
         {% endif %}
-    </span>
+        <div class="filter-popover" id="popover-teams" role="dialog" aria-label="Edit teams" hidden>
+            <div class="filter-popover__body">
+                <label class="form-label fw-semibold small">Teams</label>
+                <select id="popoverTeams" class="form-select report-multi" multiple data-placeholder="All teams (leave empty for all)">
+                    {% for t in teams %}
+                    <option value="{{ t.id }}"{% if t.id|stringformat:"s" in selected_team_ids %} selected{% endif %}>{{ t.name }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="filter-popover__footer">
+                <button type="button" class="btn btn-sm btn-outline-secondary popover-cancel">Cancel</button>
+                <button type="button" class="btn btn-sm btn-accent popover-ok">OK</button>
+            </div>
+        </div>
+    </div>
+
+    {# --- Apply / Cancel buttons (shown only when dirty) --- #}
+    <div class="apply-filters-group ms-auto" id="apply-filters-group" hidden>
+        <button type="button" class="btn btn-sm btn-outline-secondary" id="cancel-filters-btn">Reset</button>
+        <button type="button" class="btn btn-sm btn-accent ms-1" id="apply-filters-btn">
+            <i class="fas fa-check me-1"></i>Apply
+        </button>
+    </div>
 </div>
 
+{# --- Toast container (for cross-filter auto-removal notices) --- #}
+<div id="filter-toast-container" class="filter-toast-container d-print-none" aria-live="polite"></div>
+
+{# --- Cross-filter data for the JS module --- #}
+{{ project_team_pairs_json|json_script:"projectTeamPairs" }}
+
+{# --- Expose current URL filter state for JS reset + dirty diffing --- #}
+{{ selected_project_ids|json_script:"urlSelectedProjectIds" }}
+{{ selected_team_ids|json_script:"urlSelectedTeamIds" }}
+
 <!-- === PRINT HEADER === -->
 <div class="d-none d-print-block mb-4">
     <h2 class="text-center fw-bold mb-1">FoxFitt Construction &mdash; Payroll Report</h2>