diff --git a/composables/use-error-messages.ts b/composables/use-error-messages.ts
new file mode 100644
index 0000000..9fd46d9
--- /dev/null
+++ b/composables/use-error-messages.ts
@@ -0,0 +1,28 @@
+interface ErrorMessages {
+	notFound: string;
+	unknown: string;
+}
+
+export function useErrorMessage(error: Ref<Error | null>, messages: ErrorMessages) {
+	watch(
+		error,
+		(error) => {
+			if (error != null) {
+				if ("statusCode" in error && error.statusCode === 404) {
+					throw createError({
+						fatal: true,
+						statusCode: 404,
+						statusMessage: messages.notFound,
+					});
+				} else {
+					throw createError({
+						fatal: true,
+						statusCode: 500,
+						statusMessage: messages.unknown,
+					});
+				}
+			}
+		},
+		{ immediate: true },
+	);
+}
diff --git a/content/system-pages/about-journey.md b/content/system-pages/about-journey.md
new file mode 100644
index 0000000..5709ef5
--- /dev/null
+++ b/content/system-pages/about-journey.md
@@ -0,0 +1,27 @@
+---
+title: Vorgehensweise
+---
+
+Elit anim cillum labore tempor Lorem irure voluptate qui nisi. Nostrud ut incididunt sint laborum ad
+est enim do qui. Occaecat labore ea adipisicing est esse enim amet irure non. Non ex et magna elit
+consequat cupidatat. Officia velit aute voluptate velit minim ullamco. Enim laboris irure sunt
+aliquip reprehenderit consequat cillum labore eiusmod ad cupidatat aliqua consectetur magna.
+
+Eiusmod excepteur amet id aliqua nostrud fugiat excepteur laboris elit nulla sunt adipisicing. Magna
+officia eu voluptate ad amet enim laboris laborum. Ut occaecat exercitation cillum ullamco veniam
+consequat ea Lorem veniam. Tempor officia pariatur est tempor aliquip exercitation reprehenderit
+aliquip cillum in enim pariatur amet. Duis anim cupidatat nulla tempor commodo magna pariatur
+laboris irure.
+
+Velit irure eu voluptate ipsum nulla incididunt. Consectetur veniam irure minim ea sint proident
+minim nisi commodo culpa dolore ex. Cillum nostrud voluptate commodo tempor ut consectetur. Dolor
+cillum esse nostrud eu veniam pariatur eiusmod eiusmod enim aliquip Lorem aliqua nulla exercitation.
+Exercitation non fugiat ea dolore nulla. Sunt esse eiusmod qui ea. Ipsum dolore non cupidatat velit
+commodo et pariatur.
+
+Ea reprehenderit Lorem cillum exercitation id est officia culpa irure ipsum fugiat tempor ullamco.
+Elit tempor labore occaecat culpa do tempor tempor. Eiusmod anim esse tempor deserunt deserunt aute
+aliquip eu cupidatat ad qui incididunt mollit est. Nisi ad nisi pariatur voluptate irure minim culpa
+voluptate aliqua et. Velit magna consequat incididunt dolor nulla consectetur sunt pariatur enim
+laborum culpa deserunt.
+
diff --git a/content/system-pages/about-team.md b/content/system-pages/about-team.md
new file mode 100644
index 0000000..f2e80b2
--- /dev/null
+++ b/content/system-pages/about-team.md
@@ -0,0 +1,12 @@
+---
+title: Das Team
+---
+
+**Verfasser\*innen des Antrags:** Anna Babka unter Mitarbeit von Silvana Cimenti, Peter Clar, Matej
+Durco, Vanessa Hannesschläger und Daniel Schopper
+
+**Team:** Peter Clar, Matej Durco, Vanessa Hannesschläger, Julia Lingl, Kay Kollmann, Matthias
+Schmidt
+
+**Kooperation:** Klaus Kastberger für das Franz-Nabl-Institut der Universität Graz, Österreichische
+Akademie der Wissenschaften, Austrian Centre for Digital Humanities
diff --git a/content/team/peter-clar.md b/content/team/peter-clar.md
new file mode 100644
index 0000000..790e3c0
--- /dev/null
+++ b/content/team/peter-clar.md
@@ -0,0 +1,9 @@
+---
+firstName: Peter
+lastName: Clar
+image: /assets/images/peter_clar.png
+---
+
+ist selbstständiger Literaturwissenschaftler und Schriftsteller in Wien. Seine
+Forschungsschwerpunkte sind deutschsprachige, speziell österreichische, Literatur des 20. und 21.
+Jahrhunderts, Poetryslam, und Literaturtheorie.
diff --git a/pages/about.vue b/pages/about.vue
index ea5a41d..29bf231 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -1,5 +1,107 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { noop } from "@acdh-oeaw/lib";
+import { useQuery } from "@tanstack/vue-query";
+
+import type { SystemPage, TeamMember } from "@/types/content";
+
+const {
+	data: team,
+	error,
+	suspense,
+} = useQuery({
+	queryKey: ["system-pages", "about-team"] as const,
+	queryFn() {
+		return queryContent<SystemPage>("system-pages", "about-team").findOne();
+	},
+});
+
+useErrorMessage(error, {
+	notFound: "Seite nicht gefunden",
+	unknown: "Interner Fehler",
+});
+
+onServerPrefetch(async () => {
+	/**
+	 * Delegate errors to the client, to avoid displaying error page with status code 500.
+	 *
+	 * @see https://github.com/TanStack/query/issues/6606
+	 * @see https://github.com/TanStack/query/issues/5976
+	 */
+	await suspense().catch(noop);
+});
+
+const { data: journey } = useQuery({
+	queryKey: ["system-pages", "about-journey"] as const,
+	queryFn() {
+		return queryContent<SystemPage>("system-pages", "about-journey").findOne();
+	},
+});
+
+const { data: memberList } = useQuery({
+	queryKey: ["team"] as const,
+	queryFn() {
+		return queryContent<TeamMember>("team").find();
+	},
+});
+</script>
 
 <template>
