diff --git a/backend/src/api/model/search/realm.rs b/backend/src/api/model/search/realm.rs
index 11aa02141..d6e9d75c0 100644
--- a/backend/src/api/model/search/realm.rs
+++ b/backend/src/api/model/search/realm.rs
@@ -21,7 +21,7 @@ impl search::Realm {
     }
 
     fn path(&self) -> &str {
-        &self.full_path
+        if self.full_path.is_empty() { "/" } else { &self.full_path }
     }
 
     fn ancestor_names(&self) -> &[Option<String>] {
diff --git a/frontend/src/i18n/locales/de.yaml b/frontend/src/i18n/locales/de.yaml
index 310da4d17..13444490a 100644
--- a/frontend/src/i18n/locales/de.yaml
+++ b/frontend/src/i18n/locales/de.yaml
@@ -20,6 +20,8 @@ general:
   logo-alt: Das Logo von „{{title}}“
   no-root-children: Noch keine Seiten ...
   failed-to-load-thumbnail: Konnte Vorschaubild nicht laden
+  yes: Ja
+  no: Nein
   form:
     select:
       no-options: Keine Optionen
@@ -140,6 +142,8 @@ video:
     title: Video einbetten
   caption: Untertitel
   manage: Verwalten
+  start: Anfang
+  end: Ende
 
 series:
   series: Serie
@@ -234,17 +238,28 @@ manage:
       title: Titel
       created: Erstellt
     no-description: Keine Beschreibung
-    video-details: 'Videodetails: „{{title}}“'
-    technical-details: Technische Details
-    opencast-id: Opencast-ID
-    available-resolutions: Verfügbare Auflösungen
     page-showing-video-ids: '{{start}}–{{end}} von {{total}}'
     no-videos-found: Keine Videos gefunden.
-    share-direct-link: Via Direktlink teilen
-    open-in-editor: Im Videoeditor öffnen
-    referencing-pages: Referenzierende Seiten
-    referencing-pages-explanation: 'Dieses Video wird von den folgenden Seiten referenziert:'
-    no-referencing-pages: Dieses Video wird von keiner Seite referenziert.
+    details:
+      title: Videodetails
+      share-direct-link: Via Direktlink teilen
+      open-in-editor: Im Videoeditor öffnen
+      referencing-pages: Referenzierende Seiten
+      referencing-pages-explanation: 'Dieses Video wird von den folgenden Seiten referenziert:'
+      no-referencing-pages: Dieses Video wird von keiner Seite referenziert.
+    thumbnail:
+      title: Vorschaubild
+    acl:
+      title: Zugangsbeschränkung
+    technical-details:
+      title: Technische Details
+      tracks: Video/Audio-Spuren
+      unknown-mimetype: Unbekannter MIME-Type
+      opencast-id: Opencast-ID
+      further-info: Weitere Informationen
+      synced: Synchronisiert?
+      part-of: 'Teil von:'
+      is-live: Live?
 
   are-you-sure: Sind Sie sich sicher?
 
diff --git a/frontend/src/i18n/locales/en.yaml b/frontend/src/i18n/locales/en.yaml
index a069e3eb0..64de03125 100644
--- a/frontend/src/i18n/locales/en.yaml
+++ b/frontend/src/i18n/locales/en.yaml
@@ -19,6 +19,8 @@ general:
   logo-alt: Logo of “{{title}}”
   no-root-children: No pages yet ...
   failed-to-load-thumbnail: Failed to load thumbnail
+  yes: "Yes"
+  no: "No"
   form:
     select:
       no-options: No options
@@ -137,6 +139,8 @@ video:
     title: Embed video
   caption: Caption
   manage: Manage
+  start: Start
+  end: End
 
 series:
   series: Series
@@ -227,17 +231,28 @@ manage:
       title: Title
       created: Created
     no-description: No description
-    video-details: 'Video Details: “{{title}}”'
-    technical-details: Technical details
-    opencast-id: Opencast ID
-    available-resolutions: Available resolutions
     page-showing-video-ids: '{{start}}–{{end}} of {{total}}'
     no-videos-found: No videos found.
-    share-direct-link: Share via direct link
-    open-in-editor: Open in video editor
-    referencing-pages: Referencing pages
-    referencing-pages-explanation: 'This video is referenced on the following pages:'
-    no-referencing-pages: No pages reference this video.
+    details:
+      title: Video details
+      share-direct-link: Share via direct link
+      open-in-editor: Open in video editor
+      referencing-pages: Referencing pages
+      referencing-pages-explanation: 'This video is referenced on the following pages:'
+      no-referencing-pages: No pages reference this video.
+    thumbnail:
+      title: Thumbnail
+    acl:
+      title: Manage access
+    technical-details:
+      title: Technical details
+      tracks: Video/audio tracks
+      unknown-mimetype: Unknown MIME type
+      opencast-id: Opencast ID
+      further-info: Further information
+      synced: Synchronized?
+      part-of: 'Part of:'
+      is-live: Live?
 
   are-you-sure: Are you sure?
 
diff --git a/frontend/src/layout/Burger.tsx b/frontend/src/layout/Burger.tsx
index f8bf11e93..08cf15aed 100644
--- a/frontend/src/layout/Burger.tsx
+++ b/frontend/src/layout/Burger.tsx
@@ -1,12 +1,9 @@
-import { ReactNode } from "react";
-
-
 type BurgerMenuProps = {
     hide: () => void;
-    children: ReactNode;
+    items: [] | readonly [JSX.Element] | readonly [JSX.Element, JSX.Element];
 };
 
-export const BurgerMenu: React.FC<BurgerMenuProps> = ({ hide, children }) => (
+export const BurgerMenu: React.FC<BurgerMenuProps> = ({ hide, items }) => (
     <div
         onClick={e => {
             if (e.target === e.currentTarget) {
@@ -35,11 +32,18 @@ export const BurgerMenu: React.FC<BurgerMenuProps> = ({ hide, children }) => (
             width: "clamp(260px, 75%, 450px)",
             overflowY: "auto",
             borderTop: "1px solid var(--grey80)",
+            gap: 16,
             "& > *:first-child": {
-                borderBottom: "1px solid var(--grey80)",
+                borderBottom: "1px dashed var(--grey80)",
+            },
+            "& > *:last-child": {
+                borderTop: "1px dashed var(--grey80)",
             },
         }}>
-            {children}
+            {items.length > 0 && <div>{items[0]}</div>}
+            {items.length > 1 && <>
+                <div>{items[1]}</div>
+            </>}
         </div>
     </div>
 );
diff --git a/frontend/src/layout/Navigation.tsx b/frontend/src/layout/Navigation.tsx
index 630336192..e864afd0f 100644
--- a/frontend/src/layout/Navigation.tsx
+++ b/frontend/src/layout/Navigation.tsx
@@ -4,7 +4,13 @@ import { graphql, useFragment } from "react-relay";
 
 import type { NavigationData$key } from "./__generated__/NavigationData.graphql";
 import { useTranslation } from "react-i18next";
-import { FOCUS_STYLE_INSET, LinkList, LinkWithIcon, SIDE_BOX_BORDER_RADIUS } from "../ui";
+import {
+    ellipsisOverflowCss,
+    FOCUS_STYLE_INSET,
+    LinkList,
+    LinkWithIcon,
+    SIDE_BOX_BORDER_RADIUS,
+} from "../ui";
 import { MissingRealmName, sortRealms } from "../routes/util";
 
 
@@ -98,13 +104,7 @@ type ItemProps = {
 
 const Item: React.FC<ItemProps> = ({ label, link }) => (
     <LinkWithIcon to={link} iconPos="right">
-        <div css={{
-            display: "-webkit-box",
-            WebkitBoxOrient: "vertical",
-            WebkitLineClamp: 3,
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-        }}>{label}</div>
+        <div css={ellipsisOverflowCss(3)}>{label}</div>
         <FiChevronRight />
     </LinkWithIcon>
 );
diff --git a/frontend/src/layout/Root.tsx b/frontend/src/layout/Root.tsx
index 1eb4082c5..9477f62ef 100644
--- a/frontend/src/layout/Root.tsx
+++ b/frontend/src/layout/Root.tsx
@@ -25,16 +25,14 @@ type Props = {
 
 export const Root: React.FC<Props> = ({ nav, children }) => {
     const menu = useMenu();
-    const navElements = Array.isArray(nav) ? nav : [nav];
+    const navElements = Array.isArray(nav) ? nav : [nav] as const;
     const navExists = navElements.length > 0;
 
     return (
         <Outer disableScrolling={menu.state === "burger"}>
             <Header hideNavIcon={!navExists} />
             {menu.state === "burger" && navExists && (
-                <BurgerMenu hide={() => menu.close()}>
-                    {navElements.map((elem, i) => <div key={i}>{elem}</div>)}
-                </BurgerMenu>
+                <BurgerMenu items={navElements} hide={() => menu.close()} />
             )}
             <div css={{ margin: OUTER_CONTAINER_MARGIN }}>
                 <div css={{
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 0b04eb93d..a7f146329 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -10,11 +10,12 @@ import { RealmRoute } from "./routes/Realm";
 import { DirectOpencastVideoRoute, DirectVideoRoute, VideoRoute } from "./routes/Video";
 import { DirectSeriesOCRoute, DirectSeriesRoute } from "./routes/Series";
 import { ManageVideosRoute } from "./routes/manage/Video";
-import { ManageSingleVideoRoute } from "./routes/manage/Video/Single";
 import { UploadRoute } from "./routes/Upload";
 import { SearchRoute } from "./routes/Search";
 import { InvalidUrlRoute } from "./routes/InvalidUrl";
 import { BlockEmbedRoute, EmbedVideoRoute } from "./routes/Embed";
+import { ManageVideoDetailsRoute } from "./routes/manage/Video/Details";
+import { ManageVideoTechnicalDetailsRoute } from "./routes/manage/Video/TechnicalDetails";
 
 
 
@@ -41,7 +42,8 @@ const {
         DirectSeriesOCRoute,
         ManageRoute,
         ManageVideosRoute,
-        ManageSingleVideoRoute,
+        ManageVideoDetailsRoute,
+        ManageVideoTechnicalDetailsRoute,
         ManageRealmRoute,
         UploadRoute,
         AddChildRoute,
diff --git a/frontend/src/routes/Search.tsx b/frontend/src/routes/Search.tsx
index c3aeb7d28..a22e21246 100644
--- a/frontend/src/routes/Search.tsx
+++ b/frontend/src/routes/Search.tsx
@@ -15,6 +15,7 @@ import { Card } from "../ui/Card";
 import { PageTitle } from "../layout/header/ui";
 import { BreadcrumbsContainer, BreadcrumbSeparator } from "../ui/Breadcrumbs";
 import { MissingRealmName } from "./util";
+import { ellipsisOverflowCss } from "../ui";
 
 
 export const isSearchActive = (): boolean => document.location.pathname === "/~search";
@@ -190,7 +191,7 @@ const SearchEvent: React.FC<SearchEventProps> = ({
     // link should be avoided.
     const link = hostRealms.length !== 1
         ? `/!v/${id.slice(2)}`
-        : `${hostRealms[0].path}/v/${id.slice(2)}`;
+        : `${hostRealms[0].path.replace(/^\/$/, "")}/v/${id.slice(2)}`;
 
     return (
         <Item key={id} link={link}>
@@ -212,11 +213,7 @@ const SearchEvent: React.FC<SearchEventProps> = ({
             <div css={{ color: "black" }}>
                 <h3 css={{
                     marginBottom: 6,
-                    display: "-webkit-box",
-                    WebkitBoxOrient: "vertical",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    WebkitLineClamp: 2,
+                    ...ellipsisOverflowCss(2),
                 }}>{title}</h3>
                 <Creators creators={creators} />
                 <SmallDescription text={description} lines={3} />
diff --git a/frontend/src/routes/Video.tsx b/frontend/src/routes/Video.tsx
index 8829488d4..f6b340145 100644
--- a/frontend/src/routes/Video.tsx
+++ b/frontend/src/routes/Video.tsx
@@ -49,6 +49,7 @@ import { NavigationData$key } from "../layout/__generated__/NavigationData.graph
 import { getEventTimeInfo } from "../util/video";
 import { Creators } from "../ui/Video";
 import { Description } from "../ui/metadata";
+import { ellipsisOverflowCss } from "../ui";
 
 
 // ===========================================================================================
@@ -378,13 +379,7 @@ const VideoTitle: React.FC<VideoTitleProps> = ({ title }) => (
         [`@media (max-width: ${BREAKPOINT_MEDIUM}px)`]: { fontSize: 20 },
         [`@media (max-width: ${BREAKPOINT_SMALL}px)`]: { fontSize: 18 },
         lineHeight: 1.2,
-
-        // Truncate title after two lines
-        display: "-webkit-box",
-        WebkitBoxOrient: "vertical",
-        textOverflow: "ellipsis",
-        WebkitLineClamp: 2,
-        overflow: "hidden",
+        ...ellipsisOverflowCss(2),
     }} />
 );
 
diff --git a/frontend/src/routes/manage/Video/Details.tsx b/frontend/src/routes/manage/Video/Details.tsx
new file mode 100644
index 000000000..f37f9c855
--- /dev/null
+++ b/frontend/src/routes/manage/Video/Details.tsx
@@ -0,0 +1,156 @@
+import { useTranslation } from "react-i18next";
+import { FiExternalLink } from "react-icons/fi";
+
+import { Link } from "../../../router";
+import { NotAuthorized } from "../../../ui/error";
+import { Form } from "../../../ui/Form";
+import { CopyableInput, Input, TextArea } from "../../../ui/Input";
+import { InputContainer, TitleLabel } from "../../../ui/metadata";
+import { useUser } from "../../../User";
+import { LinkButton } from "../../../ui/Button";
+import CONFIG from "../../../config";
+import { Breadcrumbs } from "../../../ui/Breadcrumbs";
+import { PageTitle } from "../../../layout/header/ui";
+import { AuthorizedEvent, makeManageVideoRoute, PAGE_WIDTH } from "./Shared";
+
+
+export const ManageVideoDetailsRoute = makeManageVideoRoute(
+    "details",
+    "",
+    event => <Page event={event} />,
+);
+
+type Props = {
+    event: AuthorizedEvent;
+};
+
+const Page: React.FC<Props> = ({ event }) => {
+    const { t } = useTranslation();
+
+    const breadcrumbs = [
+        { label: t("manage.management"), link: "/~manage" },
+        { label: t("manage.my-videos.title"), link: "/~manage/videos" },
+    ];
+
+    const user = useUser();
+    if (user === "none" || user === "unknown") {
+        return <NotAuthorized />;
+    }
+    const editorUrl = `${CONFIG.opencast.editorUrl}?mediaPackageId=${event.opencastId}`;
+
+    return <>
+        <Breadcrumbs path={breadcrumbs} tail={event.title} />
+        <PageTitle title={t("manage.my-videos.details.title")} />
+        <section css={{
+            width: PAGE_WIDTH,
+            maxWidth: "100%",
+            marginBottom: 32,
+        }}>
+            <UpdatedCreatedInfo event={event} />
+            <div css={{ margin: "8px 2px", flex: "1 0 auto" }}>
+                {user.canUseEditor && event.canWrite && (
+                    <LinkButton to={editorUrl} css={{ marginBottom: 16 }} target="_blank">
+                        {t("manage.my-videos.details.open-in-editor")} <FiExternalLink size={16} />
+                    </LinkButton>
+                )}
+                <DirectLink event={event} />
+                <MetadataSection event={event} />
+            </div>
+        </section>
+        <section css={{ marginBottom: 32 }}>
+            <HostRealms event={event} />
+        </section>
+    </>;
+};
+
+const DirectLink: React.FC<Props> = ({ event }) => {
+    const { t } = useTranslation();
+    const url = new URL(`/!v/${event.id.slice(2)}`, document.baseURI);
+
+    return (
+        <div css={{ marginBottom: 40 }}>
+            <div css={{ marginBottom: 4 }}>
+                {t("manage.my-videos.details.share-direct-link") + ":"}
+            </div>
+            <CopyableInput
+                value={url.href}
+                css={{ width: "100%", fontFamily: "monospace", fontSize: 14 }}
+            />
+        </div>
+    );
+};
+
+/** Shows the `created` and `updated` timestamps. */
+const UpdatedCreatedInfo: React.FC<Props> = ({ event }) => {
+    const { t, i18n } = useTranslation();
+    const created = new Date(event.created).toLocaleString(i18n.language);
+    const updated = event.syncedData?.updated == null
+        ? null
+        : new Date(event.syncedData.updated).toLocaleString(i18n.language);
+
+    return (
+        <div css={{ marginBottom: 16, fontSize: 14 }}>
+            <DateValue label={t("video.created")} value={created} />
+            {updated && <DateValue label={t("video.updated")} value={updated} />}
+        </div>
+    );
+};
+
+type DateValueProps = {
+    label: string;
+    value: string;
+};
+
+const DateValue: React.FC<DateValueProps> = ({ label, value }) => (
+    <span css={{ "&:not(:last-child):after": { content: "'•'", margin: "0 12px" } }}>
+        <span css={{ color: "var(--grey40)", lineHeight: 1 }}>{label + ":"}</span>
+        <span css={{ marginLeft: 6, marginTop: 4 }}>{value}</span>
+    </span>
+);
+
+const MetadataSection: React.FC<Props> = ({ event }) => {
+    const { t } = useTranslation();
+
+    return (
+        <Form noValidate>
+            <InputContainer>
+                <TitleLabel htmlFor="title-field" />
+                <Input
+                    id="title-field"
+                    value={event.title}
+                    disabled
+                    css={{ width: "100%" }}
+                />
+            </InputContainer>
+
+            <InputContainer>
+                <label htmlFor="description-field">
+                    {t("upload.metadata.description")}
+                </label>
+                <TextArea id="description-field" disabled value={event.description ?? ""} />
+            </InputContainer>
+        </Form>
+    );
+};
+
+const HostRealms: React.FC<Props> = ({ event }) => {
+    const { t } = useTranslation();
+
+    return <>
+        <h2 css={{ fontSize: 20, marginBottom: 8 }}>
+            {t("manage.my-videos.details.referencing-pages")}
+        </h2>
+        {event.hostRealms.length === 0
+            ? <i>{t("manage.my-videos.details.no-referencing-pages")}</i>
+            : <>
+                <p>{t("manage.my-videos.details.referencing-pages-explanation")}</p>
+                <ul>{event.hostRealms.map(realm => <li key={realm.id}>
+                    <Link to={realm.path}>{
+                        realm.isRoot
+                            ? <i>{t("general.homepage")}</i>
+                            : realm.name
+                    }</Link>
+                </li>)}</ul>
+            </>}
+    </>;
+};
diff --git a/frontend/src/routes/manage/Video/Shared.tsx b/frontend/src/routes/manage/Video/Shared.tsx
new file mode 100644
index 000000000..f19dd8998
--- /dev/null
+++ b/frontend/src/routes/manage/Video/Shared.tsx
@@ -0,0 +1,201 @@
+import { useTranslation } from "react-i18next";
+import { FiCornerLeftUp, FiEdit3, FiInfo, FiPlay } from "react-icons/fi";
+import { graphql } from "react-relay";
+
+import { RootLoader } from "../../../layout/Root";
+import { makeRoute, Route } from "../../../rauta";
+import { loadQuery } from "../../../relay";
+import { ellipsisOverflowCss, LinkList, LinkWithIcon } from "../../../ui";
+import { NotAuthorized } from "../../../ui/error";
+import { NotFound } from "../../NotFound";
+import { PATH as MANAGE_VIDEOS_PATH } from ".";
+import { b64regex } from "../../util";
+import { Thumbnail } from "../../../ui/Video";
+import { SharedVideoManageQuery } from "./__generated__/SharedVideoManageQuery.graphql";
+import { Link } from "../../../router";
+
+
+export const PAGE_WIDTH = 1100;
+
+export type QueryResponse = SharedVideoManageQuery["response"];
+export type Event = QueryResponse["event"];
+export type AuthorizedEvent = Extract<Event, { __typename: "AuthorizedEvent" }>;
+
+type ManageVideoSubPageType = "details" | "technical-details";
+
+/** Helper around `makeRoute` for manage single video subpages. */
+export const makeManageVideoRoute = (
+    page: ManageVideoSubPageType,
+    path: string,
+    render: (event: AuthorizedEvent) => JSX.Element,
+): Route => (
+    makeRoute(url => {
+        const regex = new RegExp(`^/~manage/videos/(${b64regex}+)${path}/?$`, "u");
+        const params = regex.exec(url.pathname);
+        if (params === null) {
+            return null;
+        }
+
+        const videoId = decodeURIComponent(params[1]);
+        const queryRef = loadQuery<SharedVideoManageQuery>(query, { id: `ev${videoId}` });
+
+        return {
+            render: () => <RootLoader
+                {...{ query, queryRef }}
+                noindex
+                nav={data => [
+                    <BackLink key={1} />,
+                    <ManageVideoNav key={2} event={data.event} active={page} />,
+                ]}
+                render={data => {
+                    if (data.event === null) {
+                        return <NotFound kind="video" />;
+                    }
+                    if (data.event.__typename !== "AuthorizedEvent" || !data.event.canWrite) {
+                        return <NotAuthorized />;
+                    }
+
+                    return render(data.event);
+                }}
+            />,
+            dispose: () => queryRef.dispose(),
+        };
+    })
+);
+
+
+// We have one query for all "manage video" pages as there is a huge overlap in
+// what they request. It just simplifies our code a lot and we only pay by
+// overfetching a bit.
+const query = graphql`
+    query SharedVideoManageQuery($id: ID!) {
+        ...UserData
+        event: eventById(id: $id) {
+            __typename
+            ... on AuthorizedEvent {
+                id
+                title
+                description
+                opencastId
+                created
+                canWrite
+                isLive
+                syncedData {
+                    duration
+                    thumbnail
+                    updated
+                    startTime
+                    endTime
+                    tracks { flavor resolution mimetype uri }
+                }
+                series {
+                    title
+                    opencastId
+                    ...SeriesBlockSeriesData
+                }
+                hostRealms { id isRoot name path }
+            }
+        }
+    }
+`;
+
+
+/** Simple nav element linking back to "my videos" overview page. */
+const BackLink: React.FC = () => {
+    const { t } = useTranslation();
+    const items = [
+        <LinkWithIcon key={MANAGE_VIDEOS_PATH} to={MANAGE_VIDEOS_PATH} iconPos="left">
+            <FiCornerLeftUp />
+            {t("manage.nav.my-videos")}
+        </LinkWithIcon>,
+    ];
+
+    return <LinkList items={items} />;
+};
+
+
+type ManageVideoNavProps = {
+    event: Event;
+    active: ManageVideoSubPageType;
+};
+
+const ManageVideoNav: React.FC<ManageVideoNavProps> = ({ event, active }) => {
+    const { t } = useTranslation();
+
+    if (event === null) {
+        return null;
+    }
+    if (event.__typename !== "AuthorizedEvent" || !event.canWrite) {
+        return null;
+    }
+
+    const id = event.id.substring(2);
+
+    const items = [
+        {
+            url: `/~manage/videos/${id}`,
+            page: "details",
+            body: <><FiEdit3 />{t("manage.my-videos.details.title")}</>,
+        },
+        // {
+        //     url: `/~manage/videos/${id}/access`,
+        //     page: "acl",
+        //     body: <><FiShield />{t("manage.my-videos.acl.title")}</>,
+        // },
+        {
+            url: `/~manage/videos/${id}/technical-details`,
+            page: "technical-details",
+            body: <><FiInfo />{t("manage.my-videos.technical-details.title")}</>,
+        },
+
+    ].map(({ url, page, body }, i) => (
+        <LinkWithIcon key={i} to={url} iconPos="left" active={page === active}>
+            {body}
+        </LinkWithIcon>
+    ));
+
+    const videoLink = event.hostRealms.length === 1
+        ? `${event.hostRealms[0].path.replace(/^\/$/, "")}/v/${id}`
+        : `/!v/${id}`;
+
+    const header = (
+        <div css={{ display: "flex", flexDirection: "column" }}>
+            <Link to={videoLink} css={{
+                dislay: "block",
+                position: "relative",
+                width: "100%",
+                maxWidth: "calc(40vh * 16 / 9)",
+                alignSelf: "center",
+                "& > svg": {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    zIndex: 5,
+                    fontSize: 64,
+                    color: "white",
+                    transform: "translate(-50%, -50%)",
+                },
+                "&:not(:hover) > svg": {
+                    display: "none",
+                },
+                "&:hover > div": {
+                    opacity: 0.7,
+                },
+                backgroundColor: "black",
+                borderRadius: 8,
+            }}>
+                <FiPlay />
+                <Thumbnail event={event} />
+            </Link>
+            <div css={{
+                textAlign: "center",
+                fontWeight: "bold",
+                marginTop: 4,
+                marginBottom: 8,
+                ...ellipsisOverflowCss(2),
+            }}>{event.title}</div>
+        </div>
+    );
+
+    return <LinkList items={[header, ...items]} />;
+};
diff --git a/frontend/src/routes/manage/Video/Single.tsx b/frontend/src/routes/manage/Video/Single.tsx
deleted file mode 100644
index 23638e9da..000000000
--- a/frontend/src/routes/manage/Video/Single.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { FiCornerLeftUp, FiExternalLink } from "react-icons/fi";
-import { graphql } from "react-relay";
-
-import { RootLoader } from "../../../layout/Root";
-import {
-    SingleVideoManageQuery,
-    SingleVideoManageQuery$data,
-} from "./__generated__/SingleVideoManageQuery.graphql";
-import { makeRoute } from "../../../rauta";
-import { loadQuery } from "../../../relay";
-import { Link } from "../../../router";
-import { LinkList, LinkWithIcon } from "../../../ui";
-import { NotAuthorized } from "../../../ui/error";
-import { Form } from "../../../ui/Form";
-import { CopyableInput, Input, TextArea } from "../../../ui/Input";
-import { InputContainer, TitleLabel } from "../../../ui/metadata";
-import { Thumbnail } from "../../../ui/Video";
-import { NotFound } from "../../NotFound";
-import { PATH as MANAGE_VIDEOS_PATH } from ".";
-import { useUser } from "../../../User";
-import { LinkButton } from "../../../ui/Button";
-import CONFIG from "../../../config";
-import { Breadcrumbs } from "../../../ui/Breadcrumbs";
-import { PageTitle } from "../../../layout/header/ui";
-import { b64regex } from "../../util";
-
-
-export const ManageSingleVideoRoute = makeRoute(url => {
-    const regex = new RegExp(`^/~manage/videos/(${b64regex}+)/?$`, "u");
-    const params = regex.exec(url.pathname);
-    if (params === null) {
-        return null;
-    }
-
-    const videoId = decodeURIComponent(params[1]);
-    const queryRef = loadQuery<SingleVideoManageQuery>(query, { id: `ev${videoId}` });
-
-    return {
-        render: () => <RootLoader
-            {...{ query, queryRef }}
-            noindex
-            nav={() => <BackLink />}
-            render={data => data.event === null
-                ? <NotFound kind="video" />
-                : data.event.__typename === "AuthorizedEvent" && data.event.canWrite
-                    ? <ManageSingleVideo event={data.event}/>
-                    : <NotAuthorized />
-            }
-        />,
-        dispose: () => queryRef.dispose(),
-    };
-});
-
-const BackLink: React.FC = () => {
-    const { t } = useTranslation();
-    const items = [
-        <LinkWithIcon key={MANAGE_VIDEOS_PATH} to={MANAGE_VIDEOS_PATH} iconPos="left">
-            <FiCornerLeftUp />
-            {t("manage.nav.my-videos")}
-        </LinkWithIcon>,
-    ];
-
-    return <LinkList items={items} />;
-};
-
-const query = graphql`
-    query SingleVideoManageQuery($id: ID!) {
-        ...UserData
-        event: eventById(id: $id) {
-            __typename
-            ... on AuthorizedEvent {
-                id
-                title
-                description
-                opencastId
-                created
-                canWrite
-                isLive
-                syncedData {
-                    duration
-                    thumbnail
-                    updated
-                    startTime
-                    endTime
-                    tracks { flavor resolution }
-                }
-                series {
-                    title
-                    ...SeriesBlockSeriesData
-                }
-                hostRealms { id isRoot name path }
-            }
-        }
-    }
-`;
-
-type Event = NonNullable<SingleVideoManageQuery$data["event"]>;
-type AuthorizedEvent = Extract<Event, { __typename: "AuthorizedEvent" }>;
-
-type Props = {
-    event: AuthorizedEvent;
-};
-
-const BREAKPOINT = 1100;
-
-const ManageSingleVideo: React.FC<Props> = ({ event }) => {
-    const { t } = useTranslation();
-
-    const breadcrumbs = [
-        { label: t("manage.management"), link: "/~manage" },
-        { label: t("manage.my-videos.title"), link: "/~manage/videos" },
-    ];
-
-    const user = useUser();
-    if (user === "none" || user === "unknown") {
-        return <NotAuthorized />;
-    }
-    const editorUrl = `${CONFIG.opencast.editorUrl}?mediaPackageId=${event.opencastId}`;
-
-    return <>
-        <Breadcrumbs path={breadcrumbs} tail={event.title} />
-        <PageTitle
-            title={t("manage.my-videos.video-details", { title: event.title })}
-            css={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}
-        />
-        <section css={{
-            width: 1100,
-            maxWidth: "100%",
-            marginBottom: 32,
-
-            [`@media(min-width: ${BREAKPOINT}px)`]: {
-                display: "flex",
-                flexDirection: "row-reverse",
-                gap: 48,
-            },
-        }}>
-            <ThumbnailDateInfo event={event} />
-            <div css={{ margin: "8px 2px", flex: "1 0 auto" }}>
-                {user.canUseEditor && event.canWrite && (
-                    <LinkButton to={editorUrl} css={{ marginBottom: 16 }} target="_blank">
-                        {t("manage.my-videos.open-in-editor")} <FiExternalLink size={16} />
-                    </LinkButton>
-                )}
-                <DirectLink event={event} />
-                <MetadataSection event={event} />
-            </div>
-        </section>
-        <section css={{ marginBottom: 32 }}>
-            <HostRealms event={event} />
-        </section>
-        <section>
-            <TechnicalDetails event={event} />
-        </section>
-    </>;
-};
-
-const DirectLink: React.FC<Props> = ({ event }) => {
-    const { t } = useTranslation();
-    const url = new URL(`/!v/${event.id.slice(2)}`, document.baseURI);
-
-    return (
-        <div css={{ marginBottom: 40 }}>
-            <div css={{ marginBottom: 4 }}>
-                {t("manage.my-videos.share-direct-link") + ":"}
-            </div>
-            <CopyableInput
-                value={url.href}
-                css={{ width: "100%", fontFamily: "monospace", fontSize: 14 }}
-            />
-        </div>
-    );
-};
-
-const ThumbnailDateInfo: React.FC<Props> = ({ event }) => {
-    const { t, i18n } = useTranslation();
-    const created = new Date(event.created).toLocaleString(i18n.language);
-    const updated = event.syncedData?.updated == null
-        ? null
-        : new Date(event.syncedData.updated).toLocaleString(i18n.language);
-
-    return (
-        <div css={{
-            flex: "0 0 auto",
-            marginBottom: 16,
-            display: "flex",
-            gap: 16,
-            [`@media(min-width: ${BREAKPOINT}px)`]: {
-                flexDirection: "column",
-                padding: 16,
-                borderLeft: "1px dashed var(--grey80)",
-            },
-        }}>
-            <Link to={`/!v/${event.id.slice(2)}`}>
-                <Thumbnail event={event} css={{ width: 16 * 12 }} />
-            </Link>
-            <div css={{ fontSize: 14, margin: 4 }}>
-                {/* TODO: move those translation strings somewhere more appropriate */}
-                <DateValue label={t("video.created")} value={created} />
-                {updated
-                    ? <DateValue label={t("video.updated")} value={updated} />
-                    : t("video.not-ready.title")}
-            </div>
-        </div>
-    );
-};
-
-type DateValueProps = {
-    label: string;
-    value: string;
-};
-
-const DateValue: React.FC<DateValueProps> = ({ label, value }) => (
-    <div css={{ "&:not(:last-child)": { marginBottom: 12 } }}>
-        <div css={{ color: "var(--grey40)", lineHeight: 1 }}>{label + ":"}</div>
-        <div css={{ marginLeft: 6, marginTop: 4 }}>{value}</div>
-    </div>
-);
-
-const MetadataSection: React.FC<Props> = ({ event }) => {
-    const { t } = useTranslation();
-
-    return (
-        <Form noValidate>
-            <InputContainer>
-                <TitleLabel htmlFor="title-field" />
-                <Input
-                    id="title-field"
-                    value={event.title}
-                    disabled
-                    css={{ width: "100%" }}
-                />
-            </InputContainer>
-
-            <InputContainer>
-                <label htmlFor="description-field">
-                    {t("upload.metadata.description")}
-                </label>
-                <TextArea id="description-field" disabled value={event.description ?? ""} />
-            </InputContainer>
-        </Form>
-    );
-};
-
-const HostRealms: React.FC<Props> = ({ event }) => {
-    const { t } = useTranslation();
-
-    return <>
-        <h2 css={{ fontSize: 20, marginBottom: 8 }}>{t("manage.my-videos.referencing-pages")}</h2>
-        {event.hostRealms.length === 0
-            ? <i>{t("manage.my-videos.no-referencing-pages")}</i>
-            : <>
-                <p>{t("manage.my-videos.referencing-pages-explanation")}</p>
-                <ul>{event.hostRealms.map(realm => <li key={realm.id}>
-                    <Link to={realm.path}>{
-                        realm.isRoot
-                            ? <i>{t("general.homepage")}</i>
-                            : realm.name
-                    }</Link>
-                </li>)}</ul>
-            </>}
-    </>;
-};
-
-const TechnicalDetails: React.FC<Props> = ({ event }) => {
-    const { t } = useTranslation();
-
-    return <>
-        <h2 css={{ fontSize: 20, marginBottom: 8 }}>{t("manage.my-videos.technical-details")}</h2>
-        <div>
-            <span css={{ color: "var(--grey40)", marginRight: 8 }}>
-                {t("manage.my-videos.opencast-id") + ":"}
-            </span>
-            <code css={{ fontSize: 14 }}>{event.opencastId}</code>
-        </div>
-        {event.syncedData && <div css={{ marginTop: 8 }}>
-            <span css={{ color: "var(--grey40)", marginRight: 8 }}>
-                {t("manage.my-videos.available-resolutions") + ":"}
-            </span>
-            {(event.syncedData.tracks ?? [])
-                .map(track => track.resolution)
-                .filter((r): r is number[] => r !== null)
-                .sort((a, b) => a[0] - b[0])
-                .map(r => r.join("x"))
-                .join(", ")
-            }
-        </div>}
-    </>;
-};
diff --git a/frontend/src/routes/manage/Video/TechnicalDetails.tsx b/frontend/src/routes/manage/Video/TechnicalDetails.tsx
new file mode 100644
index 000000000..eb3978c61
--- /dev/null
+++ b/frontend/src/routes/manage/Video/TechnicalDetails.tsx
@@ -0,0 +1,171 @@
+import { useTranslation } from "react-i18next";
+
+import { NotAuthorized } from "../../../ui/error";
+import { useUser } from "../../../User";
+import { Breadcrumbs } from "../../../ui/Breadcrumbs";
+import { PageTitle } from "../../../layout/header/ui";
+import { AuthorizedEvent, makeManageVideoRoute, PAGE_WIDTH } from "./Shared";
+import { CopyableInput } from "../../../ui/Input";
+
+
+export const ManageVideoTechnicalDetailsRoute = makeManageVideoRoute(
+    "technical-details",
+    "/technical-details",
+    event => <Page event={event} />,
+);
+
+type Props = {
+    event: AuthorizedEvent;
+};
+
+const Page: React.FC<Props> = ({ event }) => {
+    const { t } = useTranslation();
+
+    const breadcrumbs = [
+        { label: t("manage.management"), link: "/~manage" },
+        { label: t("manage.my-videos.title"), link: "/~manage/videos" },
+        { label: event.title, link: `/~manage/videos/${event.id.substring(2)}` },
+    ];
+
+    const user = useUser();
+    if (user === "none" || user === "unknown") {
+        return <NotAuthorized />;
+    }
+
+    return <>
+        <Breadcrumbs path={breadcrumbs} tail={t("manage.my-videos.technical-details.title")} />
+        <PageTitle title={t("manage.my-videos.technical-details.title")} />
+        <div css={{
+            maxWidth: PAGE_WIDTH,
+            "& > section:not(:last-child)": {
+                marginBottom: 32,
+            },
+            "& > section > h2": {
+                fontSize: 18,
+                marginBottom: 4,
+            },
+        }}>
+            <OpencastId event={event} />
+            <TrackInfo event={event} />
+            <FurtherInfo event={event} />
+        </div>
+    </>;
+};
+
+const OpencastId: React.FC<Props> = ({ event }) => {
+    const { t } = useTranslation();
+
+    return <section>
+        <h2>{t("manage.my-videos.technical-details.opencast-id")}</h2>
+        <CopyableInput
+            value={event.opencastId}
+            css={{ width: 400, fontFamily: "monospace", fontSize: 14 }}
+        />
+    </section>;
+};
+
+type SingleTrackInfo = {
+    resolution: readonly number[] | null;
+    mimetype: string | null;
+    uri: string;
+};
+
+const TrackInfo: React.FC<Props> = ({ event }) => {
+    const { t } = useTranslation();
+
+    if (event.syncedData == null) {
+        return null;
+    }
+
+    const flavors: Map<string, SingleTrackInfo[]> = new Map();
+    for (const { flavor, resolution, mimetype, uri } of event.syncedData.tracks) {
+        let tracks = flavors.get(flavor);
+        if (tracks === undefined) {
+            tracks = [];
+            flavors.set(flavor, tracks);
+        }
+
+        tracks.push({ resolution, mimetype, uri });
+    }
+
+    return <section>
+        <h2>{t("manage.my-videos.technical-details.tracks")}</h2>
+        <ul css={{ fontSize: 15, marginTop: 8, paddingLeft: 24 }}>
+            {Array.from(flavors, ([flavor, tracks]) => <li key={flavor}>
+                <code>{flavor}</code>
+                <ul>{tracks
+                    .sort((a, b) => (a.resolution?.[0] ?? 0) - (b.resolution?.[0] ?? 0))
+                    .map((track, i) => <TrackItem key={i} {...track} />)
+                }</ul>
+            </li>)}
+        </ul>
+    </section>;
+};
+
+const TrackItem: React.FC<SingleTrackInfo> = ({ mimetype, resolution, uri }) => {
+    const { t } = useTranslation();
+
+    return (
+        <li css={{ marginBottom: 4 }}>
+            <a href={uri}>
+                {mimetype == null
+                    ? <i>{t("manage.my-videos.technical-details.unknown-mimetype")}</i>
+                    : <code>{mimetype}</code>}
+                {resolution && <span css={{
+                    backgroundColor: "var(--grey95)",
+                    marginLeft: 8,
+                    padding: "2px 4px",
+                    borderRadius: 4,
+                }}>{resolution.join(" × ")}</span>}
+            </a>
+        </li>
+    );
+};
+
+const FurtherInfo: React.FC<Props> = ({ event }) => {
+    const { t, i18n } = useTranslation();
+
+    const boolToYesNo = (v: boolean) => v ? t("general.yes") : t("general.no");
+    const printDate = (date: string | null): string => {
+        if (date == null) {
+            return "-";
+        }
+
+        return new Date(date).toLocaleString(i18n.language, {
+            dateStyle: "medium",
+            timeStyle: "medium",
+        });
+    };
+
+    return <section>
+        <h2>{t("manage.my-videos.technical-details.further-info")}</h2>
+        <ul>
+            <SingleInfo label={t("manage.my-videos.technical-details.synced")}>
+                {boolToYesNo(event.syncedData !== null)}
+            </SingleInfo>
+            <SingleInfo label={t("manage.my-videos.technical-details.part-of")}>
+                <code css={{ fontSize: 15 }}>{event.series?.opencastId ?? "null"}</code>
+            </SingleInfo>
+            <SingleInfo label={t("manage.my-videos.technical-details.is-live")}>
+                {boolToYesNo(event.isLive)}
+            </SingleInfo>
+            {event.syncedData && <>
+                <SingleInfo label={t("video.start") + ":"}>
+                    {printDate(event.syncedData.startTime)}
+                </SingleInfo>
+                <SingleInfo label={t("video.end") + ":"}>
+                    {printDate(event.syncedData.endTime)}
+                </SingleInfo>
+            </>}
+        </ul>
+    </section>;
+};
+
+const SingleInfo: React.FC<React.PropsWithChildren<{ label: string }>> = ({ label, children }) => (
+    <li>
+        <span css={{ color: "var(--grey40)", marginRight: 16 }}>{label}</span>
+        {children}
+    </li>
+);
+
+
diff --git a/frontend/src/routes/manage/index.tsx b/frontend/src/routes/manage/index.tsx
index 0a070e334..94bac75a6 100644
--- a/frontend/src/routes/manage/index.tsx
+++ b/frontend/src/routes/manage/index.tsx
@@ -140,18 +140,8 @@ export const ManageNav: React.FC<ManageNavProps> = ({ active }) => {
     ];
     /* eslint-enable react/jsx-key */
 
-    // TODO: we probably want a better style for active items
-    const activeStyle = {
-        fontWeight: "bold" as const,
-    };
     const items = entries.map(([path, label, icon]) => (
-        <LinkWithIcon
-            key={path}
-            to={path}
-            iconPos="left"
-            active={path === active}
-            css={path === active ? activeStyle : {}}
-        >
+        <LinkWithIcon key={path} to={path} iconPos="left" active={path === active}>
             {icon}
             {label}
         </LinkWithIcon>
diff --git a/frontend/src/ui/Blocks/Series.tsx b/frontend/src/ui/Blocks/Series.tsx
index 275037698..5f5ccebe9 100644
--- a/frontend/src/ui/Blocks/Series.tsx
+++ b/frontend/src/ui/Blocks/Series.tsx
@@ -18,6 +18,7 @@ import { Card } from "../Card";
 import { FiPlay } from "react-icons/fi";
 import { keyframes } from "@emotion/react";
 import { Description } from "../metadata";
+import { ellipsisOverflowCss } from "..";
 
 
 type SharedProps = {
@@ -186,13 +187,9 @@ const SeriesBlockContainer: React.FC<SeriesBlockContainerProps> = ({ title, chil
                 transform: "translateY(-50%)",
                 fontSize: 19,
                 margin: "0 8px",
-
-                display: "-webkit-inline-box",
-                WebkitBoxOrient: "vertical",
-                textOverflow: "ellipsis",
-                WebkitLineClamp: 3,
-                overflow: "hidden",
                 lineHeight: 1.3,
+                ...ellipsisOverflowCss(3),
+                display: "-webkit-inline-box",
             }}>{title}</h2>
         </div>}
         {children}
@@ -265,12 +262,8 @@ const GridTile: React.FC<GridTypeProps> = ({ event, basePath, active }) => {
                 }}/>}
                 <div css={{
                     fontSize: "inherit",
-                    display: "-webkit-box",
-                    WebkitBoxOrient: "vertical",
-                    textOverflow: "ellipsis",
-                    WebkitLineClamp: 2,
-                    overflow: "hidden",
                     lineHeight: 1.3,
+                    ...ellipsisOverflowCss(2),
                 }}>{event.title}</div>
             </h3>
             <div css={{
diff --git a/frontend/src/ui/index.tsx b/frontend/src/ui/index.tsx
index 3d2fa1bf4..41cf60ddd 100644
--- a/frontend/src/ui/index.tsx
+++ b/frontend/src/ui/index.tsx
@@ -107,6 +107,7 @@ export const LinkWithIcon: React.FC<LinkWithIconProps> = ({
         "&:hover": hoverActiveStyle,
         ...active && {
             color: "var(--nav-color-darker)",
+            fontWeight: "bold",
             "&": hoverActiveStyle,
         },
     };
@@ -135,3 +136,12 @@ export const FOCUS_STYLE_INSET = {
         boxShadow: "inset 0 0 0 2px var(--accent-color)",
     },
 } as const;
+
+/** Returns CSS that makes text longer than `lines` lines to be truncated with `...`. */
+export const ellipsisOverflowCss = (lines: number): Record<string, any> => ({
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: lines,
+});
diff --git a/frontend/src/ui/metadata.tsx b/frontend/src/ui/metadata.tsx
index cbbf55082..775a2a127 100644
--- a/frontend/src/ui/metadata.tsx
+++ b/frontend/src/ui/metadata.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
+import { ellipsisOverflowCss } from ".";
 
 
 export const TitleLabel: React.FC<{ htmlFor: string }> = ({ htmlFor }) => {
@@ -48,11 +49,7 @@ export const SmallDescription: React.FC<SmallDescriptionProps> = ({ text, lines
             ...sharedStyle,
             color: "var(--grey40)",
             maxWidth: 800,
-            display: "-webkit-box",
-            WebkitBoxOrient: "vertical",
-            textOverflow: "ellipsis",
-            WebkitLineClamp: lines,
-            overflow: "hidden",
+            ...ellipsisOverflowCss(lines),
         }}>{text}</div>;
     }
 };