From 5580dbdc520f4421711a8898976dcd025f34aea1 Mon Sep 17 00:00:00 2001
From: Jaycie Brown <jeab2@cam.ac.uk>
Date: Wed, 25 Mar 2026 11:05:50 +0000
Subject: [PATCH 01/17] Add temporary bookmark logic for testing

---
 .../list-groups/AbstractListViewItem.tsx      |  4 +++
 src/app/components/pages/QuestionFinder.tsx   |  2 +-
 src/app/services/bookmarks.ts                 | 25 +++++++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/app/services/bookmarks.ts

diff --git a/src/app/components/elements/list-groups/AbstractListViewItem.tsx b/src/app/components/elements/list-groups/AbstractListViewItem.tsx
index 89cbcca7d2..bb05d6f50d 100644
--- a/src/app/components/elements/list-groups/AbstractListViewItem.tsx
+++ b/src/app/components/elements/list-groups/AbstractListViewItem.tsx
@@ -16,6 +16,7 @@ import { ContentPropertyTags } from "../ContentPropertyTags";
 import { LLMFreeTextQuestionIndicator } from "../LLMFreeTextQuestionIndicator";
 import { CrossTopicQuestionIndicator } from "../CrossTopicQuestionIndicator";
 import { SupersededDeprecatedBoardContentWarning } from "../../navigation/SupersededDeprecatedWarning";
