diff --git a/src/main/asciidoc/models/mockups/administration.svg b/src/main/asciidoc/models/mockups/administration.svg
new file mode 100644
index 0000000..364e9ea
--- /dev/null
+++ b/src/main/asciidoc/models/mockups/administration.svg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:08cec1d80f4490e0a53d0e4f6036a5ca6048b1fdb7722eede1823089f9c1255a
+size 213906
diff --git a/src/main/asciidoc/models/mockups/kundenverwaltung.svg b/src/main/asciidoc/models/mockups/kundenverwaltung.svg
new file mode 100644
index 0000000..16e0f63
--- /dev/null
+++ b/src/main/asciidoc/models/mockups/kundenverwaltung.svg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:313c0b028a4e87ac25e21a4da5059255f277b72d12349ec8a791425c1d104bd4
+size 247967
diff --git a/src/main/asciidoc/models/mockups/lagerverwaltung.svg b/src/main/asciidoc/models/mockups/lagerverwaltung.svg
new file mode 100644
index 0000000..316646f
--- /dev/null
+++ b/src/main/asciidoc/models/mockups/lagerverwaltung.svg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:69f70d75e6d8c31b02375b283c1b687122b1573cbd96d709ee9358b72844bad8
+size 175494
diff --git a/src/main/asciidoc/models/mockups/login.svg b/src/main/asciidoc/models/mockups/login.svg
new file mode 100644
index 0000000..29c9d6a
--- /dev/null
+++ b/src/main/asciidoc/models/mockups/login.svg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f27e839abd04ffd07fcd05eb4eab82533258b4ae411f60aeabed2857ac17cb8a
+size 77673
diff --git a/src/main/asciidoc/models/mockups/personalverwaltung.svg b/src/main/asciidoc/models/mockups/personalverwaltung.svg
new file mode 100644
index 0000000..40f1825
--- /dev/null
+++ b/src/main/asciidoc/models/mockups/personalverwaltung.svg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:acabfb412d4b3b0d34653712dadc9ebf4b4ca404b843a8c04139ebe268a31d01
+size 147652
diff --git a/src/main/asciidoc/models/mockups/produktseite.svg b/src/main/asciidoc/models/mockups/produktseite.svg
new file mode 100644
index 0000000..68403a7
--- /dev/null
+++ b/src/main/asciidoc/models/mockups/produktseite.svg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:26f770626e9448f36c07893f7797c79ed2ecc2cb6dc865ff2068acd24c593f25
+size 129898
diff --git a/src/main/asciidoc/models/mockups/registrierung.svg b/src/main/asciidoc/models/mockups/registrierung.svg
new file mode 100644
index 0000000..d9d05dc
--- /dev/null
+++ b/src/main/asciidoc/models/mockups/registrierung.svg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:704c0cd98ae8699f88ac55fe3d2424f8b7a87ced3f14829c3b0c4eb49bf12059
+size 61788
diff --git a/src/main/asciidoc/models/mockups/startseite.svg b/src/main/asciidoc/models/mockups/startseite.svg
new file mode 100644
index 0000000..9a74c57
--- /dev/null
+++ b/src/main/asciidoc/models/mockups/startseite.svg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1552653ba68aa9598e833d8635d009ea9dee2d81cd67bdf9e0e5ee52594ee184
+size 632095
diff --git a/src/main/asciidoc/models/mockups/terminkalender.svg b/src/main/asciidoc/models/mockups/terminkalender.svg
new file mode 100644
index 0000000..a116586
--- /dev/null
+++ b/src/main/asciidoc/models/mockups/terminkalender.svg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2e08bee160d60474d0c46eeb2bccca31dc97b4f77ccbfcf969c363209a6da239
+size 110374
diff --git a/src/main/asciidoc/models/mockups/warenkorb.svg b/src/main/asciidoc/models/mockups/warenkorb.svg
new file mode 100644
index 0000000..ba065d9
--- /dev/null
+++ b/src/main/asciidoc/models/mockups/warenkorb.svg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6c2a8d2e1c9e585883b626f047006e265d9867baeaef1d6ecfb0f1f6b01a4cd0
+size 147401
diff --git a/src/main/asciidoc/pflichtenheft.adoc b/src/main/asciidoc/pflichtenheft.adoc
index 3d7a0fa..41532ff 100644
--- a/src/main/asciidoc/pflichtenheft.adoc
+++ b/src/main/asciidoc/pflichtenheft.adoc
@@ -1087,48 +1087,39 @@ Das System muss
 
 == GUI Prototyp
 
