From 9e71670f39d85c6fc48f56e15586c6e328f84507 Mon Sep 17 00:00:00 2001
From: Mikaal Naik <matthewnaik@gmail.com>
Date: Wed, 16 Sep 2026 13:16:33 -0400
Subject: [PATCH] Dress /bills in the house style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bills index was a shadcn island: rounded cards floating on the linen
canvas, a boxed filter sidebar, and type that ignored the brand scale. It
read as a different product from /memos or /tracker.

Rebuild the page out of the same parts every other index uses — the
bordered page frame, the shared PageHeader, hairline-ruled sections on a
1080px measure — and give the two data-heavy regions a real surface:
white panels on the linen ground, the way /tracker already does it, so
the page is not beige on beige.

The filter sidebar drops shadcn Card/Input/Checkbox/Select for house
markup: square appearance-none checkboxes, type-label group headings in
<details> disclosures reusing the site's answer-reveal transition, and a
native select. Its props are unchanged. The five primitives that left
behind no other caller are deleted.

PageHeader grows an optional `action` slot so the FAQ trigger can sit
beside the title; existing callers are untouched.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/app/bills/BillExplorer.tsx                |  75 +--
 src/app/bills/FAQModalTrigger.tsx             |  44 +-
 src/app/bills/components/BillCard.tsx         | 144 +++---
 .../filter-section.component.tsx              | 441 ++++++++++--------
 .../Judgement/judgement.component.tsx         |   6 +-
 src/app/bills/components/ui/badge.tsx         |  46 --
 src/app/bills/components/ui/checkbox.tsx      |  32 --
 src/app/bills/components/ui/input.tsx         |  21 -
 src/app/bills/components/ui/label.tsx         |  24 -
 src/app/bills/components/ui/select.tsx        | 185 --------
 src/app/bills/page.tsx                        |  27 +-
 src/components/ui/page-header.tsx             |  17 +-
 12 files changed, 403 insertions(+), 659 deletions(-)
 delete mode 100644 src/app/bills/components/ui/badge.tsx
 delete mode 100644 src/app/bills/components/ui/checkbox.tsx
 delete mode 100644 src/app/bills/components/ui/input.tsx
 delete mode 100644 src/app/bills/components/ui/label.tsx
 delete mode 100644 src/app/bills/components/ui/select.tsx

diff --git a/src/app/bills/BillExplorer.tsx b/src/app/bills/BillExplorer.tsx
index e6f6596b..ef306737 100644
--- a/src/app/bills/BillExplorer.tsx
+++ b/src/app/bills/BillExplorer.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useMemo, useState, useCallback, memo } from "react";
 import { BillSummary } from "./types";
 import BillCard from "@/app/bills/components/BillCard";
