diff --git a/frontend/src/i18n/locales/de.yaml b/frontend/src/i18n/locales/de.yaml
index 804567be4..2a39fcb97 100644
--- a/frontend/src/i18n/locales/de.yaml
+++ b/frontend/src/i18n/locales/de.yaml
@@ -307,9 +307,6 @@ upload:
     angeschaut werden, sobald die Verarbeitung abgeschlossen ist. Sie können diese
     Seite jetzt schließen.
   metadata:
-    title: Videotitel
-    description: Beschreibung
-    required: Pflichtfeld
     save: Speichern und fertigstellen
     note-writable-series: >
       Sie können Videos nur in Serien hochladen, auf die Sie Schreibzugriff haben.
@@ -317,12 +314,18 @@ upload:
   errors:
     failed-to-upload: Hochladen fehlgeschlagen.
     unknown: Während des Dateiuploads ist ein unbekannter Fehler aufgetreten.
-    field-required: Dieses Feld darf nicht leer sein.
     opencast-server-error: Opencast-Server-Fehler (unerwartete Antwort).
     opencast-unreachable: 'Netzwerkfehler: Opencast kann nicht erreicht werden.'
     jwt-invalid: 'Interner Fremdauthentifizierungsfehler: Opencast hat das Hochladen nicht autorisiert.'
     failed-fetching-series-acl: Abruf der Serienzugangsberechtigungen fehlgeschlagen.
 
+metadata-form:
+  title: Titel
+  description: Beschreibung
+  required: Pflichtfeld
+  errors:
+    field-required: Dieses Feld darf nicht leer sein.
+
 acl:
   unknown-user-note: unbekannt
   no-entries: Keine Einträge
@@ -455,6 +458,8 @@ manage:
     no-of-videos: '{{count}} Videos'
     details:
       title: Seriendetails
+    create:
+      title: Serie erstellen
 
   my-videos:
     title: Meine Videos
diff --git a/frontend/src/i18n/locales/en.yaml b/frontend/src/i18n/locales/en.yaml
index 04db53748..e5594a48e 100644
--- a/frontend/src/i18n/locales/en.yaml
+++ b/frontend/src/i18n/locales/en.yaml
@@ -305,9 +305,6 @@ upload:
     Your video was uploaded successfully and is now being processed. It can be
     watched as soon as processing is done. You may close this page now.
   metadata:
-    title: Video title
-    description: Description
-    required: required
     save: Save and finish
     note-writable-series: >
       Videos can only be uploaded into series for which you have write-access.
@@ -315,12 +312,18 @@ upload:
   errors:
     failed-to-upload: Failed to upload video.
     unknown: Unknown error occurred during video upload.
-    field-required: This field is required (cannot be empty).
     opencast-server-error: Opencast server error (unexpected response).
     opencast-unreachable: 'Network error: Opencast cannot be reached.'
     jwt-invalid: 'Internal cross-authentication error: Opencast did not authorize the upload.'
     failed-fetching-series-acl: Failed to fetch series acl.
 
+metadata-form:
+  title: Title
+  description: Description
+  required: required
+  errors:
+    field-required: This field is required (cannot be empty).
+
 acl:
   unknown-user-note: unknown
   no-entries: No entries
@@ -437,6 +440,8 @@ manage:
     no-of-videos: '{{count}} videos'
     details:
       title: Series details
+    create:
+      title: Create series
 
   my-videos:
     title: My videos
diff --git a/frontend/src/layout/header/UserBox.tsx b/frontend/src/layout/header/UserBox.tsx
index 1b95d948a..623d92c5d 100644
--- a/frontend/src/layout/header/UserBox.tsx
+++ b/frontend/src/layout/header/UserBox.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import {
     LuAlertTriangle, LuLogIn, LuMoon, LuSun, LuFolder, LuFilm,
     LuUpload, LuVideo, LuLogOut, LuChevronDown, LuUserCheck,
+    LuFilePlus,
 } from "react-icons/lu";
 import { HiOutlineFire, HiOutlineTranslate } from "react-icons/hi";
 import {
@@ -28,6 +29,7 @@ import { LoginLink } from "../../routes/util";
 import { CREDENTIALS_STORAGE_KEY } from "../../routes/Video";
 import { ManageSeriesRoute } from "../../routes/manage/Series";
 import SeriesIcon from "../../icons/series.svg";
+import { CreateSeriesRoute } from "../../routes/manage/Series/Create";
 
 
 
@@ -236,6 +238,12 @@ const LoggedIn: React.FC<LoggedInProps> = ({ user }) => {
             children: t("upload.title"),
             css: indent,
         }] : [],
