diff --git a/README.md b/README.md
index e62ac26f..ee784e3e 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,9 @@
# Dr-Trottoir-3
+## User Guide
+
+The user guide is available [here](user_guide/guide.md).
+
## OneDrive
All non code related files are stored in following OneDrive directory. This includes functional analysis, use cases, endpoint guides, figma designs...
[OneDrive](https://ugentbe-my.sharepoint.com/personal/bart_mesuere_ugent_be/_layouts/15/onedrive.aspx?id=%2Fpersonal%2Fbart%5Fmesuere%5Fugent%5Fbe%2FDocuments%2FOnderwijs%2FSELab2%2F2022%2D2023%2FMappen%20studenten%2Fgroep3&ct=1676648071488&or=OWA%2DNT&cid=0d2049e3%2Dfcb1%2Df225%2Dcaee%2Df2b258c1f843&ga=1)
diff --git a/frontend/src/components/elements/ListViewElement/InsertFormElements/BuildingInsertFormComponent.tsx b/frontend/src/components/elements/ListViewElement/InsertFormElements/BuildingInsertFormComponent.tsx
index 494d1e65..f9caf3a5 100644
--- a/frontend/src/components/elements/ListViewElement/InsertFormElements/BuildingInsertFormComponent.tsx
+++ b/frontend/src/components/elements/ListViewElement/InsertFormElements/BuildingInsertFormComponent.tsx
@@ -169,7 +169,7 @@ export default function Form({onSubmit, setCanClose, canClose, setOpen, open, al
}}
size="small"
fullWidth
- renderInput={(params) => }
+ renderInput={(params) => }
options={allRegions}
getOptionLabel={({name}) => name}
value={formRegion}
diff --git a/frontend/src/components/elements/ListViewElement/InsertFormElements/RoutesInsertFormComponent.tsx b/frontend/src/components/elements/ListViewElement/InsertFormElements/RoutesInsertFormComponent.tsx
index 681b0ad5..21ef11a5 100644
--- a/frontend/src/components/elements/ListViewElement/InsertFormElements/RoutesInsertFormComponent.tsx
+++ b/frontend/src/components/elements/ListViewElement/InsertFormElements/RoutesInsertFormComponent.tsx
@@ -132,7 +132,7 @@ export default function Form(props: FormProps) {
}}
size="small"
fullWidth
- renderInput={(params) => }
+ renderInput={(params) => }
options={props.allRegions}
getOptionLabel={({name}) => name}
value={formRegion}
diff --git a/frontend/src/components/elements/ListViewElement/InsertFormElements/UserInsertFormComponent.tsx b/frontend/src/components/elements/ListViewElement/InsertFormElements/UserInsertFormComponent.tsx
index 8d7a1c13..154413fb 100644
--- a/frontend/src/components/elements/ListViewElement/InsertFormElements/UserInsertFormComponent.tsx
+++ b/frontend/src/components/elements/ListViewElement/InsertFormElements/UserInsertFormComponent.tsx
@@ -197,8 +197,8 @@ export default function Form(props: FormProps) {
},
}}
{...params}
- label="Gebouwen"
- placeholder="Gebouwen"
+ label="gebouwen"
+ placeholder="gebouwen"
/>
)}
/>
diff --git a/frontend/src/components/elements/UserElement/EditUserPopup.tsx b/frontend/src/components/elements/UserElement/EditUserPopup.tsx
index a58c8ea9..86a62344 100644
--- a/frontend/src/components/elements/UserElement/EditUserPopup.tsx
+++ b/frontend/src/components/elements/UserElement/EditUserPopup.tsx
@@ -136,8 +136,8 @@ export default function EditUserPopup({userId, onSubmit, open, setOpen, prevFirs
)}
/>
diff --git a/user_guide/guide.md b/user_guide/guide.md
new file mode 100644
index 00000000..3084e248
--- /dev/null
+++ b/user_guide/guide.md
@@ -0,0 +1,218 @@
+# Gebruikers Handleiding
+
+- [Gebruikers Handleiding](#gebruikers-handleiding)
+ - [Gebruikers](#gebruikers)
+ - [Aanmelden](#aanmelden)
+ - [Toevoegen](#toevoegen)
+ - [Gebouwen](#gebouwen)
+ - [Toevoegen](#toevoegen-1)
+ - [Aanpassen](#aanpassen)
+ - [Templates](#templates)
+ - [Ophalingen plannen](#ophalingen-plannen)
+ - [Publieke link](#publieke-link)
+ - [Routes](#routes)
+ - [Toevoegen](#toevoegen-2)
+ - [Aanpassen](#aanpassen-1)
+ - [Planner](#planner)
+ - [Ronde plannen](#ronde-plannen)
+ - [Ronde herhalen](#ronde-herhalen)
+ - [Ronde verwijderen](#ronde-verwijderen)
+ - [Live Routes](#live-routes)
+
+## Gebruikers
+
+[Terug](#gebruikers-handleiding)
+
+### Aanmelden
+
+Wanneer een gebruiker voor het eerst de webapp bezoekt, komt hij op de aanmeldpagina.
+Mocht een gebruiker zijn wachtwoord vergeten zijn, is er een optie om het wachtwoord te resetten. Hiervoor wordt een
+mail gestuurd naar het mailadres.
+![Aanmeldpagina](screenshots/gebruikers/0_login.jpg)
+Als we in de zijbalk naar de gebruikerspagina navigeren, kunnen we voor elke gebruiker een planning en een geschiedenis
+zien, en ook een grafiek met het aantal gewerkte uren.
+![Gebruikerspagina](screenshots/gebruikers/3_detail.jpg)
+
+### Toevoegen
+
+Om een gebruiker toe te voegen drukken we op de knop in de rechterbovenhoek.
+![Gebruiker toevoegen](screenshots/gebruikers/1_toevoegen.jpg)
+Er komt een popup om de nodige gegevens in te vullen. Kies als gebruikersnaam het mailadres van de gebruiker.
+Hier kunnen we ook het type van het account kiezen.
+![Gebruiker toevoegen popup](screenshots/gebruikers/2_toevoegen2.jpg)
+
+#### Syndicus
+Als we een syndicus toevoegen kunnen we een lijst aan gebouwen selecteren dat deze syndicus heeft.
+![Gebruiker toevoegen syndicus](screenshots/gebruikers/4_toevoegen_syndicus.jpg)
+
+#### Student
+Als we een student toevoegen kunnen we selecteren of het over een superstudent gaat of niet.
+We moeten dan ook een regio selecteren.
+![Gebruiker toevoegen syndicus](screenshots/gebruikers/5_toevoegen_student.jpg)
+
+## Gebouwen
+
+[Terug](#gebruikers-handleiding)
+
+Als we in de zijbalk naar de gebouwenpagina navigeren krijgen we de lijst van gebouwen te zien.
+We kunnen in de top bar zoeken op gebouwen, kiezen op welk veld we willen sorteren en filteren
+op regio
+![Gebouwenpagina](screenshots/gebouwen/01_page.jpg)
+Als we een gebouw selecteren, krijgen we de details te zien, zoals het adres, de handleiding,
+de publieke link, de foto. Eronder zien we de templates, de planning, en de problemen die de
+studenten hebben aangegeven.
+![Gebouw detail](screenshots/gebouwen/08_detail_manual.jpg)
+
+### Toevoegen
+
+Om een gebouw toe te voegen selecteren we de knop in de rechterbovenhoek.
+![Gebouw toevoegen](screenshots/gebouwen/02_toevoegen.jpg)
+Er komt een popup tevoorschijn om de gegevens in te vullen. Elke gebouw moet een coördinaat
+hebben zodat studenten het altijd vinden. Door op de knop naast het adres te drukken, zal de
+applicatie zelf proberen het coördinaat te vinden. De blauwe marker op de kaart kan ook versleept
+worden om het coördinaat aan te passen.
+![Gebouw toevoegen coördinaat](screenshots/gebouwen/03_toevoegen_locate.jpg)
+Het is mogelijk om één of meerdere syndici te koppelen aan een gebouw.
+![Gebouw toevoegen syndicus](screenshots/gebouwen/04_toevoegen_syndicus.jpg)
+Door op de handleiding knop te klikken kunnen we een pdf-bestand uploaden voor dit gebouw.
+![Gebouw toevoegen handleiding](screenshots/gebouwen/05_toevoegen_handleiding.jpg)
+We kunnen ook een afbeelding van de gevel uploaden zodat studenten het gebouw makkelijk herkennen.
+![Gebouw toevoegen afbeelding](screenshots/gebouwen/06_toevoegen_afbeelding.jpg)
+Druk op *toevoegen* om het gebouw toe te voegen.
+![Gebouw toevoegen](screenshots/gebouwen/07_toevoegen_complete.jpg)
+
+### Aanpassen
+
+Druk op het potlood icoontje naast de naam van een gebouw om het gebouw te wijzigen.
+![Gebouw aanpassen](screenshots/gebouwen/09_bewerk.jpg)
+De popup om een gebouw aan te passen werkt op dezelfde manier als die om een gebouw toe te voegen.
+![Gebouw aanpassen popup](screenshots/gebouwen/10_bewerk_form.jpg)
+
+### Templates
+
+Templates zijn herbruikbare planningen. Zo kan er voor een gebouw bijvoorbeeld een zomerplanning
+en een winterplanning zijn. Templates hebben geen vaste lengte.
+Om een nieuwe template te maken, druk op het plusje onderaan de lijst van templates.
+![Template toevoegen](screenshots/gebouwen/11_template_add.jpg)
+In de popup kan een bestaande template geselecteerd worden om te bewerken, of kan een nieuwe naam
+getypt worden om de nieuwe template te maken.
+![Template maken](screenshots/gebouwen/12_template_create.jpg)
+Klik op een bepaalde weekdag om aan te duiden wat er op die dag moet gebeuren.
+![Template dag](screenshots/gebouwen/13_template_day.jpg)
+Duid aan welk afval moet buitengezet worden.
+![Template afval types](screenshots/gebouwen/14_template_garbage_types.jpg)
+Deze template zegt dus dat op de derde dag REST en PMD buiten gezet moet worden.
+![Template opslaan](screenshots/gebouwen/15_template_save.jpg)
+Een template kan ook aangepast worden door op het potlood icoontje te drukken.
+![Template aanpassen](screenshots/gebouwen/16_template_edit.jpg)
+
+### Ophalingen plannen
+
+Om ophalingen te plannen kunnen we een template plannen door bij een bepaalde week op het eerste
+icoontje te klikken.
+![Template plannen](screenshots/gebouwen/17_plan_template.jpg)
+Kies een template om te plannen.
+![Template kiezen](screenshots/gebouwen/18_plan_template_select.jpg)
+De ophalingen die gepland zouden worden, worden overzichtelijk weergegeven.
+![Template plannen preview](screenshots/gebouwen/19_plan_template_selected.jpg)
+Het is ook nog mogelijk om de datum waarop de template gepland wordt aan te passen. In de meeste
+gevallen zal dit wel een maandag zijn.
+![Template plannen datum](screenshots/gebouwen/20_plan_template_date.jpg)
+Druk op *opslaan* om de ophalingen toe te voegen.
+![Template plannen opslaan](screenshots/gebouwen/21_plan_template_save.jpg)
+De ophalingen zijn nu zichtbaar in de planning.
+![Template gepland](screenshots/gebouwen/22_plan_template_planned.jpg)
+Het is ook mogelijk om individuele ophalingen toe te voegen door op het tweede icoontje te
+drukken.
+![Ophaling plannen](screenshots/gebouwen/23_plan_sched.jpg)
+Kies de datum en het afval type. Druk op opslaan om de ophaling toe te voegen.
+![Ophaling plannen opslaan](screenshots/gebouwen/24_plan_sched_save.jpg)
+
+### Publieke link
+
+Om een publieke link voor een gebouw te (her)genereren, druk op het herlaadicoontje.
+![Link genereren](screenshots/gebouwen/25_link_generate.jpg)
+De link kan makkelijk gekopieerd worden door op het ander icoontje te drukken.
+![Link kopiëren](screenshots/gebouwen/26_link_copy.jpg)
+De publieke pagina is nu beschikbaar.
+![Link pagina](screenshots/gebouwen/27_link_page.jpg)
+
+## Routes
+
+[Terug](#gebruikers-handleiding)
+
+De routes pagina is waar definities van routes kunnen aangemaakt en aangepast worden.
+In de top bar kunnen we zoeken op routes, sorteren op verschillende velden en filteren op regio.
+![](screenshots/routes/0_page.jpg)
+Door op een route te klikken zien we alle details van deze route. Men ziet de gebouwen, hun
+volgorde en de planningen.
+![](screenshots/routes/3_detail.jpg)
+### Toevoegen
+Een route toevoegen kan door op de "route toevoegen" knop rechts boven te klikken. Dan moet een
+naam en regio ingegeven worden.
+![](screenshots/routes/1_toevoegen.jpg)
+![](screenshots/routes/2_toevoegen_save.jpg)
+### Aanpassen
+De route kunnen we dan aanpassen. Een gebouw toevoegen doen we door op het plusje onderaan te
+klikken. Daar kunnen we zoeken door gebouwen en er eentje selecteren om toe te voegen.
+![](screenshots/routes/4_building_add.jpg)
+![](screenshots/routes/5_building_add_dialog.jpg)
+
+De volgorde van gebouwen kan aangepast worden door ze te verslepen tot in de gewenste volgorde.
+![](screenshots/routes/6_building_drag.jpg)
+![](screenshots/routes/7_building_remove.jpg)
+
+## Planner
+[Terug](#gebruikers-handleiding)
+
+De planner page is waar de planning week per week opgesteld kan worden.
+
+![](screenshots/planner/0_page.jpg)
+
+In de top-bar hier kunnen we selecteren van welke regio we de planning willen aanpassen.
+
+![](screenshots/planner/1_regio_select.jpg)
+### Ronde plannen
+
+Om een student te plannen op een bepaalde route op een bepaalde dag klikken we op het hokje dat overeenkomt
+met de dag en route dat we willen plannen. Dit opent een venster waar we de student kunnen
+kiezen die deze route zal moeten doen.
+
+![](screenshots/planner/2_task_add.jpg)
+![](screenshots/planner/3_task_add_save.jpg)
+
+Geplande studenten kunnen ook verschoven worden naar een andere dag en/of route.
+
+![](screenshots/planner/6_task_drag.jpg)
+### Ronde herhalen
+
+Indien een bepaalde student een route voor meerdere dagen na elkaar zou moeten doen kunnen
+we ook gewoon op het plusje rechts boven zijn blokje klikken om hem of haar voor een
+extra dag te plannen.
+
+![](screenshots/planner/4_task_extend.jpg)
+### Ronde verwijderen
+
+Een planning van een student verwijderen kan door op het kruisje rechts boven het blokje te klikken.
+
+![](screenshots/planner/5_task_remove.jpg)
+
+## Live Routes
+[Terug](#gebruikers-handleiding)
+
+De Live routes pagina toont alle routes die op een bepaalde dag gedaan worden. Standaard wordt de
+huidige dag getoond, maar door op het kalendericoontje rechts boven te klikken kan men een andere
+dag kiezen. Zo kan men toekomstige en voorbije dagen ook zien wat er moet gebeuren en gebeurd is.
+
+### Filters
+Net zoals op andere pagina's kan men sorteren op verschillende velden. Dit kan op de naam van de route,
+de regio, de naam van de student en hoeveel procent van de route afgewerkt is.
+
+Men kan ook filteren op regio, en op routes die nog bezig zijn of al compleet zijn.
+![](screenshots/live_routes/0_page.jpg)
+
+### Details view
+Door op een route te klikken open je de details van deze route. Hier kan je zien wat er al gedaan is en de foto's die de
+student geüpload heeft.
+
+![](screenshots/live_routes/detail.jpg)
diff --git a/user_guide/screenshots/gebouwen/01_page.jpg b/user_guide/screenshots/gebouwen/01_page.jpg
new file mode 100644
index 00000000..88ff3ced
Binary files /dev/null and b/user_guide/screenshots/gebouwen/01_page.jpg differ
diff --git a/user_guide/screenshots/gebouwen/02_toevoegen.jpg b/user_guide/screenshots/gebouwen/02_toevoegen.jpg
new file mode 100644
index 00000000..93c5a858
Binary files /dev/null and b/user_guide/screenshots/gebouwen/02_toevoegen.jpg differ
diff --git a/user_guide/screenshots/gebouwen/03_toevoegen_locate.jpg b/user_guide/screenshots/gebouwen/03_toevoegen_locate.jpg
new file mode 100644
index 00000000..6b382980
Binary files /dev/null and b/user_guide/screenshots/gebouwen/03_toevoegen_locate.jpg differ
diff --git a/user_guide/screenshots/gebouwen/04_toevoegen_syndicus.jpg b/user_guide/screenshots/gebouwen/04_toevoegen_syndicus.jpg
new file mode 100644
index 00000000..da059d0c
Binary files /dev/null and b/user_guide/screenshots/gebouwen/04_toevoegen_syndicus.jpg differ
diff --git a/user_guide/screenshots/gebouwen/05_toevoegen_handleiding.jpg b/user_guide/screenshots/gebouwen/05_toevoegen_handleiding.jpg
new file mode 100644
index 00000000..33cace1c
Binary files /dev/null and b/user_guide/screenshots/gebouwen/05_toevoegen_handleiding.jpg differ
diff --git a/user_guide/screenshots/gebouwen/06_toevoegen_afbeelding.jpg b/user_guide/screenshots/gebouwen/06_toevoegen_afbeelding.jpg
new file mode 100644
index 00000000..69abd5aa
Binary files /dev/null and b/user_guide/screenshots/gebouwen/06_toevoegen_afbeelding.jpg differ
diff --git a/user_guide/screenshots/gebouwen/07_toevoegen_complete.jpg b/user_guide/screenshots/gebouwen/07_toevoegen_complete.jpg
new file mode 100644
index 00000000..4d820330
Binary files /dev/null and b/user_guide/screenshots/gebouwen/07_toevoegen_complete.jpg differ
diff --git a/user_guide/screenshots/gebouwen/08_detail_manual.jpg b/user_guide/screenshots/gebouwen/08_detail_manual.jpg
new file mode 100644
index 00000000..5322c8b8
Binary files /dev/null and b/user_guide/screenshots/gebouwen/08_detail_manual.jpg differ
diff --git a/user_guide/screenshots/gebouwen/09_bewerk.jpg b/user_guide/screenshots/gebouwen/09_bewerk.jpg
new file mode 100644
index 00000000..bac1c3cb
Binary files /dev/null and b/user_guide/screenshots/gebouwen/09_bewerk.jpg differ
diff --git a/user_guide/screenshots/gebouwen/10_bewerk_form.jpg b/user_guide/screenshots/gebouwen/10_bewerk_form.jpg
new file mode 100644
index 00000000..4d40d63a
Binary files /dev/null and b/user_guide/screenshots/gebouwen/10_bewerk_form.jpg differ
diff --git a/user_guide/screenshots/gebouwen/11_template_add.jpg b/user_guide/screenshots/gebouwen/11_template_add.jpg
new file mode 100644
index 00000000..30762400
Binary files /dev/null and b/user_guide/screenshots/gebouwen/11_template_add.jpg differ
diff --git a/user_guide/screenshots/gebouwen/12_template_create.jpg b/user_guide/screenshots/gebouwen/12_template_create.jpg
new file mode 100644
index 00000000..c390f1bb
Binary files /dev/null and b/user_guide/screenshots/gebouwen/12_template_create.jpg differ
diff --git a/user_guide/screenshots/gebouwen/13_template_day.jpg b/user_guide/screenshots/gebouwen/13_template_day.jpg
new file mode 100644
index 00000000..d8d263d2
Binary files /dev/null and b/user_guide/screenshots/gebouwen/13_template_day.jpg differ
diff --git a/user_guide/screenshots/gebouwen/14_template_garbage_types.jpg b/user_guide/screenshots/gebouwen/14_template_garbage_types.jpg
new file mode 100644
index 00000000..8b4c736e
Binary files /dev/null and b/user_guide/screenshots/gebouwen/14_template_garbage_types.jpg differ
diff --git a/user_guide/screenshots/gebouwen/15_template_save.jpg b/user_guide/screenshots/gebouwen/15_template_save.jpg
new file mode 100644
index 00000000..6a303c67
Binary files /dev/null and b/user_guide/screenshots/gebouwen/15_template_save.jpg differ
diff --git a/user_guide/screenshots/gebouwen/16_template_edit.jpg b/user_guide/screenshots/gebouwen/16_template_edit.jpg
new file mode 100644
index 00000000..7687ed14
Binary files /dev/null and b/user_guide/screenshots/gebouwen/16_template_edit.jpg differ
diff --git a/user_guide/screenshots/gebouwen/17_plan_template.jpg b/user_guide/screenshots/gebouwen/17_plan_template.jpg
new file mode 100644
index 00000000..bfb23ab2
Binary files /dev/null and b/user_guide/screenshots/gebouwen/17_plan_template.jpg differ
diff --git a/user_guide/screenshots/gebouwen/18_plan_template_select.jpg b/user_guide/screenshots/gebouwen/18_plan_template_select.jpg
new file mode 100644
index 00000000..97e20f86
Binary files /dev/null and b/user_guide/screenshots/gebouwen/18_plan_template_select.jpg differ
diff --git a/user_guide/screenshots/gebouwen/19_plan_template_selected.jpg b/user_guide/screenshots/gebouwen/19_plan_template_selected.jpg
new file mode 100644
index 00000000..0d42ea52
Binary files /dev/null and b/user_guide/screenshots/gebouwen/19_plan_template_selected.jpg differ
diff --git a/user_guide/screenshots/gebouwen/20_plan_template_date.jpg b/user_guide/screenshots/gebouwen/20_plan_template_date.jpg
new file mode 100644
index 00000000..69d82760
Binary files /dev/null and b/user_guide/screenshots/gebouwen/20_plan_template_date.jpg differ
diff --git a/user_guide/screenshots/gebouwen/21_plan_template_save.jpg b/user_guide/screenshots/gebouwen/21_plan_template_save.jpg
new file mode 100644
index 00000000..db08ecfd
Binary files /dev/null and b/user_guide/screenshots/gebouwen/21_plan_template_save.jpg differ
diff --git a/user_guide/screenshots/gebouwen/22_plan_template_planned.jpg b/user_guide/screenshots/gebouwen/22_plan_template_planned.jpg
new file mode 100644
index 00000000..780c7489
Binary files /dev/null and b/user_guide/screenshots/gebouwen/22_plan_template_planned.jpg differ
diff --git a/user_guide/screenshots/gebouwen/23_plan_sched.jpg b/user_guide/screenshots/gebouwen/23_plan_sched.jpg
new file mode 100644
index 00000000..2e9ead37
Binary files /dev/null and b/user_guide/screenshots/gebouwen/23_plan_sched.jpg differ
diff --git a/user_guide/screenshots/gebouwen/24_plan_sched_save.jpg b/user_guide/screenshots/gebouwen/24_plan_sched_save.jpg
new file mode 100644
index 00000000..8907384a
Binary files /dev/null and b/user_guide/screenshots/gebouwen/24_plan_sched_save.jpg differ
diff --git a/user_guide/screenshots/gebouwen/25_link_generate.jpg b/user_guide/screenshots/gebouwen/25_link_generate.jpg
new file mode 100644
index 00000000..e2529029
Binary files /dev/null and b/user_guide/screenshots/gebouwen/25_link_generate.jpg differ
diff --git a/user_guide/screenshots/gebouwen/26_link_copy.jpg b/user_guide/screenshots/gebouwen/26_link_copy.jpg
new file mode 100644
index 00000000..a3aed76f
Binary files /dev/null and b/user_guide/screenshots/gebouwen/26_link_copy.jpg differ
diff --git a/user_guide/screenshots/gebouwen/27_link_page.jpg b/user_guide/screenshots/gebouwen/27_link_page.jpg
new file mode 100644
index 00000000..d2009d0b
Binary files /dev/null and b/user_guide/screenshots/gebouwen/27_link_page.jpg differ
diff --git a/user_guide/screenshots/gebruikers/0_login.jpg b/user_guide/screenshots/gebruikers/0_login.jpg
new file mode 100644
index 00000000..fa0358a7
Binary files /dev/null and b/user_guide/screenshots/gebruikers/0_login.jpg differ
diff --git a/user_guide/screenshots/gebruikers/1_toevoegen.jpg b/user_guide/screenshots/gebruikers/1_toevoegen.jpg
new file mode 100644
index 00000000..2d41c84d
Binary files /dev/null and b/user_guide/screenshots/gebruikers/1_toevoegen.jpg differ
diff --git a/user_guide/screenshots/gebruikers/2_toevoegen2.jpg b/user_guide/screenshots/gebruikers/2_toevoegen2.jpg
new file mode 100644
index 00000000..0aca77fd
Binary files /dev/null and b/user_guide/screenshots/gebruikers/2_toevoegen2.jpg differ
diff --git a/user_guide/screenshots/gebruikers/3_detail.jpg b/user_guide/screenshots/gebruikers/3_detail.jpg
new file mode 100644
index 00000000..e08e43e6
Binary files /dev/null and b/user_guide/screenshots/gebruikers/3_detail.jpg differ
diff --git a/user_guide/screenshots/gebruikers/4_toevoegen_syndicus.jpg b/user_guide/screenshots/gebruikers/4_toevoegen_syndicus.jpg
new file mode 100644
index 00000000..bf6c2e7f
Binary files /dev/null and b/user_guide/screenshots/gebruikers/4_toevoegen_syndicus.jpg differ
diff --git a/user_guide/screenshots/gebruikers/5_toevoegen_student.jpg b/user_guide/screenshots/gebruikers/5_toevoegen_student.jpg
new file mode 100644
index 00000000..05a93486
Binary files /dev/null and b/user_guide/screenshots/gebruikers/5_toevoegen_student.jpg differ
diff --git a/user_guide/screenshots/live_routes/0_page.jpg b/user_guide/screenshots/live_routes/0_page.jpg
new file mode 100644
index 00000000..a50aba97
Binary files /dev/null and b/user_guide/screenshots/live_routes/0_page.jpg differ
diff --git a/user_guide/screenshots/live_routes/detail.jpg b/user_guide/screenshots/live_routes/detail.jpg
new file mode 100644
index 00000000..46eda9e7
Binary files /dev/null and b/user_guide/screenshots/live_routes/detail.jpg differ
diff --git a/user_guide/screenshots/planner/0_page.jpg b/user_guide/screenshots/planner/0_page.jpg
new file mode 100644
index 00000000..62dfcb01
Binary files /dev/null and b/user_guide/screenshots/planner/0_page.jpg differ
diff --git a/user_guide/screenshots/planner/1_regio_select.jpg b/user_guide/screenshots/planner/1_regio_select.jpg
new file mode 100644
index 00000000..5cf4c4d3
Binary files /dev/null and b/user_guide/screenshots/planner/1_regio_select.jpg differ
diff --git a/user_guide/screenshots/planner/2_task_add.jpg b/user_guide/screenshots/planner/2_task_add.jpg
new file mode 100644
index 00000000..eb3752b7
Binary files /dev/null and b/user_guide/screenshots/planner/2_task_add.jpg differ
diff --git a/user_guide/screenshots/planner/3_task_add_save.jpg b/user_guide/screenshots/planner/3_task_add_save.jpg
new file mode 100644
index 00000000..4322de81
Binary files /dev/null and b/user_guide/screenshots/planner/3_task_add_save.jpg differ
diff --git a/user_guide/screenshots/planner/4_task_extend.jpg b/user_guide/screenshots/planner/4_task_extend.jpg
new file mode 100644
index 00000000..0b1bbb60
Binary files /dev/null and b/user_guide/screenshots/planner/4_task_extend.jpg differ
diff --git a/user_guide/screenshots/planner/5_task_remove.jpg b/user_guide/screenshots/planner/5_task_remove.jpg
new file mode 100644
index 00000000..ad2520d7
Binary files /dev/null and b/user_guide/screenshots/planner/5_task_remove.jpg differ
diff --git a/user_guide/screenshots/planner/6_task_drag.jpg b/user_guide/screenshots/planner/6_task_drag.jpg
new file mode 100644
index 00000000..7eb6f38c
Binary files /dev/null and b/user_guide/screenshots/planner/6_task_drag.jpg differ
diff --git a/user_guide/screenshots/routes/0_page.jpg b/user_guide/screenshots/routes/0_page.jpg
new file mode 100644
index 00000000..dc6390fc
Binary files /dev/null and b/user_guide/screenshots/routes/0_page.jpg differ
diff --git a/user_guide/screenshots/routes/1_toevoegen.jpg b/user_guide/screenshots/routes/1_toevoegen.jpg
new file mode 100644
index 00000000..311a787c
Binary files /dev/null and b/user_guide/screenshots/routes/1_toevoegen.jpg differ
diff --git a/user_guide/screenshots/routes/2_toevoegen_save.jpg b/user_guide/screenshots/routes/2_toevoegen_save.jpg
new file mode 100644
index 00000000..be974564
Binary files /dev/null and b/user_guide/screenshots/routes/2_toevoegen_save.jpg differ
diff --git a/user_guide/screenshots/routes/3_detail.jpg b/user_guide/screenshots/routes/3_detail.jpg
new file mode 100644
index 00000000..b49d3071
Binary files /dev/null and b/user_guide/screenshots/routes/3_detail.jpg differ
diff --git a/user_guide/screenshots/routes/4_building_add.jpg b/user_guide/screenshots/routes/4_building_add.jpg
new file mode 100644
index 00000000..2cb615a7
Binary files /dev/null and b/user_guide/screenshots/routes/4_building_add.jpg differ
diff --git a/user_guide/screenshots/routes/5_building_add_dialog.jpg b/user_guide/screenshots/routes/5_building_add_dialog.jpg
new file mode 100644
index 00000000..de7805f6
Binary files /dev/null and b/user_guide/screenshots/routes/5_building_add_dialog.jpg differ
diff --git a/user_guide/screenshots/routes/6_building_drag.jpg b/user_guide/screenshots/routes/6_building_drag.jpg
new file mode 100644
index 00000000..b8207da5
Binary files /dev/null and b/user_guide/screenshots/routes/6_building_drag.jpg differ
diff --git a/user_guide/screenshots/routes/7_building_remove.jpg b/user_guide/screenshots/routes/7_building_remove.jpg
new file mode 100644
index 00000000..cf15c3cf
Binary files /dev/null and b/user_guide/screenshots/routes/7_building_remove.jpg differ