diff --git a/src/api/note/index.ts b/src/api/note/index.ts
index 9ecf459..16bf7a1 100644
--- a/src/api/note/index.ts
+++ b/src/api/note/index.ts
@@ -1,7 +1,14 @@
 import ms from "ms";
 import { type ServiceArgs, createQueryService, createService } from "../helpers/createService";
 import { jsonFetch } from "../helpers/jsonFetch";
-import type { CreateNote, Note, NoteParams, NoteSearchParams, Notes } from "./schema";
+import type {
+	CreateNote,
+	FavouriteNote,
+	Note,
+	NoteParams,
+	NoteSearchParams,
+	Notes,
+} from "./schema";
 
 export const notesService = {
 	getAll: createQueryService({
@@ -36,4 +43,9 @@ export const notesService = {
 				body: JSON.stringify(args.body),
 			}),
 	}),
+	favourite: createService({
+		url: "/notes/:noteId/favourite",
+		call: (url, args: ServiceArgs<{ urlParams: NoteParams; body: FavouriteNote }>) =>
+			jsonFetch<Note>({ ...args, url, method: "POST", body: JSON.stringify(args.body) }),
+	}),
 };
diff --git a/src/api/note/mocks.ts b/src/api/note/mocks.ts
index 0ddcc3a..b2f9971 100644
--- a/src/api/note/mocks.ts
+++ b/src/api/note/mocks.ts
@@ -9,5 +9,6 @@ export const createNoteMock = (opts?: PartialDeep<Note>): Note => ({
 	id: randUuid(),
 	title: randWord({ length: 5 }).join(" "),
 	content: randSentence(),
+	isFavourite: false,
 	...opts,
 });
diff --git a/src/api/note/schema.ts b/src/api/note/schema.ts
index 4ec6390..53c9047 100644
--- a/src/api/note/schema.ts
+++ b/src/api/note/schema.ts
@@ -8,6 +8,7 @@ export const NoteSchema = z.object({
 	id: z.string().uuid(),
 	title: z.string(),
 	content: z.string(),
+	isFavourite: z.boolean().default(false).optional(),
 });
 export type Note = z.infer<typeof NoteSchema>;
 
@@ -17,4 +18,9 @@ export type Notes = z.infer<typeof NotesSchema>;
 export const CreateNoteSchema = NoteSchema.pick({ title: true, content: true });
 export type CreateNote = z.infer<typeof CreateNoteSchema>;
 
