diff --git a/app/routes/users/$username/notes/_layout.tsx b/app/routes/users/$username/notes/_layout.tsx
index 1a3b897..147d0ee 100644
--- a/app/routes/users/$username/notes/_layout.tsx
+++ b/app/routes/users/$username/notes/_layout.tsx
@@ -1,34 +1,44 @@
 import { invariantResponse } from '@epic-web/invariant'
 import { Img } from 'openimg/react'
-import { Link, NavLink, Outlet } from 'react-router'
+import { Form, Link, NavLink, Outlet } from 'react-router'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
+import { Input } from '#app/components/ui/input.tsx'
+import { Label } from '#app/components/ui/label.tsx'
+import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { prisma } from '#app/utils/db.server.ts'
-import { cn, getUserImgSrc } from '#app/utils/misc.tsx'
+import { cn, getUserImgSrc, useIsPending } from '#app/utils/misc.tsx'
 import { useOptionalUser } from '#app/utils/user.ts'
 import { type Route } from './+types/_layout.ts'
 
-export async function loader({ params }: Route.LoaderArgs) {
+export async function loader({ params, request }: Route.LoaderArgs) {
+	const url = new URL(request.url)
+	const q = url.searchParams.get('q')?.trim() ?? ''
+
 	const owner = await prisma.user.findFirst({
 		select: {
 			id: true,
 			name: true,
 			username: true,
 			image: { select: { objectKey: true } },
-			notes: { select: { id: true, title: true } },
+			notes: {
+				select: { id: true, title: true },
+				where: q ? { title: { contains: q } } : {},
+			},
 		},
 		where: { username: params.username },
 	})
 
 	invariantResponse(owner, 'Owner not found', { status: 404 })
 
-	return { owner }
+	return { owner, q }
 }
 
 export default function NotesRoute({ loaderData }: Route.ComponentProps) {
 	const user = useOptionalUser()
 	const isOwner = user?.id === loaderData.owner.id
 	const ownerDisplayName = loaderData.owner.name ?? loaderData.owner.username
+	const isSearching = useIsPending({ formMethod: 'GET' })
 	const navLinkDefaultClassName =
 		'line-clamp-2 block rounded-l-full py-2 pl-8 pr-6 text-base lg:text-xl'
 	return (
@@ -51,7 +61,50 @@ export default function NotesRoute({ loaderData }: Route.ComponentProps) {
 								{ownerDisplayName}'s Notes
 							</h1>
 						</Link>
+						<div className="px-8 pt-4">
+							<Form
+								method="GET"
+								preventScrollReset
+								className="flex items-center gap-2"
+							>
+								<Label htmlFor="note-search" className="sr-only">
+									Filter notes
+								</Label>
+								<Input
+									key={loaderData.q}
+									id="note-search"
+									type="search"
+									name="q"
+									placeholder="Filter notes"
+									defaultValue={loaderData.q}
+									className="text-sm"
+								/>
+								<StatusButton
+									type="submit"
+									status={isSearching ? 'pending' : 'idle'}
+									className="px-2"
+								>
+									<Icon name="magnifying-glass" size="md" />
+									<span className="sr-only">Filter notes</span>
+								</StatusButton>
+							</Form>
+							{loaderData.q ? (
+								<div className="mt-2 flex items-center justify-between text-sm">
+									<span>Filtered by &ldquo;{loaderData.q}&rdquo;</span>
+									<Link to="." preventScrollReset className="underline">
+										Clear
+									</Link>
+								</div>
+							) : null}
+						</div>
 						<ul className="overflow-x-hidden overflow-y-auto pb-12">
+							{loaderData.owner.notes.length === 0 && loaderData.q ? (
+								<li className="p-1 pr-0">
+									<p className={`${navLinkDefaultClassName} italic`}>
+										No notes match &ldquo;{loaderData.q}&rdquo;
+									</p>
+								</li>
+							) : null}
 							{isOwner ? (
 								<li className="p-1 pr-0">
 									<NavLink
diff --git a/app/routes/users/$username/notes/_layout.test.tsx b/app/routes/users/$username/notes/_layout.test.tsx
new file mode 100644
index 0000000..f216092
--- /dev/null
+++ b/app/routes/users/$username/notes/_layout.test.tsx
@@ -0,0 +1,150 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { faker } from '@faker-js/faker'
+import { render, screen } from '@testing-library/react'
+import { createRoutesStub } from 'react-router'
+import { expect, test } from 'vitest'
+import { prisma } from '#app/utils/db.server.ts'
+import { createUser } from '#tests/db-utils.ts'
+import { type Route } from './+types/_layout.ts'
+import NotesRouteDefault, { loader } from './_layout.tsx'
+
+const NOTES_BASE_URL = 'http://localhost:3000'
+const ROUTE_PATTERN = '/users/:username/notes'
+
+const LOADER_ARGS_BASE = {
+	context: {} as Parameters<typeof loader>[0]['context'],
+	url: new URL(NOTES_BASE_URL),
+	pattern: ROUTE_PATTERN,
+} satisfies Omit<Route.LoaderArgs, 'request' | 'params'>
+
+function makeLoaderRequest(username: string, q?: string) {
+	const url = new URL(`/users/${username}/notes`, NOTES_BASE_URL)
+	if (q !== undefined) url.searchParams.set('q', q)
+	return new Request(url.toString(), { method: 'GET' })
+}
+
+const NotesRoute = NotesRouteDefault
+
+async function setupOwners() {
+	const keyword = faker.string.alphanumeric({ length: 8 })
+	const ownerA = await prisma.user.create({
+		select: { id: true, username: true, name: true },
+		data: {
+			...createUser(),
+			notes: {
+				create: [
+					{
+						title: `${keyword} grocery list`,
+						content: faker.lorem.paragraph(),
+					},
+					{ title: `${keyword}es are`, content: faker.lorem.paragraph() },
+					{ title: 'Meeting notes', content: faker.lorem.paragraph() },
+				],
+			},
+		},
+	})
+	const ownerB = await prisma.user.create({
+		select: { id: true, username: true, name: true },
+		data: {
+			...createUser(),
+			notes: {
+				create: [
+					{
+						title: `${keyword} shopping extra`,
+						content: faker.lorem.paragraph(),
+					},
+					{ title: 'Meeting notes', content: faker.lorem.paragraph() },
+				],
+			},
+		},
+	})
+	return { keyword, ownerA, ownerB }
+}
+
+const getTitles = async (username: string, q?: string) => {
+	const response = await loader({
+		params: { username },
+		request: makeLoaderRequest(username, q),
+		...LOADER_ARGS_BASE,
+	})
+	return response.owner.notes.map((note) => note.title)
+}
+
+test('matching q returns only that owner matching titles regardless of case', async () => {
+	const { keyword, ownerA } = await setupOwners()
+	const titles = await getTitles(ownerA.username, keyword.toUpperCase())
+	expect(titles).toEqual([`${keyword} grocery list`, `${keyword}es are`])
+})
+
+test('no match gives empty notes and echoed q', async () => {
+	const { ownerA } = await setupOwners()
+	const response = await loader({
+		params: { username: ownerA.username },
+		request: makeLoaderRequest(ownerA.username, 'no-such-term-xyz'),
+		...LOADER_ARGS_BASE,
+	})
+	expect(response.owner.notes).toEqual([])
+	expect(response.q).toBe('no-such-term-xyz')
+})
+
+test('empty and missing q show all notes of the owner', async () => {
+	const { ownerA } = await setupOwners()
+	const emptyQTitles = await getTitles(ownerA.username, '   ')
+	const missingQTitles = await getTitles(ownerA.username)
+	expect(emptyQTitles).toHaveLength(3)
+	expect(emptyQTitles).toEqual(missingQTitles)
+})
+
+test("another owner's notes are never included", async () => {
+	const { keyword, ownerA, ownerB } = await setupOwners()
+
+	const ownerATitles = await getTitles(ownerA.username, keyword)
+	expect(ownerATitles).toEqual([`${keyword} grocery list`, `${keyword}es are`])
+
+	const ownerBTitles = await getTitles(ownerB.username, keyword)
+	expect(ownerBTitles).toEqual([`${keyword} shopping extra`])
+
+	const ownerBMatchingTitleCount = await prisma.note.count({
+		where: {
+			owner: { username: ownerA.username },
+			title: { contains: keyword },
+		},
+	})
+	expect(ownerBMatchingTitleCount).toBe(2)
+	const sharedTitleCount = await prisma.note.count({
+		where: { owner: { username: ownerB.username }, title: 'Meeting notes' },
+	})
+	expect(sharedTitleCount).toBe(1)
+})
+
+test('UI shows filter box, no-results message and clear link', async () => {
+	const { ownerA } = await setupOwners()
+
+	const App = createRoutesStub([
+		{
+			path: '/users/:username/notes',
+			Component: NotesRoute,
+			loader: (args) =>
+				loader({
+					...LOADER_ARGS_BASE,
+					url: new URL(args.request.url),
+					params: { username: String(args.params.username) },
+					request: args.request,
+				} as unknown as Route.LoaderArgs),
+			HydrateFallback: () => <div>Loading...</div>,
+		},
+	])
+
+	render(
+		<App
+			initialEntries={[`/users/${ownerA.username}/notes?q=no-such-term-xyz`]}
+		/>,
+	)
+
+	await screen.findByLabelText('Filter notes')
+	await screen.findByText(/no notes match/i)
+	await screen.findByText(/filtered by/i)
+	await screen.findByRole('link', { name: /clear/i })
+})