-=== Überblick: Dialoglandkarte
-Erstellen Sie ein Übersichtsdiagramm, das das Zusammenspiel Ihrer Masken zur Laufzeit darstellt. Also mit welchen Aktionen zwischen den Masken navigiert wird.
-//Die nachfolgende Abbildung zeigt eine an die Pinnwand gezeichnete Dialoglandkarte. Ihre Karte sollte zusätzlich die Buttons/Funktionen darstellen, mit deren Hilfe Sie zwischen den Masken navigieren.
+Die folgenden Bilder sollen darstellen, wie die grafische Oberfläche aussehen soll, wobei das Design zweitranging, die Funktionalität priorisiert ist.
 
-=== Dialogbeschreibung
-Für jeden Dialog:
+[[home_image]]
+image::./models/mockups/startseite.svg[Startseite, 100%, 100%, pdfwidth=100%, title="Startseite", align=center]
+[small]_Buttons in der Navigationsleiste dienen dem Scrollen auf die unterhalb liegenden Bereiche. Von anderen Unterseiten aus wird die Startseite geöffnet_
 
-1. Kurze textuelle Dialogbeschreibung eingefügt: Was soll der jeweilige Dialog? Was kann man damit tun? Überblick?
-2. Maskenentwürfe (Screenshot, Mockup)
-3. Maskenelemente (Ein/Ausgabefelder, Aktionen wie Buttons, Listen, …)
-4. Evtl. Maskendetails, spezielle Widgets
+[[login_image]]
+image::./models/mockups/login.svg[Loginseite, 100%, 100%, pdfwidth=100%, title="Loginseite", align=center]
 
-=== Umsetzung
-Die folgenden Bilder sollen zeigen, wie die Software aussehen soll.
+[[register_image]]
+image::./models/mockups/registrierung.svg[Registrierungsseite, 100%, 100%, pdfwidth=100%, title="Registrierungsseite", align=center]
 
-[small]_(Bilder folgen später, vorerst nur Beschreibung)_
+[[produktseite_image]]
+image::./models/mockups/produktseite.svg[Produktseite, 100%, 100%, pdfwidth=100%, title="Produktseite", align=center]
 
-Software soll enthalten:
+[[warenkorb_image]]
+image::./models/mockups/warenkorb.svg[Warenkorb, 100%, 100%, pdfwidth=100%, title="Warenkorb", align=center]
+[small]_Der Warenkorb ist über das Profil erreichbar._
 
-- Login-Seite als Startseite
-- Navigationsbereich (Optionen erst sichtbar nach Login)
-* Terminverwaltung - in Kalenderform, editierbare Einträge
-* Kundenverwaltung - tabellarisch, Löschfunktion, Umbenennungsfunktion
-* Mitarbeiterverwaltung - tabellarisch, Löschfunktion, Umbenennungsfunktion, Rollenverwaltung
-* Lager - Produktname, Produktbild, Menge, Preis
-- Eventplanungsseite - evtl. Drop-down-Menüs für Eventtypauswahl und eventspezifische Eingabefelder
-- Kann: Produktseite - Produktname, Produktbeschreibung, Preis, Bilder
+[[administration_image]]
+image::./models/mockups/administration.svg[Administration, 100%, 100%, pdfwidth=100%, title="Administration", align=center]
 
+[[lagerverwaltung_image]]
+image::./models/mockups/lagerverwaltung.svg[Lagerverwaltung, 100%, 100%, pdfwidth=100%, title="Lagerverwaltung", align=center]
 
-[small]_Notiz: Überschüssige Zeit könnte in Design investiert werden._
+[[personalverwaltung_image]]
+image::./models/mockups/personalverwaltung.svg[Personalverwaltung, 100%, 100%, pdfwidth=100%, title="Personalverwaltung", align=center]
 
-=== Überblick: Dialoglandkarte
-Erstellen Sie ein Übersichtsdiagramm, das das Zusammenspiel Ihrer Masken zur Laufzeit darstellt. Also mit welchen Aktionen zwischen den Masken navigiert wird.
-//Die nachfolgende Abbildung zeigt eine an die Pinnwand gezeichnete Dialoglandkarte. Ihre Karte sollte zusätzlich die Buttons/Funktionen darstellen, mit deren Hilfe Sie zwischen den Masken navigieren.
+[[kundenverwaltung_image]]
+image::./models/mockups/kundenverwaltung.svg[Kundenverwaltung, 100%, 100%, pdfwidth=100%, title="Kundenverwaltung", align=center]
 
-=== Dialogbeschreibung
-Für jeden Dialog:
-
-1. Kurze textuelle Dialogbeschreibung eingefügt: Was soll der jeweilige Dialog? Was kann man damit tun? Überblick?
-2. Maskenentwürfe (Screenshot, Mockup)
-3. Maskenelemente (Ein/Ausgabefelder, Aktionen wie Buttons, Listen, …)
-4. Evtl. Maskendetails, spezielle Widgets
+[[terminkalender_image]]
+image::./models/mockups/terminkalender.svg[Terminkalender, 100%, 100%, pdfwidth=100%, title="Terminkalender", align=center]
 
 == Datenmodell