diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4022a446f..19264d17d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,7 +13,7 @@
         "@babel/preset-typescript": "^7.22.15",
         "@emotion/cache": "^11.11.0",
         "@emotion/react": "^11.11.1",
-        "@opencast/appkit": "^0.1.4",
+        "@opencast/appkit": "^0.2.4",
         "@svgr/webpack": "^8.1.0",
         "babel-loader": "^9.1.3",
         "babel-plugin-relay": "^15.0.0",
@@ -2151,9 +2151,9 @@
       }
     },
     "node_modules/@opencast/appkit": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@opencast/appkit/-/appkit-0.1.4.tgz",
-      "integrity": "sha512-c+4N7VQPE6eWX6+lBUFQH1YWKPniBp0Lg4zgyw1TEKnNXOFDjeRsScxULomq79JabWrtbVhrD5TVN+H+3MXbhQ==",
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@opencast/appkit/-/appkit-0.2.4.tgz",
+      "integrity": "sha512-EHByrN6o8elbQIOI4XB1vqxA5IxStLGgoX8nfOQ3EXWHbx0n/ZNeZ/DrOTTmxgTNfRxvjZR7sbjIlbSIyL5SKw==",
       "peerDependencies": {
         "@emotion/react": "^11.11.1",
         "@floating-ui/react": "^0.24.3",
diff --git a/frontend/package.json b/frontend/package.json
index 91ffd18ed..17a0fd9cb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,7 +29,7 @@
     "@babel/preset-typescript": "^7.22.15",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.1",
-    "@opencast/appkit": "^0.1.4",
+    "@opencast/appkit": "^0.2.4",
     "@svgr/webpack": "^8.1.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-relay": "^15.0.0",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ffa75ce7c..0b8e0f1df 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -22,7 +22,7 @@ type Props = {
 export const App: React.FC<Props> = ({ initialRoute }) => (
     <StrictMode>
         <SilenceEmotionWarnings>
-            <ColorSchemeProvider>
+            <ColorSchemeProvider allowedSchemes={["light", "dark"]}>
                 <AppkitConfigProvider config={{
                     ...DEFAULT_CONFIG,
                     colors: {
diff --git a/frontend/src/routes/manage/Realm/Content/AddButtons.tsx b/frontend/src/routes/manage/Realm/Content/AddButtons.tsx
index d4e8193b1..7d1803ecd 100644
--- a/frontend/src/routes/manage/Realm/Content/AddButtons.tsx
+++ b/frontend/src/routes/manage/Realm/Content/AddButtons.tsx
@@ -1,11 +1,11 @@
-import React, { useRef } from "react";
+import React, { RefObject, useId, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { graphql, useFragment, commitLocalUpdate, useRelayEnvironment } from "react-relay";
 import type { RecordProxy, RecordSourceProxy } from "relay-runtime";
-import { LuPlus, LuHash, LuType, LuGrid, LuFilm } from "react-icons/lu";
+import { LuPlus, LuHash, LuType, LuFilm, LuLayoutGrid } from "react-icons/lu";
 import {
-    ProtoButton, bug, useColorScheme,
-    Floating, FloatingContainer, FloatingHandle, FloatingTrigger, WithTooltip,
+    ProtoButton, bug, useColorScheme, Floating, FloatingContainer,
+    FloatingHandle, FloatingTrigger, WithTooltip, useFloatingItemProps,
 } from "@opencast/appkit";
 
 import { AddButtonsRealmData$key } from "./__generated__/AddButtonsRealmData.graphql";
@@ -21,41 +21,8 @@ type Props = {
 
 export const AddButtons: React.FC<Props> = ({ index, realm }) => {
     const { t } = useTranslation();
-    const isDark = useColorScheme().scheme === "dark";
-
     const floatingRef = useRef<FloatingHandle>(null);
 
-    const { id: realmId } = useFragment(graphql`
-        fragment AddButtonsRealmData on Realm {
-            id
-        }
-    `, realm);
-
-    const env = useRelayEnvironment();
-
-    const addBlock = (
-        type: string,
-        prepareBlock?: (store: RecordSourceProxy, block: RecordProxy) => void,
-    ) => {
-        commitLocalUpdate(env, store => {
-            const realm = store.get(realmId) ?? bug("could not find realm");
-
-            const blocks = [
-                ...realm.getLinkedRecords("blocks") ?? bug("realm does not have blocks"),
-            ];
-
-            const id = "clNEWBLOCK";
-            const block = store.create(id, `${type}Block`);
-            prepareBlock?.(store, block);
-            block.setValue(true, "editMode");
-            block.setValue(id, "id");
-
-            blocks.splice(index, 0, block);
-
-            realm.setLinkedRecords(blocks, "blocks");
-        });
-    };
-
     const BUTTON_SIZE = 36;
 
     return (
@@ -99,66 +66,101 @@ export const AddButtons: React.FC<Props> = ({ index, realm }) => {
                     </WithTooltip>
                 </div>
             </FloatingTrigger>
-
-            <Floating
-                padding={0}
-                borderWidth={isDark ? 1 : 0}
-                backgroundColor={isDark ? COLORS.neutral15 : COLORS.neutral05}
-                shadowBlur={12}
-                shadowColor="rgba(0, 0, 0, 30%)"
-                css={{ width: 200 }}
-            >
-                <div css={{
-                    fontSize: 14,
-                    color: COLORS.neutral60,
-                    padding: "8px 16px",
-                    cursor: "default",
-                }}>{t("manage.realm.content.add-popup-title")}</div>
-                <ul css={{
-                    listStyle: "none",
-                    margin: 0,
-                    padding: 0,
-                    "& > li:not(:last-child)": {
-                        borderBottom: `1px solid ${isDark ? COLORS.neutral25 : COLORS.neutral15}`,
-                    },
-                }}>
-                    <AddItem
-                        close={() => floatingRef.current?.close()}
-                        Icon={LuHash}
-                        label={t("manage.realm.content.add-title")}
-                        onClick={() => addBlock("Title")}
-                    />
-                    <AddItem
-                        close={() => floatingRef.current?.close()}
-                        Icon={LuType}
-                        label={t("manage.realm.content.add-text")}
-                        onClick={() => addBlock("Text")}
-                    />
-                    <AddItem
-                        close={() => floatingRef.current?.close()}
-                        Icon={LuGrid}
-                        label={t("manage.realm.content.add-series")}
-                        onClick={() => addBlock("Series", (_store, block) => {
-                            block.setValue("NEW_TO_OLD", "order");
-                            block.setValue(true, "showTitle");
-                            block.setValue(false, "showMetadata");
-                        })}
-                    />
-                    <AddItem
-                        close={() => floatingRef.current?.close()}
-                        Icon={LuFilm}
-                        label={t("manage.realm.content.add-video")}
-                        onClick={() => addBlock("Video", (_store, block) => {
-                            block.setValue(true, "showTitle");
-                            block.setValue(true, "showLink");
-                        })}
-                    />
-                </ul>
-            </Floating>
+            <AddButtonsMenu {...{ index, realm, floatingRef }} />
         </FloatingContainer>
     );
 };
 
+const AddButtonsMenu: React.FC<Props & {floatingRef: RefObject<FloatingHandle>}> = ({
+    index, realm, floatingRef,
+}) => {
+    const isDark = useColorScheme().scheme === "dark";
+    const { t } = useTranslation();
+    const itemProps = useFloatingItemProps();
+    const menuId = useId();
+
+    const { id: realmId } = useFragment(graphql`
+        fragment AddButtonsRealmData on Realm {
+            id
+        }
+    `, realm);
+
+    const env = useRelayEnvironment();
+
+    const addBlock = (
+        type: string,
+        prepareBlock?: (store: RecordSourceProxy, block: RecordProxy) => void,
+    ) => {
+        commitLocalUpdate(env, store => {
+            const realm = store.get(realmId) ?? bug("could not find realm");
+
+            const blocks = [
+                ...realm.getLinkedRecords("blocks") ?? bug("realm does not have blocks"),
+            ];
+
+            const id = "clNEWBLOCK";
+            const block = store.create(id, `${type}Block`);
+            prepareBlock?.(store, block);
+            block.setValue(true, "editMode");
+            block.setValue(id, "id");
+
+            blocks.splice(index, 0, block);
+
+            realm.setLinkedRecords(blocks, "blocks");
+        });
+    };
+
+    type Block = "title" | "text" | "series" | "video";
+    const buttonProps: [IconType, Block, () => void][] = [
+        [LuHash, "title", () => addBlock("Title")],
+        [LuType, "text", () => addBlock("Text")],
+        [LuLayoutGrid, "series", () => addBlock("Series", (_store, block) => {
+            block.setValue("NEW_TO_OLD", "order");
+            block.setValue(true, "showTitle");
+            block.setValue(false, "showMetadata");
+        })],
+        [LuFilm, "video", () => addBlock("Video", (_store, block) => {
+            block.setValue(true, "showTitle");
+            block.setValue(true, "showLink");
+        })],
+    ];
+
+    return (
+        <Floating
+            padding={0}
+            borderWidth={isDark ? 1 : 0}
+            backgroundColor={isDark ? COLORS.neutral15 : COLORS.neutral05}
+            shadowBlur={12}
+            shadowColor="rgba(0, 0, 0, 30%)"
+            css={{ width: 200 }}
+        >
+            <div css={{
+                fontSize: 14,
+                color: COLORS.neutral60,
+                padding: "8px 16px",
+                cursor: "default",
+            }}>{t("manage.realm.content.add-popup-title")}</div>
+            <ul css={{
+                listStyle: "none",
+                margin: 0,
+                padding: 0,
+                "& > li:not(:last-child)": {
+                    borderBottom: `1px solid ${isDark ? COLORS.neutral25 : COLORS.neutral15}`,
+                },
+            }}>
+                {buttonProps.map(([icon, type, onClick], index) => <AddItem
+                    key={`${menuId}-${type}`}
+                    close={() => floatingRef.current?.close()}
+                    Icon={icon}
+                    label={t(`manage.realm.content.add-${type}`)}
+                    {...itemProps(index)}
+                    {...{ onClick }}
+                />)}
+            </ul>
+        </Floating>
+    );
+};
+
 type AddItemProps = {
     label: string;
     Icon: IconType;
@@ -166,7 +168,9 @@ type AddItemProps = {
     close: () => void;
 };
 
-const AddItem: React.FC<AddItemProps> = ({ label, Icon, onClick, close }) => (
+const AddItem = React.forwardRef<HTMLButtonElement, AddItemProps>(({
+    label, Icon, onClick, close,
+}, ref) => (
     <li role="menuitem" css={{
         "&:last-child > button": {
             borderBottomLeftRadius: 8,
@@ -174,6 +178,7 @@ const AddItem: React.FC<AddItemProps> = ({ label, Icon, onClick, close }) => (
         },
     }}>
         <ProtoButton
+            {...{ ref }}
             onClick={() => {
                 onClick();
                 close();
@@ -196,4 +201,4 @@ const AddItem: React.FC<AddItemProps> = ({ label, Icon, onClick, close }) => (
             {label}
         </ProtoButton>
     </li>
-);
+));
diff --git a/frontend/src/ui/Blocks/Series.tsx b/frontend/src/ui/Blocks/Series.tsx
index fd39bbd5f..221dd89ad 100644
--- a/frontend/src/ui/Blocks/Series.tsx
+++ b/frontend/src/ui/Blocks/Series.tsx
@@ -3,6 +3,7 @@ import React, {
     createContext,
     useContext,
     useEffect,
+    useId,
     useRef,
     useState,
 } from "react";
@@ -10,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import { graphql, useFragment } from "react-relay";
 import {
     match, unreachable, ProtoButton, screenWidthAtMost, screenWidthAbove,
-    useColorScheme, Floating, FloatingHandle,
+    useColorScheme, Floating, FloatingHandle, useFloatingItemProps,
 } from "@opencast/appkit";
 
 import { keyOfId, isSynced, SyncedOpencastEntity } from "../../util";
@@ -26,7 +27,9 @@ import {
 import { isPastLiveEvent, isUpcomingLiveEvent, Thumbnail } from "../Video";
 import { RelativeDate } from "../time";
 import { Card } from "../Card";
-import { LuColumns, LuGrid, LuList, LuChevronLeft, LuChevronRight, LuPlay } from "react-icons/lu";
+import {
+    LuColumns, LuList, LuChevronLeft, LuChevronRight, LuPlay, LuLayoutGrid,
+} from "react-icons/lu";
 import { keyframes } from "@emotion/react";
 import { CollapsibleDescription, SmallDescription } from "../metadata";
 import { darkModeBoxShadow, ellipsisOverflowCss, focusStyle } from "..";
@@ -331,7 +334,7 @@ const OrderMenu: React.FC = () => {
     });
 
     return <FloatingBaseMenu
-        ref={ref}
+        {...{ ref }}
         label={t("series.settings.order-label")}
         triggerContent={<>{triggerContent}</>}
         list={<List type="order" close={() => ref.current?.close()} />}
@@ -345,7 +348,7 @@ const ViewMenu: React.FC = () => {
 
     const icon = match(state.viewState, {
         slider: () => <LuColumns />,
-        gallery: () => <LuGrid />,
+        gallery: () => <LuLayoutGrid />,
         list: () => <LuList />,
     });
 
@@ -358,9 +361,8 @@ const ViewMenu: React.FC = () => {
     );
 
     return <FloatingBaseMenu
-        ref={ref}
+        {...{ ref, triggerContent }}
         label={t("series.settings.view-label")}
-        triggerContent={triggerContent}
         list={<List type="view" close={() => ref.current?.close()} />}
     />;
 };
@@ -375,6 +377,8 @@ const List: React.FC<ListProps> = ({ type, close }) => {
     const isDark = useColorScheme().scheme === "dark";
     const { viewState, setViewState } = useContext(ViewContext);
     const { eventOrder, setEventOrder } = useContext(OrderContext);
+    const itemProps = useFloatingItemProps();
+    const itemId = useId();
 
     const listStyle = {
         minWidth: 125,
@@ -397,60 +401,49 @@ const List: React.FC<ListProps> = ({ type, close }) => {
         }
     };
 
+    const viewItems: [View, IconType][] = [
+        ["slider", LuColumns],
+        ["gallery", LuLayoutGrid],
+        ["list", LuList],
+    ];
+
+    type OrderTranslationKey = "new-to-old" | "old-to-new" | "a-z" | "z-a";
+    const orderItems: [ExtendedVideoListOrder, OrderTranslationKey][] = [
+        ["NEW_TO_OLD", "new-to-old"],
+        ["OLD_TO_NEW", "old-to-new"],
+        ["A-Z", "a-z"],
+        ["Z-A", "z-a"],
+    ];
+
+    const sharedProps = (key: View | OrderTranslationKey) => ({
+        close: close,
+        label: t(`series.settings.${key}`),
+    });
+
     const list = match(type, {
         view: () => <>
             <div>{t("series.settings.view")}</div>
             <ul role="menu" onBlur={handleBlur}>
-                <MenuItem
-                    disabled={viewState === "slider"}
-                    onClick={() => setViewState("slider")}
-                    close={close}
-                    Icon={LuColumns}
-                    label={t("series.settings.slider")}
-                />
-                <MenuItem
-                    disabled={viewState === "gallery"}
-                    onClick={() => setViewState("gallery")}
-                    close={close}
-                    Icon={LuGrid}
-                    label={t("series.settings.gallery")}
-                />
-                <MenuItem
-                    disabled={viewState === "list"}
-                    onClick={() => setViewState("list")}
-                    close={close}
-                    Icon={LuList}
-                    label={t("series.settings.list")}
-                />
+                {viewItems.map(([view, icon], index) => <MenuItem
+                    key={`${itemId}-${view}`}
+                    disabled={viewState === view}
+                    Icon={icon}
+                    {...sharedProps(view)}
+                    {...itemProps(index)}
+                    onClick={() => setViewState(view)}
+                />)}
             </ul>
         </>,
         order: () => <>
             <div>{t("series.settings.order")}</div>
             <ul role="menu" onBlur={handleBlur}>
-                <MenuItem
-                    disabled={eventOrder === "NEW_TO_OLD"}
-                    onClick={() => setEventOrder("NEW_TO_OLD")}
-                    close={close}
-                    label={t("series.settings.new-to-old")}
-                />
-                <MenuItem
-                    disabled={eventOrder === "OLD_TO_NEW"}
-                    onClick={() => setEventOrder("OLD_TO_NEW")}
-                    close={close}
-                    label={t("series.settings.old-to-new")}
-                />
-                <MenuItem
-                    disabled={eventOrder === "A-Z"}
-                    onClick={() => setEventOrder("A-Z")}
-                    close={close}
-                    label={t("series.settings.a-z")}
-                />
-                <MenuItem
-                    disabled={eventOrder === "Z-A"}
-                    onClick={() => setEventOrder("Z-A")}
-                    close={close}
-                    label={t("series.settings.z-a")}
-                />
+                {orderItems.map(([order, orderKey], index) => <MenuItem
+                    key={`${itemId}-${order}`}
+                    disabled={eventOrder === order}
+                    {...sharedProps(orderKey)}
+                    {...itemProps(index)}
+                    onClick={() => setEventOrder(order)}
+                />)}
             </ul>
         </>,
     });
@@ -469,13 +462,14 @@ const List: React.FC<ListProps> = ({ type, close }) => {
 type MenuItemProps = {
     Icon?: IconType;
     label: string;
-    onClick: () => void;
+    onClick?: () => void;
     close: () => void;
-    disabled?: boolean;
+    disabled: boolean;
 };
 
-const MenuItem: React.FC<MenuItemProps> = ({ Icon, label, onClick, close, disabled }) => {
-    const ref = useRef<HTMLButtonElement>(null);
+const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({
+    Icon, label, onClick, close, disabled,
+}, ref) => {
     const isDark = useColorScheme().scheme === "dark";
 
     return (
@@ -488,11 +482,12 @@ const MenuItem: React.FC<MenuItemProps> = ({ Icon, label, onClick, close, disabl
             },
         }}>
             <ProtoButton
-                ref={ref}
-                disabled={disabled}
+                {...{ ref, disabled }}
                 role="menuitem"
                 onClick={() => {
-                    onClick();
+                    if (onClick) {
+                        onClick();
+                    }
                     close();
                 }}
                 css={{
@@ -519,7 +514,7 @@ const MenuItem: React.FC<MenuItemProps> = ({ Icon, label, onClick, close, disabl
             </ProtoButton>
         </li>
     );
-};
+});
 
 
 // ==============================================================================================
diff --git a/frontend/src/ui/FloatingBaseMenu.tsx b/frontend/src/ui/FloatingBaseMenu.tsx
index ed08ec3b6..56c10619f 100644
--- a/frontend/src/ui/FloatingBaseMenu.tsx
+++ b/frontend/src/ui/FloatingBaseMenu.tsx
@@ -13,8 +13,6 @@ type FloatingBaseMenuProps = {
     triggerStyles?: CSSObject;
 };
 
-
-// TODO: Make menus work with arrow keys.
 export const FloatingBaseMenu = React.forwardRef<FloatingHandle, FloatingBaseMenuProps>(
     ({ triggerContent, list, label, triggerStyles }, ref) => (
         <FloatingContainer