diff --git a/e2e/invoice-filter-drawer.spec.ts b/e2e/invoice-filter-drawer.spec.ts
new file mode 100644
index 0000000..4fa4eab
--- /dev/null
+++ b/e2e/invoice-filter-drawer.spec.ts
@@ -0,0 +1,31 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Invoice Processing filter drawer (AP-46)", () => {
+  test("Filter drawer clears applied filters", async ({ page }) => {
+    await page.goto("/");
+    await page.getByTestId("vendor-filter").fill("Acme");
+    await page.getByTestId("filter-toggle").click();
+    const drawer = page.getByTestId("filter-drawer");
+    await expect(drawer).toBeVisible();
+    await expect(page.getByTestId("filter-drawer-vendor")).toContainText("Acme");
+
+    await page.getByTestId("filter-drawer-clear").click();
+    await expect(page.getByTestId("vendor-filter")).toHaveValue("");
+    await expect(page.getByTestId("filter-toggle").locator(".MuiBadge-badge")).toBeHidden();
+  });
+
+  test("closing the filter drawer leaves applied filters in place", async ({ page }) => {
+    await page.goto("/");
+    await page.getByTestId("vendor-filter").fill("Acme");
+    await page.getByTestId("filter-toggle").click();
+    await expect(page.getByTestId("filter-drawer")).toBeVisible();
+    await expect(page.getByTestId("filter-toggle").locator(".MuiBadge-badge")).toHaveText("1");
+
+    await page.getByRole("button", { name: "Close filters" }).evaluate((el: HTMLElement) => {
+      el.click();
+    });
+    await expect(page.getByTestId("filter-drawer")).toBeHidden();
+    await expect(page.getByTestId("vendor-filter")).toHaveValue("Acme");
+    await expect(page.getByTestId("filter-toggle").locator(".MuiBadge-badge")).toHaveText("1");
+  });
+});
diff --git a/package-lock.json b/package-lock.json
index 7fa5aaf..474ca5b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -898,6 +898,59 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@drizzle-team/brocli": {
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/@drizzle-team/brocli/-/brocli-0.10.2.tgz",
diff --git a/src/dashboard/DashboardGrids.tsx b/src/dashboard/DashboardGrids.tsx
index ab1f03d..7c93f7d 100644
--- a/src/dashboard/DashboardGrids.tsx
+++ b/src/dashboard/DashboardGrids.tsx
@@ -2,6 +2,7 @@ import { useMemo, useState } from "react";
 import { Alert, Box, CircularProgress, Stack, Tab, Tabs, Typography } from "@mui/material";
 import type { GridRowParams, GridRowSelectionModel } from "@mui/x-data-grid";
 import { ColumnsDrawer } from "@/dashboard/ColumnsDrawer";
+import { FilterDrawer } from "@/dashboard/FilterDrawer";
 import { InvoiceFilterToolbar } from "@/dashboard/InvoiceFilterToolbar";
 import { CreatePayRunButton } from "@/dashboard/CreatePayRunButton";
 import { InvoiceDataGrid } from "@/dashboard/InvoiceDataGrid";
@@ -76,7 +77,7 @@ export function DashboardGrids() {
   const [selection, setSelection] = useState<GridRowSelectionModel>(emptySelection);
   const [filters, setFilters] = useState<InvoiceFilterState>(emptyFilters);
   const [columnsDrawerOpen, setColumnsDrawerOpen] = useState(false);
-  const [, setFilterDrawerOpen] = useState(false);
+  const [filterDrawerOpen, setFilterDrawerOpen] = useState(false);
   const [columnPrefs, setColumnPrefs] = useState<ColumnPrefs>(() => loadColumnPrefs());
   const { data: invoices = [], isLoading, isError, error } = useInvoices();
   const updatePayDate = useUpdateInvoicePayDate();
@@ -330,6 +331,12 @@ export function DashboardGrids() {
           setColumnPrefs(next);
         }}
       />
+      <FilterDrawer
+        open={filterDrawerOpen}
+        onClose={() => setFilterDrawerOpen(false)}
+        filters={filters}
+        onFiltersChange={setFilters}
+      />
     </Stack>
   );
 }
diff --git a/src/dashboard/FilterDrawer.tsx b/src/dashboard/FilterDrawer.tsx
new file mode 100644
index 0000000..470a880
--- /dev/null
+++ b/src/dashboard/FilterDrawer.tsx
@@ -0,0 +1,71 @@
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, Button, Drawer, IconButton, Stack, Typography } from "@mui/material";
+import type { ReactElement } from "react";
+import { countActiveFilters, type InvoiceFilterState } from "@/dashboard/invoice-filters";
+
+type FilterDrawerProps = {
+  open: boolean;
+  onClose: () => void;
+  filters: InvoiceFilterState;
+  onFiltersChange: (next: InvoiceFilterState) => void;
+};
+
+export function FilterDrawer({
+  open,
+  onClose,
+  filters,
+  onFiltersChange,
+}: FilterDrawerProps): ReactElement {
+  const activeCount = countActiveFilters(filters);
+
+  return (
+    <Drawer
+      anchor="right"
+      open={open}
+      onClose={onClose}
+      data-testid="filter-drawer"
+      slotProps={{ paper: { sx: { width: 360, p: 2 } } }}
+    >
+      <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between", mb: 2 }}>
+        <Typography variant="h6">Filters</Typography>
+        <IconButton aria-label="Close filters" onClick={onClose} size="small">
+          <CloseIcon />
+        </IconButton>
+      </Stack>
+
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+        {activeCount === 0
+          ? "No filters applied."
+          : `${activeCount} active filter${activeCount === 1 ? "" : "s"}.`}
+      </Typography>
+
+      <Stack spacing={1.5} sx={{ mb: 3 }}>
+        <Box>
+          <Typography variant="caption" color="text.secondary">
+            Action
+          </Typography>
+          <Typography variant="body2" data-testid="filter-drawer-action">
+            {filters.action ?? "—"}
+          </Typography>
+        </Box>
+        <Box>
+          <Typography variant="caption" color="text.secondary">
+            Vendor
+          </Typography>
+          <Typography variant="body2" data-testid="filter-drawer-vendor">
+            {filters.vendorQuery.trim() || "—"}
+          </Typography>
+        </Box>
+      </Stack>
+
+      <Button
+        variant="outlined"
+        data-testid="filter-drawer-clear"
+        disabled={activeCount === 0}
+        onClick={() => onFiltersChange({ action: null, vendorQuery: "" })}
+      >
+        Clear all
+      </Button>
+    </Drawer>
+  );
+}