diff --git a/.changeset/message-bookmarks.md b/.changeset/message-bookmarks.md
new file mode 100644
index 000000000..9ca1cf6c3
--- /dev/null
+++ b/.changeset/message-bookmarks.md
@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add message bookmarks (MSC4438). Users can bookmark messages for easy retrieval via a new Bookmarks section in the home sidebar. Gated by an operator `config.json` experiment flag (`experiments.messageBookmarks`) and a per-user experimental settings toggle.
diff --git a/src/app/features/bookmarks/bookmarkDomain.test.ts b/src/app/features/bookmarks/bookmarkDomain.test.ts
new file mode 100644
index 000000000..2f70879da
--- /dev/null
+++ b/src/app/features/bookmarks/bookmarkDomain.test.ts
@@ -0,0 +1,375 @@
+/**
+ * Unit tests for MSC4438 bookmark domain logic.
+ * All functions in bookmarkDomain.ts are pure / side-effect-free.
+ */
+import { describe, it, expect } from 'vitest';
+import type { MatrixEvent, Room } from '$types/matrix-sdk';
+import { AccountDataEvent } from '$types/matrix/accountData';
+import {
+  bookmarkItemEventType,
+  buildMatrixURI,
+  computeBookmarkId,
+  createBookmarkItem,
+  emptyIndex,
+  extractBodyPreview,
+  isValidBookmarkItem,
+  isValidIndexContent,
+} from './bookmarkDomain';
+
+// ---------------------------------------------------------------------------
+// Helpers: minimal Matrix object stubs
+// ---------------------------------------------------------------------------
+
+function makeEvent(
+  opts: {
+    id?: string | null;
+    body?: unknown;
+    msgtype?: string;
+    sender?: string;
+    ts?: number;
+  } = {}
+): MatrixEvent {
+  return {
+    getId: () => (opts.id === null ? undefined : (opts.id ?? '$event:server.tld')),
+    getTs: () => opts.ts ?? 1_000_000,
+    getSender: () => opts.sender ?? '@alice:server.tld',
+    getContent: () => ({
+      body: opts.body,
+      msgtype: opts.msgtype ?? 'm.text',
+    }),
+  } as unknown as MatrixEvent;
+}
+
+function makeRoom(opts: { roomId?: string; name?: string } = {}): Room {
+  return {
+    roomId: opts.roomId ?? '!room:server.tld',
+    name: opts.name ?? 'Test Room',
+  } as unknown as Room;
+}
+
+// ---------------------------------------------------------------------------
+// computeBookmarkId
+// ---------------------------------------------------------------------------
+
+describe('computeBookmarkId', () => {
+  it('returns a string prefixed with "bmk_"', () => {
+    expect(computeBookmarkId('!room:s', '$event:s')).toMatch(/^bmk_/);
+  });
+
+  it('is exactly 12 characters long ("bmk_" + 8 hex digits)', () => {
+    expect(computeBookmarkId('!room:s', '$event:s')).toHaveLength(12);
+  });
+
+  it('only contains hex digits after the prefix', () => {
+    const id = computeBookmarkId('!room:server.tld', '$event:server.tld');
+    expect(id.slice(4)).toMatch(/^[0-9a-f]{8}$/);
+  });
+
+  it('is deterministic — same inputs always yield the same ID', () => {
+    const a = computeBookmarkId('!room:server.tld', '$event:server.tld');
+    const b = computeBookmarkId('!room:server.tld', '$event:server.tld');
+    expect(a).toBe(b);
+  });
+
+  it('differs when roomId changes', () => {
+    const a = computeBookmarkId('!roomA:s', '$event:s');
+    const b = computeBookmarkId('!roomB:s', '$event:s');
+    expect(a).not.toBe(b);
+  });
+
+  it('differs when eventId changes', () => {
+    const a = computeBookmarkId('!room:s', '$eventA:s');
+    const b = computeBookmarkId('!room:s', '$eventB:s');
+    expect(a).not.toBe(b);
+  });
+
+  it('separator prevents (roomId + eventId) collisions', () => {
+    // Without "|" separator, ("ab", "c") and ("a", "bc") would hash the same
+    const a = computeBookmarkId('ab', 'c');
+    const b = computeBookmarkId('a', 'bc');
+    expect(a).not.toBe(b);
+  });
+
+  // Known vector — computed from the reference djb2-like algorithm:
+  //   input = "a|b", each char's code units: 97, 124, 98
+  //   hash trace: 0 → 97 → 3131 → 97159 (0x17b87)
+  it('produces the known reference vector for ("a", "b")', () => {
+    expect(computeBookmarkId('a', 'b')).toBe('bmk_00017b87');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// bookmarkItemEventType
+// ---------------------------------------------------------------------------
+
+describe('bookmarkItemEventType', () => {
+  it('returns the MSC4438 unstable event type for a given bookmark ID', () => {
+    expect(bookmarkItemEventType('bmk_abcd1234')).toBe(
+      `${AccountDataEvent.BookmarkItemPrefix}bmk_abcd1234`
+    );
+  });
+
+  it('uses BookmarkItemPrefix as the base', () => {
+    const id = 'bmk_00000001';
+    expect(bookmarkItemEventType(id)).toContain(AccountDataEvent.BookmarkItemPrefix);
+  });
+
+  it('has BookmarksIndex enum value defined correctly', () => {
+    expect(AccountDataEvent.BookmarksIndex).toBe('org.matrix.msc4438.bookmarks.index');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// buildMatrixURI
+// ---------------------------------------------------------------------------
+
+describe('buildMatrixURI', () => {
+  it.each([
+    [
+      '!room:server.tld',
+      '$event:server.tld',
+      // encodeURIComponent does not encode '!' — only ':' and '$' are encoded here
+      'matrix:roomid/!room%3Aserver.tld/e/%24event%3Aserver.tld',
+    ],
+    ['simple', 'id', 'matrix:roomid/simple/e/id'],
+    ['a b', 'c d', 'matrix:roomid/a%20b/e/c%20d'],
+  ])('buildMatrixURI(%s, %s) → %s', (roomId, eventId, expected) => {
+    expect(buildMatrixURI(roomId, eventId)).toBe(expected);
+  });
+
+  it('starts with "matrix:roomid/"', () => {
+    expect(buildMatrixURI('!r:s', '$e:s')).toMatch(/^matrix:roomid\//);
+  });
+
+  it('contains "/e/" separator between roomId and eventId', () => {
+    expect(buildMatrixURI('!r:s', '$e:s')).toContain('/e/');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// extractBodyPreview
+// ---------------------------------------------------------------------------
+
+describe('extractBodyPreview', () => {
+  it('returns the body unchanged when it is within the default limit', () => {
+    const event = makeEvent({ body: 'Hello, world!' });
+    expect(extractBodyPreview(event)).toBe('Hello, world!');
+  });
+
+  it('returns an empty string when body is undefined', () => {
+    const event = makeEvent({ body: undefined });
+    expect(extractBodyPreview(event)).toBe('');
+  });
+
+  it('returns an empty string when body is a non-string type', () => {
+    const event = makeEvent({ body: 42 });
+    expect(extractBodyPreview(event)).toBe('');
+  });
+
+  it('returns an empty string when body is an empty string', () => {
+    const event = makeEvent({ body: '' });
+    expect(extractBodyPreview(event)).toBe('');
+  });
+
+  it('truncates to 120 chars and appends "…" when body exceeds the default limit', () => {
+    const long = 'x'.repeat(200);
+    const result = extractBodyPreview(makeEvent({ body: long }));
+    expect(result).toHaveLength(121); // 120 + ellipsis char
+    expect(result.endsWith('\u2026')).toBe(true);
+    expect(result.slice(0, 120)).toBe('x'.repeat(120));
+  });
+
+  it('does not truncate when body is exactly 120 chars', () => {
+    const exact = 'y'.repeat(120);
+    expect(extractBodyPreview(makeEvent({ body: exact }))).toBe(exact);
+  });
+
+  it('respects a custom maxLength', () => {
+    const event = makeEvent({ body: 'abcdefghij' });
+    const result = extractBodyPreview(event, 5);
+    expect(result).toBe('abcde\u2026');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// isValidIndexContent
+// ---------------------------------------------------------------------------
+
+describe('isValidIndexContent', () => {
+  const valid = {
+    version: 1 as const,
+    revision: 0,
+    updated_ts: Date.now(),
+    bookmark_ids: [],
+  };
+
+  it('accepts a well-formed index', () => {
+    expect(isValidIndexContent(valid)).toBe(true);
+  });
+
+  it('accepts an index with string IDs in bookmark_ids', () => {
+    expect(isValidIndexContent({ ...valid, bookmark_ids: ['bmk_aabbccdd'] })).toBe(true);
+  });
+
+  it('rejects null', () => {
+    expect(isValidIndexContent(null)).toBe(false);
+  });
+
+  it('rejects a non-object', () => {
+    expect(isValidIndexContent('string')).toBe(false);
+    expect(isValidIndexContent(42)).toBe(false);
+  });
+
+  it('rejects version !== 1', () => {
+    expect(isValidIndexContent({ ...valid, version: 2 })).toBe(false);
+  });
+
+  it('rejects missing revision', () => {
+    const { revision, ...rest } = valid;
+    expect(isValidIndexContent(rest)).toBe(false);
+  });
+
+  it('rejects missing updated_ts', () => {
+    const { updated_ts: updatedTs, ...rest } = valid;
+    expect(isValidIndexContent(rest)).toBe(false);
+  });
+
+  it('rejects missing bookmark_ids', () => {
+    const { bookmark_ids: bookmarkIds, ...rest } = valid;
+    expect(isValidIndexContent(rest)).toBe(false);
+  });
+
+  it('rejects bookmark_ids containing a non-string', () => {
+    expect(isValidIndexContent({ ...valid, bookmark_ids: [1, 2, 3] })).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// isValidBookmarkItem
+// ---------------------------------------------------------------------------
+
+describe('isValidBookmarkItem', () => {
+  const valid = {
+    version: 1 as const,
+    bookmark_id: 'bmk_abcd1234',
+    uri: 'matrix:roomid/foo/e/bar',
+    room_id: '!room:s',
+    event_id: '$event:s',
+    event_ts: 1_000_000,
+    bookmarked_ts: 2_000_000,
+  };
+
+  it('accepts a complete, well-formed item', () => {
+    expect(isValidBookmarkItem(valid)).toBe(true);
+  });
+
+  it('accepts an item with optional fields set', () => {
+    expect(
+      isValidBookmarkItem({ ...valid, sender: '@alice:s', room_name: 'Room', deleted: false })
+    ).toBe(true);
+  });
+
+  it('rejects null', () => {
+    expect(isValidBookmarkItem(null)).toBe(false);
+  });
+
+  it('rejects a non-object', () => {
+    expect(isValidBookmarkItem('string')).toBe(false);
+  });
+
+  it('rejects version !== 1', () => {
+    expect(isValidBookmarkItem({ ...valid, version: 2 })).toBe(false);
+  });
+
+  it.each(['bookmark_id', 'uri', 'room_id', 'event_id'] as const)(
+    'rejects item missing string field "%s"',
+    (field) => {
+      const copy = { ...valid } as Record<string, unknown>;
+      delete copy[field];
+      expect(isValidBookmarkItem(copy)).toBe(false);
+    }
+  );
+
+  it.each(['event_ts', 'bookmarked_ts'] as const)(
+    'rejects item missing numeric field "%s"',
+    (field) => {
+      const copy = { ...valid } as Record<string, unknown>;
+      delete copy[field];
+      expect(isValidBookmarkItem(copy)).toBe(false);
+    }
+  );
+});
+
+// ---------------------------------------------------------------------------
+// createBookmarkItem
+// ---------------------------------------------------------------------------
+
+describe('createBookmarkItem', () => {
+  it('returns undefined when the event has no ID', () => {
+    const room = makeRoom();
+    const event = makeEvent({ id: null });
+    expect(createBookmarkItem(room, event)).toBeUndefined();
+  });
+
+  it('returns a valid BookmarkItemContent for a normal event', () => {
+    const room = makeRoom({ roomId: '!r:s', name: 'My Room' });
+    const event = makeEvent({
+      id: '$e:s',
+      body: 'Hello',
+      msgtype: 'm.text',
+      sender: '@bob:s',
+      ts: 123456,
+    });
+    const item = createBookmarkItem(room, event);
+    expect(item).toBeDefined();
+    expect(item!.version).toBe(1);
+    expect(item!.room_id).toBe('!r:s');
+    expect(item!.event_id).toBe('$e:s');
+    expect(item!.bookmark_id).toBe(computeBookmarkId('!r:s', '$e:s'));
+    expect(item!.uri).toBe(buildMatrixURI('!r:s', '$e:s'));
+    expect(item!.event_ts).toBe(123456);
+    expect(item!.sender).toBe('@bob:s');
+    expect(item!.room_name).toBe('My Room');
+    expect(item!.body_preview).toBe('Hello');
+    expect(item!.msgtype).toBe('m.text');
+  });
+
+  it('omits body_preview when body is missing', () => {
+    const room = makeRoom();
+    const event = makeEvent({ body: undefined });
+    const item = createBookmarkItem(room, event);
+    expect(item!.body_preview).toBe('');
+  });
+
+  it('passes isValidBookmarkItem on the returned content', () => {
+    const room = makeRoom();
+    const event = makeEvent();
+    const item = createBookmarkItem(room, event);
+    expect(isValidBookmarkItem(item)).toBe(true);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// emptyIndex
+// ---------------------------------------------------------------------------
+
+describe('emptyIndex', () => {
+  it('returns a valid index with version 1', () => {
+    const idx = emptyIndex();
+    expect(isValidIndexContent(idx)).toBe(true);
+    expect(idx.version).toBe(1);
+  });
+
+  it('starts with revision 0 and empty bookmark_ids', () => {
+    const idx = emptyIndex();
+    expect(idx.revision).toBe(0);
+    expect(idx.bookmark_ids).toEqual([]);
+  });
+
+  it('returns a fresh object on each call (no shared reference)', () => {
+    const a = emptyIndex();
+    const b = emptyIndex();
+    a.bookmark_ids.push('bmk_aabbccdd');
+    expect(b.bookmark_ids).toHaveLength(0);
+  });
+});
diff --git a/src/app/features/bookmarks/bookmarkDomain.ts b/src/app/features/bookmarks/bookmarkDomain.ts
new file mode 100644
index 000000000..15da412c9
--- /dev/null
+++ b/src/app/features/bookmarks/bookmarkDomain.ts
@@ -0,0 +1,171 @@
+/**
+ * MSC4438: Message bookmarks via account data
+ * https://github.com/matrix-org/matrix-spec-proposals/pull/4438
+ *
+ * Unstable event type names in use (will migrate to stable names once MSC is accepted):
+ *   m.bookmarks.index  →  org.matrix.msc4438.bookmarks.index
+ *   m.bookmark.<id>    →  org.matrix.msc4438.bookmark.<id>
+ *
+ * Bookmark ID algorithm: djb2-like 32-bit hash over "<roomId>|<eventId>", prefixed with "bmk_".
+ * This matches the reference implementation in smokku/cinny commit 6363e441 and is used here for
+ * cross-client interoperability.  If the algorithm ever changes, a migration must be provided so
+ * that existing bookmarks can have their IDs recomputed (the ID is stored in the item event, so
+ * old items remain accessible).
+ */
+
+import { MatrixEvent, Room } from '$types/matrix-sdk';
+import { AccountDataEvent } from '$types/matrix/accountData';
+
+export type BookmarkIndexContent = {
+  version: 1;
+  revision: number;
+  updated_ts: number;
+  bookmark_ids: string[];
+};
+
+export type BookmarkItemContent = {
+  version: 1;
+  bookmark_id: string;
+  uri: string;
+  room_id: string;
+  event_id: string;
+  event_ts: number;
+  bookmarked_ts: number;
+  sender?: string;
+  room_name?: string;
+  body_preview?: string;
+  msgtype?: string;
+  deleted?: boolean;
+};
+
+/**
+ * Compute a bookmark ID for a (roomId, eventId) pair using the reference
+ * djb2-style algorithm agreed upon with the Cinny proof-of-concept.
+ *
+ * Input string:  "<roomId>|<eventId>"
+ * Algorithm:     For each UTF-16 code unit ch, hash = ((hash << 5) - hash + ch) | 0
+ * Output:        "bmk_" + unsigned 32-bit hex, zero-padded to 8 chars
+ *
+ * NOTE: If this algorithm is ever changed, a migration helper must be written
+ * so that existing bookmarked items (whose IDs are stored on the server as
+ * account data event-type suffixes) can still be resolved.  The bookmark_id
+ * field inside each item event is the canonical reference.
+ */
+export function computeBookmarkId(roomId: string, eventId: string): string {
+  const input = `${roomId}|${eventId}`;
+  let hash = 0;
+  for (let i = 0; i < input.length; i += 1) {
+    const ch = input.charCodeAt(i);
+    // eslint-disable-next-line no-bitwise
+    hash = ((hash << 5) - hash + ch) | 0;
+  }
+  // Convert to unsigned 32-bit integer and encode as 8-char lowercase hex
+  // eslint-disable-next-line no-bitwise
+  const hex = (hash >>> 0).toString(16).padStart(8, '0');
+  return `bmk_${hex}`;
+}
+
+/** Construct the account data event type for a bookmark item. */
+export function bookmarkItemEventType(bookmarkId: string): string {
+  return `${AccountDataEvent.BookmarkItemPrefix}${bookmarkId}`;
+}
+
+/**
+ * Build a matrix: URI for a room event.
+ * Canonical form: matrix:roomid/<encoded_room_id>/e/<encoded_event_id>
+ * (MSC4438 §Matrix URI)
+ */
+export function buildMatrixURI(roomId: string, eventId: string): string {
+  return `matrix:roomid/${encodeURIComponent(roomId)}/e/${encodeURIComponent(eventId)}`;
+}
+
+const BODY_PREVIEW_MAX_LENGTH = 120;
+
+/**
+ * Extract a short preview of the event body for display in the bookmark list.
+ * Truncated to 120 chars with an ellipsis (MSC4438 §Body preview).
+ *
+ * Security: preview is only used as plain text in the UI, never parsed as HTML.
+ * Encrypted-room callers may choose to pass an empty string to avoid leaking
+ * plaintext into unencrypted account data (MSC4438 §Security considerations).
+ */
+export function extractBodyPreview(
+  mEvent: MatrixEvent,
+  maxLength = BODY_PREVIEW_MAX_LENGTH
+): string {
+  const content = mEvent.getContent();
+  const body = content?.body;
+  if (typeof body !== 'string' || body.length === 0) return '';
+  if (body.length <= maxLength) return body;
+  return `${body.slice(0, maxLength)}\u2026`;
+}
+
+/**
+ * Build a BookmarkItemContent from a room and event.
+ *
+ * Security: optional metadata (sender, room_name, body_preview) is copied into
+ * unencrypted account data.  For encrypted rooms the caller may choose to omit
+ * these fields, storing only the required fields (room_id, event_id, uri).
+ * Currently we always populate them for usability; future work could honour a
+ * "privacy mode" setting.
+ */
+export function createBookmarkItem(
+  room: Room,
+  mEvent: MatrixEvent
+): BookmarkItemContent | undefined {
+  const eventId = mEvent.getId();
+  const { roomId } = room;
+  if (!eventId) return undefined;
+
+  const bookmarkId = computeBookmarkId(roomId, eventId);
+
+  return {
+    version: 1,
+    bookmark_id: bookmarkId,
+    uri: buildMatrixURI(roomId, eventId),
+    room_id: roomId,
+    event_id: eventId,
+    event_ts: mEvent.getTs(),
+    bookmarked_ts: Date.now(),
+    sender: mEvent.getSender() ?? undefined,
+    room_name: room.name,
+    body_preview: extractBodyPreview(mEvent),
+    msgtype: mEvent.getContent()?.msgtype,
+  };
+}
+
+// Validators (MSC4438: clients must validate before use)
+export function isValidIndexContent(content: unknown): content is BookmarkIndexContent {
+  if (typeof content !== 'object' || content === null) return false;
+  const c = content as Record<string, unknown>;
+  return (
+    c.version === 1 &&
+    typeof c.revision === 'number' &&
+    typeof c.updated_ts === 'number' &&
+    Array.isArray(c.bookmark_ids) &&
+    (c.bookmark_ids as unknown[]).every((id) => typeof id === 'string')
+  );
+}
+
+export function isValidBookmarkItem(content: unknown): content is BookmarkItemContent {
+  if (typeof content !== 'object' || content === null) return false;
+  const c = content as Record<string, unknown>;
+  return (
+    c.version === 1 &&
+    typeof c.bookmark_id === 'string' &&
+    typeof c.uri === 'string' &&
+    typeof c.room_id === 'string' &&
+    typeof c.event_id === 'string' &&
+    typeof c.event_ts === 'number' &&
+    typeof c.bookmarked_ts === 'number'
+  );
+}
+
+export function emptyIndex(): BookmarkIndexContent {
+  return {
+    version: 1,
+    revision: 0,
+    updated_ts: Date.now(),
+    bookmark_ids: [],
+  };
+}
diff --git a/src/app/features/bookmarks/bookmarkRepository.test.ts b/src/app/features/bookmarks/bookmarkRepository.test.ts
new file mode 100644
index 000000000..0489fe692
--- /dev/null
+++ b/src/app/features/bookmarks/bookmarkRepository.test.ts
@@ -0,0 +1,469 @@
+/**
+ * Unit tests for MSC4438 bookmark repository layer.
+ *
+ * The repository functions are pure in the sense that they read and write
+ * synchronously from a MatrixClient mock that returns predictable account data.
+ * No network calls are made.
+ */
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import type { MatrixClient } from '$types/matrix-sdk';
+import { AccountDataEvent } from '$types/matrix/accountData';
+import {
+  addBookmark,
+  removeBookmark,
+  listBookmarks,
+  listDeletedBookmarks,
+  isBookmarked,
+} from './bookmarkRepository';
+import {
+  bookmarkItemEventType,
+  emptyIndex,
+  type BookmarkIndexContent,
+  type BookmarkItemContent,
+} from './bookmarkDomain';
+
+// ---------------------------------------------------------------------------
+// Stub MatrixClient
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a minimal MatrixClient stub backed by an in-memory store.
+ * `getAccountData` returns a fake MatrixEvent whose `getContent()` reads
+ * from the store; `setAccountData` writes to the store.
+ */
+function makeClient(initialData: Record<string, unknown> = {}): MatrixClient {
+  const store: Record<string, unknown> = { ...initialData };
+  const accountData = new Map<string, unknown>(Object.entries(store));
+
+  return {
+    getAccountData: vi.fn((eventType: string) => {
+      const content = store[eventType];
+      if (content === undefined) return undefined;
+      return { getContent: () => content };
+    }),
+    setAccountData: vi.fn(async (eventType: string, content: unknown) => {
+      store[eventType] = content;
+      accountData.set(eventType, content);
+    }),
+    store: { accountData },
+    _store: store, // exposed for inspection in tests
+  } as unknown as MatrixClient;
+}
+
+// ---------------------------------------------------------------------------
+// Test data helpers
+// ---------------------------------------------------------------------------
+
+function makeItem(overrides: Partial<BookmarkItemContent> = {}): BookmarkItemContent {
+  return {
+    version: 1,
+    bookmark_id: 'bmk_aabbccdd',
+    uri: 'matrix:roomid/foo/e/bar',
+    room_id: '!room:s',
+    event_id: '$event:s',
+    event_ts: 1_000_000,
+    bookmarked_ts: 2_000_000,
+    ...overrides,
+  };
+}
+
+function makeIndex(overrides: Partial<BookmarkIndexContent> = {}): BookmarkIndexContent {
+  return {
+    ...emptyIndex(),
+    ...overrides,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// addBookmark
+// ---------------------------------------------------------------------------
+
+describe('addBookmark', () => {
+  let mx: MatrixClient;
+
+  beforeEach(() => {
+    mx = makeClient();
+  });
+
+  it('writes the item event before writing the index', async () => {
+    const item = makeItem();
+    const callOrder: string[] = [];
+
+    (mx.setAccountData as ReturnType<typeof vi.fn>).mockImplementation(
+      async (type: string, content: unknown) => {
+        callOrder.push(type);
+        // keep default in-memory behaviour
+        (mx as any)._store[type] = content;
+      }
+    );
+
+    await addBookmark(mx, item);
+
+    expect(callOrder[0]).toBe(bookmarkItemEventType(item.bookmark_id));
+    expect(callOrder[1]).toBe(AccountDataEvent.BookmarksIndex);
+  });
+
+  it('prepends the bookmark ID to bookmark_ids in the index', async () => {
+    const existing = makeItem({ bookmark_id: 'bmk_11111111' });
+    const mx2 = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [existing.bookmark_id] }),
+      [bookmarkItemEventType(existing.bookmark_id)]: existing,
+    });
+
+    const newItem = makeItem({ bookmark_id: 'bmk_22222222' });
+    await addBookmark(mx2, newItem);
+
+    const store = (mx2 as any)._store;
+    const idx = store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent;
+    expect(idx.bookmark_ids[0]).toBe('bmk_22222222');
+    expect(idx.bookmark_ids[1]).toBe('bmk_11111111');
+  });
+
+  it('does not duplicate an ID already in the index', async () => {
+    const item = makeItem();
+    const mx2 = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }),
+      [bookmarkItemEventType(item.bookmark_id)]: item,
+    });
+
+    await addBookmark(mx2, item);
+
+    const idx = (mx2 as any)._store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent;
+    expect(idx.bookmark_ids.filter((id) => id === item.bookmark_id)).toHaveLength(1);
+  });
+
+  it('increments the index revision', async () => {
+    const item = makeItem();
+    await addBookmark(mx, item);
+
+    const idx = (mx as any)._store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent;
+    expect(idx.revision).toBe(1);
+  });
+
+  it('works when no index exists yet (creates an empty one)', async () => {
+    const item = makeItem();
+    await addBookmark(mx, item);
+
+    const idx = (mx as any)._store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent;
+    expect(idx.bookmark_ids).toContain(item.bookmark_id);
+  });
+
+  it('re-activates a tombstoned bookmark (strips deleted: true)', async () => {
+    const tombstoned = makeItem({ deleted: true });
+    const mx2 = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [] }),
+      [bookmarkItemEventType(tombstoned.bookmark_id)]: tombstoned,
+    });
+
+    // Re-add with a fresh item (same bookmark_id, no deleted flag)
+    const freshItem = makeItem();
+    await addBookmark(mx2, freshItem);
+
+    const stored = (mx2 as any)._store[
+      bookmarkItemEventType(freshItem.bookmark_id)
+    ] as BookmarkItemContent;
+    expect(stored.deleted).toBeUndefined();
+    const idx = (mx2 as any)._store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent;
+    expect(idx.bookmark_ids).toContain(freshItem.bookmark_id);
+  });
+
+  it('strips deleted: true even when the item passed in carries the flag', async () => {
+    const item = makeItem({ deleted: true });
+    await addBookmark(mx, item);
+
+    const stored = (mx as any)._store[
+      bookmarkItemEventType(item.bookmark_id)
+    ] as BookmarkItemContent;
+    expect(stored.deleted).toBeUndefined();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// removeBookmark
+// ---------------------------------------------------------------------------
+
+describe('removeBookmark', () => {
+  it('removes the bookmark ID from the index', async () => {
+    const item = makeItem();
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }),
+      [bookmarkItemEventType(item.bookmark_id)]: item,
+    });
+
+    await removeBookmark(mx, item.bookmark_id);
+
+    const idx = (mx as any)._store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent;
+    expect(idx.bookmark_ids).not.toContain(item.bookmark_id);
+  });
+
+  it('soft-deletes the item event (sets deleted: true)', async () => {
+    const item = makeItem();
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }),
+      [bookmarkItemEventType(item.bookmark_id)]: item,
+    });
+
+    await removeBookmark(mx, item.bookmark_id);
+
+    const stored = (mx as any)._store[
+      bookmarkItemEventType(item.bookmark_id)
+    ] as BookmarkItemContent;
+    expect(stored.deleted).toBe(true);
+  });
+
+  it('increments the index revision', async () => {
+    const item = makeItem();
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({
+        bookmark_ids: [item.bookmark_id],
+        revision: 3,
+      }),
+      [bookmarkItemEventType(item.bookmark_id)]: item,
+    });
+
+    await removeBookmark(mx, item.bookmark_id);
+
+    const idx = (mx as any)._store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent;
+    expect(idx.revision).toBe(4);
+  });
+
+  it('succeeds without error when the item event does not exist', async () => {
+    const item = makeItem();
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }),
+      // No item event stored
+    });
+
+    await expect(removeBookmark(mx, item.bookmark_id)).resolves.not.toThrow();
+  });
+
+  it('tombstones a malformed item event (sets deleted: true even when validation fails)', async () => {
+    // A malformed item exists in account data (e.g. written by a buggy client).
+    // removeBookmark must still tombstone it so orphan recovery does not resurrect it.
+    const badContent = { not_a_valid: 'item' };
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: ['bmk_bad'] }),
+      [bookmarkItemEventType('bmk_bad')]: badContent,
+    });
+
+    await removeBookmark(mx, 'bmk_bad');
+
+    const stored = (mx as any)._store[bookmarkItemEventType('bmk_bad')];
+    expect(stored.deleted).toBe(true);
+  });
+
+  it('tombstones an already-deleted item event (idempotent)', async () => {
+    // If for any reason the same bookmark is removed twice, the tombstone write
+    // should still succeed and the item should remain deleted.
+    const item = makeItem({ deleted: true });
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }),
+      [bookmarkItemEventType(item.bookmark_id)]: item,
+    });
+
+    await expect(removeBookmark(mx, item.bookmark_id)).resolves.not.toThrow();
+    const stored = (mx as any)._store[
+      bookmarkItemEventType(item.bookmark_id)
+    ] as BookmarkItemContent;
+    expect(stored.deleted).toBe(true);
+  });
+
+  it('leaves the index unchanged when the ID was not present', async () => {
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: ['bmk_aaaabbbb'] }),
+    });
+
+    await removeBookmark(mx, 'bmk_nonexistent');
+
+    const idx = (mx as any)._store[AccountDataEvent.BookmarksIndex] as BookmarkIndexContent;
+    expect(idx.bookmark_ids).toEqual(['bmk_aaaabbbb']);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// listBookmarks
+// ---------------------------------------------------------------------------
+
+describe('listBookmarks', () => {
+  it('returns an empty array when there is no index', () => {
+    const mx = makeClient();
+    expect(listBookmarks(mx)).toEqual([]);
+  });
+
+  it('returns active items in index order', () => {
+    const a = makeItem({ bookmark_id: 'bmk_aaaaaaaa' });
+    const b = makeItem({ bookmark_id: 'bmk_bbbbbbbb' });
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({
+        bookmark_ids: [a.bookmark_id, b.bookmark_id],
+      }),
+      [bookmarkItemEventType(a.bookmark_id)]: a,
+      [bookmarkItemEventType(b.bookmark_id)]: b,
+    });
+
+    const result = listBookmarks(mx);
+    expect(result.map((i) => i.bookmark_id)).toEqual([a.bookmark_id, b.bookmark_id]);
+  });
+
+  it('skips items that are soft-deleted (deleted: true)', () => {
+    const item = makeItem({ deleted: true });
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }),
+      [bookmarkItemEventType(item.bookmark_id)]: item,
+    });
+
+    expect(listBookmarks(mx)).toEqual([]);
+  });
+
+  it('skips item IDs whose event is missing from account data', () => {
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: ['bmk_orphaned'] }),
+      // No item event
+    });
+
+    expect(listBookmarks(mx)).toEqual([]);
+  });
+
+  it('deduplicates IDs that appear more than once in bookmark_ids', () => {
+    const item = makeItem();
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({
+        bookmark_ids: [item.bookmark_id, item.bookmark_id],
+      }),
+      [bookmarkItemEventType(item.bookmark_id)]: item,
+    });
+
+    expect(listBookmarks(mx)).toHaveLength(1);
+  });
+
+  it('skips malformed item events', () => {
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: ['bmk_bad'] }),
+      [bookmarkItemEventType('bmk_bad')]: { not_a_valid: 'item' },
+    });
+
+    expect(listBookmarks(mx)).toEqual([]);
+  });
+
+  it('recovers orphaned items whose event exists but ID is absent from the index', () => {
+    // Simulate a concurrent-write race: device A's bookmark_id was dropped from the
+    // index by a last-write-wins overwrite, but the item event still exists.
+    const orphan = makeItem({ bookmark_id: 'bmk_orphan1' });
+    const indexed = makeItem({ bookmark_id: 'bmk_indexed' });
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [indexed.bookmark_id] }),
+      [bookmarkItemEventType(indexed.bookmark_id)]: indexed,
+      [bookmarkItemEventType(orphan.bookmark_id)]: orphan,
+    });
+
+    const result = listBookmarks(mx);
+    expect(result.map((i) => i.bookmark_id)).toContain(orphan.bookmark_id);
+    expect(result.map((i) => i.bookmark_id)).toContain(indexed.bookmark_id);
+    // Indexed item should appear before the orphan
+    expect(result[0].bookmark_id).toBe(indexed.bookmark_id);
+  });
+
+  it('does not return soft-deleted orphaned items', () => {
+    const orphan = makeItem({ bookmark_id: 'bmk_orphan2', deleted: true });
+    const mx = makeClient({
+      // No index entry for the orphan — deleted orphan should still be skipped
+      [bookmarkItemEventType(orphan.bookmark_id)]: orphan,
+    });
+
+    expect(listBookmarks(mx)).toEqual([]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// listDeletedBookmarks
+// ---------------------------------------------------------------------------
+
+describe('listDeletedBookmarks', () => {
+  it('returns an empty array when there are no tombstoned items', () => {
+    const item = makeItem();
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }),
+      [bookmarkItemEventType(item.bookmark_id)]: item,
+    });
+    expect(listDeletedBookmarks(mx)).toEqual([]);
+  });
+
+  it('returns index-referenced items that are tombstoned (partial remove failure)', () => {
+    const item = makeItem({ deleted: true });
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }),
+      [bookmarkItemEventType(item.bookmark_id)]: item,
+    });
+    const result = listDeletedBookmarks(mx);
+    expect(result).toHaveLength(1);
+    expect(result[0].bookmark_id).toBe(item.bookmark_id);
+  });
+
+  it('returns orphan tombstones not in the index (normal remove path)', () => {
+    const item = makeItem({ bookmark_id: 'bmk_orphan99', deleted: true });
+    const mx = makeClient({
+      // ID intentionally absent from the index
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [] }),
+      [bookmarkItemEventType(item.bookmark_id)]: item,
+    });
+    const result = listDeletedBookmarks(mx);
+    expect(result).toHaveLength(1);
+    expect(result[0].bookmark_id).toBe(item.bookmark_id);
+  });
+
+  it('does not return active (non-deleted) items', () => {
+    const active = makeItem();
+    const deleted = makeItem({ bookmark_id: 'bmk_deleted1', deleted: true });
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [active.bookmark_id] }),
+      [bookmarkItemEventType(active.bookmark_id)]: active,
+      [bookmarkItemEventType(deleted.bookmark_id)]: deleted,
+    });
+    const result = listDeletedBookmarks(mx);
+    expect(result.map((i) => i.bookmark_id)).not.toContain(active.bookmark_id);
+    expect(result.map((i) => i.bookmark_id)).toContain(deleted.bookmark_id);
+  });
+
+  it('deduplicates when the same ID appears in both index and orphan scan', () => {
+    const item = makeItem({ deleted: true });
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [item.bookmark_id] }),
+      [bookmarkItemEventType(item.bookmark_id)]: item,
+    });
+    const result = listDeletedBookmarks(mx);
+    expect(result).toHaveLength(1);
+  });
+
+  it('skips malformed item events even if deleted: true', () => {
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: [] }),
+      [bookmarkItemEventType('bmk_bad')]: { deleted: true, not_valid: 'junk' },
+    });
+    expect(listDeletedBookmarks(mx)).toEqual([]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// isBookmarked
+// ---------------------------------------------------------------------------
+
+describe('isBookmarked', () => {
+  it('returns true when the ID is in the index', () => {
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: ['bmk_aabbccdd'] }),
+    });
+    expect(isBookmarked(mx, 'bmk_aabbccdd')).toBe(true);
+  });
+
+  it('returns false when the ID is not in the index', () => {
+    const mx = makeClient({
+      [AccountDataEvent.BookmarksIndex]: makeIndex({ bookmark_ids: ['bmk_aabbccdd'] }),
+    });
+    expect(isBookmarked(mx, 'bmk_ffffffff')).toBe(false);
+  });
+
+  it('returns false when there is no index', () => {
+    const mx = makeClient();
+    expect(isBookmarked(mx, 'bmk_aabbccdd')).toBe(false);
+  });
+});
diff --git a/src/app/features/bookmarks/bookmarkRepository.ts b/src/app/features/bookmarks/bookmarkRepository.ts
new file mode 100644
index 000000000..1b6cf0208
--- /dev/null
+++ b/src/app/features/bookmarks/bookmarkRepository.ts
@@ -0,0 +1,202 @@
+/**
+ * Bookmark repository: low-level read/write operations against Matrix account data.
+ *
+ * All writes follow the MSC4438 ordering guarantee:
+ *   item is written first → index is updated second
+ * This ensures that when other devices receive the updated index via /sync, the
+ * referenced item event is already available.
+ */
+
+import { MatrixClient } from '$types/matrix-sdk';
+import { AccountDataEvent } from '$types/matrix/accountData';
+import {
+  BookmarkIndexContent,
+  BookmarkItemContent,
+  bookmarkItemEventType,
+  emptyIndex,
+  isValidBookmarkItem,
+  isValidIndexContent,
+} from './bookmarkDomain';
+
+// Internal helpers
+function readIndex(mx: MatrixClient): BookmarkIndexContent {
+  const evt = mx.getAccountData(AccountDataEvent.BookmarksIndex as any);
+  const content = evt?.getContent();
+  if (isValidIndexContent(content)) return content;
+  return emptyIndex();
+}
+
+function readItem(mx: MatrixClient, bookmarkId: string): BookmarkItemContent | undefined {
+  const evt = mx.getAccountData(bookmarkItemEventType(bookmarkId) as any);
+  const content = evt?.getContent();
+  // Must be valid and not tombstoned (MSC4438 §Listing bookmarks)
+  if (isValidBookmarkItem(content) && !content.deleted) return content;
+  return undefined;
+}
+
+async function writeIndex(mx: MatrixClient, index: BookmarkIndexContent): Promise<void> {
+  await mx.setAccountData(AccountDataEvent.BookmarksIndex as any, index as any);
+}
+
+async function writeItem(mx: MatrixClient, item: BookmarkItemContent): Promise<void> {
+  await mx.setAccountData(bookmarkItemEventType(item.bookmark_id) as any, item as any);
+}
+
+// Public API
+/**
+ * Add a bookmark.  Also handles re-activation: if the same (roomId, eventId) was
+ * previously removed (tombstoned), calling addBookmark again clears the tombstone
+ * and restores it to the active list.
+ *
+ * MSC4438 §Adding a bookmark:
+ *  1. Write the item event first (strips any deleted flag to guarantee re-activation).
+ *  2. Prepend the ID to bookmark_ids (if not already present).
+ *  3. Increment revision and update timestamp.
+ *  4. Write the updated index.
+ */
+export async function addBookmark(mx: MatrixClient, item: BookmarkItemContent): Promise<void> {
+  // Strip deleted so that re-bookmarking a previously removed message always
+  // produces an active item, even if a stale tombstoned item is passed in.
+  const { deleted, ...activeItem } = item;
+  // Write item before updating index (cross-device consistency)
+  await writeItem(mx, activeItem as BookmarkItemContent);
+
+  const index = readIndex(mx);
+  if (!index.bookmark_ids.includes(item.bookmark_id)) {
+    index.bookmark_ids.unshift(item.bookmark_id);
+  }
+  index.revision += 1;
+  index.updated_ts = Date.now();
+  await writeIndex(mx, index);
+}
+
+/**
+ * Remove a bookmark.
+ *
+ * MSC4438 §Removing a bookmark:
+ *  1. Soft-delete the item first (set deleted: true).
+ *  2. Remove the ID from the index.
+ *  3. Increment revision and update timestamp.
+ *  4. Write the updated index.
+ *
+ * Account data events cannot be deleted from the server, so soft-deletion is
+ * used.  This implementation intentionally tombstones the item before updating
+ * the index to mirror addBookmark()'s item-first ordering and avoid transient
+ * orphan recovery/resurrection if a removal only partially completes.
+ */
+export async function removeBookmark(mx: MatrixClient, bookmarkId: string): Promise<void> {
+  // Tombstone the item event directly — bypass readItem()'s validation so that
+  // malformed or already-deleted items still get marked deleted: true.  Without
+  // this, orphan recovery can resurrect items whose deletion write failed halfway.
+  const evt = mx.getAccountData(bookmarkItemEventType(bookmarkId) as any);
+  const raw = evt?.getContent();
+  if (raw != null) {
+    // Write using the bookmarkId param as the canonical type key, not item.bookmark_id,
+    // so malformed items (missing bookmark_id field) still get the right event type.
+    await mx.setAccountData(
+      bookmarkItemEventType(bookmarkId) as any,
+      { ...(raw as object), deleted: true } as any
+    );
+  }
+
+  const index = readIndex(mx);
+  index.bookmark_ids = index.bookmark_ids.filter((id) => id !== bookmarkId);
+  index.revision += 1;
+  index.updated_ts = Date.now();
+  await writeIndex(mx, index);
+}
+
+/**
+ * List all active bookmarks in index order, with orphan recovery.
+ *
+ * MSC4438 §Listing bookmarks:
+ *  - Iterates bookmark_ids in order.
+ *  - Skips missing, malformed, or tombstoned items.
+ *  - Deduplicates by first occurrence.
+ *
+ * Orphan recovery: also scans the in-memory account data store for bookmark
+ * item events that exist but are absent from the index.  These arise when two
+ * devices concurrently write the index (last-write-wins drops the other
+ * device's new bookmark_id while the item event itself persists).  Orphaned
+ * items are appended after the index-ordered items.
+ */
+export function listBookmarks(mx: MatrixClient): BookmarkItemContent[] {
+  const index = readIndex(mx);
+  const seen = new Set<string>();
+
+  const items = index.bookmark_ids
+    .filter((id) => {
+      if (seen.has(id)) return false;
+      seen.add(id);
+      return true;
+    })
+    .map((id) => readItem(mx, id))
+    .filter((item): item is BookmarkItemContent => item != null);
+
+  // Walk the in-memory account data store for orphaned item events.
+  const prefix = AccountDataEvent.BookmarkItemPrefix as string;
+  Array.from(mx.store.accountData.keys()).forEach((key) => {
+    if (!key.startsWith(prefix)) return;
+    const bookmarkId = key.slice(prefix.length);
+    if (seen.has(bookmarkId)) return;
+    const item = readItem(mx, bookmarkId);
+    if (item) {
+      seen.add(bookmarkId);
+      items.push(item);
+    }
+  });
+
+  return items;
+}
+
+/**
+ * List all deleted (tombstoned) bookmark items.
+ *
+ * Includes both:
+ *  - Items still referenced in the index whose item event carries deleted: true
+ *    (arises when the index write fails after a soft-delete).
+ *  - Orphaned tombstones whose ID has already been removed from the index
+ *    (the normal case after a successful remove).
+ *
+ * Results are deduplicated and include only items that pass isValidBookmarkItem
+ * (ensuring enough stored metadata is available to display and restore them).
+ */
+export function listDeletedBookmarks(mx: MatrixClient): BookmarkItemContent[] {
+  const index = readIndex(mx);
+  const results: BookmarkItemContent[] = [];
+  const seen = new Set<string>();
+
+  // 1. Index-referenced items that are tombstoned (partial remove failure)
+  index.bookmark_ids.forEach((id) => {
+    if (seen.has(id)) return;
+    seen.add(id);
+    const content = mx.getAccountData(bookmarkItemEventType(id) as any)?.getContent();
+    if (isValidBookmarkItem(content) && content.deleted === true) results.push(content);
+  });
+
+  // 2. Orphan tombstones (properly removed from index but item event persists)
+  const prefix = AccountDataEvent.BookmarkItemPrefix as string;
+  Array.from(mx.store.accountData.keys()).forEach((key) => {
+    if (!key.startsWith(prefix)) return;
+    const bookmarkId = key.slice(prefix.length);
+    if (seen.has(bookmarkId)) return;
+    seen.add(bookmarkId);
+    const content = mx.getAccountData(key as any)?.getContent();
+    if (isValidBookmarkItem(content) && content.deleted === true) results.push(content);
+  });
+
+  return results;
+}
+
+/**
+ * Check whether a specific bookmark ID is in the index.
+ *
+ * NOTE: Do not rely on the bookmark ID being deterministically derivable from
+ * (roomId, eventId) for this check — different clients may use different
+ * algorithms.  Use the bookmarkIdSet atom (derived from the live list) for
+ * O(1) per-message checks instead.
+ */
+export function isBookmarked(mx: MatrixClient, bookmarkId: string): boolean {
+  const index = readIndex(mx);
+  return index.bookmark_ids.includes(bookmarkId);
+}
diff --git a/src/app/features/bookmarks/useBookmarks.test.tsx b/src/app/features/bookmarks/useBookmarks.test.tsx
new file mode 100644
index 000000000..e09f446c2
--- /dev/null
+++ b/src/app/features/bookmarks/useBookmarks.test.tsx
@@ -0,0 +1,132 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { createStore, Provider } from 'jotai';
+import { createElement, type ReactNode } from 'react';
+import { bookmarkListAtom, bookmarkDeletedListAtom } from '$state/bookmarks';
+import { useBookmarkActions } from './useBookmarks';
+import type { BookmarkItemContent } from './bookmarkDomain';
+
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+
+const { mockMx } = vi.hoisted(() => {
+  const store: Record<string, unknown> = {};
+  return {
+    mockMx: {
+      getAccountData: vi.fn((type: string) => {
+        const content = store[type];
+        if (!content) return undefined;
+        return { getContent: () => content };
+      }),
+      setAccountData: vi.fn(async (type: string, content: unknown) => {
+        store[type] = content;
+      }),
+      store: { accountData: new Map<string, unknown>() },
+    },
+  };
+});
+
+vi.mock('$hooks/useMatrixClient', () => ({
+  useMatrixClient: () => mockMx,
+}));
+
+// Mock the repository so removeBookmark doesn't try to read real account data
+vi.mock('./bookmarkRepository', async (importOriginal) => {
+  const orig = await importOriginal<typeof import('./bookmarkRepository')>();
+  return {
+    ...orig,
+    removeBookmark: vi.fn(async () => {}),
+    addBookmark: vi.fn(async () => {}),
+  };
+});
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeItem(id: string): BookmarkItemContent {
+  return {
+    version: 1,
+    bookmark_id: id,
+    uri: `matrix:roomid/foo/e/${id}`,
+    room_id: '!room:s',
+    event_id: `$${id}:s`,
+    event_ts: 1_000,
+    bookmarked_ts: 2_000,
+  };
+}
+
+function makeWrapper(store: ReturnType<typeof createStore>) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return createElement(Provider, { store }, children);
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('useBookmarkActions.remove', () => {
+  let store: ReturnType<typeof createStore>;
+
+  beforeEach(() => {
+    store = createStore();
+  });
+
+  it('moves item from active list to deleted list optimistically', async () => {
+    const item = makeItem('bmk_1111');
+    store.set(bookmarkListAtom, [item]);
+    store.set(bookmarkDeletedListAtom, []);
+
+    const { result } = renderHook(() => useBookmarkActions(), {
+      wrapper: makeWrapper(store),
+    });
+
+    await act(async () => {
+      await result.current.remove('bmk_1111');
+    });
+
+    expect(store.get(bookmarkListAtom)).toHaveLength(0);
+
+    const deleted = store.get(bookmarkDeletedListAtom);
+    expect(deleted).toHaveLength(1);
+    expect(deleted[0].bookmark_id).toBe('bmk_1111');
+    expect(deleted[0].deleted).toBe(true);
+  });
+
+  it('does not duplicate item in deleted list if already present', async () => {
+    const item = makeItem('bmk_2222');
+    const deletedItem = { ...item, deleted: true as const };
+    store.set(bookmarkListAtom, [item]);
+    store.set(bookmarkDeletedListAtom, [deletedItem]);
+
+    const { result } = renderHook(() => useBookmarkActions(), {
+      wrapper: makeWrapper(store),
+    });
+
+    await act(async () => {
+      await result.current.remove('bmk_2222');
+    });
+
+    expect(store.get(bookmarkDeletedListAtom)).toHaveLength(1);
+  });
+
+  it('handles removing a non-existent item gracefully', async () => {
+    store.set(bookmarkListAtom, [makeItem('bmk_3333')]);
+    store.set(bookmarkDeletedListAtom, []);
+
+    const { result } = renderHook(() => useBookmarkActions(), {
+      wrapper: makeWrapper(store),
+    });
+
+    await act(async () => {
+      await result.current.remove('bmk_nonexistent');
+    });
+
+    // Original item untouched
+    expect(store.get(bookmarkListAtom)).toHaveLength(1);
+    // Nothing added to deleted list since the item wasn't found
+    expect(store.get(bookmarkDeletedListAtom)).toHaveLength(0);
+  });
+});
diff --git a/src/app/features/bookmarks/useBookmarks.ts b/src/app/features/bookmarks/useBookmarks.ts
new file mode 100644
index 000000000..c6fac5746
--- /dev/null
+++ b/src/app/features/bookmarks/useBookmarks.ts
@@ -0,0 +1,118 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useCallback } from 'react';
+import { useMatrixClient } from '$hooks/useMatrixClient';
+import {
+  bookmarkDeletedListAtom,
+  bookmarkIdSetAtom,
+  bookmarkListAtom,
+  bookmarkLoadingAtom,
+} from '$state/bookmarks';
+import { BookmarkItemContent, computeBookmarkId } from './bookmarkDomain';
+import {
+  addBookmark,
+  listBookmarks,
+  listDeletedBookmarks,
+  removeBookmark,
+  isBookmarked,
+} from './bookmarkRepository';
+
+/** Returns the current ordered bookmark list. */
+export function useBookmarkList(): BookmarkItemContent[] {
+  return useAtomValue(bookmarkListAtom);
+}
+
+/** Returns deleted (tombstoned) bookmarks that can be restored. */
+export function useBookmarkDeletedList(): BookmarkItemContent[] {
+  return useAtomValue(bookmarkDeletedListAtom);
+}
+
+/** Returns true while a bookmark refresh is in progress. */
+export function useBookmarkLoading(): boolean {
+  return useAtomValue(bookmarkLoadingAtom);
+}
+
+/**
+ * Returns true if the given (roomId, eventId) is currently bookmarked.
+ *
+ * Uses the locally cached bookmarkIdSetAtom for O(1) lookup.
+ * MSC4438 §Checking if a message is bookmarked.
+ */
+export function useIsBookmarked(roomId: string, eventId: string): boolean {
+  const idSet = useAtomValue(bookmarkIdSetAtom);
+  return idSet.has(computeBookmarkId(roomId, eventId));
+}
+
+/**
+ * Returns bookmark action callbacks: refresh, add, remove, checkIsBookmarked.
+ *
+ * `refresh` re-reads all bookmark items from the locally cached account data.
+ * `add` / `remove` optimistically update the local atom before writing to the server.
+ */
+export function useBookmarkActions() {
+  const mx = useMatrixClient();
+  const setList = useSetAtom(bookmarkListAtom);
+  const setDeletedList = useSetAtom(bookmarkDeletedListAtom);
+  const setLoading = useSetAtom(bookmarkLoadingAtom);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      setList(listBookmarks(mx));
+      setDeletedList(listDeletedBookmarks(mx));
+    } finally {
+      setLoading(false);
+    }
+  }, [mx, setList, setDeletedList, setLoading]);
+
+  const add = useCallback(
+    async (item: BookmarkItemContent) => {
+      // Optimistic update: add to active list, remove from deleted list
+      setList((prev) => {
+        if (prev.some((b) => b.bookmark_id === item.bookmark_id)) return prev;
+        return [item, ...prev];
+      });
+      setDeletedList((prev) => prev.filter((b) => b.bookmark_id !== item.bookmark_id));
+      await addBookmark(mx, item);
+    },
+    [mx, setList, setDeletedList]
+  );
+
+  const remove = useCallback(
+    async (bookmarkId: string) => {
+      // Optimistic update: move from active list to deleted list
+      setList((prev) => {
+        const removed = prev.find((b) => b.bookmark_id === bookmarkId);
+        if (removed) {
+          setDeletedList((del) => {
+            if (del.some((b) => b.bookmark_id === bookmarkId)) return del;
+            return [{ ...removed, deleted: true }, ...del];
+          });
+        }
+        return prev.filter((b) => b.bookmark_id !== bookmarkId);
+      });
+      await removeBookmark(mx, bookmarkId);
+    },
+    [mx, setList, setDeletedList]
+  );
+
+  const restore = useCallback(
+    async (item: BookmarkItemContent) => {
+      // Optimistic update: move from deleted list to active list
+      setDeletedList((prev) => prev.filter((b) => b.bookmark_id !== item.bookmark_id));
+      setList((prev) => {
+        if (prev.some((b) => b.bookmark_id === item.bookmark_id)) return prev;
+        return [item, ...prev];
+      });
+      await addBookmark(mx, item); // strips deleted flag
+    },
+    [mx, setList, setDeletedList]
+  );
+
+  const checkIsBookmarked = useCallback(
+    (roomId: string, eventId: string): boolean =>
+      isBookmarked(mx, computeBookmarkId(roomId, eventId)),
+    [mx]
+  );
+
+  return { refresh, add, remove, restore, checkIsBookmarked };
+}
diff --git a/src/app/features/bookmarks/useInitBookmarks.test.tsx b/src/app/features/bookmarks/useInitBookmarks.test.tsx
new file mode 100644
index 000000000..afb24f953
--- /dev/null
+++ b/src/app/features/bookmarks/useInitBookmarks.test.tsx
@@ -0,0 +1,152 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { createStore, Provider } from 'jotai';
+import { createElement, type ReactNode } from 'react';
+import { bookmarkListAtom, bookmarkDeletedListAtom } from '$state/bookmarks';
+import { useInitBookmarks } from './useInitBookmarks';
+import type { BookmarkItemContent, BookmarkIndexContent } from './bookmarkDomain';
+
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+
+const BOOKMARKS_INDEX = 'org.matrix.msc4438.bookmarks.index';
+const BOOKMARK_PREFIX = 'org.matrix.msc4438.bookmark.';
+
+const { accountDataCB, syncStateCB, mockMx } = vi.hoisted(() => {
+  const adCB: { current: ((event: { getType: () => string }) => void) | null } = { current: null };
+  const ssCB: { current: ((state: string, prev: string) => void) | null } = { current: null };
+
+  const item: BookmarkItemContent = {
+    version: 1,
+    bookmark_id: 'bmk_aabb',
+    uri: 'matrix:roomid/foo/e/bar',
+    room_id: '!room:s',
+    event_id: '$ev:s',
+    event_ts: 1_000,
+    bookmarked_ts: 2_000,
+  };
+  const deletedItem: BookmarkItemContent = {
+    version: 1,
+    bookmark_id: 'bmk_ccdd',
+    uri: 'matrix:roomid/baz/e/qux',
+    room_id: '!room2:s',
+    event_id: '$ev2:s',
+    event_ts: 3_000,
+    bookmarked_ts: 4_000,
+    deleted: true,
+  };
+  const index: BookmarkIndexContent = {
+    version: 1,
+    revision: 1,
+    updated_ts: 5_000,
+    bookmark_ids: ['bmk_aabb', 'bmk_ccdd'],
+  };
+
+  const store: Record<string, unknown> = {
+    'org.matrix.msc4438.bookmarks.index': index,
+    'org.matrix.msc4438.bookmark.bmk_aabb': item,
+    'org.matrix.msc4438.bookmark.bmk_ccdd': deletedItem,
+  };
+
+  const mx = {
+    getAccountData: vi.fn((type: string) => {
+      const content = store[type];
+      if (!content) return undefined;
+      return { getContent: () => content };
+    }),
+    setAccountData: vi.fn(),
+    store: { accountData: new Map(Object.entries(store)) },
+  };
+
+  return { accountDataCB: adCB, syncStateCB: ssCB, mockMx: mx };
+});
+
+vi.mock('$hooks/useMatrixClient', () => ({
+  useMatrixClient: () => mockMx,
+}));
+
+vi.mock('$hooks/useAccountDataCallback', () => ({
+  useAccountDataCallback: (_mx: unknown, cb: (event: { getType: () => string }) => void) => {
+    accountDataCB.current = cb;
+  },
+}));
+
+vi.mock('$hooks/useSyncState', () => ({
+  useSyncState: (_mx: unknown, cb: (state: string, prev: string) => void) => {
+    syncStateCB.current = cb;
+  },
+}));
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeStore() {
+  return createStore();
+}
+
+function makeWrapper(store: ReturnType<typeof createStore>) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return createElement(Provider, { store }, children);
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('useInitBookmarks', () => {
+  let store: ReturnType<typeof createStore>;
+
+  beforeEach(() => {
+    store = makeStore();
+    accountDataCB.current = null;
+    syncStateCB.current = null;
+  });
+
+  it('loads bookmarks on mount', () => {
+    renderHook(() => useInitBookmarks(), { wrapper: makeWrapper(store) });
+
+    const list = store.get(bookmarkListAtom);
+    const deleted = store.get(bookmarkDeletedListAtom);
+    expect(list).toHaveLength(1);
+    expect(list[0].bookmark_id).toBe('bmk_aabb');
+    expect(deleted).toHaveLength(1);
+    expect(deleted[0].bookmark_id).toBe('bmk_ccdd');
+  });
+
+  it('reloads when BookmarksIndex account data event fires', () => {
+    renderHook(() => useInitBookmarks(), { wrapper: makeWrapper(store) });
+
+    // Clear the atom to prove the callback re-populates it
+    store.set(bookmarkListAtom, []);
+
+    accountDataCB.current!({ getType: () => BOOKMARKS_INDEX });
+
+    expect(store.get(bookmarkListAtom)).toHaveLength(1);
+  });
+
+  it('reloads when a bookmark item account data event fires', () => {
+    renderHook(() => useInitBookmarks(), { wrapper: makeWrapper(store) });
+
+    store.set(bookmarkListAtom, []);
+
+    accountDataCB.current!({
+      getType: () => `${BOOKMARK_PREFIX}bmk_aabb`,
+    });
+
+    expect(store.get(bookmarkListAtom)).toHaveLength(1);
+  });
+
+  it('ignores unrelated account data events', () => {
+    renderHook(() => useInitBookmarks(), { wrapper: makeWrapper(store) });
+
+    store.set(bookmarkListAtom, []);
+
+    accountDataCB.current!({ getType: () => 'm.room.message' });
+
+    // Should still be empty — callback should not have triggered a reload
+    expect(store.get(bookmarkListAtom)).toHaveLength(0);
+  });
+});
diff --git a/src/app/features/bookmarks/useInitBookmarks.ts b/src/app/features/bookmarks/useInitBookmarks.ts
new file mode 100644
index 000000000..480e20083
--- /dev/null
+++ b/src/app/features/bookmarks/useInitBookmarks.ts
@@ -0,0 +1,78 @@
+import { MatrixEvent, SyncState } from '$types/matrix-sdk';
+import { useCallback, useEffect } from 'react';
+import { useSetAtom } from 'jotai';
+import { useMatrixClient } from '$hooks/useMatrixClient';
+import { useSyncState } from '$hooks/useSyncState';
+import { useAccountDataCallback } from '$hooks/useAccountDataCallback';
+import { bookmarkDeletedListAtom, bookmarkListAtom, bookmarkLoadingAtom } from '$state/bookmarks';
+import { AccountDataEvent } from '$types/matrix/accountData';
+import { listBookmarks, listDeletedBookmarks } from './bookmarkRepository';
+
+/**
+ * Top-level hook that keeps `bookmarkListAtom` in sync with account data.
+ *
+ * Must be called from an always-mounted component (e.g. ClientNonUIFeatures),
+ * NOT from a page component.  Page components should simply read from the atom.
+ *
+ * Three triggers keep the atom current:
+ *  1. `useEffect` on mount — covers the case where `ClientNonUIFeatures` mounts
+ *     after the initial sync transition has already fired (the common case).
+ *  2. `SyncState.Syncing` transition — refreshes on every reconnect.
+ *  3. `ClientEvent.AccountData` for the index event type — reacts immediately
+ *     to index updates pushed by other devices mid-session.
+ */
+export function useInitBookmarks(): void {
+  const mx = useMatrixClient();
+  const setList = useSetAtom(bookmarkListAtom);
+  const setDeletedList = useSetAtom(bookmarkDeletedListAtom);
+  const setLoading = useSetAtom(bookmarkLoadingAtom);
+
+  const loadBookmarks = useCallback(() => {
+    setLoading(true);
+    try {
+      setList(listBookmarks(mx));
+      setDeletedList(listDeletedBookmarks(mx));
+    } finally {
+      setLoading(false);
+    }
+  }, [mx, setList, setDeletedList, setLoading]);
+
+  // Immediate load: fires once on mount to cover the case where ClientNonUIFeatures
+  // mounts after the initial SyncState.Syncing transition has already fired.
+  // loadBookmarks is stable (memoized with stable deps), so this fires exactly once.
+  useEffect(() => {
+    loadBookmarks();
+  }, [loadBookmarks]);
+
+  // Trigger on reconnect (SyncState.Syncing transition after a disconnect).
+  useSyncState(
+    mx,
+    useCallback(
+      (state, prevState) => {
+        if (state === SyncState.Syncing && prevState !== SyncState.Syncing) {
+          loadBookmarks();
+        }
+      },
+      [loadBookmarks]
+    )
+  );
+
+  // React to bookmark account data changes pushed by other devices mid-session.
+  // The index event fires when the bookmark list changes; individual item events
+  // fire when a bookmark is added, removed, or soft-deleted.
+  useAccountDataCallback(
+    mx,
+    useCallback(
+      (event: MatrixEvent) => {
+        const type = event.getType();
+        if (
+          type === (AccountDataEvent.BookmarksIndex as string) ||
+          type.startsWith(AccountDataEvent.BookmarkItemPrefix as string)
+        ) {
+          loadBookmarks();
+        }
+      },
+      [loadBookmarks]
+    )
+  );
+}
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index 887d24a66..04fc23563 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -79,6 +79,8 @@ import { MessageEditHistoryItem } from '$components/message/modals/MessageEditHi
 import { MessageSourceCodeItem } from '$components/message/modals/MessageSource';
 import { MessageForwardItem } from '$components/message/modals/MessageForward';
 import { MessageDeleteItem } from '$components/message/modals/MessageDelete';
