diff --git a/.changeset/fifty-seas-thank.md b/.changeset/fifty-seas-thank.md
new file mode 100644
index 00000000..78895a0c
--- /dev/null
+++ b/.changeset/fifty-seas-thank.md
@@ -0,0 +1,6 @@
+---
+"@quassel/frontend": patch
+"@quassel/ui": patch
+---
+
+Add export ui
diff --git a/.changeset/many-snails-try.md b/.changeset/many-snails-try.md
new file mode 100644
index 00000000..6855da5a
--- /dev/null
+++ b/.changeset/many-snails-try.md
@@ -0,0 +1,6 @@
+---
+"@quassel/frontend": patch
+"@quassel/ui": patch
+---
+
+Add content shell
diff --git a/apps/frontend/src/components/Breadcrumbs.tsx b/apps/frontend/src/components/Breadcrumbs.tsx
new file mode 100644
index 00000000..fbb0c049
--- /dev/null
+++ b/apps/frontend/src/components/Breadcrumbs.tsx
@@ -0,0 +1,29 @@
+import { isMatch, Link, useLocation, useMatches } from "@tanstack/react-router";
+import { Anchor, Breadcrumbs } from "@quassel/ui";
+
+// Inspired by https://github.com/TanStack/router/blob/main/examples/react/kitchen-sink-file-based/src/components/Breadcrumbs.tsx
+export function BreadcrumbsNavigation() {
+  const matches = useMatches();
+  const location = useLocation();
+
+  if (matches.some((match) => match.status === "pending")) return null;
+
+  const matchesWithTitle = matches.filter((match) => isMatch(match, "context.title"));
+  const entries = matchesWithTitle.map((match) => ({ label: match.context.title, to: match.fullPath }));
+  const uniqueEntries = entries.filter((entry, index) => entries.findIndex((e) => e.label === entry.label) === index);
+
+  // Remove the last entry if it's the current page
+  if (uniqueEntries.length > 0 && uniqueEntries[uniqueEntries.length - 1].to.startsWith(location.pathname)) {
+    uniqueEntries.pop();
+  }
+
+  return (
+    <Breadcrumbs>
+      {uniqueEntries.map((e) => (
+        <Anchor key={e.label} renderRoot={(props) => <Link to={e.to} {...props} />}>
+          {e.label}
+        </Anchor>
+      ))}
+    </Breadcrumbs>
+  );
+}
diff --git a/apps/frontend/src/routes/__root.tsx b/apps/frontend/src/routes/__root.tsx
index 32810867..876bac82 100644
--- a/apps/frontend/src/routes/__root.tsx
+++ b/apps/frontend/src/routes/__root.tsx
@@ -17,13 +17,18 @@ import {
   Divider,
   FooterLogos,
 } from "@quassel/ui";
-import { createRootRouteWithContext, Link, Outlet, useNavigate } from "@tanstack/react-router";
+import { createRootRouteWithContext, Link, Outlet, RouteContext, useNavigate } from "@tanstack/react-router";
 import { version } from "../../package.json";
 import { $session } from "../stores/session";
 import { useStore } from "@nanostores/react";
 import { $layout } from "../stores/layout";
 import { $api } from "../stores/api";
-import { DefaultError, QueryClient, useQueryClient } from "@tanstack/react-query";
+import { DefaultError, useQueryClient } from "@tanstack/react-query";
+import { i18n } from "../stores/i18n";
+
+const messages = i18n("RootRoute", {
+  title: "Home",
+});
 
 function Root() {
   const n = useNavigate();
@@ -106,6 +111,7 @@ function Root() {
   );
 }
 
-export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
+export const Route = createRootRouteWithContext<RouteContext>()({
+  beforeLoad: () => ({ title: messages.get().title }),
   component: Root,
 });
diff --git a/apps/frontend/src/routes/_auth/administration.tsx b/apps/frontend/src/routes/_auth/administration.tsx
index c748c29e..573bb8ef 100644
--- a/apps/frontend/src/routes/_auth/administration.tsx
+++ b/apps/frontend/src/routes/_auth/administration.tsx
@@ -1,6 +1,13 @@
-import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { createFileRoute, Outlet, useMatches } from "@tanstack/react-router";
 import { useEffect } from "react";
 import { $layout } from "../../stores/layout";