-	<div>Über das Projekt</div>
+	<MainContent class="container grid grid-cols-[auto_1fr] gap-8 px-40 py-8">
+		<Card class="size-64 bg-frisch-grey">
+			<CardContent class="flex size-full py-4 text-xl font-bold text-white">
+				ÜBER DAS PROJEKT
+			</CardContent>
+		</Card>
+		<div class="prose">
+			<ContentRenderer
+				v-if="team != null"
+				:value="team"
+				class="prose prose-lg max-w-3xl text-balance text-center"
+			>
+				<h3 class="font-bold text-frisch-orange">
+					{{ team.title }}
+				</h3>
+				<ContentRendererMarkdown :value="team" />
+				<template #empty></template>
+			</ContentRenderer>
+
+			<ContentRenderer
+				v-if="journey != null"
+				:value="journey"
+				class="prose prose-lg max-w-3xl text-balance text-center"
+			>
+				<ul class="list-none p-0">
+					<li
+						v-for="member of memberList"
+						:key="member._id"
+						class="grid grid-cols-[auto_1fr] gap-4 p-0"
+					>
+						<div class="not-prose relative grid size-64 place-items-center overflow-hidden">
+							<img
+								v-if="member.image != null"
+								alt=""
+								class="absolute inset-0 size-full object-cover"
+								:src="member.image"
+							/>
+						</div>
+						<div>
+							<h2 class="m-0 font-semibold text-frisch-indigo">
+								{{ member.firstName }}
+								{{ member.lastName }}
+							</h2>
+							<ContentRenderer :value="member">
+								<template #empty></template>
+							</ContentRenderer>
+						</div>
+					</li>
+				</ul>
+
+				<h3 class="font-bold text-frisch-orange">
+					{{ journey.title }}
+				</h3>
+				<ContentRendererMarkdown :value="journey" />
+				<template #empty></template>
+			</ContentRenderer>
+		</div>
+	</MainContent>
 </template>
diff --git a/public/assets/images/peter_clar.png b/public/assets/images/peter_clar.png
new file mode 100644
index 0000000..f516ad5
Binary files /dev/null and b/public/assets/images/peter_clar.png differ
diff --git a/types/content.ts b/types/content.ts
new file mode 100644
index 0000000..080d34f
--- /dev/null
+++ b/types/content.ts
@@ -0,0 +1,11 @@
+import type { MarkdownParsedContent } from "@nuxt/content/dist/runtime/types";
+
+export interface SystemPage extends MarkdownParsedContent {
+	title: string;
+}
+
+export interface TeamMember extends MarkdownParsedContent {
+	firstName?: string;
+	lastName: string;
+	image?: string;
+}