diff --git a/ff-webpage.pdf b/ff-webpage.pdf
index 05a4e60..8d3128f 100644
Binary files a/ff-webpage.pdf and b/ff-webpage.pdf differ
diff --git a/webpage/content/3-strapi/3-usage.typ b/webpage/content/3-strapi/3-usage.typ
index 1b801ed..46213df 100644
--- a/webpage/content/3-strapi/3-usage.typ
+++ b/webpage/content/3-strapi/3-usage.typ
@@ -18,18 +18,109 @@ Komponenten aus `shared` werden verwendet, um Inhalte aus anderen Listen verwend
 
 === Dynamic Zone
 
+#wrap-content(
+  figure(
+    image("../../images/gallery.png", width: 6.5cm),
+  ),
+  align: right
+)[
 *Galerie*
 
+Die Komponente Galerie ermöglicht die Anzeige mehrerer Bilder in einer Gitteransicht.
+]
+
+#wrap-content(
+  figure(
+    image("../../images/full-text.png", width: 6.5cm),
+  ),
+  align: right
+)[
 *Voll-Text*
 
+Die reine Text-Komponente ermöglicht das schreiben längerer Berichte. So zum Beispiel auch das Impressum oder die Datenschutzerklärung.
+]
+
+#wrap-content(
+  figure(
+    image("../../images/full-image.png", width: 6.5cm),
+  ),
+  align: right
+)[
 *Voll-Bild*
 
+Einzelne Bilder können auch auf Größe einer ganzen Seite angezeigt werden.
+]
+
+#wrap-content(
+  figure(
+    image("../../images/text-text-column.png", width: 6.5cm),
+  ),
+  align: right
+)[
 *Text-Text-Spalte*
 
+Neben dem 1-spaltigen Layout gibt es auch die Möglichkeit 2 Spalten nebeneinenader anzeigen zu können. Auf kleineren Bildschirmen werden die Texte übereinander angezeigt.
+]
+
+#wrap-content(
+  figure(
+    image("../../images/text-image-column.png", width: 6.5cm),
+  ),
+  align: right
+)[
 *Text-Bild-Spalte*
 
+Erweitert kann auch ein Bild in einer Spalte links oder rechts angezeigt werden. Auch hier werden die Inhalte übereinander angezeigt, wenn die Webseite auf kleineren Bildschirmen angezeigt wird.
+]
+
+#wrap-content(
+  figure(
+    image("../../images/file-download.png", width: 6.5cm),
+  ),
+  align: right
+)[
+*Datei-Download*
+
+Es besteht auch die Möglichkeit, Dateien zum Download zur Verfügung zu stellen.
+Diese Komponente ermöglicht die Einbettung von Bildern oder PDFs mit Downloadmöglichkeit. Wird ein PDF oder ein Bild angegeben, so wird dieses angezeigt. Ist eine Datei nicht darstellbar, wird nur der Download-Button angezeigt, sofern dieser nicht ausgeblendet ist.
+]
+
+#wrap-content(
+  figure(
+    image("../../images/embedding.png", width: 6.5cm),
+  ),
+  align: right
+)[
+*Einbettung*
+
+Die Einbettung ermöglicht die Anzeige externer Links. Diese Links können Bilder, PDFs oder Webseiten sein. Ein Beispiel für eine Einbettung wäre die öffentliche Kalender-Ansicht des FF Admin.
+]
+
+
+
 === Shared
 
+#wrap-content(
+  figure(
+    image("../../images/selected-articles.png", width: 6.5cm),
+  ),
+  align: right
+)[
 *Artikel hervorheben*
 
-*Inhaltsauswahl*
\ No newline at end of file
+Mit dieser Komponente lassen sich Artikel hervorheben, welche besondere Aufmerksamkeit erhalten sollen. Dazu können dann auch noch ein Titel und eine Beschreibung angegeben werden.
+
+Weiterhin kann zu der URL weitergeleitet werden, unter der die Artikel-Anzeige ist.
+]
+
+#wrap-content(
+  figure(
+    image("../../images/collection-select.png", width: 6.5cm),
+  ),
+  align: right
+)[
+*Inhaltsauswahl*
+
+Die Inhaltsauswahl kann die Listen der Artikel, Einsätze, Fahrzeuge oder Termine anzeigen, sofern diese in der Sammlungsreferenz (@reference) mit der Anzeige konfiguriert wurden.
+Hier kann dann auch eingestellt werden, ob die Ansicht auf die Detailansicht der jeweiligen Einträge weiterleiten kann.
+]
\ No newline at end of file
diff --git a/webpage/images/collection-select.png b/webpage/images/collection-select.png
new file mode 100644
index 0000000..884a95e
Binary files /dev/null and b/webpage/images/collection-select.png differ
diff --git a/webpage/images/embedding.png b/webpage/images/embedding.png
new file mode 100644
index 0000000..771169d
Binary files /dev/null and b/webpage/images/embedding.png differ
diff --git a/webpage/images/file-download.png b/webpage/images/file-download.png
new file mode 100644
index 0000000..8100d29
Binary files /dev/null and b/webpage/images/file-download.png differ
diff --git a/webpage/images/full-image.png b/webpage/images/full-image.png
new file mode 100644
index 0000000..10beb8e
Binary files /dev/null and b/webpage/images/full-image.png differ
diff --git a/webpage/images/full-text.png b/webpage/images/full-text.png
new file mode 100644
index 0000000..152c877
Binary files /dev/null and b/webpage/images/full-text.png differ
diff --git a/webpage/images/gallery.png b/webpage/images/gallery.png
new file mode 100644
index 0000000..2d81bf0
Binary files /dev/null and b/webpage/images/gallery.png differ
diff --git a/webpage/images/selected-articles.png b/webpage/images/selected-articles.png
new file mode 100644
index 0000000..656b602
Binary files /dev/null and b/webpage/images/selected-articles.png differ
diff --git a/webpage/images/text-image-column.png b/webpage/images/text-image-column.png
new file mode 100644
index 0000000..5cfbf0c
Binary files /dev/null and b/webpage/images/text-image-column.png differ
diff --git a/webpage/images/text-text-column.png b/webpage/images/text-text-column.png
new file mode 100644
index 0000000..33e979f
Binary files /dev/null and b/webpage/images/text-text-column.png differ