diff --git a/public/app.css b/public/app.css
index 8513d2c..9e32668 100644
--- a/public/app.css
+++ b/public/app.css
@@ -9,13 +9,18 @@ h3 {
   font-family: 'Roboto', sans-serif;
 }
 
+article>h1 {
+  font-size: 28px;
+  margin-top: 24px;
+}
+
 article>h2 {
-  font-size: 24px;
+  font-size: 22px;
   margin-top: 20px;
 }
 
 article>h3 {
-  font-size: 20px;
+  font-size: 18px;
   margin-top: 16px;
 }
 
diff --git a/src/components/ImageSlider.svelte b/src/components/ImageSlider.svelte
index be23a95..bd82029 100644
--- a/src/components/ImageSlider.svelte
+++ b/src/components/ImageSlider.svelte
@@ -55,7 +55,7 @@
 </script>
 
 <div
-  class="wrapper grid overflow-hidden rounded-xl border border-light"
+  class="wrapper grid overflow-hidden rounded-xl border border-neutral"
   class:title
   class:not-loaded={!loaded}
   class:loaded
diff --git a/src/components/Max.astro b/src/components/Max.astro
index f6d8c35..6ae9f9b 100644
--- a/src/components/Max.astro
+++ b/src/components/Max.astro
@@ -10,7 +10,7 @@ const t = useTranslations(Astro.url);
 ---
 
 <Card
-  classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
+  classes="googley-eye-target relative rounded-diag-md border border-neutral bg-dark grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
 >
   <div
     class="image relative h-[130%] self-end items-end flex overflow-hidden order-last xs:order-first"
@@ -55,6 +55,21 @@ const t = useTranslations(Astro.url);
     bottom: 0;
     background: linear-gradient(-12deg, var(--background) 0%, transparent 50%);
   }
+  .image {
+    filter: brightness(1.1) contrast(0.9);
+  }
+
+  :global(.dark) .image {
+    filter: brightness(0.9);
+  }
+
+  :global(.dark) .image::before {
+    background: linear-gradient(
+      -12deg,
+      var(--background-dark) 0%,
+      transparent 50%
+    );
+  }
 
   .image > :global(img) {
     height: 100%;
diff --git a/src/components/TOC.astro b/src/components/TOC.astro
new file mode 100644
index 0000000..1655443
--- /dev/null
+++ b/src/components/TOC.astro
@@ -0,0 +1,36 @@
+---
+import { useTranslations } from "@i18n/utils";
+import type { MarkdownHeading } from "astro";
+const t = useTranslations(Astro.url);
+
+type Props = {
+  headings: MarkdownHeading[];
+};
+
+const { headings } = Astro.props;
+---
+
+<div class="toc-wrapper lg:fixed lg:left-6 lg:top-6">
+  <details
+    class="py-2 px-4 rounded-xl border border-neutral flex flex-col bg gap-2"
+  >
+    <summary class="text-lg cursor-pointer select-none"
+      >{t("toc.title")}</summary
+    >
+    <div class="flex flex-col gap-[2px] my-2">
+      {
+        headings.map((heading) => {
+          return (
+            <a
+              href={`#${heading.slug}`}
+              style={{ marginLeft: `${(heading.depth - 1) * 1}rem` }}
+              class={`block text my-0`}
+            >
+              {heading.text}
+            </a>
+          );
+        })
+      }
+    </div>
+  </details>
+</div>
diff --git a/src/content/photos/erasmus-valencia/index.mdx b/src/content/photos/erasmus-valencia/index.mdx
index 8e98228..a0707d5 100644
--- a/src/content/photos/erasmus-valencia/index.mdx
+++ b/src/content/photos/erasmus-valencia/index.mdx
@@ -2,6 +2,7 @@
 title: "Erasmus Valencia"
 date: 2022-09-02
 cover: ./images/MAX_8218 - MAX_8230.jpg
+toc: true
 ---
 
 import Image from "@components/Image.astro"
@@ -42,24 +43,24 @@ import ImageGallery from "@components/ImageGallery.svelte"
 
 2022 hatte ich das Privileg mit der Unterstützung von Erasmus 5 Monate in Valencia zu studieren, dass hier sind die Bilder, die dabei entstanden sind.
 
-## Wandern in Chullila
+# Wandern in Chullila
 
 <Image src={MAX_8126} alt="Einzelner Baum auf der Seite eines Berges, nebliges Licht"/>
 <Image src={MAX_8133} alt="Seite eines Berges mit einer einzelnen Straße, großer See in der Ferne"/>
 <Image src={MAX_8154} alt="Typ steht auf einer Straße unter einer Brücke die sehr groß ist"/>
 
-## Valencia Harbour
+# Valencia Harbour
 
 <Image src={MAX_8194} alt=""/>
 <Image src={MAX_8416_NEF_shotwell} alt=""/>
 
-## Hunde
+# Hunde
 
 <Image src={MAX_8197_NEF_shotwell} alt=""/>
 <Image src={MAX_8212_NEF_shotwell} alt=""/>
 <Image src={MAX_8404_NEF_shotwell} alt=""/>
 
-## Botanik
+# Botanik
 
 <Image src={MAX_8249} alt=""/>
 <Image src={MAX_8310_NEF_shotwell} alt=""/>
@@ -71,7 +72,7 @@ import ImageGallery from "@components/ImageGallery.svelte"
 <Image src={MAX_8396} alt="Hand made vase"/>
 <Image src={MAX_8551_NEF_shotwell} alt=""/>
 
-## Landschaften
+# Landschaften
 <Image src={MAX_8218_MAX_8230} alt=""/>
 <Image src={MAX_8276} alt=""/>
 <Image src={MAX_8426} alt=""/>
diff --git a/src/content/projects/karl/index.mdx b/src/content/projects/karl/index.mdx
index 9add401..1915ed6 100644
--- a/src/content/projects/karl/index.mdx
+++ b/src/content/projects/karl/index.mdx
@@ -3,8 +3,8 @@ title: "K.A.R.L"
 date: 2021-04-01
 cover: ./images/Indicatrices_of_Distortion.png
 license: "CC-BY-SA:4.0"
-comments: true
 featured: true
+toc: true
 links:
   [
     ["live", "https://max-richter.dev/karl"],
diff --git a/src/content/projects/plantarium/index.mdx b/src/content/projects/plantarium/index.mdx
index 07965b1..d2ebb6b 100644
--- a/src/content/projects/plantarium/index.mdx
+++ b/src/content/projects/plantarium/index.mdx
@@ -45,9 +45,9 @@ import ImageGallery from "@components/ImageGallery.svelte"
 
 Schon gar nicht schlecht, aber wie das mit Prototypen so ist gab es noch einiges zu verbessern. Also eine Kurze Historie der größten Änderungen bis heute:
 
-## Refactors
+# Refactors
 
-### Svelte Rewrite
+## Svelte Rewrite
 
 Der erste Prototyp war handgeschriebenes ungetestes Javascript. Das kann man sich etwa so vorstellen als ob man ein Auto nur aus Zahnstochern und Ducttape bauen muss.
 Man kriegt es eventuell hin, ist vielleicht sogar ganz begeistert von seiner Kreation, wenn man sich das ganze aber dann ne Woche später nochmal anschaut oder schlimmer noch Verbesserungen daran machen will wird es recht schnell schwierig. Das hieß es war Zeit für die Lieblingsbeschäftigung eines jeden Web Entwicklers; herausfinden was gerade der heiße Scheiß in der Welt der Webentwicklung ist. Sobald man sich dann für eine der tausenden möglichen Technologien entschieden hat, macht man diese zu seiner persönlichen Religion und verteidigt sie mit religiösem Fanatismus. Ganz einfach, oder?
@@ -67,7 +67,9 @@ Im Hinterkopf hatte ich eigentlich schon die Lösung für das Problem, war mir n
 
 Die Lösung sind Node-Systeme! Hmm, was ist das denn?
 
+<div class="center my-4">
 ![Node-Systeme](./images/nodes.svg)
+</div>
 
 Node-Systeme bestehen aus Nodes und Connections. Nodes haben inputs und outputs und man kann diese miteinander verbinden.
 
@@ -86,15 +88,17 @@ Das coole ist das man dieses System sehr generisch gestalten kann und zum beispi
 
 ### Svelte-Kit Rewrite
 
-## Architektur
+# Architektur
 
-## Design
+# Design
 
-## Zukunft
+# Zukunft
 
-## Abschluss
+# Abschluss
 
 Aktuell sieht die Architectur in etwa so aus:
 
+<div class="center my-4">
 ![Architecture](./images/architecture.svg)
+</div>
 
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index b5d2525..f9e4ac6 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -22,6 +22,7 @@ export const ui = {
     'nav.projects': 'Projects',
     'nav.videos': 'Videos',
     'nav.photos': 'Photos',
+    'toc.title': 'Table of Contents',
   },
   de: {
     "en": "English",
@@ -38,6 +39,7 @@ export const ui = {
     'nav.projects': 'Projekte',
     'nav.videos': 'Videos',
     'nav.photos': 'Fotos',
+    'toc.title': 'Inhaltsverzeichnis',
   },
 } as const;
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index d11fbcf..75c0e98 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -118,11 +118,11 @@ const { title, width = "compact" } = Astro.props;
       })();
     </script>
   </head>
