diff --git a/src/app.css b/src/app.css
index 2b04696..5413e2f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3,7 +3,7 @@
 
 @layer base {
   html {
-    @apply font-vinque bg-cocoa-brown-700 p-4;
+    @apply font-vinque bg-cocoa-brown-700 text-yellow-900 p-4;
   }
 }
 
diff --git a/src/lib/credits/actor.svelte b/src/lib/actor.svelte
similarity index 55%
rename from src/lib/credits/actor.svelte
rename to src/lib/actor.svelte
index 4f6c1e4..889b50f 100644
--- a/src/lib/credits/actor.svelte
+++ b/src/lib/actor.svelte
@@ -3,6 +3,7 @@
   export let role: string;
 </script>
 
-<div>
-  <span>{role}</span> - <span>{actor}</span>
-</div>
+<tr>
+  <td class="font-vinque">{role}</td>
+  <td>{actor}</td>
+</tr>
diff --git a/src/lib/about/hero.svelte b/src/lib/hero.svelte
similarity index 53%
rename from src/lib/about/hero.svelte
rename to src/lib/hero.svelte
index f0dadf2..4e2c4e3 100644
--- a/src/lib/about/hero.svelte
+++ b/src/lib/hero.svelte
@@ -6,12 +6,12 @@
 </script>
 
 <div
-  class={`flex flex-col md:flex-row ${mirrored && "md:flex-row-reverse"} m-8`}
+  class={`flex flex-col md:flex-row ${mirrored && "md:flex-row-reverse"} m-8 items-center`}
 >
-  <img src={image} alt={`Grafik vom Charakter ${name}`} class="p-4" />
+  <img src={image} alt={`Grafik vom Charakter ${name}`} class="w-48 rounded-full" />
 
-  <div>
-    <h3 class="text-4xl pb-4 font-vinque">{name}</h3>
+  <div class="p-4 text-center md:text-left {!mirrored && "md:text-right"}">
+    <h3 class="text-4xl mb-4 font-vinque">{name}</h3>
 
     <p>
       {description}
diff --git a/src/lib/layout/NavLink.svelte b/src/lib/layout/NavLink.svelte
deleted file mode 100644
index 5dc5bd7..0000000
--- a/src/lib/layout/NavLink.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-  export let href: string;
-  export let text: string;
-</script>
-
-<li class="block">
-  <a
-    class="text-amber-500 hover:text-dark-burgundy-100 focus:text-dark-burgundy-100 text-xl focus:outline-none transition"
-    {href}
-  >
-    {text}
-  </a>
-</li>
diff --git a/src/lib/section-heading.svelte b/src/lib/section-heading.svelte
new file mode 100644
index 0000000..11dec0e
--- /dev/null
+++ b/src/lib/section-heading.svelte
@@ -0,0 +1 @@
+<h2 class="text-4xl font-vinque mb-4 text-center"><slot /></h2>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a60783c..2e22286 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,34 +1,28 @@
 <script>
   import "../app.css";
-  import NavLink from "$lib/layout/NavLink.svelte";
 </script>
 
 <header class="flex justify-center">
-  <img
+  <a href="/">
+    <img
     height="300"
     width="300"
     alt="Logo, Illustration von einem Pfeil über einem Herz"
     src="logo.png"
-  />
+    />
+  </a>
 </header>
 
-<nav class="flex items-center justify-center">
-  <ul
-    class="p-4 w-2/3 sm:w-1/3 rounded-t-2xl bg-cocoa-brown-200 divide-y divide-cocoa-brown-700 text-center"
-  >
-    <NavLink href="/#intro" text="Einführung" />
-    <NavLink href="/#heroes" text="Unsere Helden" />
-    <NavLink href="/#listen" text="Hörprobe" />
-    <NavLink href="/credits" text="Besetzung" />
-  </ul>
-</nav>
+<div class="flex items-center justify-center">
+  <div class="w-5/6 md:w-2/3 2xl:w-1/2 bg-yellow-300 rounded-2xl">
+    <p class="font-vinque text-yellow-00 text-6xl text-center mt-12">Ein <span class="text-[4rem] relative bottom-2">P</span>feil am rechten <span class="text-red-500"><span class="text-[4rem] relative bottom-2">F</span>leck</span></p>
 