+import { computeBookmarkId, createBookmarkItem } from '$features/bookmarks/bookmarkDomain';
+import { useIsBookmarked, useBookmarkActions } from '$features/bookmarks/useBookmarks';
 import { MessageReportItem } from '$components/message/modals/MessageReport';
 import { filterPronounsByLanguage, getParsedPronouns } from '$utils/pronouns';
 import { useMentionClickHandler } from '$hooks/useMentionClickHandler';
@@ -208,6 +210,49 @@ export const MessagePinItem = as<
   );
 });
 
+// message bookmarking
+export const MessageBookmarkItem = as<
+  'button',
+  {
+    room: Room;
+    mEvent: MatrixEvent;
+    onClose?: () => void;
+  }
+>(({ room, mEvent, onClose, ...props }, ref) => {
+  const [enableMessageBookmarks] = useSetting(settingsAtom, 'enableMessageBookmarks');
+  const eventId = mEvent.getId();
+  const isBookmarked = useIsBookmarked(room.roomId, eventId ?? '');
+  const { add, remove } = useBookmarkActions();
+
+  if (!eventId) return null;
+  if (!enableMessageBookmarks) return null;
+
+  const handleClick = async () => {
+    if (isBookmarked) {
+      await remove(computeBookmarkId(room.roomId, eventId));
+    } else {
+      const item = createBookmarkItem(room, mEvent);
+      if (item) await add(item);
+    }
+    onClose?.();
+  };
+
+  return (
+    <MenuItem
+      size="300"
+      after={<Icon size="100" src={Icons.Bookmark} />}
+      radii="300"
+      onClick={handleClick}
+      {...props}
+      ref={ref}
+    >
+      <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
+        {isBookmarked ? 'Remove Bookmark' : 'Bookmark Message'}
+      </Text>
+    </MenuItem>
+  );
+});
+
 export type ForwardedMessageProps = {
   originalTimestamp: number;
   isForwarded: boolean;
@@ -1101,6 +1146,7 @@ function MessageInternal(
                         )}
                         <MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
                         <MessageForwardItem room={room} mEvent={mEvent} onClose={closeMenu} />