-  <body class=`layout-${width} bg-dark text-neutral p-2`>
+  <body class="bg-dark text-neutral p-2 flex flex-col gap-4">
     <header>
       <Nav />
     </header>
-    <main id="main-content" class="flex flex-col mt-4xl gap-y-2xl">
+    <main id="main-content" class="flex flex-col gap-4">
       <slot />
     </main>
     <footer class="px-4 flex gap-8 mb-4">
@@ -135,7 +135,7 @@ const { title, width = "compact" } = Astro.props;
       </a>
     </footer>
     <style>
-      .layout-compact {
+      body {
         max-width: 600px;
         margin: 0 auto;
       }
diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro
index b97c309..e184631 100644
--- a/src/layouts/Post.astro
+++ b/src/layouts/Post.astro
@@ -1,5 +1,6 @@
 ---
 import Layout from "./Layout.astro";
+import TOC from "@components/TOC.astro";
 import { useTranslatedPath, useTranslations } from "@i18n/utils";
 import type { MarkdownLayoutProps } from "astro";
 
@@ -10,7 +11,7 @@ type Props = MarkdownLayoutProps<{
   toc?: boolean;
 }>;
 
-const { frontmatter } = Astro.props;
+const { frontmatter, headings } = Astro.props;
 const t = useTranslations(Astro.url);
 const { title, url, date: dateString, links, toc } = frontmatter;
 const collection = url?.split("/")[2];
@@ -56,11 +57,12 @@ const backlinkContent = t(`nav.${collection}`).toLowerCase();
     </div>
   </div>
   <article class={`flex flex-col gap-4 ${toc ? "show-toc" : ""}`}>
-    <div class="mb-4 flex flex-col gap-1">
+    <div class="flex flex-col gap-1">
       <h1 class="text-4xl">
         {title}
       </h1>
     </div>
+    {toc && <TOC headings={headings} />}
     <slot />
   </article>
 </Layout>