diff --git a/backend/custom_admin/src/components/schedule-builder/add-item-modal/add-custom-event.tsx b/backend/custom_admin/src/components/schedule-builder/add-item-modal/add-custom-event.tsx
index b06e44ffd8..7cdfb20d89 100644
--- a/backend/custom_admin/src/components/schedule-builder/add-item-modal/add-custom-event.tsx
+++ b/backend/custom_admin/src/components/schedule-builder/add-item-modal/add-custom-event.tsx
@@ -1,3 +1,12 @@
+import {
+  Button,
+  Callout,
+  Flex,
+  Heading,
+  Select,
+  Text,
+  TextField,
+} from "@radix-ui/themes";
 import { useState } from "react";
 
 import type { Room } from "../../../types";
@@ -5,44 +14,57 @@ import { useCurrentConference } from "../../utils/conference";
 import { useAddItemModal } from "./context";
 import { useCreateScheduleItemMutation } from "./create-schedule-item.generated";
 
+type CreateArgs = { title: string; type: string; rooms: Room[] };
+
 export const AddCustomEvent = () => {
   const { data, close } = useAddItemModal();
   const { conferenceId } = useCurrentConference();
   const [createScheduleItem] = useCreateScheduleItemMutation();
+  const [error, setError] = useState<string | null>(null);
 
-  const onCreate = async ({
-    title,
-    type,
-    rooms,
-  }: {
-    title: string;
-    type: string;
-    rooms: Room[];
-  }) => {
-    await createScheduleItem({
-      variables: {
-        input: {
-          conferenceId,
-          type: type,
-          title: title,
-          slotId: data.slot.id,
-          rooms: rooms.map((room) => room.id),
-          languageId: null,
+  const onCreate = async ({ title, type, rooms }: CreateArgs) => {
+    setError(null);
+    try {
+      const { errors } = await createScheduleItem({
+        variables: {
+          input: {
+            conferenceId,
+            type: type,
+            title: title,
+            slotId: data.slot.id,
+            rooms: rooms.map((room) => room.id),
+            languageId: null,
+          },
         },
-      },
-    });
-    close();
+      });
+      if (errors?.length) {
+        setError("Could not add to the schedule. Please try again.");
+        return;
+      }
+      close();
+    } catch {
+      setError("Could not add to the schedule. Please try again.");
+    }
   };
 
   return (
-    <div>
+    <Flex direction="column" gap="4">
+      {error && (
+        <Callout.Root color="red" size="1">
+          <Callout.Text>{error}</Callout.Text>
+        </Callout.Root>
+      )}
       <CustomDefinedOptions onCreate={onCreate} />
       <CustomByHand onCreate={onCreate} />
-    </div>
+    </Flex>
   );
 };
 
-const CustomDefinedOptions = ({ onCreate }) => {
+const CustomDefinedOptions = ({
+  onCreate,
+}: {
+  onCreate: (args: CreateArgs) => void;
+}) => {
   const {
     data: {
       day: { rooms },
@@ -52,9 +74,9 @@ const CustomDefinedOptions = ({ onCreate }) => {
   const allRooms = rooms;
 
   return (
-    <>
-      <strong>Add Custom from list</strong>
-      <ul className="my-2">
+    <Flex direction="column" gap="2">
+      <Heading size="3">Add custom from list</Heading>
+      <Flex direction="column" gap="1">
         <Option onClick={onCreate} type="break" rooms={allTalkRooms}>
           Room change
         </Option>
@@ -79,29 +101,52 @@ const CustomDefinedOptions = ({ onCreate }) => {
         <Option onClick={onCreate} type="announcements" rooms={allRooms}>
           Closing
         </Option>
-      </ul>
-    </>
+      </Flex>
+    </Flex>
   );
 };
 
-const Option = ({ children, type, rooms, onClick }) => {
+const Option = ({
+  children,
+  type,
+  rooms,
+  onClick,
+}: {
+  children: string;
+  type: string;
+  rooms: Room[];
+  onClick: (args: CreateArgs) => void;
+}) => {
   return (
-    <li
-      onClick={() => {
-        onClick({
-          title: children,
-          type,
-          rooms,
-        });
-      }}
-      className="p-2 bg-slate-300 odd:bg-slate-200 cursor-pointer hover:bg-slate-400"
+    <Button
+      variant="soft"
+      color="gray"
+      style={{ justifyContent: "flex-start" }}
+      onClick={() => onClick({ title: children, type, rooms })}
     >
       {children}
-    </li>
+    </Button>
   );
 };
 
-const CustomByHand = ({ onCreate }) => {
+const TYPE_OPTIONS = [
+  { value: "talk", label: "Talk" },
+  { value: "training", label: "Training" },
+  { value: "keynote", label: "Keynote" },
+  { value: "panel", label: "Panel" },
+  { value: "registration", label: "Registration" },
+  { value: "announcements", label: "Announcements" },
+  { value: "break", label: "Break" },
+  { value: "social", label: "Social" },
+  { value: "recruiting", label: "Recruiting" },
+  { value: "custom", label: "Custom" },
+];
+
+const CustomByHand = ({
+  onCreate,
+}: {
+  onCreate: (args: CreateArgs) => void;
+}) => {
   const {
     data: { room: selectedRoom },
   } = useAddItemModal();
@@ -117,51 +162,41 @@ const CustomByHand = ({ onCreate }) => {
   };
 
   return (
-    <>
-      <strong>Create custom by hand</strong>
-      <div className="my-2 grid gap-2 grid-cols-[50px_1fr] items-center">
-        <label htmlFor="title">
-          <strong>Title</strong>
-        </label>
-        <input
-          id="title"
-          className="p-2 border"
-          type="text"
+    <Flex direction="column" gap="2">
+      <Heading size="3">Create custom by hand</Heading>
+      <Flex align="center" gap="3">
+        <Text weight="bold" style={{ width: 50 }}>
+          Title
+        </Text>
+        <TextField.Root
+          style={{ flex: 1 }}
           value={title}
           onChange={(e) => setTitle(e.target.value)}
         />
-        <label htmlFor="type">
-          <strong>Type</strong>
-        </label>
-        <select
-          id="type"
-          className="p-2 border"
-          value={type}
-          onChange={(e) => setType(e.target.selectedOptions[0].value)}
-        >
-          <option value="" disabled>
-            Choose one
-          </option>
-          <option value="talk">Talk</option>
-          <option value="training">Training</option>
-          <option value="keynote">Keynote</option>
-          <option value="panel">Panel</option>
-          <option value="registration">Registration</option>
-          <option value="announcements">Announcements</option>
-          <option value="break">Break</option>
-          <option value="social">Social</option>
-          <option value="recruiting">Recruiting</option>
-          <option value="custom">Custom</option>
-        </select>
-      </div>
-      <button
+      </Flex>
+      <Flex align="center" gap="3">
+        <Text weight="bold" style={{ width: 50 }}>
+          Type
+        </Text>
+        <Select.Root value={type || undefined} onValueChange={setType}>
+          <Select.Trigger placeholder="Choose one" />
+          <Select.Content position="popper">
+            {TYPE_OPTIONS.map((option) => (
+              <Select.Item key={option.value} value={option.value}>
+                {option.label}
+              </Select.Item>
+            ))}
+          </Select.Content>
+        </Select.Root>
+      </Flex>
+      <Button
         type="button"
         disabled={!title || type === ""}
         onClick={create}
-        className="btn w-full mt-3"
+        mt="2"
       >
         Create
-      </button>
-    </>
+      </Button>
+    </Flex>
   );
 };
diff --git a/backend/custom_admin/src/components/schedule-builder/add-item-modal/index.tsx b/backend/custom_admin/src/components/schedule-builder/add-item-modal/index.tsx
index 2f98821cea..54ced6560a 100644
--- a/backend/custom_admin/src/components/schedule-builder/add-item-modal/index.tsx
+++ b/backend/custom_admin/src/components/schedule-builder/add-item-modal/index.tsx
@@ -1,32 +1,28 @@
-import { Modal } from "../../shared/modal";
+import { Dialog, Flex } from "@radix-ui/themes";
 import { AddCustomEvent } from "./add-custom-event";
 import { useAddItemModal } from "./context";
 import { SearchEvent } from "./search-event";
 
 export const AddItemModal = () => {
-  const { isOpen, close } = useAddItemModal();
-
-  if (!isOpen) {
-    return null;
-  }
+  const { isOpen, close, data } = useAddItemModal();
 
   return (
-    <Modal
-      isOpen={isOpen}
-      onClose={close}
-      className="p-3 max-w-3xl w-full max-h-[700px] overflow-scroll"
-    >
-      <div className="">
-        <h2 className="text-xl">Add event to schedule</h2>
-        <ul>
-          <li className="mt-2">
+    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && close()}>
+      <Dialog.Content maxWidth="768px">
+        <Dialog.Title>Add event to schedule</Dialog.Title>
+        <Dialog.Description size="2" mb="4" color="gray">
+          Search an existing proposal or keynote, or create a custom event for
+          this slot.
+        </Dialog.Description>
+        {/* data is null while the dialog animates closed; guard so children
+            (which read data.day/slot/room) never dereference null. */}
+        {data && (
+          <Flex direction="column" gap="5">
             <SearchEvent />
-          </li>
-          <li className="mt-5">
             <AddCustomEvent />
-          </li>
-        </ul>
-      </div>
-    </Modal>
+          </Flex>
+        )}
+      </Dialog.Content>
+    </Dialog.Root>
   );
 };
diff --git a/backend/custom_admin/src/components/schedule-builder/add-item-modal/info-recap.tsx b/backend/custom_admin/src/components/schedule-builder/add-item-modal/info-recap.tsx
index 94e286b7e6..59bb824d59 100644
--- a/backend/custom_admin/src/components/schedule-builder/add-item-modal/info-recap.tsx
+++ b/backend/custom_admin/src/components/schedule-builder/add-item-modal/info-recap.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { DataList } from "@radix-ui/themes";
 
 type Props = {
   info: {
@@ -9,13 +9,13 @@ type Props = {
 
 export const InfoRecap = ({ info }: Props) => {
   return (
-    <div className="my-3 grid grid-cols-[100px_1fr]">
+    <DataList.Root my="3" size="2">
       {info.map(({ label, value }) => (
-        <Fragment key={label}>
-          <strong>{label}</strong>
-          <span>{value}</span>
-        </Fragment>
+        <DataList.Item key={label}>
+          <DataList.Label minWidth="100px">{label}</DataList.Label>
+          <DataList.Value>{value}</DataList.Value>
+        </DataList.Item>
       ))}
-    </div>
+    </DataList.Root>
   );
 };
diff --git a/backend/custom_admin/src/components/schedule-builder/add-item-modal/keynote-preview.tsx b/backend/custom_admin/src/components/schedule-builder/add-item-modal/keynote-preview.tsx
index 07acdb358a..0be146b2a9 100644
--- a/backend/custom_admin/src/components/schedule-builder/add-item-modal/keynote-preview.tsx
+++ b/backend/custom_admin/src/components/schedule-builder/add-item-modal/keynote-preview.tsx
@@ -1,3 +1,5 @@
+import { Button, Callout, Card, Text } from "@radix-ui/themes";
+import { useState } from "react";
 import type { KeynoteFragmentFragment } from "../../fragments/keynote.generated";
 import { useCurrentConference } from "../../utils/conference";
 import { useAddItemModal } from "./context";
@@ -12,25 +14,37 @@ export const KeynotePreview = ({
   const { conferenceId } = useCurrentConference();
   const { data, close } = useAddItemModal();
   const [createScheduleItem] = useCreateScheduleItemMutation();
+  const [error, setError] = useState<string | null>(null);
 
   const onAddToSchedule = async () => {
-    await createScheduleItem({
-      variables: {
-        input: {
-          conferenceId,
-          type: "keynote",
-          keynoteId: keynote.id,
-          slotId: data.slot.id,
-          rooms: [data.room.id],
+    setError(null);
+    try {
+      const { errors } = await createScheduleItem({
+        variables: {
+          input: {
+            conferenceId,
+            type: "keynote",
+            keynoteId: keynote.id,
+            slotId: data.slot.id,
+            rooms: [data.room.id],
+          },
         },
-      },
-    });
-    close();
+      });
+      if (errors?.length) {
+        setError("Could not add to the schedule. Please try again.");
+        return;
+      }
+      close();
+    } catch {
+      setError("Could not add to the schedule. Please try again.");
+    }
   };
 
   return (
-    <li className="p-2 bg-slate-300 odd:bg-slate-200">
-      <strong>{keynote.title}</strong>
+    <Card>
+      <Text as="div" weight="bold">
+        {keynote.title}
+      </Text>
       <InfoRecap
         info={[
           { label: "Type", value: "Keynote" },
@@ -40,9 +54,14 @@ export const KeynotePreview = ({
           },
         ]}
       />
-      <button type="button" onClick={onAddToSchedule} className="btn">
+      <Button type="button" onClick={onAddToSchedule}>
         Add to schedule
-      </button>
-    </li>
+      </Button>
+      {error && (
+        <Callout.Root color="red" size="1" mt="2">
+          <Callout.Text>{error}</Callout.Text>
+        </Callout.Root>
+      )}
+    </Card>
   );
 };
diff --git a/backend/custom_admin/src/components/schedule-builder/add-item-modal/proposal-preview.tsx b/backend/custom_admin/src/components/schedule-builder/add-item-modal/proposal-preview.tsx
index a3835583e8..e39c029b1f 100644
--- a/backend/custom_admin/src/components/schedule-builder/add-item-modal/proposal-preview.tsx
+++ b/backend/custom_admin/src/components/schedule-builder/add-item-modal/proposal-preview.tsx
@@ -1,27 +1,17 @@
+import { Badge, Button, Callout, Card, Flex, Text } from "@radix-ui/themes";
+import { useState } from "react";
 import type { Language } from "../../../types";
 import type { SubmissionFragmentFragment } from "../../fragments/submission.generated";
 import type { AvailabilityValue } from "../../utils/availability";
-import { getSlotAvailabilityKey } from "../../utils/availability";
+import {
+  AVAILABILITY_META,
+  getSlotAvailabilityKey,
+} from "../../utils/availability";
 import { useCurrentConference } from "../../utils/conference";
 import { useAddItemModal } from "./context";
 import { useCreateScheduleItemMutation } from "./create-schedule-item.generated";
 import { InfoRecap } from "./info-recap";
 
-const AVAILABILITY_STYLES: Record<
-  AvailabilityValue,
-  { label: string; className: string }
-> = {
-  preferred: {
-    label: "Preferred",
-    className: "bg-green-200 text-green-900 font-semibold",
-  },
-  available: { label: "Available", className: "bg-blue-100 text-blue-900" },
-  unavailable: {
-    label: "Unavailable",
-    className: "bg-red-200 text-red-900 font-semibold",
-  },
-};
-
 type Props = {
   proposal: SubmissionFragmentFragment;
 };
@@ -42,22 +32,24 @@ export const ProposalPreview = ({ proposal }: Props) => {
     : undefined;
 
   return (
-    <li className="p-2 bg-slate-300 odd:bg-slate-200">
-      <div className="flex items-start justify-between gap-2">
+    <Card>
+      <Flex align="start" justify="between" gap="2">
         <div>
-          <strong>{proposal.title}</strong>
+          <Text as="div" weight="bold">
+            {proposal.title}
+          </Text>
           {proposal.italianTitle !== proposal.title && (
-            <div>{proposal.italianTitle}</div>
+            <Text as="div" color="gray">
+              {proposal.italianTitle}
+            </Text>
           )}
         </div>
         {slotAvailability && (
-          <span
-            className={`shrink-0 text-xs px-2 py-0.5 rounded ${AVAILABILITY_STYLES[slotAvailability].className}`}
-          >
-            {AVAILABILITY_STYLES[slotAvailability].label}
-          </span>
+          <Badge color={AVAILABILITY_META[slotAvailability].color}>
+            {AVAILABILITY_META[slotAvailability].label}
+          </Badge>
         )}
-      </div>
+      </Flex>
 
       <InfoRecap
         info={[
@@ -67,7 +59,7 @@ export const ProposalPreview = ({ proposal }: Props) => {
         ]}
       />
       <AddActions proposal={proposal} />
-    </li>
+    </Card>
   );
 };
 
@@ -75,36 +67,52 @@ const AddActions = ({ proposal }: { proposal: SubmissionFragmentFragment }) => {
   const { conferenceId } = useCurrentConference();
   const { data, close } = useAddItemModal();
   const [createScheduleItem] = useCreateScheduleItemMutation();
+  const [error, setError] = useState<string | null>(null);
   const languages = proposal.languages;
   const onCreate = async (language: Language) => {
-    await createScheduleItem({
-      variables: {
-        input: {
-          conferenceId,
-          type:
-            proposal.type.name.toLowerCase() === "talk" ? "talk" : "training",
-          proposalId: proposal.id,
-          languageId: language.id,
-          slotId: data.slot.id,
-          rooms: [data.room.id],
+    setError(null);
+    try {
+      const { errors } = await createScheduleItem({
+        variables: {
+          input: {
+            conferenceId,
+            type:
+              proposal.type.name.toLowerCase() === "talk" ? "talk" : "training",
+            proposalId: proposal.id,
+            languageId: language.id,
+            slotId: data.slot.id,
+            rooms: [data.room.id],
+          },
         },
-      },
-    });
-    close();
+      });
+      if (errors?.length) {
+        setError("Could not add to the schedule. Please try again.");
+        return;
+      }
+      close();
+    } catch {
+      setError("Could not add to the schedule. Please try again.");
+    }
   };
 
   return (
-    <div>
-      {languages.map((language) => (
-        <button
-          type="button"
-          onClick={(e) => onCreate(language)}
-          className="btn mr-3"
-          key={language.id}
-        >
-          Add to schedule in {language.name}
-        </button>
-      ))}
-    </div>
+    <Flex direction="column" gap="2">
+      <Flex gap="2" wrap="wrap">
+        {languages.map((language) => (
+          <Button
+            type="button"
+            onClick={() => onCreate(language)}
+            key={language.id}
+          >
+            Add to schedule in {language.name}
+          </Button>
+        ))}
+      </Flex>
+      {error && (
+        <Callout.Root color="red" size="1">
+          <Callout.Text>{error}</Callout.Text>
+        </Callout.Root>
+      )}
+    </Flex>
   );
 };
diff --git a/backend/custom_admin/src/components/schedule-builder/add-item-modal/search-event.tsx b/backend/custom_admin/src/components/schedule-builder/add-item-modal/search-event.tsx
index 918f9c2c0a..a322992842 100644
--- a/backend/custom_admin/src/components/schedule-builder/add-item-modal/search-event.tsx
+++ b/backend/custom_admin/src/components/schedule-builder/add-item-modal/search-event.tsx
@@ -1,3 +1,4 @@
+import { Flex, Heading, Text, TextField } from "@radix-ui/themes";
 import { useEffect, useRef, useState } from "react";
 
 import { useCurrentConference } from "../../utils/conference";
@@ -29,52 +30,45 @@ export const SearchEvent = () => {
 
   useEffect(() => {
     if (debouncedSearch) {
-      console.log("running search", debouncedSearch);
-
       runSearch({
         variables: {
           conferenceId,
           query: debouncedSearch,
         },
       });
-    } else {
     }
   }, [debouncedSearch]);
 
   return (
-    <>
-      <div className="mb-2">
-        <strong>Search proposal / keynote</strong>
-      </div>
-      <div>
-        <input
-          ref={searchInputRef}
-          onChange={changeSearch}
-          className="w-full p-3 border"
-          type="text"
-          placeholder="Search"
-          value={searchQuery}
-        />
-      </div>
-      <div>
-        {loading && <span>Searching events</span>}
-        {!loading && data?.searchEvents.results.length === 0 && (
-          <span>No events found</span>
+    <Flex direction="column" gap="2">
+      <Heading size="3">Search proposal / keynote</Heading>
+      <TextField.Root
+        ref={searchInputRef}
+        onChange={changeSearch}
+        placeholder="Search"
+        value={searchQuery}
+      />
+      {loading && <Text color="gray">Searching events</Text>}
+      {!loading &&
+        debouncedSearch &&
+        data?.searchEvents.results.length === 0 && (
+          <Text color="gray">No events found</Text>
         )}
-        {debouncedSearch && data?.searchEvents.results.length > 0 && (
-          <ul>
-            {data.searchEvents.results.map((event) => {
-              if (event.__typename === "Submission") {
-                return <ProposalPreview key={event.id} proposal={event} />;
-              }
+      {debouncedSearch && data?.searchEvents.results.length > 0 && (
+        <Flex direction="column" gap="2">
+          {data.searchEvents.results.map((event) => {
+            if (event.__typename === "Submission") {
+              return <ProposalPreview key={event.id} proposal={event} />;
+            }
 
-              if (event.__typename === "Keynote") {
-                return <KeynotePreview key={event.id} keynote={event} />;
-              }
-            })}
-          </ul>
-        )}
-      </div>
-    </>
+            if (event.__typename === "Keynote") {
+              return <KeynotePreview key={event.id} keynote={event} />;
+            }
+
+            return null;
+          })}
+        </Flex>
+      )}
+    </Flex>
   );
 };
diff --git a/backend/custom_admin/src/components/schedule-builder/calendar.tsx b/backend/custom_admin/src/components/schedule-builder/calendar.tsx
index 9b32cb5500..738c52c50d 100644
--- a/backend/custom_admin/src/components/schedule-builder/calendar.tsx
+++ b/backend/custom_admin/src/components/schedule-builder/calendar.tsx
@@ -1,4 +1,5 @@
-import React, { Fragment } from "react";
+import { Button, Heading } from "@radix-ui/themes";
+import { Fragment } from "react";
 
 import { useDjangoAdminEditor } from "../shared/django-admin-editor-modal/context";
 import { formatHour } from "../utils/time";
@@ -26,10 +27,12 @@ export const Calendar = ({ day }: Props) => {
   return (
     <div className="mb-6">
       <span className="sticky top-0 flex items-center gap-3 z-[100] bg-white">
-        <h1 className="text-red-900 text-3xl">{date}</h1>
-        <button type="button" className="underline" onClick={openDayInAdmin}>
+        <Heading size="7" color="ruby">
+          {date}
+        </Heading>
+        <Button type="button" variant="ghost" onClick={openDayInAdmin}>
           Edit day in admin
-        </button>
+        </Button>
       </span>
       <div
         className="grid gap-1"
diff --git a/backend/custom_admin/src/components/schedule-builder/item.tsx b/backend/custom_admin/src/components/schedule-builder/item.tsx
index 5282058992..274b30bfa0 100644
--- a/backend/custom_admin/src/components/schedule-builder/item.tsx
+++ b/backend/custom_admin/src/components/schedule-builder/item.tsx
@@ -1,10 +1,13 @@
 import { useDrag } from "react-dnd";
 
-import { Button, Tooltip } from "@radix-ui/themes";
+import { Badge, Button, Card, Flex, Text, Tooltip } from "@radix-ui/themes";
 import type { ScheduleItemFragmentFragment } from "../fragments/schedule-item.generated";
 import { useDjangoAdminEditor } from "../shared/django-admin-editor-modal/context";
 import type { AvailabilityValue } from "../utils/availability";
-import { getSlotAvailabilityKey } from "../utils/availability";
+import {
+  AVAILABILITY_META,
+  getSlotAvailabilityKey,
+} from "../utils/availability";
 import { convertHoursToMinutes } from "../utils/time";
 
 // Only the primary speaker's availability is checked. Co-speakers are not asked
@@ -20,20 +23,11 @@ function getSpeakerAvailability(
   return availabilities[getSlotAvailabilityKey(date, slotHour)] ?? null;
 }
 
-const AVAILABILITY_BADGE: Record<
-  AvailabilityValue,
-  { bg: string; text: string; label: string }
-> = {
-  preferred: { bg: "#dcfce7", text: "#15803d", label: "★ Preferred" },
-  available: { bg: "#dbeafe", text: "#1d4ed8", label: "✓ Available" },
-  unavailable: { bg: "#fee2e2", text: "#b91c1c", label: "✗ Unavailable" },
-};
-
 function AvailabilityBadge({
   value,
 }: { value: AvailabilityValue | undefined }) {
   if (!value) return <span style={{ color: "#9ca3af", fontSize: 11 }}>—</span>;
-  const { bg, text, label } = AVAILABILITY_BADGE[value];
+  const { bg, text, glyph, label } = AVAILABILITY_META[value];
   return (
     <span
       style={{
@@ -46,7 +40,7 @@ function AvailabilityBadge({
         whiteSpace: "nowrap",
       }}
     >
-      {label}
+      {glyph} {label}
     </span>
   );
 }
@@ -157,7 +151,7 @@ export const Item = ({
             .slice(currentSlotIndex, endingSlotIndex)
             .reduce((acc, s) => acc + 1, 0),
       }}
-      className="z-50 bg-slate-200"
+      className="z-50"
     >
       <ScheduleItemCard
         item={item}
@@ -226,42 +220,55 @@ export const ScheduleItemCard = ({
   };
 
   return (
-    <ul className="bg-slate-200 p-3" ref={dragRef}>
-      {availability === "unavailable" && (
-        <li className="mb-2 flex items-center gap-1.5 bg-amber-100 text-amber-800 border border-amber-300 text-xs font-semibold px-2 py-1 rounded">
-          <span>⚠ Speaker unavailable</span>
-          <Tooltip
-            content={
-              <AvailabilityTooltipContent availabilities={availabilities} />
-            }
-          >
-            <span
-              className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full bg-amber-400 text-amber-900 cursor-help leading-none"
-              style={{ fontSize: 9, fontStyle: "italic", fontFamily: "serif" }}
+    <Card ref={dragRef} size="1" style={{ opacity, cursor: "grab" }}>
+      <Flex direction="column" gap="1" align="start">
+        {availability === "unavailable" && (
+          <Flex align="center" gap="1">
+            <Badge color="amber" variant="soft">
+              ⚠ Speaker unavailable
+            </Badge>
+            <Tooltip
+              content={
+                <AvailabilityTooltipContent availabilities={availabilities} />
+              }
             >
-              i
-            </span>
-          </Tooltip>
-        </li>
-      )}
-      <li>
-        [{item.type} - {duration || "??"} mins]
-      </li>
-      <li>{item.status}</li>
-      <li className="pt-2">
-        <strong>{item.title}</strong>
-      </li>
-      {item.speakers.length > 0 && (
-        <li>
-          <SpeakerNames item={item} />
-        </li>
-      )}
-      <li className="pt-2">
-        <span>[TM: {item.talkManager?.fullname}]</span>
-      </li>
-      <li className="pt-2">
-        <Button onClick={openEditLink}>Edit</Button>
-      </li>
-    </ul>
+              <span
+                className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full bg-amber-400 text-amber-900 cursor-help leading-none"
+                style={{
+                  fontSize: 9,
+                  fontStyle: "italic",
+                  fontFamily: "serif",
+                }}
+              >
+                i
+              </span>
+            </Tooltip>
+          </Flex>
+        )}
+        <Flex align="center" gap="2">
+          <Badge variant="soft">{item.type}</Badge>
+          <Text size="1" color="gray">
+            {duration || "??"} mins
+          </Text>
+        </Flex>
+        <Text size="1" color="gray">
+          {item.status}
+        </Text>
+        <Text size="2" weight="bold">
+          {item.title}
+        </Text>
+        {item.speakers.length > 0 && (
+          <Text size="1">
+            <SpeakerNames item={item} />
+          </Text>
+        )}
+        <Text size="1" color="gray">
+          TM: {item.talkManager?.fullname}
+        </Text>
+        <Button size="1" variant="soft" mt="1" onClick={openEditLink}>
+          Edit
+        </Button>
+      </Flex>
+    </Card>
   );
 };
diff --git a/backend/custom_admin/src/components/schedule-builder/pending-items-basket/index.tsx b/backend/custom_admin/src/components/schedule-builder/pending-items-basket/index.tsx
index 6b4c999ee5..f4ae6bb5cb 100644
--- a/backend/custom_admin/src/components/schedule-builder/pending-items-basket/index.tsx
+++ b/backend/custom_admin/src/components/schedule-builder/pending-items-basket/index.tsx
@@ -1,4 +1,6 @@
+import { IconButton, Text } from "@radix-ui/themes";
 import clsx from "clsx";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useDrop } from "react-dnd";
 
@@ -76,9 +78,9 @@ export const PendingItemsBasket = () => {
               },
             )}
           >
-            <span className="font-bold opacity-50 uppercase select-none">
+            <Text weight="bold" color="gray" className="uppercase select-none">
               Drop here to unassign from slot
-            </span>
+            </Text>
           </div>
           <div
             ref={itemsRef}
@@ -177,17 +179,16 @@ const ScrollButton = ({
   }
 
   return (
-    <div
+    <IconButton
       onClick={scroll}
-      className={clsx(
-        "absolute shadow-md p-6 cursor-pointer top-1/2 bg-white rounded-full select-none",
-        {
-          "-translate-y-1/2 -translate-x-1/2 left-0": direction === "backwards",
-          "-translate-y-1/2 translate-x-1/2 right-0": direction === "forwards",
-        },
-      )}
+      radius="full"
+      size="3"
+      className={clsx("absolute top-1/2 z-10 shadow-md", {
+        "-translate-y-1/2 -translate-x-1/2 left-0": direction === "backwards",
+        "-translate-y-1/2 translate-x-1/2 right-0": direction === "forwards",
+      })}
     >
-      {direction === "backwards" ? "👈" : "👉"}
-    </div>
+      {direction === "backwards" ? <ChevronLeft /> : <ChevronRight />}
+    </IconButton>
   );
 };
diff --git a/backend/custom_admin/src/components/schedule-builder/placeholder.tsx b/backend/custom_admin/src/components/schedule-builder/placeholder.tsx
index 44262058f6..98f6f8d2bf 100644
--- a/backend/custom_admin/src/components/schedule-builder/placeholder.tsx
+++ b/backend/custom_admin/src/components/schedule-builder/placeholder.tsx
@@ -1,3 +1,4 @@
+import { Text } from "@radix-ui/themes";
 import clsx from "clsx";
 import { useDrop } from "react-dnd";
 
@@ -84,8 +85,9 @@ export const Placeholder = ({
         gridRowEnd: rowEnd,
       }}
     >
-      {isMovingItemLoading && <span>Please wait</span>}
-      {!isMovingItemLoading && <span>Drop / Add</span>}
+      <Text size="2" color="gray">
+        {isMovingItemLoading ? "Please wait" : "Drop / Add"}
+      </Text>
       <PlusIcon />
     </div>
   );
diff --git a/backend/custom_admin/src/components/schedule-builder/slot-creation.tsx b/backend/custom_admin/src/components/schedule-builder/slot-creation.tsx
index da30c22c6b..0ae039c332 100644
--- a/backend/custom_admin/src/components/schedule-builder/slot-creation.tsx
+++ b/backend/custom_admin/src/components/schedule-builder/slot-creation.tsx
@@ -1,32 +1,35 @@
-import { Button } from "@radix-ui/themes";
+import { Button, Flex, Grid, Heading } from "@radix-ui/themes";
 import { useCurrentConference } from "../utils/conference";
 import { useCreateScheduleSlotMutation } from "./create-schedule-slot.generated";
 
 export const SlotCreation = ({ dayId }) => {
   return (
-    <div className="grid grid-cols-4 gap-3 mt-3">
-      <AddSlotButton dayId={dayId} type="default" duration={15}>
-        Add 15 mins slot
-      </AddSlotButton>
-      <AddSlotButton dayId={dayId} type="default" duration={30}>
-        Add 30 mins slot
-      </AddSlotButton>
-      <AddSlotButton dayId={dayId} type="default" duration={45}>
-        Add 45 mins slot
-      </AddSlotButton>
-      <AddSlotButton dayId={dayId} type="default" duration={60}>
-        Add 60 mins slot
-      </AddSlotButton>
-      <AddSlotButton dayId={dayId} type="break" duration={10}>
-        Break slot: Add 10 mins slot
-      </AddSlotButton>
-      <AddSlotButton dayId={dayId} type="break" duration={125}>
-        Lunch slot: 2h 5 mins
-      </AddSlotButton>
-      <AddSlotButton dayId={dayId} type="break" duration={30}>
-        Break slot: 30 mins
-      </AddSlotButton>
-    </div>
+    <Flex direction="column" gap="2" mt="3">
+      <Heading size="3">Add slot</Heading>
+      <Grid columns="4" gap="3">
+        <AddSlotButton dayId={dayId} type="default" duration={15}>
+          Add 15 mins slot
+        </AddSlotButton>
+        <AddSlotButton dayId={dayId} type="default" duration={30}>
+          Add 30 mins slot
+        </AddSlotButton>
+        <AddSlotButton dayId={dayId} type="default" duration={45}>
+          Add 45 mins slot
+        </AddSlotButton>
+        <AddSlotButton dayId={dayId} type="default" duration={60}>
+          Add 60 mins slot
+        </AddSlotButton>
+        <AddSlotButton dayId={dayId} type="break" duration={10}>
+          Break slot: Add 10 mins slot
+        </AddSlotButton>
+        <AddSlotButton dayId={dayId} type="break" duration={125}>
+          Lunch slot: 2h 5 mins
+        </AddSlotButton>
+        <AddSlotButton dayId={dayId} type="break" duration={30}>
+          Break slot: 30 mins
+        </AddSlotButton>
+      </Grid>
+    </Flex>
   );
 };
 
diff --git a/backend/custom_admin/src/components/shared/modal.tsx b/backend/custom_admin/src/components/shared/modal.tsx
deleted file mode 100644
index f5fb63741e..0000000000
--- a/backend/custom_admin/src/components/shared/modal.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import clsx from "clsx";
-import { useEffect } from "react";
-
-type Props = {
-  onClose: () => void;
-  children: React.ReactNode;
-  className?: string;
-  isOpen: boolean;
-};
-
-export const Modal = ({ isOpen, onClose, children, className }: Props) => {
-  useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "auto";
-    }
-
-    return () => {
-      document.body.style.overflow = "auto";
-    };
-  }, [isOpen]);
-
-  return (
-    <div>
-      <div
-        className="fixed top-0 left-0 w-full h-full bg-black/50 z-[500]"
-        onClick={onClose}
-      />
-      <div
-        className={clsx(
-          "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1000] bg-white",
-          className,
-        )}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
diff --git a/backend/custom_admin/src/components/utils/availability.ts b/backend/custom_admin/src/components/utils/availability.ts
index 75781346de..176059eeb9 100644
--- a/backend/custom_admin/src/components/utils/availability.ts
+++ b/backend/custom_admin/src/components/utils/availability.ts
@@ -1,5 +1,42 @@
 export type AvailabilityValue = "preferred" | "available" | "unavailable";
 
+// Single source of truth for how each availability value is presented.
+// Both the inline-styled tooltip badge (item.tsx) and the Radix Badge
+// (proposal-preview.tsx) read from here, so adding a new AvailabilityValue
+// forces updating one map and the Record type stays exhaustive.
+export const AVAILABILITY_META: Record<
+  AvailabilityValue,
+  {
+    label: string;
+    glyph: string;
+    color: "green" | "blue" | "red";
+    bg: string;
+    text: string;
+  }
+> = {
+  preferred: {
+    label: "Preferred",
+    glyph: "★",
+    color: "green",
+    bg: "#dcfce7",
+    text: "#15803d",
+  },
+  available: {
+    label: "Available",
+    glyph: "✓",
+    color: "blue",
+    bg: "#dbeafe",
+    text: "#1d4ed8",
+  },
+  unavailable: {
+    label: "Unavailable",
+    glyph: "✗",
+    color: "red",
+    bg: "#fee2e2",
+    text: "#b91c1c",
+  },
+};
+
 // Availability is stored at half-day granularity: "am" (before 12:00) or "pm" (12:00 and after).
 // A slot at 09:00 and one at 11:30 map to the same "am" bucket. The badge reflects the
 // half-day preference, not the exact start time of the slot.
diff --git a/backend/custom_admin/src/custom-styles.css b/backend/custom_admin/src/custom-styles.css
index 6d39885108..da6cf32626 100644
--- a/backend/custom_admin/src/custom-styles.css
+++ b/backend/custom_admin/src/custom-styles.css
@@ -25,14 +25,6 @@
   }
 }
 
-.btn {
-  @apply font-bold py-2 px-4 bg-slate-500 text-white hover:bg-slate-600;
-}
-
-.btn:disabled {
-  @apply opacity-50 cursor-not-allowed;
-}
-
 .radix-themes.is-widget-theme {
   min-height: auto;
   width: 100%;