+                        <MessageBookmarkItem room={room} mEvent={mEvent} onClose={closeMenu} />
                         {canPinEvent && (
                           <MessagePinItem room={room} mEvent={mEvent} onClose={closeMenu} />
                         )}
@@ -1434,6 +1480,13 @@ export const Event = as<'div', EventProps>(
                             )}
                             <MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
                             <MessageForwardItem room={room} mEvent={mEvent} onClose={closeMenu} />
+                            {!stateEvent && (
+                              <MessageBookmarkItem
+                                room={room}
+                                mEvent={mEvent}
+                                onClose={closeMenu}
+                              />
+                            )}
                           </Box>
                           {((!mEvent.isRedacted() && canDelete && !stateEvent) ||
                             (mEvent.getSender() !== mx.getUserId() && !stateEvent)) && (
diff --git a/src/app/features/settings/experimental/Experimental.tsx b/src/app/features/settings/experimental/Experimental.tsx
index 330412185..e048ed281 100644
--- a/src/app/features/settings/experimental/Experimental.tsx
+++ b/src/app/features/settings/experimental/Experimental.tsx
@@ -10,6 +10,7 @@ import { Sync } from '../general';
 import { SettingsSectionPage } from '../SettingsSectionPage';
 import { BandwidthSavingEmojis } from './BandwithSavingEmojis';
 import { MSC4268HistoryShare } from './MSC4268HistoryShare';
+import { MSC4438MessageBookmarks } from './MSC4438MessageBookmarks';
 
 function PersonaToggle() {
   const [showPersonaSetting, setShowPersonaSetting] = useSetting(
@@ -59,6 +60,7 @@ export function Experimental({ requestBack, requestClose }: Readonly<Experimenta
             <br />
             <Box direction="Column" gap="700">
               <Sync />
+              <MSC4438MessageBookmarks />
               <MSC4268HistoryShare />
               <BandwidthSavingEmojis />
               <PersonaToggle />
diff --git a/src/app/features/settings/experimental/MSC4438MessageBookmarks.tsx b/src/app/features/settings/experimental/MSC4438MessageBookmarks.tsx
new file mode 100644
index 000000000..0751a5578
--- /dev/null
+++ b/src/app/features/settings/experimental/MSC4438MessageBookmarks.tsx
@@ -0,0 +1,57 @@
+import { SequenceCard } from '$components/sequence-card';
+import { SettingTile } from '$components/setting-tile';
+import { useSetting } from '$state/hooks/settings';
+import { settingsAtom } from '$state/settings';
+import { Box, Switch, Text } from 'folds';
+import { SequenceCardStyle } from '../styles.css';
+
+export function MSC4438MessageBookmarks() {
+  const [enableMessageBookmarks, setEnableMessageBookmarks] = useSetting(
+    settingsAtom,
+    'enableMessageBookmarks'
+  );
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Message Bookmarks</Text>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          focusId="experimental-message-bookmarks"
+          title="Enable Message Bookmarks (MSC4438)"
+          description={
+            <>
+              Save individual messages for later. Bookmarks are synced across all your devices via
+              account data.{' '}
+              <a
+                href="https://github.com/matrix-org/matrix-spec-proposals/pull/4438"
+                target="_blank"
+                rel="noreferrer"
+              >
+                MSC4438
+              </a>
+              .{' '}
+              <a
+                href="https://github.com/SableClient/Sable/issues/600"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Known issues (Sable GitHub)
+              </a>
+              .
+            </>
+          }
+          after={
+            <Switch
+              variant="Primary"
+              value={enableMessageBookmarks}
+              onChange={setEnableMessageBookmarks}
+              title={
+                enableMessageBookmarks ? 'Disable message bookmarks' : 'Enable message bookmarks'
+              }
+            />
+          }
+        />
+      </SequenceCard>
+    </Box>
+  );
+}
diff --git a/src/app/hooks/router/useHomeSelected.ts b/src/app/hooks/router/useHomeSelected.ts
index 2a16511aa..fcc439196 100644
--- a/src/app/hooks/router/useHomeSelected.ts
+++ b/src/app/hooks/router/useHomeSelected.ts
@@ -4,6 +4,7 @@ import {
   getHomeJoinPath,
   getHomePath,
   getHomeSearchPath,
+  getHomeBookmarksPath,
 } from '$pages/pathUtils';
 
 export const useHomeSelected = (): boolean => {
@@ -45,3 +46,13 @@ export const useHomeSearchSelected = (): boolean => {
 
   return !!match;
 };
+
+export const useHomeBookmarksSelected = (): boolean => {
+  const match = useMatch({
+    path: getHomeBookmarksPath(),
+    caseSensitive: true,
+    end: false,
+  });
+
+  return !!match;
+};
diff --git a/src/app/hooks/router/useInbox.ts b/src/app/hooks/router/useInbox.ts
index 639e16dd4..c19c0cc4b 100644
--- a/src/app/hooks/router/useInbox.ts
+++ b/src/app/hooks/router/useInbox.ts
@@ -1,5 +1,10 @@
 import { useMatch } from 'react-router-dom';
-import { getInboxInvitesPath, getInboxNotificationsPath, getInboxPath } from '$pages/pathUtils';
+import {
+  getInboxBookmarksPath,
+  getInboxInvitesPath,
+  getInboxNotificationsPath,
+  getInboxPath,
+} from '$pages/pathUtils';
 
 export const useInboxSelected = (): boolean => {
   const match = useMatch({
@@ -30,3 +35,13 @@ export const useInboxInvitesSelected = (): boolean => {
 
   return !!match;
 };
+
+export const useInboxBookmarksSelected = (): boolean => {
+  const match = useMatch({
+    path: getInboxBookmarksPath(),
+    caseSensitive: true,
+    end: false,
+  });
+
+  return !!match;
+};
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 28f8c7efb..fd8bc462e 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -48,6 +48,7 @@ import {
   NOTIFICATIONS_PATH_SEGMENT,
   ROOM_PATH_SEGMENT,
   SEARCH_PATH_SEGMENT,
+  BOOKMARKS_PATH_SEGMENT,
   SERVER_PATH_SEGMENT,
   CREATE_PATH,
   TO_ROOM_EVENT_PATH,
@@ -65,6 +66,7 @@ import {
 import { ClientBindAtoms, ClientLayout, ClientRoot, ClientRouteOutlet } from './client';
 import { HandleNotificationClick, ClientNonUIFeatures } from './client/ClientNonUIFeatures';
 import { Home, HomeRouteRoomProvider, HomeSearch } from './client/home';
+import { BookmarksList } from './client/bookmarks';
 import { Direct, DirectCreate, DirectRouteRoomProvider } from './client/direct';
 import { RouteSpaceProvider, Space, SpaceRouteRoomProvider, SpaceSearch } from './client/space';
 import { Explore, FeaturedRooms, PublicRooms } from './client/explore';
@@ -242,6 +244,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
           <Route path={CREATE_PATH_SEGMENT} element={<HomeCreateRoom />} />
           <Route path={JOIN_PATH_SEGMENT} element={<p>join</p>} />
           <Route path={SEARCH_PATH_SEGMENT} element={<HomeSearch />} />
+          <Route path={BOOKMARKS_PATH_SEGMENT} element={<BookmarksList />} />
           <Route
             path={ROOM_PATH_SEGMENT}
             element={
@@ -368,6 +371,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
           )}
           <Route path={NOTIFICATIONS_PATH_SEGMENT} element={<Notifications />} />
           <Route path={INVITES_PATH_SEGMENT} element={<Invites />} />
+          <Route path={BOOKMARKS_PATH_SEGMENT} element={<BookmarksList />} />
         </Route>
         <Route path={TO_ROOM_EVENT_PATH} element={<ToRoomEvent />} />
       </Route>
diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx
index 26ac2f431..caebe459a 100644
--- a/src/app/pages/client/ClientNonUIFeatures.tsx
+++ b/src/app/pages/client/ClientNonUIFeatures.tsx
@@ -56,6 +56,7 @@ import { useCallSignaling } from '$hooks/useCallSignaling';
 import { getBlobCacheStats } from '$hooks/useBlobCache';
 import { lastVisitedRoomIdAtom } from '$state/room/lastRoom';
 import { useSettingsSyncEffect } from '$hooks/useSettingsSync';
+import { useInitBookmarks } from '$features/bookmarks/useInitBookmarks';
 import { getInboxInvitesPath } from '../pathUtils';
 import { BackgroundNotifications } from './BackgroundNotifications';
 
@@ -845,11 +846,17 @@ function SettingsSyncFeature() {
   return null;
 }
 
+function BookmarksFeature() {
+  useInitBookmarks();
+  return null;
+}
+
 export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
   useCallSignaling();
   return (
     <>
       <SettingsSyncFeature />
+      <BookmarksFeature />
       <SystemEmojiFeature />
       <PageZoomFeature />
       <PrivacyBlurFeature />
diff --git a/src/app/pages/client/bookmarks/BookmarksList.tsx b/src/app/pages/client/bookmarks/BookmarksList.tsx
new file mode 100644
index 000000000..a24b661c8
--- /dev/null
+++ b/src/app/pages/client/bookmarks/BookmarksList.tsx
@@ -0,0 +1,627 @@
+import { FormEventHandler, Fragment, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  Avatar,
+  Box,
+  Button,
+  Dialog,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  Line,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Spinner,
+  Text,
+  Chip,
+  config,
+  color,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { JoinRule } from '$types/matrix-sdk';
+import {
+  Page,
+  PageContent,
+  PageContentCenter,
+  PageHeader,
+  PageHero,
+  PageHeroSection,
+} from '$components/page';
+import { SequenceCard } from '$components/sequence-card';
+import { AvatarBase, ModernLayout, Time, Username, UsernameBold } from '$components/message';
+import { RoomAvatar, RoomIcon } from '$components/room-avatar';
+import { UserAvatar } from '$components/user-avatar';
+import { BackRouteHandler } from '$components/BackRouteHandler';
+import { useMatrixClient } from '$hooks/useMatrixClient';
+import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
+import { useRoomNavigate } from '$hooks/useRoomNavigate';
+import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
+import { useSetting } from '$state/hooks/settings';
+import { settingsAtom } from '$state/settings';
+import { getMemberAvatarMxc, getMemberDisplayName, getRoomAvatarUrl } from '$utils/room';
+import { getMxIdLocalPart, mxcUrlToHttp } from '$utils/matrix';
+import colorMXID from '$utils/colorMXID';
+import { stopPropagation } from '$utils/keyboard';
+import { BookmarkItemContent } from '$features/bookmarks/bookmarkDomain';
+import {
+  useBookmarkActions,
+  useBookmarkDeletedList,
+  useBookmarkList,
+  useBookmarkLoading,
+} from '$features/bookmarks/useBookmarks';
+
+// ---------------------------------------------------------------------------
+// RemoveBookmarkDialog
+// ---------------------------------------------------------------------------
+
+type RemoveBookmarkDialogProps = {
+  item: BookmarkItemContent;
+  onConfirm: () => void;
+  onClose: () => void;
+};
+
+function RemoveBookmarkDialog({ item, onConfirm, onClose }: RemoveBookmarkDialogProps) {
+  return (
+    <Dialog variant="Surface">
+      <Header
+        style={{
+          padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+          borderBottomWidth: config.borderWidth.B300,
+        }}
+        variant="Surface"
+        size="500"
+      >
+        <Box grow="Yes">
+          <Text size="H4">Remove Bookmark</Text>
+        </Box>
+        <IconButton size="300" onClick={onClose} radii="300">
+          <Icon src={Icons.Cross} />
+        </IconButton>
+      </Header>
+      <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+        {item.body_preview && (
+          <Box
+            style={{
+              padding: config.space.S300,
+              borderRadius: config.radii.R300,
+              background: color.Background.Container,
+            }}
+          >
+            <Text size="T300" priority="300" truncate>
+              {item.body_preview}
+            </Text>
+          </Box>
+        )}
+        <Text priority="400">Remove this bookmark? You can always re-bookmark the message.</Text>
+        <Box gap="300" justifyContent="End">
+          <Button size="300" variant="Secondary" fill="Soft" radii="300" onClick={onClose}>
+            <Text size="B300">Cancel</Text>
+          </Button>
+          <Button size="300" variant="Critical" radii="300" onClick={onConfirm}>
+            <Text size="B300">Remove</Text>
+          </Button>
+        </Box>
+      </Box>
+    </Dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// BookmarkItemRow
+// ---------------------------------------------------------------------------
+
+type BookmarkItemRowProps = {
+  item: BookmarkItemContent;
+  highlight?: string;
+  onJump: (roomId: string, eventId: string) => void;
+  onRemove: (item: BookmarkItemContent) => void;
+  hour24Clock: boolean;
+  dateFormatString: string;
+};
+
+function BookmarkItemRow({
+  item,
+  highlight,
+  onJump,
+  onRemove,
+  hour24Clock,
+  dateFormatString,
+}: BookmarkItemRowProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+
+  // Try to resolve live room/member data; fall back to stored metadata
+  const room = mx.getRoom(item.room_id) ?? undefined;
+  const senderId = item.sender ?? '';
+
+  const displayName = room
+    ? (getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId)
+    : (getMxIdLocalPart(senderId) ?? senderId);
+
+  const senderAvatarMxc = room ? getMemberAvatarMxc(room, senderId) : undefined;
+  const avatarUrl = senderAvatarMxc
+    ? (mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined)
+    : undefined;
+
+  const usernameColor = colorMXID(senderId);
+
+  // Highlight matching substring in body_preview
+  const preview = item.body_preview ?? '';
+  const highlightedPreview = useMemo(() => {
+    if (!highlight || !preview) return <>{preview}</>;
+    const idx = preview.toLowerCase().indexOf(highlight.toLowerCase());
+    if (idx === -1) return <>{preview}</>;
+    return (
+      <>
+        {preview.slice(0, idx)}
+        <mark style={{ background: 'none', color: 'inherit', fontWeight: 700 }}>
+          {preview.slice(idx, idx + highlight.length)}
+        </mark>
+        {preview.slice(idx + highlight.length)}
+      </>
+    );
+  }, [preview, highlight]);
+
+  return (
+    <SequenceCard
+      style={{ padding: config.space.S400 }}
+      variant="SurfaceVariant"
+      direction="Column"
+    >
+      <ModernLayout
+        before={
+          <AvatarBase>
+            <Avatar size="300">
+              <UserAvatar
+                userId={senderId}
+                src={avatarUrl}
+                alt={displayName}
+                renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+              />
+            </Avatar>
+          </AvatarBase>
+        }
+      >
+        <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
+          <Box gap="200" alignItems="Baseline">
+            <Username style={{ color: usernameColor }}>
+              <Text as="span" truncate>
+                <UsernameBold>{displayName}</UsernameBold>
+              </Text>
+            </Username>
+            <Time
+              ts={item.event_ts}
+              hour24Clock={hour24Clock}
+              dateFormatString={dateFormatString}
+            />
+          </Box>
+          <Box shrink="No" gap="200" alignItems="Center">
+            <Chip
+              onClick={() => onJump(item.room_id, item.event_id)}
+              variant="Secondary"
+              radii="400"
+            >
+              <Text size="T200">Jump</Text>
+            </Chip>
+            <IconButton
+              size="300"
+              variant="Background"
+              radii="300"
+              onClick={() => onRemove(item)}
+              aria-label="Remove bookmark"
+            >
+              <Icon size="100" src={Icons.Delete} />
+            </IconButton>
+          </Box>
+        </Box>
+        {preview && (
+          <Text size="T300" priority="400" style={{ marginTop: config.space.S100 }}>
+            {highlightedPreview}
+          </Text>
+        )}
+      </ModernLayout>
+    </SequenceCard>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// BookmarkResultGroup
+// ---------------------------------------------------------------------------
+
+type BookmarkResultGroupProps = {
+  roomId: string;
+  roomName: string;
+  items: BookmarkItemContent[];
+  highlight?: string;
+  onJump: (roomId: string, eventId: string) => void;
+  onRemove: (item: BookmarkItemContent) => void;
+  hour24Clock: boolean;
+  dateFormatString: string;
+};
+
+function BookmarkResultGroup({
+  roomId,
+  roomName,
+  items,
+  highlight,
+  onJump,
+  onRemove,
+  hour24Clock,
+  dateFormatString,
+}: BookmarkResultGroupProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const room = mx.getRoom(roomId) ?? undefined;
+  const avatarUrl = room ? getRoomAvatarUrl(mx, room, 96, useAuthentication) : undefined;
+  const displayRoomName = room?.name ?? roomName;
+
+  return (
+    <Box direction="Column" gap="200">
+      <Header size="300">
+        <Box gap="200" grow="Yes" alignItems="Center">
+          <Avatar size="200" radii="300">
+            <RoomAvatar
+              roomId={roomId}
+              src={avatarUrl}
+              alt={displayRoomName}
+              renderFallback={() => (
+                <RoomIcon
+                  size="50"
+                  roomType={room?.getType()}
+                  joinRule={room?.getJoinRule() ?? JoinRule.Restricted}
+                  filled
+                />
+              )}
+            />
+          </Avatar>
+          <Text size="H4" truncate>
+            {displayRoomName}
+          </Text>
+        </Box>
+      </Header>
+      <Box direction="Column" gap="100">
+        {items.map((item) => (
+          <BookmarkItemRow
+            key={item.bookmark_id}
+            item={item}
+            highlight={highlight}
+            onJump={onJump}
+            onRemove={onRemove}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// RemovedBookmarkRow
+// ---------------------------------------------------------------------------
+
+type RemovedBookmarkRowProps = {
+  item: BookmarkItemContent;
+  onRestore: (item: BookmarkItemContent) => void;
+};
+
+function RemovedBookmarkRow({ item, onRestore }: RemovedBookmarkRowProps) {
+  const mx = useMatrixClient();
+  const room = mx.getRoom(item.room_id) ?? undefined;
+  const roomName = room?.name ?? item.room_name ?? item.room_id;
+
+  return (
+    <SequenceCard
+      style={{ padding: config.space.S300, opacity: 0.65 }}
+      variant="SurfaceVariant"
+      direction="Column"
+    >
+      <Box gap="300" justifyContent="SpaceBetween" alignItems="Center">
+        <Box direction="Column" gap="100" grow="Yes" style={{ minWidth: 0 }}>
+          <Text size="T300" priority="400" truncate>
+            {roomName}
+          </Text>
+          {item.body_preview && (
+            <Text size="T200" priority="300" truncate>
+              {item.body_preview}
+            </Text>
+          )}
+        </Box>
+        <Chip onClick={() => onRestore(item)} variant="Secondary" radii="400">
+          <Text size="T200">Restore</Text>
+        </Chip>
+      </Box>
+    </SequenceCard>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// BookmarkFilterInput
+// ---------------------------------------------------------------------------
+
+type BookmarkFilterInputProps = {
+  inputRef: React.RefObject<HTMLInputElement>;
+  active?: boolean;
+  loading?: boolean;
+  onFilter: (term: string) => void;
+  onReset: () => void;
+};
+
+function BookmarkFilterInput({
+  inputRef,
+  active,
+  loading,
+  onFilter,
+  onReset,
+}: BookmarkFilterInputProps) {
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    const { filterInput } = evt.target as HTMLFormElement & {
+      filterInput: HTMLInputElement;
+    };
+    const term = filterInput.value.trim();
+    if (term) onFilter(term);
+  };
+
+  return (
+    <Box as="form" direction="Column" gap="100" onSubmit={handleSubmit}>
+      <span data-spacing-node />
+      <Text size="L400">Filter</Text>
+      <Input
+        ref={inputRef}
+        name="filterInput"
+        variant="Background"
+        placeholder="Filter bookmarks…"
+        style={{ paddingRight: config.space.S300 }}
+        after={
+          loading ? (
+            <Spinner variant="Secondary" size="200" />
+          ) : (
+            <Box gap="200" alignItems="Center">
+              {active && (
+                <Chip
+                  type="button"
+                  onClick={onReset}
+                  variant="Secondary"
+                  radii="Pill"
+                  aria-label="Clear filter"
+                >
+                  <Icon size="50" src={Icons.Cross} />
+                  <Text size="T200">Clear</Text>
+                </Chip>
+              )}
+              <Chip type="submit" variant="Primary" radii="Pill">
+                <Text size="T200">Filter</Text>
+              </Chip>
+            </Box>
+          )
+        }
+      />
+    </Box>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// BookmarksList (main export)
+// ---------------------------------------------------------------------------
+
+export function BookmarksList() {
+  const mx = useMatrixClient();
+  const screenSize = useScreenSizeContext();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const filterInputRef = useRef<HTMLInputElement>(null);
+  const { navigateRoom } = useRoomNavigate();
+
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
+  const bookmarks = useBookmarkList();
+  const deletedBookmarks = useBookmarkDeletedList();
+  const loading = useBookmarkLoading();
+  const { remove, restore } = useBookmarkActions();
+
+  const [filterTerm, setFilterTerm] = useState<string | undefined>();
+  const [removingItem, setRemovingItem] = useState<BookmarkItemContent | undefined>();
+
+  // Filter and group bookmarks
+  const filteredBookmarks = useMemo(() => {
+    if (!filterTerm) return bookmarks;
+    const lower = filterTerm.toLowerCase();
+    return bookmarks.filter(
+      (b) =>
+        b.body_preview?.toLowerCase().includes(lower) ||
+        b.room_name?.toLowerCase().includes(lower) ||
+        (b.sender && getMxIdLocalPart(b.sender)?.toLowerCase().includes(lower))
+    );
+  }, [bookmarks, filterTerm]);
+
+  // Group by room_id, preserving order
+  const groupedByRoom = useMemo(() => {
+    const map = new Map<
+      string,
+      { roomId: string; roomName: string; items: BookmarkItemContent[] }
+    >();
+    filteredBookmarks.forEach((item) => {
+      let group = map.get(item.room_id);
+      if (!group) {
+        const room = mx.getRoom(item.room_id);
+        group = {
+          roomId: item.room_id,
+          roomName: room?.name ?? item.room_name ?? item.room_id,
+          items: [],
+        };
+        map.set(item.room_id, group);
+      }
+      group.items.push(item);
+    });
+    return Array.from(map.values());
+  }, [filteredBookmarks, mx]);
+
+  const handleJump = useCallback(
+    (roomId: string, eventId: string) => {
+      navigateRoom(roomId, eventId);
+    },
+    [navigateRoom]
+  );
+
+  const handleRemoveConfirm = useCallback(async () => {
+    if (!removingItem) return;
+    await remove(removingItem.bookmark_id);
+    setRemovingItem(undefined);
+  }, [removingItem, remove]);
+
+  const handleRestore = useCallback(
+    async (item: BookmarkItemContent) => {
+      await restore(item);
+    },
+    [restore]
+  );
+
+  const handleFilter = useCallback((term: string) => {
+    setFilterTerm(term);
+  }, []);
+
+  const handleReset = useCallback(() => {
+    setFilterTerm(undefined);
+    if (filterInputRef.current) {
+      filterInputRef.current.value = '';
+    }
+  }, []);
+
+  return (
+    <Page>
+      <PageHeader balance>
+        <Box grow="Yes" alignItems="Center" gap="200">
+          <Box grow="Yes" basis="No">
+            {screenSize === ScreenSize.Mobile && (
+              <BackRouteHandler>
+                {(onBack) => (
+                  <IconButton onClick={onBack}>
+                    <Icon src={Icons.ArrowLeft} />
+                  </IconButton>
+                )}
+              </BackRouteHandler>
+            )}
+          </Box>
+          <Box justifyContent="Center" alignItems="Center" gap="200">
+            {screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Bookmark} />}
+            <Text size="H3" truncate>
+              Bookmarks
+            </Text>
+          </Box>
+          <Box grow="Yes" basis="No" />
+        </Box>
+      </PageHeader>
+
+      <Box style={{ position: 'relative' }} grow="Yes">
+        <Scroll ref={scrollRef} hideTrack visibility="Hover">
+          <PageContent>
+            <PageContentCenter>
+              <BookmarkFilterInput
+                inputRef={filterInputRef}
+                active={!!filterTerm}
+                loading={loading}
+                onFilter={handleFilter}
+                onReset={handleReset}
+              />
+
+              {loading && bookmarks.length === 0 && (
+                <Box justifyContent="Center" style={{ marginTop: config.space.S500 }}>
+                  <Spinner variant="Secondary" size="400" />
+                </Box>
+              )}
+
+              {!loading && bookmarks.length === 0 && (
+                <PageHeroSection>
+                  <PageHero
+                    icon={<Icon size="600" src={Icons.Bookmark} />}
+                    title="No Bookmarks Yet"
+                    subTitle="Bookmark messages to find them again easily. Right-click a message and choose Bookmark."
+                  />
+                </PageHeroSection>
+              )}
+
+              {!loading && bookmarks.length > 0 && filteredBookmarks.length === 0 && (
+                <Box
+                  direction="Column"
+                  gap="200"
+                  alignItems="Center"
+                  style={{ marginTop: config.space.S500 }}
+                >
+                  <Icon size="400" src={Icons.Search} />
+                  <Text size="T400" priority="300" align="Center">
+                    No bookmarks match your filter.
+                  </Text>
+                </Box>
+              )}
+
+              {groupedByRoom.length > 0 && (
+                <Box direction="Column" gap="500" style={{ marginTop: config.space.S300 }}>
+                  {groupedByRoom.map((group, i) => (
+                    <Fragment key={group.roomId}>
+                      {i > 0 && <Line variant="Background" size="300" />}
+                      <BookmarkResultGroup
+                        roomId={group.roomId}
+                        roomName={group.roomName}
+                        items={group.items}
+                        highlight={filterTerm}
+                        onJump={handleJump}
+                        onRemove={setRemovingItem}
+                        hour24Clock={hour24Clock}
+                        dateFormatString={dateFormatString}
+                      />
+                    </Fragment>
+                  ))}
+                </Box>
+              )}
+
+              {deletedBookmarks.length > 0 && !filterTerm && (
+                <Box direction="Column" gap="200" style={{ marginTop: config.space.S400 }}>
+                  <Line variant="Background" size="300" />
+                  <Header size="300">
+                    <Text size="H4" priority="300">
+                      Recently Removed
+                    </Text>
+                  </Header>
+                  <Box direction="Column" gap="100">
+                    {deletedBookmarks.map((item) => (
+                      <RemovedBookmarkRow
+                        key={item.bookmark_id}
+                        item={item}
+                        onRestore={handleRestore}
+                      />
+                    ))}
+                  </Box>
+                </Box>
+              )}
+            </PageContentCenter>
+          </PageContent>
+        </Scroll>
+      </Box>
+
+      {removingItem && (
+        <Overlay open backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: () => setRemovingItem(undefined),
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <RemoveBookmarkDialog
+                item={removingItem}
+                onConfirm={handleRemoveConfirm}
+                onClose={() => setRemovingItem(undefined)}
+              />
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
+    </Page>
+  );
+}
diff --git a/src/app/pages/client/bookmarks/index.ts b/src/app/pages/client/bookmarks/index.ts
new file mode 100644
index 000000000..cdd211f71
--- /dev/null
+++ b/src/app/pages/client/bookmarks/index.ts
@@ -0,0 +1 @@
+export * from './BookmarksList';
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index c25d99e30..e7b832df5 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -35,11 +35,16 @@ import {
   getHomeCreatePath,
   getHomeRoomPath,
   getHomeSearchPath,
+  getHomeBookmarksPath,
   withSearchParam,
 } from '$pages/pathUtils';
 import { getCanonicalAliasOrRoomId } from '$utils/matrix';
 import { useSelectedRoom } from '$hooks/router/useSelectedRoom';
-import { useHomeCreateSelected, useHomeSearchSelected } from '$hooks/router/useHomeSelected';
+import {
+  useHomeCreateSelected,
+  useHomeSearchSelected,
+  useHomeBookmarksSelected,
+} from '$hooks/router/useHomeSelected';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { VirtualTile } from '$components/virtualizer';
 import { RoomNavCategoryButton, RoomNavItem } from '$features/room-nav';
@@ -203,6 +208,9 @@ export function Home() {
   const selectedRoomId = useSelectedRoom();
   const createRoomSelected = useHomeCreateSelected();
   const searchSelected = useHomeSearchSelected();
+  const bookmarksSelected = useHomeBookmarksSelected();
+  const [enableMessageBookmarks] = useSetting(settingsAtom, 'enableMessageBookmarks');
+  const showBookmarks = enableMessageBookmarks;
   const noRoomToDisplay = rooms.length === 0;
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
 
@@ -236,83 +244,101 @@ export function Home() {
   return (
     <PageNav>
       <HomeHeader />
-      {noRoomToDisplay ? (
-        <HomeEmpty />
-      ) : (
-        <PageNavContent scrollRef={scrollRef}>
-          <Box direction="Column" gap="300">
-            <NavCategory>
-              <NavItem variant="Background" radii="400" aria-selected={createRoomSelected}>
-                <NavButton onClick={() => navigate(getHomeCreatePath())}>
-                  <NavItemContent>
-                    <Box as="span" grow="Yes" alignItems="Center" gap="200">
-                      <Avatar size="200" radii="400">
-                        <Icon src={Icons.Plus} size="100" />
-                      </Avatar>
-                      <Box as="span" grow="Yes">
-                        <Text as="span" size="Inherit" truncate>
-                          Create Room
-                        </Text>
-                      </Box>
+      <PageNavContent scrollRef={scrollRef}>
+        <Box direction="Column" gap="300">
+          <NavCategory>
+            <NavItem variant="Background" radii="400" aria-selected={createRoomSelected}>
+              <NavButton onClick={() => navigate(getHomeCreatePath())}>
+                <NavItemContent>
+                  <Box as="span" grow="Yes" alignItems="Center" gap="200">
+                    <Avatar size="200" radii="400">
+                      <Icon src={Icons.Plus} size="100" />
+                    </Avatar>
+                    <Box as="span" grow="Yes">
+                      <Text as="span" size="Inherit" truncate>
+                        Create Room
+                      </Text>
                     </Box>
-                  </NavItemContent>
-                </NavButton>
-              </NavItem>
-              <UseStateProvider initial={false}>
-                {(open, setOpen) => (
-                  <>
-                    <NavItem variant="Background" radii="400">
-                      <NavButton onClick={() => setOpen(true)}>
-                        <NavItemContent>
-                          <Box as="span" grow="Yes" alignItems="Center" gap="200">
-                            <Avatar size="200" radii="400">
-                              <Icon src={Icons.Link} size="100" />
-                            </Avatar>
-                            <Box as="span" grow="Yes">
-                              <Text as="span" size="Inherit" truncate>
-                                Join with Address
-                              </Text>
-                            </Box>
+                  </Box>
+                </NavItemContent>
+              </NavButton>
+            </NavItem>
+            <UseStateProvider initial={false}>
+              {(open, setOpen) => (
+                <>
+                  <NavItem variant="Background" radii="400">
+                    <NavButton onClick={() => setOpen(true)}>
+                      <NavItemContent>
+                        <Box as="span" grow="Yes" alignItems="Center" gap="200">
+                          <Avatar size="200" radii="400">
+                            <Icon src={Icons.Link} size="100" />
+                          </Avatar>
+                          <Box as="span" grow="Yes">
+                            <Text as="span" size="Inherit" truncate>
+                              Join with Address
+                            </Text>
                           </Box>
-                        </NavItemContent>
-                      </NavButton>
-                    </NavItem>
-                    {open && (
-                      <JoinAddressPrompt
-                        onCancel={() => setOpen(false)}
-                        onOpen={(roomIdOrAlias, viaServers, eventId) => {
-                          setOpen(false);
-                          const path = getHomeRoomPath(roomIdOrAlias, eventId);
-                          navigate(
-                            viaServers
-                              ? withSearchParam<RoomSearchParams>(path, {
-                                  viaServers: encodeSearchParamValueArray(viaServers),
-                                })
-                              : path
-                          );
-                        }}
-                      />
-                    )}
-                  </>
-                )}
-              </UseStateProvider>
-              <NavItem variant="Background" radii="400" aria-selected={searchSelected}>
-                <NavLink to={getHomeSearchPath()}>
+                        </Box>
+                      </NavItemContent>
+                    </NavButton>
+                  </NavItem>
+                  {open && (
+                    <JoinAddressPrompt
+                      onCancel={() => setOpen(false)}
+                      onOpen={(roomIdOrAlias, viaServers, eventId) => {
+                        setOpen(false);
+                        const path = getHomeRoomPath(roomIdOrAlias, eventId);
+                        navigate(
+                          viaServers
+                            ? withSearchParam<RoomSearchParams>(path, {
+                                viaServers: encodeSearchParamValueArray(viaServers),
+                              })
+                            : path
+                        );
+                      }}
+                    />
+                  )}
+                </>
+              )}
+            </UseStateProvider>
+            <NavItem variant="Background" radii="400" aria-selected={searchSelected}>
+              <NavLink to={getHomeSearchPath()}>
+                <NavItemContent>
+                  <Box as="span" grow="Yes" alignItems="Center" gap="200">
+                    <Avatar size="200" radii="400">
+                      <Icon src={Icons.Search} size="100" filled={searchSelected} />
+                    </Avatar>
+                    <Box as="span" grow="Yes">
+                      <Text as="span" size="Inherit" truncate>
+                        Message Search
+                      </Text>
+                    </Box>
+                  </Box>
+                </NavItemContent>
+              </NavLink>
+            </NavItem>
+            {showBookmarks && (
+              <NavItem variant="Background" radii="400" aria-selected={bookmarksSelected}>
+                <NavLink to={getHomeBookmarksPath()}>
                   <NavItemContent>
                     <Box as="span" grow="Yes" alignItems="Center" gap="200">
                       <Avatar size="200" radii="400">
-                        <Icon src={Icons.Search} size="100" filled={searchSelected} />
+                        <Icon src={Icons.Bookmark} size="100" filled={bookmarksSelected} />
                       </Avatar>
                       <Box as="span" grow="Yes">
                         <Text as="span" size="Inherit" truncate>
-                          Message Search
+                          Bookmarks
                         </Text>
                       </Box>
                     </Box>
                   </NavItemContent>
                 </NavLink>
               </NavItem>
-            </NavCategory>
+            )}
+          </NavCategory>
+          {noRoomToDisplay ? (
+            <HomeEmpty />
+          ) : (
             <NavCategory>
               <NavCategoryHeader>
                 <RoomNavCategoryButton
@@ -355,9 +381,9 @@ export function Home() {
                 })}
               </div>
             </NavCategory>
-          </Box>
-        </PageNavContent>
-      )}
+          )}
+        </Box>
+      </PageNavContent>
     </PageNav>
   );
 }
diff --git a/src/app/pages/client/inbox/Inbox.tsx b/src/app/pages/client/inbox/Inbox.tsx
index 661435513..ab42f7dcb 100644
--- a/src/app/pages/client/inbox/Inbox.tsx
+++ b/src/app/pages/client/inbox/Inbox.tsx
@@ -1,12 +1,22 @@
 import { Avatar, Box, Icon, Icons, Text } from 'folds';
 import { useAtomValue } from 'jotai';
 import { NavCategory, NavItem, NavItemContent, NavLink } from '$components/nav';
-import { getInboxInvitesPath, getInboxNotificationsPath } from '$pages/pathUtils';
-import { useInboxInvitesSelected, useInboxNotificationsSelected } from '$hooks/router/useInbox';
+import {
+  getInboxBookmarksPath,
+  getInboxInvitesPath,
+  getInboxNotificationsPath,
+} from '$pages/pathUtils';
+import {
+  useInboxBookmarksSelected,
+  useInboxInvitesSelected,
+  useInboxNotificationsSelected,
+} from '$hooks/router/useInbox';
 import { UnreadBadge } from '$components/unread-badge';
 import { allInvitesAtom } from '$state/room-list/inviteList';
 import { useNavToActivePathMapper } from '$hooks/useNavToActivePathMapper';
 import { PageNav, PageNavContent, PageNavHeader } from '$components/page';
+import { useSetting } from '$state/hooks/settings';
+import { settingsAtom } from '$state/settings';
 
 function InvitesNavItem() {
   const invitesSelected = useInboxInvitesSelected();
@@ -39,9 +49,34 @@ function InvitesNavItem() {
   );
 }
 
+function BookmarksNavItem() {
+  const bookmarksSelected = useInboxBookmarksSelected();
+
+  return (
+    <NavItem variant="Background" radii="400" aria-selected={bookmarksSelected}>
+      <NavLink to={getInboxBookmarksPath()}>
+        <NavItemContent>
+          <Box as="span" grow="Yes" alignItems="Center" gap="200">
+            <Avatar size="200" radii="400">
+              <Icon src={Icons.Bookmark} size="100" filled={bookmarksSelected} />
+            </Avatar>
+            <Box as="span" grow="Yes">
+              <Text as="span" size="Inherit" truncate>
+                Bookmarks
+              </Text>
+            </Box>
+          </Box>
+        </NavItemContent>
+      </NavLink>
+    </NavItem>
+  );
+}
+
 export function Inbox() {
   useNavToActivePathMapper('inbox');
   const notificationsSelected = useInboxNotificationsSelected();
+  const [enableMessageBookmarks] = useSetting(settingsAtom, 'enableMessageBookmarks');
+  const showBookmarks = enableMessageBookmarks;
 
   return (
     <PageNav>
@@ -75,6 +110,7 @@ export function Inbox() {
               </NavLink>
             </NavItem>
             <InvitesNavItem />
+            {showBookmarks && <BookmarksNavItem />}
           </NavCategory>
         </Box>
       </PageNavContent>
diff --git a/src/app/pages/pathUtils.ts b/src/app/pages/pathUtils.ts
index 120a1a70c..7e5cb8d84 100644
--- a/src/app/pages/pathUtils.ts
+++ b/src/app/pages/pathUtils.ts
@@ -13,7 +13,9 @@ import {
   HOME_PATH,
   HOME_ROOM_PATH,
   HOME_SEARCH_PATH,
+  HOME_BOOKMARKS_PATH,
   LOGIN_PATH,
+  INBOX_BOOKMARKS_PATH,
   INBOX_INVITES_PATH,
   INBOX_NOTIFICATIONS_PATH,
   INBOX_PATH,
@@ -93,6 +95,7 @@ export const getHomePath = (): string => HOME_PATH;
 export const getHomeCreatePath = (): string => HOME_CREATE_PATH;
 export const getHomeJoinPath = (): string => HOME_JOIN_PATH;
 export const getHomeSearchPath = (): string => HOME_SEARCH_PATH;
+export const getHomeBookmarksPath = (): string => HOME_BOOKMARKS_PATH;
 export const getHomeRoomPath = (roomIdOrAlias: string, eventId?: string): string => {
   const params = {
     roomIdOrAlias: encodeURIComponent(roomIdOrAlias),
@@ -160,6 +163,7 @@ export const getCreatePath = (): string => CREATE_PATH;
 export const getInboxPath = (): string => INBOX_PATH;
 export const getInboxNotificationsPath = (): string => INBOX_NOTIFICATIONS_PATH;
 export const getInboxInvitesPath = (): string => INBOX_INVITES_PATH;
+export const getInboxBookmarksPath = (): string => INBOX_BOOKMARKS_PATH;
 
 export const getSettingsPath = (section?: string, focus?: string): string => {
   const path = trimTrailingSlash(generatePath(SETTINGS_PATH, { section: section ?? null }));
diff --git a/src/app/pages/paths.ts b/src/app/pages/paths.ts
index 1ac57b756..2e686d109 100644
--- a/src/app/pages/paths.ts
+++ b/src/app/pages/paths.ts
@@ -39,6 +39,7 @@ export type SearchPathSearchParams = {
   senders?: string;
 };
 export const SEARCH_PATH_SEGMENT = 'search/';
+export const BOOKMARKS_PATH_SEGMENT = 'bookmarks/';
 
 export type RoomSearchParams = {
   /* comma separated string of servers */
@@ -50,6 +51,7 @@ export const HOME_PATH = '/home/';
 export const HOME_CREATE_PATH = `/home/${CREATE_PATH_SEGMENT}`;
 export const HOME_JOIN_PATH = `/home/${JOIN_PATH_SEGMENT}`;
 export const HOME_SEARCH_PATH = `/home/${SEARCH_PATH_SEGMENT}`;
+export const HOME_BOOKMARKS_PATH = `/home/${BOOKMARKS_PATH_SEGMENT}`;
 export const HOME_ROOM_PATH = `/home/${ROOM_PATH_SEGMENT}`;
 
 export const DIRECT_PATH = '/direct/';
@@ -88,6 +90,7 @@ export type InboxNotificationsPathSearchParams = {
 };
 export const INBOX_NOTIFICATIONS_PATH = `/inbox/${NOTIFICATIONS_PATH_SEGMENT}`;
 export const INBOX_INVITES_PATH = `/inbox/${INVITES_PATH_SEGMENT}`;
+export const INBOX_BOOKMARKS_PATH = `/inbox/${BOOKMARKS_PATH_SEGMENT}`;
 
 export const TO_PATH = '/to';
 // Deep-link route used by push notification click-back URLs.
diff --git a/src/app/state/bookmarks.test.ts b/src/app/state/bookmarks.test.ts
new file mode 100644
index 000000000..1145b9d1e
--- /dev/null
+++ b/src/app/state/bookmarks.test.ts
@@ -0,0 +1,69 @@
+/**
+ * Unit tests for the Jotai bookmark atoms in src/app/state/bookmarks.ts.
+ *
+ * The derived `bookmarkIdSetAtom` is the only atom with non-trivial logic —
+ * it builds an O(1) lookup Set from the bookmark list.  The primitive atoms
+ * (`bookmarkListAtom`, `bookmarkLoadingAtom`) are default Jotai atoms whose
+ * read/write semantics are provided by the library itself and do not need
+ * additional testing.
+ */
+import { describe, it, expect } from 'vitest';
+import { createStore } from 'jotai';
+import { bookmarkIdSetAtom, bookmarkListAtom } from './bookmarks';
+import type { BookmarkItemContent } from '../features/bookmarks/bookmarkDomain';
+
+// Helper: minimal valid bookmark item
+function makeItem(id: string): BookmarkItemContent {
+  return {
+    version: 1,
+    bookmark_id: id,
+    uri: `matrix:roomid/foo/e/${id}`,
+    room_id: '!room:s',
+    event_id: `$${id}:s`,
+    event_ts: 1_000_000,
+    bookmarked_ts: 2_000_000,
+  };
+}
+
+describe('bookmarkIdSetAtom (derived)', () => {
+  it('returns an empty Set when the list is empty', () => {
+    const store = createStore();
+    const set = store.get(bookmarkIdSetAtom);
+    expect(set.size).toBe(0);
+  });
+
+  it('contains the IDs of every item in bookmarkListAtom', () => {
+    const store = createStore();
+    store.set(bookmarkListAtom, [makeItem('bmk_aaaaaaaa'), makeItem('bmk_bbbbbbbb')]);
+
+    const set = store.get(bookmarkIdSetAtom);
+    expect(set.has('bmk_aaaaaaaa')).toBe(true);
+    expect(set.has('bmk_bbbbbbbb')).toBe(true);
+  });
+
+  it('does not contain IDs not in the list', () => {
+    const store = createStore();
+    store.set(bookmarkListAtom, [makeItem('bmk_aaaaaaaa')]);
+
+    const set = store.get(bookmarkIdSetAtom);
+    expect(set.has('bmk_ffffffff')).toBe(false);
+  });
+
+  it('updates reactively when the list changes', () => {
+    const store = createStore();
+    store.set(bookmarkListAtom, [makeItem('bmk_11111111')]);
+
+    expect(store.get(bookmarkIdSetAtom).has('bmk_11111111')).toBe(true);
+
+    store.set(bookmarkListAtom, []);
+    expect(store.get(bookmarkIdSetAtom).has('bmk_11111111')).toBe(false);
+  });
+
+  it('returns a Set whose size equals the number of unique items', () => {
+    const store = createStore();
+    const items = [makeItem('bmk_aaaaaaaa'), makeItem('bmk_bbbbbbbb'), makeItem('bmk_cccccccc')];
+    store.set(bookmarkListAtom, items);
+
+    expect(store.get(bookmarkIdSetAtom).size).toBe(3);
+  });
+});
diff --git a/src/app/state/bookmarks.ts b/src/app/state/bookmarks.ts
new file mode 100644
index 000000000..4d6c2b19f
--- /dev/null
+++ b/src/app/state/bookmarks.ts
@@ -0,0 +1,27 @@
+import { atom } from 'jotai';
+import { BookmarkItemContent } from '../features/bookmarks/bookmarkDomain';
+
+/** Ordered list of active bookmark items (mirrors the server index order). */
+export const bookmarkListAtom = atom<BookmarkItemContent[]>([]);
+
+/**
+ * Ordered list of deleted (tombstoned) bookmark items that are recoverable.
+ * Populated alongside bookmarkListAtom so the UI can show a "Recently Removed"
+ * section with a Restore button for each entry.
+ */
+export const bookmarkDeletedListAtom = atom<BookmarkItemContent[]>([]);
+
+/** True while a refresh from account data is in progress. */
+export const bookmarkLoadingAtom = atom<boolean>(false);
+
+/**
+ * Derived set of active bookmark IDs — used for O(1) per-message
+ * "is this message bookmarked?" checks.
+ *
+ * MSC4438 §Checking if a message is bookmarked: use a local reverse lookup
+ * rather than issuing server requests.
+ */
+export const bookmarkIdSetAtom = atom<Set<string>>((get) => {
+  const list = get(bookmarkListAtom);
+  return new Set(list.map((b) => b.bookmark_id));
+});
diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
index 05bb8e0fb..f223d6689 100644
--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -119,6 +119,9 @@ export interface Settings {
   showPersonaSetting: boolean;
   closeFoldersByDefault: boolean;
 
+  // experimental
+  enableMessageBookmarks: boolean;
+
   // furry stuff
   renderAnimals: boolean;
 }
@@ -220,6 +223,9 @@ const defaultSettings: Settings = {
   showPersonaSetting: false,
   closeFoldersByDefault: false,
 
+  // experimental
+  enableMessageBookmarks: false,
+
   // furry stuff
   renderAnimals: true,
 };
diff --git a/src/types/matrix/accountData.ts b/src/types/matrix/accountData.ts
index 25b13cbc4..f89958d9f 100644
--- a/src/types/matrix/accountData.ts
+++ b/src/types/matrix/accountData.ts
@@ -18,6 +18,11 @@ export enum AccountDataEvent {
   CrossSigningUser = 'm.cross_signing.user',
   MegolmBackupV1 = 'm.megolm_backup.v1',
 
+  // MSC4438 Message Bookmarks (unstable prefix)
+  BookmarksIndex = 'org.matrix.msc4438.bookmarks.index',
+  /** Prefix for per-bookmark item events; append the bookmark ID to get the full event type. */
+  BookmarkItemPrefix = 'org.matrix.msc4438.bookmark.',
+
   // Sable account data
   SableNicknames = 'moe.sable.app.nicknames',
   SablePinStatus = 'moe.sable.app.pins_read_marker',