diff --git a/code/code/.vs/MDT5/v15/.suo b/code/code/.vs/MDT5/v15/.suo
index e6abca0..6db5bcd 100644
Binary files a/code/code/.vs/MDT5/v15/.suo and b/code/code/.vs/MDT5/v15/.suo differ
diff --git a/code/code/exercise05/app/css/mobile.css b/code/code/exercise05/app/css/mobile.css
new file mode 100644
index 0000000..4fb2c70
--- /dev/null
+++ b/code/code/exercise05/app/css/mobile.css
@@ -0,0 +1,27 @@
+.btn-style{
+    min-width: 150px;
+    margin-right: 10px;
+    margin-top: 20px;
+}
+
+body{
+    padding-top: 70px;
+}
+
+.menu {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 30px;
+    padding: 10px;
+    color: white;
+    background-color: black;
+}
+
+.img-center{
+    margin-top: 30px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
diff --git a/code/code/exercise05/app/data/patient.json b/code/code/exercise05/app/data/patient.json
new file mode 100644
index 0000000..40e56cd
--- /dev/null
+++ b/code/code/exercise05/app/data/patient.json
@@ -0,0 +1,101 @@
+{
+  "active": true,
+  "address": [
+    {
+      "city": "Amsterdam",
+      "country": "NLD",
+      "line": [ "Van Egmondkade 23" ],
+      "postalCode": "1024 RJ",
+      "use": "home"
+    }
+  ],
+  "birthDate": "1944-11-17",
+  "communication": [
+    {
+      "language": {
+        "coding": [
+          {
+            "code": "nl",
+            "display": "Dutch",
+            "system": "urn:ietf:bcp:47"
+          }
+        ],
+        "text": "Nederlands"
+      },
+      "preferred": true
+    }
+  ],
+  "contact": [
+    {
+      "name": {
+        "family": [ "Abels" ],
+        "given": [ "Sarah" ],
+        "use": "usual"
+      },
+      "relationship": [
+        {
+          "coding": [
+            {
+              "code": "partner",
+              "system": "http://hl7.org/fhir/patient-contact-relationship"
+            }
+          ]
+        }
+      ],
+      "telecom": [
+        {
+          "system": "phone",
+          "use": "mobile",
+          "value": "0690383372"
+        }
+      ]
+    }
+  ],
+  "deceasedBoolean": false,
+  "gender": "male",
+  "id": "f001",
+  "identifier": [
+    {
+      "system": "urn:oid:2.16.840.1.113883.2.4.6.3",
+      "use": "usual",
+      "value": "738472983"
+    }
+  ],
+  "managingOrganization": {
+    "display": "Burgers University Medical Centre",
+    "reference": "Organization/f001"
+  },
+  "maritalStatus": {
+    "coding": [
+      {
+        "code": "M",
+        "display": "Married",
+        "system": "http://hl7.org/fhir/v3/MaritalStatus"
+      }
+    ],
+    "text": "Getrouwd"
+  },
+  "multipleBirthBoolean": true,
+  "name": [
+    {
+      "family": [ "van de Heuvel" ],
+      "given": [ "Pieter" ],
+      "suffix": [ "MSc" ],
+      "use": "usual"
+    }
+  ],
+  "photo": [],
+  "resourceType": "Patient",
+  "telecom": [
+    {
+      "system": "phone",
+      "use": "mobile",
+      "value": "0648352638"
+    },
+    {
+      "system": "email",
+      "use": "home",
+      "value": "p.heuvel@gmail.com"
+    }
+  ]
+}
diff --git a/code/code/exercise05/app/img/bootstrap.png b/code/code/exercise05/app/img/bootstrap.png
new file mode 100644
index 0000000..827be8b
Binary files /dev/null and b/code/code/exercise05/app/img/bootstrap.png differ
diff --git a/code/code/exercise05/app/img/css3.png b/code/code/exercise05/app/img/css3.png
new file mode 100644
index 0000000..df97055
Binary files /dev/null and b/code/code/exercise05/app/img/css3.png differ
diff --git a/code/code/exercise05/app/img/html5.png b/code/code/exercise05/app/img/html5.png
new file mode 100644
index 0000000..1d2c265
Binary files /dev/null and b/code/code/exercise05/app/img/html5.png differ
diff --git a/code/code/exercise05/app/img/jQuery.png b/code/code/exercise05/app/img/jQuery.png
new file mode 100644
index 0000000..ae8e551
Binary files /dev/null and b/code/code/exercise05/app/img/jQuery.png differ
diff --git a/code/code/exercise05/app/img/js.png b/code/code/exercise05/app/img/js.png
new file mode 100644
index 0000000..d9f240f
Binary files /dev/null and b/code/code/exercise05/app/img/js.png differ
diff --git a/code/code/exercise05/app/img/react.png b/code/code/exercise05/app/img/react.png
new file mode 100644
index 0000000..1333eb9
Binary files /dev/null and b/code/code/exercise05/app/img/react.png differ
diff --git a/code/code/exercise05/app/index.html b/code/code/exercise05/app/index.html
new file mode 100644
index 0000000..261e0e3
--- /dev/null
+++ b/code/code/exercise05/app/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title></title>
+
+    <!--css-->
+    <link rel="stylesheet" href="css/mobile.css">
+    <link rel="stylesheet" href="../../lib/bootstrap.min.css">
+ 
+
+
+</head>
+<body>
+    <div id="navigation"></div>
+    <div class="container">
+        <div id="content"></div>
+    </div>
+
+
+
+    <!--scripts-->
+    <script src="../../lib//jquery-2.2.4.min.js"></script>
+    <script src="../../lib/es6-shim.min.js"></script>
+    <script src="../../lib/bootstrap.min.js"></script>
+    <script src="scripts/app.js"></script>
+    <script src="scripts/landung.js"></script>
+    <script src="scripts/Patient.js"></script>
+    <script src="scripts/fhirService.js"></script>
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/code/code/exercise05/app/scripts/Patient.js b/code/code/exercise05/app/scripts/Patient.js
new file mode 100644
index 0000000..464f4f6
--- /dev/null
+++ b/code/code/exercise05/app/scripts/Patient.js
@@ -0,0 +1,46 @@
+function Patient(fhirpatient) {
+    var patient = fhirpatient;
+
+    return {
+        "lastname": () => {
+            if (patient.name) {
+                var nameElement = patient.name.find((element) => {
+                    return (element.use == "usual");
+                });
+                if (nameElement)
+                    return nameElement.family;
+            }
+            return undefined;
+        },
+        "gender": () => {
+            if(patient.gender)
+                return patient.gender;
+            return undefined;
+            
+        },
+        "date": () => {
+            if(patient.birthDate)
+                return patient.birthDate;
+        },
+        "home": () => {
+            if (patient.address) {
+                var addressElement = patient.address.find((element) => {
+                    return (element.use == "home");
+                });
+                if (addressElement)
+                    return (addressElement.postalCode + " " + addressElement.city);
+            }
+            return undefined;
+        },
+        "country": () => {
+            if (patient.address) {
+                var addressElement = patient.address.find((element) => {
+                    return (element.use == "home");
+                });
+                if (addressElement)
+                    return (addressElement.country);
+            }
+            return undefined;
+        },
+    }
+}
\ No newline at end of file
diff --git a/code/code/exercise05/app/scripts/app.js b/code/code/exercise05/app/scripts/app.js
new file mode 100644
index 0000000..871f5be
--- /dev/null
+++ b/code/code/exercise05/app/scripts/app.js
@@ -0,0 +1,3 @@
+function loadTemplates() {
    $('#navigation').load('templates/NavbarTemplate.html');
+    $('#content').load('templates/AboutTemplate.html');
+}

$(document).ready(loadTemplates);
\ No newline at end of file
diff --git a/code/code/exercise05/app/scripts/fhirService.js b/code/code/exercise05/app/scripts/fhirService.js
new file mode 100644
index 0000000..345e015
--- /dev/null
+++ b/code/code/exercise05/app/scripts/fhirService.js
@@ -0,0 +1,5 @@
+var patient = {};
+
+$.getJSON("data/patient.json", (data) => {
+    patient = Patient(data);
+});
\ No newline at end of file
diff --git a/code/code/exercise05/app/scripts/landung.js b/code/code/exercise05/app/scripts/landung.js
new file mode 100644
index 0000000..a1cabfb
--- /dev/null
+++ b/code/code/exercise05/app/scripts/landung.js
@@ -0,0 +1,77 @@
+function simulation() {
+    var v;
+    var s;
+    var fuel;
+    var schub = false;
+
+    setStartValues(50000, -1000, 10000);
+
+    function switchon() {
+        schub = true;
+        update();
+        checkGameOver();
+    }
+
+    function switchoff() {
+        schub = false;
+        update();
+        checkGameOver();
+    }
+
+    function a() {
+        if (schub == false || fuel <= 0)
+            return -1.63;
+        else {
+            fuel = fuel - 100;
+            return -1.63 + 12;
+        }
+    }
+
+    function showValues() {
+        $("#height").html("Höhe: " + s + " m");
+        $("#speed").html("Geschwindigkeit: " + v + " m/s");
+        $("#fuel").html("Teibstoffvorrat: " + fuel + " l");
+    }
+
+
+    function update() {
+        v = v + a();
+        s = s + v;
+        showValues();
+    }
+
+    function checkGameOver() {
+        if (s <= 0) {
+            if (v < -10) 
+                alert("Fehlschlag");
+            else 
+                alert("Erfolgreich");
+          
+            setStartValues(50000, -1000, 10000);
+            showValues();
+        }
+    }
+
+    function setStartValues(height, velocity, Newfuel) {
+        v = velocity;
+        s = height;
+        fuel = Newfuel;
+    }
+
+    $('#content').html("<h2>Mondlandung</h2>");
+    $("#content").append("<div class='menu'>Hauptmenü</div>")
+    $("#content").append("<div id='height'>Höhe: </div>");
+    $("#content").append("<div id='speed'>Geschwindikgiet: </div>");
+    $("#content").append("<div id='fuel'>Treibstoffvorrat: </div>");
+    $("#content").append("<button id='energy' class='btn-style'>Triebwerk an</button>");
+    $("#content").append("<button id='no-energy' class='btn-style'>Triebwerk aus</button>");
+
+
+
+    $("#energy").click(switchon);
+    $("#no-energy").click(switchoff);
+
+    showValues();
+}
+
+
diff --git a/code/code/exercise05/app/templates/AboutTemplate.html b/code/code/exercise05/app/templates/AboutTemplate.html
new file mode 100644
index 0000000..d44ecb3
--- /dev/null
+++ b/code/code/exercise05/app/templates/AboutTemplate.html
@@ -0,0 +1,45 @@
+<div class="row">
+    <h2 class="col-xs-12 page-header">
+        Patientenverwaltung
+        <small>Ein Demoprojekt</small>
+    </h2>
+</div>
+<div class="row">
+    <div class="col-lg-4 col-sm-6 col-xs-12 text-center">
+        <img class="img-circle img-responsive img-center"
+             src="img/html5.png" alt="HTML5 LOGO" />
+        <h4>HTML5</h4>
+        <p>Strukturierte Inhalte für den Browser</p>
+    </div>
+    <div class="col-lg-4 col-sm-6 col-xs-12 text-center">
+        <img class="img-circle img-responsive img-center"
+             src="img/css3.png" alt="CSS3 LOGO" />
+        <h4>CSS3</h4>
+        <p>Flexibles Design und Layout</p>
+    </div>
+    <div class="col-lg-4 col-sm-6 col-xs-12 text-center">
+        <img class="img-circle img-responsive img-center"
+             src="img/bootstrap.png" alt="Bootstrap" />
+        <h4>Bootstrap3</h4>
+        <p>Responsive und schick</p>
+    </div>
+
+    <div class="col-lg-4 col-sm-6 col-xs-12 text-center">
+        <img class="img-circle img-responsive img-center"
+             src="img/jQuery.png" alt="JQuery LOGO" />
+        <h4>JQuery</h4>
+        <p>Zugriff auf das DOM</p>
+    </div>
+    <div class="col-lg-4 col-sm-6 col-xs-12 text-center">
+        <img class="img-circle img-responsive img-center"
+             src="img/react.png" alt="REACT LOGO" />
+        <h4>REACT</h4>
+        <p>Building User Interfaces</p>
+    </div>
+    <div class="col-lg-4 col-sm-6 col-xs-12 text-center">
+        <img class="img-circle img-responsive img-center"
+             src="img/js.png" alt="JavaScript" />
+        <h4>JavaScript</h4>
+        <p>Die Programmiersprache im Browser</p>
+    </div>
+</div>
diff --git a/code/code/exercise05/app/templates/NavbarTemplate.html b/code/code/exercise05/app/templates/NavbarTemplate.html
new file mode 100644
index 0000000..aaa8e06
--- /dev/null
+++ b/code/code/exercise05/app/templates/NavbarTemplate.html
@@ -0,0 +1,22 @@
+
+    <nav class="navbar navbar-inverse navbar-fixed-top">
+        <div class="container">
+            <div class="navbar-header">
+                <span class="navbar-brand" href="#" onclick="simulation()">
+                    Patientenverwaltung
+                </span>
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+            </div>
+            <div id="menu" class="collapse navbar-collapse">
+                <ul class="nav navbar-nav">
+                    <li><a href="#" onclick="$('#content').load('templates/PatientDetailsTemplate.html')"</a>Patient</li>
+                    <li><a href="#" onclick="$('#content').load('templates/AboutTemplate.html')">Info</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
diff --git a/code/code/exercise05/app/templates/PatientDetailsTemplate.html b/code/code/exercise05/app/templates/PatientDetailsTemplate.html
new file mode 100644
index 0000000..8ae330e
--- /dev/null
+++ b/code/code/exercise05/app/templates/PatientDetailsTemplate.html
@@ -0,0 +1,45 @@
+<div class="row">
+    <h2 class="col-xs-12 page-header">
+        Patientenverwaltung
+        <span id="patient-name">Patientenname</span>
+    </h2>
+    <script type="text/javascript">
+        $("#patient-name").html(patient.lastname())
+    </script>
+</div>
+<div class="row">
+    <h6 class="col-xs-6">
+        Geschlecht
+    </h6>
+    <h6 class="col-xs-6" id="patient-gender"></h6>
+    <script type="text/javascript">
+        $("#patient-gender").html(patient.gender())
+    </script>
+</div>
+<div class="row">
+    <h6 class="col-xs-6">
+        Geburtsdatum
+    </h6>
+    <h6 class="col-xs-6" id="patient-date">Geburtsdatum</h6>
+    <script type="text/javascript">
+        $("#patient-date").html(patient.date())
+    </script>
+</div>
+<div class="row">
+    <h6 class="col-xs-6">
+        Wohnort:
+    </h6>
+    <h6 class="col-xs-6" id="patient-home">Patientenname</h6>
+    <script type="text/javascript">
+        $("#patient-home").html(patient.home())
+    </script>
+</div>
+<div class="row">
+    <h6 class="col-xs-6">
+        Land:
+    </h6>
+    <h6 class="col-xs-6" id="patient-country">Land:</h6>
+    <script type="text/javascript">
+        $("#patient-country").html(patient.country())
+    </script>
+</div>
\ No newline at end of file