-export type NoteSearchParams = { search: string };
+export type NoteSearchParams = { search: string; favouritesOnly?: "true" | "false" };
+
+export const FavouriteNoteSchema = z.object({
+	isFavourite: z.boolean(),
+});
+export type FavouriteNote = z.infer<typeof FavouriteNoteSchema>;
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index 4be76e2..ede0567 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import type { ComponentPropsWithoutRef } from "react";
 
 export const Label = ({ children, ...props }: ComponentPropsWithoutRef<"label">) => (
@@ -9,13 +10,19 @@ export const Label = ({ children, ...props }: ComponentPropsWithoutRef<"label">)
 export const Input = (props: ComponentPropsWithoutRef<"input">) => (
 	<input
 		{...props}
-		className="w-full max-w-sm p-2 leading-none border-2 rounded outline-none focus:border-amber-400"
+		className={clsx(
+			"w-full max-w-sm p-2 leading-none border-2 rounded outline-none focus:border-amber-400",
+			props.className,
+		)}
 	/>
 );
 
 export const Textarea = (props: ComponentPropsWithoutRef<"textarea">) => (
 	<textarea
 		{...props}
-		className="w-full max-w-sm p-2 border-2 rounded outline-none focus:border-amber-400"
+		className={clsx(
+			"w-full max-w-sm p-2 border-2 rounded outline-none focus:border-amber-400",
+			props.className,
+		)}
 	/>
 );
diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts
new file mode 100644
index 0000000..f0e3fac
--- /dev/null
+++ b/src/lib/helpers.ts
@@ -0,0 +1 @@
+export const boolAsString = (v: boolean) => (v ? "true" : "false");
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index a103e83..f0d6595 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -2,7 +2,7 @@ import { seed } from "@ngneat/falso";
 import { http, HttpResponse } from "msw";
 import { api } from "../api";
 import { createNoteMock } from "../api/note/mocks";
-import { CreateNoteSchema } from "../api/note/schema";
+import { CreateNoteSchema, FavouriteNoteSchema } from "../api/note/schema";
 
 seed("42");
 
@@ -26,14 +26,12 @@ export const handlers = [
 	http.get(api.notes.getAll.url, ({ request }) => {
 		const url = new URL(request.url);
 		const search = url.searchParams.get("search");
+		const favouritesOnly = url.searchParams.get("favouritesOnly") === "true";
+		const notes = mockNotes
+			.filter((n) => (search ? n.title.toLowerCase().includes(search.toLowerCase()) : true))
+			.filter((n) => (favouritesOnly ? n.isFavourite : true));
 
-		if (search) {
-			return HttpResponse.json(
-				mockNotes.filter((n) => n.title.toLowerCase().includes(search.toLowerCase())),
-			);
-		}
-
-		return HttpResponse.json(mockNotes);
+		return HttpResponse.json(notes);
 	}),
 	http.post(api.notes.create.url, async ({ request }) => {
 		const newNote = CreateNoteSchema.safeParse(await request.json());
@@ -61,6 +59,23 @@ export const handlers = [
 
 		Object.assign(existingNote, newNote.data);
 
+		return HttpResponse.json(existingNote, { status: 200 });
+	}),
+	http.post(api.notes.favourite.url, async ({ request, params }) => {
+		const { noteId } = params;
+		const body = FavouriteNoteSchema.safeParse(await request.json());
+		const existingNote = mockNotes.find((n) => n.id === noteId);
+
+		if (!existingNote) {
+			return HttpResponse.json({}, { status: 404 });
+		}
+
+		if (!body.success) {
+			return HttpResponse.json(body.error.flatten(), { status: 400 });
+		}
+
+		existingNote.isFavourite = body.data.isFavourite;
+
 		return HttpResponse.json(existingNote, { status: 200 });
 	}),
 ];
diff --git a/src/pages/Note/Note.tsx b/src/pages/Note/Note.tsx
index 5db9a8d..7ac6e06 100644
--- a/src/pages/Note/Note.tsx
+++ b/src/pages/Note/Note.tsx
@@ -5,7 +5,7 @@ import toast from "react-hot-toast";
 import { useParams } from "react-router-dom";
 import invariant from "tiny-invariant";
 import { api } from "../../api";
-import { type CreateNote, CreateNoteSchema } from "../../api/note/schema";
+import { type CreateNote, CreateNoteSchema, type FavouriteNote } from "../../api/note/schema";
 import { Button } from "../../components/Button";
 import { Input, Textarea } from "../../components/Form";
 import { Heading } from "../../components/Typography";
@@ -27,7 +27,7 @@ export const Note = () => {
 	//   urlParams: { noteId: id! },
 	// });
 
-	const { mutate } = useMutation({
+	const edit = useMutation({
 		mutationFn: (body: Partial<CreateNote>) =>
 			api.notes.edit.call({ urlParams: { noteId: id }, body }),
 		onSuccess() {
@@ -53,6 +53,18 @@ export const Note = () => {
 		},
 	});
 
+	const favourite = useMutation({
+		mutationFn: (body: FavouriteNote) =>
+			api.notes.favourite.call({ urlParams: { noteId: id }, body }),
+		onSuccess() {
+			return refetch();
+		},
+	});
+	/**
+	 * Optimistic update
+	 */
+	const isFavourite = (favourite.isPending && favourite.variables.isFavourite) || note.isFavourite;
+
 	const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
 		event.preventDefault();
 
@@ -65,24 +77,34 @@ export const Note = () => {
 			content: formData.get("content"),
 		});
 
-		mutate(data);
+		edit.mutate(data);
 	};
 
 	return (
 		<form onSubmit={handleSubmit}>
 			<section className="space-y-4">
-				<Heading level={1}>
-					{editMode ? (
-						<>
-							<label htmlFor="title" className="sr-only">
-								Title
-							</label>
-							<Input id="title" name="title" defaultValue={note.title} />
-						</>
-					) : (
-						note.title
-					)}
-				</Heading>
+				<div className="flex items-center justify-between">
+					<Heading level={1}>
+						{editMode ? (
+							<>
+								<label htmlFor="title" className="sr-only">
+									Title
+								</label>
+								<Input id="title" name="title" defaultValue={note.title} />
+							</>
+						) : (
+							note.title
+						)}
+					</Heading>
+					<Button
+						disabled={favourite.isPending}
+						onClick={() => {
+							favourite.mutate({ isFavourite: !isFavourite });
+						}}
+					>
+						{isFavourite ? "Unfavourite" : "Favourite"}
+					</Button>
+				</div>
 				{editMode ? (
 					<>
 						<label htmlFor="content" className="sr-only">
diff --git a/src/pages/Notes/Notes.tsx b/src/pages/Notes/Notes.tsx
index 6265e9b..c750f56 100644
--- a/src/pages/Notes/Notes.tsx
+++ b/src/pages/Notes/Notes.tsx
@@ -7,18 +7,22 @@ import { ButtonLink } from "../../components/Button";
 import { Input } from "../../components/Form";
 import { Spinner } from "../../components/Icons";
 import { Heading, Link } from "../../components/Typography";
+import { boolAsString } from "../../lib/helpers";
 import { CreateNoteForm } from "../CreateNote/CreateNoteForm";
 
 export const Notes = () => {
 	const queryClient = useQueryClient();
 	const [search, setSearch] = useState("");
+	const [favouritesOnly, setFavouritesOnly] = useState<boolean>(false);
 	const {
 		data: notes,
 		isLoading,
 		isFetching,
 		isError,
 	} = useQuery({
-		...api.notes.getAll.query({ searchParams: { search } }),
+		...api.notes.getAll.query({
+			searchParams: { search, favouritesOnly: boolAsString(favouritesOnly) },
+		}),
 		placeholderData: keepPreviousData,
 	});
 	const { mutate, submittedAt } = useMutation({
@@ -37,23 +41,39 @@ export const Notes = () => {
 	return (
 		<section className="space-y-6">
 			<div className="flex items-center justify-between">
-				<Heading level={1}>Notes</Heading>
+				<div className="flex items-center gap-4">
+					<Heading level={1}>Notes</Heading>
+					{isFetching && <Spinner />}
+				</div>
 				<ButtonLink to="/create">Create note</ButtonLink>
 			</div>
 
-			<label htmlFor="search" className="sr-only">
-				Filter notes
-			</label>
-			<div className="flex items-center gap-2">
-				<Input
-					placeholder="Filter notes..."
-					type="text"
-					name="search"
-					id="search"
-					value={search}
-					onChange={(e) => setSearch(e.target.value)}
-				/>
-				{isFetching && <Spinner />}
+			<div className="flex items-center gap-8">
+				<div className="flex items-center gap-2">
+					<label htmlFor="search" className="sr-only">
+						Filter notes
+					</label>
+					<Input
+						placeholder="Filter notes..."
+						type="text"
+						name="search"
+						id="search"
+						value={search}
+						onChange={(e) => setSearch(e.target.value)}
+					/>
+				</div>
+
+				<div className="flex items-center gap-2">
+					<label htmlFor="favs">Only favs</label>
+					<Input
+						className="w-fit"
+						type="checkbox"
+						name="favs"
+						id="favs"
+						checked={favouritesOnly}
+						onChange={(e) => setFavouritesOnly(e.target.checked)}
+					/>
+				</div>
 			</div>
 
 			<ul>