diff --git a/app/controllers/api/control/track_cards_controller.rb b/app/controllers/api/control/track_cards_controller.rb
index fc45bc8..193bf3d 100644
--- a/app/controllers/api/control/track_cards_controller.rb
+++ b/app/controllers/api/control/track_cards_controller.rb
@@ -13,20 +13,24 @@ def index
         .where('activation_at <= ?', ts)
         .limit(10)
         .order(activation_at: :desc)
-        .map(&:as_json)
     else
       cards = [
-        TrackCard.current_for(params[:track_slug])&.as_json,
-        *TrackCard.where(track: params[:track_slug]).candidate.map(&:as_json),
+        TrackCard.current_for(params[:track_slug]),
+        *TrackCard.where(track: params[:track_slug]).candidate.to_a,
       ]
     end
     render(json: {
-      track_cards: cards.compact,
+      track_cards: cards.compact.map { |_| _.as_json(control: true) },
     })
   end
 
   def create
-    TrackCard.create!(track_card_params)
+    track_card = TrackCard.new(track_card_params)
+
+    now = Time.now 
+    track_card.activation_at = now if track_card.activation_at < now
+
+    track_card.save!
     EmitIvsMetadataJob.perform_now
     render(json: {ok: true}.to_json)
   end
diff --git a/app/javascript/Api.ts b/app/javascript/Api.ts
index 4bf51fd..40f3601 100644
--- a/app/javascript/Api.ts
+++ b/app/javascript/Api.ts
@@ -316,7 +316,7 @@ export type Attendee = {
 export type Conference = {
   default_track: string;
   track_order: TrackSlug[];
-  tracks: { [key: string]: Track };
+  tracks: { [key: TrackSlug]: Track };
 };
 
 export type TrackSlug = string;
@@ -329,11 +329,11 @@ export type Track = {
   card: TrackCard | null;
   card_candidate: TrackCard | null;
   spotlights: ChatSpotlight[];
-  presences: { [key: string]: StreamPresence }; // key:kind
+  presences: { [key in TrackStreamKind]: StreamPresence }; // key:kind
   viewerCount?: ViewerCount;
 };
 
-export interface TrackCard extends TrackCardHeader, TrackCardContent {}
+export type TrackCard = TrackCardHeader & TrackCardContent;
 
 export type TrackCardHeader = {
   track: TrackSlug;
@@ -430,7 +430,7 @@ export type GetAppVersionResponse = {
   release: string;
 };
 
-export type ChatSessionTracksBag = { [key: string]: TrackChatInfo | null };
+export type ChatSessionTracksBag = { [key: TrackSlug]: TrackChatInfo | null };
 
 export type GetChatSessionResponse = {
   expiry: number;
diff --git a/app/javascript/ContentCopyIcon.tsx b/app/javascript/ContentCopyIcon.tsx
new file mode 100644
index 0000000..84be91f
--- /dev/null
+++ b/app/javascript/ContentCopyIcon.tsx
@@ -0,0 +1,13 @@
+// Material Icon: content-copy
+import { createIcon } from "@chakra-ui/icons";
+
+export const ContentCopyIcon = createIcon({
+  displayName: "ContentCopy",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <path d="m0 0h24v24h0z" fill="none" />
+      <path d="m16 1h4c-1.1 0-2 .9-2 2v14h2v3h12v1zm3 4h8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2v7c0-1.1-.9-2-2-2zm0 16h8v7h11v14z" />
+    </>
+  ),
+});
diff --git a/app/javascript/ControlApi.tsx b/app/javascript/ControlApi.tsx
index b461fb1..9636c4d 100644
--- a/app/javascript/ControlApi.tsx
+++ b/app/javascript/ControlApi.tsx
@@ -45,8 +45,10 @@ export type ControlGetConferenceResponse = {
   speakers: { [key: string]: ConferenceSpeaker };
 };
 
+export type ControlTrackCard = TrackCard & { id: number };
+
 export type ControlGetTrackCardsResponse = {
-  track_cards: TrackCard[];
+  track_cards: ControlTrackCard[];
 };
 
 export type ControlListAttendeesResponse = {
@@ -121,6 +123,13 @@ export const ControlApi = {
     return resp.json();
   },
 
+  async deleteTrackCard(card: ControlTrackCard) {
+    const url = `/api/control/tracks/${encodeURIComponent(card.track)}/cards/${encodeURIComponent(card.id)}`;
+    const resp = await request(url, "DELETE", null, {});
+    mutate(`/api/control/tracks/${encodeURIComponent(card.track)}/cards`);
+    return resp.json();
+  },
+
   useAttendeeList(query: string | null) {
     return useSWR<ControlListAttendeesResponse, ApiError>(
       query !== null ? `/api/control/attendees?query=${encodeURIComponent(query)}` : null,
diff --git a/app/javascript/ControlStreamPresence.tsx b/app/javascript/ControlStreamPresence.tsx
index cc9b86c..81054f2 100644
--- a/app/javascript/ControlStreamPresence.tsx
+++ b/app/javascript/ControlStreamPresence.tsx
@@ -23,7 +23,7 @@ const ControlTrackCardForm = loadable(() => import("./ControlTrackCardForm"));
 
 export type Props = {
   track: Track;
-}
+};
 
 export const ControlStreamPresence: React.FC<Props> = ({ track }) => {
   //  const { data: controlConferenceData } = ControlApi.useConference();
@@ -114,7 +114,8 @@ export const StreamPresenceBox: React.FC<{
             <Button
               minWidth="120px"
               colorScheme={{ notready: "gray", golive: "teal", shutdown: "red" }[buttonAction]}
-              isDisabled={isRequesting || buttonAction === "notready"}
+              isLoading={isRequesting}
+              isDisabled={buttonAction === "notready"}
               onClick={onPresenceUpdateButton}
             >
               {{ notready: "Go Live", golive: "Go Live", shutdown: "End Stream" }[buttonAction]}
diff --git a/app/javascript/ControlTrackCardForm.tsx b/app/javascript/ControlTrackCardForm.tsx
index 10cb198..02ee4e4 100644
--- a/app/javascript/ControlTrackCardForm.tsx
+++ b/app/javascript/ControlTrackCardForm.tsx
@@ -1,92 +1,359 @@
-import React from "react";
+import React, { useEffect, useId, useState } from "react";
 import dayjs from "dayjs";
 import { useForm } from "react-hook-form";
 // import { useHistory } from "react-router-dom";
-import { Box, Container, Button, Link, FormControl, FormLabel, FormHelperText, Input } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  useDisclosure,
+  HStack,
+  Flex,
+  Textarea,
+  VStack,
+  InputGroup,
+  InputLeftElement,
+  Center,
+  Text,
+  Tooltip,
+  useToast,
+  Select,
+  UseDisclosureReturn,
+} from "@chakra-ui/react";
 
-import { Api, Track, TrackCard, TrackCardContent } from "./Api";
-import { ControlApi, ConferencePresentationSlug, ControlGetConferenceResponse } from "./ControlApi";
-import { ErrorAlert } from "./ErrorAlert";
+import { Api, TrackCard, TrackCardContent, TrackSlug } from "./Api";
+import { ControlApi, ControlTrackCard, ConferencePresentationSlug, ControlGetConferenceResponse } from "./ControlApi";
+import { ErrorAlert, errorToToast } from "./ErrorAlert";
 
-export type Props = {
-  track: Track;
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+} from "@chakra-ui/react";
+import ControlTrackCardView from "./ControlTrackCardView";
+import { ErrorBoundary } from "react-error-boundary";
+
+type FormData = {
+  json: string;
+  track: TrackSlug;
+  timeMode: "absolute" | "relative";
+  absoluteTime: string;
+  relativeTimeInSeconds: number;
+};
+
+type CardDraft =
+  | {
+      card: TrackCard | null;
+      error?: null;
+    }
+  | {
+      card?: null;
+      error: Error | unknown;
+    };
+
+function generateTrackCard(data: FormData): CardDraft {
+  if (!data.json.match(/[^\s]/)) {
+    return { card: null };
+  }
+  const json = ((j) => {
+    try {
+      return { json: JSON.parse(j) as TrackCardContent };
+    } catch (e) {
+      return { error: e };
+    }
+  })(data.json);
+  if (json.error) {
+    return { error: json.error };
+  }
+  const activationAt =
+    data.timeMode === "absolute"
+      ? data.absoluteTime === ""
+        ? dayjs().unix()
+        : dayjs(data.absoluteTime).unix()
+      : dayjs()
+          .add(data.relativeTimeInSeconds * 1000)
+          .unix();
+  const card: ControlTrackCard = {
+    ...json.json,
+    id: -1,
+    track: data.track,
+    ut: 0,
+    at: activationAt,
+  };
+  return { card };
 }
 
-export const ControlTrackCardForm: React.FC<Props> = ({ track }) => {
-  const { data: controlConferenceData } = ControlApi.useConference();
-  // const history = useHistory();
-  const [errorAlert, setErrorAlert] = React.useState<JSX.Element | null>(null);
+export const ControlTrackCardForm: React.FC<{
+  trackSlug: TrackSlug;
+  initialValue?: TrackCardContent;
+  disclosureProps?: UseDisclosureReturn;
+}> = ({ trackSlug, initialValue, disclosureProps }) => {
+  const formID = useId();
+  const toast = useToast();
+  const { isOpen, onOpen, onClose } = disclosureProps ?? useDisclosure();
+  const [isDraftGood, setIsDraftGood] = useState<boolean | null>();
   const [isRequesting, setIsRequesting] = React.useState<boolean>(false);
-
-  const { register, handleSubmit, reset } = useForm<{
-    slug: ConferencePresentationSlug;
-    inSeconds: number;
-  }>({
+  const { data: conferenceData } = Api.useConference();
+  const { register, handleSubmit, reset, watch, setValue } = useForm<FormData>({
     defaultValues: {
-      slug: "",
-      inSeconds: 0,
+      json: initialValue ? JSON.stringify(initialValue, null, 2) : "",
+      track: trackSlug,
+      timeMode: "absolute",
+      absoluteTime: dayjs().format("YYYY-MM-DDTHH:mm:ss"),
+      relativeTimeInSeconds: 0,
     },
   });
-
   const onSubmit = handleSubmit(async (data) => {
-    if (!controlConferenceData) return;
+    const finalDraft = generateTrackCard(data);
+    if (!finalDraft.card) return;
+    if (!isDraftGood) return;
     if (isRequesting) return;
     setIsRequesting(true);
-
     try {
-      const card: TrackCard = {
-        track: track.slug,
-        at: dayjs().add(data.inSeconds, "seconds").unix(),
-        ut: 0,
-        ...generateTrackCardFromPresentation(controlConferenceData, data.slug),
-      };
-      console.log(card);
+      const card = finalDraft.card;
+      console.log("draft to submit", card);
       await ControlApi.createTrackCard(card);
-      setErrorAlert(null);
+      reset();
+      onClose();
     } catch (e) {
-      setErrorAlert(
-        <Box my={2}>
-          <ErrorAlert error={e} />
-        </Box>,
-      );
+      toast(errorToToast(e));
     }
     setIsRequesting(false);
-    reset();
   });
+  const loadPredefined = (card: TrackCardContent) => {
+    setValue("json", JSON.stringify(card, null, 2));
+  };
+  const timeMode = watch("timeMode");
+  const cardDraft = generateTrackCard(watch());
+  return (
+    <>
+      {disclosureProps ? null : <Button onClick={onOpen}>Compose</Button>}
 
-  if (!controlConferenceData) {
-    return <p>Loading</p>;
-  }
+      <Modal size="5xl" isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Compose TrackCard</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <HStack w="100%" alignItems="flex-start">
+              <Box flex={1}>
+                <VStack w="100%" alignItems="flex-start">
+                  <CardFormPredefinedLoader onLoad={loadPredefined} />
+                  <VStack as="form" w="100%" onSubmit={onSubmit} id={formID}>
+                    <Textarea
+                      placeholder="TrackCardContent in JSON"
+                      w="100%"
+                      minH="300px"
+                      fontSize="12px"
+                      fontFamily={[
+                        "Noto Sans CJK Mono",
+                        "Source Han Code JP",
+                        "Source Code Pro",
+                        "Consolas",
+                        "Andale Mono",
+                        "monospace",
+                      ]}
+                      {...register("json")}
+                    />
+                    <FormControl>
+                      <FormLabel>Track</FormLabel>
+                      <Select size="sm" {...register("track")} isDisabled={!conferenceData}>
+                        {conferenceData ? (
+                          conferenceData.conference.track_order.map((v) => {
+                            const t = conferenceData.conference.tracks[v];
+                            if (!t) return null;
+                            return (
+                              <option key={t.slug} value={t.slug}>
+                                {t.name} ({t.slug})
+                              </option>
+                            );
+                          })
+                        ) : trackSlug[0] !== "_" ? (
+                          <option key={trackSlug} value={trackSlug}>
+                            {trackSlug}
+                          </option>
+                        ) : null}
+                        <option value="_screen">Screen (_screen)</option>
+                      </Select>
+                    </FormControl>
+                    <FormControl>
+                      <FormLabel>Activate at (default=now)</FormLabel>
+                      <InputGroup display={timeMode === "absolute" ? "block" : "none"}>
+                        <InputLeftElement width="4.0rem">
+                          <Tooltip
+                            label="Click to enter using relative time"
+                            display={timeMode === "absolute" ? "block" : "none"}
+                            openDelay={30}
+                          >
+                            <Button size="sm" h="1.75rem" onClick={() => setValue("timeMode", "relative")}>
+                              at:
+                            </Button>
+                          </Tooltip>
+                        </InputLeftElement>
+                        <Input
+                          pl="4.5rem"
+                          type="datetime-local"
+                          step={1}
+                          {...register("absoluteTime", { valueAsDate: true })}
+                        />
+                      </InputGroup>
+                      <InputGroup display={timeMode === "relative" ? "block" : "none"}>
+                        <InputLeftElement width="4.0rem">
+                          <Tooltip
+                            label="Click to enter using absolute time"
+                            display={timeMode === "relative" ? "block" : "none"}
+                            openDelay={30}
+                          >
+                            <Button size="sm" h="1.75rem" onClick={() => setValue("timeMode", "absolute")}>
+                              in:
+                            </Button>
+                          </Tooltip>
+                        </InputLeftElement>
+                        <Input
+                          pl="4.5rem"
+                          type="number"
+                          {...register("relativeTimeInSeconds", { valueAsNumber: true })}
+                        />
+                      </InputGroup>
+                    </FormControl>
+                  </VStack>
+                </VStack>
+              </Box>
+              <Box flex={1} h="100%">
+                <CardFormPreview draft={cardDraft} onFeedback={(ok) => setIsDraftGood(ok)} />
+              </Box>
+            </HStack>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button
+              colorScheme="blue"
+              mr={3}
+              form={formID}
+              type="submit"
+              isDisabled={!isDraftGood}
+              isLoading={isRequesting}
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
 
-  //<Input {...register("at", { valueAsDate: true })} type="datetime-local" />
+const CardFormPredefinedLoader: React.FC<{ onLoad: (c: TrackCardContent) => any }> = ({ onLoad }) => {
+  const toast = useToast();
+  const { data: controlConferenceData } = ControlApi.useConference();
+  const { register, handleSubmit, reset } = useForm<{
+    slug: ConferencePresentationSlug;
+  }>({
+    defaultValues: {
+      slug: "",
+    },
+  });
+
+  const onSubmit = handleSubmit(async (data) => {
+    if (!controlConferenceData) return;
+    const card = generateTrackCardFromPresentation(controlConferenceData, data.slug);
+    if (card) {
+      console.log(card);
+      onLoad(card);
+      reset();
+    } else {
+      toast({
+        status: "error",
+        title: "Presentation not exists",
+        description: `Couldn't find "${data.slug}"!`,
+        duration: 10000,
+        isClosable: true,
+        position: "top",
+      });
+      return;
+    }
+  });
 
   return (
-    <Box>
-      {errorAlert}
+    <Box w="100%">
       <form onSubmit={onSubmit}>
-        <FormControl mt={4} id="cardform_slug" isRequired>
-          <FormLabel>Name</FormLabel>
-          <Input {...register("slug")} />
-        </FormControl>
-
-        <FormControl mt={4} id="cardform_at">
-          <FormLabel>Activation In</FormLabel>
-          <Input {...register("inSeconds", { valueAsNumber: true })} type="number" />
-        </FormControl>
-        <Button mt={4} size="lg" type="submit" isLoading={isRequesting}>
-          Save
-        </Button>
+        <Flex w="100%" direction="row">
+          <Input flexGrow={2} size="sm" placeholder="Presentation slug to load..." {...register("slug")} />
+          <Button size="sm" type="submit" isLoading={!controlConferenceData}>
+            Load
+          </Button>
+        </Flex>
       </form>
     </Box>
   );
 };
 
+const CardFormPreviewFeedback: React.FC<{
+  card: TrackCard;
+  onFeedback: (card: TrackCard) => void;
+  children: React.ReactNode;
+}> = ({ card, onFeedback, children }) => {
+  useEffect(() => {
+    onFeedback(card);
+  }, [card]);
+  return <>{children}</>;
+};
+
+const CardFormPreview: React.FC<{ draft: CardDraft; onFeedback: (ok: boolean) => void }> = ({ draft, onFeedback }) => {
+  const [lastKnownGoodCard, setLastKnownGoodCard] = useState(draft.card ?? null);
+  let card = draft.card ?? lastKnownGoodCard;
+  let onGoodState = !!(card && card === draft.card);
+
+  useEffect(() => {
+    onFeedback(onGoodState);
+  }, [onGoodState]);
+
+  if (card === null) {
+    return (
+      <Center w="100%" h="100%">
+        <Text>Preview will appear here!</Text>
+      </Center>
+    );
+  }
+
+  return (
+    <Box w="100%" h="100%">
+      {card ? (
+        <ErrorBoundary
+          resetKeys={[card]}
+          fallbackRender={({ error }) => {
+            return (
+              <>
+                {lastKnownGoodCard ? <ControlTrackCardView card={{ id: -1, ...lastKnownGoodCard }} /> : null}
+                <ErrorAlert error={error} />
+              </>
+            );
+          }}
+        >
+          <CardFormPreviewFeedback onFeedback={(card) => setLastKnownGoodCard(card)} card={card}>
+            <ControlTrackCardView card={{ id: -1, ...card }} />
+          </CardFormPreviewFeedback>
+        </ErrorBoundary>
+      ) : null}
+      {draft.error ? <ErrorAlert error={draft.error} /> : null}
+    </Box>
+  );
+};
+
 function generateTrackCardFromPresentation(
   controlConferenceData: ControlGetConferenceResponse,
   slug: ConferencePresentationSlug,
-): TrackCardContent {
-  console.log(controlConferenceData);
+): TrackCardContent | null {
   const presentation = controlConferenceData.presentations[slug]!;
+  if (!presentation) {
+    return null;
+  }
 
   return {
     interpretation: presentation.language !== "EN", // TODO:
diff --git a/app/javascript/ControlTrackCardView.tsx b/app/javascript/ControlTrackCardView.tsx
index ab4c5b1..7220aa9 100644
--- a/app/javascript/ControlTrackCardView.tsx
+++ b/app/javascript/ControlTrackCardView.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import React, { useState, useCallback } from "react";
 import dayjs from "dayjs";
 import loadable from "@loadable/component";
 
-import { Flex, Box, Tag, HStack, useDisclosure } from "@chakra-ui/react";
+import { Flex, Box, Tag, HStack, useDisclosure, IconButton, Tooltip, useToast } from "@chakra-ui/react";
 import { Heading, Text } from "@chakra-ui/react";
 import {
   Button,
@@ -14,31 +14,47 @@ import {
   ModalBody,
   ModalFooter,
 } from "@chakra-ui/react";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeader,
+  PopoverBody,
+  PopoverFooter,
+  PopoverArrow,
+  PopoverCloseButton,
+  PopoverAnchor,
+} from "@chakra-ui/react";
 
 import { Api, ScreenControl, ScreenNextSchedule, Speaker, Topic, Track, TrackCard, UpcomingTopic } from "./Api";
+import { ControlApi, ControlTrackCard } from "./ControlApi";
+
 import { Colors } from "./theme";
 import { SpeakerAvatar } from "./SpeakerAvatar";
+import { DeleteIcon, CopyIcon } from "@chakra-ui/icons";
+import { errorToToast } from "./ErrorAlert";
 
+const ControlTrackCardForm = loadable(() => import("./ControlTrackCardForm")); // XXX: cyclic?
 const TrackCardView = loadable(() => import("./TrackCardView"));
 
-// [x] interpretation flag
-// [x] topic. speaker name
-// [x] TrackCardView preview (topic&speaker in full)
-// screen
-//   filler
-//   upcoming topic
-//   basic announcement (heading, next schedule, footer)
-// upcoming_topics
-//   track, at, topic, speakers
-//
-// <TrackCardView card={card} />;
-
-export const ControlTrackCardView: React.FC<{ card: TrackCard }> = ({ card }) => {
+export const ControlTrackCardView: React.FC<{ card: ControlTrackCard }> = ({ card }) => {
+  const isActivated = dayjs().unix() >= card.at;
   return (
     <Box border="1px solid" borderColor={Colors.chatBorder2} backgroundColor="white">
-      <Heading as="h6" size="xs">
-        {dayjs.unix(card.at).format()}
-      </Heading>
+      <Flex justifyContent="space-between" direction="row">
+        <Heading as="h6" size="xs">
+          {dayjs.unix(card.at).format()}
+        </Heading>
+
+        <Box>
+          {card.id >= 0 ? (
+            <>
+              {card.id >= 0 && !isActivated ? <CardRemoveAction card={card} /> : null}
+              <CardCopyAction card={card} />
+            </>
+          ) : null}
+        </Box>
+      </Flex>
 
       {card.upcoming_topics ? (
         <CardUpcomingTopics topics={card.upcoming_topics} />
@@ -179,4 +195,75 @@ const CardScreen: React.FC<{ screen: ScreenControl }> = ({ screen }) => {
   );
 };
 
+const CardRemoveAction: React.FC<{ card: ControlTrackCard }> = ({ card }) => {
+  const [isRequesting, setIsRequesting] = useState(false);
+  const toast = useToast();
+  const perform = () => {
+    if (isRequesting) return;
+    setIsRequesting(true);
+    ControlApi.deleteTrackCard(card)
+      .then(() => {
+        setIsRequesting(false);
+      })
+      .catch((e) => {
+        setIsRequesting(false);
+        toast(errorToToast(e));
+      });
+  };
+  return (
+    <Popover closeOnBlur matchWidth>
+      <PopoverTrigger>
+        <IconButton
+          background="transparent"
+          icon={<DeleteIcon boxSize="14px" />}
+          minW="30px"
+          w="30px"
+          h="30px"
+          aria-label="Delete"
+          type="submit"
+        />
+      </PopoverTrigger>
+      <PopoverContent w="100px">
+        <PopoverArrow />
+        <PopoverCloseButton />
+        <PopoverHeader>Sure?</PopoverHeader>
+        <PopoverBody>
+          <Button colorScheme="red" size="sm" onClick={perform} isLoading={isRequesting}>
+            Remove
+          </Button>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const CardCopyAction: React.FC<{ card: ControlTrackCard }> = ({ card }) => {
+  const [shouldRender, setShouldRender] = useState(false);
+  const disclosureProps = useDisclosure({ defaultIsOpen: true });
+  const onOpen = useCallback(() => {
+    if (shouldRender) {
+      disclosureProps.onOpen();
+    } else {
+      setShouldRender(true);
+    }
+  }, [shouldRender]);
+
+  return (
+    <>
+      <IconButton
+        background="transparent"
+        icon={<CopyIcon boxSize="14px" />}
+        minW="30px"
+        w="30px"
+        h="30px"
+        aria-label="Duplicate"
+        onClick={onOpen}
+      />
+      {shouldRender ? (
+        <ControlTrackCardForm initialValue={card} trackSlug={card.track} disclosureProps={disclosureProps} />
+      ) : null}
+    </>
+  );
+};
+
 export default ControlTrackCardView;
diff --git a/app/javascript/ControlTrackCards.tsx b/app/javascript/ControlTrackCards.tsx
index 98501d2..2f90e4d 100644
--- a/app/javascript/ControlTrackCards.tsx
+++ b/app/javascript/ControlTrackCards.tsx
@@ -6,7 +6,7 @@ import { Flex, Box } from "@chakra-ui/react";
 import { Heading } from "@chakra-ui/react";
 
 import { Api, Track, TrackCard } from "./Api";
-import { ControlApi } from "./ControlApi";
+import { ControlApi, ControlTrackCard } from "./ControlApi";
 
 const TrackCardView = loadable(() => import("./TrackCardView"));
 const ControlTrackCardForm = loadable(() => import("./ControlTrackCardForm"));
@@ -25,7 +25,7 @@ export const ControlTrackCards: React.FC<Props> = ({ track }) => {
       <Heading>
         {track.name} ({track.slug})
       </Heading>
-      <ControlTrackCardForm track={track} />
+      <ControlTrackCardForm trackSlug={track.slug} />
       {cardsData?.track_cards.map((card) => (
         <TrackCardBox key={`${track.slug}-${card.at}`} card={card} />
       ))}
@@ -33,7 +33,7 @@ export const ControlTrackCards: React.FC<Props> = ({ track }) => {
   );
 };
 
-export const TrackCardBox: React.FC<{ card: TrackCard }> = ({ card }) => {
+export const TrackCardBox: React.FC<{ card: ControlTrackCard }> = ({ card }) => {
   return (
     <Box mt={3}>
       <ControlTrackCardView card={card} />
diff --git a/app/javascript/ControlTrackCardsPage.tsx b/app/javascript/ControlTrackCardsPage.tsx
index 1112fba..f2d8f01 100644
--- a/app/javascript/ControlTrackCardsPage.tsx
+++ b/app/javascript/ControlTrackCardsPage.tsx
@@ -14,9 +14,13 @@ export const ControlTrackCardsPage: React.FC = () => {
     <Box mx="50px">
       <Flex direction="row">
         {data.conference.track_order.map((slug) => (
-          <ControlTrackCards key={slug} track={data.conference.tracks[slug]!} />
+          <Box flex={1} key={slug}>
+            <ControlTrackCards track={data.conference.tracks[slug]!} />
+          </Box>
         ))}
-        <ControlTrackCards key="_screen" track={data.conference.tracks["_screen"]!} />
+        <Box flex={1} key="_screen">
+          <ControlTrackCards track={data.conference.tracks["_screen"]!} />
+        </Box>
       </Flex>
     </Box>
   );
diff --git a/app/javascript/DeleteIcon.tsx b/app/javascript/DeleteIcon.tsx
new file mode 100644
index 0000000..d29b935
--- /dev/null
+++ b/app/javascript/DeleteIcon.tsx
@@ -0,0 +1,13 @@
+// Material Icon: delete
+import { createIcon } from "@chakra-ui/icons";
+
+export const DeleteIcon = createIcon({
+  displayName: "Delete",
+  viewBox: "0 0 24 24",
+  path: (
+    <>
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+    </>
+  ),
+});
diff --git a/app/javascript/ErrorAlert.tsx b/app/javascript/ErrorAlert.tsx
index 4822daf..b3d5a56 100644
--- a/app/javascript/ErrorAlert.tsx
+++ b/app/javascript/ErrorAlert.tsx
@@ -3,7 +3,7 @@ import { Alert, AlertIcon, AlertTitle, AlertDescription, UseToastOptions } from
 
 export type Props = {
   error: Error | unknown;
-}
+};
 
 export const ErrorAlert: React.FC<Props> = ({ error }) => {
   let e =
@@ -38,5 +38,6 @@ export function errorToToast(error: Error | unknown): UseToastOptions {
     description: e.message,
     duration: 30000,
     isClosable: true,
+    position: "top",
   };
 }
diff --git a/app/models/track_card.rb b/app/models/track_card.rb
index 489f54b..a68bdf9 100644
--- a/app/models/track_card.rb
+++ b/app/models/track_card.rb
@@ -27,12 +27,12 @@ def self.set(track, content, t: Time.zone.now, emit: true)
     EmitIvsMetadataJob.perform_later if emit
   end
 
-  def as_json
+  def as_json(control: false)
     content.merge(
       at: self.activation_at.to_i,
       track: track,
       ut: self.updated_at.to_i,
-    )
+    ).merge(control ? {id: id} : {})
   end
 
   def candidate?(t = Time.zone.now)
@@ -60,9 +60,16 @@ def need_emit_as_candidate?(t = Time.zone.now)
 
     validate_topic if content['topic']
     validate_speakers if content['speakers']
+
+    validate_screen if content['screen']
+    validate_upcoming_topics if content['upcoming_topics']
   end
 
   private def validate_topic
+    unless content['topic'].kind_of?(Hash)
+      errors.add :content, '.topic should be a object (Hash)'
+      return
+    end
     unless content['topic']['labels'].kind_of?(Array)
       errors.add :content, '.topic.labels should be a string[]'
     end
@@ -74,6 +81,7 @@ def need_emit_as_candidate?(t = Time.zone.now)
   private def validate_speakers
     unless content['speakers'].kind_of?(Array)
       errors.add :content, '.speakers should be a Speaker[]'
+      return
     end
     content['speakers'].each do |s|
       unless s.kind_of?(Hash)
@@ -85,6 +93,65 @@ def need_emit_as_candidate?(t = Time.zone.now)
     end
   end
 
+  private def validate_screen
+    if content['screen']['heading'] && !content['screen']['heading'].is_a?(String)
+      errors.add :content, '.screen.heading should be a string or null'
+    end
+    if content['screen']['next_schedule'] 
+      unless content['screen']['next_schedule'].is_a?(Hash)
+        errors.add :content, '.screen.next_schedule should be a ScreenNextSchedule or null'
+        return
+      end
+      unless content['screen']['next_schedule']['at'].is_a?(Integer)
+        errors.add :content, '.screen.next_schedule.at should be a number'
+      end
+      unless content['screen']['next_schedule']['title'].is_a?(String)
+        errors.add :content, '.screen.next_schedule.title should be a string'
+      end
+    end
+    if content['screen']['footer'] && !content['screen']['footer'].is_a?(String)
+      errors.add :content, '.screen.footer should be a string or null'
+    end
+  end
+
+  private def validate_upcoming_topics
+    unless content['upcoming_topics'].kind_of?(Array)
+      errors.add :content, '.upcoming_topics should be a UpcomingTopic[]'
+      return
+    end
+    content['upcoming_topics'].each do |ut|
+      unless ut.kind_of?(Hash)
+        errors.add :content, '.upcoming_topics[] should be a UpcomingTopic object'
+        next
+      end
+      errors.add :content, '.upcoming_topics[].at should be a number' unless ut['at'].is_a?(Integer)
+
+      unless ut['speakers'].kind_of?(Array)
+        errors.add :content, '.upcoming_topics[].speakers should be a Speaker[]'
+        next
+      end
+      ut['speakers'].each do |s|
+        unless s.kind_of?(Hash)
+          errors.add :content, '.upcoming_topics[].speakers should be a Speaker[]'
+          next
+        end
+        errors.add :content, '.upcoming_topics[].speakers[].name should be present' unless s['name'].kind_of?(String)
+      end
+      unless ut['topic'].kind_of?(Hash)
+        errors.add :content, '.upcoming_topics[].topic should be a Topic'
+        next
+      end
+      unless ut['topic']['labels'].kind_of?(Array)
+        errors.add :content, '.upcoming_topics[].topic.labels should be a string[]'
+        next
+      end
+      unless ut['topic']['labels'].all? { |_| _.kind_of?(String) }
+        errors.add :content, '.upcoming_topics[].topic.labels should be a string[]'
+        next
+      end
+    end
+  end
+
   def self.create_dummy!(track, at: Time.zone.now)
     words = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.".split(/ +/).shuffle
     create!(
diff --git a/package-lock.json b/package-lock.json
index 2c0318a..c0f712b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "dequal": "^2.0.3",
         "react": "^18.0.17",
         "react-dom": "^18.0.6",
+        "react-error-boundary": "^3.1.4",
         "react-hook-form": "^7.34.2",
         "react-router-dom": "^6.3.0",
         "react-textarea-autosize": "^8.3.4",
@@ -5467,6 +5468,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
+      "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-fast-compare": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
@@ -10962,6 +10978,14 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-error-boundary": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
+      "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
+      "requires": {
+        "@babel/runtime": "^7.12.5"
+      }
+    },
     "react-fast-compare": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
diff --git a/package.json b/package.json
index c10ecec..58b0802 100644
--- a/package.json
+++ b/package.json
@@ -7,24 +7,24 @@
   },
   "devDependencies": {
     "@types/loadable__component": "^5.13.4",
+    "@types/rails__ujs": "^6.0.1",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
     "@types/video.js": "^7.3.45",
+    "css-loader": "^6.7.1",
     "file-loader": "^6.2.0",
     "framer-motion": "^4.1.17",
     "glob": "^8.0.3",
+    "mini-css-extract-plugin": "^2.6.1",
     "prettier": "^2.7.1",
+    "sass": "^1.54.5",
+    "sass-loader": "^13.0.2",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.8.2",
     "util": "^0.12.4",
     "webpack": "^5.74.0",
     "webpack-assets-manifest": "^5.1.0",
-    "webpack-cli": "^4.10.0",
-    "css-loader": "^6.7.1",
-    "mini-css-extract-plugin": "^2.6.1",
-    "ts-loader": "^9.3.1",
-    "typescript": "^4.8.2",
-    "@types/rails__ujs": "^6.0.1",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "sass": "^1.54.5",
-    "sass-loader": "^13.0.2"
+    "webpack-cli": "^4.10.0"
   },
   "dependencies": {
     "@aws-sdk/client-chime": "^3.159.0",
@@ -46,6 +46,7 @@
     "dequal": "^2.0.3",
     "react": "^18.0.17",
     "react-dom": "^18.0.6",
+    "react-error-boundary": "^3.1.4",
     "react-hook-form": "^7.34.2",
     "react-router-dom": "^6.3.0",
     "react-textarea-autosize": "^8.3.4",