diff --git a/src/app/components/elements/DraggableListViewContainer.tsx b/src/app/components/elements/DraggableListViewContainer.tsx
new file mode 100644
index 0000000000..35ee2802af
--- /dev/null
+++ b/src/app/components/elements/DraggableListViewContainer.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { DragDropContext, Droppable, DropResult } from "@hello-pangea/dnd";
+
+interface DraggableListViewContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    reorder: (result: DropResult<string>) => void;
+}
+
+const DraggableListViewContainer = ({ children, reorder, ...rest }: DraggableListViewContainerProps) => {
+    return <DragDropContext onDragEnd={reorder}>
+        <Droppable droppableId="droppable">
+            {(providedDrop) => {
+                return <div ref={providedDrop.innerRef} {...rest}>
+                    {children}
+                    {providedDrop.placeholder}
+                </div>;
+            }}
+        </Droppable>
+    </DragDropContext>;
+};
+
+export default DraggableListViewContainer;
diff --git a/src/app/components/elements/DraggableListViewItemWrapper.tsx b/src/app/components/elements/DraggableListViewItemWrapper.tsx
new file mode 100644
index 0000000000..d149f80029
--- /dev/null
+++ b/src/app/components/elements/DraggableListViewItemWrapper.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { Draggable } from "@hello-pangea/dnd";
+import classNames from "classnames";
+import { isAda } from "../../services";
+
+interface DraggableListViewWrapperProps extends React.HTMLAttributes<HTMLLIElement> {
+    id: string;
+    index: number;
+}
+
+const DraggableListViewWrapper = ({ id, index, className, children, ...rest }: DraggableListViewWrapperProps) => {
+    return <Draggable key={id} draggableId={id ?? ""} index={index ?? -1}>
+        {(providedDrag, snapshot) => {
+            return <li 
+                {...rest}
+                ref={providedDrag.innerRef}
+                className={classNames(
+                    "d-flex draggable-list-view-accessible",
+                    className,
+                    {"list-group-item align-items-center": isAda},
+                    snapshot.isDragging ? "bg-white" : "bg-transparent"
+                )}
+                {...providedDrag.draggableProps} {...providedDrag.dragHandleProps}
+            >
+                {children}
+            </li>;
+        }}
+    </Draggable>;
+};
+
+export default DraggableListViewWrapper;
diff --git a/src/app/components/elements/GameboardBuilderRow.tsx b/src/app/components/elements/GameboardBuilderTableRow.tsx
similarity index 57%
rename from src/app/components/elements/GameboardBuilderRow.tsx
rename to src/app/components/elements/GameboardBuilderTableRow.tsx
index e260becabf..6fc2513bac 100644
--- a/src/app/components/elements/GameboardBuilderRow.tsx
+++ b/src/app/components/elements/GameboardBuilderTableRow.tsx
@@ -10,14 +10,11 @@ import {
     stageLabelMap,
     TAG_ID,
     TAG_LEVEL,
-    isPhy
+    isPhy,
+    GameboardBuilderRowInterface,
+    handleBuilderRowChange
 } from "../../services";
 import React from "react";
-import {AudienceContext} from "../../../IsaacApiTypes";
-import {closeActiveModal, openActiveModal, useAppDispatch} from "../../state";
-import {DraggableProvided, DraggableStateSnapshot} from "@hello-pangea/dnd";
-import {Question} from "../pages/Question";
-import {ContentSummary, GameboardBuilderQuestions, GameboardBuilderQuestionsStackProps} from "../../../IsaacAppTypes";
 import {DifficultyIcons} from "./svg/DifficultyIcons";
 import classNames from "classnames";
 import { Spacer } from "./Spacer";
@@ -27,89 +24,46 @@ import { Markup } from "./markup";
 import { ContentPropertyTags } from "./ContentPropertyTags";
 import { IconButton } from "./AffixButton";
 import { CrossTopicQuestionIndicator } from "./CrossTopicQuestionIndicator";
+import { PreviewQuestionButton } from "./PreviewButton";
 
