diff --git a/README.md b/README.md
index b430448fa85203493c0923367aaf81b13d8635fe..1bbe6965da37047b1cd67d284d8522146e2cc04e 100644
--- a/README.md
+++ b/README.md
@@ -1,51 +1,48 @@
 # MDSD Example: Transportation Network - Sources
 
-## Exercise 01 - Metamodel
+## Exercise 06 - Model Validation and Testing
 
-This repository includes the resources of the first task of the MDSD Example "Transportation Network".
+This repository includes the resources of the 6. task of the MDSD Example "Transportation Network".
 
 ## Task Description
 
-The main task of the exercise is to create a **metamodel for the domain of transportation networks**.
+The exercise provides an introduction to **Model-to-Text Transformation**. M2T transformations are often used to generate code fragments of different programming languages. Other usages are the generation of documentation, control-flow sequences, or the simple transfer of models into another technical space (like the *XML* space).
 
-To realize that, we use the *Eclipse Modeling Framework* to create the metamodel and afterwards prepare **multiple networks** to test the metamodel. These also double as test models for following exercises.
+This exercise focuses on **template-based code generation** utilizing the already known *Epsilon*[^epsilon] language family. In detail we are using the *Epsilon Generation Language (EGL)* and the *EGL Co-Ordination Language (EGX)* to generate a *HTML* documentation from our *transportation network* models.
 
-To do so, complete the following subtasks:
+[^epsilon]: [https://www.eclipse.org/epsilon/](https://www.eclipse.org/epsilon/)
 
-1. Create an `Ecore Modeling Project` for your *transportation network metamodel* in your *Eclipse Modeling Tool* instance.
+1) At first, you need to prepare an Epsilon EGL environment:
 
-    - `New...`➔`Other...`➔`Ecore Modeling Project`
-    - Name the project as you like
-    - The most important information is the `main package name` (second page) which will be the name of your metamodel and the file name extension of future models.
+    1. Install `Epsilon` from the `Eclipse Marketplace`, if needed.
 
-2. Model your metamodel in the `*.ecore` file. Use the editor that should open on project creation. See the **description of the transportation network** for details.
-  
-    - You only need to use the `Class`, `Attribut`, `Enumeration` `Reference`, `Composition`, and `Supertype` meta-elements for this example.
-    - Try to design the `Class`es connected by `Composition`s like a tree (containment hierarchy).The root of the tree should be an `Class` that represence your model itself ( for example `Transportation Network`). All classes except a root class should have (at least) one incoming composition. Use `Reference`s for non-containment relationships.
-    - Try too specify the properties of the metamodel elements as clear as possible in the property explorer below the diagram (The explorer shows the properties of the element selected in the diagram).
+    2. Open an *Eclipse* workspace with your *transportation network* metamodel projects or import them into a new workspace. `Run` one metamodel project `as` an `Eclipse Application` to register the metamodel in *Eclipse*. **In the new *Eclipse* instance** you can start using *Epsilon*.
 
