diff --git a/.gitignore b/.gitignore
index d2363495..85bb2101 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,6 +19,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+/tmp
+
 # Generated by the build process
 /sidebar.reference.json
 
diff --git a/docs/contribution/20-glossary.mdx b/docs/contribution/10-glossary.mdx
similarity index 98%
rename from docs/contribution/20-glossary.mdx
rename to docs/contribution/10-glossary.mdx
index 1cf12332..a706d0d2 100644
--- a/docs/contribution/20-glossary.mdx
+++ b/docs/contribution/10-glossary.mdx
@@ -1,5 +1,6 @@
 ---
 title: Glossary
+sidebar_position: 2
 ---
 
 ## Contributor
diff --git a/docs/contribution/20-getting-started/02-become-contributor.mdx b/docs/contribution/20-getting-started/02-become-contributor.mdx
new file mode 100644
index 00000000..8d02c43e
--- /dev/null
+++ b/docs/contribution/20-getting-started/02-become-contributor.mdx
@@ -0,0 +1,36 @@
+---
+title: Contributor werden
+---
+
+Contributor werden ist sehr einfach.
+Du brauchst lediglich eine Organisation, die du über das mStudio anlegen kannst.
+Organisationen repräsentieren Unternehmungen, über die etwas abgerechnet werden kann.
+Bei unseren Hosting-Produkten sind dies bspw. Rechnungen.
+Im Falle von Contributoren werden die Gutschriften für die gebuchten Extensions über die Organisation gutgeschrieben.
+
+:::info Separate Organisation
+Wenn du bereits konventioneller Kunde bei uns im mStudio bist,
+könnte es von Vorteil sein, eine separate Organisation für die Contribution zu erstellen,
+um die beiden Geschäftsbereiche zu trennen und Berechtigungen einfacher abzugrenzen.
+Dies ist jedoch keine Pflicht.
+:::
+
+Um Contributor zu werden, muss in deiner Organisation zunächst ein Vertragspartner hinterlegt werden
+
+![Vertragspartner hinzufügen](/img/contribution/getting-started-guide/add-contract-owner.png)
+
+![Vertragspartner konfigurieren](/img/contribution/getting-started-guide/contract-owner.png)
+
+Nun kann einfach auf den Button **"Contributor werden"** geklickt werden.
+Dadurch wird deine Organisation zu einem unverifizierten Contributor.
+Falls du deine Extension veröffentlichen willst, folge diesem Guide bis zur [Veröffentlichung der Extension](../publish)
+
+![Contributor werden](/img/contribution/getting-started-guide/become-contributor.png)
+
+:::info
+Um Extensions nicht nur für dich, sondern für die Allgemeinheit bereitstellen zu können,
+musst du als Contributor verifiziert werden.
+
+Eine genaue Übersicht darüber, welche Informationen für die Verifizierung eines Contributors benötigt werden,
+haben wir in unserer [Contributor Übersicht](../../overview/contributor) beschrieben.
+:::
diff --git a/docs/contribution/20-getting-started/03-configure-extension.mdx b/docs/contribution/20-getting-started/03-configure-extension.mdx
new file mode 100644
index 00000000..dc6045b6
--- /dev/null
+++ b/docs/contribution/20-getting-started/03-configure-extension.mdx
@@ -0,0 +1,90 @@
+---
+title: Konfiguration der Extension
+---
+
+## Extension registrieren
+
+Sobald man Contributor ist, kann eine Extension im mStudio angelegt werden.
+Dazu muss innerhalb der Organisation der **"Entwicklung" Tab** aufgerufen werden und über den **"Anlegen" Button** eine neue Extension registriert werden.
+Zu diesem Zeitpunkt muss lediglich ein **Name** eingegeben werden, der auch im **Nachhinein noch ändern** kann.
+
+Extension Namen müssen **eindeutig** sein.
+Da es sich empfiehlt, für die **Entwicklung vorerst eine eigene** und später für produktive Zwecke eine weitere Extension anzulegen,
+ist es sinnvoll, dies im Namen zu vermerken, indem bspw. "(DEV)" an den Namen angehangen wird.
+
+:::info Lebenszyklus von Extensions
+Extensions sind erst im Marktplatz **sichtbar**, wenn sie **veröffentlicht** wurden.
+Deswegen können problemlos für eigene Entwicklungsprozesse Entwicklungs- bzw. Staging-Extensions angelegt werden.
+Weitere Informationen zum Lebenszyklus von Extensions sind im [Extension Konzept](../../overview/extensions#lifecycle-of-an-extension) erklärt.
+:::
+
+![Extension registrieren](/img/contribution/getting-started-guide/register-extension.png)
+
+## Setzen des Extension Context
+
+Für jede Extension muss festgelegt werden, in **welchem Kontext** sie **installierbar** sein soll.
+Zur Auswahl stehen **Organisation** und **Projekt**.
+Die Reference Extension ist als Projekt-Extension gebaut.
+
+Im **Tab "Berechtigungen"** muss also in der Sektion **Extension Context** auf **Bearbeiten** geklickt werden.
+Nun wird **Projekt** gewählt und gespeichert.
+
+:::info Wahl des Extension Context
+Die Reference Extension ist als Projekt-Extension gebaut.
+Es ergibt jedoch nicht für jede Extension-Idee sinn, sie als Projekt-Extension zu implementieren.
+
+Welche Auswirkungen die Wahl hat und welche Faktoren für die Wahl entscheidend sind, haben wir im ["Wie wähle ich den richtigen Extension Context?"-Guide](../../how-to/choose-a-context) beschrieben.
+:::
+
+![Extension Context](/img/contribution/getting-started-guide/extension-context.png)
+
+## Berechtigungen konfigurieren
+
+Die Reference Extension ruft Informationen über den User und das Projekt, in dem sie installiert ist, ab.
+Außerdem bietet sie die Möglichkeit, den Namen des Projekts anzupassen.
+Um dazu in der Lage zu sein, müssen für die Extension Berechtigungen in Form von Scopes konfiguriert werden.
+Das muss immer gemacht werden, wenn Extensions auf die mStudio API zugreifen wollen.
+
+Genauso wie der Extension Context werden auch die Berechtigungen im **Tab "Berechtigungen"** konfiguriert.
+Dazu muss in der entsprechende Sektion auf "Bearbeiten" geklickt werden.
+Wir stellen nun **Projekt lesen** und **schreiben** sowie **Benutzer lesen** ein.
+
+:::info Verfügbare Scopes
+Im [Guide zu Scopes](../../overview/concepts/scopes) haben wir ausführlicher beschrieben, welche Scopes verfügbar sind und wie der richtige Scope identifiziert werden kann.
+Wenn du Schwierigkeiten damit hast, den richtigen Scope zu finden oder dein Scope fehlt, komm gerne auf uns zu.
+Wir unterstützen dich gerne dabei.
+:::
+
+![Berechtigungen einstellen](/img/contribution/getting-started-guide/scopes.png)
+
+## Konfigurieren der Frontend-URL
+
+Die Reference Extension verwendet ein **Frontend Fragment**.
+Das bedeutet, sie implementiert ein Frontend, dass nahtlos in das mStudio integriert werden soll.
+
+:::info Frontend Fragment vs. External Frontend
+Frontend Fragmente sind nicht die einzige Möglichkeit, ein Frontend für eine Extension anzubieten.
+Wenn die Anforderungen an Frontend Fragmenten für dich zu restriktiv sind oder nicht zu deinem Anwendungsfall geeignet sind,
+gibt es auch die Möglichkeit, ein externes Frontend zu implementieren.
+
+Die Eigenschaften und Unterschiede zwischen Frontend Fragmenten und externen Frontends sind im [Konzept zur Frontend Entwicklung](../../overview/concepts/frontend-development) erklärt
+:::
+
+Um die URL für das Frontend Fragment der Reference Extension einzustellen, muss im **Tab "Frontend"** der Extension in der Sektion zu **Frontend Fragments** auf **Hinzufügen** geclickt werden.
+
+![Frontend Fragment hinzufügen](/img/contribution/getting-started-guide/frontend-fragments.png)
+
+Für ein Frontend Fragment muss ein **Ankerpunkt** gewählt werden.
+Dieser bestimmt, an welcher Stelle das Frontend deiner Extension eingebunden werden soll.
+Die Reference Extension ist gebaut, um an dem Ankerpunkt `/projects/project/menu/section/extensions/item` eingehangen zu werden,
+also als Menüpunkt innerhalb eines Projekts.
+
+Für den Ankerpunkt muss außerdem ein **Anzeigename** definiert werden.
+Dieser bestimmt bspw. bei Ankerpunkten, die als Menüpunkte fungieren, wie der Menüpunkt heißt.
+Für Sektionen bestimmt der Anzeigename die Überschrift der Sektion.
+
+Schließlich muss eine **URL** angegeben werden.
+Für die in Entwicklung befindliche Extension kann hier auch eine auf dem **lokalen Client erreichbare Adresse** eingegeben werden.
+Da die Reference Extension Standardmäßig auf Port 3000 läuft, fügen wir hier `http://localhost:3000` ein.
+
+![Konfiguration des Frontend Fragments](/img/contribution/getting-started-guide/frontend-fragment-configuration.png)
diff --git a/docs/contribution/20-getting-started/04-reference-extension.mdx b/docs/contribution/20-getting-started/04-reference-extension.mdx
new file mode 100644
index 00000000..3ebb7d4b
--- /dev/null
+++ b/docs/contribution/20-getting-started/04-reference-extension.mdx
@@ -0,0 +1,198 @@
+---
+title: Reference Extension
+---
+
+## Die Reference Extension
+
+Die [Reference Extension](https://github.com/mittwald/reference-extension) ist eine umfassende Beispiel-Extension,
+die alle wichtigen Features für die Entwicklung von Extensions, die sich direkt in das mStudio integrieren, demonstriert.
+Sie dient als praktische Vorlage und Lernressource für Entwickler.
+
+### Idee und Motivation
+
+Die Reference Extension wurde entwickelt, um:
+
+- **Best Practices** für Extension-Entwicklung zu zeigen
+- Alle wichtigen **Marketplace-Konzepte** praktisch zu demonstrieren
+- Die Integration mit der mittwald API und dem mStudio zu illustrieren
+- Als **Ausgangspunkt** für eigene Extension-Projekte zu dienen
+
+Die Extension ist vollständig dokumentiert und kann als Template verwendet werden, um eigene Extensions zu entwickeln.
+Der Code ist so strukturiert, dass er leicht verstanden, angepasst und erweitert werden kann.
+
+### Technologischer Stack
+
+Die Reference Extension verwendet moderne Web-Technologien, die auch für die Entwicklung eigener Extensions empfohlen werden:
+
+**Frontend:**
+
+- **[React 19](https://react.dev/)** - Für die Entwicklung der Benutzeroberfläche
+- **[TanStack Router & Query](https://tanstack.com/)** - Routing und State Management
+- **[@mittwald/flow-remote-react-components](https://mittwald.github.io/flow/)** - UI-Framework, das mit Frontend Fragmenten kompatibel ist
+- **[React Ghostmaker](https://github.com/mittwald/react-ghostmaker)** - Server Function Abstraktion
+
+**Backend:**
+
+- **[TanStack Start](https://tanstack.com/start/latest)** - Full-stack React Framework
+- **[Drizzle ORM](https://orm.drizzle.team/)** - Typsichere Datenbankoperationen mit PostgreSQL
+- **[@mittwald/api-client](https://www.npmjs.com/package/@mittwald/api-client)** - Client für die mittwald API
+- **[@weissaufschwarz/mitthooks](https://www.npmjs.com/package/@weissaufschwarz/mitthooks)** - Webhook-Verarbeitung
+
+**Development Tools:**
+
+- **[Vite](https://vite.dev/)** - Schnelles Build-Tool
+- **[Biome](https://orm.drizzle.team/)** - Linting & Formatting
+- **[Vitest](https://vitest.dev/)** - Unit Testing Framework
+
+### Implementierte Konzepte des mStudio Marktplatzes
+
+Die Reference Extension demonstriert alle wichtigen Konzepte, die für die Entwicklung von Extensions, die direkt im mStudio eingebunden werden sollen, relevant sind:
+
+**1. Lifecycle Webhooks**
+
+- Verarbeitung von Lifecycle Events (create, update, remove), um einen State über bestehende Extension Instances aufbauen zu können
+- Speicherung der Instance-Daten in eigener Datenbank
+- Validierung der Webhook Signatur, um Missbrauch zu verhindern
+
+Weitere Informationen zum Zweck und der Funktionsweise von Lifecycle Webhooks können im [Konzeptdokument zu Lifecycle Webhooks](../../overview/concepts/lifecycle-webhooks) nachgelesen werden.
+
+**2. Frontend Fragments**
+
+- Rendering von UI-Komponenten im mStudio via Remote DOM
+- Integration als Menüeintrag im Projekt-Kontext
+- Verwendung des Anchor Points: `/projects/project/menu/section/extensions/item`
+
+Im ["Wie man ein Frontend-Fragment entwickelt"](../../how-to/develop-frontend-fragment)-Guide findest du detailiertere Informationen zur Funktionsweise von Frontend Fragmenten und dem Remote-DOM.
+
+:::info Wichtiger Hinweis zu Frontend Fragments
+Um Frontend direkt in das mStudio integrieren zu können, muss ein Remote DOM bereit gestellt werden.
+Das Bootstrapping der Reference Extension übernimmt das für dich.
+Das Remote DOM im mStudio erfordert die Verwendung von **Flow Design System Komponenten**.
+Standard HTML-Elemente wie `<div>` oder `<button>` funktionieren **nicht** im Remote DOM.
+Verwende stattdessen Flow-Komponenten wie `<Section>`, `<Button>` aus `@mittwald/flow-remote-react-components`.
+:::
+
+**3. mStudio API Integration**
+
+- Session Token Handling für sichere Kommunikation
+- Verwendung von Access Tokens für API-Authentifizierung
+- Abrufen und Modifizieren von Projekt-Daten
+
+Die Reference Extension implementiert für dich eine Middleware,
+die dir sowohl ein Access Token als auch einen bereits authentifizierten API-Client für die mStudio API bereitstellt.
+Dieser API-Client kann verwendet werden, um Ressourcen aus dem mStudio abzurufen oder zu modifizieren.
+
+Außerdem sind ein paar Server Functions implementiert, die den Einsatz der Middleware sowie die Nutzung des API-Clients demonstrieren.
+
+[//]: # "TODO Referenz auf Session Token authentifizierungskonzept, sobald die Seite überarbeitet wurde"
+
+**4. Custom Data Persistence**
+
+- Eigene PostgreSQL-Datenbank für Extension-spezifische Daten
+- Drizzle ORM für typsichere Datenbankoperationen
+- Schema-Migrations mit Drizzle Kit
+
+:::info Repository Dokumentation
+Für eine detaillierte Übersicht der Repository-Struktur und Architektur-Patterns,
+siehe die [umfangreiche Dokumentation im Reference Extension Repository](https://github.com/mittwald/reference-extension).
+:::
+
+## Die Reference Extension lokal hochfahren
+
+Um die Reference Extension lokal zu entwickeln und zu testen, müssen zunächst einige Voraussetzungen erfüllt und Schritte durchgeführt werden.
+
+**Voraussetzungen:**
+
+- **Node.js 22** (erforderlich)
+- **pnpm 9.14.4+** (Package Manager)
+- **Docker & Docker Compose** (für PostgreSQL)
+
+### Clonen der Reference Extension und Installieren der Dependencies
+
+Klone zunächst die Reference Extension und installiere die Dependencies:
+
+```bash
+# Repository klonen
+git clone https://github.com/mittwald/reference-extension.git
+cd reference-extension
+
+# Dependencies installieren
+pnpm install
+```
+
+### Umgebungsvariablen konfigurieren
+
+Die Reference Extension benötigt verschiedene Umgebungsvariablen für die Konfiguration. Erstelle eine `.env` Datei im Projekt-Root:
+
+```bash
+cp .env.example .env
+```
+
+Auch wenn noch nicht alle der erforderlichen Umgebungsvariablen gesetzt werden können, können die folgenden bereits gesetzt werden:
+
+```env
+EXTENSION_ID=
+EXTENSION_SECRET=
+ENCRYPTION_MASTER_PASSWORD=
+ENCRYPTION_SALT=
+```
+
+#### EXTENSION_ID
+
+Die Extension ID ist eine bei der Registrierung der Extension generierte UUID und kann im mStudio im **Tab "Details"** eingesehen werden.
+
+![Extension ID](/img/contribution/getting-started-guide/extension-id.png)
+
+#### EXTENSION_SECRET
+
+[//]: # "TODO Extension Secret über das Frontend"
+
+#### ENCRYPTION_MASTER_PASSWORD und ENCRYPTION_SALT
+
+Die Reference Extension verwendet Lifecycle Webhooks, um in der eigenen Datenbank einen State über die laufenden Extension-Instanzen aufzubauen.
+Dabei wird ein Extension Instance Secret ausgetauscht, das verschlüsselt und sicher gespeichert werden muss.
+Die Reference Extension übernimmt die eigentliche Verschlüsselung.
+Dafür wird ein **Master Password** und ein **Salt** benötigt, aus denen ein symmetrischer Schlüssel abgeleitet wird.
+
+Master Password & Salt gelten **pro Extension** und müssen nicht für jede Extension Instance unterschiedlich sein.
+Der **Initialization Vektor** bzw. die Nonce wird automatisch für jede Verschlüsselung neu erzeugt, um gleiche Klartexte sicher zu differenzieren.
+
+Um dieses **Secret-Paar** zu **generieren**, rufe in der Reference Extension folgendes Package Script auf:
+
+```bash
+pnpm init:encryption
+```
+
+Dabei werden die generierten Secrets in die eben erstellte .env Datei geschrieben.
+
+:::info Verschlüsselung von eigenen schützenswerten Feldern
+Die Verschlüsselung der Tabellenspalte ist ausreichend modular gebaut, um sie auch für **eigene schützenswerte Felder** verwenden zu können.
+Mehr dazu in
+
+[//]: # "TODO Referenz auf Kapitel, in dem beschrieben wird, wie eigene Felder verschlüsselt werden können"
+
+:::
+
+### Starten der Entwicklungsumgebung
+
+Die Reference Extension ist auf eine Datenbank angewiesen für die Persistierung ihrer Daten.
+Sie verwendet dazu **[PostgreSQL](https://www.postgresql.org/)**.
+
+Um das Starten der Extension zu vereinfachen, liefert die Reference Extension eine `docker-compose.yml` sowie eine `docker-compose.dev.yml`.
+Beide können dazu werden, die Extension vollständig mit ihren Abhängigkeiten zu starten.
+Die `docker-compose.dev.yml` startet die Extension jedoch in einem Development Modus mit Hot Reloading.
+
+Um die Extension zu starten, führe den folgenden Befehl aus:
+
+```bash
+pnpm run docker:dev
+```
+
+Das **Datenbank Schema** wird durch die Extension automatisch über **Migrations** angewandt.
+Die Extension läuft nun auf **Port 3000** und ist unter `http://localhost:3000` erreichbar.
+
+:::warning Public URL erforderlich
+Damit die Extension im mStudio funktioniert, muss die lokal laufende Extension eine tatsächliche Extension Instance speichern.
+Dafür muss sie über eine **öffentlich erreichbare URL** verfügbar sein.
+Im nächsten Schritt erfährst du, wie du mit einem Tunneling-Service wie **zrok** eine öffentliche URL bereitstellst.
+:::
diff --git a/docs/contribution/20-getting-started/05-expose-extension.mdx b/docs/contribution/20-getting-started/05-expose-extension.mdx
new file mode 100644
index 00000000..80339879
--- /dev/null
+++ b/docs/contribution/20-getting-started/05-expose-extension.mdx
@@ -0,0 +1,90 @@
+---
+title: Extension erreichbar machen
+---
+
+## Warum die lokal laufende Extension erreichbar sein muss
+
+Die Reference Extension hängt die eigenen Daten (in diesem Fall Kommentare) an die Extension Instance, um sie einfach und sicher löschen zu können.
+Dafür muss die Extension Instance über bestehende Extension Instances Bescheid wissen.
+Extensions können über **Lifecycle Webhooks** über hinzugefügte, bearbeitete oder entfernte Extension Instances informiert werden.
+Diese werden aus dem mStudio Backend heraus aufgerufen, also muss die API der **Extension öffentlich erreichbar** sein.
+
+Grundsätzlich kann **jede Tunneling Technik** verwendet werden, um die API öffentlich erreichbar zu machen.
+Wenn bspw. [ngrok](https://ngrok.com/) oder [Cloudflare tunnel](https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-tunnel/) bereits bekannt und im Einsatz ist,
+können die folgenden Schritte übersprungen werden und stattdessen mit diesen ein Tunnel hergestellt werden.
+
+Wir empfehlen [zrok](https://zrok.io/) als Open Source und kostenlose Variante.
+
+## zrok einrichten
+
+zrok ist eine **Open Source** Alternative zu ngrok, die sowohl **self-hosted** als auch als **SaaS** Lösung verwendet werden kann.
+Der Einfachheit halber nutzen wir **in diesem Guide die SaaS Lösung**, da diese kostenlos ist.
+Unser Ziel ist es, eine **stabile URL** herzustellen, die sich bei einem erneuten Öffnen des Tunnels nicht ändert.
+
+:::info Getting Started Guide für zrok
+Grundsätzlich folgen wir [dem offiziellen Guide](https://docs.zrok.io/docs/getting-started/).
+:::
+
+### zrok Account erstellen
+
+Um die SaaS Lösung von zrok zu nutzen, musst du dich bei [myzrok.io](https://myzrok.io/) registrieren.
+
+### Device in die Umgebung einbinden
+
+Direkt nach der Registrierung wird dir ein Befehl zum **Einbinden deines Clients** in die Umgebung angezeigt.
+Führe diesen bei dir auf deinem Client aus.
+
+```bash
+zrok enable <your-token>
+```
+
+![zrok enable device](/img/contribution/getting-started-guide/zrok-enable.png)
+
+### Reserved Share erstellen
+
+Um eine **stabile URL** zu erhalten, muss eine URL reserviert werden.
+Dies geschieht durch folgenden Befehl:
+
+```bash
+zrok reserve public 3000
+```
+
+Dies erstelle eine stabile URL wie `https://<token>.share.zrok.io`, die auf `http://localhost:3000` zeigt.
+
+:::warning Token notieren!
+Der Token aus der URL ist wichtig für die folgenden Schritte, bitte notiere ihn dir.
+:::
+
+Unter Umständen kann es nötig sein, root Rechte für diese Operation zu verwenden.
+Vor allem unter MacOS haben wir beobachten können, dass dies nötig ist,
+um das zu erstellende Zertifikat in den Trusted Root Certificate Store einzutragen.
+Wenn du auf Probleme diesbezüglicht stößt, ergänze den Befehl mit `sudo`:
+
+```bash
+sudo zrok reserve public 3000
+```
+
+### Token in `.env` eintragen
+
+Die Reference Extension stellt ein Package Script bereit, mit dem der Tunnel einfach gestartet werden kann.
+Damit dieses funktioniert, muss der Token in die `.env` eingetragen werden.
+
+```
+ZROK_RESERVED_TOKEN=<token>
+```
+
+### Tunnel starten
+
+```bash
+pnpm run dev:expose
+```
+
+Deine Extension ist nun unter `https://<token>.share.zrok.io` öffentlich erreichbar!
+
+### Webhook URL konfigurieren
+
+Im **Tab "Webhooks"** deiner Extension kann nun die URL eingetragen werden.
+Die Reference Extension verwendet einheitlich für alle Webhooks den Pfad `/api/webhooks/mittwald`.
+Die URL ist also `https://<token>.share.zrok.io/api/webhooks/mittwald`.
+
+![Webhook URL konfigurieren](/img/contribution/getting-started-guide/webhook-url.png)
diff --git a/docs/contribution/20-getting-started/06-test-in-mstudio.mdx b/docs/contribution/20-getting-started/06-test-in-mstudio.mdx
new file mode 100644
index 00000000..6698f962
--- /dev/null
+++ b/docs/contribution/20-getting-started/06-test-in-mstudio.mdx
@@ -0,0 +1,34 @@
+---
+title: Testing im mStudio
+---
+
+## Extension Instance erstellen
+
+Um die Extension nun lokal testen zu können, muss sie über eine Extension Instance in das mStudio eingebunden werden.
+
+Für die Reference Extension müssen folgende Voraussetzungen (aus den vorherigen Schritten) erfüllt sein:
+
+- Ein Projekt wurde erstellt
+- Die Datenbank wurde gestartet
+- Die Extension wird lokal ausgeführt
+- Context, Berechtigungen, Frontend Fragment URL und Webhook URL wurden konfiguriert
+- Der Tunnel wurde gestartet
+
+Nun kann im Leitfaden zur Extensionverwaltung im **Tab "Übersicht"** die Extension in deiner eigenen Organisation
+bzw. einem Projekt in deiner Organisation installiert werden.
+
+:::info Server oder Projekttarif
+Falls du die Extension auch im mStudio betreiben willst, wie im [Deployment Schritt dieses Guides](../deploy) beschrieben,
+solltest du keinen Projekttarif abschließen, sondern einen Server buchen und darin das Projekt erstellen, um Kosten zu sparen.
+:::
+
+![Extension zum Context hinzufügen](/img/contribution/getting-started-guide/add-extension-to-context.png)
+
+## Aufrufen der Extension
+
+Im Projekt, zu der die Extension hinzugefügt wurde, gibt es nun einen neuen Menüpunkt.
+Wenn dieser aufgerufen wird, sollte die Extension angezeigt werden 🎉
+
+Teste die Extension ruhig und mach dich mit den Funktionen vertraut.
+
+![Die Extension Instance aufrufen](/img/contribution/getting-started-guide/show-extension-instance.png)
diff --git a/docs/contribution/20-getting-started/07-deploy.mdx b/docs/contribution/20-getting-started/07-deploy.mdx
new file mode 100644
index 00000000..6e2600d5
--- /dev/null
+++ b/docs/contribution/20-getting-started/07-deploy.mdx
@@ -0,0 +1,329 @@
+---
+title: Deployment der Extension
+---
+
+Grundsätzlich gibt es **keine Vorschriften**, über welche Hosting Strategie und bei welchem Hoster eine Extension bereitgestellt wird,
+da Extensions ausschließlich über Web-Technologien integriert werden.
+
+Im Folgenden wird ein **empfohlener Weg** präsentiert, wie die Extension einfach deployt werden kann.
+
+## Übersicht des Deployment-Wegs
+
+Der hier beschriebene Deployment-Weg nutzt folgende Bestandteile:
+
+| Bestandteil                          | Beschreibung                                                            |
+| ------------------------------------ | ----------------------------------------------------------------------- |
+| **GitHub**                           | Das Repository mit dem Quellcode der Extension                          |
+| **GitHub Actions**                   | CI/CD-Pipeline, die das Container-Image baut und das Deployment auslöst |
+| **GitHub Container Registry**        | Private Registry, in der das gebaute Container-Image gespeichert wird   |
+| **mStudio Container Hosting**        | Zielumgebung, in der die Extension als Container betrieben wird         |
+| **mittwald/deploy-container-action** | GitHub Action, die das Deployment ins mStudio durchführt                |
+
+Dieser Deployment-Weg eignet sich, wenn:
+
+- Der Quellcode der Extension in einem **GitHub Repository** liegen soll
+- Eine **automatisierte CI/CD-Pipeline** gewünscht ist
+- Das Container-Image **privat** bleiben soll
+- Das Deployment ins **mStudio Container Hosting** erfolgen soll
+
+:::info Alternative Wege
+Natürlich können auch andere Container Registries (z.B. Docker Hub, GitLab Registry) oder andere CI/CD-Systeme verwendet werden.
+Die grundlegenden Schritte bleiben dabei ähnlich.
+:::
+
+## Anlegen einer zweiten Extension
+
+Damit nach Deployment und Umbau auch das lokale Entwicklungssystem weiterhin verwendet werden kann,
+empfiehlt es sich, für die **Prod Umgebung eine eigene Extension** anzulegen.
+Folge den Schritten aus der [Extension Konfiguration](./configure-extension) erneut mit einer zweiten Extension.
+Die **URLs** brauchst du zu diesem Zeitpunkt **noch nicht konfigurieren**, die werden sich für das produktive System unterscheiden.
+
+## Buchen eines Servers
+
+Für das Container-Hosting des mStudio wird ein **Server** benötigt.
+Im Projekthosting steht das Container-Hosting nicht zur Verfügung.
+
+![Einen Server buchen](/img/contribution/getting-started-guide/book-server.png)
+
+In diesem neuen Server kann nun mehrkostenfrei ein **Projekt erstellt** werden,
+in dem die Extension als Container gestartet werden kann.
+
+![Projekt im Server erstellen](/img/contribution/getting-started-guide/create-project-in-server.png)
+
+## GitHub Repository erstellen
+
+Da die Reference Extension von `github.com/mittwald/reference-extension` geclonet wurde,
+zeigt das lokale Repository noch auf das Original-Repository.
+Für das Deployment wird jedoch ein **eigenes GitHub Repository** benötigt.
+
+### Neues Repository auf GitHub anlegen
+
+1. Öffne [github.com/new](https://github.com/new)
+2. Vergib einen **Repository-Namen** (z.B. `my-extension`)
+3. Wähle die Sichtbarkeit **Private**
+4. Klicke auf **Create repository**
+
+### Lokales Repository umkonfigurieren
+
+Nach dem Erstellen des Repositories muss das lokale Repository auf den **neuen Remote** umgestellt und die **bestehende Pipeline entfernt** werden:
+
+```bash
+# Aktuelles Remote umbenennen (optional, falls du das Original behalten möchtest)
+git remote rename origin upstream
+
+# Neues Remote hinzufügen
+git remote add origin git@github.com:<dein-username>/<repository-name>.git
+
+# Die aktuelle Pipeline entfernen
+rm -rf ./.github
+
+# Die Änderungen committen
+git commit -a -m "remove pipeline"
+
+# Branch auf main umbenennen (die Reference Extension verwendet master)
+git branch -M main
+
+# Code in das neue Repository pushen
+git push -u origin main
+```
+
+:::info Upstream Aktualisierungen
+Falls du die Änderungen aus dem Original-Repository später übernehmen möchtest, kannst du das `upstream`-Remote behalten und mit `git fetch upstream` die Änderungen abrufen.
+:::
+
+## GitHub Container Registry
+
+Für das Deployment wird die **GitHub Container Registry (ghcr.io)** verwendet.
+Das Container-Image wird bei jedem Push automatisch gebaut und in der Registry veröffentlicht.
+
+Da das Container-Image **privat** bleiben soll, muss im mStudio eine entsprechende Registry-Konfiguration hinterlegt werden.
+
+### Personal Access Token erstellen
+
+Für den Zugriff auf die private GitHub Container Registry wird ein **Personal Access Token (classic)** benötigt:
+
+1. Öffne in GitHub **Settings** → **Developer settings** → **Personal access tokens** → **Tokens (classic)**
+2. Klicke auf **Generate new token (classic)**
+3. Vergib einen aussagekräftigen Namen (z.B. "mStudio Registry Access")
+4. Wähle den Scope **read:packages**
+5. Klicke auf **Generate token** und kopiere den Token
+
+:::warning
+Der Token wird nur einmal angezeigt. Speichere ihn sicher ab.
+:::
+
+### Private Registry im mStudio einrichten
+
+Damit das mStudio Container Hosting auf das private Image zugreifen kann, muss die Registry im Projekt authentifiziert werden:
+
+1. Navigiere im mStudio zu deinem **Projekt**
+2. Öffne den Bereich **Container** → **Registries**
+3. Klicke auf "GitHub"
+4. Klicke in der Sektion "Zugangsdaten" auf "Bearbeiten"
+5. Gib folgende Daten ein:
+   - **Benutzername**: Dein GitHub-Benutzername
+   - **Passwort/Access-Token**: Der zuvor erstellte Personal Access Token
+6. Klicke auf **Speichern**
+
+Weitere Details zur Einrichtung privater Registries findest du in der [Dokumentation zum Container Hosting](/docs/v2/platform/workloads/containers/#private-registries).
+
+## Stack-Definition erstellen
+
+Erstelle die Datei `deploy/stack.yaml` im Repository.
+Diese Datei definiert, welche Services im mStudio Container Hosting gestartet werden sollen:
+
+```yaml title="deploy/stack.yaml"
+services:
+  app:
+    image: "{{ .Env.IMAGE_TAG }}"
+    description: "Extension"
+    ports:
+      - "3000/tcp"
+    environment:
+      NODE_ENV: production
+      POSTGRES_HOST: db
+      POSTGRES_PORT: "5432"
+      POSTGRES_USER: "{{ .Env.POSTGRES_USER }}"
+      POSTGRES_PASSWORD: "{{ .Env.POSTGRES_PASSWORD }}"
+      POSTGRES_DB: "{{ .Env.POSTGRES_DB }}"
+      ENCRYPTION_MASTER_PASSWORD: "{{ .Env.ENCRYPTION_MASTER_PASSWORD }}"
+      ENCRYPTION_SALT: "{{ .Env.ENCRYPTION_SALT }}"
+      EXTENSION_SECRET: "{{ .Env.EXTENSION_SECRET }}"
+      EXTENSION_ID: "{{ .Env.EXTENSION_ID }}"
+
+  db:
+    image: "postgres:16-alpine"
+    description: "Database"
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_USER: "{{ .Env.POSTGRES_USER }}"
+      POSTGRES_PASSWORD: "{{ .Env.POSTGRES_PASSWORD }}"
+      POSTGRES_DB: "{{ .Env.POSTGRES_DB }}"
+
+volumes:
+  postgres-data: {}
+```
+
+:::tip
+Die Platzhalter `{{ .Env.VARIABLE }}` werden durch die Umgebungsvariablen ersetzt, die im GitHub Actions Workflow definiert sind.
+:::
+
+## GitHub Actions Workflow
+
+Erstelle die Datei `.github/workflows/deploy.yml`:
+
+```yaml title=".github/workflows/deploy.yml"
+name: Build and Deploy
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - "v*"
+  workflow_dispatch:
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    outputs:
+      image_tag: ${{ steps.image_tag.outputs.value }}
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Log in to Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Generate image tag
+        id: image_tag
+        run: echo "value=${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}" >> $GITHUB_OUTPUT
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.image_tag.outputs.value }}
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Deploy to mStudio
+        uses: mittwald/deploy-container-action@v1
+        with:
+          api_token: ${{ secrets.MITTWALD_API_TOKEN }}
+          stack_id: ${{ vars.STACK_ID }}
+          stack_file: deploy/stack.yaml
+        env:
+          IMAGE_TAG: ${{ needs.build.outputs.image_tag }}
+          POSTGRES_USER: ${{ secrets.POSTGRES_USER }}
+          POSTGRES_PASSWORD: ${{ secrets.POSTGRES_PASSWORD }}
+          POSTGRES_DB: ${{ secrets.POSTGRES_DB }}
+          ENCRYPTION_MASTER_PASSWORD: ${{ secrets.ENCRYPTION_MASTER_PASSWORD }}
+          ENCRYPTION_SALT: ${{ secrets.ENCRYPTION_SALT }}
+          EXTENSION_SECRET: ${{ secrets.EXTENSION_SECRET }}
+          EXTENSION_ID: ${{ vars.EXTENSION_ID }}
+```
+
+Dieser Workflow **baut** das Docker Image, **speichert** es in der Registry und **deployt** die Datenbank und Extension im mStudio.
+In den meisten Fällen bietet es sich an, zusätzliche Actions zur Sicherstellung der Code Qualität zu ergänzen.
+
+## Secrets und Variablen konfigurieren
+
+Im GitHub Repository müssen folgende **Umgebungsvariablen** konfiguriert werden unter **Settings** → **Secrets and variables** → **Actions**.
+Die meisten Werte können vom **lokalen Setup abgeleitet** werden, also aus der `.env` entnommen werden.
+Falls du, wie empfohlen, eine **zweite Extension** angelegt hast, wähle für die `EXTENSION_ID` und `EXTENSION_SECRET` entsprechend die Werte der **Prod Extension**.
+
+### Repository secrets
+
+| Secret                       | Beschreibung                                                                                                                         |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `MITTWALD_API_TOKEN`         | API-Token mit Schreibzugriff aus dem [mStudio](https://studio.mittwald.de/app/profile/api-tokens)                                    |
+| `POSTGRES_USER`              | Benutzername für die PostgreSQL-Datenbank                                                                                            |
+| `POSTGRES_PASSWORD`          | Passwort für die PostgreSQL-Datenbank                                                                                                |
+| `POSTGRES_DB`                | Name der PostgreSQL-Datenbank                                                                                                        |
+| `ENCRYPTION_MASTER_PASSWORD` | Master Passwort für die Ableitung des symmetrischen zur Verschlüsselung der Datenbank                                                |
+| `ENCRYPTION_SALT`            | Salt für die Ableitung des symmetrischen zur Verschlüsselung der Datenbank                                                           |
+| `EXTENSION_SECRET`           | Extension Secret zur Authentifizierung von Frontend Fragmenten; wenn du eine zweite Extension angelegt hast, wähle das Secret dieser |
+
+### Repository variables
+
+| Variable       | Beschreibung                                                                                     |
+| -------------- | ------------------------------------------------------------------------------------------------ |
+| `STACK_ID`     | Die Stack-ID aus dem mStudio Container Hosting                                                   |
+| `EXTENSION_ID` | ID der Extension im Marktplatz; wenn du eine zweite Extension angelegt hast, wähle die ID dieser |
+
+#### Stack-ID ermitteln
+
+Die **Stack-ID** findest du im mStudio:
+
+1. Navigiere zu deinem **Projekt** im Server
+2. Die Stack-ID entspricht der Projekt-ID und wird in der URL angezeigt: `https://studio.mittwald.de/app/projects/{projectId}/dashboard`
+
+## Deployment auslösen
+
+Das Deployment wird automatisch ausgelöst bei:
+
+- **Push auf `main`**: Deployt die aktuelle Version
+- **Git-Tag erstellen** (z.B. `v1.0.0`): Deployt eine Release-Version
+- **Manuell**: Über den "Run workflow"-Button in GitHub Actions
+
+Die Änderungen an der `deploy/stack.yaml` und der `.github/workflows/deploy.yml` müssen also nur noch in den main branch gepusht werden
+und die Extension sollte gebaut und deployt werden.
+
+```bash
+# Die Änderungen committen
+git commit -a -m "add pipeline"
+
+# Code in das neue Repository pushen
+git push
+```
+
+Die Extension sollte nach erfolgreichem Durchlaufen der Pipeline im mStudio laufen.
+
+![Die laufende Extension](/img/contribution/getting-started-guide/running-extension.png)
+
+## Domain auf die Extension zeigen lassen
+
+Um die Extension nun von außen erreichen zu können, muss das Ziel einer Domain auf die Extension konfiguriert werden.
+Das mStudio vergibt automatisch für jedes Projekt eine Projekt-Domain.
+
+Im "Domains"-Menü kann nun für diese Domain das Ziel auf den Extension-Container konfiguriert werden.
+
+![Eine Domain zuweisen](/img/contribution/getting-started-guide/assign-domain.png)
+
+## Extension Endpunkte konfigurieren
+
+Genau wie bei der [Extension Konfiguration](./configure-extension) müssen nun die Endpunkte für die Webhooks sowie des Frontend Fragments konfiguriert werden.
+Statt localhost bzw. zrok Adresse wird nun die Projekt-Domain verwendet.
+
+![Frontend Fragment Prod Extension](/img/contribution/getting-started-guide/prod-extension-frontend-fragment.png)
+![Webhook URL Prod Extension](/img/contribution/getting-started-guide/prod-extension-webhook-url.png)
+
+Damit ist die Extension fertig bereitgestellt.
+Wenn du testen willst, ob alles wie erwartet funktioniert, kannst du erneut eine Extension Instance erstellen und die Extension ausprobieren.
+
+Das Bereitstellen der Reference Extension wird in den wenigstens Fällen das Ziel eines Contributors sein.
+Wie du an diesem Punkt weiter machst, wenn du deine eigene Extension entwickeln willst, wird in den [nächsten Schritten](./next-steps/) beschrieben.
+
+**Das Gute ist: bei jedem `git push` in den main branch wird deine Extension automatisch aktualisiert!**
diff --git a/docs/contribution/20-getting-started/08-next-steps/01-introduction.mdx b/docs/contribution/20-getting-started/08-next-steps/01-introduction.mdx
new file mode 100644
index 00000000..6265ff21
--- /dev/null
+++ b/docs/contribution/20-getting-started/08-next-steps/01-introduction.mdx
@@ -0,0 +1,14 @@
+---
+title: Von der Reference Extension zur eigenen Extension
+---
+
+## Ausgangssituation
+
+## Die Reference Extension als Template
+
+## Typische nächste Schritte
+
+Notizen:
+
+- grundsätzlich sind alle schritte als optional zu betrachten
+  - je nach anwendungsfall die einzelnen guides lesen, die gebraucht werden
diff --git a/docs/contribution/20-getting-started/08-next-steps/02-cleanup.mdx b/docs/contribution/20-getting-started/08-next-steps/02-cleanup.mdx
new file mode 100644
index 00000000..cf911662
--- /dev/null
+++ b/docs/contribution/20-getting-started/08-next-steps/02-cleanup.mdx
@@ -0,0 +1,195 @@
+---
+title: Cleanup - Entfernen der Demo Inhalte
+---
+
+## Überblick: Was ist Demo, was ist Infrastruktur?
+
+Bevor du mit dem Aufräumen beginnst, ist es wichtig zu verstehen, welche Teile der Referenz-Extension zur Demo-Funktionalität gehören und welche die wiederverwendbare Infrastruktur bilden.
+
+### Demo-Funktionalität (kann entfernt werden)
+
+Die Referenz-Extension enthält mehrere Demo-Features, die zeigen, wie verschiedene Aspekte einer Extension implementiert werden. **All diese können komplett entfernt werden:**
+
+| Bereich          | Pfad                    | Beschreibung                                    |
+| ---------------- | ----------------------- | ----------------------------------------------- |
+| Components       | `src/components/*`      | Alle UI-Komponenten (außer `ErrorFallback.tsx`) |
+| Server Functions | `src/serverFunctions/*` | Alle Server Functions                           |
+| Domain-Logik     | `src/domain/comments/`  | Datenbankzugriffs-Logik für Kommentare          |
+| Domain-Logik     | `src/domain/project.ts` | Projekt-API-Integration                         |
+| Schema           | `src/db/schema.ts`      | Die `comments`-Tabellendefinition               |
+
+Die Demo Funktionen, die in diesen Dateien demonstriert werden, können sorglos entfernt werden.
+Wenn du nochmal nachvollziehen möchtest, wie die Referenz Extension gewisse Dinge umgesetzt hat,
+kannst du jederzeit im [Upstream Repository](https://github.com/mittwald/reference-extension) nachschauen.
+
+### Infrastruktur (sollte behalten werden)
+
+Die folgenden Komponenten bilden das Fundament deiner Extension und sollten **nicht entfernt** werden:
+
+| Bereich             | Pfad                                                    | Funktion                                          |
+| ------------------- | ------------------------------------------------------- | ------------------------------------------------- |
+| Error-UI            | `src/components/ErrorFallback.tsx`                      | Error-Boundary-Fallback für die gesamte App       |
+| Authentifizierung   | `src/middleware/auth.ts`                                | Session-Verifizierung und Access-Token-Management |
+| Fehlerbehandlung    | `src/middleware/error-handling.ts`                      | Globales Error-Handling mit Zod-Validierung       |
+| Datenbank-Setup     | `src/db/index.ts`                                       | PostgreSQL-Connection-Pool                        |
+| Migrationen         | `src/db/migrate.ts`, `src/server/plugins/migrations.ts` | Automatische Schema-Migrationen                   |
+| Router              | `src/router.tsx`, `src/routes/__root.tsx`               | TanStack Router Konfiguration                     |
+| Haupt-Route         | `src/routes/index.tsx`                                  | Einstiegspunkt (Inhalt anpassen, Datei behalten)  |
+| Webhook-Route       | `src/routes/api/webhooks.mittwald.ts`                   | Webhook-Handler für Extension-Lifecycle           |
+| Environment         | `src/env.ts`                                            | Umgebungsvariablen-Validierung                    |
+| Fehler-Definitionen | `src/global-errors.ts`                                  | Wiederverwendbare Error-Klassen                   |
+| Ghost-Setup         | `src/ghosts.ts`                                         | RPC-Layer (Inhalt anpassen, Datei behalten)       |
+| Hooks               | `src/hooks/useFormErrorHandling.tsx`                    | Wiederverwendbarer Form-Error-Hook                |
+
+Die `extension_instance`-Tabelle in `src/db/schema.ts` ist ebenfalls Infrastruktur – sie speichert die Instanz-spezifischen Daten und den verschlüsselten Access-Token.
+
+## Demo-Funktionalität entfernen
+
+### Frontend-Komponenten
+
+Lösche alle Dateien und Ordner in `src/components/` **außer** `ErrorFallback.tsx`:
+
+**Ordner komplett löschen:**
+
+- `src/components/comments/` – Kommentar-Feature (Chat-UI, Formulare, Loading-States)
+- `src/components/project/` – Projekt-Anzeige und -Bearbeitung
+
+**Einzelne Dateien löschen:**
+
+- `GreetingCard.tsx` – Willkommens-Karte
+- `APIReferenceCard.tsx` – Link zur API-Dokumentation
+- `DeveloperPortalCard.tsx` – Link zum Developer Portal
+- `FlowDocumentationCard.tsx` – Link zur Flow-Dokumentation
+- `ReadmeCard.tsx` – README-Anzeige
+- `EditProjectDescriptionModal.tsx` – Modal zur Projekt-Bearbeitung
+
+Anschließend musst du `src/routes/index.tsx` anpassen.
+Entferne alle Imports und Verwendungen der gelöschten Komponenten und ersetze den Inhalt mit deiner eigenen UI.
+
+Wenn du erstmal nur aufräumen möchtest, kannst du die vollständige Section mit dem Card Layout löschen und den Title stehen lassen.
+Du kannst auch ein eigenes Test UI einfügen, um zu sehen, ob noch alles funktioniert.
+Das könnte in etwa so aussehen:
+
+```tsx
+import { Title } from "@mittwald/mstudio-ext-react-components";
+import { LayoutCard, Text } from "@mittwald/flow-remote-react-components";
+
+function App() {
+  return (
+    <>
+      <Title>Hallo Contributor!</Title>
+      <LayoutCard>
+        <Text>Test</Text>
+      </LayoutCard>
+    </>
+  );
+}
+```
+
+### Server Functions
+
+Lösche den gesamten Inhalt von `src/serverFunctions/`:
+
+**Ordner komplett löschen:**
+
+- `src/serverFunctions/comments/` – Enthält alle Kommentar-bezogenen Server Functions:
+- `get-comments.ts` – Lädt Kommentare
+- `add-comment.ts` – Erstellt Kommentare
+- `delete-comment.ts` – Löscht Kommentare
+- `get-user-name.ts` – Holt Benutzernamen von der mittwald API
+- `get-user-avatar.ts` – Holt Avatar-URL von der mittwald API
+
+**Einzelne Dateien löschen:**
+
+- `edit-project-description.ts` – Bearbeitet die Projekt-Beschreibung
+- `get-project-of-extension-instance.ts` – Lädt Projekt-Informationen
+
+Passe dann `src/ghosts.ts` an und entferne alle Imports und Ghost-Definitionen der gelöschten Server Functions. Die Datei selbst solltest du behalten – hier registrierst du später deine eigenen Server Functions.
+
+Lösche außerdem die Domain-Logik:
+
+- `src/domain/comments/` – Gesamter Ordner mit `comments.ts`
+- `src/domain/project.ts` – Projekt-API-Integration
+
+### Datenbank-Schema
+
+In `src/db/schema.ts` musst du die `comments`-Tabelle entfernen:
+
+```typescript
+// Diese Tabellendefinition entfernen:
+export const comments = pgTable("comments", {
+  id: varchar({ length: 36 }).primaryKey(),
+  extensionInstanceId: varchar({ length: 36 })
+    .notNull()
+    .references(() => extensionInstances.id),
+  userId: varchar({ length: 36 }).notNull(),
+  text: text().notNull(),
+  createdAt: timestamp().defaultNow().notNull(),
+});
+```
+
+Erstelle anschließend eine neue Migration, um die Tabelle aus der Datenbank zu entfernen:
+
+```bash
+# Generiere eine neue Migration basierend auf dem aktualisierten Schema
+pnpm run db:generate-migrations
+```
+
+Die generierte Migration sollte in etwa so aussehen:
+
+```sql
+DROP TABLE IF EXISTS "comments";
+```
+
+## Tipps zum sauberen Aufräumen
+
+### 1. Schrittweise vorgehen
+
+Entferne die Komponenten in der umgekehrten Reihenfolge ihrer Abhängigkeiten:
+
+1. **Zuerst**: Frontend-Komponenten und deren Imports in `index.tsx`
+2. **Dann**: Server Functions und Ghost-Exporte
+3. **Dann**: Domain-Logik
+4. **Zuletzt**: Datenbank-Schema und Migration
+
+So vermeidest du TypeScript-Fehler während des Aufräumens.
+
+### 2. TypeScript als Helfer nutzen
+
+Nach dem Löschen von Dateien zeigt dir TypeScript alle Stellen, an denen noch Referenzen existieren. Führe regelmäßig `pnpm check` oder `pnpm build` aus:
+
+```bash
+pnpm check
+```
+
+Behebe alle gemeldeten Fehler, bevor du zum nächsten Schritt gehst.
+
+### 3. Git-Historie nutzen
+
+Falls du später nachschauen möchtest, wie ein bestimmtes Feature implementiert war, bleibt die Demo-Implementierung in der Git-Historie erhalten. Du kannst jederzeit in die Historie schauen:
+
+```bash
+git log --oneline --all -- src/components/
+git show <commit-hash>:src/components/comments/CommentsCard.tsx
+```
+
+Außerdem kannst du jederzeit im [Upstream Repository](https://github.com/mittwald/reference-extension) nachschauen.
+
+### 6. Vor dem Commit testen
+
+Stelle sicher, dass nach dem Cleanup alles funktioniert:
+
+```bash
+# TypeScript-Check
+pnpm check
+
+# Build testen
+pnpm build
+
+# Lokal starten und manuell prüfen
+pnpm docker:dev:build
+```
+
+Nun kannst du mit deiner DEV Extension Instance ausprobieren, ob irgendwelche Fehler geworfen werden oder ob das UI korrekt gerendert wird.
+Wenn alles funktioniert, kannst du deine Änderungen committen und pushen.
+Deine deployte Variante der Extension sollte nun auch aktualisiert werden.
diff --git a/docs/contribution/20-getting-started/08-next-steps/03-use-different-extension-context.mdx b/docs/contribution/20-getting-started/08-next-steps/03-use-different-extension-context.mdx
new file mode 100644
index 00000000..bbaa719f
--- /dev/null
+++ b/docs/contribution/20-getting-started/08-next-steps/03-use-different-extension-context.mdx
@@ -0,0 +1,36 @@
+---
+title: Einen anderen Extension Context verwenden
+---
+
+Die Reference Extension ist als **Projekt-Extension** gebaut und wird im Kontext eines Projekts installiert.
+Je nach Anwendungsfall kann es jedoch sinnvoller sein, eine **Organisations-Extension** zu entwickeln.
+
+:::warning Änderung löscht bestehende Extension Instances
+Beim Ändern des Extension Context werden alle bestehenden Extension Instances gelöscht.
+Nach der Änderung muss eine neue Extension Instance erstellt werden, um die Extension weiter zu testen.
+:::
+
+:::info Extension Context nach Veröffentlichung nicht mehr änderbar
+Der Extension Context kann nach der Veröffentlichung der Extension nicht mehr geändert werden.
+Falls du unsicher bist, welcher Context für deine Extension der richtige ist, hilft dir der [Guide zur Wahl des Extension Context](../../../how-to/choose-a-context) bei der Entscheidung.
+Die Wahl bestimmt nämlich auch, auf welche Funktionen du innerhalb deiner Extension Zugriff hast.
+:::
+
+## Extension Context wechseln
+
+Der Extension Context wird im mStudio konfiguriert.
+Das Vorgehen ist identisch zu dem im Schritt [Extension konfigurieren](../configure-extension#setzen-des-extension-context) beschriebenen Ablauf.
+Wähle dort statt **Projekt** den Context **Organisation**.
+
+:::warning Webhook Erreichbarkeit
+Damit die Extension Instance gelöscht werden kann, muss auch der Webhook von deiner Extension verarbeitet werden.
+Wenn du also den Context deiner DEV Umgebung änderst, denk vorher daran, den Tunnel wie im [Guide, die Extension erreichbar zu machen](../../expose-extension) beschrieben.
+
+Falls du den Tunnel vergessen hast, zu starten, ist das kein Problem.
+Die Webhooks werden immer wieder erneut versucht.
+Dabei wird ein exponentieller Backoff angewandt.
+Du musst maximal 5 Minuten auf den Retry warten.
+:::
+
+Deine Extension Instance wird nun gelöscht und danach wird der Context deiner Extension geändert.
+Sobald du sehen kannst, dass deine Extension Instance entfernt wurde, kannst du eine neue erstellen.
diff --git a/docs/contribution/20-getting-started/08-next-steps/04-customize-frontend-fragment.mdx b/docs/contribution/20-getting-started/08-next-steps/04-customize-frontend-fragment.mdx
new file mode 100644
index 00000000..bb267516
--- /dev/null
+++ b/docs/contribution/20-getting-started/08-next-steps/04-customize-frontend-fragment.mdx
@@ -0,0 +1,89 @@
+---
+title: Entwickeln von Frontend Fragmenten
+---
+
+## Andere Ankerpunkte nutzen
+
+Die Reference Extension verwendet den Ankerpunkt `/projects/project/menu/section/extensions/item`, um als Menüeintrag innerhalb eines Projekts angezeigt zu werden.
+Das mStudio bietet jedoch weitere Ankerpunkte, die du für deine Extension nutzen kannst.
+
+Der Grundgedanke hinter Ankerpunkten ist:
+
+- In jedem Menü kann ein eigener Menüpunkt hinzugefügt werden
+- Auf jeder Seite kann eine eigene Section eingebunden werden
+
+Die verfügbaren Ankerpunkte sind direkt im mStudio einsehbar.
+Weitere Informationen findest du im [Frontend Development Konzept](../../../overview/concepts/frontend-development#anchor).
+
+:::info Mehrere Frontend Fragments
+Eine Extension ist nicht auf einen einzelnen Ankerpunkt beschränkt.
+Neben der eigenen Menüführung innerhalb der Extension können auch mehrere Frontend Fragments an verschiedenen Stellen im mStudio eingebunden werden.
+:::
+
+## Flow Design System
+
+Das **Flow Design System** ist das UI-Framework, das dem mStudio zugrunde liegt.
+Es stellt eine umfangreiche Sammlung von React-Komponenten bereit, die für die Entwicklung von Frontend Fragments verwendet werden.
+
+- **Dokumentation**: [mittwald.github.io/flow](https://mittwald.github.io/flow/)
+- **GitHub Repository**: [github.com/mittwald/flow](https://github.com/mittwald/flow)
+
+Das Flow Design System besteht unter anderem aus folgenden Paketen:
+
+| Paket                                    | Verwendung                                                         |
+| ---------------------------------------- | ------------------------------------------------------------------ |
+| `@mittwald/flow-react-components`        | React-Komponenten für die Implementierung regulärer Frontends      |
+| `@mittwald/flow-remote-react-components` | React-Komponenten für die Nutzung innerhalb von Frontend Fragments |
+
+Unter [UI Patterns](https://mittwald.github.io/flow/02-foundations/05-ui-patterns/01-dashboard) und den folgenden Seiten sind gängige UX-Patterns beschrieben,
+die dir helfen, typische Anwendungsfälle umzusetzen.
+Wenn du dich an diesem Patterns orientierst, sieht deine Extension nicht nur aus, wie ein Bestandteil des mStudio,
+sondern fühlt sich auch so an.
+
+### Verfügbare Komponenten
+
+Das mStudio selbst baut vollständig auf den Flow-Komponenten auf.
+Alles, was im mStudio möglich ist, lässt sich auch mit den Flow-Komponenten in deiner Extension umsetzen.
+
+Komponenten sind unter anderem in folgenden Kategorien verfügbar:
+
+- **Form Controls** – Eingabefelder, RadioGroups, Checkboxen, etc.
+- **Content** – Text, Überschriften, Bilder, etc.
+- **Struktur** – LayoutCards, Sections, Listen, ColumnLayouts, etc.
+- **Navigation** – Tabs, Links, Breadcrumbs, etc.
+- **Overlays** – Modals, Tooltips, LightBoxes, etc.
+- **Datenvisualisierung** – CartesianCharts, DonutCharts, etc.
+
+In der [flow Dokumentation](https://mittwald.github.io/flow/) sind für alle Components Dokumentation, Beispiele und Guidelines formuliert.
+Außerdem ist der Einsatz der Komponenten in der Reference Extension zu sehen und kann als Orientierung dienen.
+
+:::warning Keine nativen HTML-Elemente
+Für die Entwicklung von Frontend Fragments können, bis auf wenige Ausnahmen, keine nativen HTML-Elemente wie `<div>`, `<span>` oder `<button>` verwendet werden.
+Verwende stattdessen die entsprechenden Flow-Komponenten.
+:::
+
+### Custom Styling
+
+Eigenes CSS-Styling ist in Frontend Fragments bewusst nicht möglich.
+Frontend Fragments sollen sich anfühlen, als wären sie ein Kernbestandteil des mStudio.
+Durch die Verwendung der Flow-Komponenten wird ein konsistentes Look-and-Feel sichergestellt.
+
+Alles, was an Layout-Gestaltung benötigt wird, funktioniert über die Flow-Komponenten.
+Falls etwas nicht wie gewünscht funktioniert oder eine Komponente fehlt, kannst du Feedback im [Flow GitHub Repository](https://github.com/mittwald/flow) geben.
+
+Falls die Flow Components nicht für deinen Anwendungsfall geeignet sind, besteht auch die Möglichkeit, ein [externes Frontend](./external-frontend) zu entwickeln.
+
+## Routing und Navigation
+
+Die Reference Extension verwendet [TanStack Start](https://tanstack.com/start/latest) als Full-Stack-Framework, das TanStack Router für das Routing mitbringt.
+
+Innerhalb deiner Extension kannst du beliebig viele Routen anlegen und zwischen ihnen navigieren.
+Die Routen werden im `src/routes/`-Verzeichnis definiert.
+
+### Context Parameter
+
+Über die Ext Bridge kannst du auf Kontext-Informationen wie die `projectId` oder `customerId` zugreifen, je nachdem, in welchem Context deine Extension läuft.
+Diese Informationen können genutzt werden, um die Anzeige oder das Verhalten der Extension anzupassen.
+
+In unserem [Frontend Fragment Guide](https://developer.mittwald.de/docs/v2/contribution/how-to/develop-frontend-fragment/#getconfig--useconfig-react) haben wir ausführlicher beschrieben,
+wie die Ext Bridge funktioniert und welche Informationen zur Verfügung stehen.
diff --git a/docs/contribution/20-getting-started/08-next-steps/05-external-frontend.mdx b/docs/contribution/20-getting-started/08-next-steps/05-external-frontend.mdx
new file mode 100644
index 00000000..0719833e
--- /dev/null
+++ b/docs/contribution/20-getting-started/08-next-steps/05-external-frontend.mdx
@@ -0,0 +1,394 @@
+---
+title: Implementieren eines externen Frontends
+---
+
+## Anwendungsfälle für ein externes Frontend
+
+Grundsätzlich sind Frontend Fragments der bevorzugte Weg, um eine UI für deine Extension bereitzustellen.
+Sie bieten eine nahtlose Integration in das mStudio und ein konsistentes Nutzererlebnis.
+
+Gewisse Anwendungsfälle erfordern jedoch ein externes Frontend.
+Beispiele dafür sind:
+
+- **Eigene Nutzerverwaltung** – Wenn deine Extension eine Nutzerverwaltung benötigt, die unabhängig von mStudio-Usern ist
+- **Spezielle UI-Features** – Wenn UI-Anforderungen bestehen, die nicht mit Flow-Komponenten umsetzbar sind
+- **Integration bestehender Produkte** – Wenn ein bestehendes SaaS-Produkt lose in das mStudio integriert werden soll
+
+## Wie externe Frontends funktionieren
+
+Ein externes Frontend ist grundsätzlich nur ein Link zu einer anderen Web-Applikation.
+Diese kann mit einem beliebigen Tech-Stack gebaut sein – es gibt keine Einschränkungen bezüglich Framework oder Technologie.
+
+Auch über externe Frontends ist eine Authentifizierung gegen die mStudio API möglich.
+Dafür stehen zwei Mechanismen zur Verfügung:
+
+| Mechanismus                                                                                               | Beschreibung                                                                                                                                                                                           |
+| --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [OAuth2](../../../overview/concepts/authentication#oauth2)                                                | Eignet sich, wenn es dem User möglich sein soll, ohne das mStudio besuchen zu müssen, direkt auf das externe Frontend zugreifen zu können.                                                             |
+| [Access Token Retrieval Key (ATReK](../../../overview/concepts/authentication#access-token-retrieval-key) | Ein kurzlebiges Token, das in Kombination mit einer User-ID gegen ein Access Token ausgetauscht werden kann. Eignet sich, wenn die User über das mStudio zum externen Frontend geleitet werden sollen. |
+
+:::info Kombination mit Frontend Fragments
+Externe Frontends und Frontend Fragments schließen sich nicht gegenseitig aus.
+Beides kann parallel verwendet werden, um unterschiedliche Teile deiner Extension abzubilden.
+:::
+
+## Auf die Reference Extension aufbauen
+
+### Komponenten
+
+Für externe Frontends müssen keine mStudio UI Komponenten verwendet werden.
+Falls jedoch das externe Frontend in React geschrieben werden soll, **können** die mStudio Komponenten verwendet werden.
+Dafür werden nicht die `@mittwald/flow-remote-react-components` verwendet, sondern die `@mittwald/flow-react-components` (ohne remote).
+
+:::warning Imports prüfen
+Wenn du beide Packages im Projekt hast, musst du bei den Imports aufpassen, dass du nicht versehentlich die falschen Komponenten importierst.
+Frontend Fragmente funktionieren nur mit den `@mittwald/flow-remote-react-components`.
+Externe Frontends funktionieren hingegen nur mit den `@mittwald/flow-react-components`
+:::
+
+### Authentifizierung
+
+[OAuth2](https://datatracker.ietf.org/doc/html/rfc6749) ist ein gut dokumentierter Standard, für den viele Client Libraries existieren, unter anderem [`oidc-client-ts`](https://github.com/authts/oidc-client-ts), dass neben OIDC auch OAuth2 unterstützt.
+
+```typescript
+import { UserManager } from "oidc-client-ts";
+
+const userMangager = new UserManager({
+  authority: "https://api.mittwald.de/v2/oauth2/",
+  client_id: process.env.OAUTH_CLIENT_ID,
+  redirect_uri: process.env.OAUTH_REDIRECT_URL,
+  scope: "user:read project:read project:write",
+  response_type: "code",
+  metadata: {
+    authorization_endpoint: "https://api.mittwald.de/v2/oauth2/authorize",
+    token_endpoint: "https://api.mittwald.de/v2/oauth2/token",
+  },
+});
+```
+
+:::info OAuth2 Clients erstellen
+OAuth2 Clients können derzeit nicht über das mStudio erstellt werden.
+Wir haben einen Guide geschrieben, [wie ein OAuth2 Client registriert werden kann](../../how-to/manage-oauth-clients).
+:::
+
+Die Authentifizierung mittels ATReK hingegen ist ein Authentifizierungsprozess,
+den wir entwickelt haben, um ohne Redirects, also schnell wechselnden Seiten direkt in einem externen Frontend authentifiziert zu sein.
+
+Die grundsätzliche Funktionsweise des ATReK ist ein sehr kurzlebiger Token, der in Kombination mit der User ID gegen ein Access- und ein Refresh-Token ausgetauscht werden kann.
+Dieses Access-Token ist genauso wie die Access-Tokens, die aus Session-Tokens generiert werden, nutzerbezogen und durch die Extension Scopes eingeschränkt.
+
+Im Folgenden soll einmal grob der Weg aufgezeichnet werden, wie ein externes Frontend mit ATReK auf Basis der Reference Extension implementiert werden kann.
+
+### Implementierung eines externen Frontends auf Basis der Reference Extension
+
+:::info Vereinfachung
+Wir gehen im Folgenden davon aus, dass du **statt** einem Frontend Fragment ein externes Frontend implementieren willst.
+Wenn du beides parallel betreiben möchtest, ist ein wenig mehr Code Umstrukturierung nötig.
+:::
+
+#### UI Komponenten
+
+Die React Komponenten können mit folgendem Befehl zur Reference Extension hinzugefügt werden.
+
+```bash
+pnpm add @mittwald/flow-react-components
+```
+
+Außerdem müssen wir die Styles der Komponenten importieren.
+Das können wir in der `src/start.ts` machen.
+
+```typescript title="src/start.ts"
+import "@mittwald/flow-react-components/all.css";
+```
+
+Schließlich müssen wir aus dem Root-Layout (`src/routes/__root.tsx`) noch den `RemoteRoot`-Provider entfernen.
+Dieser wird nur für Frontend Fragments benötigt.
+
+:::info Frontend Fragmente und externe Frontends parallel nutzen
+Wenn du sowohl Frontend Fragmente als auch ein externes Frontend anbieten willst, musst du das `RemoteRoot`-Element aus dem Root-Layout entfernen und über getrennte `_pathlessLayout.tsx` arbeiten.
+Mehr dazu findest du in der [Layout Routes Dokumentation von tanstack Router](https://tanstack.com/router/v1/docs/framework/react/routing/routing-concepts#layout-routes)
+:::
+
+#### Cookie Handling
+
+Wir speichern Access-Token, Refresh-Token sowie Session Informationen als Cookies, also bereiten wir ein wenig Library Code zur Speicherung der Cookies vor.
+
+```typescript title="src/lib/auth-cookies.ts"
+import { getCookie, setCookie } from "@tanstack/react-start/server";
+
+export interface TokenData {
+  accessToken: string;
+  refreshToken: string;
+  expiresAt: string;
+}
+
+export interface SessionContext {
+  userId: string;
+  contextId: string;
+  extensionInstanceId: string;
+}
+
+export type AuthData = TokenData & SessionContext;
+
+const COOKIE_OPTIONS = {
+  httpOnly: true,
+  secure: true,
+  sameSite: "strict" as const,
+  path: "/",
+  maxAge: 60 * 60 * 24, // 1 day
+};
+
+export function setTokenCookies(tokens: TokenData): void {
+  setCookie("accessToken", tokens.accessToken, COOKIE_OPTIONS);
+  setCookie("refreshToken", tokens.refreshToken, COOKIE_OPTIONS);
+  setCookie("expiresAt", tokens.expiresAt, COOKIE_OPTIONS);
+}
+
+export function setSessionCookies(session: SessionContext): void {
+  setCookie("userId", session.userId, COOKIE_OPTIONS);
+  setCookie("contextId", session.contextId, COOKIE_OPTIONS);
+  setCookie("extensionInstanceId", session.extensionInstanceId, COOKIE_OPTIONS);
+}
+
+export function setAuthCookies(auth: AuthData): void {
+  setTokenCookies(auth);
+  setSessionCookies(auth);
+}
+
+export function getTokenCookies(): TokenData | null {
+  const accessToken = getCookie("accessToken");
+  const refreshToken = getCookie("refreshToken");
+  const expiresAt = getCookie("expiresAt");
+
+  if (!accessToken || !refreshToken || !expiresAt) {
+    return null;
+  }
+
+  return { accessToken, refreshToken, expiresAt };
+}
+
+export function getSessionCookies(): SessionContext | null {
+  const userId = getCookie("userId");
+  const contextId = getCookie("contextId");
+  const extensionInstanceId = getCookie("extensionInstanceId");
+
+  if (!userId || !contextId || !extensionInstanceId) {
+    return null;
+  }
+
+  return { userId, contextId, extensionInstanceId };
+}
+
+export function getAuthCookies(): AuthData | null {
+  const tokens = getTokenCookies();
+  const session = getSessionCookies();
+
+  if (!tokens || !session) {
+    return null;
+  }
+
+  return { ...tokens, ...session };
+}
+
+export function isTokenExpiringSoon(
+  expiresAt: string,
+  thresholdMs: number,
+): boolean {
+  const expiresAtDate = new Date(expiresAt);
+  const timeUntilExpiry = expiresAtDate.getTime() - Date.now();
+  return timeUntilExpiry <= thresholdMs;
+}
+```
+
+#### ATReK Authentifizierung und Landing Page
+
+Als nächstes implementieren wir eine Server Function, die die benötigten Parameter entgegen nimmt,
+die Authentifizierung durchführt und die Ergebnisse als Cookies speichert.
+
+```typescript title="src/serverFunctions/authenticate-with-atrek.ts"
+import { createServerFn } from "@tanstack/react-start";
+import { assertStatus, MittwaldAPIV2Client } from "@mittwald/api-client";
+import { setAuthCookies } from "@/lib/auth-cookies.ts";
+import { z } from "zod/v4";
+
+export const searchSchema = z.object({
+  userId: z.string(),
+  atrek: z.string(),
+  contextId: z.string(),
+  extensionInstanceId: z.string(),
+});
+
+type SearchParams = z.infer<typeof searchSchema>;
+
+export const authenticateWithAtrek = createServerFn({ method: "POST" })
+  .inputValidator(searchSchema)
+  .handler(async ({ data }: { data: SearchParams }) => {
+    const { userId, atrek, contextId, extensionInstanceId } = data;
+
+    const client = MittwaldAPIV2Client.newUnauthenticated();
+
+    const response = await client.user.authenticateWithAccessTokenRetrievalKey({
+      data: {
+        userId,
+        accessTokenRetrievalKey: atrek,
+      },
+    });
+
+    assertStatus(response, 200);
+
+    const { token, refreshToken, expiresAt } = response.data;
+
+    setAuthCookies({
+      accessToken: token,
+      refreshToken,
+      expiresAt,
+      userId,
+      contextId,
+      extensionInstanceId,
+    });
+  });
+```
+
+Die Server-Function rufen wir direkt auf der Landing Page auf und leiten anschließend auf die eigentliche Seite, die HTML rendert weiter.
+
+```typescript title="src/routes/index.tsx"
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import {
+  authenticateWithAtrek,
+  searchSchema,
+} from "@/serverFunctions/authenticate-with-atrek.ts";
+
+export const Route = createFileRoute("/")({
+  validateSearch: searchSchema,
+  loaderDeps: ({ search }) => search,
+  loader: async ({ deps }) => {
+    await authenticateWithAtrek({ data: deps });
+    throw redirect({ to: "/project" });
+  },
+  component: () => null,
+});
+```
+
+## Authentication Middleware und Erstellen einer ersten Seite
+
+Um das Access-Token sowie Refresh-Token automatisch zu nutzen, wenn eine Server-Function aufgerufen wird, stellen wir eine middleware zur Verfügung.
+
+```typescript title="src/middleware/atrek.ts"
+import { createMiddleware } from "@tanstack/react-start";
+import { assertStatus, MittwaldAPIV2Client } from "@mittwald/api-client";
+import {
+  getTokenCookies,
+  getSessionCookies,
+  setTokenCookies,
+  isTokenExpiringSoon,
+} from "@/lib/auth-cookies";
+
+const REFRESH_THRESHOLD_MS = 5 * 60 * 1000; // 5 minutes
+
+async function getValidAccessToken(): Promise<string | null> {
+  const tokens = getTokenCookies();
+
+  if (!tokens) {
+    return null;
+  }
+
+  if (!isTokenExpiringSoon(tokens.expiresAt, REFRESH_THRESHOLD_MS)) {
+    return tokens.accessToken;
+  }
+
+  return await refreshTokens(tokens.accessToken, tokens.refreshToken);
+}
+
+async function refreshTokens(
+  accessToken: string,
+  refreshToken: string,
+): Promise<string> {
+  const client = MittwaldAPIV2Client.newUnauthenticated();
+
+  const response = await client.user.refreshSession({
+    data: { refreshToken },
+    headers: { "x-access-token": accessToken },
+  });
+
+  assertStatus(response, 200);
+
+  const { token, refreshToken: newRefreshToken, expiresAt } = response.data;
+
+  setTokenCookies({
+    accessToken: token,
+    refreshToken: newRefreshToken,
+    expiresAt,
+  });
+
+  return token;
+}
+
+export const authenticationMiddlewareWithAtrek = createMiddleware({
+  type: "function",
+}).server(async ({ next }) => {
+  const accessToken = await getValidAccessToken();
+  const session = getSessionCookies();
+
+  if (!accessToken || !session) {
+    throw new Error("Not authenticated. Missing cookies.");
+  }
+
+  const mittwaldClient = MittwaldAPIV2Client.newWithToken(accessToken);
+
+  return next({
+    context: {
+      ...session,
+      accessToken,
+      mittwaldClient,
+    },
+  });
+});
+```
+
+Nun können wir in einer Server-Function die Middleware verwenden.
+Dazu passen wir die `getProjectOfExtensionInstanceServerFunction` Server-Function aus der Reference Extension an.
+
+```typescript title="src/serverFunctions/get-project-of-extension-instance.ts"
+import { createServerFn } from "@tanstack/react-start";
+import { getProject } from "@/domain/project.ts";
+import { authenticationMiddlewareWithAtrek } from "@/middleware/atrek.ts";
+
+export const getProjectOfExtensionInstanceServerFunction = createServerFn({
+  method: "GET",
+})
+  .middleware([authenticationMiddlewareWithAtrek]) //hier nutzen wir die Middleware, der Rest bleibt identisch
+  .handler(
+    async ({ context: { mittwaldClient, extensionInstanceId, contextId } }) => {
+      return getProject(mittwaldClient, extensionInstanceId, contextId);
+    },
+  );
+```
+
+Eine einfache Seite, die diese Server-Function nutzt, könnte so aussehen:
+
+```tsx title="src/routes/project.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+import { LayoutCard } from "@mittwald/flow-react-components";
+import { ProjectClientGhost } from "@/ghosts.ts";
+import { Content, Label, LabeledValue } from "@mittwald/flow-react-components";
+
+export const Route = createFileRoute("/project")({
+  component: App,
+  ssr: false,
+});
+
+function App() {
+  const project = ProjectClientGhost.getProjectOfExtensionInstance().use();
+
+  return (
+    <>
+      <LayoutCard>
+        <LabeledValue>
+          <Label>Project Name</Label>
+          <Content>{project.description}</Content>
+        </LabeledValue>
+      </LayoutCard>
+    </>
+  );
+}
+```
diff --git a/docs/contribution/20-getting-started/08-next-steps/06-extend-backend.mdx b/docs/contribution/20-getting-started/08-next-steps/06-extend-backend.mdx
new file mode 100644
index 00000000..cf7b5392
--- /dev/null
+++ b/docs/contribution/20-getting-started/08-next-steps/06-extend-backend.mdx
@@ -0,0 +1,19 @@
+---
+title: Backend-Logik erweitern
+---
+
+## Datenbankschema anpassen
+
+### Eigene Entitäten erstellen
+
+### Migrationen mit Drizzle
+
+### Beziehung zu Extension Instances
+
+## Server Functions hinzufügen
+
+### Neue Endpunkte erstellen
+
+### Middleware nutzen
+
+## Datenbereinigung beim Deinstallieren
\ No newline at end of file
diff --git a/docs/contribution/20-getting-started/08-next-steps/07-api-integration.mdx b/docs/contribution/20-getting-started/08-next-steps/07-api-integration.mdx
new file mode 100644
index 00000000..6d877234
--- /dev/null
+++ b/docs/contribution/20-getting-started/08-next-steps/07-api-integration.mdx
@@ -0,0 +1,15 @@
+---
+title: mStudio API Integration erweitern
+---
+
+## Andere Scopes anfordern
+
+## API-Client für andere Ressourcen nutzen
+
+### Projekte und Organisationen
+
+### Apps und Installationen
+
+### Domains und E-Mail
+
+## Weiterführende Ressourcen
\ No newline at end of file
diff --git a/docs/contribution/20-getting-started/08-next-steps/_category_.yml b/docs/contribution/20-getting-started/08-next-steps/_category_.yml
new file mode 100644
index 00000000..8d6fd3b6
--- /dev/null
+++ b/docs/contribution/20-getting-started/08-next-steps/_category_.yml
@@ -0,0 +1,5 @@
+label: Nächste Schritte
+collapsible: true
+collapsed: true
+link:
+  type: generated-index
\ No newline at end of file
diff --git a/docs/contribution/20-getting-started/09-publish.mdx b/docs/contribution/20-getting-started/09-publish.mdx
new file mode 100644
index 00000000..49d123d8
--- /dev/null
+++ b/docs/contribution/20-getting-started/09-publish.mdx
@@ -0,0 +1,3 @@
+---
+title: (Optional) Extension veröffentlichen
+---
diff --git a/docs/contribution/20-getting-started/_category_.yml b/docs/contribution/20-getting-started/_category_.yml
new file mode 100644
index 00000000..394be7c5
--- /dev/null
+++ b/docs/contribution/20-getting-started/_category_.yml
@@ -0,0 +1,5 @@
+label: Getting Started
+collapsible: true
+collapsed: true
+link:
+  type: generated-index
diff --git a/docs/contribution/20-getting-started/index.mdx b/docs/contribution/20-getting-started/index.mdx
new file mode 100644
index 00000000..8fcf7483
--- /dev/null
+++ b/docs/contribution/20-getting-started/index.mdx
@@ -0,0 +1,167 @@
+---
+title: Getting Started mit Extension-Entwicklung
+sidebar_position: 0
+---
+
+# Getting Started mit Extension-Entwicklung
+
+Willkommen beim Getting Started Guide für die Entwicklung von mittwald Extensions!
+
+## Was ist eine Extension?
+
+Eine **Extension** ist eine Web-Anwendung, die das mStudio um zusätzliche Funktionen erweitert.
+Extensions werden von Contributoren entwickelt und im mStudio Marketplace bereitgestellt - entweder nur für die eigene Organisation oder öffentlich
+
+Technisch gesehen besteht eine klassische Extension aus:
+
+- **Backend** - Deine Server-Anwendung
+- **Frontend Fragment** - UI-Komponenten, die im mStudio gerendert werden
+- **Datenbank** - Für die Persistierung von Extension-Daten
+
+Extensions kommunizieren über die mittwald API mit dem mStudio und können auf Projekt- oder Organisationsdaten zugreifen.
+
+:::info Weitere Details zur Entwicklung von Extensions
+Mehr Details zu Extensions findest du in der [Extension-Übersicht](../overview/extensions).
+:::
+
+## Was du in diesem Guide lernen wirst
+
+In diesem Guide lernst du, wie du:
+
+- Eine vollständige Extension-Entwicklungsumgebung einrichtest
+- Die Reference Extension als Basis für deine eigene Extension nutzt
+- Deine Extension lokal entwickelst und testest
+- Eine Extension im mStudio bereitstellst und veröffentlichst
+- Die Reference Extension auf deine eigenen Bedürfnisse und Ideen anpasst
+
+Die Reference Extension, die als Basis für diesen Guide verwendet wird, zeigt wie:
+
+- Mit der mittwald API interagiert werden kann
+- Eigene Daten in einer Datenbank speichert werden
+- Flow Remote Components eingesetzt werden
+
+Da der Marktplatz relativ flexibel ist und verschiedene Arten von Extensions ermöglicht, können nicht alle Ansätze innerhalb dieses Guides vermittelt werden.
+Dieser Guide konzentriert sich auf eine im mStudio per [Frontend Fragment](../overview/concepts/frontend-development#frontend-fragments) integrierte Extension.
+
+[//]: # "TODO Verweis auf den Ausblick für Externe Frontends"
+
+## Voraussetzungen
+
+Grundsätzlich ist es mit fast jeder Web-Technologie möglich, Extensions zu entwickeln.
+Auf Basis der Erfahrungen bestehender Contributoren sowie bestehender Libraries haben sich jedoch einige Technologien und Frameworks als besonders geeignet herauskristallisiert.
+
+Um diesem Guide gut folgen zu können und darauf basierend deine eigene Extension entwickeln zu können,
+stelle sicher, dass du die folgenden Voraussetzungen erfüllst.
+
+### Technische Anforderungen
+
+#### Software
+
+Du benötigst folgende Software auf deinem Entwicklungssystem:
+
+##### Node.js
+
+- **Version:** 22.x oder höher
+- **Prüfen:**
+
+```bash
+node --version
+# Sollte v22.x.x oder höher ausgeben
+```
+
+##### pnpm
+
+- **Version:** 9.14.4 oder höher
+- **Prüfen:**
+
+```bash
+pnpm --version
+# Sollte 9.14.4 oder höher ausgeben
+```
+
+##### Docker & Docker Compose
+
+- Zumindest für die lokale PostgreSQL-Datenbank
+- **Prüfen:**
+
+```bash
+docker --version
+docker compose version
+```
+
+##### Git
+
+- Für das Klonen der Reference Extension
+- **Prüfen:**
+
+```bash
+git --version
+```
+
+#### Editor/IDE (Optional)
+
+Wir empfehlen einen modernen Code-Editor mit TypeScript-Unterstützung.
+Unter Anderem aber nicht ausschließlich, kommen Folgende dafür in Frage:
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+- [WebStorm](https://www.jetbrains.com/webstorm/)
+- [Cursor](https://cursor.sh/)
+
+### Erforderliches Vorwissen
+
+Dieser Guide richtet sich an Entwickler mit praktischer Erfahrung in:
+
+- **React** - Du solltest mit React Hooks und Komponenten vertraut sein
+- **TypeScript** - Grundlegendes Verständnis von Types und Interfaces
+- **Tanstack Start** - Verständnis für die Funktionsweise des Fullstack Frameworks hinsichtlich Routing, Server Functions, Middlewares etc.
+- **Docker** - Grundkenntnisse im Umgang mit Docker Images und Containern
+
+Falls du in einem dieser Bereiche noch Auffrischung benötigst, empfehlen wir, dich zunächst mit den Grundlagen vertraut zu machen.
+
+### mittwald User & Organisation
+
+#### mStudio User
+
+Um eine Extension zu entwickeln, benötigst du einen mStudio User.
+
+- **Noch kein User vorhanden?** Registriere dich unter [studio.mittwald.de](https://studio.mittwald.de)
+
+#### Organisation im mStudio
+
+Extensions werden immer im Kontext einer Organisation entwickelt und bereitgestellt, um dem Nutzer anzeigen zu können,
+von wem die Extension stammt und potenziell die Abrechnung abwickeln zu können.
+
+- Erstelle oder wähle eine Organisation in deinem mStudio
+- Du benötigst Inhaberrechte für diese Organisation
+- Die Organisation muss einen Vertragspartner hinterlegt haben
+
+#### Projekt im mStudio
+
+Neben einer Organisation wirst du verpflichtend auch mindestens ein Projekt brauchen.
+Falls du vorhast, auch dem [Deployment Schritt dieses Guides](./deploy) zu folgen, solltest du keinen Projekttarif abschließen,
+sondern direkt einen Server buchen und darin ein Projekt erstellen, da du sonst nicht das Container Hosting des mStudio nutzen kannst.
+
+## Guide-Struktur
+
+Dieser Guide ist chronologisch aufgebaut. Arbeite die Schritte der Reihe nach durch:
+
+[//]: # "TODO Struktur final anpassen"
+
+1. [Contributor](./become-contributor) - Contributor für das mStudio werden
+2. [Reference Extension](./reference-extension) - Klone die Reference Extension und starte sie lokal
+3. [Extension erreichbar machen](./expose-extension) - Extension von außen erreichbar machen, um Webhooks empfangen zu können
+4. [Konfiguration](./configure-extension) - Extension registrieren und für die Reference Extension einrichten
+5. [Testing im mStudio](./test-in-mstudio) - Extension Instance erstellen und im mStudio testen
+6. [Production Deployment](./deploy) - Extension veröffentlichen
+7. [Nächste Schritte](./next-steps/) - Die Reference Extension an deine eigenen Bedürfnisse und Ideen anpassen.
+
+## Hilfe benötigt?
+
+Falls du während des Guides auf Probleme stößt:
+
+- Nutze das [GitHub Repository für Contributoren-Support](https://github.com/mittwald/contributor-support)
+- Kontaktiere den mittwald Support per E-Mail: contributorwerden@mittwald.de
+
+## Los geht's!
+
+Bereit? Dann starte damit [Contributor zu werden](./become-contributor)!
diff --git a/static/img/contribution/getting-started-guide/add-contract-owner.png b/static/img/contribution/getting-started-guide/add-contract-owner.png
new file mode 100644
index 00000000..45f504ad
Binary files /dev/null and b/static/img/contribution/getting-started-guide/add-contract-owner.png differ
diff --git a/static/img/contribution/getting-started-guide/add-extension-to-context.png b/static/img/contribution/getting-started-guide/add-extension-to-context.png
new file mode 100644
index 00000000..0d64ebaa
Binary files /dev/null and b/static/img/contribution/getting-started-guide/add-extension-to-context.png differ
diff --git a/static/img/contribution/getting-started-guide/assign-domain.png b/static/img/contribution/getting-started-guide/assign-domain.png
new file mode 100644
index 00000000..e1098318
Binary files /dev/null and b/static/img/contribution/getting-started-guide/assign-domain.png differ
diff --git a/static/img/contribution/getting-started-guide/become-contributor.png b/static/img/contribution/getting-started-guide/become-contributor.png
new file mode 100644
index 00000000..302d4f20
Binary files /dev/null and b/static/img/contribution/getting-started-guide/become-contributor.png differ
diff --git a/static/img/contribution/getting-started-guide/book-server.png b/static/img/contribution/getting-started-guide/book-server.png
new file mode 100644
index 00000000..b7146b45
Binary files /dev/null and b/static/img/contribution/getting-started-guide/book-server.png differ
diff --git a/static/img/contribution/getting-started-guide/contract-owner.png b/static/img/contribution/getting-started-guide/contract-owner.png
new file mode 100644
index 00000000..f812cf5f
Binary files /dev/null and b/static/img/contribution/getting-started-guide/contract-owner.png differ
diff --git a/static/img/contribution/getting-started-guide/create-project-in-server.png b/static/img/contribution/getting-started-guide/create-project-in-server.png
new file mode 100644
index 00000000..8704c0e4
Binary files /dev/null and b/static/img/contribution/getting-started-guide/create-project-in-server.png differ
diff --git a/static/img/contribution/getting-started-guide/extension-context.png b/static/img/contribution/getting-started-guide/extension-context.png
new file mode 100644
index 00000000..4973933f
Binary files /dev/null and b/static/img/contribution/getting-started-guide/extension-context.png differ
diff --git a/static/img/contribution/getting-started-guide/extension-id.png b/static/img/contribution/getting-started-guide/extension-id.png
new file mode 100644
index 00000000..d1a04c40
Binary files /dev/null and b/static/img/contribution/getting-started-guide/extension-id.png differ
diff --git a/static/img/contribution/getting-started-guide/frontend-fragment-configuration.png b/static/img/contribution/getting-started-guide/frontend-fragment-configuration.png
new file mode 100644
index 00000000..3338f630
Binary files /dev/null and b/static/img/contribution/getting-started-guide/frontend-fragment-configuration.png differ
diff --git a/static/img/contribution/getting-started-guide/frontend-fragments.png b/static/img/contribution/getting-started-guide/frontend-fragments.png
new file mode 100644
index 00000000..08f98ba5
Binary files /dev/null and b/static/img/contribution/getting-started-guide/frontend-fragments.png differ
diff --git a/static/img/contribution/getting-started-guide/prod-extension-frontend-fragment.png b/static/img/contribution/getting-started-guide/prod-extension-frontend-fragment.png
new file mode 100644
index 00000000..9377c544
Binary files /dev/null and b/static/img/contribution/getting-started-guide/prod-extension-frontend-fragment.png differ
diff --git a/static/img/contribution/getting-started-guide/prod-extension-webhook-url.png b/static/img/contribution/getting-started-guide/prod-extension-webhook-url.png
new file mode 100644
index 00000000..50010bc5
Binary files /dev/null and b/static/img/contribution/getting-started-guide/prod-extension-webhook-url.png differ
diff --git a/static/img/contribution/getting-started-guide/register-extension.png b/static/img/contribution/getting-started-guide/register-extension.png
new file mode 100644
index 00000000..0d3be48a
Binary files /dev/null and b/static/img/contribution/getting-started-guide/register-extension.png differ
diff --git a/static/img/contribution/getting-started-guide/registry-container-1.png b/static/img/contribution/getting-started-guide/registry-container-1.png
new file mode 100644
index 00000000..97dbab92
Binary files /dev/null and b/static/img/contribution/getting-started-guide/registry-container-1.png differ
diff --git a/static/img/contribution/getting-started-guide/running-extension.png b/static/img/contribution/getting-started-guide/running-extension.png
new file mode 100644
index 00000000..736ce010
Binary files /dev/null and b/static/img/contribution/getting-started-guide/running-extension.png differ
diff --git a/static/img/contribution/getting-started-guide/scopes.png b/static/img/contribution/getting-started-guide/scopes.png
new file mode 100644
index 00000000..8642eb78
Binary files /dev/null and b/static/img/contribution/getting-started-guide/scopes.png differ
diff --git a/static/img/contribution/getting-started-guide/show-extension-instance.png b/static/img/contribution/getting-started-guide/show-extension-instance.png
new file mode 100644
index 00000000..0b7975a6
Binary files /dev/null and b/static/img/contribution/getting-started-guide/show-extension-instance.png differ
diff --git a/static/img/contribution/getting-started-guide/webhook-url.png b/static/img/contribution/getting-started-guide/webhook-url.png
new file mode 100644
index 00000000..45b444be
Binary files /dev/null and b/static/img/contribution/getting-started-guide/webhook-url.png differ
diff --git a/static/img/contribution/getting-started-guide/zrok-enable.png b/static/img/contribution/getting-started-guide/zrok-enable.png
new file mode 100644
index 00000000..746bf307
Binary files /dev/null and b/static/img/contribution/getting-started-guide/zrok-enable.png differ