-interface GameboardBuilderRowInterface {
-    provided?: DraggableProvided;
-    snapshot?: DraggableStateSnapshot;
-    question: ContentSummary;
-    currentQuestions: GameboardBuilderQuestions;
-    undoStack: GameboardBuilderQuestionsStackProps;
-    redoStack: GameboardBuilderQuestionsStackProps;
-    creationContext?: AudienceContext;
-}
-
-const GameboardBuilderRow = (
-    {provided, snapshot: _snapshot, question, undoStack, currentQuestions, redoStack, creationContext}: GameboardBuilderRowInterface
+const GameboardBuilderTableRow = (
+    {isDnd, snapshot: _snapshot, question, undoStack, currentQuestions, redoStack, creationContext}: GameboardBuilderRowInterface
 ) => {
-    const dispatch = useAppDispatch();
-
     const tagIcon = (tag: string) => {
         return <span key={tag} className={classNames("badge rounded-pill mx-1", siteSpecific("text-bg-warning", "text-bg-primary"))}>{tag}</span>;
     };
 
-    const openQuestionModal = (urlQuestionId: string) => {
-        dispatch(openActiveModal({
-            closeAction: () => {dispatch(closeActiveModal());}, size: "xl",
-            title: "Question preview", body: <Question questionIdOverride={urlQuestionId} preview />
-        }));
-    };
-
     const audienceViews = determineAudienceViews(question.audience, creationContext);
     const filteredAudienceViews = audienceViews.length === 0 ? [{stage: undefined, difficulty: undefined}] : filterAudienceViewsByProperties(audienceViews, AUDIENCE_DISPLAY_FIELDS);
 
     const cellClasses = "text-start align-middle";
     const isSelected = question.id !== undefined && currentQuestions.selectedQuestions.has(question.id);
 
-    const handleCheckboxChange = () => {
-        if (question.id) {
-            const newSelectedQuestions = new Map(currentQuestions.selectedQuestions);
-            const newQuestionOrder = [...currentQuestions.questionOrder];
-            if (newSelectedQuestions.has(question.id)) {
-                newSelectedQuestions.delete(question.id);
-                newQuestionOrder.splice(newQuestionOrder.indexOf(question.id), 1);
-            } else {
-                newSelectedQuestions.set(question.id, {...question, creationContext});
-                newQuestionOrder.push(question.id);
-            }
-            currentQuestions.setSelectedQuestions(newSelectedQuestions);
-            currentQuestions.setQuestionOrder(newQuestionOrder);
-            if (provided) {
-                undoStack.push({questionOrder: currentQuestions.questionOrder, selectedQuestions: currentQuestions.selectedQuestions});
-                redoStack.clear();
-            }
-        }
-    };
-
     return filteredAudienceViews.map((view, i, arr) => <tr key={`${question.id} ${i}`}>
         {i === 0 && <>
             <td rowSpan={arr.length} className="w-5 text-center align-middle">
                 <div className="d-flex justify-content-center">
-                    {isAda && provided
-                        ? <IconButton icon="icon-bin action-button-small" color="keyline" className="action-button" aria-label="Delete quiz" title="Delete quiz" onClick={handleCheckboxChange}/>
+                    {isAda && isDnd
+                        ? <IconButton icon="icon-bin action-button-small" color="keyline" className="action-button" aria-label="Delete quiz" title="Delete quiz" onClick={() => handleBuilderRowChange({ isDnd, question, currentQuestions, undoStack, redoStack, creationContext })}/>
                         : <StyledCheckbox
-                            id={`${provided ? "gameboard-builder" : "question-search-modal"}-include-${question.id}`}
+                            id={`${isDnd ? "gameboard-builder" : "question-search-modal"}-include-${question.id}`}
                             aria-label={!isSelected ? "Select question" : "Deselect question"}
                             title={!isSelected ? "Select question" : "Deselect question"}
                             color="primary"
                             checked={isSelected}
-                            onChange={handleCheckboxChange}
+                            onChange={() => handleBuilderRowChange({ isDnd, question, currentQuestions, undoStack, redoStack, creationContext })}
                         />}
                 </div>
             </td>
             <td rowSpan={arr.length} className={classNames(cellClasses, siteSpecific("w-40", "w-30"))}>
                 <div className="d-flex">
-                    {provided && <img src="/assets/common/icons/drag_indicator.svg" alt="Drag to reorder" className="me-1 grab-cursor" />}
+                    {isDnd && <img src="/assets/common/icons/drag_indicator.svg" alt="Drag to reorder" className="me-1 grab-cursor" />}
                     <div>
                         <div className="d-flex">
-                            <a className="me-2 text-wrap" href={`/questions/${question.id}`} target="_blank" rel="noopener noreferrer" title="Preview question in new tab">
+                            <a className="text-wrap" href={`/questions/${question.id}`} target="_blank" rel="noopener noreferrer" title="Preview question in new tab">
                                 <Markup encoding="latex">{generateQuestionTitle(question)}</Markup>
                             </a>
-                            <button
-                                type="button" title="Preview question in modal" className="pointer-cursor align-middle new-tab p-0" 
-                                onClick={() => question.id && openQuestionModal(question.id)}
-                            >
-                                <img src="/assets/common/icons/new-tab.svg" alt="Preview question" />
-                            </button>
+                            <PreviewQuestionButton id={question.id} />
                             <Spacer />
                         </div>
                         <ContentPropertyTags className="my-1" deprecated={question.deprecated} supersededByPath={question.supersededBy ? `/questions/${question.supersededBy}` : undefined} tags={question.tags} />
@@ -143,4 +97,4 @@ const GameboardBuilderRow = (
     </tr>);
 };
 
-export default GameboardBuilderRow;
+export default GameboardBuilderTableRow;
diff --git a/src/app/components/elements/PreviewButton.tsx b/src/app/components/elements/PreviewButton.tsx
new file mode 100644
index 0000000000..37a8356545
--- /dev/null
+++ b/src/app/components/elements/PreviewButton.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { closeActiveModal, openActiveModal, useAppDispatch } from "../../state";
+import { Question } from "../pages/Question";
+
+export const PreviewQuestionButton = ({id}: {id?: string}) => {
+    const dispatch = useAppDispatch();
+    const openQuestionModal = (urlQuestionId: string) => {
+        dispatch(openActiveModal({
+            closeAction: () => {dispatch(closeActiveModal());}, size: "xl",
+            title: "Question preview", body: <Question questionIdOverride={urlQuestionId} preview />
+        }));
+    };
+
+    if (!id) return null;
+
+    return <button
+        type="button" title="Preview question in modal" className="pointer-cursor align-middle new-tab p-0 ms-2" 
+        onClick={() => id && openQuestionModal(id)}
+    >
+        <img src="/assets/common/icons/new-tab.svg" alt="Preview question" />
+    </button>;
+};
diff --git a/src/app/components/elements/list-groups/AbstractListViewItem.tsx b/src/app/components/elements/list-groups/AbstractListViewItem.tsx
index 0dd3716fd9..62fe2bce8e 100644
--- a/src/app/components/elements/list-groups/AbstractListViewItem.tsx
+++ b/src/app/components/elements/list-groups/AbstractListViewItem.tsx
@@ -18,6 +18,7 @@ import { CrossTopicQuestionIndicator } from "../CrossTopicQuestionIndicator";
 import { SupersededDeprecatedBoardContentWarning } from "../../navigation/SupersededDeprecatedWarning";
 import { useBookmarks } from "../../../services/bookmarks";
 import { FeatureFlag, useFeatureFlag } from "../../../services/featureFlag";
+import { PreviewQuestionButton } from "../PreviewButton";
 
 const Breadcrumb = ({breadcrumb}: {breadcrumb: string[]}) => {
     return <>
@@ -137,6 +138,7 @@ type ALVIType = {
     hasCaret?: boolean;
     linkTags?: ListViewTagProps[];
     allowBookmarking?: boolean; // if set, displays a bookmark for logged-in users that will save the alvi to the user's bookmarks on click
+    disableRedirect?: boolean; // the URL is required for bookmarks to show; if we do not want the item to redirect on click, enable
 } | {
     // quizzes – have exclusive "preview" and "view test" buttons
     alviType: "quiz";
@@ -154,6 +156,9 @@ type ALVIType = {
     deprecated?: boolean;
     supersededByPath?: string;
     audienceViews?: ViewingContext[];
+    allowBookmarking?: boolean; // as in item type
+    disableRedirect?: boolean; // as in item type
+    questionPreviewId?: string; // shows a preview button next to the title; preview opens in modal
 };
 
 type ALVILayout = {
@@ -200,14 +205,14 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
     const isCrossTopic = isAda && tags?.includes("cross_topic");
     const isLLM = tags?.includes("llm_question_page");
 
-    const flatLayout = style === "flat" && above['md'](deviceSize);
+    const flatLayout = style === "flat" && above['lg'](deviceSize);
     const stackedLayout = style === "stacked" || below["sm"](deviceSize);
     const wrapTitleTags = below["xs"](deviceSize);
 
     const cardBody = <>
         <div className="w-100 d-flex flex-row">
             <Col className={classNames("d-flex flex-grow-1", {"mt-3": isCard})}>
-                <div className={classNames("position-relative", {"question-progress-icon": isAda})}>
+                <div className={classNames("position-relative", {"question-progress-icon": isAda, "d-flex vertical-center": flatLayout})}>
                     {icon && <div className="inner-progress-icon">
                         <TitleIcon icon={icon} />
                         {icon.label && isAda && above['sm'](deviceSize) && <div className="icon-title mt-1">{icon.label}</div>}
@@ -219,19 +224,22 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
                 </div>
                 <div className={classNames("align-content-center text-overflow-ellipsis", siteSpecific("pe-2", "py-3"))}>
                     <div className={classNames("text-wrap mt-n1", {"d-flex": !wrapTitleTags})}>
-                        {url && !isDisabled
-                            ? (url.startsWith("http")
-                                ? <ExternalLink href={url} className={classNames("alvi-title", {"question-link-title": isPhy || !isQuiz})}>
+                        <>
+                            {url && !isDisabled && !("disableRedirect" in typedProps && typedProps.disableRedirect)
+                                ? (url.startsWith("http")
+                                    ? <ExternalLink href={url} className={classNames("alvi-title", {"question-link-title": isPhy || !isQuiz, "title-small": flatLayout})}>
+                                        <Markup encoding="latex">{title}</Markup>
+                                    </ExternalLink>
+                                    : <Link to={url} className={classNames("alvi-title", {"question-link-title": isPhy || !isQuiz, "title-small": flatLayout})}>
+                                        <Markup encoding="latex">{title}</Markup>
+                                    </Link>
+                                )
+                                : <span className={classNames("alvi-title", {"question-link-title": isPhy || !isQuiz, "title-small": flatLayout})}>
                                     <Markup encoding="latex">{title}</Markup>
-                                </ExternalLink>
-                                : <Link to={url} className={classNames("alvi-title", {"question-link-title": isPhy || !isQuiz})}>
-                                    <Markup encoding="latex">{title}</Markup>
-                                </Link>
-                            )
-                            : <span className={classNames("alvi-title", {"question-link-title": isPhy || !isQuiz})}>
-                                <Markup encoding="latex">{title}</Markup>
-                            </span>
-                        }
+                                </span>
+                            }
+                            {isBuilder && typedProps.questionPreviewId && <PreviewQuestionButton id={typedProps.questionPreviewId} />}
+                        </>
                         {isItem && <>
                             {typedProps.quizTag && <span className="quiz-level-1-tag ms-sm-2">{typedProps.quizTag}</span>}
                             <ContentPropertyTags 
@@ -242,12 +250,14 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
                             />
                         </>}
                     </div>
-                    {subtitle && <div className="small text-muted text-wrap">
-                        <Markup encoding="latex">{subtitle}</Markup>
-                    </div>}
-                    {breadcrumb && !(flatLayout && subtitle) && <span className="hierarchy-tags d-flex flex-wrap mw-auto">
-                        <Breadcrumb breadcrumb={breadcrumb}/>
-                    </span>}
+                    {!flatLayout && <>
+                        {subtitle && <div className="small text-muted text-wrap">
+                            <Markup encoding="latex">{subtitle}</Markup>
+                        </div>}
+                        {breadcrumb && <span className="hierarchy-tags d-flex flex-wrap mw-auto">
+                            <Breadcrumb breadcrumb={breadcrumb}/>
+                        </span>}
+                    </>}
                     {(isItem || isBuilder) && stackedLayout && typedProps.audienceViews && <div className="d-flex mt-1"> 
                         <StageAndDifficultySummaryIcons audienceViews={typedProps.audienceViews} stack/> 
                     </div>}
@@ -272,7 +282,16 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
             {!stackedLayout &&
                 <>
                     {isPhy && isItem && typedProps.status && typedProps.status !== CompletionState.ALL_CORRECT && <StatusDisplay status={typedProps.status} showText className="ms-2 me-3" />}
-                    {(isItem || isBuilder) && typedProps.audienceViews && <div className={classNames("d-none d-md-flex justify-content-end wf-13", {"list-view-border": typedProps.audienceViews.length > 0})}>
+                    {flatLayout && (subtitle || breadcrumb) && <div className="list-view-border wf-10 pe-3 d-flex align-items-center">
+                        {subtitle && <div className="small text-muted text-wrap">
+                            <Markup encoding="latex">{subtitle}</Markup>
+                        </div>}
+                        {/* additional `&& !subtitle` as compared to stacked, as flat layout only has room for one */}
+                        {breadcrumb && !subtitle && <span className="hierarchy-tags d-flex flex-wrap mw-auto">
+                            <Breadcrumb breadcrumb={breadcrumb}/>
+                        </span>}
+                    </div>}
+                    {(isItem || isBuilder) && typedProps.audienceViews && <div className={classNames("d-none d-md-flex justify-content-end", siteSpecific("wf-13", "wf-16"), {"list-view-border": typedProps.audienceViews.length > 0})}>
                         <StageAndDifficultySummaryIcons audienceViews={typedProps.audienceViews} stack className={siteSpecific("w-100", "py-3 pe-3")}/> 
                     </div>}
                     {isGameboard && isTeacherOrAbove(user) && <Col md={6} className="d-none d-md-flex align-items-center justify-content-end">
@@ -281,10 +300,16 @@ 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) && bookmarksFeatureFlag && <button 
-                        className={classNames("alvi-bookmark", {"saved": isBookmarked(contentId)})} 
-                        onClick={() => bookmarkItem(contentId)}
-                    /> }
+                    {(isItem || isBuilder) && contentId && typedProps.allowBookmarking && isLoggedIn(user) && bookmarksFeatureFlag && <div
+                        className="alvi-bookmark-container"
+                    >
+                        <button 
+                            className={classNames("alvi-bookmark", {"saved": isBookmarked(contentId)})} 
+                            onClick={() => bookmarkItem(contentId)}
+                            type="button"
+                        /> 
+                    </div>
+                    }
                 </>
             }
             {isItem && typedProps.hasCaret && <div className="list-caret align-content-center" aria-hidden="true">
@@ -295,7 +320,13 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
     </>;
 
     return <ListGroupItem
-        className={classNames("content-summary-item", {"correct": isItem && typedProps.status === CompletionState.ALL_CORRECT}, className, state)} 
+        className={classNames(
+            "content-summary-item", 
+            {"thin": flatLayout},
+            {"correct": isItem && typedProps.status === CompletionState.ALL_CORRECT},
+            className, 
+            state
+        )} 
         data-bs-theme={subject && !isDisabled ? subject : "neutral"}
         data-testid={"list-view-item"}
         tag={componentTag}
diff --git a/src/app/components/elements/list-groups/ListView.tsx b/src/app/components/elements/list-groups/ListView.tsx
index 5328be1a83..617eba13c2 100644
--- a/src/app/components/elements/list-groups/ListView.tsx
+++ b/src/app/components/elements/list-groups/ListView.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import React, { lazy } from "react";
 import { AbstractListViewItem, AbstractListViewItemProps, AbstractListViewProps } from "./AbstractListViewItem";
 import { ShortcutResponse, ViewingContext } from "../../../../IsaacAppTypes";
 import { determineAudienceViews } from "../../../services/userViewingContext";
-import { BOOK_DETAIL_ID_SEPARATOR, DOCUMENT_TYPE, documentTypePathPrefix, getThemeFromContextAndTags, HUMAN_STATUS, ISAAC_BOOKS, isAda, isPhy, PATHS, QUESTION_STATUS_TO_ICON, SEARCH_RESULT_TYPE, Subject, TAG_ID, TAG_LEVEL, tags } from "../../../services";
-import { ListGroup } from "reactstrap";
+import { BOOK_DETAIL_ID_SEPARATOR, DOCUMENT_TYPE, documentTypePathPrefix, getThemeFromContextAndTags, HUMAN_STATUS, ISAAC_BOOKS, isAda, isPhy, PATHS, QUESTION_STATUS_TO_ICON, SEARCH_RESULT_TYPE, siteSpecific, Subject, TAG_ID, TAG_LEVEL, tags, useDeviceSize } from "../../../services";
+import { Button, ListGroup } from "reactstrap";
 import { AffixButton } from "../AffixButton";
 import { CompletionState, ContentSummaryDTO, GameboardDTO, IsaacWildcard, QuizSummaryDTO } from "../../../../IsaacApiTypes";
 import { Link } from "react-router-dom";
@@ -14,6 +14,8 @@ import { TitleIconProps } from "../PageTitle";
 import { IconProps } from "../svg/HexIcon";
 import { SetQuizzesModal } from "../modals/SetQuizzesModal";
 
+const DraggableListViewWrapper = lazy(() => import("../DraggableListViewItemWrapper"));
+
 function getBreadcrumb(tagIds: TAG_ID[] = []): string[] {
     return tags.getByIdsAsHierarchy(tagIds).filter((_t, i) => !isAda || i !== 0).map(tag => tag.title);
 }
@@ -327,7 +329,70 @@ export const BookDetailListViewItem = ({item, ...rest}: BookDetailListViewItemPr
     />;
 };
 
-export type CustomListViewItemProps = ListViewItemBaseProps<"item", "list" | "card"> & {
+type BuilderListViewItemProps = ListViewItemBaseProps<"builder", "list" | "card"> & {
+    item: ContentSummaryDTO;
+    index?: number;
+    totalItems?: number;
+    onMove?: (id: string, adjustment: number) => void;
+    onDelete?: (id: string) => void;
+}
+
+export const BuilderListViewItem = (props: BuilderListViewItemProps) => {
+    const { item, index, onDelete, onMove, totalItems, ...rest } = props;
+    // const breadcrumb = getBreadcrumb(item.tags as TAG_ID[]);
+    const audienceViews: ViewingContext[] = determineAudienceViews(item.audience);
+    const pageSubject = useAppSelector(selectors.pageContext.subject);
+    const itemSubject = getThemeFromContextAndTags(pageSubject, tags.getSubjectTags((item.tags || []) as TAG_ID[]).map(t => t.id));
+    const state = item.state ?? CompletionState.NOT_ATTEMPTED;
+
+    const topic = tags.getSpecifiedTag(TAG_LEVEL.topic, item.tags as TAG_ID[])?.title;
+
+    const icon: TitleIconProps = { type: "icon", label: "Question",
+        icon: isPhy
+            ? {name: "icon-question", size: "md"}
+            : {name: QUESTION_STATUS_TO_ICON[CompletionState.NOT_ATTEMPTED], size: "md", altText: classNames(HUMAN_STATUS[state], "question icon"), color: "tertiary", raw: true}
+    };
+
+    const deviceSize = useDeviceSize();
+
+    return <DraggableListViewWrapper id={item.id ?? ""} index={index ?? -1}>
+        {deviceSize !== "xs" && <div className="d-flex vertical-center rounded-2">
+            <div className="d-flex flex-column align-items-center">
+                <button type="button" title="Move question up" className="btn btn-blank p-0 m-0 border-0" onClick={() => onMove?.(item.id ?? "", -1)} disabled={index === 0}>
+                    <i className={classNames("icon icon-chevron-up", index === 0 ? "icon-color-disabled" : "icon-color-muted-hoverable icon-color-theme-on-hover" )} />
+                </button>
+                <img src="/assets/common/icons/drag_indicator.svg" alt="Drag to reorder" className="mx-1 grab-cursor" />
+                <button type="button" title="Move question down" className="btn btn-blank p-0 m-0 border-0" onClick={() => onMove?.(item.id ?? "", 1)} disabled={!!(totalItems && index === totalItems - 1)}>
+                    <i className={classNames("icon icon-chevron-down", totalItems && index === totalItems - 1 ? "icon-color-disabled" : "icon-color-muted-hoverable icon-color-theme-on-hover" )} />
+                </button>
+            </div>
+        </div>}
+        <AbstractListViewItem
+            {...rest}
+            componentTag={"div"}
+            icon={deviceSize !== "xs" ? icon : undefined}
+            title={item.title ?? ""}
+            subject={itemSubject !== "neutral" ? itemSubject : undefined}
+            url={item.url}
+            tags={item.tags}
+            deprecated={item.deprecated}
+            supersededByPath={item.supersededBy ? `/questions/${item.supersededBy}` : undefined}
+            style="flat"
+            subtitle={topic}
+            // subtitle={item.subtitle}
+            // breadcrumb={breadcrumb}
+            audienceViews={audienceViews}
+            className="flex-grow-1 align-content-center bg-transparent"
+            questionPreviewId={item.id}
+            disableRedirect
+        />
+        <Button className="delete-button" color={siteSpecific("solid", "keyline")} onClick={(e) => {if (item.id && onDelete) onDelete(item.id); e.preventDefault();}}>
+            <img src="/assets/common/icons/bin.svg" alt="Delete board"/>
+        </Button>
+    </DraggableListViewWrapper>;
+};
+
+export type CustomListViewItemProps = ListViewItemBaseProps<"item", "list" | "list" | "card"> & {
     item: Omit<Extract<AbstractListViewItemProps, {alviType: "item"}>, "alviType"> & {
         type?: string;
     }
@@ -356,6 +421,7 @@ type ListViewItemProps =
     | ShortcutListViewItemProps
     | BookIndexListViewItemProps
     | BookDetailListViewItemProps
+    | BuilderListViewItemProps
     | CustomListViewItemProps
 ;
 
@@ -459,6 +525,17 @@ export const ListView = <T extends {type?: string}, G extends alviTypes>(props:
                         }
                     });
                 }
+                case "builder": {
+                    const lviProps = {...rest, alviType: "builder" as const, alviLayout: "list" as const};
+                    return items.map((item, index) => {
+                        switch (item.type) {
+                            case (DOCUMENT_TYPE.QUESTION):
+                                return <BuilderListViewItem key={index} index={index} item={item} {...lviProps}  />;
+                            default:
+                                return failedToRender(item);
+                        }
+                    });
+                }
                 default:
                     return null;
             }
@@ -524,6 +601,17 @@ export const ListViewCards = <T extends {type?: string}, G extends alviTypes>(pr
                         }
                     });
                 }
+                case "builder": {
+                    const lviProps = {...rest, alviType: "builder" as const, alviLayout: "card" as const};
+                    return items.map((item, index) => {
+                        switch (item.type) {
+                            case (DOCUMENT_TYPE.QUESTION):
+                                return <BuilderListViewItem key={index} index={index} item={item} {...lviProps}  />;
+                            default:
+                                return failedToRender(item);
+                        }
+                    });
+                }
                 default:
                     return null;
             }
diff --git a/src/app/components/elements/modals/QuestionSearchModal.tsx b/src/app/components/elements/modals/QuestionSearchModal.tsx
index 5f2c8fbdab..a56a13e2a5 100644
--- a/src/app/components/elements/modals/QuestionSearchModal.tsx
+++ b/src/app/components/elements/modals/QuestionSearchModal.tsx
@@ -1,9 +1,10 @@
-import React, {lazy, useEffect, useMemo, useReducer, useState} from "react";
+import React, {lazy, startTransition, useEffect, useMemo, useReducer, useState} from "react";
 import {
     AppState,
     closeActiveModal,
     useAppDispatch,
     useAppSelector,
+    useGetBookmarksQuery,
     useSearchQuestionsQuery
 } from "../../../state";
 import debounce from "lodash/debounce";
@@ -18,7 +19,6 @@ import {
     groupTagSelectionsByParent,
     isAda,
     isPhy,
-    isStaff,
     Item,
     logEvent,
     searchResultIsPublic,
@@ -30,16 +30,19 @@ import {
     useUserViewingContext,
     ISAAC_BOOKS,
     TAG_LEVEL,
-    below,
-    useDeviceSize,
-    EXAM_BOARD, QUESTIONS_PER_GAMEBOARD
+    EXAM_BOARD, QUESTIONS_PER_GAMEBOARD,
+    simpleDifficultyLabelMap,
+    stageLabelMap,
+    TAG_ID,
+    itemise,
+    difficultyLabelMap
 } from "../../../services";
 import {ContentSummary, GameboardBuilderQuestions, GameboardBuilderQuestionsStackProps, QuestionSearchQuery} from "../../../../IsaacAppTypes";
 import {AudienceContext, ContentSummaryDTO, Difficulty, ExamBoard} from "../../../../IsaacApiTypes";
 import {Loading} from "../../handlers/IsaacSpinner";
 import {StyledSelect} from "../inputs/StyledSelect";
 import { SortItemHeader } from "../SortableItemHeader";
-import { Input, Row, Col, Label, Form, Table } from "reactstrap";
+import { Input, Row, Col, Label, Table } from "reactstrap";
 import classNames from "classnames";
 import { HierarchyFilterTreeList } from "../svg/HierarchyFilter";
 import { ChoiceTree, getChoiceTreeLeaves } from "../panels/QuestionFinderFilterPanel";
@@ -49,10 +52,13 @@ import { updateTopicChoices, initialiseListState, listStateReducer } from "../..
 import { HorizontalScroller } from "../inputs/HorizontalScroller";
 import { skipToken } from "@reduxjs/toolkit/query";
 import { ShowLoadingQuery } from "../../handlers/ShowLoadingQuery";
+import { FeatureFlag, FeatureFlagWrapper } from "../../../services/featureFlag";
+import { FilterSummary } from "../../pages/QuestionFinder";
+import { pruneTreeNode } from "../../../services/questionHierarchy";
 
-// Immediately load GameboardBuilderRow, but allow splitting
-const importGameboardBuilderRow = import("../GameboardBuilderRow");
-const GameboardBuilderRow = lazy(() => importGameboardBuilderRow);
+// Immediately load GameboardBuilderTableRow, but allow splitting
+const importGameboardBuilderTableRow = import("../GameboardBuilderTableRow");
+const GameboardBuilderTableRow = lazy(() => importGameboardBuilderTableRow);
 
 const selectStyle = {
     className: "basic-multi-select", classNamePrefix: "select",
@@ -69,11 +75,11 @@ export const QuestionSearchModal = (
     {currentQuestions, undoStack, redoStack, eventLog}: QuestionSearchModalProps) => {
     const dispatch = useAppDispatch();
     const userContext = useUserViewingContext();
-    const deviceSize = useDeviceSize();
     const sublistDelimiter = " >>> ";
 
     const [searchParams, setSearchParams] = useState<QuestionSearchQuery | typeof skipToken>(skipToken);
     const searchQuestionsQuery = useSearchQuestionsQuery(searchParams);
+    const searchBookmarksQuery = useGetBookmarksQuery();
 
     const [topicSelections, setTopicSelections] = useState<ChoiceTree[]>([]);
     const [searchTopics, setSearchTopics] = useState<string[]>([]);
@@ -97,6 +103,7 @@ export const QuestionSearchModal = (
     } : {}, [isBookSearch, searchStages, searchDifficulties, searchExamBoards]);
 
     const [searchFastTrack, setSearchFastTrack] = useState<boolean>(false);
+    const [searchBookmarks, setSearchBookmarks] = useState<boolean>(false);
 
     const [questionsSort, setQuestionsSort] = useState<Record<string, SortOrder>>({});
     const [selectedQuestions, setSelectedQuestions] = useState<Map<string, ContentSummary>>(new Map(currentQuestions.selectedQuestions));
@@ -111,18 +118,19 @@ export const QuestionSearchModal = (
             // Clear front-end sorting so as not to override ElasticSearch's match ranking
             setQuestionsSort({});
 
-            const isBookSearch = book.length > 0; // Tasty.
             if ([searchString, topics, book, stages, difficulties, examBoards].every(v => v.length === 0) && !fasttrack) {
                 // Nothing to search for
                 return setSearchParams(skipToken);
             }
 
-            const tags = (isBookSearch ? book : [...([topics].map((tags) => tags.join(" ")))].filter((query) => query != "")).join(",");
+            const topicTags = [...([topics].map((tags) => tags.join(" ")))].filter((query) => query != "").join(",");
+            const bookTags = book.join(",");
 
             setSearchParams({
                 querySource: "gameboardBuilder",
                 searchString: searchString || undefined,
-                tags: tags || undefined,
+                tags: topicTags,
+                books: bookTags,
                 stages: stages.join(",") || undefined,
                 difficulties: difficulties.join(",") || undefined,
                 examBoards: examBoards.join(",") || undefined,
@@ -149,7 +157,7 @@ export const QuestionSearchModal = (
         searchDebounce(searchQuestionName, searchTopics, searchExamBoards, searchBook, searchStages, searchDifficulties, searchFastTrack, 0);
     },[searchDebounce, searchQuestionName, searchTopics, searchExamBoards, searchBook, searchFastTrack, searchStages, searchDifficulties]);
 
-    const sortAndFilterBySearch = (questions: ContentSummaryDTO[]) => questions && sortQuestions(questionsSort, creationContext)(
+    const sortAndFilterBySearch = (questions: ContentSummaryDTO[]) => questions && sortQuestions({...questionsSort, ...(isBookSearch ? {book: SortOrder.ASC} : {})}, creationContext)(
         questions.filter(question => {
             const qIsPublic = searchResultIsPublic(question, user);
             if (isBookSearch) return qIsPublic;
@@ -161,7 +169,7 @@ export const QuestionSearchModal = (
         })
     );
 
-    const addSelectionsRow = <div className="d-sm-flex flex-xl-column align-items-center mt-2">
+    const addSelectionsRow = <div className="d-flex flex-column sticky-bottom align-items-center pt-3 pb-5 bg-white">
         <div className="flex-grow-1 mb-1">
             <strong className={classNames({"text-danger": selectedQuestions.size > QUESTIONS_PER_GAMEBOARD})}>
                 {`${selectedQuestions.size} question${selectedQuestions.size !== 1 ? "s" : ""} selected`}
@@ -193,133 +201,213 @@ export const QuestionSearchModal = (
         setSearchTopics(getChoiceTreeLeaves(topicSelections).map((s) => s.value));
     }, [topicSelections]);
 
-    return <Row>
-        <Col className="col-12 col-xl-3 mt-4">
-            <Row>
-                <Col className={classNames({"col-12 col-lg-6 col-xl-12": isPhy && !isBookSearch})}>
-                    {isAda && <CollapsibleList 
-                        title={<span className="ms-n3">Topic</span>} 
-                        expanded={listState.topics.state} 
-                        className="mb-3"
-                        toggle={() => listStateDispatch({type: "toggle", id: "topics", focus: below["md"](deviceSize)})}
-                    >
-                        {groupBaseTagOptions.map((tag, index) => (
-                            <CollapsibleList title={tag.label} asSubList
-                                expanded={listState[`topics ${sublistDelimiter} ${tag.label}`]?.state}
-                                toggle={() => listStateDispatch({type: "toggle", id: `topics ${sublistDelimiter} ${tag.label}`, focus: true})}
-                                key={index} tag={"li"}
-                            >
-                                {tag.options.map((topic, index) => (
-                                    <li className={classNames("w-100 ps-3 py-1", {"bg-white": isAda})} style={{listStyle: "none"}} key={index}>
-                                        <StyledCheckbox color="primary" checked={searchTopics.includes(topic.value)}
-                                            onChange={() => setSearchTopics(s => s.includes(topic.value) ? s.filter(v => v !== topic.value) : [...s, topic.value])}
-                                            label={<span>{topic.label}</span>} className="ps-3"/>
-                                    </li>))}
-                            </CollapsibleList>
-                        ))}
-                    </CollapsibleList>}
-                    {isPhy && <div className="mb-2">
-                        <Label htmlFor="question-search-book">Book</Label>
-                        <StyledSelect
-                            inputId="question-search-book" isClearable placeholder="None" {...selectStyle}
-                            onChange={selectOnChange(setSearchBook, true)}
-                            options={ISAAC_BOOKS.filter(b => !b.hidden).map(book => ({value: book.tag, label: book.shortTitle}))}
-                        />
-                    </div>}
-                    <div className={classNames("mb-2", {"d-none": isBookSearch})}>
-                        <Label htmlFor="question-search-stage">Stage</Label>
-                        <StyledSelect
-                            inputId="question-search-stage" isClearable isMulti placeholder="Any" {...selectStyle}
-                            options={getFilteredStageOptions()} onChange={selectOnChange(setSearchStages, true)}
-                        />
-                    </div>
-                    {isPhy && !isBookSearch && deviceSize !== "lg" && <div className="mb-2">
-                        <Label htmlFor="question-search-topic">Topic</Label>
-                        <HierarchyFilterTreeList root {...{
-                            inputId: "question-search-topic", tier: 0, index: TAG_LEVEL.subject,
-                            choices: topicChoices, selections: topicSelections, setSelections: setTopicSelections}}/>
-                    </div>}
-                    <div className={classNames("mb-2", {"d-none": isBookSearch})}>
-                        <Label htmlFor="question-search-difficulty">Difficulty</Label>
-                        <StyledSelect
-                            inputId="question-search-difficulty" isClearable isMulti placeholder="Any" {...selectStyle}
-                            options={DIFFICULTY_ICON_ITEM_OPTIONS} onChange={selectOnChange(setSearchDifficulties, true)}
-                        />
-                        {isAda && <>
-                            <Label className="mt-2" htmlFor="question-search-exam-board">Exam Board</Label>
-                            <StyledSelect
-                                inputId="question-search-exam-board" isClearable isMulti placeholder="Any" {...selectStyle}
-                                value={getFilteredExamBoardOptions({byStages: searchStages}).filter(o => searchExamBoards.includes(o.value))}
-                                options={getFilteredExamBoardOptions({byStages: searchStages})}
-                                onChange={(s: MultiValue<Item<ExamBoard>>) => selectOnChange(setSearchExamBoards, true)(s)}
-                            />
-                        </>}
-                    </div>
-                    <Label htmlFor="question-search-title">Search</Label>
-                    <Input id="question-search-title" className="mb-3"
-                        type="text"
-                        placeholder={siteSpecific("e.g. Man vs. Horse", "e.g. Creating an AST")}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                            setSearchQuestionName(e.target.value);
-                        }}
+    const selectionList: Item<TAG_ID>[] = getChoiceTreeLeaves(topicSelections);
+
+    const filterTags = useMemo(() => [
+        searchDifficulties.map(d => {return {value: d, label: simpleDifficultyLabelMap[d]};}),
+        searchStages.map(s => {return {value: s, label: stageLabelMap[s]};}),
+        searchBook.map(b => {const book = ISAAC_BOOKS.find(book => book.tag === b); return {value: b, label: book ? book.shortTitle : b};}),
+        selectionList,
+    ].flat(), [searchBook, searchDifficulties, searchStages, selectionList]);
+
+    const removeFilterTag = (filter: string) => {
+        if (searchStages.includes(filter as STAGE)) {
+            setSearchStages(searchStages.filter(f => f !== filter));
+        } else if (getChoiceTreeLeaves(topicSelections).some(leaf => leaf.value === filter)) {
+            setTopicSelections(pruneTreeNode(topicSelections, filter, true));
+        } else if (searchDifficulties.includes(filter as Difficulty)) {
+            setSearchDifficulties(searchDifficulties.filter(f => f !== filter));
+        } else if (searchExamBoards.includes(filter as ExamBoard)) {
+            setSearchExamBoards(searchExamBoards.filter(f => f !== filter));
+        } else if (searchBook.includes(filter)) {
+            setSearchBook(sb => sb.filter(f => f !== filter));
+        }
+    };
+
+    const clearFilters = () => {
+        setSearchDifficulties([]);
+        setSearchTopics([]);
+        setSearchExamBoards([]);
+        setSearchStages([]);
+        setSearchBook([]);
+        setTopicSelections([{}, {}, {}]);
+    };
+
+    // only allowing search for a single book makes sense in this context, but we track it as an array to align with the other filters
+    const selectedBook = searchBook.length > 0 ? ISAAC_BOOKS.find(b => b.tag === searchBook[0]) : undefined;
+
+    return <>
+        <Row>
+            <Col xs={siteSpecific(9, 12)}>
+                <Label htmlFor="question-search-title">Search</Label>
+                <Input id="question-search-title" className="mb-3"
+                    type="text"
+                    placeholder={siteSpecific("e.g. Man vs. Horse", "e.g. Creating an AST")}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setSearchQuestionName(e.target.value);
+                    }}
+                />
+            </Col>
+            {isPhy && <Col xs={3}>
+                <div className="mb-2">
+                    <Label htmlFor="question-search-book">Book</Label>
+                    <StyledSelect
+                        value={selectedBook ? {value: selectedBook.tag, label: selectedBook.shortTitle} : null}
+                        inputId="question-search-book" isClearable placeholder="None" {...selectStyle}
+                        onChange={selectOnChange(setSearchBook, true)}
+                        options={ISAAC_BOOKS.filter(b => !b.hidden).map(book => ({value: book.tag, label: book.shortTitle}))}
                     />
-                    {isPhy && isStaff(user) &&
-                        <Form className="mb-2">
-                            <Label check><input type="checkbox" checked={searchFastTrack} onChange={e => setSearchFastTrack(e.target.checked)} />{' '}Show FastTrack questions</Label>
-                        </Form>}
-                </Col>
-                {isPhy && !isBookSearch && deviceSize === "lg" && <Col className="col-6">
+                </div>
+            </Col>}
+        </Row>
+
+        <Row>
+            <Col xs={6} lg={4} className={classNames("mb-2")}>
+                <Label htmlFor="question-search-stage">Stage</Label>
+                <StyledSelect
+                    value={searchStages.map(s => itemise(s, stageLabelMap[s]))}
+                    inputId="question-search-stage" isClearable isMulti placeholder="Any" {...selectStyle}
+                    options={getFilteredStageOptions()} onChange={selectOnChange(setSearchStages, true)}
+                />
+            </Col>
+            <Col xs={6} lg={4} className={classNames("mb-2")}>
+                <Label htmlFor="question-search-difficulty">Difficulty</Label>
+                <StyledSelect
+                    value={searchDifficulties.map(d => itemise(d, difficultyLabelMap[d]))}
+                    inputId="question-search-difficulty" isClearable isMulti placeholder="Any" {...selectStyle}
+                    options={DIFFICULTY_ICON_ITEM_OPTIONS} onChange={selectOnChange(setSearchDifficulties, true)}
+                />
+            </Col>
+            {isAda && <Col xs={12} lg={4} className={classNames("mb-2")}>
+                <Label htmlFor="question-search-exam-board">Exam Board</Label>
+                <StyledSelect
+                    inputId="question-search-exam-board" isClearable isMulti placeholder="Any" {...selectStyle}
+                    value={getFilteredExamBoardOptions({byStages: searchStages}).filter(o => searchExamBoards.includes(o.value))}
+                    options={getFilteredExamBoardOptions({byStages: searchStages})}
+                    onChange={(s: MultiValue<Item<ExamBoard>>) => selectOnChange(setSearchExamBoards, true)(s)}
+                />
+            </Col>}
+        </Row>
+        <Row>
+            <Col className="d-flex flex-column col-12 col-xl-3 mt-2">
+
+                <FeatureFlagWrapper flag={FeatureFlag.ENABLE_SCI_BOOKMARKS}>
+                    <StyledCheckbox color="primary" checked={searchBookmarks} label={<span>Show bookmarked only</span>} onChange={e => {
+                        startTransition(() => {
+                            setSearchBookmarks(e.target.checked);
+                        });
+                    }} />
+                </FeatureFlagWrapper>
+
+                {isPhy && <>
+                    <StyledCheckbox color="primary" checked={searchFastTrack} label={<span>Show FastTrack questions</span>} onChange={e => {
+                        startTransition(() => {
+                            setSearchFastTrack(e.target.checked);
+                        });
+                    }} />
+                    <div className="section-divider" />
+                </>}
+
+                {isAda && <ul className="list-unstyled">
+                    {groupBaseTagOptions.map((tag, index) => (
+                        <CollapsibleList title={tag.label} asSubList
+                            expanded={listState[`topics ${sublistDelimiter} ${tag.label}`]?.state}
+                            toggle={() => listStateDispatch({type: "toggle", id: `topics ${sublistDelimiter} ${tag.label}`, focus: true})}
+                            key={index} tag={"li"}
+                        >
+                            {tag.options.map((topic, index) => (
+                                <li className={classNames("w-100 ps-3 py-1", {"bg-white": isAda})} style={{listStyle: "none"}} key={index}>
+                                    <StyledCheckbox color="primary" checked={searchTopics.includes(topic.value)}
+                                        onChange={() => setSearchTopics(s => s.includes(topic.value) ? s.filter(v => v !== topic.value) : [...s, topic.value])}
+                                        label={<span>{topic.label}</span>} className="ps-3"/>
+                                </li>
+                            ))}
+                        </CollapsibleList>
+                    ))}
+                </ul>}
+                {isPhy && <div className="mb-2">
                     <Label htmlFor="question-search-topic">Topic</Label>
                     <HierarchyFilterTreeList root {...{
                         inputId: "question-search-topic", tier: 0, index: TAG_LEVEL.subject,
                         choices: topicChoices, selections: topicSelections, setSelections: setTopicSelections}}/>
-                </Col>}
-            </Row>
-            {addSelectionsRow}
-        </Col>
-        <Col className="col-12 col-xl-9">
-            <HorizontalScroller enabled className="my-4">
-                <Table bordered className="my-0">
-                    <thead>
-                        <tr>
-                            <th className="w-5"> </th>
-                            <SortItemHeader<SortOrder>
-                                className={siteSpecific("w-40", "w-30")}
-                                setOrder={sortableTableHeaderUpdateState(questionsSort, setQuestionsSort, "title")}
-                                defaultOrder={SortOrder.ASC}
-                                reverseOrder={SortOrder.DESC}
-                                currentOrder={questionsSort['title']}
-                                alignment="start"
-                            >Question title</SortItemHeader>
-                            <th className={siteSpecific("w-25", "w-20")}>Topic</th>
-                            <th className="w-15">Stage</th>
-                            <th className="w-15">Difficulty</th>
-                            {isAda && <th className="w-15">Exam boards</th>}
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <ShowLoadingQuery
-                            query={searchQuestionsQuery}
-                            placeholder={<tr><td colSpan={isAda ? 6 : 5}><Loading/></td></tr>}
-                            defaultErrorTitle="Failed to load questions."
-                            thenRender={({results: questions}) => {
-                                if (!questions) return <></>;
-                                const sortedQuestions = sortAndFilterBySearch(questions);
-                                return sortedQuestions?.map(question =>
-                                    <GameboardBuilderRow
-                                        key={`question-search-modal-row-${question.id}`}
-                                        question={question}
-                                        currentQuestions={modalQuestions}
-                                        undoStack={undoStack}
-                                        redoStack={redoStack}
-                                        creationContext={creationContext}
-                                    />
-                                );
-                            }}
-                        />
-                    </tbody>
-                </Table>
-            </HorizontalScroller>
-        </Col>
-    </Row>;
+                </div>}
+
+                {/* required for sticky */}
+                <div className="flex-grow-1" />
+                {addSelectionsRow}
+
+            </Col>
+
+
+            <Col className="col-12 col-xl-9">
+
+                <FilterSummary filterTags={filterTags} removeFilterTag={removeFilterTag} clearFilters={clearFilters} />
+
+                <HorizontalScroller enabled className="my-4">
+                    <Table bordered className="my-0">
+                        <thead>
+                            <tr>
+                                <th className="w-5"> </th>
+                                <SortItemHeader<SortOrder>
+                                    className={siteSpecific("w-40", "w-30")}
+                                    setOrder={sortableTableHeaderUpdateState(questionsSort, setQuestionsSort, "title")}
+                                    defaultOrder={SortOrder.ASC}
+                                    reverseOrder={SortOrder.DESC}
+                                    currentOrder={questionsSort['title']}
+                                    alignment="start"
+                                >Question title</SortItemHeader>
+                                <th className={siteSpecific("w-25", "w-20")}>Topic</th>
+                                <th className="w-15">Stage</th>
+                                <th className="w-15">Difficulty</th>
+                                {isAda && <th className="w-15">Exam boards</th>}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {searchBookmarks
+                                ? <ShowLoadingQuery
+                                    query={searchBookmarksQuery}
+                                    placeholder={<tr><td colSpan={isAda ? 6 : 5}><Loading/></td></tr>}
+                                    defaultErrorTitle="Failed to load bookmarks."
+                                    thenRender={(bookmarks) => {
+                                        const questions = bookmarks.filter(b => b.type === "isaacQuestionPage");
+                                        questions.sort((a, b) => new Date(b?.bookmarked ?? 0).getTime() - new Date(a?.bookmarked ?? 0).getTime());
+                                        const sortedQuestions = sortAndFilterBySearch(questions);
+                                        return sortedQuestions?.map(question =>
+                                            <GameboardBuilderTableRow
+                                                key={`question-search-modal-row-${question.id}`}
+                                                question={question}
+                                                currentQuestions={modalQuestions}
+                                                undoStack={undoStack}
+                                                redoStack={redoStack}
+                                                creationContext={creationContext}
+                                            />
+                                        );
+                                    }}
+                                />
+                                : <ShowLoadingQuery
+                                    query={searchQuestionsQuery}
+                                    placeholder={<tr><td colSpan={isAda ? 6 : 5}><Loading/></td></tr>}
+                                    defaultErrorTitle="Failed to load questions."
+                                    thenRender={({results: questions}) => {
+                                        if (!questions) return <></>;
+                                        const sortedQuestions = sortAndFilterBySearch(questions);
+                                        return sortedQuestions?.map(question =>
+                                            <GameboardBuilderTableRow
+                                                key={`question-search-modal-row-${question.id}`}
+                                                question={question}
+                                                currentQuestions={modalQuestions}
+                                                undoStack={undoStack}
+                                                redoStack={redoStack}
+                                                creationContext={creationContext}
+                                            />
+                                        );
+                                    }}
+                                />
+                            }
+                        </tbody>
+                    </Table>
+                </HorizontalScroller>
+            </Col>
+        </Row>
+    </>;
 };
diff --git a/src/app/components/pages/GameboardBuilder.tsx b/src/app/components/pages/GameboardBuilder.tsx
index e2403622c2..2e08024405 100644
--- a/src/app/components/pages/GameboardBuilder.tsx
+++ b/src/app/components/pages/GameboardBuilder.tsx
@@ -23,18 +23,18 @@ import {
     Label,
     Row,
     Spinner,
-    Table
 } from "reactstrap";
 import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
 import {GameboardDTO, GameboardItem, RegisteredUserDTO} from "../../../IsaacApiTypes";
 import {QuestionSearchModal} from "../elements/modals/QuestionSearchModal";
-import {DragDropContext, Draggable, Droppable, DropResult} from "@hello-pangea/dnd";
+import {DropResult} from "@hello-pangea/dnd";
 import {GameboardCreatedModal} from "../elements/modals/GameboardCreatedModal";
 import {
     convertContentSummaryToGameboardItem,
     EXAM_BOARD,
     GAMEBOARD_UNDO_STACK_SIZE_LIMIT,
     getValue,
+    handleBuilderRowChange,
     isAda,
     isDefined,
     isStaff,
@@ -61,8 +61,9 @@ import {StyledSelect} from "../elements/inputs/StyledSelect";
 import {ExigentAlert} from "../elements/ExigentAlert";
 import { PageMetadata } from '../elements/PageMetadata';
 import {IconButton} from "../elements/AffixButton";
+import { ListView } from '../elements/list-groups/ListView';
 
-const GameboardBuilderRow = lazy(() => import("../elements/GameboardBuilderRow"));
+const DraggableListViewContainer = lazy(() => import('../elements/DraggableListViewContainer'));
 
 class GameboardBuilderQuestionsStack {
     questionOrderStack: string[][];
@@ -237,8 +238,10 @@ const GameboardBuilder = ({user}: {user: RegisteredUserDTO}) => {
 
     const reorder = (result: DropResult) => {
         if (result.destination) {
-            const [removed] = questionOrder.splice(result.source.index, 1);
-            questionOrder.splice(result.destination.index, 0, removed);
+            const newQuestionOrder = [...questionOrder];
+            const [removed] = newQuestionOrder.splice(result.source.index, 1);
+            newQuestionOrder.splice(result.destination.index, 0, removed);
+            setQuestionOrder(newQuestionOrder);
         }
     };
 
@@ -445,61 +448,33 @@ const GameboardBuilder = ({user}: {user: RegisteredUserDTO}) => {
                         </div>
                     </div>
 
-                    <div className={classNames({"is-invalid": submissionAttempted && !questionSetIsValid}, "mt-2 responsive vertical-scroll-shadow")}>
-                        <DragDropContext onDragEnd={reorder}>
-                            <Droppable droppableId="droppable">
-                                {(providedDrop) => {
-                                    return (
-                                        <Table className={"mb-0"} id={"gameboard-builder-questions"} bordered
-                                            innerRef={providedDrop.innerRef}>
-                                            <thead>
-                                                <tr className="border-top-0">
-                                                    <th className="w-5">{isAda && selectedQuestions.size > 0 && "Remove"}</th>
-                                                    <th className={siteSpecific("w-40", "w-30")}>Question title</th>
-                                                    <th className={siteSpecific("w-25", "w-20")}>Topic</th>
-                                                    <th className="w-15">Stage</th>
-                                                    <th className="w-15">Difficulty</th>
-                                                    {isAda && <th className="w-15">Exam boards</th>}
-                                                </tr>
-                                            </thead>
-                                            {questionOrder.map((questionId, index: number) => {
-                                                const question = selectedQuestions.get(questionId);
-                                                return question && question.id &&
-                                                        <Draggable key={question.id} draggableId={question.id}
-                                                            index={index}>
-                                                            {(providedDrag, snapshot) => {
-                                                                return <tbody
-                                                                    ref={providedDrag && providedDrag.innerRef}
-                                                                    className={classNames({"table-row-dragging": snapshot.isDragging})}
-                                                                    {...(providedDrag && providedDrag.draggableProps)} {...(providedDrag && providedDrag.dragHandleProps)}
-                                                                >
-                                                                    <GameboardBuilderRow
-                                                                        provided={providedDrag}
-                                                                        snapshot={snapshot}
-                                                                        key={`gameboard-builder-row-${question.id}`}
-                                                                        question={question}
-                                                                        currentQuestions={currentQuestions}
-                                                                        undoStack={undoStack}
-                                                                        redoStack={redoStack}
-                                                                        creationContext={question.creationContext}
-                                                                    />
-                                                                </tbody>;
-                                                            }}
-                                                        </Draggable>;
-                                            })}
-                                            <tbody>
-                                                {providedDrop.placeholder}
-                                                {selectedQuestions?.size === 0 && <tr>
-                                                    <td colSpan={20}>
-                                                    </td>
-                                                </tr>}
-                                            </tbody>
-                                        </Table>
-
-                                    );
+                    <div className={classNames({"is-invalid": submissionAttempted && !questionSetIsValid}, "mt-2 gameboard-builder-container vertical-scroll-shadow-subtle")}>
+                        <DraggableListViewContainer reorder={reorder}>
+                            {/* dragging here can be a little choppy on local development if browser cache is disabled! */}
+                            <ListView 
+                                id="gameboard-builder-questions"
+                                type="builder"
+                                style="flat"
+                                items={questionOrder.map((questionId) => selectedQuestions.get(questionId)).filter(isDefined)}
+                                totalItems={questionOrder.length}
+                                onMove={(id, adjustment) => {
+                                    const index = currentQuestions.questionOrder.findIndex(qId => qId === id);
+                                    if (index === -1) return;
+                                    if (index + adjustment < 0 || index + adjustment >= currentQuestions.questionOrder.length) return;
+                                    const newQuestionOrder = [...currentQuestions.questionOrder];
+                                    const [removed] = newQuestionOrder.splice(index, 1);
+                                    newQuestionOrder.splice(index + adjustment, 0, removed);
+                                    currentQuestions.setQuestionOrder(newQuestionOrder);
                                 }}
-                            </Droppable>
-                        </DragDropContext>
+                                onDelete={(id) => {
+                                    const question= selectedQuestions.get(id);
+                                    if (question) {
+                                        handleBuilderRowChange({ isDnd: true, question, currentQuestions, undoStack, redoStack, creationContext: question.creationContext });
+                                    }
+                                }}
+                                allowBookmarking
+                            />
+                        </DraggableListViewContainer>
                     </div>
                     <div className={"invalid-feedback"}>
                         {`${tooManyQuestions ? `Only ${QUESTIONS_PER_GAMEBOARD} questions can be added, please remove some.` : "Please add some questions."}`}
diff --git a/src/app/services/gameboardBuilder.ts b/src/app/services/gameboardBuilder.ts
index c97983a143..39739a8588 100644
--- a/src/app/services/gameboardBuilder.ts
+++ b/src/app/services/gameboardBuilder.ts
@@ -1,7 +1,8 @@
-import {determineAudienceViews, difficultiesOrdered, SortOrder, sortStringsNumerically, tags} from "./";
+import {determineAudienceViews, difficultiesOrdered, sortByStringValue, SortOrder, sortStringsNumerically, tags} from "./";
 import orderBy from "lodash/orderBy";
 import {AudienceContext, ContentSummaryDTO, Difficulty, GameboardDTO, GameboardItem} from "../../IsaacApiTypes";
-import {ContentSummary, Tag} from "../../IsaacAppTypes";
+import {ContentSummary, GameboardBuilderQuestions, GameboardBuilderQuestionsStackProps, Tag} from "../../IsaacAppTypes";
+import { DraggableStateSnapshot } from "@hello-pangea/dnd";
 
 export const sortQuestions = (sortState: {[s: string]: string}, creationContext?: AudienceContext) => (questions: ContentSummaryDTO[]) => {
     if (sortState["title"] && sortState["title"] != SortOrder.NONE) {
@@ -19,6 +20,10 @@ export const sortQuestions = (sortState: {[s: string]: string}, creationContext?
         });
         return questions;
     }
+    if (sortState.book && sortState.book != SortOrder.NONE) {
+        const sortedQuestions = questions.sort(sortByStringValue("subtitle"));
+        return sortState.book == SortOrder.ASC ? sortedQuestions : sortedQuestions.reverse();
+    }
     const keys: string[] = [];
     const order: ("asc" | "desc")[] = [];
     for (const key of Object.keys(sortState)) {
@@ -97,3 +102,33 @@ export const logEvent = (eventsLog: any[], event: string, params: any) => {
         ...params
     });
 };
+
+export interface GameboardBuilderRowInterface {
+    isDnd?: boolean;
+    snapshot?: DraggableStateSnapshot;
+    question: ContentSummary;
+    currentQuestions: GameboardBuilderQuestions;
+    undoStack: GameboardBuilderQuestionsStackProps;
+    redoStack: GameboardBuilderQuestionsStackProps;
+    creationContext?: AudienceContext;
+}
+
+export const handleBuilderRowChange = ({ isDnd, question, currentQuestions, undoStack, redoStack, creationContext }: GameboardBuilderRowInterface) => {
+    if (question.id) {
+        const newSelectedQuestions = new Map(currentQuestions.selectedQuestions);
+        const newQuestionOrder = [...currentQuestions.questionOrder];
+        if (newSelectedQuestions.has(question.id)) {
+            newSelectedQuestions.delete(question.id);
+            newQuestionOrder.splice(newQuestionOrder.indexOf(question.id), 1);
+        } else {
+            newSelectedQuestions.set(question.id, {...question, creationContext});
+            newQuestionOrder.push(question.id);
+        }
+        currentQuestions.setSelectedQuestions(newSelectedQuestions);
+        currentQuestions.setQuestionOrder(newQuestionOrder);
+        if (isDnd) {
+            undoStack.push({questionOrder: currentQuestions.questionOrder, selectedQuestions: currentQuestions.selectedQuestions});
+            redoStack.clear();
+        }
+    }
+};
diff --git a/src/scss/common/accessibility.scss b/src/scss/common/accessibility.scss
index c80dfb3d66..f675eac2b1 100644
--- a/src/scss/common/accessibility.scss
+++ b/src/scss/common/accessibility.scss
@@ -44,3 +44,10 @@
   --focus-outline-color: #000;
   --focus-outline-width: 0.2rem;
 }
+
+.focus-visible-z-index {
+  // focus outlines on position-relative, adjacent elements with backgrounds can be obscured by said background; this lifts the focused element above siblings to ensure visibility 
+  &:focus-visible {
+    z-index: 2010;
+  }
+}
diff --git a/src/scss/common/bootstrap-additions.scss b/src/scss/common/bootstrap-additions.scss
new file mode 100644
index 0000000000..1c04c2ec19
--- /dev/null
+++ b/src/scss/common/bootstrap-additions.scss
@@ -0,0 +1,10 @@
+// This file contains additions to Bootstrap that would undesirably override certain BS styles if they were placed after the main BS import.
+
+// this isn't in bootstrap for some reason. sm and lg+ are?
+@include media-breakpoint-up(md) {
+  .modal-md,
+  .modal-lg,
+  .modal-xl {
+    --bs-modal-width: 680px;
+  }
+}
diff --git a/src/scss/common/gameboard.scss b/src/scss/common/gameboard.scss
index 084b15b0cc..e6c4615c6e 100644
--- a/src/scss/common/gameboard.scss
+++ b/src/scss/common/gameboard.scss
@@ -54,32 +54,6 @@
   }
 }
 
-.responsive {
-  overflow: auto;
-  display: block;
-  .table.table-bordered {
-    tr {
-      td {
-        .custom-control-label {
-          &:before, &:after {
-            width: 1.5rem;
-            height: 1.5rem;
-            margin-top: -0.25rem;
-          }
-        }
-
-        .img-center {
-          display: flex;
-          justify-content: center;
-          input {
-            height: 2rem;
-          }
-        }
-      }
-    }
-  }
-}
-
 .my-gameboards-filters {
   overflow: hidden;
   max-height: 0;
@@ -117,3 +91,8 @@
   min-width: unset;
   font-size: unset;
 }
+
+.gameboard-builder-container {
+  max-height: 60vh;
+  overflow-y: auto;
+}
diff --git a/src/scss/common/list-groups.scss b/src/scss/common/list-groups.scss
index 6bceeb7fff..698d1a1d98 100644
--- a/src/scss/common/list-groups.scss
+++ b/src/scss/common/list-groups.scss
@@ -1,7 +1,12 @@
 .list-group-links {
   border: 1px solid var(--color-neutral-200, $gray-107);
   .question-link-title {
-    font-size: 1.25rem;
+    &.title-small {
+      font-size: 1.1rem;
+    }
+    &:not(.title-small) {
+      font-size: 1.25rem;
+    }
   }
 
   li {
@@ -18,12 +23,19 @@
   }
 }
 
+.alvi-bookmark-container {
+  width: 16px;
+  height: 16px;
+  margin-left: 1rem;
+}
+
 .alvi-bookmark {
   display: flex;
+  position: absolute;
+  top: 0;
+  right: 1rem;
   padding: 0;
   background: none;
-  margin-left: 1rem;
-  margin-top: -1rem;
   overflow: hidden;
 
   &::after {
@@ -46,3 +58,19 @@
     }
   }
 }
+
+.list-view-border {
+  border-left: 1px solid var(--color-neutral-200, $gray-107);
+  padding-left: 1rem;
+  &.flex-column {
+    min-width: 220px;
+  }
+}
+
+.draggable-list-view-accessible {
+  @extend .focus-visible-z-index;
+
+  button {
+    @extend .focus-visible-z-index;
+  }
+}
diff --git a/src/scss/common/modals.scss b/src/scss/common/modals.scss
index 702e30ab6e..27fb5ad507 100644
--- a/src/scss/common/modals.scss
+++ b/src/scss/common/modals.scss
@@ -33,10 +33,6 @@
     }
   }
 
-  .modal-body {
-    overflow: auto;
-  }
-
   .modal-footer {
     @include respond-below(sm) {
       button, a {
diff --git a/src/scss/cs/boards.scss b/src/scss/cs/boards.scss
index ce5d28b15c..9d79639730 100644
--- a/src/scss/cs/boards.scss
+++ b/src/scss/cs/boards.scss
@@ -42,19 +42,20 @@
 }
 
 .question-progress-icon {
-  min-width: 72px !important;
   display: block;
-  padding: 14px 0 !important;
   position: relative;
   align-content: center;
-  @include media-breakpoint-up(sm) {
-    min-width: 90px !important;
-  }
 
   .inner-progress-icon {
     @extend .text-center;
-    @extend .px-2;
+    padding: 16px 0;
     position: relative;
+
+    min-width: 72px !important;
+    @include media-breakpoint-up(sm) {
+      min-width: 90px !important;
+    }
+
     img {
       max-width: 2rem;
       max-height: 2rem;
diff --git a/src/scss/cs/color-theme.scss b/src/scss/cs/color-theme.scss
index adaf651120..b7fbe524d4 100644
--- a/src/scss/cs/color-theme.scss
+++ b/src/scss/cs/color-theme.scss
@@ -22,4 +22,6 @@
     --subject-color-700: #{$dark-pink-200};
     --subject-color-800: #{$dark-pink-200};
     --subject-color-900: #{$dark-pink-100};
+
+    --bs-btn-disabled-border-color: transparent;
 }
diff --git a/src/scss/cs/isaac.scss b/src/scss/cs/isaac.scss
index a6d0db0d75..8188110ef2 100644
--- a/src/scss/cs/isaac.scss
+++ b/src/scss/cs/isaac.scss
@@ -365,6 +365,7 @@ $theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-su
 $theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle);
 
 @import "bootstrap/scss/mixins";
+@import "../common/bootstrap-additions";
 @import "bootstrap/scss/utilities";
 @import "../common/bootstrap-contents";
 // See https://getbootstrap.com/docs/5.3/customize/sass/#importing; using Option A ("@import "bootstrap/scss/bootstrap";") is not feasible as we need the default overrides above.
@@ -438,6 +439,7 @@ $theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colo
 @import "homepage";
 @import "../common/login";
 @import "../common/registration";
+@import "scroll";
 @import "../common/assignments";
 @import "my-account";
 @import "../common/topic";
diff --git a/src/scss/cs/list-groups.scss b/src/scss/cs/list-groups.scss
index 0c511cabea..44c874f057 100644
--- a/src/scss/cs/list-groups.scss
+++ b/src/scss/cs/list-groups.scss
@@ -45,13 +45,11 @@
     > div {
       font-size: 1.25rem;
 
-      .question-progress-icon {
+      .question-progress-icon:has(> .inner-progress-icon) {
         display: inline-block;
         border-right: 1px solid $gray-107;
         margin-right: 1rem;
-        padding-right: 1rem;
         text-align: center;
-        min-width: 3.4rem;
       }
     }
   }
diff --git a/src/scss/cs/scroll.scss b/src/scss/cs/scroll.scss
new file mode 100644
index 0000000000..68c6d24186
--- /dev/null
+++ b/src/scss/cs/scroll.scss
@@ -0,0 +1,17 @@
+@import "../common/scroll";
+
+.vertical-scroll-shadow {
+  @include vertical-scroll-shadow($gray-107, rgba(0, 0, 0, 0.2));
+}
+
+.horizontal-scroll-shadow {
+  @include horizontal-scroll-shadow($gray-107, rgba(0, 0, 0, 0.2));
+}
+
+.vertical-scroll-shadow-subtle {
+  @include vertical-scroll-shadow(white, rgba(0, 0, 0, 0.2));
+}
+
+.horizontal-scroll-shadow-subtle {
+  @include horizontal-scroll-shadow(white, rgba(0, 0, 0, 0.2));
+}
diff --git a/src/scss/phy/button.scss b/src/scss/phy/button.scss
index d16ca421c1..72830005b0 100644
--- a/src/scss/phy/button.scss
+++ b/src/scss/phy/button.scss
@@ -11,6 +11,10 @@
   line-height: normal;
   opacity: 100%;
 
+  // WCAG 2.2: click targets must be at least 24x24px
+  min-width: 24px;
+  min-height: 24px;
+
   &:focus:not(:focus-visible) {
     outline: 1px solid var(--buttons-focus-ring) !important;
     outline-offset: 3px;
@@ -40,7 +44,7 @@
 
   &:hover, &.btn-dropdown.active {
     background: var(--buttons-dark-hover);
-    color: var(--buttons-dark-hover-icon);
+    color: var(--buttons-dark-text);
     text-decoration: none;
   }
 
@@ -143,6 +147,30 @@
   }
 }
 
+.btn-blank {
+  background: none;
+  border: none;
+  color: var(--buttons-light-text);
+
+  &:hover {
+    text-decoration: underline;
+    color: var(--buttons-dark-text);
+  }
+
+  &:disabled, &.disabled {
+    color: var(--buttons-light-disabled-text);
+  }
+
+  i.icon {
+    --icon-foreground: var(--buttons-light-icon);
+  }
+}
+
+.btn:hover > i.icon:not(.icon-raw), .btn-blank:hover > i.icon:not(.icon-raw) {
+  --icon-foreground: var(--icon-hover);
+  --icon-background: var(--icon-hover);
+}
+
 .icon-button-sm {
   // Makes the size of <IconButton> consistent with the default padding on .btn buttons. Not the same as any existing .p-*, or even the .btn default.
   padding: 0.75rem !important;
diff --git a/src/scss/phy/gameboard.scss b/src/scss/phy/gameboard.scss
index eba0d40b65..5ec423ab84 100644
--- a/src/scss/phy/gameboard.scss
+++ b/src/scss/phy/gameboard.scss
@@ -38,26 +38,12 @@
   right: 0;
 }
 
-.responsive {
-  max-height: 60vh;
-  .table.table-bordered {
-    thead {
-      @include table-sticky();
-      background: $gray-103;
-    }
-    tr {
-      &.disabled {
-        background-color: lightgrey;
-      }
-    }
-  }
-}
-
 button.btn.delete-button {
   border-radius: inherit;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   padding: 0.625rem;
+  min-width: 36px;
   > img {
     filter: invert(1);
   }
diff --git a/src/scss/phy/icons.scss b/src/scss/phy/icons.scss
index 4bfc2cabdc..2819caa0ae 100644
--- a/src/scss/phy/icons.scss
+++ b/src/scss/phy/icons.scss
@@ -324,12 +324,6 @@ svg {
   }
 }
 
-.btn.btn-keyline:hover > i.icon:not(.icon-raw), .btn.btn-secondary:hover > i.icon:not(.icon-raw),
-.btn.btn-tint:hover > i.icon:not(.icon-raw), .btn.btn-tertiary:hover > i.icon:not(.icon-raw) {
-  --icon-foreground: var(--icon-hover);
-  --icon-background: var(--icon-hover);
-}
-
 .phy-hex-icon {
   // this is essentially an .icon, but needs different colouring; override size as needed with icon-lg, icon-xl, etc.
   @include svg-color(url("/assets/phy/icons/redesign/hexagon.svg"), var(--subject-color-200), var(--icon-size, 75px), var(--icon-size, 75px), 100%);
@@ -343,30 +337,28 @@ svg {
 
 // the default icon colour for `neutral` is var(--color-theme-500) (green), but we use black icons in a few places across e.g. navigation
 
-i.icon.icon-color-black {
-  @include icon-color-override(var(--color-neutral-900));
-}
-
-i.icon.icon-color-grey {
-  @include icon-color-override(var(--color-neutral-500));
-}
-
-i.icon.icon-color-muted {
-  @include icon-color-override(var(--color-neutral-300));
-}
-
-i.icon.icon-color-white {
-  @include icon-color-override(var(--color-neutral-white));
-}
+$icon-color-themes: (
+  "black": var(--color-neutral-900),
+  "grey": var(--color-neutral-500),
+  "muted": var(--color-neutral-300),
+  "disabled": var(--color-neutral-200),
+  "white": var(--color-neutral-white),
+  "theme": var(--subject-color-500),
+  "alert": var(--bs-alert-color),
+);
 
-i.icon.icon-color-alert {
-  @include icon-color-override(var(--bs-alert-color));
-}
+@each $name, $color in $icon-color-themes {
+  .icon-color-#{$name} {
+    @include icon-color-override($color);
+  }
 
-i.icon.icon-color-black-hoverable {
-  --buttons-light-icon: var(--color-neutral-900);
-}
+  .icon-color-#{$name}-hoverable {
+    // replaces the color when *not* hovering; resets to white (or any -on-hover override) when hovering
+    --buttons-light-icon: #{$color};
+  }
 
-i.icon.icon-color-theme-hoverable {
-  --buttons-light-icon: var(--subject-color-500);
+  .icon-color-#{$name}-on-hover {
+    // replaces the color when hovering
+    --icon-hover: #{$color};
+  }
 }
diff --git a/src/scss/phy/isaac.scss b/src/scss/phy/isaac.scss
index 9f82847b22..110dd5a1d5 100644
--- a/src/scss/phy/isaac.scss
+++ b/src/scss/phy/isaac.scss
@@ -215,6 +215,7 @@ $theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colo
 // all Bootstrap overrides must appear before this
 @import "bootstrap/scss/mixins";
 @import "../common/bootstrap-theme-override";
+@import "../common/bootstrap-additions";
 @import "bootstrap/scss/utilities";
 @import "../common/bootstrap-contents";
 @import "dark-mode-overrides";
diff --git a/src/scss/phy/list-groups.scss b/src/scss/phy/list-groups.scss
index 972a7494b9..9067742102 100644
--- a/src/scss/phy/list-groups.scss
+++ b/src/scss/phy/list-groups.scss
@@ -2,9 +2,12 @@
 @import "../common/list-groups.scss";
 
 .content-summary-item {
-  min-height: 88px;
   padding: 1rem;
 
+  &:not(.thin) {
+    min-height: 88px;
+  }
+
   &:has(a.alvi-title) {
     button {
       z-index: 2;
@@ -16,14 +19,6 @@
   }
 }
 
-.list-view-border {
-  border-left: 1px solid var(--color-neutral-200);
-  padding-left: 1rem;
-  &.flex-column {
-    min-width: 220px;
-  }
-}
-
 .list-view-card-container {
   border: none;
   background: transparent;
diff --git a/src/scss/phy/scroll.scss b/src/scss/phy/scroll.scss
index 5bd1ad7d6e..e1e790c086 100644
--- a/src/scss/phy/scroll.scss
+++ b/src/scss/phy/scroll.scss
@@ -7,3 +7,11 @@
 .horizontal-scroll-shadow {
   @include horizontal-scroll-shadow($color-neutral-50, rgba(0, 0, 0, 0.2));
 }
+
+.vertical-scroll-shadow-subtle {
+  @include vertical-scroll-shadow(white, rgba(0, 0, 0, 0.2));
+}
+
+.horizontal-scroll-shadow-subtle {
+  @include horizontal-scroll-shadow(white, rgba(0, 0, 0, 0.2));
+}