-3. Create the `Model`, `Edit`, and `Editor` implementation code through the `*.genmodel` file (open the file and right-click on the root element). This will generate the metamodel implementation and an editor plugin for *Eclipse*.
-4. Right-click on the model project and choose `Run As...` and then `Eclipse Application`. A new *runtime* *Eclipse* instance will open.
-5. There, create a new general `Project` with the `New...` option and a model `*.[your metamodel name]` with `New...`➔`Other...`➔`search for your metamodel name` (Please choose the metamodel's root element as `Model Object` in the following wizard). You should now be able to model your state machine with a *simple tree editor* by opening the file.
+    3. *Epsilon* does not need specific projects to work. Create a new general `Project` in your workspace and create a new `*.egx` file and as many `.egl` files as needed.
 
-**The domain you need to metamodel is described as following:**
+    4. You can now declare rules that define which model element is transformed to text by which `.egl` template in the `*.egx` file, and define the templates in the `.egl` files (see Task 2 for details). To familiarize yourself with *EGL/EGX* and *Epsilon*, you can use the documentation[^epsilonDokuEGL][^epsilonDokuEGX][^epsilonDokuEOL], examples[^epsilonExample], or the playground[^epsilonPlayground].
 
-The first part of the domain describes the transportation network itself:
+    5. To run the transformation, `right-click` on the `*.egx` file and choose `Run As -> Run Configuration`. In the next window, create a new `EGL Generator` configuration, select your `*.egx` file under `Source`, and add your `source` model under `Models` (as `EMF Models`, `source` is an example name, the names of the models should be the same as the ones used in your *EGL/EGX* files). After that, you can always re-run the configuration and start the validation by clicking on `Run` in the menu.
 
-> A `Transportation Network` must have an `identifier` to refer to it in the database of the users. It consists of multiple `Locations` and `Road Networks`. A location can have a `name` and can include multiple `Points Of Interest`. Each point of interest (POI) can include a `name`. There are different types of POIs:
->
-> - A `Rest Stop` were drivers can take their mandetory breaks.
-> - A `Gas Station` which could serve one or more`Fuel Types` like `Petrol`, `Diesel`, and `Electricity`.
-> - `Warehouses` that could be `Company Warehouses` (owned by the user) or `Customer Warehouses` (Here the `customer name` should be included)
-> - Last, there can be `Other` POIs which have a general `type`.
->
-> Road networks must have an `identifier` and a `target` and `source` location. They can be marked as `directed` to allow mono- or bidirectional usage. They also can include the `length` of the network for later fuel calculations. Each network includes multiple, but at least one, `Road`s. Each road must be `identifiable` and also include their `length`, so that later the network length could be calculated.
+[^epsilonDokuEGL]: [https://eclipse.dev/epsilon/doc/egl/](https://eclipse.dev/epsilon/doc/egl/)
+[^epsilonDokuEGX]: [https://eclipse.dev/epsilon/doc/egx/](https://eclipse.dev/epsilon/doc/egx/)
+[^epsilonDokuEOL]: [https://www.eclipse.org/epsilon/doc/eol/](https://www.eclipse.org/epsilon/doc/eol/)
+[^epsilonExample]: [https://www.eclipse.org/epsilon/examples/\#epsilon-generation-language](https://www.eclipse.org/epsilon/examples/\#epsilon-generation-language)
+[^epsilonPlayground]: [https://eclipse.dev/epsilon/playground/](https://eclipse.dev/epsilon/playground/)
 
-The second part of the metamodel includes information for the usage of the transportation network:
+2. The goal of this exercise is to generate an *HTML* documentation for the transportation network model.
 
-> The transportation network also includes `Route`s that can be planed for transportation requests. Each route has an `identifier`and can have a `start` location, `end` location and/or a `list of road networks` the route includes. To execute the routes the transportation network also includes `Vehicle`s. These can be free to use (are in the `car park` of the company) or already included in a route. One route is always driven by one vehicle. The vehicle itself must have an `identifier`, `model`, `fuel capacity` and a `fuel type`. They can include a `location` to help their management for routes in case they are free to use.
+    1. Generate a overview page including all model elements, their most important details, and links to detail pages.
+       1. Write a rule in the `.egx` script connecting the `Transportation Network` with an *overview page* template.
+       2. Write the EGL *overview page* template. Use slots to import the needed data from your model and use control flow slots to duplicate and exclude text blocks.
+
+    2. Generate a detail page for the most important model elements in our transportation network metamodel.
+       1. Write for each important model element type at least one rule in the `.egx` script connecting it with an *detail page* template. Make sure that the name of the output file, matches the links in the overview page.
+       2. Write EGL *detail page* templates for each important model element type. Use slots to import the needed data from your model and use control flow slots to duplicate and exclude text blocks.
+
+**Hint:** Read about the `@template` operations in the documentation. With these you can prepare reusable, type specific, and polymorphic functions, that return formatted text blocks.
 
 ## How To Run the Base Solution
 
-1. `Import` the `stgroup.mdsd.transportation_network.*` projects in your *Eclipse* workspace.
-2. In the runtime *Eclipse* instance `import` the `model_examples` project to inspect and modify the example *transportation network* models.
+1. `Import` the `stgroup.mdsd.transportation_network.metamodel.*` projects in your *Eclipse* workspace.
+2. In the runtime *Eclipse* instance `import` the `model_examples` and the `stgroup.mdsd.transportation_network.textgeneration` project and run the epsilon engine like it was described above.
diff --git a/model_examples/saxony.transportation_network b/model_examples/saxony.transportation_network
index bfce3809907559867d10dd80ce27a8e71323ff2e..0056882927ecf46e0218f4e9060736f5bc7a6e23 100644
--- a/model_examples/saxony.transportation_network
+++ b/model_examples/saxony.transportation_network
@@ -1,17 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <transportation_network:TransportationNetwork xmi:version="2.0" xmlns:xmi="http://www.omg.org/XMI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:transportation_network="http://www.stgroup.org/transportation_network" identifier="saxony">
-  <roadnetworks identifier="DG" length="95.0" source="//@locations.0" target="//@locations.3">
-    <roads identifier="A4" length="95.0"/>
+  <roadnetworks identifier="DG/1" length="95.0" source="//@locations.0" target="//@locations.3">
+    <roads identifier="A4-E" length="95.0"/>
   </roadnetworks>
-  <roadnetworks identifier="DL" length="102.0" source="//@locations.0" target="//@locations.2">
-    <roads identifier="A4" length="20.0"/>
+  <roadnetworks identifier="DL/3" length="20.0" source="//@locations.0" target="//@locations.4">
+    <roads identifier="A4-W" length="20.0"/>
+  </roadnetworks>
+  <roadnetworks identifier="DL/2" length="67.0" source="//@locations.4" target="//@locations.5">
     <roads identifier="A14" length="67.0"/>
+  </roadnetworks>
+  <roadnetworks identifier="DL/1" length="15.0" source="//@locations.5" target="//@locations.2">
     <roads identifier="A38" length="15.0"/>
   </roadnetworks>
-  <roadnetworks identifier="DC" length="64.0" source="//@locations.0" target="//@locations.1">
-    <roads identifier="A4" length="64.0"/>
+  <roadnetworks identifier="DC/1" length="44.0" source="//@locations.4" target="//@locations.1">
+    <roads identifier="A4-W" length="44.0"/>
   </roadnetworks>
-  <roadnetworks identifier="LC" length="69.0" source="//@locations.2" target="//@locations.1">
+  <roadnetworks identifier="LC/1" length="69.0" source="//@locations.2" target="//@locations.1">
     <roads identifier="A72" length="69.0"/>
   </roadnetworks>
   <locations name="Dresden">
@@ -38,7 +42,9 @@
       <fueltypes>DIESEL</fueltypes>
     </pois>
   </locations>
-  <routes identifier="R1" networkList="//@roadnetworks.1 //@roadnetworks.3" start="//@locations.0" end="//@locations.1">
+  <locations/>
+  <locations/>
+  <routes identifier="R1" networkList="//@roadnetworks.3 //@roadnetworks.2 //@roadnetworks.1 //@roadnetworks.5" start="//@locations.0" end="//@locations.1">
     <vehicle identifier="V03" location="//@locations.0" model="eTruck" fuelCapacity="150.0"/>
   </routes>
   <carPark identifier="V01" location="//@locations.0" model="eTruck" fuelCapacity="150.0"/>
diff --git a/stgroup.mdsd.transportation_network.textgeneration/.project b/stgroup.mdsd.transportation_network.textgeneration/.project
new file mode 100644
index 0000000000000000000000000000000000000000..4066227662a737a490f2ead65490d0202a547f8b
--- /dev/null
+++ b/stgroup.mdsd.transportation_network.textgeneration/.project
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>stgroup.mdsd.transportation_network.textgeneration</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+	</buildSpec>
+	<natures>
+	</natures>
+</projectDescription>
diff --git a/stgroup.mdsd.transportation_network.textgeneration/gen/documentation/overview.html b/stgroup.mdsd.transportation_network.textgeneration/gen/documentation/overview.html
new file mode 100644
index 0000000000000000000000000000000000000000..9ebae44ac47149bba8b68f656687b39ecb87ed2d
--- /dev/null
+++ b/stgroup.mdsd.transportation_network.textgeneration/gen/documentation/overview.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Network: Saxony</title>
+  		<meta charset="utf-8">
+  		<meta name="viewport" content="width=device-width, initial-scale=1">
+  		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"/>
+  		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+  		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
+	</head>
+	<body>
+		<header>
+			<div class="navbar navbar-dark bg-dark box-shadow p-4">
+			 	<h1 class="text-white"> Documentation </h1>
+			 	<h2 class="text-white"> Transportation Network : Saxony </h2>
+		    </div>
+	    </header>
+
+		<div class="container">
+			<h2> Locations </h2>
+			<h4> Main-Locations </h2>
+			<p> The Network includes 4 named locations.</p>
+			<div class="row">
+				<div class="col-md-2"> 
+				<div class="card mb-2 shadow rounded">
+					<div class="card-body">
+    					<h5 class="card-title">Dresden</h5>
+    					<p class="card-text"> This Location contains 3 Points of Interest. </p>
+    					<a href="./detail/Location_Dresden.html" class="card-link">Detail Page</a>
+  					</div>
+				</div>
+				</div>
+				<div class="col-md-2"> 
+				<div class="card mb-2 shadow rounded">
+					<div class="card-body">
+    					<h5 class="card-title">Chemnitz</h5>
+    					<p class="card-text"> This Location contains 2 Points of Interest. </p>
+    					<a href="./detail/Location_Chemnitz.html" class="card-link">Detail Page</a>
+  					</div>
+				</div>
+				</div>
+				<div class="col-md-2"> 
+				<div class="card mb-2 shadow rounded">
+					<div class="card-body">
+    					<h5 class="card-title">Leipzig</h5>
+    					<p class="card-text"> This Location contains 2 Points of Interest. </p>
+    					<a href="./detail/Location_Leipzig.html" class="card-link">Detail Page</a>
+  					</div>
+				</div>
+				</div>
+				<div class="col-md-2"> 
+				<div class="card mb-2 shadow rounded">
+					<div class="card-body">
+    					<h5 class="card-title">Görlitz</h5>
+    					<p class="card-text"> This Location contains 2 Points of Interest. </p>
+    					<a href="./detail/Location_Görlitz.html" class="card-link">Detail Page</a>
+  					</div>
+				</div>
+				</div>
+			</div>
+			
+			<h4> Sub-Locations </h2>
+			<p> The Network includes 2 anonym locations.</p>
+		</div>
+		
+		<hr class="solid">
+		
+		<div class="container">
+			<h2> RoadNetwork </h2>
+			<p> The Network includes 6 road networks.</p>
+			<div class="row">
+				<div class="col-md-2"> 
+					<div class="card mb-2 shadow rounded">
+						<div class="card-body">
+				    		<h5 class="card-title">DG/1 (95.0km)</h5>
+				    		<p class="card-text"> The Road Network includes 1 roads </p>
+				    		<a href="./detail/RoadNetwork_DG/1.html" class="card-link">Detail Page</a>
+				  		</div>
+					</div>
+				</div>
+				<div class="col-md-2"> 
+					<div class="card mb-2 shadow rounded">
+						<div class="card-body">
+				    		<h5 class="card-title">DL/3 (20.0km)</h5>
+				    		<p class="card-text"> The Road Network includes 1 roads </p>
+				    		<a href="./detail/RoadNetwork_DL/3.html" class="card-link">Detail Page</a>
+				  		</div>
+					</div>
+				</div>
+				<div class="col-md-2"> 
+					<div class="card mb-2 shadow rounded">
+						<div class="card-body">
+				    		<h5 class="card-title">DL/2 (67.0km)</h5>
+				    		<p class="card-text"> The Road Network includes 1 roads </p>
+				    		<a href="./detail/RoadNetwork_DL/2.html" class="card-link">Detail Page</a>
+				  		</div>
+					</div>
+				</div>
+				<div class="col-md-2"> 
+					<div class="card mb-2 shadow rounded">
+						<div class="card-body">
+				    		<h5 class="card-title">DL/1 (15.0km)</h5>
+				    		<p class="card-text"> The Road Network includes 1 roads </p>
+				    		<a href="./detail/RoadNetwork_DL/1.html" class="card-link">Detail Page</a>
+				  		</div>
+					</div>
+				</div>
+				<div class="col-md-2"> 
+					<div class="card mb-2 shadow rounded">
+						<div class="card-body">
+				    		<h5 class="card-title">DC/1 (44.0km)</h5>
+				    		<p class="card-text"> The Road Network includes 1 roads </p>
+				    		<a href="./detail/RoadNetwork_DC/1.html" class="card-link">Detail Page</a>
+				  		</div>
+					</div>
+				</div>
+				<div class="col-md-2"> 
+					<div class="card mb-2 shadow rounded">
+						<div class="card-body">
+				    		<h5 class="card-title">LC/1 (69.0km)</h5>
+				    		<p class="card-text"> The Road Network includes 1 roads </p>
+				    		<a href="./detail/RoadNetwork_LC/1.html" class="card-link">Detail Page</a>
+				  		</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<hr class="solid">
+
+		<div class="container">
+			<h2> Routes </h2>
+			<p> The Network includes 1 routes.</p>
+			<div class="row">
+				<div class="col-md-2"> 
+					<div class="card mb-2 shadow rounded">
+						<div class="card-body">
+				    		<h5 class="card-title">R1</h5>
+				    		<p class="card-text"> The Route includes 4 road networks. </p>
+				    		<a href="./detail/Route_R1.html" class="card-link">Detail Page</a>
+				  		</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		
+		<hr class="solid">
+		
+		<div class="container">
+			<h2> Vehicles </h2>
+			<p> The Network includes 3 vehicles.</p>
+			<div class="row">
+				<div class="col-md-3"> 
+					<div class="card mb-3 shadow rounded">
+						<div class="card-body">
+				    		<h5 class="card-title">V03 : ELECTRICITY (150.0km)</h5>
+				    		<p class="card-text">Location: R1<br>
+				    		                     Car Type: eTruck </p>
+				    		<a href="./detail/Vehicle_V03.html" class="card-link">Detail Page</a>
+				  		</div>
+					</div>
+				</div>
+				<div class="col-md-3"> 
+					<div class="card mb-3 shadow rounded">
+						<div class="card-body">
+				    		<h5 class="card-title">V01 : ELECTRICITY (150.0km)</h5>
+				    		<p class="card-text">Location: Car Park<br>
+				    		                     Car Type: eTruck </p>
+				    		<a href="./detail/Vehicle_V01.html" class="card-link">Detail Page</a>
+				  		</div>
+					</div>
+				</div>
+				<div class="col-md-3"> 
+					<div class="card mb-3 shadow rounded">
+						<div class="card-body">
+				    		<h5 class="card-title">V02 : ELECTRICITY (150.0km)</h5>
+				    		<p class="card-text">Location: Car Park<br>
+				    		                     Car Type: eTruck </p>
+				    		<a href="./detail/Vehicle_V02.html" class="card-link">Detail Page</a>
+				  		</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/stgroup.mdsd.transportation_network.textgeneration/generation.egx b/stgroup.mdsd.transportation_network.textgeneration/generation.egx
new file mode 100644
index 0000000000000000000000000000000000000000..1b0a9d0e911505eaf5acb48c4cd5882541112ce9
--- /dev/null
+++ b/stgroup.mdsd.transportation_network.textgeneration/generation.egx
@@ -0,0 +1,22 @@
+pre{
+	"Text Generation Example".println();
+	"-------------------------------------".println();
+	"Start of generation...".println();
+}
+post{
+	"... End of generation.".println();
+}
+
+
+
+rule ModelToOverview
+	transform transportationNetwork : source!TransportationNetwork {
+
+	guard: true
+
+	template : "./templates/t_overview.egl"
+
+	parameters : Map{}
+
+	target : "./gen/documentation/" + "overview.html"
+}
\ No newline at end of file
diff --git a/stgroup.mdsd.transportation_network.textgeneration/scripts/asCard.egl b/stgroup.mdsd.transportation_network.textgeneration/scripts/asCard.egl
new file mode 100644
index 0000000000000000000000000000000000000000..53348be7949070fa577a075d8ae596937fe6d8a3
--- /dev/null
+++ b/stgroup.mdsd.transportation_network.textgeneration/scripts/asCard.egl
@@ -0,0 +1,67 @@
+
+
+[% @template 
+operation source!NamedElement asCard(){%]
+<div class="col-md-2"> 
+	<div class="card mb-2 shadow rounded">
+		<div class="card-body">
+    		<h5 class="card-title">[%=self.name%]</h5>
+    		<p class="card-text"> The Element is a [%=self.type.name%], but no further information is given.</p>
+    		<a href="./detail/[%=self.type.name%]_[%=self.name%].html" class="card-link">Detail Page</a>
+  		</div>
+	</div>
+</div>
+[%}%]
+
+[% @template 
+operation source!IdentifiableElement asCard(){%]
+<div class="col-md-2"> 
+	<div class="card mb-2 shadow rounded">
+		<div class="card-body">
+    		<h5 class="card-title">[%=self.identifier%]</h5>
+    		<p class="card-text"> The Element is a [%=self.type.name%], but no further information is given.</p>
+    		<a href="./detail/[%=self.type.name%]_[%=self.identifier%].html" class="card-link">Detail Page</a>
+  		</div>
+	</div>
+</div>
+[%}%]
+
+[% @template 
+operation source!RoadNetwork asCard(){%]
+<div class="col-md-2"> 
+	<div class="card mb-2 shadow rounded">
+		<div class="card-body">
+    		<h5 class="card-title">[%=self.identifier%] ([%=self.length%]km)</h5>
+    		<p class="card-text"> The Road Network includes [%=self.roads.size()%] roads </p>
+    		<a href="./detail/[%=self.type.name%]_[%=self.identifier%].html" class="card-link">Detail Page</a>
+  		</div>
+	</div>
+</div>
+[%}%]
+
+[% @template 
+operation source!Route asCard(){%]
+<div class="col-md-2"> 
+	<div class="card mb-2 shadow rounded">
+		<div class="card-body">
+    		<h5 class="card-title">[%=self.identifier%]</h5>
+    		<p class="card-text"> The Route includes [%=self.networkList.size()%] road networks. </p>
+    		<a href="./detail/[%=self.type.name%]_[%=self.identifier%].html" class="card-link">Detail Page</a>
+  		</div>
+	</div>
+</div>
+[%}%]
+
+[% @template 
+operation source!Vehicle asCard(){%]
+<div class="col-md-3"> 
+	<div class="card mb-3 shadow rounded">
+		<div class="card-body">
+    		<h5 class="card-title">[%=self.identifier%] : [%=self.fuelType%] ([%=self.fuelCapacity%]km)</h5>
+    		<p class="card-text">Location: [%if(self.eContainer().isTypeOf(source!TransportationNetwork)){%]Car Park[%}else{%][%=self.eContainer().identifier%][%}%]<br>
+    		                     Car Type: [%=self.getModel()%] </p>
+    		<a href="./detail/[%=self.type.name%]_[%=self.identifier%].html" class="card-link">Detail Page</a>
+  		</div>
+	</div>
+</div>
+[%}%]
\ No newline at end of file
diff --git a/stgroup.mdsd.transportation_network.textgeneration/templates/t_overview.egl b/stgroup.mdsd.transportation_network.textgeneration/templates/t_overview.egl
new file mode 100644
index 0000000000000000000000000000000000000000..d6ecea2c076aca29936d68f713e884d9eb210c37
--- /dev/null
+++ b/stgroup.mdsd.transportation_network.textgeneration/templates/t_overview.egl
@@ -0,0 +1,82 @@
+[%import "../scripts/asCard.egl";%]
+[%"Print overview page".println();%]
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Network: [%=transportationNetwork.identifier.firstToUpperCase()%]</title>
+  		<meta charset="utf-8">
+  		<meta name="viewport" content="width=device-width, initial-scale=1">
+  		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"/>
+  		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+  		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
+	</head>
+	<body>
+		<header>
+			<div class="navbar navbar-dark bg-dark box-shadow p-4">
+			 	<h1 class="text-white"> Documentation </h1>
+			 	<h2 class="text-white"> Transportation Network : [%=transportationNetwork.identifier.firstToUpperCase()%] </h2>
+		    </div>
+	    </header>
+
+		<div class="container">
+			<h2> Locations </h2>
+			<h4> Main-Locations </h2>
+			<p> The Network includes [%=transportationNetwork.locations.select(l|l.name <> null).size()%] named locations.</p>
+			<div class="row">
+				[%for (location in transportationNetwork.locations) {%]
+					[%if (location.name <> null) {%]
+				<div class="col-md-2"> 
+				<div class="card mb-2 shadow rounded">
+					<div class="card-body">
+    					<h5 class="card-title">[%=location.name%]</h5>
+    					<p class="card-text"> This Location contains [%=location.pois.size()%] Points of Interest. </p>
+    					<a href="./detail/[%=location.type.name%]_[%=location.name%].html" class="card-link">Detail Page</a>
+  					</div>
+				</div>
+				</div>
+					[%}%]
+				[%}%]
+			</div>
+			
+			<h4> Sub-Locations </h2>
+			<p> The Network includes [%=transportationNetwork.locations.select(l|l.name == null).size()%] anonym locations.</p>
+		</div>
+		
+		<hr class="solid">
+		
+		<div class="container">
+			<h2> RoadNetwork </h2>
+			<p> The Network includes [%=transportationNetwork.roadnetworks.size()%] road networks.</p>
+			<div class="row">
+				[%for (network in transportationNetwork.roadnetworks) {%]
+				[*Parts of the template can be moved to type specific template methods.*]
+				[%=network.asCard()%]
+				[%}%]
+			</div>
+		</div>
+
+		<hr class="solid">
+
+		<div class="container">
+			<h2> Routes </h2>
+			<p> The Network includes [%=transportationNetwork.routes.size()%] routes.</p>
+			<div class="row">
+				[%for (route in transportationNetwork.routes) {%]
+				[%=route.asCard()%]
+				[%}%]
+			</div>
+		</div>
+		
+		<hr class="solid">
+		
+		<div class="container">
+			<h2> Vehicles </h2>
+			<p> The Network includes [%=source!Vehicle.all().size()%] vehicles.</p>
+			<div class="row">
+				[%for (vehicle in source!Vehicle.all()) {%]
+				[%=vehicle.asCard()%]
+				[%}%]
+			</div>
+		</div>
+	</body>
+</html>
\ No newline at end of file