-<main class="sm:mx-16 xl:mx-72 p-4 rounded-t-2xl bg-cocoa-brown-200 font-sans">
-  <slot />
-</main>
+    <main class="p-4 font-sans">
+      <slot />
+    </main>
 
-<footer
-  class="sm:mx-16 xl:mx-72 p-4 rounded-b-2xl bg-cocoa-brown-400 text-center"
->
-  <a href="imprint" class="text-cocoa-brown-800">Impressum & Datenschutz</a>
-</footer>
+    <footer class=" p-4 bg-yellow-700 rounded-b-2xl text-center">
+      <a href="imprint" class="text-cocoa-brown-800">Impressum & Datenschutz</a>
+    </footer>
+  </div>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d63c4dc..4de16ea 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,26 +1,60 @@
 <script lang="ts">
-  import Hero from "$lib/about/hero.svelte";
+  import Hero from "$lib/hero.svelte";
+  import Actor from "$lib/actor.svelte";
+  import SectionHeading from "$lib/section-heading.svelte"
 </script>
 
-<p id="intro" />
+<p />
 
-<p id="heroes">
+<SectionHeading>Unsere Helden</SectionHeading>
+
+<p>
   <Hero
     name="Beyron Ladisla"
     description="Seit 22 Jahren Unteroffizier der Königsgarde und keine Ambitionen aufzusteigen. Beyron fühlt sich eher zum Alkohol hingezogen als zu seinem Beruf."
-    image=""
+    image="/beyron.png"
   />
   <Hero
     name="Tam"
     description="Nur wenigen ist Tamriel, genannt Tam, überhaupt bekannt. Fängt sie jedoch an zu sprechen offenbart sich ein kluger Kopf. Als beste Freundin und stete Begleiterin von Beyron ist sie oftmals das gute Gewissen dieser Zweierbeziehung."
-    image=""
+    image="/tam.png"
     mirrored
   />
   <Hero
     name="Blue"
     description="Ein langweiliges Leben führen wie ihre reichen Eltern? Nichts für Blue. Die weite Welt ist ein viel besserer Ort um erwachsen zu werden als ein staubiger Klassenraum."
-    image=""
+    image="/blue.png"
   />
 </p>
 