+import { i18n } from "../../stores/i18n";
+import { ContentShell } from "@quassel/ui";
+import { BreadcrumbsNavigation } from "../../components/Breadcrumbs";
+
+const messages = i18n("AdministrationRoute", {
+  title: "Administration",
+});
 
 function AdministrationLayout() {
   useEffect(() => {
@@ -8,13 +15,18 @@ function AdministrationLayout() {
     return () => $layout.set({ admin: false });
   }, []);
 
+  const matches = useMatches();
+  const title = matches[matches.length - 2]?.context.title;
+  const actions = matches[matches.length - 1]?.context.actions;
+
   return (
-    <>
+    <ContentShell title={title || messages.get().title} breadcrumbs={<BreadcrumbsNavigation />} actions={actions}>
       <Outlet />
-    </>
+    </ContentShell>
   );
 }
 
 export const Route = createFileRoute("/_auth/administration")({
+  beforeLoad: () => ({ title: messages.get().title }),
   component: AdministrationLayout,
 });
diff --git a/apps/frontend/src/routes/_auth/administration/carers.tsx b/apps/frontend/src/routes/_auth/administration/carers.tsx
index 8bddace3..7e533308 100644
--- a/apps/frontend/src/routes/_auth/administration/carers.tsx
+++ b/apps/frontend/src/routes/_auth/administration/carers.tsx
@@ -1,17 +1,11 @@
-import { Paper, Title } from "@quassel/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { i18n } from "../../../stores/i18n";
 
-function AdministrationCarers() {
-  return (
-    <>
-      <Title>Carers</Title>
-      <Paper my="lg">
-        <Outlet />
-      </Paper>
-    </>
-  );
-}
+const messages = i18n("AdministrationCarersRoute", {
+  title: "Carers",
+});
 
 export const Route = createFileRoute("/_auth/administration/carers")({
-  component: AdministrationCarers,
+  beforeLoad: () => ({ title: messages.get().title }),
+  component: Outlet,
 });
diff --git a/apps/frontend/src/routes/_auth/administration/carers/index.tsx b/apps/frontend/src/routes/_auth/administration/carers/index.tsx
index e8f19f53..5ecfe6d9 100644
--- a/apps/frontend/src/routes/_auth/administration/carers/index.tsx
+++ b/apps/frontend/src/routes/_auth/administration/carers/index.tsx
@@ -12,50 +12,52 @@ function AdministrationCarersIndex() {
   });
 
   return (
-    <>
-      <Button variant="default" renderRoot={(props) => <Link to="/administration/carers/new" {...props} />}>
-        New carer
-      </Button>
-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Id</Table.Th>
-            <Table.Th>Name</Table.Th>
-            <Table.Th>Color</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {carers.data?.map((c) => (
-            <Table.Tr key={c.id}>
-              <Table.Td>{c.id}</Table.Td>
-              <Table.Td>{c.name}</Table.Td>
-              <Table.Td>{c.color && <ColorSwatch color={c.color} />}</Table.Td>
-              <Table.Td>
-                <Button variant="default" renderRoot={(props) => <Link to={`/administration/carers/edit/${c.id}`} {...props} />}>
-                  Edit
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Id</Table.Th>
+          <Table.Th>Name</Table.Th>
+          <Table.Th>Color</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {carers.data?.map((c) => (
+          <Table.Tr key={c.id}>
+            <Table.Td>{c.id}</Table.Td>
+            <Table.Td>{c.name}</Table.Td>
+            <Table.Td>{c.color && <ColorSwatch color={c.color} />}</Table.Td>
+            <Table.Td>
+              <Button variant="default" renderRoot={(props) => <Link to={`/administration/carers/edit/${c.id}`} {...props} />}>
+                Edit
+              </Button>
+              {sessionStore.role === "ADMIN" && (
+                <Button
+                  variant="default"
+                  onClick={() =>
+                    deleteCarerMutation.mutate({
+                      params: { path: { id: c.id.toString() } },
+                    })
+                  }
+                >
+                  Delete
                 </Button>
-                {sessionStore.role === "ADMIN" && (
-                  <Button
-                    variant="default"
-                    onClick={() =>
-                      deleteCarerMutation.mutate({
-                        params: { path: { id: c.id.toString() } },
-                      })
-                    }
-                  >
-                    Delete
-                  </Button>
-                )}
-              </Table.Td>
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
-    </>
+              )}
+            </Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
   );
 }
 
 export const Route = createFileRoute("/_auth/administration/carers/")({
+  beforeLoad: () => ({
+    actions: [
+      <Button key="new-carer" variant="default" renderRoot={(props) => <Link to="/administration/carers/new" {...props} />}>
+        New carer
+      </Button>,
+    ],
+  }),
   loader: ({ context: { queryClient } }) => queryClient.ensureQueryData($api.queryOptions("get", "/carers")),
   component: () => <AdministrationCarersIndex />,
 });
diff --git a/apps/frontend/src/routes/_auth/administration/export.tsx b/apps/frontend/src/routes/_auth/administration/export.tsx
index e3372625..d14a3dcb 100644
--- a/apps/frontend/src/routes/_auth/administration/export.tsx
+++ b/apps/frontend/src/routes/_auth/administration/export.tsx
@@ -1,17 +1,11 @@
-import { Paper, Title } from "@quassel/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { i18n } from "../../../stores/i18n";
 
-function AdministrationExport() {
-  return (
-    <>
-      <Title>Export</Title>
-      <Paper my="lg">
-        <Outlet />
-      </Paper>
-    </>
-  );
-}
+const messages = i18n("AdministrationExportRoute", {
+  title: "Export",
+});
 
 export const Route = createFileRoute("/_auth/administration/export")({
-  component: AdministrationExport,
+  beforeLoad: () => ({ title: messages.get().title }),
+  component: Outlet,
 });
diff --git a/apps/frontend/src/routes/_auth/administration/export/index.tsx b/apps/frontend/src/routes/_auth/administration/export/index.tsx
index 53b9cea0..1ed05632 100644
--- a/apps/frontend/src/routes/_auth/administration/export/index.tsx
+++ b/apps/frontend/src/routes/_auth/administration/export/index.tsx
@@ -1,18 +1,61 @@
-import { Button } from "@quassel/ui";
+import { Button, Group, Radio, Select, Stack, useForm } from "@quassel/ui";
 import { createFileRoute } from "@tanstack/react-router";
 import { $api } from "../../../../stores/api";
+import { i18n } from "../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+const messages = i18n("AdministrationExportIndexRoute", {
+  title: "Carers",
+  studyLabel: "Study",
+  studyPlaceholder: "Select a study",
+  formatLabel: "File format",
+  csvLabel: "Comma-separated values (CSV)",
+  sqlLabel: "Database export (SQL)",
+  formAction: "Download",
+});
+
+type FormValues = {
+  fileType: "csv" | "sql";
+  studyId?: string;
+};
 
 function AdministrationExportIndex() {
+  const t = useStore(messages);
+  const f = useForm<FormValues>({
+    mode: "uncontrolled",
+    initialValues: {
+      fileType: "csv",
+    },
+  });
+
+  const studies = useSuspenseQuery($api.queryOptions("get", "/studies"));
   const { isDownloading, downloadFile } = $api.useDownload("/export", "dump.sql");
   return (
-    <div>
-      <Button loading={isDownloading} onClick={() => downloadFile()}>
-        Download
-      </Button>
-    </div>
+    <form onSubmit={f.onSubmit(() => downloadFile())}>
+      <Stack>
+        <Select
+          label={t.studyLabel}
+          placeholder={t.studyPlaceholder}
+          data={studies.data.map((s) => ({ label: s.title, value: s.id.toString() }))}
+        />
+        <Radio.Group label={t.formatLabel} withAsterisk {...f.getInputProps("fileType")}>
+          <Group>
+            <Radio checked value="csv" label={t.csvLabel} />
+            <Radio value="sql" label={t.sqlLabel} />
+          </Group>
+        </Radio.Group>
+        <Button type="submit" loading={isDownloading}>
+          {t.formAction}
+        </Button>
+      </Stack>
+    </form>
   );
 }
 
 export const Route = createFileRoute("/_auth/administration/export/")({
+  loader: ({ context: { queryClient } }) => {
+    queryClient.ensureQueryData($api.queryOptions("get", "/studies"));
+  },
   component: AdministrationExportIndex,
 });
diff --git a/apps/frontend/src/routes/_auth/administration/index.tsx b/apps/frontend/src/routes/_auth/administration/index.tsx
index ac8a5481..ca70bb61 100644
--- a/apps/frontend/src/routes/_auth/administration/index.tsx
+++ b/apps/frontend/src/routes/_auth/administration/index.tsx
@@ -1,10 +1,15 @@
-import { Title } from "@quassel/ui";
 import { createFileRoute } from "@tanstack/react-router";
+import { i18n } from "../../../stores/i18n";
 
-export const Route = createFileRoute("/_auth/administration/")({
-  component: Index,
+const messages = i18n("AdministrationDashboardRoute", {
+  title: "Dashboard",
 });
 
 function Index() {
-  return <Title>Welcome to the administration interface!</Title>;
+  return null;
 }
+
+export const Route = createFileRoute("/_auth/administration/")({
+  beforeLoad: () => ({ title: messages.get().title }),
+  component: Index,
+});
diff --git a/apps/frontend/src/routes/_auth/administration/languages.tsx b/apps/frontend/src/routes/_auth/administration/languages.tsx
index 7238ee13..1f8ed974 100644
--- a/apps/frontend/src/routes/_auth/administration/languages.tsx
+++ b/apps/frontend/src/routes/_auth/administration/languages.tsx
@@ -1,17 +1,11 @@
-import { Title, Paper } from "@quassel/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { i18n } from "../../../stores/i18n";
 
-function AdministrationLanguages() {
-  return (
-    <>
-      <Title>Languages</Title>
-      <Paper my="lg">
-        <Outlet />
-      </Paper>
-    </>
-  );
-}
+const messages = i18n("AdministrationLanguagesRoute", {
+  title: "Languages",
+});
 
 export const Route = createFileRoute("/_auth/administration/languages")({
-  component: AdministrationLanguages,
+  beforeLoad: () => ({ title: messages.get().title }),
+  component: Outlet,
 });
diff --git a/apps/frontend/src/routes/_auth/administration/languages/edit.$id.tsx b/apps/frontend/src/routes/_auth/administration/languages/edit.$id.tsx
index eb46fd9c..a8f1e0c4 100644
--- a/apps/frontend/src/routes/_auth/administration/languages/edit.$id.tsx
+++ b/apps/frontend/src/routes/_auth/administration/languages/edit.$id.tsx
@@ -44,16 +44,14 @@ function AdministrationLanguagesEdit() {
   }, [isSuccess, data]);
 
   return (
-    <>
-      <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
-        <TextInput label="Name" type="name" {...f.getInputProps("name")} />
-        <TextInput label="IETF BCP 47" type="text" {...f.getInputProps("ietfBcp47")} />
+    <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
+      <TextInput label="Name" type="name" {...f.getInputProps("name")} />
+      <TextInput label="IETF BCP 47" type="text" {...f.getInputProps("ietfBcp47")} />
 
-        <Button type="submit" fullWidth mt="xl" loading={editCarerMutation.isPending}>
-          Change
-        </Button>
-      </form>
-    </>
+      <Button type="submit" fullWidth mt="xl" loading={editCarerMutation.isPending}>
+        Change
+      </Button>
+    </form>
   );
 }
 
diff --git a/apps/frontend/src/routes/_auth/administration/languages/index.tsx b/apps/frontend/src/routes/_auth/administration/languages/index.tsx
index 2d01953d..2c97c22a 100644
--- a/apps/frontend/src/routes/_auth/administration/languages/index.tsx
+++ b/apps/frontend/src/routes/_auth/administration/languages/index.tsx
@@ -13,50 +13,52 @@ function AdministrationLanguageIndex() {
   });
 
   return (
-    <>
-      <Button variant="default" renderRoot={(props) => <Link to="/administration/languages/new" {...props} />}>
-        New language
-      </Button>
-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Id</Table.Th>
-            <Table.Th>Name</Table.Th>
-            <Table.Th>IETF BCP 47</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {languages.data?.map((l) => (
-            <Table.Tr key={l.id}>
-              <Table.Td>{l.id}</Table.Td>
-              <Table.Td>{l.name}</Table.Td>
-              <Table.Td>{l.ietfBcp47}</Table.Td>
-              <Table.Td>
-                <Button variant="default" renderRoot={(props) => <Link to={`/administration/languages/edit/${l.id}`} {...props} />}>
-                  Edit
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Id</Table.Th>
+          <Table.Th>Name</Table.Th>
+          <Table.Th>IETF BCP 47</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {languages.data?.map((l) => (
+          <Table.Tr key={l.id}>
+            <Table.Td>{l.id}</Table.Td>
+            <Table.Td>{l.name}</Table.Td>
+            <Table.Td>{l.ietfBcp47}</Table.Td>
+            <Table.Td>
+              <Button variant="default" renderRoot={(props) => <Link to={`/administration/languages/edit/${l.id}`} {...props} />}>
+                Edit
+              </Button>
+              {sessionStore.role === "ADMIN" && (
+                <Button
+                  variant="default"
+                  onClick={() =>
+                    deleteLanguageMutation.mutate({
+                      params: { path: { id: l.id.toString() } },
+                    })
+                  }
+                >
+                  Delete
                 </Button>
-                {sessionStore.role === "ADMIN" && (
-                  <Button
-                    variant="default"
-                    onClick={() =>
-                      deleteLanguageMutation.mutate({
-                        params: { path: { id: l.id.toString() } },
-                      })
-                    }
-                  >
-                    Delete
-                  </Button>
-                )}
-              </Table.Td>
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
-    </>
+              )}
+            </Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
   );
 }
 
 export const Route = createFileRoute("/_auth/administration/languages/")({
+  beforeLoad: () => ({
+    actions: [
+      <Button key="new-language" variant="default" renderRoot={(props) => <Link to="/administration/languages/new" {...props} />}>
+        New language
+      </Button>,
+    ],
+  }),
   loader: ({ context: { queryClient } }) => queryClient.ensureQueryData($api.queryOptions("get", "/languages")),
   component: AdministrationLanguageIndex,
 });
diff --git a/apps/frontend/src/routes/_auth/administration/languages/new.tsx b/apps/frontend/src/routes/_auth/administration/languages/new.tsx
index 34a26241..9a464e32 100644
--- a/apps/frontend/src/routes/_auth/administration/languages/new.tsx
+++ b/apps/frontend/src/routes/_auth/administration/languages/new.tsx
@@ -24,16 +24,14 @@ function AdministrationLanguagesNew() {
   };
 
   return (
-    <>
-      <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
-        <TextInput label="Name" type="text" {...f.getInputProps("name")} required />
-        <TextInput label="IETF BCP 47" type="text" {...f.getInputProps("ietfBcp47")} />
+    <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
+      <TextInput label="Name" type="text" {...f.getInputProps("name")} required />
+      <TextInput label="IETF BCP 47" type="text" {...f.getInputProps("ietfBcp47")} />
 
-        <Button type="submit" fullWidth mt="xl" loading={createLanguageMutation.isPending}>
-          Create
-        </Button>
-      </form>
-    </>
+      <Button type="submit" fullWidth mt="xl" loading={createLanguageMutation.isPending}>
+        Create
+      </Button>
+    </form>
   );
 }
 
diff --git a/apps/frontend/src/routes/_auth/administration/participants.tsx b/apps/frontend/src/routes/_auth/administration/participants.tsx
index f0b70121..df3de215 100644
--- a/apps/frontend/src/routes/_auth/administration/participants.tsx
+++ b/apps/frontend/src/routes/_auth/administration/participants.tsx
@@ -1,17 +1,11 @@
-import { Paper, Title } from "@quassel/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { i18n } from "../../../stores/i18n";
 
-function AdministrationParticipants() {
-  return (
-    <>
-      <Title>Participants</Title>
-      <Paper my="lg">
-        <Outlet />
-      </Paper>
-    </>
-  );
-}
+const messages = i18n("AdministrationParticipantsRoute", {
+  title: "Participants",
+});
 
 export const Route = createFileRoute("/_auth/administration/participants")({
-  component: AdministrationParticipants,
+  beforeLoad: () => ({ title: messages.get().title }),
+  component: Outlet,
 });
diff --git a/apps/frontend/src/routes/_auth/administration/participants/index.tsx b/apps/frontend/src/routes/_auth/administration/participants/index.tsx
index 77adfe19..6fcbcfea 100644
--- a/apps/frontend/src/routes/_auth/administration/participants/index.tsx
+++ b/apps/frontend/src/routes/_auth/administration/participants/index.tsx
@@ -13,52 +13,54 @@ function AdministrationParticipantsIndex() {
   });
 
   return (
-    <>
-      <Button variant="default" renderRoot={(props) => <Link to="/administration/participants/new" {...props} />}>
-        New participant
-      </Button>
-      <Button variant="default" renderRoot={(props) => <Link to="/administration/participants/import" {...props} />}>
-        Import participants
-      </Button>
-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Id</Table.Th>
-            <Table.Th>Birthday</Table.Th>
-            <Table.Th>Actions</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {participants.data?.map((p) => (
-            <Table.Tr key={p.id}>
-              <Table.Td>{p.id}</Table.Td>
-              <Table.Td>{p.birthday}</Table.Td>
-              <Table.Td>
-                <Button variant="default" renderRoot={(props) => <Link to={`/administration/participants/edit/${p.id}`} {...props} />}>
-                  Edit
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Id</Table.Th>
+          <Table.Th>Birthday</Table.Th>
+          <Table.Th>Actions</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {participants.data?.map((p) => (
+          <Table.Tr key={p.id}>
+            <Table.Td>{p.id}</Table.Td>
+            <Table.Td>{p.birthday}</Table.Td>
+            <Table.Td>
+              <Button variant="default" renderRoot={(props) => <Link to={`/administration/participants/edit/${p.id}`} {...props} />}>
+                Edit
+              </Button>
+              {sessionStore.role === "ADMIN" && (
+                <Button
+                  variant="default"
+                  onClick={() =>
+                    deleteParticipantMutation.mutate({
+                      params: { path: { id: p.id.toString() } },
+                    })
+                  }
+                >
+                  Delete
                 </Button>
-                {sessionStore.role === "ADMIN" && (
-                  <Button
-                    variant="default"
-                    onClick={() =>
-                      deleteParticipantMutation.mutate({
-                        params: { path: { id: p.id.toString() } },
-                      })
-                    }
-                  >
-                    Delete
-                  </Button>
-                )}
-              </Table.Td>
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
-    </>
+              )}
+            </Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
   );
 }
 
 export const Route = createFileRoute("/_auth/administration/participants/")({
+  beforeLoad: () => ({
+    actions: [
+      <Button key="new-participant" variant="default" renderRoot={(props) => <Link to="/administration/participants/new" {...props} />}>
+        New participant
+      </Button>,
+      <Button key="import-participants" variant="default" renderRoot={(props) => <Link to="/administration/participants/import" {...props} />}>
+        Import participants
+      </Button>,
+    ],
+  }),
   loader: ({ context: { queryClient } }) => queryClient.ensureQueryData($api.queryOptions("get", "/participants")),
   component: () => <AdministrationParticipantsIndex />,
 });
diff --git a/apps/frontend/src/routes/_auth/administration/participants/new.tsx b/apps/frontend/src/routes/_auth/administration/participants/new.tsx
index 9363f72e..774febbc 100644
--- a/apps/frontend/src/routes/_auth/administration/participants/new.tsx
+++ b/apps/frontend/src/routes/_auth/administration/participants/new.tsx
@@ -24,16 +24,14 @@ function AdministrationParticipantsNew() {
   };
 
   return (
-    <>
-      <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
-        <TextInput label="Id" type="number" {...f.getInputProps("id")} defaultValue={undefined} required />
-        <TextInput label="Birthday" type="date" {...f.getInputProps("birthday")} required />
+    <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
+      <TextInput label="Id" type="number" {...f.getInputProps("id")} defaultValue={undefined} required />
+      <TextInput label="Birthday" type="date" {...f.getInputProps("birthday")} required />
 
-        <Button type="submit" fullWidth mt="xl" loading={createParticipantMutation.isPending}>
-          Create
-        </Button>
-      </form>
-    </>
+      <Button type="submit" fullWidth mt="xl" loading={createParticipantMutation.isPending}>
+        Create
+      </Button>
+    </form>
   );
 }
 
diff --git a/apps/frontend/src/routes/_auth/administration/questionnaires.tsx b/apps/frontend/src/routes/_auth/administration/questionnaires.tsx
index ec1ea40c..aa58ee4f 100644
--- a/apps/frontend/src/routes/_auth/administration/questionnaires.tsx
+++ b/apps/frontend/src/routes/_auth/administration/questionnaires.tsx
@@ -1,17 +1,11 @@
-import { Title, Paper } from "@quassel/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { i18n } from "../../../stores/i18n";
 
-function AdministrationQuestionnaires() {
-  return (
-    <>
-      <Title>Questionnaires</Title>
-      <Paper my="lg">
-        <Outlet />
-      </Paper>
-    </>
-  );
-}
+const messages = i18n("AdministrationQuestionnairesRoute", {
+  title: "Questionnaires",
+});
 
 export const Route = createFileRoute("/_auth/administration/questionnaires")({
-  component: AdministrationQuestionnaires,
+  beforeLoad: () => ({ title: messages.get().title }),
+  component: Outlet,
 });
diff --git a/apps/frontend/src/routes/_auth/administration/questionnaires/edit.$id.tsx b/apps/frontend/src/routes/_auth/administration/questionnaires/edit.$id.tsx
index 054ae38f..5a3adf35 100644
--- a/apps/frontend/src/routes/_auth/administration/questionnaires/edit.$id.tsx
+++ b/apps/frontend/src/routes/_auth/administration/questionnaires/edit.$id.tsx
@@ -40,15 +40,13 @@ function AdministrationQuestionnairesEdit() {
   }, [isSuccess, data]);
 
   return (
-    <>
-      <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
-        <TextInput label="Name" type="name" {...f.getInputProps("title")} />
+    <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
+      <TextInput label="Name" type="name" {...f.getInputProps("title")} />
 
-        <Button type="submit" fullWidth mt="xl" loading={editQuestionnaireMutation.isPending}>
-          Change
-        </Button>
-      </form>
-    </>
+      <Button type="submit" fullWidth mt="xl" loading={editQuestionnaireMutation.isPending}>
+        Change
+      </Button>
+    </form>
   );
 }
 
diff --git a/apps/frontend/src/routes/_auth/administration/questionnaires/index.tsx b/apps/frontend/src/routes/_auth/administration/questionnaires/index.tsx
index d19ed77a..5bedbadd 100644
--- a/apps/frontend/src/routes/_auth/administration/questionnaires/index.tsx
+++ b/apps/frontend/src/routes/_auth/administration/questionnaires/index.tsx
@@ -12,40 +12,38 @@ function AdministrationQuestionnairesIndex() {
   });
 
   return (
-    <>
-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Id</Table.Th>
-            <Table.Th>Name</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {data?.map((q) => (
-            <Table.Tr key={q.id}>
-              <Table.Td>{q.id}</Table.Td>
-              <Table.Td>
-                <Button variant="default" renderRoot={(props) => <Link to={`/administration/questionnaires/edit/${q.id}`} {...props} />}>
-                  Edit
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Id</Table.Th>
+          <Table.Th>Name</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {data?.map((q) => (
+          <Table.Tr key={q.id}>
+            <Table.Td>{q.id}</Table.Td>
+            <Table.Td>
+              <Button variant="default" renderRoot={(props) => <Link to={`/administration/questionnaires/edit/${q.id}`} {...props} />}>
+                Edit
+              </Button>
+              {sessionStore.role === "ADMIN" && (
+                <Button
+                  variant="default"
+                  onClick={() =>
+                    deleteQuestionnaireMutation.mutate({
+                      params: { path: { id: q.id.toString() } },
+                    })
+                  }
+                >
+                  Delete
                 </Button>
-                {sessionStore.role === "ADMIN" && (
-                  <Button
-                    variant="default"
-                    onClick={() =>
-                      deleteQuestionnaireMutation.mutate({
-                        params: { path: { id: q.id.toString() } },
-                      })
-                    }
-                  >
-                    Delete
-                  </Button>
-                )}
-              </Table.Td>
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
-    </>
+              )}
+            </Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
   );
 }
 
diff --git a/apps/frontend/src/routes/_auth/administration/studies.tsx b/apps/frontend/src/routes/_auth/administration/studies.tsx
index bfa698f2..09a5f26c 100644
--- a/apps/frontend/src/routes/_auth/administration/studies.tsx
+++ b/apps/frontend/src/routes/_auth/administration/studies.tsx
@@ -1,17 +1,11 @@
-import { Title, Paper } from "@quassel/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { i18n } from "../../../stores/i18n";
 
-function AdministrationStudies() {
-  return (
-    <>
-      <Title>Studies</Title>
-      <Paper my="lg">
-        <Outlet />
-      </Paper>
-    </>
-  );
-}
+const messages = i18n("AdministrationStudiesRoute", {
+  title: "Studies",
+});
 
 export const Route = createFileRoute("/_auth/administration/studies")({
-  component: AdministrationStudies,
+  beforeLoad: () => ({ title: messages.get().title }),
+  component: Outlet,
 });
diff --git a/apps/frontend/src/routes/_auth/administration/studies/edit.$id.tsx b/apps/frontend/src/routes/_auth/administration/studies/edit.$id.tsx
index 78dd4c0e..c103ae97 100644
--- a/apps/frontend/src/routes/_auth/administration/studies/edit.$id.tsx
+++ b/apps/frontend/src/routes/_auth/administration/studies/edit.$id.tsx
@@ -40,16 +40,14 @@ function AdministrationStudiesEdit() {
   }, [study.isSuccess, study.data]);
 
   return (
-    <>
-      <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
-        <TextInput label="Id" type="number" {...f.getInputProps("id")} required />
-        <TextInput label="Title" type="text" {...f.getInputProps("title")} required />
+    <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
+      <TextInput label="Id" type="number" {...f.getInputProps("id")} required />
+      <TextInput label="Title" type="text" {...f.getInputProps("title")} required />
 
-        <Button type="submit" fullWidth mt="xl" loading={editStudyMutation.isPending}>
-          Change
-        </Button>
-      </form>
-    </>
+      <Button type="submit" fullWidth mt="xl" loading={editStudyMutation.isPending}>
+        Change
+      </Button>
+    </form>
   );
 }
 
diff --git a/apps/frontend/src/routes/_auth/administration/studies/index.tsx b/apps/frontend/src/routes/_auth/administration/studies/index.tsx
index c68b83b1..b098ced2 100644
--- a/apps/frontend/src/routes/_auth/administration/studies/index.tsx
+++ b/apps/frontend/src/routes/_auth/administration/studies/index.tsx
@@ -13,48 +13,50 @@ function AdministrationStudiesIndex() {
   });
 
   return (
-    <>
-      <Button variant="default" renderRoot={(props) => <Link to="/administration/studies/new" {...props} />}>
-        New study
-      </Button>
-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Id</Table.Th>
-            <Table.Th>Title</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {studies.data?.map((s) => (
-            <Table.Tr key={s.id}>
-              <Table.Td>{s.id}</Table.Td>
-              <Table.Td>{s.title}</Table.Td>
-              <Table.Td>
-                <Button variant="default" renderRoot={(props) => <Link to={`/administration/studies/edit/${s.id}`} {...props} />}>
-                  Edit
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Id</Table.Th>
+          <Table.Th>Title</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {studies.data?.map((s) => (
+          <Table.Tr key={s.id}>
+            <Table.Td>{s.id}</Table.Td>
+            <Table.Td>{s.title}</Table.Td>
+            <Table.Td>
+              <Button variant="default" renderRoot={(props) => <Link to={`/administration/studies/edit/${s.id}`} {...props} />}>
+                Edit
+              </Button>
+              {sessionStore.role === "ADMIN" && (
+                <Button
+                  variant="default"
+                  onClick={() =>
+                    deleteStudyMutation.mutate({
+                      params: { path: { id: s.id.toString() } },
+                    })
+                  }
+                >
+                  Delete
                 </Button>
-                {sessionStore.role === "ADMIN" && (
-                  <Button
-                    variant="default"
-                    onClick={() =>
-                      deleteStudyMutation.mutate({
-                        params: { path: { id: s.id.toString() } },
-                      })
-                    }
-                  >
-                    Delete
-                  </Button>
-                )}
-              </Table.Td>
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
-    </>
+              )}
+            </Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
   );
 }
 
 export const Route = createFileRoute("/_auth/administration/studies/")({
+  beforeLoad: () => ({
+    actions: [
+      <Button key="new-study" variant="default" renderRoot={(props) => <Link to="/administration/studies/new" {...props} />}>
+        New study
+      </Button>,
+    ],
+  }),
   loader: ({ context: { queryClient } }) => queryClient.ensureQueryData($api.queryOptions("get", "/studies")),
   component: () => <AdministrationStudiesIndex />,
 });
diff --git a/apps/frontend/src/routes/_auth/administration/studies/new.tsx b/apps/frontend/src/routes/_auth/administration/studies/new.tsx
index 2a1debd9..098468f5 100644
--- a/apps/frontend/src/routes/_auth/administration/studies/new.tsx
+++ b/apps/frontend/src/routes/_auth/administration/studies/new.tsx
@@ -25,16 +25,14 @@ function AdministrationStudiesNew() {
   };
 
   return (
-    <>
-      <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
-        <TextInput label="Id" type="number" {...f.getInputProps("id")} defaultValue={undefined} required />
-        <TextInput label="Title" type="text" {...f.getInputProps("title")} required />
+    <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
+      <TextInput label="Id" type="number" {...f.getInputProps("id")} defaultValue={undefined} required />
+      <TextInput label="Title" type="text" {...f.getInputProps("title")} required />
 
-        <Button type="submit" fullWidth mt="xl" loading={createStudyMutation.isPending}>
-          Create
-        </Button>
-      </form>
-    </>
+      <Button type="submit" fullWidth mt="xl" loading={createStudyMutation.isPending}>
+        Create
+      </Button>
+    </form>
   );
 }
 
diff --git a/apps/frontend/src/routes/_auth/administration/users.tsx b/apps/frontend/src/routes/_auth/administration/users.tsx
index 3538a62d..a8d3b945 100644
--- a/apps/frontend/src/routes/_auth/administration/users.tsx
+++ b/apps/frontend/src/routes/_auth/administration/users.tsx
@@ -1,17 +1,11 @@
-import { Paper, Title } from "@quassel/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { i18n } from "../../../stores/i18n";
 
-function AdministrationUsers() {
-  return (
-    <>
-      <Title>Users</Title>
-      <Paper my="lg">
-        <Outlet />
-      </Paper>
-    </>
-  );
-}
+const messages = i18n("AdministrationUsersRoute", {
+  title: "Users",
+});
 
 export const Route = createFileRoute("/_auth/administration/users")({
-  component: AdministrationUsers,
+  beforeLoad: () => ({ title: messages.get().title }),
+  component: Outlet,
 });
diff --git a/apps/frontend/src/routes/_auth/administration/users/edit.$id.tsx b/apps/frontend/src/routes/_auth/administration/users/edit.$id.tsx
index f1353f6c..7e393cf1 100644
--- a/apps/frontend/src/routes/_auth/administration/users/edit.$id.tsx
+++ b/apps/frontend/src/routes/_auth/administration/users/edit.$id.tsx
@@ -35,17 +35,15 @@ function AdministrationUsersEdit() {
   }, [user.isSuccess, user.data]);
 
   return (
-    <>
-      <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
-        <TextInput label="Email" type="email" {...f.getInputProps("email")} />
-        <PasswordInput label="Password" {...f.getInputProps("password")} autoComplete="new-password" />
-        <Select label="Role" data={userMutationDtoRoleValues} {...f.getInputProps("role")} />
+    <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
+      <TextInput label="Email" type="email" {...f.getInputProps("email")} />
+      <PasswordInput label="Password" {...f.getInputProps("password")} autoComplete="new-password" />
+      <Select label="Role" data={userMutationDtoRoleValues} {...f.getInputProps("role")} />
 
-        <Button type="submit" fullWidth mt="xl" loading={editUserMutation.isPending}>
-          Change
-        </Button>
-      </form>
-    </>
+      <Button type="submit" fullWidth mt="xl" loading={editUserMutation.isPending}>
+        Change
+      </Button>
+    </form>
   );
 }
 
diff --git a/apps/frontend/src/routes/_auth/administration/users/index.tsx b/apps/frontend/src/routes/_auth/administration/users/index.tsx
index 1f702b23..feb394f4 100644
--- a/apps/frontend/src/routes/_auth/administration/users/index.tsx
+++ b/apps/frontend/src/routes/_auth/administration/users/index.tsx
@@ -11,44 +11,46 @@ function AdministrationUsersIndex() {
   const deleteUserMutation = $api.useMutation("delete", "/users/{id}", { onSuccess: () => users.refetch() });
 
   return (
-    <>
-      <Button variant="default" renderRoot={(props) => <Link to="/administration/users/new" {...props} />}>
-        New user
-      </Button>
-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Id</Table.Th>
-            <Table.Th>Email</Table.Th>
-            <Table.Th>Role</Table.Th>
-            <Table.Th>Actions</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {users.data?.map((u) => (
-            <Table.Tr key={u.id}>
-              <Table.Td>{u.id}</Table.Td>
-              <Table.Td>{u.email}</Table.Td>
-              <Table.Td>{u.role}</Table.Td>
-              <Table.Td>
-                <Button variant="default" renderRoot={(props) => <Link to={`/administration/users/edit/${u.id}`} {...props} />}>
-                  Edit
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Id</Table.Th>
+          <Table.Th>Email</Table.Th>
+          <Table.Th>Role</Table.Th>
+          <Table.Th>Actions</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {users.data?.map((u) => (
+          <Table.Tr key={u.id}>
+            <Table.Td>{u.id}</Table.Td>
+            <Table.Td>{u.email}</Table.Td>
+            <Table.Td>{u.role}</Table.Td>
+            <Table.Td>
+              <Button variant="default" renderRoot={(props) => <Link to={`/administration/users/edit/${u.id}`} {...props} />}>
+                Edit
+              </Button>
+              {sessionStore.role === "ADMIN" && (
+                <Button variant="default" onClick={() => deleteUserMutation.mutate({ params: { path: { id: u.id.toString() } } })}>
+                  Delete
                 </Button>
-                {sessionStore.role === "ADMIN" && (
-                  <Button variant="default" onClick={() => deleteUserMutation.mutate({ params: { path: { id: u.id.toString() } } })}>
-                    Delete
-                  </Button>
-                )}
-              </Table.Td>
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
-    </>
+              )}
+            </Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
   );
 }
 
 export const Route = createFileRoute("/_auth/administration/users/")({
+  beforeLoad: () => ({
+    actions: [
+      <Button key="new-user" variant="default" renderRoot={(props) => <Link to="/administration/users/new" {...props} />}>
+        New user
+      </Button>,
+    ],
+  }),
   loader: ({ context: { queryClient } }) => queryClient.ensureQueryData($api.queryOptions("get", "/users")),
   component: AdministrationUsersIndex,
 });
diff --git a/apps/frontend/src/routes/_auth/administration/users/new.tsx b/apps/frontend/src/routes/_auth/administration/users/new.tsx
index afdcf84b..1a1d7b67 100644
--- a/apps/frontend/src/routes/_auth/administration/users/new.tsx
+++ b/apps/frontend/src/routes/_auth/administration/users/new.tsx
@@ -24,17 +24,15 @@ function AdministrationUsersNew() {
   };
 
   return (
-    <>
-      <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
-        <TextInput label="Email" type="email" {...f.getInputProps("email")} required />
-        <PasswordInput label="Password" {...f.getInputProps("password")} autoComplete="new-password" required />
-        <Select label="Role" {...f.getInputProps("role")} data={userCreationDtoRoleValues} />
+    <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
+      <TextInput label="Email" type="email" {...f.getInputProps("email")} required />
+      <PasswordInput label="Password" {...f.getInputProps("password")} autoComplete="new-password" required />
+      <Select label="Role" {...f.getInputProps("role")} data={userCreationDtoRoleValues} />
 
-        <Button type="submit" fullWidth mt="xl" loading={createUserMutation.isPending}>
-          Create
-        </Button>
-      </form>
-    </>
+      <Button type="submit" fullWidth mt="xl" loading={createUserMutation.isPending}>
+        Create
+      </Button>
+    </form>
   );
 }
 
diff --git a/apps/frontend/src/routes/_auth/index.tsx b/apps/frontend/src/routes/_auth/index.tsx
index e500327c..cd83ccac 100644
--- a/apps/frontend/src/routes/_auth/index.tsx
+++ b/apps/frontend/src/routes/_auth/index.tsx
@@ -2,11 +2,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { HeroSection } from "../../sections/HeroSection";
 
 function Index() {
-  return (
-    <>
-      <HeroSection />
-    </>
-  );
+  return <HeroSection />;
 }
 
 export const Route = createFileRoute("/_auth/")({
diff --git a/apps/frontend/src/types.d.ts b/apps/frontend/src/types.d.ts
index 08fc88a9..109fc83f 100644
--- a/apps/frontend/src/types.d.ts
+++ b/apps/frontend/src/types.d.ts
@@ -1,4 +1,7 @@
 import "@tanstack/react-query";
+import "@tanstack/react-router";
+import { QueryClient } from "@tanstack/react-query";
+import { ReactElement } from "react";
 
 declare module "@tanstack/react-query" {
   interface Register {
@@ -10,6 +13,14 @@ declare module "@tanstack/react-query" {
   }
 }
 
+declare module "@tanstack/react-router" {
+  interface RouteContext {
+    queryClient: QueryClient;
+    title?: string;
+    actions?: ReactElement[];
+  }
+}
+
 declare global {
   interface Window {
     env?: {
diff --git a/libs/ui/src/components/ContentShell.tsx b/libs/ui/src/components/ContentShell.tsx
new file mode 100644
index 00000000..2f363637
--- /dev/null
+++ b/libs/ui/src/components/ContentShell.tsx
@@ -0,0 +1,21 @@
+import { Flex, Paper, Title } from "@mantine/core";
+import { PropsWithChildren, ReactElement } from "react";
+
+type Props = PropsWithChildren<{
+  title: string;
+  actions?: ReactElement[];
+  breadcrumbs?: ReactElement;
+}>;
+
+export function ContentShell({ title, breadcrumbs, actions, children }: Props) {
+  return (
+    <>
+      {breadcrumbs}
+      <Flex justify="space-between">
+        <Title>{title}</Title>
+        <div>{actions}</div>
+      </Flex>
+      <Paper my="lg">{children}</Paper>
+    </>
+  );
+}
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index 8226bad0..3aa6953f 100644
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -29,6 +29,7 @@ import "@mantine/core/styles/Title.css";
 import "@mantine/core/styles/ActionIcon.css";
 import "@mantine/core/styles/Combobox.css";
 import "@mantine/core/styles/Stack.css";
+import "@mantine/core/styles/Radio.css";
 
 import "@mantine/dates/styles.css";
 
@@ -41,6 +42,7 @@ export { formatDate, getTime, getDateFromTimeAndWeekday, getNext, isSameOrAfter,
 
 // custom components
 export { Brand } from "./components/Brand";
+export { ContentShell } from "./components/ContentShell";
 export { FooterLogos } from "./components/FooterLogos";
 export { ImportInput } from "./components/ImportInput";
 export { ImportPreview } from "./components/ImportPreview";
@@ -51,6 +53,7 @@ export {
   ActionIcon,
   Anchor,
   AppShell,
+  Breadcrumbs,
   Button,
   Checkbox,
   Combobox,
@@ -61,10 +64,12 @@ export {
   Flex,
   Group,
   InputError,
+  InputLabel,
   Modal,
   NavLink,
   Paper,
   PasswordInput,
+  Radio,
   Select,
   type SelectProps,
   Stack,
diff --git a/libs/ui/vite.config.ts b/libs/ui/vite.config.ts
index f71a88bb..4bb6a8f8 100644
--- a/libs/ui/vite.config.ts
+++ b/libs/ui/vite.config.ts
@@ -27,6 +27,7 @@ export default defineConfig({
           "@mantine/dates": "mantineDates",
           "@mantine/hooks": "mantineHooks",
           "@mantine/form": "mantineForm",
+          "@mantine/notifications": "mantineNotifications",
           "@tabler/icons-react/dist/esm/icons/index.mjs": "tablerIconsReact",
           "react-dsv-import": "reactDsvImport",
         },