+        {
+            icon: <LuFilePlus />,
+            wrapper: <Link to={CreateSeriesRoute.url} />,
+            children: t("manage.my-series.create.title"),
+            css: indent,
+        },
         ...user.canUseStudio ? [{
             icon: <LuVideo />,
             wrapper: <ExternalLink
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 867f7f8c4..fa23094a2 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -32,6 +32,7 @@ import { DirectPlaylistOCRoute, DirectPlaylistRoute } from "./routes/Playlist";
 import { ManageSeriesRoute } from "./routes/manage/Series";
 import { ManageSeriesDetailsRoute } from "./routes/manage/Series/Details";
 import { ManageSeriesAccessRoute } from "./routes/manage/Series/Access";
+import { CreateSeriesRoute } from "./routes/manage/Series/Create";
 
 
 
@@ -72,6 +73,7 @@ const {
         ManageSeriesRoute,
         ManageSeriesDetailsRoute,
         UploadRoute,
+        CreateSeriesRoute,
         AddChildRoute,
         ManageRealmContentRoute,
         EmbedVideoRoute,
diff --git a/frontend/src/routes/Upload.tsx b/frontend/src/routes/Upload.tsx
index 7cf06f43e..0745a47fb 100644
--- a/frontend/src/routes/Upload.tsx
+++ b/frontend/src/routes/Upload.tsx
@@ -27,7 +27,7 @@ import { VideoListSelector } from "../ui/SearchableSelect";
 import { Breadcrumbs } from "../ui/Breadcrumbs";
 import { ManageNav, ManageRoute } from "./manage";
 import { COLORS } from "../color";
-import { COMMON_ROLES } from "../util/roles";
+import { defaultAclMap } from "../util/roles";
 import { Acl, AclSelector, knownRolesFragment } from "../ui/Access";
 import {
     AccessKnownRolesData$data,
@@ -744,20 +744,7 @@ const MetaDataEdit: React.FC<MetaDataEditProps> = ({ onSave, disabled, knownRole
         }
     };
 
-    const defaultAcl: Acl = new Map([
-        [user.userRole, {
-            actions: new Set(["read", "write"]),
-            info: {
-                label: { "_": user.displayName },
-                implies: null,
-                large: false,
-            },
-        }],
-        [COMMON_ROLES.ANONYMOUS, {
-            actions: new Set(["read"]),
-            info: null,
-        }],
-    ]);
+    const defaultAcl = defaultAclMap(user);
 
     const { register, handleSubmit, control, formState: { isValid, errors } } = useForm<Metadata>({
         mode: "onChange",
@@ -768,7 +755,9 @@ const MetaDataEdit: React.FC<MetaDataEditProps> = ({ onSave, disabled, knownRole
         name: "series",
         control,
         rules: {
-            required: CONFIG.upload.requireSeries ? t("upload.errors.field-required") : false,
+            required: CONFIG.upload.requireSeries
+                ? t("metadata-form.errors.field-required")
+                : false,
         },
     });
 
@@ -798,7 +787,7 @@ const MetaDataEdit: React.FC<MetaDataEditProps> = ({ onSave, disabled, knownRole
                     css={{ width: 400, maxWidth: "100%" }}
                     autoFocus
                     {...register("title", {
-                        required: t("upload.errors.field-required") as string,
+                        required: t("metadata-form.errors.field-required") as string,
                     })}
                 />
                 {boxError(errors.title?.message)}
@@ -807,7 +796,7 @@ const MetaDataEdit: React.FC<MetaDataEditProps> = ({ onSave, disabled, knownRole
             <div css={{ maxWidth: 750 }}>
                 {/* Description */}
                 <InputContainer>
-                    <label htmlFor={descriptionFieldId}>{t("upload.metadata.description")}</label>
+                    <label htmlFor={descriptionFieldId}>{t("metadata-form.description")}</label>
                     <TextArea id={descriptionFieldId} {...register("description")} />
                 </InputContainer>
 
diff --git a/frontend/src/routes/manage/Series/Create.tsx b/frontend/src/routes/manage/Series/Create.tsx
new file mode 100644
index 000000000..809838028
--- /dev/null
+++ b/frontend/src/routes/manage/Series/Create.tsx
@@ -0,0 +1,225 @@
+import { useEffect, useId, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { graphql, useFragment, useMutation } from "react-relay";
+import { useTranslation } from "react-i18next";
+import { boxError, Button, Spinner, unreachable } from "@opencast/appkit";
+
+import { RootLoader } from "../../../layout/Root";
+import { makeRoute } from "../../../rauta";
+import { loadQuery } from "../../../relay";
+import { CreateQuery } from "./__generated__/CreateQuery.graphql";
+import { useUser, isRealUser } from "../../../User";
+import { Acl, AclSelector, knownRolesFragment } from "../../../ui/Access";
+import { defaultAclMap } from "../../../util/roles";
+import { Form } from "../../../ui/Form";
+import { InputContainer, TitleLabel } from "../../../ui/metadata";
+import { Input, TextArea } from "../../../ui/Input";
+import { READ_WRITE_ACTIONS } from "../../../util/permissionLevels";
+import { AccessKnownRolesData$key } from "../../../ui/__generated__/AccessKnownRolesData.graphql";
+import { ManageNav } from "..";
+import { PageTitle } from "../../../layout/header/ui";
+import { displayCommitError } from "../Realm/util";
+import { LuCheckCircle } from "react-icons/lu";
+
+
+export const CREATE_SERIES_PATH = "/~manage/create-series";
+
+export const CreateSeriesRoute = makeRoute({
+    url: CREATE_SERIES_PATH,
+    match: url => {
+        if (url.pathname !== CREATE_SERIES_PATH) {
+            return null;
+        }
+
+        const queryRef = loadQuery<CreateQuery>(query, {});
+
+        return {
+            render: () => <RootLoader
+                {...{ query, queryRef }}
+                noindex
+                nav={() => <ManageNav active={CREATE_SERIES_PATH} />}
+                render={data => <CreateSeriesPage knownRolesRef={data} />
+                }
+            />,
+            dispose: () => queryRef.dispose(),
+        };
+    },
+});
+
+const query = graphql`
+    query CreateQuery {
+        ... UserData
+        ... AccessKnownRolesData
+    }
+`;
+
+const createSeriesMutation = graphql`
+    mutation CreateSeriesMutation($title: String!, $description: String, $acl: [AclInputEntry!]!) {
+        createSeries(title: $title, description: $description, acl: $acl) { id }
+    }
+`;
+
+type Metadata = {
+    title: string;
+    description?: string;
+    acl: Acl;
+};
+
+type CreateSeriesPageProps = {
+    knownRolesRef: AccessKnownRolesData$key;
+};
+
+const CreateSeriesPage: React.FC<CreateSeriesPageProps> = ({ knownRolesRef }) => {
+    const user = useUser();
+    if (!isRealUser(user)) {
+        return unreachable();
+    }
+
+    const { t } = useTranslation();
+    const titleFieldId = useId();
+    const descriptionFieldId = useId();
+    const knownRoles = useFragment(knownRolesFragment, knownRolesRef);
+    const [commit, inFlight] = useMutation(createSeriesMutation);
+    const [success, setSuccess] = useState(false);
+    const [commitError, setCommitError] = useState<JSX.Element | null>(null);
+
+    const defaultAcl = defaultAclMap(user);
+    const {
+        register,
+        handleSubmit,
+        control,
+        reset,
+        formState: { errors, isValid, isDirty },
+    } = useForm<Metadata>({
+        mode: "onChange",
+        defaultValues: { acl: defaultAcl },
+    });
+
+    const createSeries = (data: Metadata) => {
+        commit({
+            variables: {
+                title: data.title,
+                description: data.description,
+                acl: [...data.acl].map(
+                    ([role, { actions }]) => ({
+                        role,
+                        actions: [...actions],
+                    })
+                ),
+            },
+            onCompleted: () => {
+                setSuccess(true);
+                reset();
+            },
+            onError: error => setCommitError(displayCommitError(error)),
+        });
+    };
+
+    const onSubmit = handleSubmit(data => createSeries(data));
+
+    useEffect(() => {
+        if (!success) {
+            return;
+        }
+
+        const timer = setTimeout(() => setSuccess(false), 1000);
+        return () => clearTimeout(timer);
+    }, [success]);
+
+
+    return <>
+        <PageTitle title={t("manage.my-series.create.title")} />
+        <Form
+            noValidate
+            onSubmit={e => e.preventDefault()}
+            {...(commitError && { inert: "true" })}
+            css={{
+                margin: "32px 2px",
+                "label": {
+                    color: "var(--color-neutral90)",
+                },
+                ...commitError && { opacity: 0.7 },
+            }}
+        >
+            {/* Title */}
+            <InputContainer>
+                <TitleLabel htmlFor={titleFieldId} />
+                <Input
+                    id={titleFieldId}
+                    required
+                    error={!!errors.title}
+                    css={{ width: 400, maxWidth: "100%" }}
+                    autoFocus
+                    {...register("title", {
+                        required: t("metadata-form.errors.field-required") as string,
+                    })}
+                />
+                {boxError(errors.title?.message)}
+            </InputContainer>
+
+            {/* Description */}
+            <InputContainer css={{ maxWidth: 750 }}>
+                <label htmlFor={descriptionFieldId}>{t("metadata-form.description")}</label>
+                <TextArea id={descriptionFieldId} {...register("description")} />
+            </InputContainer>
+
+            {/* ACL */}
+            <InputContainer css={{ maxWidth: 900 }}>
+                <h2 css={{
+                    marginTop: 32,
+                    marginBottom: 12,
+                    fontSize: 22,
+                }}>{t("manage.shared.acl.title")}</h2>
+                <Controller
+                    name="acl"
+                    control={control}
+                    render={({ field }) => <AclSelector
+                        userIsRequired
+                        onChange={field.onChange}
+                        acl={field.value}
+                        knownRoles={knownRoles}
+                        permissionLevels={READ_WRITE_ACTIONS}
+                    />}
+                />
+            </InputContainer>
+
+            {/* Submit button */}
+            <div css={{ display: "flex", marginTop: 32 }}>
+                <Button
+                    kind="call-to-action"
+                    disabled={!!commitError || inFlight || !isValid}
+                    onClick={onSubmit}>
+                    {t("manage.my-series.create.title")}
+                </Button>
+                <span css={{
+                    display: "flex",
+                    alignSelf: "center",
+                    marginLeft: 12,
+                    position: "relative",
+                    width: 20,
+                    height: 20,
+                }}>
+                    <Spinner
+                        size={20}
+                        css={{
+                            position: "absolute",
+                            transition: "opacity ease-out 250ms",
+                            opacity: inFlight ? 1 : 0,
+                        }}
+                    />
+                    <LuCheckCircle
+                        size={20}
+                        css={{
+                            position: "absolute",
+                            transition: "opacity ease-in 300ms",
+                            opacity: success && !isDirty ? 1 : 0,
+                        }}
+                    />
+                </span>
+            </div>
+        </Form>
+        {boxError(commitError)}
+    </>;
+};
+
+
diff --git a/frontend/src/routes/manage/Series/index.tsx b/frontend/src/routes/manage/Series/index.tsx
index 15db680a0..070a27aab 100644
--- a/frontend/src/routes/manage/Series/index.tsx
+++ b/frontend/src/routes/manage/Series/index.tsx
@@ -1,8 +1,10 @@
 import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import { LuPlusCircle } from "react-icons/lu";
 import { graphql, VariablesOf } from "react-relay";
-import i18n from "../../../i18n";
 import { match } from "@opencast/appkit";
 
+import i18n from "../../../i18n";
 import { ManageNav } from "..";
 import { RootLoader } from "../../../layout/Root";
 import { makeRoute } from "../../../rauta";
@@ -14,6 +16,7 @@ import {
     DateColumn,
     descriptionStyle,
     ManageAssets,
+    SharedManageProps,
     TableRow,
     thumbnailLinkStyle,
     titleLinkStyle,
@@ -27,6 +30,8 @@ import { Link } from "../../../router";
 import { ThumbnailStack } from "../../Search";
 import { SmallDescription } from "../../../ui/metadata";
 import { keyOfId } from "../../../util";
+import { CREATE_SERIES_PATH } from "./Create";
+import { LinkButton } from "../../../ui/LinkButton";
 
 
 const PATH = "/~manage/series" as const;
@@ -48,11 +53,7 @@ export const ManageSeriesRoute = makeRoute({
                 nav={() => <ManageNav active={PATH} />}
                 render={data => !data.currentUser
                     ? <NotAuthorized />
-                    : <ManageAssets
-                        vars={vars}
-                        connection={data.currentUser.mySeries}
-                        titleKey="manage.my-series.title"
-                    />
+                    : <ManageSeries connection={data.currentUser.mySeries} vars={vars} />
                 }
             />,
             dispose: () => queryRef.dispose(),
@@ -94,6 +95,25 @@ const query = graphql`
     }
 `;
 
+const ManageSeries: React.FC<SharedManageProps> = ({ vars, connection }) => {
+    const { t } = useTranslation();
+
+    return (
+        <ManageAssets
+            {...{ vars, connection }}
+            titleKey="manage.my-series.title"
+        >
+            <div css={{ display: "flex" }}>
+                <LinkButton to={CREATE_SERIES_PATH}>
+                    {t("manage.my-series.create.title")}
+                    <LuPlusCircle />
+                </LinkButton>
+            </div>
+        </ManageAssets>
+    );
+};
+
+
 export type SeriesConnection = NonNullable<SeriesManageQuery$data["currentUser"]>["mySeries"];
 export type Series = SeriesConnection["items"];
 export type SingleSeries = Series[number];
diff --git a/frontend/src/routes/manage/Shared/Details.tsx b/frontend/src/routes/manage/Shared/Details.tsx
index 99e676b2b..083c7f90a 100644
--- a/frontend/src/routes/manage/Shared/Details.tsx
+++ b/frontend/src/routes/manage/Shared/Details.tsx
@@ -145,7 +145,7 @@ export const MetadataSection: React.FC<SharedDetailsProps> = ({ asset }) => {
 
             <InputContainer>
                 <label htmlFor={descriptionFieldId}>
-                    {t("upload.metadata.description")}
+                    {t("metadata-form.description")}
                 </label>
                 <TextArea id={descriptionFieldId} disabled value={asset.description ?? ""} />
             </InputContainer>
diff --git a/frontend/src/routes/manage/Shared/Table.tsx b/frontend/src/routes/manage/Shared/Table.tsx
index d22461660..ba96ceced 100644
--- a/frontend/src/routes/manage/Shared/Table.tsx
+++ b/frontend/src/routes/manage/Shared/Table.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useRef, useState } from "react";
+import { PropsWithChildren, ReactNode, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
     LuArrowDownNarrowWide,
@@ -31,18 +31,23 @@ type AssetVars = {
     offset: number;
 };
 
-type SharedProps = {
+export type SharedManageProps = {
     connection: Connection;
     vars: AssetVars;
 };
 
-type ManageAssetsProps = SharedProps & {
+type ManageAssetsProps = PropsWithChildren & SharedManageProps & {
     titleKey: ParseKeys;
 }
 
 const LIMIT = 15;
 
-export const ManageAssets: React.FC<ManageAssetsProps> = ({ connection, vars, titleKey }) => {
+export const ManageAssets: React.FC<ManageAssetsProps> = ({
+    connection,
+    vars,
+    titleKey,
+    children,
+}) => {
     const { t } = useTranslation();
 
     const totalCount = connection.totalCount;
@@ -85,7 +90,8 @@ export const ManageAssets: React.FC<ManageAssetsProps> = ({ connection, vars, ti
                 path={[{ label: t("user.manage-content"), link: ManageRoute.url }]}
                 tail={title}
             />
-            <PageTitle title={title} css={{ marginBottom: 32 }}/>
+            <PageTitle title={title} css={{ marginBottom: 32 }} />
+            {children}
             {inner}
         </div>
     );
@@ -103,7 +109,7 @@ export type ColumnProps = {
     column: (item: Asset) => ReactNode;
 };
 
-type GenericTableProps = SharedProps & {
+type GenericTableProps = SharedManageProps & {
     thumbnailWidth?: number;
 }
 
@@ -378,7 +384,7 @@ const ColumnHeader: React.FC<ColumnHeaderProps> = ({ label, sortKey, vars }) =>
     </th>;
 };
 
-const PageNavigation: React.FC<SharedProps> = ({ connection, vars }) => {
+const PageNavigation: React.FC<SharedManageProps> = ({ connection, vars }) => {
     const { t } = useTranslation();
     const pageInfo = connection.pageInfo;
     const total = connection.totalCount;
diff --git a/frontend/src/routes/manage/index.tsx b/frontend/src/routes/manage/index.tsx
index 5851d2a50..6b5adf59e 100644
--- a/frontend/src/routes/manage/index.tsx
+++ b/frontend/src/routes/manage/index.tsx
@@ -1,7 +1,7 @@
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 import { HiOutlineFire } from "react-icons/hi";
-import { LuFilm, LuLayoutTemplate, LuUpload, LuVideo } from "react-icons/lu";
+import { LuFilm, LuLayoutTemplate, LuPlusCircle, LuUpload, LuVideo } from "react-icons/lu";
 import { graphql } from "react-relay";
 import { useColorScheme } from "@opencast/appkit";
 
@@ -26,6 +26,7 @@ import { UploadRoute } from "../Upload";
 import { ManageVideosRoute } from "./Video";
 import SeriesIcon from "../../icons/series.svg";
 import { ManageSeriesRoute } from "./Series";
+import { CreateSeriesRoute } from "./Series/Create";
 
 
 const PATH = "/~manage" as const;
@@ -79,6 +80,7 @@ type ManageNavProps = {
         | typeof ManageVideosRoute.url
         | typeof UploadRoute.url
         | typeof ManageSeriesRoute.url
+        | typeof CreateSeriesRoute.url
         | `/@${string}`;
 };
 
@@ -93,6 +95,7 @@ export const ManageNav: React.FC<ManageNavProps> = ({ active }) => {
         [PATH, t("manage.dashboard.title"), <LuLayoutTemplate />],
         [ManageVideosRoute.url, t("manage.my-videos.title"), <LuFilm />],
         [ManageSeriesRoute.url, t("manage.my-series.title"), <SeriesIcon />],
+        [CreateSeriesRoute.url, t("manage.my-series.create.title"), <LuPlusCircle />],
     ];
     if (isRealUser(user) && user.canCreateUserRealm) {
         entries.splice(
diff --git a/frontend/src/ui/metadata.tsx b/frontend/src/ui/metadata.tsx
index 3e9dab193..3d5c1317a 100644
--- a/frontend/src/ui/metadata.tsx
+++ b/frontend/src/ui/metadata.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, forwardRef, useEffect, useRef, useState } from "react";
+import { PropsWithChildren, ReactNode, forwardRef, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ProtoButton, useColorScheme } from "@opencast/appkit";
 
@@ -11,7 +11,7 @@ export const TitleLabel: React.FC<{ htmlFor: string }> = ({ htmlFor }) => {
     const { t } = useTranslation();
     return (
         <label {...{ htmlFor }}>
-            {t("upload.metadata.title")}
+            {t("metadata-form.title")}
             <FieldIsRequiredNote />
         </label>
     );
@@ -22,14 +22,18 @@ export const FieldIsRequiredNote: React.FC = () => {
 
     return <span css={{ fontWeight: "normal" }}>
         {" ("}
-        <em>{t("upload.metadata.required")}</em>
+        <em>{t("metadata-form.required")}</em>
         {")"}
     </span>;
 };
 
+type InputContainerProps = PropsWithChildren & {
+    className?: string;
+};
+
 /** Separates different inputs in the metadata form */
-export const InputContainer: React.FC<{ children: ReactNode }> = ({ children }) => (
-    <div css={{ margin: "16px 0 " }}>{children}</div>
+export const InputContainer: React.FC<InputContainerProps> = ({ children, className }) => (
+    <div {...{ className }} css={{ margin: "16px 0 " }}>{children}</div>
 );
 
 type SmallDescriptionProps = {
diff --git a/frontend/src/util/roles.tsx b/frontend/src/util/roles.tsx
index e2a004b0b..c5ce9df29 100644
--- a/frontend/src/util/roles.tsx
+++ b/frontend/src/util/roles.tsx
@@ -1,4 +1,6 @@
 import CONFIG from "../config";
+import { Acl } from "../ui/Access";
+import { User } from "../User";
 
 export const COMMON_ROLES = {
     ANONYMOUS: "ROLE_ANONYMOUS",
@@ -9,3 +11,18 @@ export const COMMON_ROLES = {
     TOBIRA_GLOBAL_PAGE_MODERATOR: CONFIG.auth.globalPageModeratorRole,
 };
 
+export const defaultAclMap = (user: User): Acl => new Map([
+    [user.userRole, {
+        actions: new Set(["read", "write"]),
+        info: {
+            label: { "_": user.displayName },
+            implies: null,
+            large: false,
+        },
+    }],
+    [COMMON_ROLES.ANONYMOUS, {
+        actions: new Set(["read"]),
+        info: null,
+    }],
+]);
+