-<p id="listen" />
+
+<p>
+  <SectionHeading>Hörprobe</SectionHeading>
+</p>
+
+
+<SectionHeading>Besetzung</SectionHeading>
+
+<div class="flex items-center justify-evenly flex-col md:flex-row">
+  <div class="text-center text-xl"><div class="font-vinque">Beyron Ladisla</div><div>Nico Gerloff</div></div>
+  <div class="text-center text-xl"><div class="font-vinque">Blue</div><div>Lina Schmidt</div></div>
+  <div class="text-center text-xl"><div class="font-vinque">Tam</div><div>Vanessa Martens</div></div>
+</div>
+
+<div class="flex items-center justify-center">
+
+  <table class="mt-8 text-center table-fixed xl:w-2/3 divide-cocoa-brown-400">
+    <Actor role="Erzähler" actor="xxx" />
+    <Actor role="Madam Jolie" actor="Josephine Steckenmesser" />
+    <Actor role="Bantam" actor="Timon Fuchs" />
+    <Actor role="Soldat Gundolf Stock" actor="Marian Falk" />
+    <Actor role="Offizier Delgado" actor="Julian Tölle" />
+    <Actor role="Die Rechte Hand des Königs" actor="Julian Tölle" />
+    <Actor role="Der König" actor="Timon Fuchs" />
+    <Actor role="Vorsitzender der Handelsgilde" actor="Nico Gerloff" />
+    <Actor role="Bruder Jotus" actor="Marius Freese" />
+    <Actor role="Schreiberling" actor="Marius Freese" />
+  </table>
+</div>
+
+<SectionHeading>Besetzung</SectionHeading>
\ No newline at end of file
diff --git a/src/routes/credits/+page.svelte b/src/routes/credits/+page.svelte
deleted file mode 100644
index fd7282b..0000000
--- a/src/routes/credits/+page.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-  import Actor from "$lib/credits/actor.svelte";
-</script>
-
-<h2 style="text-lg">Besetzung</h2>
-
-<Actor role="Beyron Ladisla" actor="Nico Gerloff" />
-<Actor role="Blue" actor="Lina Schmidt" />
-<Actor role="Tam" actor="Vanessa Martens" />
-<Actor role="Erzähler" actor="xxx" />
-<Actor role="Madam Jolie" actor="Josephine Steckenmesser" />
-<Actor role="Bantam" actor="Timon Fuchs" />
-<Actor role="Soldat Gundolf Stock" actor="Marian Falk" />
-<Actor role="Offizier Delgado" actor="Julian Tölle" />
-<Actor role="Die Rechte Hand des Königs" actor="Julian Tölle" />
-<Actor role="Der König" actor="Timon Fuchs" />
-<Actor role="Vorsitzender der Handelsgilde" actor="Nico Gerloff" />
-<Actor role="Bruder Jotus" actor="Marius Freese" />
-<Actor role="Schreiberling" actor="Marius Freese" />
diff --git a/src/routes/download/+page.svelte b/src/routes/download/+page.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/static/beyron.png b/static/beyron.png
new file mode 100644
index 0000000..21fe83d
--- /dev/null
+++ b/static/beyron.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:47e656a5651c6a7c966c4a312bf44160896175959441e5b0edec654ea769426f
+size 1329544
diff --git a/static/blue.png b/static/blue.png
new file mode 100644
index 0000000..28775df
--- /dev/null
+++ b/static/blue.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:44a3a96db70fa34543cebf4a2a29df06003750c96dd46ef42bf5d8b482a0276e
+size 1426922
diff --git a/static/tam.png b/static/tam.png
new file mode 100644
index 0000000..0b9b04b
--- /dev/null
+++ b/static/tam.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2f9b070f0b0f07d7bd72fbab23bbf764987adc8033cc0d002e674a52fb21b8bd
+size 844117
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 65f9143..260ecd9 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -10,32 +10,6 @@ module.exports = {
       gray: colors.slate,
       amber: colors.amber,
       blue: colors.fuchsia,
-      "dark-burgundy": {
-        DEFAULT: "#6D071A",
-        50: "#F1244A",
-        100: "#F0133C",
-        200: "#D20D32",
-        300: "#B00B2A",
-        400: "#8F0922",
-        500: "#6D071A",
-        600: "#5A0615",
-        700: "#470511",
-        800: "#33030C",
-        900: "#200208",
-      },
-      "forest-green": {
-        DEFAULT: "#1C731C",
-        50: "#259825",
-        100: "#249424",
-        200: "#228B22",
-        300: "#208320",
-        400: "#1E7B1E",
-        500: "#1C731C",
-        600: "#175E17",
-        700: "#124A12",
-        800: "#0D350D",
-        900: "#082108",
-      },
       "cocoa-brown": {
         DEFAULT: "#261C1C",
         50: "#857362",
@@ -49,6 +23,32 @@ module.exports = {
         800: "#140F0F",
         900: "#030202",
       },
+      'red': {
+        DEFAULT: '#BC2B1F',
+        50: '#F0A9A3',
+        100: '#ED9891',
+        200: '#E7786E',
+        300: '#E1574B',
+        400: '#DC3628',
+        500: '#BC2B1F',
+        600: '#8C2017',
+        700: '#5C150F',
+        800: '#2C0A07',
+        900: '#000000'
+      },
+      'yellow': {
+        DEFAULT: '#DDB679',
+        50: '#FAF4EB',
+        100: '#F6EBDB',
+        200: '#EED9BA',
+        300: '#E5C89A',
+        400: '#DDB679',
+        500: '#D29E4C',
+        600: '#B7822F',
+        700: '#8B6223',
+        800: '#5E4318',
+        900: '#31230C'
+      },
     },
     extend: {
       fontFamily: { vinque: "Vinque, serif" },