+import SectionLabel from "@/components/SectionLabel";
 import {
   FilterSidebar,
   FilterState,
@@ -264,39 +265,51 @@ function BillExplorer({ bills }: BillExplorerProps) {
   }, []);
 
   return (
-    <div className="mx-auto max-w-7xl py-4 md:py-6">
-      <div className="flex flex-col gap-4 md:flex-row md:gap-6">
-        <aside className="w-full md:w-auto md:min-w-[260px] md:max-w-xs md:shrink-0">
-          <FilterSidebar
-            filters={filters}
-            onFiltersChange={setFilters}
-            onClearFilters={clearFilters}
-            forceCollapsed={isFilterCollapsed}
-            onCollapsedChange={setIsFilterCollapsed}
-            filterOptions={filterOptions}
-          />
-        </aside>
-
-        <main className="flex-1">
-          {filteredBills.length === 0 ? (
-            <div className="text-sm">No bills match your filters.</div>
-          ) : (
-            <ul className="flex flex-col gap-3">
-              {filteredBills.map((bill) => (
-                <BillCard
-                  key={bill.billID}
-                  bill={
-                    bill as BillSummary & {
-                      tenet_evaluations?: TenetEvaluation[];
+    <section className="px-5 py-10">
+      <div className="mx-auto max-w-[1080px]">
+        <div className="flex flex-col gap-6 md:flex-row md:gap-8">
+          <aside className="w-full md:w-[280px] md:shrink-0">
+            <FilterSidebar
+              filters={filters}
+              onFiltersChange={setFilters}
+              onClearFilters={clearFilters}
+              forceCollapsed={isFilterCollapsed}
+              onCollapsedChange={setIsFilterCollapsed}
+              filterOptions={filterOptions}
+            />
+          </aside>
+
+          <div className="min-w-0 flex-1">
+            <div className="flex items-baseline justify-between gap-4 border-b border-border-light pb-3">
+              <SectionLabel as="h2">Bills</SectionLabel>
+              <span className="type-label-sm text-text-secondary">
+                {filteredBills.length}{" "}
+                {filteredBills.length === 1 ? "bill" : "bills"}
+              </span>
+            </div>
+
+            {filteredBills.length === 0 ? (
+              <p className="type-body-sm py-6 text-text-secondary">
+                No bills match your filters.
+              </p>
+            ) : (
+              <ul className="mt-6 flex flex-col gap-3">
+                {filteredBills.map((bill) => (
+                  <BillCard
+                    key={bill.billID}
+                    bill={
+                      bill as BillSummary & {
+                        tenet_evaluations?: TenetEvaluation[];
+                      }
                     }
-                  }
-                />
-              ))}
-            </ul>
-          )}
-        </main>
+                  />
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
       </div>
-    </div>
+    </section>
   );
 }
 
diff --git a/src/app/bills/FAQModalTrigger.tsx b/src/app/bills/FAQModalTrigger.tsx
index c6359994..49476428 100644
--- a/src/app/bills/FAQModalTrigger.tsx
+++ b/src/app/bills/FAQModalTrigger.tsx
@@ -53,7 +53,7 @@ export default function FAQModalTrigger() {
       <button
         ref={buttonRef}
         type="button"
-        className="mt-3 inline-block cursor-pointer text-xs underline text-text-secondary hover:text-dark"
+        className="type-label cursor-pointer text-text-secondary underline underline-offset-4 hover:text-accent"
         onClick={openModal}
       >
         FAQ
@@ -73,7 +73,7 @@ export default function FAQModalTrigger() {
             aria-modal="true"
             aria-labelledby="faq-title"
             tabIndex={-1}
-            className={`relative z-10 w-full max-w-2xl border border-border-light bg-white p-5 shadow-xl outline-none transition-all duration-200 ease-out ${
+            className={`relative z-10 max-h-[85vh] w-full max-w-2xl overflow-y-auto border border-border-light bg-bg p-6 shadow-xl outline-none transition-all duration-200 ease-out ${
               visible
                 ? "opacity-100 translate-y-0 scale-100"
                 : "opacity-0 translate-y-2 scale-95"
@@ -86,30 +86,30 @@ export default function FAQModalTrigger() {
               <button
                 type="button"
                 aria-label="Close"
-                className="ml-3 text-text-secondary hover:text-dark"
+                className="ml-3 cursor-pointer text-text-secondary hover:text-accent"
                 onClick={closeModal}
               >
                 ✕
               </button>
             </div>
 
-            <div className="mt-4 text-sm leading-6">
-              <h3 className="font-semibold">Why did you build this?</h3>
-              <p className="text-text-secondary mt-1">
+            <div className="mt-5">
+              <h3 className="type-h4 text-dark">Why did you build this?</h3>
+              <p className="type-default mt-1.5 text-text-secondary">
                 We built this tool so that Canadians could easily understand
                 parliamentary bills and how they align with a pro-growth stance.
               </p>
 
-              <h3 className="font-semibold mt-4">
+              <h3 className="type-h4 mt-6 text-dark">
                 Where does the bill data come from?
               </h3>
-              <p className="text-text-secondary mt-1">
+              <p className="type-default mt-1.5 text-text-secondary">
                 We are powered by{" "}
                 <a
                   href="https://civicsproject.org"
                   target="_blank"
                   rel="noreferrer"
-                  className="underline"
+                  className="text-accent underline"
                 >
                   The Civics Project
                 </a>
@@ -117,32 +117,32 @@ export default function FAQModalTrigger() {
                 parliamentary data feeds.
               </p>
 
-              <h3 className="font-semibold mt-4">
+              <h3 className="type-h4 mt-6 text-dark">
                 How do you determine a bill&apos;s judgement?
               </h3>
-              <p className="text-text-secondary mt-1">
+              <p className="type-default mt-1.5 text-text-secondary">
                 Each bill is evaluated against a set of pro-growth principles
                 using an LLM. The LLM uses these principles to make a judgement
                 on the bill. We show all of this, including the principles,
                 evaluation and rationale, on the bill&apos;s page.
               </p>
 
-              <h3 className="font-semibold mt-4">
+              <h3 className="type-h4 mt-6 text-dark">
                 Was this tool created to vote on bills?
               </h3>
-              <p className="text-text-secondary mt-1">
+              <p className="type-default mt-1.5 text-text-secondary">
                 No. This tool was created to help Canadians better understand
                 bills and their economic impact. It is meant to be educational
                 and informative.
               </p>
 
-              <h3 className="font-semibold mt-4">
+              <h3 className="type-h4 mt-6 text-dark">
                 What prompt do you use to evaluate the bills?
               </h3>
-              <p className="text-text-secondary mt-1">
+              <p className="type-default mt-1.5 text-text-secondary">
                 This project, including the prompt, is open sourced on{" "}
                 <a
-                  className="underline"
+                  className="text-accent underline"
                   href="https://github.com/BuildCanada/BillsTracker/blob/main/src/prompt/summary-and-vote-prompt.ts"
                   target="_blank"
                   rel="noreferrer"
@@ -152,12 +152,12 @@ export default function FAQModalTrigger() {
                 .
               </p>
 
-              <h3 className="font-semibold mt-4">How can I contribute?</h3>
-              <p className="text-text-secondary mt-1">
+              <h3 className="type-h4 mt-6 text-dark">How can I contribute?</h3>
+              <p className="type-default mt-1.5 text-text-secondary">
                 This is a work in progress and we would love help from others.
                 Join us on{" "}
                 <a
-                  className="underline"
+                  className="text-accent underline"
                   href="https://discord.gg/VmbBSXKMve"
                   target="_blank"
                   rel="noreferrer"
@@ -167,10 +167,10 @@ export default function FAQModalTrigger() {
                 .
               </p>
 
-              <h3 className="font-semibold mt-4">How can I get in touch?</h3>
-              <p className="text-text-secondary mt-1">
+              <h3 className="type-h4 mt-6 text-dark">How can I get in touch?</h3>
+              <p className="type-default mt-1.5 text-text-secondary">
                 You can reach out to us at{" "}
-                <a className="underline" href="mailto:hi@buildcanada.com">
+                <a className="text-accent underline" href="mailto:hi@buildcanada.com">
                   hi@buildcanada.com
                 </a>
               </p>
diff --git a/src/app/bills/components/BillCard.tsx b/src/app/bills/components/BillCard.tsx
index 2b3a2e31..77c9d489 100644
--- a/src/app/bills/components/BillCard.tsx
+++ b/src/app/bills/components/BillCard.tsx
@@ -13,94 +13,88 @@ interface BillCardProps {
   bill: BillSummary & { tenet_evaluations?: TenetEvaluation[] };
 }
 
+/* A hairline tag in the house style: square, mono, uppercase. */
+function Tag({
+  children,
+  emphasis = false,
+}: {
+  children: React.ReactNode;
+  emphasis?: boolean;
+}) {
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 border px-2 py-1 type-label-sm ${
+        emphasis
+          ? "border-accent/40 bg-auburn-50 text-accent"
+          : "border-border-light text-text-secondary"
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
 function BillCard({ bill }: BillCardProps) {
   const bestDate = getBillMostRecentDate(bill);
   const dateDisplay = formatBillDate(bestDate);
 
   const judgementValue: JudgementValue = bill.final_judgment || "abstain";
+  const isProForma = bill.billID === "C-1" || bill.billID === "S-1";
 
   return (
-    <li className="group border border-border-light bg-white duration-200 overflow-hidden hover:border-dark transition-colors">
-      <Link href={`${BASE_PATH}/${bill.billID}`} className="block">
-        <div className="p-5">
-          {/* Header Section */}
-          <div className="flex items-start md:flex-row flex-col-reverse  justify-between gap-4 mb-3">
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2 mb-2"></div>
-              <h2 className="text-xl mb-4 font-semibold    max-w-[70%] transition-colors leading-tight">
-                {bill.shortTitle ?? bill.title}
-              </h2>
-            </div>
-
-            {bill.final_judgment && <Judgement judgement={judgementValue} />}
+    <li className="border border-border-light bg-white transition-colors hover:border-dark">
+      <Link
+        href={`${BASE_PATH}/${bill.billID}`}
+        className="group block h-full p-5 transition-colors hover:bg-linen-50"
+      >
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0 flex-1">
+            <p className="type-label text-text-secondary">
+              Bill {bill.billID}
+              {bill.sponsorName && bill.sponsorName !== "Unknown" && (
+                <span className="text-text-muted"> &middot; {bill.sponsorName}</span>
+              )}
+            </p>
+            <h2 className="type-h4 mt-2 text-dark transition-colors group-hover:text-accent">
+              {bill.shortTitle ?? bill.title}
+            </h2>
           </div>
 
-          {/* Description */}
-          {bill.description && (
-            <p
-              className="text-sm text-text-secondary mb-3 leading-relaxed overflow-hidden"
-              style={{
-                display: "-webkit-box",
-                WebkitLineClamp: 2,
-                WebkitBoxOrient: "vertical" as const,
-              }}
-            >
-              {bill.description}
-            </p>
+          {bill.final_judgment && (
+            <Judgement judgement={judgementValue} className="shrink-0" />
           )}
+        </div>
 
-          {/* Tags Section */}
-          <div className="flex flex-wrap gap-1.5 mb-4">
-            {/* Impact Badge */}
-            {bill.impact && (
-              <span
-                className={`inline-flex items-center px-2.5 py-1 type-label-sm ${
-                  bill.impact === "High"
-                    ? "bg-auburn-100 text-auburn-800"
-                    : bill.impact === "Medium"
-                      ? "bg-linen-200 text-charcoal-700"
-                      : "bg-charcoal-100 text-charcoal-600"
-                }`}
-              >
-                {bill.impact} Impact
-              </span>
-            )}
-            {(bill.billID === "C-1" || bill.billID === "S-1") && (
-              <span className="inline-flex items-center px-2.5 py-1 type-label-sm bg-charcoal-100 text-charcoal-600">
-                Pro Forma Bill
-              </span>
-            )}
+        {bill.description && (
+          <p className="type-default mt-2 line-clamp-2 text-text-secondary">
+            {bill.description}
+          </p>
+        )}
 
-            {/* Genre Tags (limit to 3 visible) */}
-            {bill.genres &&
-              bill.genres.length > 0 &&
-              bill.genres.map((genre, index) => {
-                const icon = getCategoryIcon(genre);
-                return (
-                  icon && (
-                    <span
-                      key={index}
-                      className="inline-flex items-center gap-1 px-2 py-1 type-label-sm bg-linen-100 text-charcoal-700"
-                    >
-                      <DynamicIcon
-                        className="w-4 h-4 mr-1"
-                        name={icon as ComponentProps<typeof DynamicIcon>["name"]}
-                      />{" "}
-                      {genre}
-                    </span>
-                  )
-                );
-              })}
-          </div>
+        <div className="mt-4 flex flex-wrap items-center gap-1.5">
+          {bill.impact && <Tag emphasis={bill.impact === "High"}>{bill.impact} impact</Tag>}
+          {isProForma && <Tag>Pro forma</Tag>}
+          {bill.genres?.map((genre, index) => {
+            const icon = getCategoryIcon(genre);
+            return (
+              icon && (
+                <Tag key={index}>
+                  <DynamicIcon
+                    className="h-3.5 w-3.5"
+                    name={icon as ComponentProps<typeof DynamicIcon>["name"]}
+                  />
+                  {genre}
+                </Tag>
+              )
+            );
+          })}
+        </div>
 
-          {/* Footer Section */}
-          <div className="flex items-center justify-between text-xs text-text-secondary pt-2 border-t border-border-light">
-            <div className="flex items-center gap-4">
-              <span className="text-xs text-dark">Bill {bill.billID}</span>{" "}
-              {bill.sponsorName && <span>by {bill.sponsorName}</span>}
-            </div>
-            <span className="text-text-secondary">{dateDisplay}</span>
-          </div>
+        <div className="mt-4 flex items-center justify-between gap-3 border-t border-border-light pt-3">
+          <span className="type-label-sm text-text-secondary transition-colors group-hover:text-accent">
+            Read the analysis
+          </span>
+          <span className="type-mono-sm text-text-secondary">{dateDisplay}</span>
         </div>
       </Link>
     </li>
diff --git a/src/app/bills/components/FilterSection/filter-section.component.tsx b/src/app/bills/components/FilterSection/filter-section.component.tsx
index d2492600..fdd60d82 100644
--- a/src/app/bills/components/FilterSection/filter-section.component.tsx
+++ b/src/app/bills/components/FilterSection/filter-section.component.tsx
@@ -1,19 +1,8 @@
+"use client";
+
 import { useState } from "react";
 
-import { Search, X, Filter } from "lucide-react";
-import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
-import { Badge } from "../ui/badge";
-import { Button } from "../ui/button";
-import { Label } from "../ui/label";
-import { Input } from "../ui/input";
-import { Checkbox } from "../ui/checkbox";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../ui/select";
+import { cn } from "@/app/bills/lib/utils";
 
 export interface FilterState {
   search: string;
@@ -41,6 +30,96 @@ interface FilterSidebarProps {
   filterOptions?: FilterOptions;
 }
 
+type ArrayFilterKey = "status" | "category" | "party" | "chamber" | "judgement";
+
+/* A square, hairline checkbox in the house style — no rounded shadcn control.
+   The native input is kept for keyboard and screen-reader behaviour and drawn
+   with `appearance-none`; the tick is a `peer-checked` sibling. */
+function FilterCheckbox({
+  id,
+  label,
+  checked,
+  onChange,
+  className,
+}: {
+  id: string;
+  label: string;
+  checked: boolean;
+  onChange: () => void;
+  className?: string;
+}) {
+  return (
+    <div className="flex items-start gap-2.5">
+      <span className="relative flex h-4 w-4 shrink-0 items-center justify-center mt-px">
+        <input
+          type="checkbox"
+          id={id}
+          checked={checked}
+          onChange={onChange}
+          className="peer h-4 w-4 cursor-pointer appearance-none border border-border-light bg-linen-50 checked:border-dark checked:bg-dark focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+        />
+        <svg
+          viewBox="0 0 10 10"
+          aria-hidden="true"
+          className="pointer-events-none absolute h-2.5 w-2.5 text-bg opacity-0 peer-checked:opacity-100"
+        >
+          <path
+            d="M1 5.2 3.7 8 9 2"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.6"
+            strokeLinecap="square"
+          />
+        </svg>
+      </span>
+      <label
+        htmlFor={id}
+        className={cn(
+          "type-default cursor-pointer leading-snug text-text-secondary hover:text-dark",
+          checked && "text-dark",
+          className,
+        )}
+      >
+        {label}
+      </label>
+    </div>
+  );
+}
+
+function FilterGroup({
+  label,
+  count,
+  children,
+}: {
+  label: string;
+  count: number;
+  children: React.ReactNode;
+}) {
+  return (
+    <details open className="group answer-reveal border-b border-border-light">
+      <summary className="flex h-11 cursor-pointer list-none items-center justify-between px-4 type-label text-text-secondary hover:text-dark [&::-webkit-details-marker]:hidden">
+        <span>
+          {label}
+          {count > 0 && <span className="ml-2 text-accent">{count}</span>}
+        </span>
+        <svg
+          viewBox="0 0 10 6"
+          aria-hidden="true"
+          className="h-1.5 w-2.5 transition-transform group-open:rotate-180"
+        >
+          <path
+            d="M1 1l4 4 4-4"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.4"
+          />
+        </svg>
+      </summary>
+      <div className="flex flex-col gap-2.5 px-4 pb-4">{children}</div>
+    </details>
+  );
+}
+
 export function FilterSidebar({
   filters,
   onFiltersChange,
@@ -68,10 +147,7 @@ export function FilterSidebar({
     onFiltersChange({ ...filters, [key]: value });
   };
 
-  const toggleArrayFilter = (
-    key: "status" | "category" | "party" | "chamber" | "judgement",
-    value: string,
-  ) => {
+  const toggleArrayFilter = (key: ArrayFilterKey, value: string) => {
     const currentValues = filters[key];
     const newValues = currentValues.includes(value)
       ? currentValues.filter((v) => v !== value)
@@ -79,209 +155,184 @@ export function FilterSidebar({
     updateFilter(key, newValues);
   };
 
-  const getActiveFilterCount = () => {
-    let count = 0;
-    if (filters.search) count++;
-    count += filters.status.length;
-    count += filters.category.length;
-    count += filters.party.length;
-    count += filters.chamber.length;
-    count += filters.judgement.length;
-    if (filters.dateRange && filters.dateRange !== "all") count++;
-    return count;
-  };
-
-  const activeCount = getActiveFilterCount();
+  const activeCount =
+    (filters.search ? 1 : 0) +
+    filters.status.length +
+    filters.category.length +
+    filters.party.length +
+    filters.chamber.length +
+    filters.judgement.length +
+    (filters.dateRange && filters.dateRange !== "all" ? 1 : 0);
 
   return (
-    <Card className="sticky top-6 max-h-[calc(100vh-2rem)] overflow-hidden flex flex-col">
-      <CardHeader className="pb-0 pt-2">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Filter className="h-3 w-3" />
-            <CardTitle className="text-sm">Filters</CardTitle>
-            {activeCount > 0 && (
-              <Badge variant="secondary" className="text-xs">
-                {activeCount}
-              </Badge>
-            )}
-          </div>
-          <div className="flex items-center gap-1">
-            {activeCount > 0 && (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={onClearFilters}
-                className="text-xs px-2"
-              >
-                Clear All
-              </Button>
-            )}
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleCollapseToggle}
-              className="px-2"
+    <div className="border border-border-light bg-white md:sticky md:top-[90px] md:max-h-[calc(100vh-110px)] md:overflow-y-auto">
+      <div className="flex h-12 items-center justify-between gap-3 border-b border-border-light bg-linen-100 px-4">
+        <span className="type-label text-dark">
+          Filters
+          {activeCount > 0 && (
+            <span className="ml-2 text-accent">{activeCount}</span>
+          )}
+        </span>
+        <div className="flex items-center gap-3">
+          {activeCount > 0 && (
+            <button
+              type="button"
+              onClick={onClearFilters}
+              className="type-label-sm cursor-pointer text-text-secondary underline underline-offset-2 hover:text-accent"
             >
-              {isCollapsed ? "+" : "−"}
-            </Button>
-          </div>
+              Clear all
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={handleCollapseToggle}
+            aria-expanded={!isCollapsed}
+            className="type-label-sm cursor-pointer text-text-secondary hover:text-dark md:hidden"
+          >
+            {isCollapsed ? "Show" : "Hide"}
+          </button>
         </div>
-      </CardHeader>
+      </div>
 
       {!isCollapsed && (
-        <CardContent className="space-y-6 overflow-y-auto pr-2 flex-1">
+        <div>
           {/* Search */}
-          <div className="space-y-2">
-            <Label>Search</Label>
-            <div className="relative">
-              <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-              <Input
+          <div className="border-b border-border-light p-4">
+            <div className="flex h-11 items-center gap-3 border border-border-light bg-linen-50 px-3">
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                aria-hidden="true"
+                className="shrink-0 text-text-secondary"
+              >
+                <circle
+                  cx="6"
+                  cy="6"
+                  r="4.5"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                />
+                <path
+                  d="M9.5 9.5L13 13"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                />
+              </svg>
+              <input
+                type="text"
                 placeholder="Search bills..."
+                aria-label="Search bills"
                 value={filters.search}
                 onChange={(e) => updateFilter("search", e.target.value)}
-                className="pl-9"
+                className="min-w-0 flex-1 bg-transparent font-mono text-sm outline-none placeholder:text-text-secondary"
               />
               {filters.search && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="absolute right-1 top-1 h-8 w-8 p-0"
+                <button
+                  type="button"
                   onClick={() => updateFilter("search", "")}
+                  aria-label="Clear search"
+                  className="shrink-0 cursor-pointer text-text-secondary hover:text-dark"
                 >
-                  <X className="h-4 w-4" />
-                </Button>
+                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                    <path
+                      d="M3 3l8 8M11 3l-8 8"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                </button>
               )}
             </div>
           </div>
 
-          {/* Status */}
-          <div className="space-y-3 ">
-            <Label>Status</Label>
-            <div className="space-y-2">
-              {(filterOptions?.statuses || []).map((status) => (
-                <div key={status} className="flex items-start space-x-2">
-                  <Checkbox
-                    id={status}
-                    className="mt-0.5"
-                    checked={filters.status.includes(status.toLowerCase())}
-                    onCheckedChange={() =>
-                      toggleArrayFilter("status", status.toLowerCase())
-                    }
-                  />
-                  <Label htmlFor={status} className="text-sm font-normal">
-                    {status}
-                  </Label>
-                </div>
-              ))}
-            </div>
-          </div>
+          <FilterGroup label="Judgement" count={filters.judgement.length}>
+            {(["yes", "no", "abstain"] as const).map((j) => (
+              <FilterCheckbox
+                key={j}
+                id={`judgement-${j}`}
+                label={j === "abstain" ? "Abstain" : `Vote ${j}`}
+                checked={filters.judgement.includes(j)}
+                onChange={() => toggleArrayFilter("judgement", j)}
+              />
+            ))}
+          </FilterGroup>
 
-          {/* Judgement */}
-          <div className="space-y-3 ">
-            <Label>Judgement</Label>
-            <div className="space-y-2">
-              {["yes", "no", "abstain"].map((j) => (
-                <div key={j} className="flex items-start space-x-2">
-                  <Checkbox
-                    id={`judgement-${j}`}
-                    className="mt-0.5"
-                    checked={filters.judgement.includes(j)}
-                    onCheckedChange={() => toggleArrayFilter("judgement", j)}
-                  />
-                  <Label
-                    htmlFor={`judgement-${j}`}
-                    className="text-sm font-normal capitalize"
-                  >
-                    {j}
-                  </Label>
-                </div>
-              ))}
-            </div>
-          </div>
+          <FilterGroup label="Status" count={filters.status.length}>
+            {(filterOptions?.statuses || []).map((status) => (
+              <FilterCheckbox
+                key={status}
+                id={`status-${status}`}
+                label={status}
+                checked={filters.status.includes(status.toLowerCase())}
+                onChange={() =>
+                  toggleArrayFilter("status", status.toLowerCase())
+                }
+              />
+            ))}
+          </FilterGroup>
 
-          {/* Category */}
-          <div className="space-y-3">
-            <Label>Category</Label>
-            <div className="space-y-2">
-              {(filterOptions?.categories || []).map((category) => (
-                <div key={category} className="flex items-center space-x-2">
-                  <Checkbox
-                    id={category}
-                    checked={filters.category.includes(category)}
-                    onCheckedChange={() =>
-                      toggleArrayFilter("category", category)
-                    }
-                  />
-                  <Label htmlFor={category} className="text-sm font-normal">
-                    {category}
-                  </Label>
-                </div>
-              ))}
-            </div>
-          </div>
+          <FilterGroup label="Category" count={filters.category.length}>
+            {(filterOptions?.categories || []).map((category) => (
+              <FilterCheckbox
+                key={category}
+                id={`category-${category}`}
+                label={category}
+                checked={filters.category.includes(category)}
+                onChange={() => toggleArrayFilter("category", category)}
+              />
+            ))}
+          </FilterGroup>
 
-          {/* Sponsor Party */}
-          <div className="space-y-3 align-start *:text-sm">
-            <Label>Sponsor Party</Label>
-            <div className="space-y-2">
-              {(filterOptions?.parties || []).map((party) => (
-                <div key={party} className="flex items-center space-x-2">
-                  <Checkbox
-                    id={party}
-                    checked={filters.party.includes(party)}
-                    onCheckedChange={() => toggleArrayFilter("party", party)}
-                  />
-                  <Label htmlFor={party} className="text-sm font-normal">
-                    {party}
-                  </Label>
-                </div>
-              ))}
-            </div>
-          </div>
+          <FilterGroup label="Sponsor party" count={filters.party.length}>
+            {(filterOptions?.parties || []).map((party) => (
+              <FilterCheckbox
+                key={party}
+                id={`party-${party}`}
+                label={party}
+                checked={filters.party.includes(party)}
+                onChange={() => toggleArrayFilter("party", party)}
+              />
+            ))}
+          </FilterGroup>
 
-          {/* Chamber */}
-          <div className="space-y-3">
-            <Label>Chamber</Label>
-            <div className="space-y-2">
-              {(filterOptions?.chambers || []).map((chamber) => (
-                <div key={chamber} className="flex items-center space-x-2">
-                  <Checkbox
-                    id={chamber}
-                    checked={filters.chamber.includes(chamber)}
-                    onCheckedChange={() =>
-                      toggleArrayFilter("chamber", chamber)
-                    }
-                  />
-                  <Label htmlFor={chamber} className="text-sm font-normal">
-                    {chamber}
-                  </Label>
-                </div>
-              ))}
-            </div>
-          </div>
+          <FilterGroup label="Chamber" count={filters.chamber.length}>
+            {(filterOptions?.chambers || []).map((chamber) => (
+              <FilterCheckbox
+                key={chamber}
+                id={`chamber-${chamber}`}
+                label={chamber}
+                checked={filters.chamber.includes(chamber)}
+                onChange={() => toggleArrayFilter("chamber", chamber)}
+              />
+            ))}
+          </FilterGroup>
 
-          {/* Date Range */}
-          <div className="space-y-2">
-            <Label>Date Range</Label>
-            <Select
+          <div className="p-4">
+            <label
+              htmlFor="bills-date-range"
+              className="type-label block text-text-secondary"
+            >
+              Introduced
+            </label>
+            <select
+              id="bills-date-range"
               value={filters.dateRange}
-              onValueChange={(value) => updateFilter("dateRange", value)}
+              onChange={(e) => updateFilter("dateRange", e.target.value)}
+              className="mt-3 h-11 w-full cursor-pointer appearance-none border border-border-light bg-linen-50 px-3 type-mono-sm text-dark outline-none focus-visible:border-dark"
             >
-              <SelectTrigger>
-                <SelectValue placeholder="All time" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All time</SelectItem>
-                <SelectItem value="last-month">Last month</SelectItem>
-                <SelectItem value="last-3-months">Last 3 months</SelectItem>
-                <SelectItem value="last-6-months">Last 6 months</SelectItem>
-                <SelectItem value="last-year">Last year</SelectItem>
-              </SelectContent>
-            </Select>
+              <option value="all">All time</option>
+              <option value="last-month">Last month</option>
+              <option value="last-3-months">Last 3 months</option>
+              <option value="last-6-months">Last 6 months</option>
+              <option value="last-year">Last year</option>
+            </select>
           </div>
-        </CardContent>
+        </div>
       )}
-    </Card>
+    </div>
   );
 }
diff --git a/src/app/bills/components/Judgement/judgement.component.tsx b/src/app/bills/components/Judgement/judgement.component.tsx
index 686dd5b1..9c1ec308 100644
--- a/src/app/bills/components/Judgement/judgement.component.tsx
+++ b/src/app/bills/components/Judgement/judgement.component.tsx
@@ -38,8 +38,8 @@ const sizes: Record<
   Size,
   { pad: string; text: string; icon: string; gap: string }
 > = {
-  sm: { pad: "p-1", text: "text-xs", icon: "h-4 w-4", gap: "gap-2" },
-  md: { pad: "p-3", text: "text-base", icon: "h-5 w-5", gap: "gap-3" },
+  sm: { pad: "py-1", text: "type-label-sm", icon: "h-3.5 w-3.5", gap: "gap-1.5" },
+  md: { pad: "py-2.5", text: "type-label", icon: "h-4 w-4", gap: "gap-2" },
 };
 
 interface JudgementProps {
@@ -89,7 +89,7 @@ export function Judgement({
         .join(" ")}
     >
       <Icon className={`${sz.icon} ${s.icon}`} aria-hidden="true" />
-      <span className={`font-medium leading-none ${sz.text}`}>
+      <span className={`leading-none ${sz.text}`}>
         {verdictCopy(judgement)}
       </span>
     </article>
diff --git a/src/app/bills/components/ui/badge.tsx b/src/app/bills/components/ui/badge.tsx
deleted file mode 100644
index 2ccc2c44..00000000
--- a/src/app/bills/components/ui/badge.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "./utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span";
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  );
-}
-
-export { Badge, badgeVariants };
diff --git a/src/app/bills/components/ui/checkbox.tsx b/src/app/bills/components/ui/checkbox.tsx
deleted file mode 100644
index c81696bf..00000000
--- a/src/app/bills/components/ui/checkbox.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
-
-import { cn } from "./utils";
-
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="flex items-center justify-center text-current transition-none"
-      >
-        <CheckIcon className="size-3.5" />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  );
-}
-
-export { Checkbox };
diff --git a/src/app/bills/components/ui/input.tsx b/src/app/bills/components/ui/input.tsx
deleted file mode 100644
index 19b0c619..00000000
--- a/src/app/bills/components/ui/input.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from "react";
-
-import { cn } from "./utils";
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Input };
diff --git a/src/app/bills/components/ui/label.tsx b/src/app/bills/components/ui/label.tsx
deleted file mode 100644
index af250e57..00000000
--- a/src/app/bills/components/ui/label.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-
-import { cn } from "./utils";
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Label };
diff --git a/src/app/bills/components/ui/select.tsx b/src/app/bills/components/ui/select.tsx
deleted file mode 100644
index 899692c6..00000000
--- a/src/app/bills/components/ui/select.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-
-import { cn } from "./utils";
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />;
-}
-
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
-}
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default";
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  );
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "popper",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className,
-        )}
-        position={position}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  );
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  );
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className,
-      )}
-      {...props}
-    >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  );
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className,
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  );
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className,
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  );
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-};
diff --git a/src/app/bills/page.tsx b/src/app/bills/page.tsx
index cf088c32..1b7b064e 100644
--- a/src/app/bills/page.tsx
+++ b/src/app/bills/page.tsx
@@ -2,14 +2,13 @@ import { BillSummary } from "./types";
 import BillExplorer from "./BillExplorer";
 import { getAllBillsFromDB } from "@/app/bills/server/get-all-bills-from-db";
 import { fromBuildCanadaDbBill } from "@/app/bills/utils/billConverters";
-import { getParliament45Header } from "@/app/bills/components/BillDetail/BillHeader";
-import Markdown from "react-markdown";
 import type { Metadata } from "next";
 import { headers } from "next/headers";
 import { env } from "@/app/bills/env";
 import { buildRelativePath } from "@/app/bills/utils/basePath";
 import { BUILD_CANADA_TWITTER_HANDLE, PROJECT_NAME } from "@/app/bills/consts/general";
 import FAQModalTrigger from "./FAQModalTrigger";
+import { PageHeader } from "@/components/ui/page-header";
 
 const CANADIAN_PARLIAMENT_NUMBER = 45;
 type HomeSearchParams = { cache?: string };
@@ -223,23 +222,13 @@ export default async function Home({
   }
   const bills = await getMergedBillsCached();
   return (
-    <div className="min-h-screen">
-      <div className="mx-auto max-w-[1120px] px-6 py-8  gap-8">
-        <main>
-          <header className="flex items-center justify-between gap-4 pb-6 border-b border-border-light mb-6">
-            <h1 className="type-h2 text-dark">
-              45th Canadian Federal Parliament
-            </h1>
-            <FAQModalTrigger />
-          </header>
-
-          <Markdown>{getParliament45Header()}</Markdown>
-
-          <section className="mt-6">
-            <BillExplorer bills={bills} />
-          </section>
-        </main>
-      </div>
+    <div className="mx-[10px] my-[10px] border border-border-light bg-bg">
+      <PageHeader
+        title={<>Bills &mdash; The 45th Parliament</>}
+        description="Every federal bill before the House and the Senate, summarized and weighed against a pro-growth standard."
+        action={<FAQModalTrigger />}
+      />
+      <BillExplorer bills={bills} />
     </div>
   );
 }
diff --git a/src/components/ui/page-header.tsx b/src/components/ui/page-header.tsx
index 51a54235..a0ce818b 100644
--- a/src/components/ui/page-header.tsx
+++ b/src/components/ui/page-header.tsx
@@ -1,16 +1,21 @@
 type PageHeaderProps = {
   title: React.ReactNode;
   description?: React.ReactNode;
+  /** Optional trailing control (a link, a dialog trigger) shown beside the title. */
+  action?: React.ReactNode;
 };
 
-export function PageHeader({ title, description }: PageHeaderProps) {
+export function PageHeader({ title, description, action }: PageHeaderProps) {
   return (
     <section className="px-5 pt-10 pb-6 md:pt-12 md:pb-8 border-b border-border-light">
-      <div className="max-w-[1080px] mx-auto">
-        <h1 className="type-h2 mb-1 text-dark">{title}</h1>
-        {description && (
-          <p className="type-body text-dark/70">{description}</p>
-        )}
+      <div className="max-w-[1080px] mx-auto flex items-start justify-between gap-6">
+        <div>
+          <h1 className="type-h2 mb-1 text-dark">{title}</h1>
+          {description && (
+            <p className="type-body text-dark/70">{description}</p>
+          )}
+        </div>
+        {action && <div className="shrink-0 pt-1">{action}</div>}
       </div>
     </section>
   );