+import { useBookmarks } from "../../../services/bookmarks";
 
 const Breadcrumb = ({breadcrumb}: {breadcrumb: string[]}) => {
     return <>
@@ -132,6 +133,7 @@ type ALVIType = {
     audienceViews?: ViewingContext[];
     status?: CompletionState;
     quizTag?: string; // this is for quick quizzes only, which are currently just gameboards; may change in future
+    bookmark?: boolean; // if set, displays a bookmark for logged-in users that will save the alvi to the user's bookmarks on click
 } | {
     // quizzes – have exclusive "preview" and "view test" buttons
     alviType: "quiz";
@@ -168,6 +170,7 @@ export type AbstractListViewItemProps = {
 
 export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb, tags, forceFullWidth, url, state, className, hasCaret, ...typedProps}: AbstractListViewItemProps) => { 
     const deviceSize = useDeviceSize();
+    const { isBookmarked, bookmarkItem } = useBookmarks();
     const user = useAppSelector(selectors.user.orNull);
 
     const isItem = typedProps.alviType === "item";
@@ -259,6 +262,7 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
                     {isQuiz && <Col md={6} className="d-none d-md-flex align-items-center justify-content-end">
                         <QuizLinks previewQuizUrl={typedProps.previewQuizUrl} quizButton={typedProps.quizButton}/> 
                     </Col>}
+                    {isItem && typedProps.bookmark && isTeacherOrAbove(user) && <button className={classNames("alvi-bookmark", {"saved": isBookmarked(url)})} onClick={() => bookmarkItem(url)} /> }
                 </>
             }
             {hasCaret && <div className="list-caret align-content-center" aria-hidden="true">
diff --git a/src/app/components/pages/QuestionFinder.tsx b/src/app/components/pages/QuestionFinder.tsx
index 12471cf1f3..8430318279 100644
--- a/src/app/components/pages/QuestionFinder.tsx
+++ b/src/app/components/pages/QuestionFinder.tsx
@@ -595,7 +595,7 @@ export const QuestionFinder = () => {
                                 </ResultsListHeader>
                                 <CardBody className={classNames({"border-0": isPhy, "p-0": questions?.length, "m-0": isAda && questions?.length})}>
                                     {questions?.length
-                                        ? <ListView type="item" items={questions} hideIconLabel/>
+                                        ? <ListView type="item" items={questions} bookmark hideIconLabel/>
                                         : isAda && (filteringByStatus 
                                             ? <span>Could not load any results matching the requested filters.</span>
                                             : <span>No results match the requested filters.</span>
diff --git a/src/app/services/bookmarks.ts b/src/app/services/bookmarks.ts
new file mode 100644
index 0000000000..8941b147d1
--- /dev/null
+++ b/src/app/services/bookmarks.ts
@@ -0,0 +1,25 @@
+// TODO: move to slices when API exists
+
+import { useState } from "react";
+
+export const useBookmarks = () => {
+    const [bookmarks, setBookmarks] = useState<string[]>([]);
+
+    const bookmarkItem = (url?: string) => {
+        if (!url) return;
+
+        if (bookmarks.includes(url)) {
+            setBookmarks(bookmarks.filter(b => b !== url));
+        } else {
+            setBookmarks([...bookmarks, url]);
+        }
+    };
+
+    const isBookmarked = (url?: string) => {
+        if (!url) return false;
+        return bookmarks.includes(url);
+    };
+
+    return { isBookmarked, bookmarkItem };
+};
+

From d829aef10a35dc100f4d3fffed2598afbcc8165c Mon Sep 17 00:00:00 2001
From: Jaycie Brown <jeab2@cam.ac.uk>
Date: Wed, 25 Mar 2026 14:08:49 +0000
Subject: [PATCH 02/17] Trial different types of bookmarks

---
 public/assets/common/bookmark.svg             |  3 ++
 public/assets/common/icons/bookmark-fill.svg  |  3 ++
 public/assets/common/icons/bookmark.svg       |  3 ++
 .../components/elements/BookmarkButton.tsx    | 38 +++++++++++++++++++
 src/app/components/elements/PageMetadata.tsx  |  4 ++
 .../elements/inputs/CountryInput.tsx          |  5 ++-
 src/scss/common/icons.scss                    | 13 +++++++
 src/scss/common/list-groups.scss              | 29 ++++++++++++++
 8 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 public/assets/common/bookmark.svg
 create mode 100644 public/assets/common/icons/bookmark-fill.svg
 create mode 100644 public/assets/common/icons/bookmark.svg
 create mode 100644 src/app/components/elements/BookmarkButton.tsx

diff --git a/public/assets/common/bookmark.svg b/public/assets/common/bookmark.svg
new file mode 100644
index 0000000000..427c831a23
--- /dev/null
+++ b/public/assets/common/bookmark.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="91" viewBox="0 0 32 91" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32 88.2486C32 90.2948 29.2911 91.0206 28.268 89.2486L17.732 71C16.9622 69.6666 15.0378 69.6667 14.268 71L3.73205 89.2486C2.70894 91.0207 0 90.2948 0 88.2486V2C0 0.895432 0.895431 0 2 0H30C31.1046 0 32 0.89543 32 2V88.2486Z" fill="white"/>
+</svg>
diff --git a/public/assets/common/icons/bookmark-fill.svg b/public/assets/common/icons/bookmark-fill.svg
new file mode 100644
index 0000000000..587a476569
--- /dev/null
+++ b/public/assets/common/icons/bookmark-fill.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 37 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.5 44.5088C34.5 46.4775 31.9548 47.2617 30.8468 45.6344L20.1532 29.9281C19.3594 28.7622 17.6406 28.7622 16.8468 29.9281L6.1532 45.6344C5.0452 47.2617 2.5 46.4775 2.5 44.5088V4.5C2.5 3.39543 3.39543 2.5 4.5 2.5H32.5C33.6046 2.5 34.5 3.39543 34.5 4.5V44.5088Z" fill="#fff" stroke="#fff" stroke-width="4"/>
+</svg>
diff --git a/public/assets/common/icons/bookmark.svg b/public/assets/common/icons/bookmark.svg
new file mode 100644
index 0000000000..a60abab1d3
--- /dev/null
+++ b/public/assets/common/icons/bookmark.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 37 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.5 44.5088C34.5 46.4775 31.9548 47.2617 30.8468 45.6344L20.1532 29.9281C19.3594 28.7622 17.6406 28.7622 16.8468 29.9281L6.1532 45.6344C5.0452 47.2617 2.5 46.4775 2.5 44.5088V4.5C2.5 3.39543 3.39543 2.5 4.5 2.5H32.5C33.6046 2.5 34.5 3.39543 34.5 4.5V44.5088Z" stroke="#fff" stroke-width="4"/>
+</svg>
diff --git a/src/app/components/elements/BookmarkButton.tsx b/src/app/components/elements/BookmarkButton.tsx
new file mode 100644
index 0000000000..ccb6fe7144
--- /dev/null
+++ b/src/app/components/elements/BookmarkButton.tsx
@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { IconButton } from "./AffixButton";
+import { useBookmarks } from "../../services/bookmarks";
+import classNames from "classnames";
+import { ContentDTO } from "../../../IsaacApiTypes";
+import { Tooltip } from "reactstrap";
+
+export const BookmarkButton = ({ doc }: { doc?: ContentDTO }) => {
+    const { isBookmarked, bookmarkItem } = useBookmarks();
+    const isQuestionBookmarked = doc?.type === "isaacQuestionPage" && doc.id ? isBookmarked(`/questions/${doc.id}`) : false;
+    const [showBookmarkTooltip, setShowBookmarkTooltip] = useState(false);
+
+    return <>
+        <IconButton 
+            id="bookmark-button"
+            icon={classNames("icon-bookmark", "icon-color-black-hoverable", {"fill": isQuestionBookmarked})} 
+            color="tint"
+            data-bs-theme="neutral"
+            onClick={() => {
+                if (!isQuestionBookmarked) {
+                    setShowBookmarkTooltip(true);
+                    setTimeout(() => setShowBookmarkTooltip(false), 1000);
+                }
+
+                bookmarkItem(`/questions/${doc?.id}`);
+            }}
+        />
+        <Tooltip 
+            id="bookmark-popover"
+            target="bookmark-button"
+            isOpen={showBookmarkTooltip}
+            toggle={() => setShowBookmarkTooltip(!showBookmarkTooltip)}
+            trigger="manual"
+        >
+            <div className="popover-header">Saved!</div>
+        </Tooltip>
+    </>;
+};
diff --git a/src/app/components/elements/PageMetadata.tsx b/src/app/components/elements/PageMetadata.tsx
index fb754ba982..964aab646b 100644
--- a/src/app/components/elements/PageMetadata.tsx
+++ b/src/app/components/elements/PageMetadata.tsx
@@ -16,6 +16,9 @@ import { UserContextPicker } from './inputs/UserContextPicker';
 import { LLMFreeTextQuestionIndicator } from './LLMFreeTextQuestionIndicator';
 import { CrossTopicQuestionIndicator } from './CrossTopicQuestionIndicator';
 import { selectors, useAppSelector } from '../../state';
+import { IconButton } from './AffixButton';
+import { useBookmarks } from '../../services/bookmarks';
+import { BookmarkButton } from './BookmarkButton';
 
 type PageMetadataProps = {
     doc?: SeguePageDTO;
@@ -51,6 +54,7 @@ export const ActionButtons = ({location, isQuestion, helpModalId, doc, ...rest}:
     const anyActionButtonShown = isPhy && helpModalId || above['sm'](deviceSize) || doc?.id;
 
     return anyActionButtonShown && <div {...rest} className={classNames("d-flex no-print gap-2", rest.className)}>
+        {isPhy && isQuestion && <BookmarkButton doc={doc} />}
         {isPhy && helpModalId && <HelpButton modalId={helpModalId} />}
         {above['sm'](deviceSize) && <>
             <ShareLink linkUrl={location.pathname + location.hash} clickAwayClose />
diff --git a/src/app/components/elements/inputs/CountryInput.tsx b/src/app/components/elements/inputs/CountryInput.tsx
index 777849d9b6..7d228b8f19 100644
--- a/src/app/components/elements/inputs/CountryInput.tsx
+++ b/src/app/components/elements/inputs/CountryInput.tsx
@@ -29,7 +29,8 @@ export const CountryInput = ({className, userToUpdate, setUserToUpdate, countryC
         </p>
         <StyledDropdown
             id={`${idPrefix}-country-select`}
-            value={userToUpdate && userToUpdate.countryCode}
+            value={(userToUpdate && userToUpdate.countryCode) || undefined}
+            defaultValue={"blank"}
             invalid={submissionAttempted && required && !countryCodeValid}
             feedback="Please select your country."
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
@@ -41,7 +42,7 @@ export const CountryInput = ({className, userToUpdate, setUserToUpdate, countryC
                     return <option key={countryCode} value={countryCode}>{countryDisplayName}</option>;
                 }
             )}
-            <option /> {/* Empty option for spacing */}
+            <option value={"blank"} /> {/* Empty option for spacing */}
             {allCountryOptions && Object.entries(allCountryOptions).map(
                 ([countryCode, countryDisplayName]) => {
                     return <option key={countryCode} value={countryCode}>{countryDisplayName}</option>;
diff --git a/src/scss/common/icons.scss b/src/scss/common/icons.scss
index b6317fbcd3..295a7f1eab 100644
--- a/src/scss/common/icons.scss
+++ b/src/scss/common/icons.scss
@@ -180,6 +180,19 @@ img[aria-disabled="true"] {
   @include svg-icon('/assets/common/icons/ai.svg', var(--icon-size), var(--icon-size), var(--mask-size, 60%));
 }
 
+.icon-bookmark {
+  @include svg-icon-layered(
+    '/assets/common/icons/bookmark.svg', 
+    '/assets/common/icons/bookmark-fill.svg', 
+    calc(var(--icon-size) * 1.2), calc(var(--icon-size) * 1.2), var(--mask-size, 60%)
+  );
+  margin: calc(var(--icon-size) * (1 - 1.2)/2) !important;
+
+  &:not(.fill)::before {
+    background-color: transparent !important;
+  }
+}
+
 // Icon sizing
 .icon {
   --icon-size: 16px;
diff --git a/src/scss/common/list-groups.scss b/src/scss/common/list-groups.scss
index 3756ca02f5..1e715a90f6 100644
--- a/src/scss/common/list-groups.scss
+++ b/src/scss/common/list-groups.scss
@@ -17,3 +17,32 @@
     }
   }
 }
+
+.alvi-bookmark {
+  display: flex;
+  padding: 0;
+  background: none;
+  margin-left: 1rem;
+  margin-top: -1rem;
+  overflow: hidden;
+
+  &::after {
+    content: "";
+    display: block;
+    transition: background-color 0.2s ease-out, margin-top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  
+  &.saved {
+    &::after {
+      margin-top: -0.4rem;
+      @include svg-color(url("/assets/common/bookmark.svg"), #4487FA, 16px, 48px, 16px);
+    }
+  }
+
+  &:not(.saved) {
+    &::after {
+      margin-top: -1rem;
+      @include svg-color(url("/assets/common/bookmark.svg"), $color-neutral-200, 16px, 48px, 16px);
+    }
+  }
+}

From 6c1bd4d88fbf29734f10b516422c3560827a4dc2 Mon Sep 17 00:00:00 2001
From: Jaycie Brown <jeab2@cam.ac.uk>
Date: Mon, 30 Mar 2026 11:06:35 +0100
Subject: [PATCH 03/17] Adjust colour to compile on Ada

---
 src/scss/common/list-groups.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scss/common/list-groups.scss b/src/scss/common/list-groups.scss
index 1e715a90f6..3892b0d1c0 100644
--- a/src/scss/common/list-groups.scss
+++ b/src/scss/common/list-groups.scss
@@ -42,7 +42,7 @@
   &:not(.saved) {
     &::after {
       margin-top: -1rem;
-      @include svg-color(url("/assets/common/bookmark.svg"), $color-neutral-200, 16px, 48px, 16px);
+      @include svg-color(url("/assets/common/bookmark.svg"), $gray-110, 16px, 48px, 16px);
     }
   }
 }

From 2923ecd7637fdc345c0f51295c716b8c82b78d2a Mon Sep 17 00:00:00 2001
From: Jaycie Brown <jeab2@cam.ac.uk>
Date: Wed, 1 Apr 2026 16:19:03 +0100
Subject: [PATCH 04/17] Add example API slice for bookmarking

---
 src/app/services/bookmarks.ts | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/app/services/bookmarks.ts b/src/app/services/bookmarks.ts
index 8941b147d1..08dab9ca20 100644
--- a/src/app/services/bookmarks.ts
+++ b/src/app/services/bookmarks.ts
@@ -1,6 +1,8 @@
 // TODO: move to slices when API exists
 
 import { useState } from "react";
+import { isaacApi } from "../state";
+import { ContentSummaryDTO } from "../../IsaacApiTypes";
 
 export const useBookmarks = () => {
     const [bookmarks, setBookmarks] = useState<string[]>([]);
@@ -23,3 +25,33 @@ export const useBookmarks = () => {
     return { isBookmarked, bookmarkItem };
 };
 
+// TODO 
+// - add these endpoints in the backend
+// - replace types with more appropriate ones (if necessary)
+// - modify /questions endpoint to return a bookmarked field for each question
+
+export const bookmarksApi = isaacApi.injectEndpoints({
+    endpoints: (build) => ({
+        getBookmarks: build.query<ContentSummaryDTO[], void>({
+            query: () => ({
+                url: "/users/current_user/bookmarks",
+                method: "GET"
+            }),
+            transformResponse: (response: ContentSummaryDTO[]) => response || []
+        }),
+        bookmarkItem: build.mutation<void, {id: string}>({
+            query: ({id}) => ({
+                url: "/users/current_user/bookmarks",
+                method: "POST",
+                body: {id}
+            }),
+        }),
+        deleteBookmark: build.mutation<void, {id: string}>({
+            query: ({id}) => ({
+                url: "/users/current_user/bookmarks",
+                method: "DELETE",
+                body: {id}
+            }),
+        }),
+    }),
+});

From 3536f080ed4dc534c55f6550f2d9165c6b3a11c3 Mon Sep 17 00:00:00 2001
From: Jaycie Brown <jeab2@cam.ac.uk>
Date: Wed, 8 Apr 2026 14:57:47 +0100
Subject: [PATCH 05/17] Make sample bookmarks API actually function

---
 src/app/services/bookmarks.ts            | 38 ++++--------------------
 src/app/state/index.ts                   |  1 +
 src/app/state/slices/api/bookmarksApi.ts | 35 ++++++++++++++++++++++
 3 files changed, 41 insertions(+), 33 deletions(-)
 create mode 100644 src/app/state/slices/api/bookmarksApi.ts

diff --git a/src/app/services/bookmarks.ts b/src/app/services/bookmarks.ts
index 08dab9ca20..7fb723300f 100644
--- a/src/app/services/bookmarks.ts
+++ b/src/app/services/bookmarks.ts
@@ -1,8 +1,11 @@
 // TODO: move to slices when API exists
 
 import { useState } from "react";
-import { isaacApi } from "../state";
-import { ContentSummaryDTO } from "../../IsaacApiTypes";
+
+// TODO 
+// - add these endpoints in the backend (see bookmarksApi.ts)
+// - replace types with more appropriate ones (if necessary)
+// - modify /questions endpoint to return a bookmarked field for each question
 
 export const useBookmarks = () => {
     const [bookmarks, setBookmarks] = useState<string[]>([]);
@@ -24,34 +27,3 @@ export const useBookmarks = () => {
 
     return { isBookmarked, bookmarkItem };
 };
-
-// TODO 
-// - add these endpoints in the backend
-// - replace types with more appropriate ones (if necessary)
-// - modify /questions endpoint to return a bookmarked field for each question
-
-export const bookmarksApi = isaacApi.injectEndpoints({
-    endpoints: (build) => ({
-        getBookmarks: build.query<ContentSummaryDTO[], void>({
-            query: () => ({
-                url: "/users/current_user/bookmarks",
-                method: "GET"
-            }),
-            transformResponse: (response: ContentSummaryDTO[]) => response || []
-        }),
-        bookmarkItem: build.mutation<void, {id: string}>({
-            query: ({id}) => ({
-                url: "/users/current_user/bookmarks",
-                method: "POST",
-                body: {id}
-            }),
-        }),
-        deleteBookmark: build.mutation<void, {id: string}>({
-            query: ({id}) => ({
-                url: "/users/current_user/bookmarks",
-                method: "DELETE",
-                body: {id}
-            }),
-        }),
-    }),
-});
diff --git a/src/app/state/index.ts b/src/app/state/index.ts
index bab174f448..96bfb67c94 100644
--- a/src/app/state/index.ts
+++ b/src/app/state/index.ts
@@ -36,6 +36,7 @@ export * from "./slices/api/authorisationsApi";
 export * from "./slices/api/accountApi";
 export * from "./slices/api/gameboardApi";
 export * from "./slices/api/assignmentsApi";
+export * from "./slices/api/bookmarksApi";
 export * from "./slices/api/contentApi";
 export * from "./slices/api/groupsApi";
 export * from "./slices/api/emailApi";
diff --git a/src/app/state/slices/api/bookmarksApi.ts b/src/app/state/slices/api/bookmarksApi.ts
new file mode 100644
index 0000000000..e5cf50daec
--- /dev/null
+++ b/src/app/state/slices/api/bookmarksApi.ts
@@ -0,0 +1,35 @@
+import { ContentSummaryDTO } from "../../../../IsaacApiTypes";
+import {isaacApi} from "./baseApi";
+
+// This is in no way fixed! Modify as you will.
+export const bookmarksApi = isaacApi.injectEndpoints({
+    endpoints: (build) => ({
+        getBookmarks: build.query<ContentSummaryDTO[], void>({
+            query: () => ({
+                url: "/users/current_user/bookmarks",
+                method: "GET"
+            }),
+            transformResponse: (response: ContentSummaryDTO[]) => response || []
+        }),
+        bookmarkItem: build.mutation<void, {id: string}>({
+            query: ({id}) => ({
+                url: "/users/current_user/bookmarks",
+                method: "POST",
+                body: {id}
+            }),
+        }),
+        deleteBookmark: build.mutation<void, {id: string}>({
+            query: ({id}) => ({
+                url: "/users/current_user/bookmarks",
+                method: "DELETE",
+                body: {id}
+            }),
+        }),
+    }),
+});
+
+export const {
+    useGetBookmarksQuery,
+    useBookmarkItemMutation,
+    useDeleteBookmarkMutation
+} = bookmarksApi;

From c69f36823fbbe019bfd1e8219dc0ec642ceb1e00 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Thu, 9 Apr 2026 16:24:32 +0100
Subject: [PATCH 06/17] Update bookmarks API

---
 src/IsaacApiTypes.tsx                         |  1 +
 .../list-groups/AbstractListViewItem.tsx      |  4 ++-
 src/app/services/bookmarks.ts                 | 25 +++++++++++--------
 src/app/state/slices/api/bookmarksApi.ts      | 25 +++++++++++--------
 4 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/IsaacApiTypes.tsx b/src/IsaacApiTypes.tsx
index 490df7864e..902696bf6e 100644
--- a/src/IsaacApiTypes.tsx
+++ b/src/IsaacApiTypes.tsx
@@ -457,6 +457,7 @@ export interface ContentSummaryDTO {
     tags?: string[];
     url?: string;
     state?: CompletionState;
+    bookmarked?: Date;
     supersededBy?: string;
     deprecated?: boolean;
     difficulty?: string;
diff --git a/src/app/components/elements/list-groups/AbstractListViewItem.tsx b/src/app/components/elements/list-groups/AbstractListViewItem.tsx
index bb05d6f50d..9d2c8ba64a 100644
--- a/src/app/components/elements/list-groups/AbstractListViewItem.tsx
+++ b/src/app/components/elements/list-groups/AbstractListViewItem.tsx
@@ -173,6 +173,8 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
     const { isBookmarked, bookmarkItem } = useBookmarks();
     const user = useAppSelector(selectors.user.orNull);
 
+    const contentId = (url?.includes("/questions/") || url?.includes("/concepts/")) && url.split("/").slice(-1)[0];
+
     const isItem = typedProps.alviType === "item";
     const isGameboard = typedProps.alviType === "gameboard";
     const isQuiz = typedProps.alviType === "quiz";
@@ -262,7 +264,7 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
                     {isQuiz && <Col md={6} className="d-none d-md-flex align-items-center justify-content-end">
                         <QuizLinks previewQuizUrl={typedProps.previewQuizUrl} quizButton={typedProps.quizButton}/> 
                     </Col>}
-                    {isItem && typedProps.bookmark && isTeacherOrAbove(user) && <button className={classNames("alvi-bookmark", {"saved": isBookmarked(url)})} onClick={() => bookmarkItem(url)} /> }
+                    {isItem && contentId && typedProps.bookmark && isTeacherOrAbove(user) && <button className={classNames("alvi-bookmark", {"saved": isBookmarked(contentId)})} onClick={() => bookmarkItem(contentId)} /> }
                 </>
             }
             {hasCaret && <div className="list-caret align-content-center" aria-hidden="true">
diff --git a/src/app/services/bookmarks.ts b/src/app/services/bookmarks.ts
index 7fb723300f..06c94e6d2e 100644
--- a/src/app/services/bookmarks.ts
+++ b/src/app/services/bookmarks.ts
@@ -1,6 +1,6 @@
 // TODO: move to slices when API exists
 
-import { useState } from "react";
+import { useBookmarkItemMutation, useDeleteBookmarkMutation, useGetBookmarksQuery } from "../state";
 
 // TODO 
 // - add these endpoints in the backend (see bookmarksApi.ts)
@@ -8,21 +8,26 @@ import { useState } from "react";
 // - modify /questions endpoint to return a bookmarked field for each question
 
 export const useBookmarks = () => {
-    const [bookmarks, setBookmarks] = useState<string[]>([]);
+    const [bookmarkItemMutation] = useBookmarkItemMutation();
+    const [deleteBookmarkMutation] = useDeleteBookmarkMutation();
 
-    const bookmarkItem = (url?: string) => {
-        if (!url) return;
+    const {data: bookmarks = []} = useGetBookmarksQuery();
 
-        if (bookmarks.includes(url)) {
-            setBookmarks(bookmarks.filter(b => b !== url));
+    const bookmarkIds = bookmarks.flatMap((bookmark) => bookmark.id ?? []);
+
+    const bookmarkItem = (content_id?: string) => {
+        if (!content_id) return;
+
+        if (!bookmarkIds.includes(content_id)) {
+            void bookmarkItemMutation({content_id: content_id});
         } else {
-            setBookmarks([...bookmarks, url]);
+            void deleteBookmarkMutation({content_id: content_id});
         }
     };
 
-    const isBookmarked = (url?: string) => {
-        if (!url) return false;
-        return bookmarks.includes(url);
+    const isBookmarked = (content_id?: string) => {
+        if (!content_id) return false;
+        return bookmarkIds.includes(content_id);
     };
 
     return { isBookmarked, bookmarkItem };
diff --git a/src/app/state/slices/api/bookmarksApi.ts b/src/app/state/slices/api/bookmarksApi.ts
index e5cf50daec..7e1735a2f6 100644
--- a/src/app/state/slices/api/bookmarksApi.ts
+++ b/src/app/state/slices/api/bookmarksApi.ts
@@ -2,28 +2,31 @@ import { ContentSummaryDTO } from "../../../../IsaacApiTypes";
 import {isaacApi} from "./baseApi";
 
 // This is in no way fixed! Modify as you will.
-export const bookmarksApi = isaacApi.injectEndpoints({
+export const bookmarksApi = isaacApi.enhanceEndpoints({addTagTypes: ["Bookmarks"]}).injectEndpoints({
     endpoints: (build) => ({
         getBookmarks: build.query<ContentSummaryDTO[], void>({
             query: () => ({
-                url: "/users/current_user/bookmarks",
+                url: "/bookmarks",
                 method: "GET"
             }),
-            transformResponse: (response: ContentSummaryDTO[]) => response || []
+            transformResponse: (response: ContentSummaryDTO[]) => response || [],
+            providesTags: ["Bookmarks"],
         }),
-        bookmarkItem: build.mutation<void, {id: string}>({
-            query: ({id}) => ({
-                url: "/users/current_user/bookmarks",
+        bookmarkItem: build.mutation<void, {content_id: string}>({
+            query: ({content_id}) => ({
+                url: "/bookmarks",
                 method: "POST",
-                body: {id}
+                params: {content_id}
             }),
+            invalidatesTags: ["Bookmarks"],
         }),
-        deleteBookmark: build.mutation<void, {id: string}>({
-            query: ({id}) => ({
-                url: "/users/current_user/bookmarks",
+        deleteBookmark: build.mutation<void, {content_id: string}>({
+            query: ({content_id}) => ({
+                url: "/bookmarks",
                 method: "DELETE",
-                body: {id}
+                params: {content_id}
             }),
+            invalidatesTags: ["Bookmarks"],
         }),
     }),
 });

From 43c3499e40b1a8fb40d00d4640f4ab2eba3f4b95 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Thu, 9 Apr 2026 16:48:47 +0100
Subject: [PATCH 07/17] Add basic "My bookmarks" page

(unstyled, just to test API more easily)
---
 src/app/components/pages/MyBookmarks.tsx  | 23 +++++++++++++++++++++++
 src/app/components/site/phy/RoutesPhy.tsx |  4 ++++
 2 files changed, 27 insertions(+)
 create mode 100644 src/app/components/pages/MyBookmarks.tsx

diff --git a/src/app/components/pages/MyBookmarks.tsx b/src/app/components/pages/MyBookmarks.tsx
new file mode 100644
index 0000000000..4af1d7e46c
--- /dev/null
+++ b/src/app/components/pages/MyBookmarks.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { useGetBookmarksQuery } from "../../state";
+import { ListView } from "../elements/list-groups/ListView";
+import { PageContainer } from "../elements/layout/PageContainer";
+import { GenericPageSidebar } from "../elements/sidebar/GenericPageSidebar";
+import { TitleAndBreadcrumb } from "../elements/TitleAndBreadcrumb";
+import { PageMetadata } from "../elements/PageMetadata";
+
+export const MyBookmarks = () => {
+    const {data: bookmarks = []} = useGetBookmarksQuery();
+
+    return <PageContainer
+        pageTitle={<TitleAndBreadcrumb currentPageTitle="My bookmarks" icon={{type: "icon", icon: "icon-book"}} />}
+        sidebar={<GenericPageSidebar/>}>
+
+        <PageMetadata noTitle showSidebarButton />
+
+        <ListView
+            type="item"
+            items={bookmarks}
+        />
+    </PageContainer>;
+};
\ No newline at end of file
diff --git a/src/app/components/site/phy/RoutesPhy.tsx b/src/app/components/site/phy/RoutesPhy.tsx
index 88b6c75b83..f2e5b0c80a 100644
--- a/src/app/components/site/phy/RoutesPhy.tsx
+++ b/src/app/components/site/phy/RoutesPhy.tsx
@@ -45,6 +45,7 @@ import { RequireAuth } from "../../navigation/UserAuthentication";
 import { Navigate, Route } from "react-router";
 import { Generic } from "../../pages/Generic";
 import { NavigateWithSlug } from "../../navigation/NavigateWithSlug";
+import { MyBookmarks } from "../../pages/MyBookmarks";
 
 const Equality = lazy(() => import('../../pages/Equality'));
 const EventDetails = lazy(() => import('../../pages/EventDetails'));
@@ -155,6 +156,9 @@ export const RoutesPhy = [
     // Concepts List
     <Route key={key++} path="/concepts" element={<Concepts />} />,
 
+    // Bookmarks
+    <Route key={key++} path="/bookmarks" element={<RequireAuth auth={isLoggedIn} element={<MyBookmarks />} />} />,
+
     // Static pages
     <Route key={key++} path="/about" element={<Generic pageIdOverride={"about_us_index"} />} />,
     <Route key={key++} path="/apply_uni" element={<Generic pageIdOverride={"apply_uni"} />} />,

From 7afb6dcd5c31bfed959ac4c801c382b7c61d0539 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Thu, 9 Apr 2026 16:59:29 +0100
Subject: [PATCH 08/17] Update bookmark id in button

---
 src/app/components/elements/BookmarkButton.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/elements/BookmarkButton.tsx b/src/app/components/elements/BookmarkButton.tsx
index ccb6fe7144..6607825b2e 100644
--- a/src/app/components/elements/BookmarkButton.tsx
+++ b/src/app/components/elements/BookmarkButton.tsx
@@ -7,7 +7,7 @@ import { Tooltip } from "reactstrap";
 
 export const BookmarkButton = ({ doc }: { doc?: ContentDTO }) => {
     const { isBookmarked, bookmarkItem } = useBookmarks();
-    const isQuestionBookmarked = doc?.type === "isaacQuestionPage" && doc.id ? isBookmarked(`/questions/${doc.id}`) : false;
+    const isQuestionBookmarked = doc?.type === "isaacQuestionPage" && doc.id ? isBookmarked(doc.id) : false;
     const [showBookmarkTooltip, setShowBookmarkTooltip] = useState(false);
 
     return <>
@@ -22,7 +22,7 @@ export const BookmarkButton = ({ doc }: { doc?: ContentDTO }) => {
                     setTimeout(() => setShowBookmarkTooltip(false), 1000);
                 }
 
-                bookmarkItem(`/questions/${doc?.id}`);
+                bookmarkItem(doc?.id);
             }}
         />
         <Tooltip 

From d46b98b34e40417a8e9df5de28d26542db2291e7 Mon Sep 17 00:00:00 2001
From: Jaycie Brown <jeab2@cam.ac.uk>
Date: Tue, 21 Apr 2026 11:47:21 +0100
Subject: [PATCH 09/17] Add basic My Bookmarks searching/filtering

---
 src/IsaacAppTypes.tsx                         |  14 ++
 .../elements/sidebar/MyBookmarksSidebar.tsx   | 122 ++++++++++++++++++
 src/app/components/pages/MyBookmarks.tsx      |  73 +++++++++--
 3 files changed, 200 insertions(+), 9 deletions(-)
 create mode 100644 src/app/components/elements/sidebar/MyBookmarksSidebar.tsx

diff --git a/src/IsaacAppTypes.tsx b/src/IsaacAppTypes.tsx
index cffc80e11a..48078cf052 100644
--- a/src/IsaacAppTypes.tsx
+++ b/src/IsaacAppTypes.tsx
@@ -313,6 +313,20 @@ export interface ActiveModalProps {
     bodyContainerClassName?: string;
 }
 
+export enum BookmarksOrder {
+    "date" = "date",
+    "-date" = "-date",
+    "title" = "title",
+    "-title" = "-title"
+}
+
+export const BOOKMARKS_ORDER_NAMES: Record<BookmarksOrder, string> = {
+    [BookmarksOrder.date]: "Date added (newest first)",
+    [BookmarksOrder["-date"]]: "Date added (oldest first)",
+    [BookmarksOrder.title]: "Title (A-Z)",
+    [BookmarksOrder["-title"]]: "Title (Z-A)"
+};
+
 export type ProgressSortOrder = number | "name" | "totalPartPercentage" | "totalAttemptedPartPercentage" | "totalQuestionPercentage" | "totalAttemptedQuestionPercentage";
 
 export enum QuizzesBoardOrder {
diff --git a/src/app/components/elements/sidebar/MyBookmarksSidebar.tsx b/src/app/components/elements/sidebar/MyBookmarksSidebar.tsx
new file mode 100644
index 0000000000..221fb84cc8
--- /dev/null
+++ b/src/app/components/elements/sidebar/MyBookmarksSidebar.tsx
@@ -0,0 +1,122 @@
+import React, { useState, ChangeEvent, useMemo } from "react";
+import { Input } from "reactstrap";
+import { getFilteredStageOptions, getSearchPlaceholder, TAG_ID, tags } from "../../../services";
+import { ContentSidebarProps, ContentSidebar } from "../layout/SidebarLayout";
+import { CheckboxWrapper, StyledCheckbox } from "../inputs/StyledCheckbox";
+import { CollapsibleList } from "../CollapsibleList";
+import { ContentSummaryDTO } from "../../../../IsaacApiTypes";
+import { BOOKMARKS_ORDER_NAMES, BookmarksOrder } from "../../../../IsaacAppTypes";
+
+interface MyBookmarksSidebarProps extends ContentSidebarProps {
+    bookmarks: ContentSummaryDTO[];
+    searchText: string;
+    setSearchText: React.Dispatch<React.SetStateAction<string>>;
+    searchSubjects: string[];
+    setSearchSubjects: React.Dispatch<React.SetStateAction<string[]>>;
+    searchStages: string[];
+    setSearchStages: React.Dispatch<React.SetStateAction<string[]>>;
+    sortOrder: BookmarksOrder;
+    setSortOrder: React.Dispatch<React.SetStateAction<BookmarksOrder>>;
+}
+
+export const MyBookmarksSidebar = (props: MyBookmarksSidebarProps) => {
+    const { bookmarks, searchText, setSearchText, searchSubjects, setSearchSubjects, searchStages, setSearchStages, sortOrder, setSortOrder, ...rest } = props;
+
+    // setSearchText is a debounced method that would not update on each keystroke, so we use this internal state to visually update the search text immediately
+    const [internalSearchText, setInternalSearchText] = useState(searchText);
+    const [subjectExpanded, toggleSubjectExpanded] = useState(true);
+    const [stageExpanded, toggleStageExpanded] = useState(false);
+
+    const tagCounts = useMemo<Record<string, number>>(() => {
+        return bookmarks.reduce((counts, bookmark) => {
+            bookmark.tags?.forEach(tag => {
+                // only track tags we care about
+                if (tags.allSubjectTags.includes(tags.getById(tag as TAG_ID))) {
+                    counts[tag] = (counts[tag] || 0) + 1;
+                }
+            });
+            return counts;
+        }, {} as Record<string, number>);
+    }, [bookmarks]);
+
+    const stageCounts = useMemo<Record<string, number>>(() => {
+        return bookmarks.reduce((counts, bookmark) => {
+            bookmark.audience?.forEach(audience => {
+                audience.stage?.forEach(stage => {
+                    counts[stage] = (counts[stage] || 0) + 1;
+                });
+            });
+            return counts;
+        }, {} as Record<string, number>);
+    }, [bookmarks]);
+
+    return <ContentSidebar {...rest}>
+        <search>
+            <div className="section-divider"/>
+            <h5>Search bookmarks</h5>
+            <Input
+                className='search--filter-input my-4'
+                type="search" value={searchText || ""}
+                placeholder={`e.g. ${getSearchPlaceholder()}`}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchText(e.target.value)}
+            />
+
+            <div className="section-divider"/>
+
+            <h5>Filter bookmarks by...</h5>
+
+            <div className="d-flex flex-column my-4">
+                <CollapsibleList
+                    title={"Subject"} expanded={subjectExpanded}
+                    toggle={() => toggleSubjectExpanded(e => !e)}
+                    numberSelected={searchSubjects.length}
+                    className="ps-0"
+                >
+                    {tags.allSubjectTags.map((subject, index) => (
+                        <li key={index}>
+                            <CheckboxWrapper active={searchSubjects.includes(subject.id)}>
+                                <StyledCheckbox
+                                    color="primary"
+                                    checked={searchSubjects.includes(subject.id)}
+                                    onChange={() => setSearchSubjects(s => s.includes(subject.id) ? s.filter(v => v !== subject.id) : [...s, subject.id])}
+                                    label={<>
+                                        {subject.title} {" "}
+                                        <span className="text-muted">({tagCounts[subject.id] || 0})</span>
+                                    </>}
+                                />
+                            </CheckboxWrapper>
+                        </li>
+                    ))}
+                </CollapsibleList>
+
+                <CollapsibleList
+                    title={"Learning stage"} expanded={stageExpanded}
+                    toggle={() => toggleStageExpanded(e => !e)}
+                    numberSelected={searchStages.length}
+                >
+                    {getFilteredStageOptions().map((stage, index) => (
+                        <li key={index}>
+                            <CheckboxWrapper active={searchStages.includes(stage.value)}>
+                                <StyledCheckbox
+                                    color="primary"
+                                    checked={searchStages.includes(stage.value)}
+                                    onChange={() => setSearchStages(s => s.includes(stage.value) ? s.filter(v => v !== stage.value) : [...s, stage.value])}
+                                    label={<>
+                                        {stage.label} {" "}
+                                        <span className="text-muted">({stageCounts[stage.value] || 0})</span>
+                                    </>}
+                                />
+                            </CheckboxWrapper>
+                        </li>
+                    ))}
+                </CollapsibleList>
+            </div>
+
+            <h5>Sort bookmarks by...</h5>
+
+            <Input type="select" className="ps-3 my-3" value={sortOrder} onChange={e => setSortOrder(e.target.value as BookmarksOrder)}>
+                {Object.values(BookmarksOrder).map(order => <option key={order} value={order}>{BOOKMARKS_ORDER_NAMES[order]}</option>)}
+            </Input>
+        </search>
+    </ContentSidebar>;
+};
diff --git a/src/app/components/pages/MyBookmarks.tsx b/src/app/components/pages/MyBookmarks.tsx
index 4af1d7e46c..9b98fe7b28 100644
--- a/src/app/components/pages/MyBookmarks.tsx
+++ b/src/app/components/pages/MyBookmarks.tsx
@@ -1,23 +1,78 @@
-import React from "react";
+import React, { useState } from "react";
 import { useGetBookmarksQuery } from "../../state";
 import { ListView } from "../elements/list-groups/ListView";
 import { PageContainer } from "../elements/layout/PageContainer";
-import { GenericPageSidebar } from "../elements/sidebar/GenericPageSidebar";
 import { TitleAndBreadcrumb } from "../elements/TitleAndBreadcrumb";
 import { PageMetadata } from "../elements/PageMetadata";
+import { ShowLoadingQuery } from "../handlers/ShowLoadingQuery";
+import { MyBookmarksSidebar } from "../elements/sidebar/MyBookmarksSidebar";
+import { BookmarksOrder } from "../../../IsaacAppTypes";
+import { PageFragment } from "../elements/PageFragment";
 
 export const MyBookmarks = () => {
-    const {data: bookmarks = []} = useGetBookmarksQuery();
+    const bookmarksQuery = useGetBookmarksQuery();
+
+    const [searchText, setSearchText] = useState("");
+    const [searchSubjects, setSearchSubjects] = useState<string[]>([]);
+    const [searchStages, setSearchStages] = useState<string[]>([]);
+    const [sortOrder, setSortOrder] = useState<BookmarksOrder>(BookmarksOrder.date);
 
     return <PageContainer
         pageTitle={<TitleAndBreadcrumb currentPageTitle="My bookmarks" icon={{type: "icon", icon: "icon-book"}} />}
-        sidebar={<GenericPageSidebar/>}>
+        sidebar={<MyBookmarksSidebar 
+            searchText={searchText} 
+            setSearchText={setSearchText}
+            searchSubjects={searchSubjects}
+            setSearchSubjects={setSearchSubjects}
+            searchStages={searchStages}
+            setSearchStages={setSearchStages}
+            bookmarks={bookmarksQuery.data || []} 
+            sortOrder={sortOrder}
+            setSortOrder={setSortOrder}
+        />}
+    >
+
+        <PageMetadata noTitle showSidebarButton sidebarInTitle>
+            <PageFragment fragmentId="help_toptext_bookmarks" />
+        </PageMetadata>
+
+        <ShowLoadingQuery
+            query={bookmarksQuery} 
+            defaultErrorTitle="Could not load your bookmarks. Please try again later."
+            thenRender={(bookmarks) => {
+                if (bookmarks.length === 0) {
+                    return <span>You have no bookmarks yet.</span>;
+                }
+
+                const filteredBookmarks = bookmarks.filter(bookmark => {
+                    if (!bookmark) return false;
+                    const matchesSearchText = bookmark.title?.toLowerCase().includes(searchText.toLowerCase());
+                    const matchesSubject = searchSubjects.length === 0 || bookmark.tags?.some(tag => searchSubjects.includes(tag));
+                    const matchesStage = searchStages.length === 0 || bookmark.audience?.some(audience => audience.stage?.some(stage => searchStages.includes(stage)));
+                    return matchesSearchText && matchesSubject && matchesStage;
+                });
 
-        <PageMetadata noTitle showSidebarButton />
+                const sortedBookmarks = [...filteredBookmarks].sort((a, b) => {
+                    if (sortOrder === BookmarksOrder.date) {
+                        if (!a.bookmarked || !b.bookmarked) return 0;
+                        return new Date(b.bookmarked).getTime() - new Date(a.bookmarked).getTime();
+                    } else if (sortOrder === BookmarksOrder["-date"]) {
+                        if (!a.bookmarked || !b.bookmarked) return 0;
+                        return new Date(a.bookmarked).getTime() - new Date(b.bookmarked).getTime();
+                    } else if (sortOrder === BookmarksOrder.title) {
+                        return (a.title || "").localeCompare(b.title || "");
+                    } else if (sortOrder === BookmarksOrder["-title"]) {
+                        return (b.title || "").localeCompare(a.title || "");
+                    }
+                    return 0;
+                });
 
-        <ListView
-            type="item"
-            items={bookmarks}
+                return <ListView
+                    type="item"
+                    items={sortedBookmarks}
+                    allowBookmarking
+                />;
+            }}
         />
     </PageContainer>;
-};
\ No newline at end of file
+};

From 09ebdb8e0482c8569cc474c58545940a1ef3bbd0 Mon Sep 17 00:00:00 2001
From: Jaycie Brown <jeab2@cam.ac.uk>
Date: Tue, 21 Apr 2026 11:47:59 +0100
Subject: [PATCH 10/17] Add nav menu item for My Bookmarks

---
 src/app/components/site/phy/NavigationMenuPhy.tsx | 3 +++
 src/app/services/constants.ts                     | 1 +
 2 files changed, 4 insertions(+)

diff --git a/src/app/components/site/phy/NavigationMenuPhy.tsx b/src/app/components/site/phy/NavigationMenuPhy.tsx
index 462611600d..892a660032 100644
--- a/src/app/components/site/phy/NavigationMenuPhy.tsx
+++ b/src/app/components/site/phy/NavigationMenuPhy.tsx
@@ -312,6 +312,9 @@ const ContentNavProfile = ({toggleMenu}: {toggleMenu: () => void}) => {
                             <NavigationItemClose href={PATHS.MY_GAMEBOARDS}>
                                 My question decks
                             </NavigationItemClose>
+                            <NavigationItemClose href={PATHS.BOOKMARKS}>
+                                My bookmarks
+                            </NavigationItemClose>
                             <NavigationItemClose href="/assignments" className="d-flex align-items-center">
                                 My assignments
                                 {assignmentsCount > 0 && <span className="badge bg-primary rounded-5 ms-2 h-max-content">{assignmentsCount > 99 ? "99+" : assignmentsCount}</span>}
diff --git a/src/app/services/constants.ts b/src/app/services/constants.ts
index c3cd5cec70..eddd5b7ee9 100644
--- a/src/app/services/constants.ts
+++ b/src/app/services/constants.ts
@@ -1284,6 +1284,7 @@ export const PATHS = {
     MY_TESTS: "/tests",
     TEST: "/test/assignment",
     PREVIEW_TEST: "/test/preview",
+    BOOKMARKS: "/bookmarks",
 };
 
 export const CLOZE_ITEM_SECTION_ID = "non-selected-items";

From cbfa87624a8759f8ad1c7e3861ccd9790d0d0af7 Mon Sep 17 00:00:00 2001
From: Jaycie Brown <jeab2@cam.ac.uk>
Date: Tue, 21 Apr 2026 11:48:36 +0100
Subject: [PATCH 11/17] Rename ALVI prop to `allowBookmarking` for clarity;
 tidy

---
 .../elements/list-groups/AbstractListViewItem.tsx        | 9 ++++++---
 src/app/components/pages/QuestionFinder.tsx              | 2 +-
 src/app/state/slices/api/bookmarksApi.ts                 | 1 -
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/components/elements/list-groups/AbstractListViewItem.tsx b/src/app/components/elements/list-groups/AbstractListViewItem.tsx
index 9d2c8ba64a..84a39b9dc7 100644
--- a/src/app/components/elements/list-groups/AbstractListViewItem.tsx
+++ b/src/app/components/elements/list-groups/AbstractListViewItem.tsx
@@ -5,7 +5,7 @@ import { ViewingContext} from "../../../../IsaacAppTypes";
 import classNames from "classnames";
 import { Badge, Button, Col, ListGroupItem } from "reactstrap";
 import { CompletionState, GameboardDTO } from "../../../../IsaacApiTypes";
-import { above, below, isAda, isDefined, isPhy, isStaff, isTeacherOrAbove, siteSpecific, Subject, useDeviceSize } from "../../../services";
+import { above, below, isAda, isDefined, isLoggedIn, isPhy, isStaff, isTeacherOrAbove, siteSpecific, Subject, useDeviceSize } from "../../../services";
 import { TitleIcon, TitleIconProps } from "../PageTitle";
 import { Markup } from "../markup";
 import { closeActiveModal, openActiveModal, selectors, useAppDispatch, useAppSelector, useLazyGetGroupsQuery, useLazyGetMySetAssignmentsQuery, useUnassignGameboardMutation } from "../../../state";
@@ -133,7 +133,7 @@ type ALVIType = {
     audienceViews?: ViewingContext[];
     status?: CompletionState;
     quizTag?: string; // this is for quick quizzes only, which are currently just gameboards; may change in future
-    bookmark?: boolean; // if set, displays a bookmark for logged-in users that will save the alvi to the user's bookmarks on click
+    allowBookmarking?: boolean; // if set, displays a bookmark for logged-in users that will save the alvi to the user's bookmarks on click
 } | {
     // quizzes – have exclusive "preview" and "view test" buttons
     alviType: "quiz";
@@ -264,7 +264,10 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
                     {isQuiz && <Col md={6} className="d-none d-md-flex align-items-center justify-content-end">
                         <QuizLinks previewQuizUrl={typedProps.previewQuizUrl} quizButton={typedProps.quizButton}/> 
                     </Col>}
-                    {isItem && contentId && typedProps.bookmark && isTeacherOrAbove(user) && <button className={classNames("alvi-bookmark", {"saved": isBookmarked(contentId)})} onClick={() => bookmarkItem(contentId)} /> }
+                    {isItem && contentId && typedProps.allowBookmarking && isLoggedIn(user) && <button 
+                        className={classNames("alvi-bookmark", {"saved": isBookmarked(contentId)})} 
+                        onClick={() => bookmarkItem(contentId)}
+                    /> }
                 </>
             }
             {hasCaret && <div className="list-caret align-content-center" aria-hidden="true">
diff --git a/src/app/components/pages/QuestionFinder.tsx b/src/app/components/pages/QuestionFinder.tsx
index 8430318279..b83fcc3300 100644
--- a/src/app/components/pages/QuestionFinder.tsx
+++ b/src/app/components/pages/QuestionFinder.tsx
@@ -595,7 +595,7 @@ export const QuestionFinder = () => {
                                 </ResultsListHeader>
                                 <CardBody className={classNames({"border-0": isPhy, "p-0": questions?.length, "m-0": isAda && questions?.length})}>
                                     {questions?.length
-                                        ? <ListView type="item" items={questions} bookmark hideIconLabel/>
+                                        ? <ListView type="item" items={questions} allowBookmarking hideIconLabel/>
                                         : isAda && (filteringByStatus 
                                             ? <span>Could not load any results matching the requested filters.</span>
                                             : <span>No results match the requested filters.</span>
diff --git a/src/app/state/slices/api/bookmarksApi.ts b/src/app/state/slices/api/bookmarksApi.ts
index 7e1735a2f6..756f77c4f0 100644
--- a/src/app/state/slices/api/bookmarksApi.ts
+++ b/src/app/state/slices/api/bookmarksApi.ts
@@ -1,7 +1,6 @@
 import { ContentSummaryDTO } from "../../../../IsaacApiTypes";
 import {isaacApi} from "./baseApi";
 
-// This is in no way fixed! Modify as you will.
 export const bookmarksApi = isaacApi.enhanceEndpoints({addTagTypes: ["Bookmarks"]}).injectEndpoints({
     endpoints: (build) => ({
         getBookmarks: build.query<ContentSummaryDTO[], void>({

From 45f5cf599086cbb7d3c64976b965283fc9d3b5ef Mon Sep 17 00:00:00 2001
From: Jaycie Brown <jeab2@cam.ac.uk>
Date: Tue, 21 Apr 2026 11:49:45 +0100
Subject: [PATCH 12/17] Remove unused vars

---
 src/app/components/elements/sidebar/MyBookmarksSidebar.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/components/elements/sidebar/MyBookmarksSidebar.tsx b/src/app/components/elements/sidebar/MyBookmarksSidebar.tsx
index 221fb84cc8..483f123044 100644
--- a/src/app/components/elements/sidebar/MyBookmarksSidebar.tsx
+++ b/src/app/components/elements/sidebar/MyBookmarksSidebar.tsx
@@ -22,8 +22,6 @@ interface MyBookmarksSidebarProps extends ContentSidebarProps {
 export const MyBookmarksSidebar = (props: MyBookmarksSidebarProps) => {
     const { bookmarks, searchText, setSearchText, searchSubjects, setSearchSubjects, searchStages, setSearchStages, sortOrder, setSortOrder, ...rest } = props;
 
-    // setSearchText is a debounced method that would not update on each keystroke, so we use this internal state to visually update the search text immediately
-    const [internalSearchText, setInternalSearchText] = useState(searchText);
     const [subjectExpanded, toggleSubjectExpanded] = useState(true);
     const [stageExpanded, toggleStageExpanded] = useState(false);
 

From 418392cee70b2ae91d5c2cc8c97642afedb890d2 Mon Sep 17 00:00:00 2001
From: Jaycie Brown <jeab2@cam.ac.uk>
Date: Tue, 21 Apr 2026 12:32:50 +0100
Subject: [PATCH 13/17] Feature flag bookmarks components

---
 src/app/components/elements/PageMetadata.tsx             | 8 +++++---
 .../elements/list-groups/AbstractListViewItem.tsx        | 5 ++++-
 src/app/components/site/phy/NavigationMenuPhy.tsx        | 9 ++++++---
 src/app/components/site/phy/RoutesPhy.tsx                | 7 ++++++-
 src/app/services/featureFlag.tsx                         | 2 ++
 5 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/app/components/elements/PageMetadata.tsx b/src/app/components/elements/PageMetadata.tsx
index 964aab646b..8e516238e1 100644
--- a/src/app/components/elements/PageMetadata.tsx
+++ b/src/app/components/elements/PageMetadata.tsx
@@ -16,9 +16,8 @@ import { UserContextPicker } from './inputs/UserContextPicker';
 import { LLMFreeTextQuestionIndicator } from './LLMFreeTextQuestionIndicator';
 import { CrossTopicQuestionIndicator } from './CrossTopicQuestionIndicator';
 import { selectors, useAppSelector } from '../../state';
-import { IconButton } from './AffixButton';
-import { useBookmarks } from '../../services/bookmarks';
 import { BookmarkButton } from './BookmarkButton';
+import { FeatureFlag, FeatureFlagWrapper } from '../../services/featureFlag';
 
 type PageMetadataProps = {
     doc?: SeguePageDTO;
@@ -54,7 +53,10 @@ export const ActionButtons = ({location, isQuestion, helpModalId, doc, ...rest}:
     const anyActionButtonShown = isPhy && helpModalId || above['sm'](deviceSize) || doc?.id;
 
     return anyActionButtonShown && <div {...rest} className={classNames("d-flex no-print gap-2", rest.className)}>
-        {isPhy && isQuestion && <BookmarkButton doc={doc} />}
+        {isPhy && isQuestion && <FeatureFlagWrapper flag={FeatureFlag.ENABLE_SCI_BOOKMARKS}>
+            <BookmarkButton doc={doc} />
+        </FeatureFlagWrapper>
+        }
         {isPhy && helpModalId && <HelpButton modalId={helpModalId} />}
         {above['sm'](deviceSize) && <>
             <ShareLink linkUrl={location.pathname + location.hash} clickAwayClose />
diff --git a/src/app/components/elements/list-groups/AbstractListViewItem.tsx b/src/app/components/elements/list-groups/AbstractListViewItem.tsx
index 84a39b9dc7..fb9e4319c9 100644
--- a/src/app/components/elements/list-groups/AbstractListViewItem.tsx
+++ b/src/app/components/elements/list-groups/AbstractListViewItem.tsx
@@ -17,6 +17,7 @@ import { LLMFreeTextQuestionIndicator } from "../LLMFreeTextQuestionIndicator";
 import { CrossTopicQuestionIndicator } from "../CrossTopicQuestionIndicator";
 import { SupersededDeprecatedBoardContentWarning } from "../../navigation/SupersededDeprecatedWarning";
 import { useBookmarks } from "../../../services/bookmarks";
+import { FeatureFlag, useFeatureFlag } from "../../../services/featureFlag";
 
 const Breadcrumb = ({breadcrumb}: {breadcrumb: string[]}) => {
     return <>
@@ -173,6 +174,8 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
     const { isBookmarked, bookmarkItem } = useBookmarks();
     const user = useAppSelector(selectors.user.orNull);
 
+    const bookmarksFeatureFlag = useFeatureFlag(FeatureFlag.ENABLE_SCI_BOOKMARKS);
+
     const contentId = (url?.includes("/questions/") || url?.includes("/concepts/")) && url.split("/").slice(-1)[0];
 
     const isItem = typedProps.alviType === "item";
@@ -264,7 +267,7 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
                     {isQuiz && <Col md={6} className="d-none d-md-flex align-items-center justify-content-end">
                         <QuizLinks previewQuizUrl={typedProps.previewQuizUrl} quizButton={typedProps.quizButton}/> 
                     </Col>}
-                    {isItem && contentId && typedProps.allowBookmarking && isLoggedIn(user) && <button 
+                    {isItem && contentId && typedProps.allowBookmarking && isLoggedIn(user) && bookmarksFeatureFlag && <button 
                         className={classNames("alvi-bookmark", {"saved": isBookmarked(contentId)})} 
                         onClick={() => bookmarkItem(contentId)}
                     /> }
diff --git a/src/app/components/site/phy/NavigationMenuPhy.tsx b/src/app/components/site/phy/NavigationMenuPhy.tsx
index 892a660032..ad7329bf6b 100644
--- a/src/app/components/site/phy/NavigationMenuPhy.tsx
+++ b/src/app/components/site/phy/NavigationMenuPhy.tsx
@@ -10,6 +10,7 @@ import { useAssignmentsCount } from "../../navigation/NavigationBar";
 import { Link, useNavigate } from "react-router-dom";
 import { HoverableNavigationContext, PageContextState } from "../../../../IsaacAppTypes";
 import max from "lodash/max";
+import { FeatureFlag, FeatureFlagWrapper } from "../../../services/featureFlag";
 
 interface NavigationDropdownProps extends Omit<DropdownProps, "title"> {
     title: React.ReactNode;
@@ -312,9 +313,11 @@ const ContentNavProfile = ({toggleMenu}: {toggleMenu: () => void}) => {
                             <NavigationItemClose href={PATHS.MY_GAMEBOARDS}>
                                 My question decks
                             </NavigationItemClose>
-                            <NavigationItemClose href={PATHS.BOOKMARKS}>
-                                My bookmarks
-                            </NavigationItemClose>
+                            <FeatureFlagWrapper flag={FeatureFlag.ENABLE_SCI_BOOKMARKS}>
+                                <NavigationItemClose href={PATHS.BOOKMARKS}>
+                                    My bookmarks
+                                </NavigationItemClose>
+                            </FeatureFlagWrapper>
                             <NavigationItemClose href="/assignments" className="d-flex align-items-center">
                                 My assignments
                                 {assignmentsCount > 0 && <span className="badge bg-primary rounded-5 ms-2 h-max-content">{assignmentsCount > 99 ? "99+" : assignmentsCount}</span>}
diff --git a/src/app/components/site/phy/RoutesPhy.tsx b/src/app/components/site/phy/RoutesPhy.tsx
index f2e5b0c80a..97eb873c8d 100644
--- a/src/app/components/site/phy/RoutesPhy.tsx
+++ b/src/app/components/site/phy/RoutesPhy.tsx
@@ -46,6 +46,8 @@ import { Navigate, Route } from "react-router";
 import { Generic } from "../../pages/Generic";
 import { NavigateWithSlug } from "../../navigation/NavigateWithSlug";
 import { MyBookmarks } from "../../pages/MyBookmarks";
+import { FeatureFlag, FeatureFlagWrapper } from "../../../services/featureFlag";
+import { NotFound } from "../../pages/NotFound";
 
 const Equality = lazy(() => import('../../pages/Equality'));
 const EventDetails = lazy(() => import('../../pages/EventDetails'));
@@ -157,7 +159,10 @@ export const RoutesPhy = [
     <Route key={key++} path="/concepts" element={<Concepts />} />,
 
     // Bookmarks
-    <Route key={key++} path="/bookmarks" element={<RequireAuth auth={isLoggedIn} element={<MyBookmarks />} />} />,
+    <Route key={key++} path="/bookmarks" element={<FeatureFlagWrapper flag={FeatureFlag.ENABLE_SCI_BOOKMARKS}
+        onSet={<RequireAuth auth={isLoggedIn} element={<MyBookmarks />} />}
+        onUnset={<NotFound />}
+    />} />,
 
     // Static pages
     <Route key={key++} path="/about" element={<Generic pageIdOverride={"about_us_index"} />} />,
diff --git a/src/app/services/featureFlag.tsx b/src/app/services/featureFlag.tsx
index ed43dbd583..64b3088895 100644
--- a/src/app/services/featureFlag.tsx
+++ b/src/app/services/featureFlag.tsx
@@ -9,6 +9,7 @@ import { StyledTripleToggle } from "../components/elements/inputs/StyledMultiTog
 export enum FeatureFlag {
     _TEST_FEATURE = "_TEST_FEATURE", // used for testing; do not remove
     ENABLE_ADA_SIDEBARS = "ENABLE_ADA_SIDEBARS",
+    ENABLE_SCI_BOOKMARKS = "ENABLE_SCI_BOOKMARKS",
 }
 
 const loadOverridesFromStorage = (): Partial<Record<FeatureFlag, boolean>> => {
@@ -37,6 +38,7 @@ const useFlags = () : Record<FeatureFlag, boolean> => {
         // default values
         [FeatureFlag._TEST_FEATURE]: isNonProd,
         [FeatureFlag.ENABLE_ADA_SIDEBARS]: false,
+        [FeatureFlag.ENABLE_SCI_BOOKMARKS]: false,
 
         // overrides
         ...overrides

From f12aeefd09d217b782477c67d42d64eba39eb098 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Thu, 23 Apr 2026 15:23:20 +0100
Subject: [PATCH 14/17] Update bookmarks API

---
 src/app/state/slices/api/bookmarksApi.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/app/state/slices/api/bookmarksApi.ts b/src/app/state/slices/api/bookmarksApi.ts
index 756f77c4f0..1a578d95c3 100644
--- a/src/app/state/slices/api/bookmarksApi.ts
+++ b/src/app/state/slices/api/bookmarksApi.ts
@@ -13,17 +13,15 @@ export const bookmarksApi = isaacApi.enhanceEndpoints({addTagTypes: ["Bookmarks"
         }),
         bookmarkItem: build.mutation<void, {content_id: string}>({
             query: ({content_id}) => ({
-                url: "/bookmarks",
+                url: `/bookmarks/${encodeURIComponent(content_id)}`,
                 method: "POST",
-                params: {content_id}
             }),
             invalidatesTags: ["Bookmarks"],
         }),
         deleteBookmark: build.mutation<void, {content_id: string}>({
             query: ({content_id}) => ({
-                url: "/bookmarks",
+                url: `/bookmarks/${encodeURIComponent(content_id)}`,
                 method: "DELETE",
-                params: {content_id}
             }),
             invalidatesTags: ["Bookmarks"],
         }),

From d9a8f925d979eb6fc0f1ea0bbf9e95a2f9434fc8 Mon Sep 17 00:00:00 2001
From: Jaycie Brown <jeab2@cam.ac.uk>
Date: Tue, 28 Apr 2026 16:50:41 +0100
Subject: [PATCH 15/17] Remove duplication of My Bookmarks sidebar button

---
 src/app/components/pages/MyBookmarks.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/pages/MyBookmarks.tsx b/src/app/components/pages/MyBookmarks.tsx
index 9b98fe7b28..5829c49d73 100644
--- a/src/app/components/pages/MyBookmarks.tsx
+++ b/src/app/components/pages/MyBookmarks.tsx
@@ -32,7 +32,7 @@ export const MyBookmarks = () => {
         />}
     >
 
-        <PageMetadata noTitle showSidebarButton sidebarInTitle>
+        <PageMetadata noTitle>
             <PageFragment fragmentId="help_toptext_bookmarks" />
         </PageMetadata>
 

From c1161ef957fbc0fc869d42a59c856dd1b4a276eb Mon Sep 17 00:00:00 2001
From: Jaycie Brown <jeab2@cam.ac.uk>
Date: Tue, 28 Apr 2026 16:51:04 +0100
Subject: [PATCH 16/17] Add custom My Bookmarks page icon

---
 public/assets/phy/icons/redesign/page-bookmarks-bg.svg | 8 ++++++++
 public/assets/phy/icons/redesign/page-bookmarks-fg.svg | 5 +++++
 src/app/components/pages/MyBookmarks.tsx               | 2 +-
 src/scss/phy/icons.scss                                | 8 ++++++++
 4 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 public/assets/phy/icons/redesign/page-bookmarks-bg.svg
 create mode 100644 public/assets/phy/icons/redesign/page-bookmarks-fg.svg

diff --git a/public/assets/phy/icons/redesign/page-bookmarks-bg.svg b/public/assets/phy/icons/redesign/page-bookmarks-bg.svg
new file mode 100644
index 0000000000..228a5c63c3
--- /dev/null
+++ b/public/assets/phy/icons/redesign/page-bookmarks-bg.svg
@@ -0,0 +1,8 @@
+<svg width="100" height="100" viewBox="0 0 99 99" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;">
+    <g transform="matrix(3.475843,0,0,3.475843,10.518074,-1.481926)">
+        <path d="M5.747,5.03L5.747,2.38L20.708,2.38L20.708,23.964L16.968,21.656" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:1.78px;"/>
+    </g>
+    <g transform="matrix(3.475843,0,0,3.475843,-2.481926,9.518074)">
+        <path d="M5.747,23.957L5.747,2.38L20.708,2.38L20.708,23.964L13.085,19.066L5.747,23.957Z" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:1.78px;"/>
+    </g>
+</svg>
diff --git a/public/assets/phy/icons/redesign/page-bookmarks-fg.svg b/public/assets/phy/icons/redesign/page-bookmarks-fg.svg
new file mode 100644
index 0000000000..e70b61e062
--- /dev/null
+++ b/public/assets/phy/icons/redesign/page-bookmarks-fg.svg
@@ -0,0 +1,5 @@
+<svg width="100" height="100" viewBox="0 0 99 99" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;">
+    <g transform="matrix(0.939931,0,0,0.939931,1.629484,5.388055)">
+        <path d="M27.159,23.108L27.127,23.108L27.127,73.051" style="fill:none;stroke:rgb(148,76,190);stroke-width:6.53px;stroke-linecap:round;stroke-miterlimit:1.5;"/>
+    </g>
+</svg>
diff --git a/src/app/components/pages/MyBookmarks.tsx b/src/app/components/pages/MyBookmarks.tsx
index 5829c49d73..e21712a10e 100644
--- a/src/app/components/pages/MyBookmarks.tsx
+++ b/src/app/components/pages/MyBookmarks.tsx
@@ -18,7 +18,7 @@ export const MyBookmarks = () => {
     const [sortOrder, setSortOrder] = useState<BookmarksOrder>(BookmarksOrder.date);
 
     return <PageContainer
-        pageTitle={<TitleAndBreadcrumb currentPageTitle="My bookmarks" icon={{type: "icon", icon: "icon-book"}} />}
+        pageTitle={<TitleAndBreadcrumb currentPageTitle="My bookmarks" icon={{type: "icon", icon: "icon-my-bookmarks"}} />}
         sidebar={<MyBookmarksSidebar 
             searchText={searchText} 
             setSearchText={setSearchText}
diff --git a/src/scss/phy/icons.scss b/src/scss/phy/icons.scss
index 10994f1bd2..c83501e6fc 100644
--- a/src/scss/phy/icons.scss
+++ b/src/scss/phy/icons.scss
@@ -293,6 +293,14 @@
   )
 }
 
+.icon-my-bookmarks {
+  @include svg-icon-layered(
+    '/assets/phy/icons/redesign/page-bookmarks-fg.svg',
+    '/assets/phy/icons/redesign/page-bookmarks-bg.svg',
+    var(--icon-size), var(--icon-size), var(--mask-size, 58%)
+  );
+}
+
 .icon-wildcard {
   @include svg-icon-layered(
     '/assets/phy/icons/redesign/page-revision-fg.svg',

From c744a9444e9cfa42936566534e641b57d5398dfe Mon Sep 17 00:00:00 2001
From: Jaycie Brown <jeab2@cam.ac.uk>
Date: Tue, 28 Apr 2026 16:51:24 +0100
Subject: [PATCH 17/17] Fix type in content summary to gameboard item converter

---
 src/app/services/gameboardBuilder.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/services/gameboardBuilder.ts b/src/app/services/gameboardBuilder.ts
index a0ca98dd0b..c97983a143 100644
--- a/src/app/services/gameboardBuilder.ts
+++ b/src/app/services/gameboardBuilder.ts
@@ -40,6 +40,7 @@ export const convertContentSummaryToGameboardItem = (question: ContentSummary):
         level: undefined,
         url: undefined,
         className: undefined,
+        bookmarked: undefined,
     };
     const newQuestion = {
         ...question,