diff --git a/files/9940/catalog.json b/files/9940/catalog.json
index 6655eb1..25904ae 100644
--- a/files/9940/catalog.json
+++ b/files/9940/catalog.json
@@ -1,39 +1 @@
-{
-        "@context": {
-            "dcat": "https://www.w3.org/ns/dcat#",
-            "dcterms": "http://purl.org/dc/terms/",
-            "foaf": "http://xmlns.com/foaf/0.1/"
-        },
-        "@type": "dcat:Catalog",
-        "dcterms:license": [{
-            "@id": "https://creativecommons.org/publicdomain/zero/1.0/"
-        }],
-        "dcat:dataset": [{
-                "@type": "dcat:Dataset",
-                "dcat:keyword": "http://schema.org/Service",
-                "dcat:distribution": [{
-                  "@type": "dcat:Distribution",
-                  "dcat:accessUrl": "http://smartflanders.ilabt.imec.be/graph/service-example.json",
-                  "dcat:mediaType": "text/html"
-                }]
-            },
-            {
-                "@type": "dcat:Dataset",
-                "dcat:keyword": "http://purl.org/vocab/cpsv#PublicService",
-                "dcat:distribution": [{
-                  "@type": "dcat:Distribution",
-                  "dcat:accessUrl": "http://smartflanders.ilabt.imec.be/graph/service-example.json",
-                  "dcat:mediaType": "text/html"
-                }]
-            },
-            {
-                "@type": "dcat:Dataset",
-                "dcat:keyword": "http://data.vlaanderen.be/ns/gebouw#Gebouw",
-                "dcat:distribution": [{
-                  "@type": "dcat:Distribution",
-                  "dcat:accessUrl": "http://smartflanders.ilabt.imec.be/graph/9940/12568861.json",
-                  "dcat:mediaType": "text/html"
-                }]
-            }
-        ]
-    }
\ No newline at end of file
+{"@context":{"dcat":"https://www.w3.org/ns/dcat#","dcterms":"http://purl.org/dc/terms/","foaf":"http://xmlns.com/foaf/0.1/"},"@type":"dcat:Catalog","dcterms:license":[{"@id":"https://creativecommons.org/publicdomain/zero/1.0/"}],"dcat:dataset":[{"@type":"dcat:Dataset","dcat:keyword":"http://schema.org/Service","dcat:distribution":[{"@type":"dcat:Distribution","dcat:accessUrl":"http://smartflanders.ilabt.imec.be/graph/service-example.json","dcat:mediaType":"text/html"}]},{"@type":"dcat:Dataset","dcat:keyword":"http://purl.org/vocab/cpsv#PublicService","dcat:distribution":[{"@type":"dcat:Distribution","dcat:accessUrl":"http://smartflanders.ilabt.imec.be/graph/service-example.json","dcat:mediaType":"text/html"}]},{"@type":"dcat:Dataset","dcat:keyword":"http://data.vlaanderen.be/ns/gebouw#Gebouw","dcat:distribution":[{"@type":"dcat:Distribution","dcat:accessUrl":"http://smartflanders.ilabt.imec.be/graph/9940/12568861.json","dcat:mediaType":"text/html"}]},{"@type":"dcat:Dataset","dcat:keyword":"http://data.vlaanderen.be/ns/gebouw#Gebouw","dcat:distribution":[{"@type":"dcat:Distribution","dcat:accessUrl":"http://smartflanders.ilabt.imec.be/graph/12568861.json","dcat:mediaType":"text/html"}]}]}
\ No newline at end of file
diff --git a/index.js b/index.js
index ca41ca8..269d474 100644
--- a/index.js
+++ b/index.js
@@ -1,37 +1,40 @@
-const express = require('express');
+const express = require("express");
 const app = express();
-const body = require('body-parser');
-const morgan = require('morgan');
-const cors = require('cors');
-const routes = require('./routes');
-const path = require('path');
-const pug = require('pug');
+const body = require("body-parser");
+const morgan = require("morgan");
+const cors = require("cors");
+const routes = require("./routes");
+const path = require("path");
+const pug = require("pug");
 
 // --- Middlewere
 app.use(body.urlencoded({ extended: false }));
-app.use(morgan('dev'));
+app.use(morgan("dev"));
 app.use(cors())
 
-app.use(express.static('public'));
-app.use('/graph', express.static('files'));
-app.get('/', (req, res) => {
-  res.render('index');
+app.use(express.static("public"));
+app.get("/graph", (req, res) => {
+  res.sendFile(__dirname + "/files/master-catalog.json");
+})
+app.use("/graph", express.static('files'));
+app.get("/", (req, res) => {
+  res.render("index");
 })
 // --- Routes
-app.use('/', routes)
+app.use("/", routes)
 
 // --- Enable PUG template
-app.set('views', path.join(__dirname, 'templates'));
-app.set('view engine', 'pug');
+app.set("views", path.join(__dirname, 'templates'));
+app.set("view engine", 'pug');
 
 //
 app.use(function(err, req, res, next) {
     if(!err.message) err.message = "General error"
-    res.status(500).send({status:500, message: err.message, type:'internal'});
+    res.status(500).send({status:500, message: err.message, type:"internal"});
   })
 
   /**
  * Server listener
  * @param {number} - Port number
  */
-app.listen(3000, () => console.log('SmartFlanders is running on port 3000'))
+app.listen(3000, () => console.log("SmartFlanders is running on port 3000"))
diff --git a/public/css/styles.css b/public/css/styles.css
index cbfe6cd..a6ed97a 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1,27 +1,36 @@
 /*===========================
-  Variables
+ Variables
 ============================ */
 /*===========================
-  General
+ General
 ============================ */
 body {
   background-color: #f3f1f3;
   color: #29264c;
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
   font-size: 18px;
   line-height: 1.75;
   margin: 0;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale; }
+  -moz-osx-font-smoothing: grayscale;
+}
 
 h1, h2 {
-  color: white; }
+  color: white;
+}
 
 h3 {
   font-size: 25px;
-  padding-bottom: 15px;
-  text-align: center; }
+  margin-top: 25px;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+h4 {
+  text-align: center;
+  margin: 0px 0px 45px;
+}
 
 .button {
   background-color: #ffd400;
@@ -32,10 +41,12 @@ h3 {
   letter-spacing: 1px;
   line-height: 1.5;
   margin: 20px auto;
-  padding: 6px 30px; }
+  padding: 6px 30px;
+}
 
 .button:hover {
-  background-color: #fee513; }
+  background-color: #fee513;
+}
 
 .form {
   font-size: 20px;
@@ -43,64 +54,82 @@ h3 {
   margin: 0 15%;
   overflow: hidden;
   padding: 16px 0 32px;
-  position: relative; }
+  position: relative;
+}
 
 .label {
   display: block;
-  line-height: 1.125; }
+  line-height: 1.125;
+}
 
 .input-text {
   border: 1px solid #29264c;
   border-radius: 5px;
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
   font-size: 18px;
   margin: 10px 0px 20px;
   padding: 7px;
   transition: 150ms border-color linear;
-  width: 100%; }
+  width: 100%;
+}
 
 select {
   border: 1px solid #29264c;
   border-radius: 5px;
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
   font-size: 18px;
   margin: 10px 0px 20px;
   padding: 7px;
-  width: 100%; }
+  width: 100%;
+}
 
 a {
   color: white;
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 /*===========================
-  Header
+ Header
 ============================ */
 header {
   background-color: #4844A3;
   height: 350px;
   margin: 0;
-  width: 100%; }
-  header .header {
-    color: white;
-    margin: 0px 12.5%;
-    padding-top: 30px;
-    width: 75%; }
-    header .header h1 {
-      font-size: 25px;
-      margin: 7px 80px; }
-    header .header h2 {
-      font-size: 35px;
-      font-weight: bold;
-      letter-spacing: 2px;
-      margin-top: 75px; }
-    header .header img {
-      float: left;
-      max-width: 5%; }
-    header .header a {
-      float: right; }
+  width: 100%;
+}
+header .header {
+  color: white;
+  margin: 0px 12.5%;
+  padding-top: 30px;
+  width: 75%;
+}
+header .header h1 {
+  font-size: 25px;
+  margin: 7px 80px;
+}
+header .header h2 {
+  font-size: 35px;
+  font-weight: bold;
+  letter-spacing: 2px;
+  margin-top: 75px;
+}
+header .header img {
+  float: left;
+  max-width: 5%;
+}
+header .header .nav {
+  float: right;
+}
+header .header .nav a {
+  float: left;
+  padding: 15px;
+}
+header .header .nav a:hover {
+  color: #ffd400;
+}
 
 /*===========================
-  Content
+ Content
 ============================ */
 .content {
   background-color: #f3f1f3;
@@ -110,56 +139,76 @@ header {
     Info
   ============================ */
   /*===========================
-    Snippet
-  ============================ */ }
-  .content .intro {
-    background-color: white;
-    border-radius: 15px;
-    box-shadow: 9px 9px 9px 0 rgba(38, 36, 79, 0.07);
-    height: 250px;
-    margin: -100px 20%;
-    text-align: center;
-    width: 60%; }
-    .content .intro p {
-      font-size: 20px;
-      margin: 0px auto;
-      padding: 50px 0px;
-      text-align: center;
-      width: 75%; }
-  .content .container {
-    float: left;
-    margin: 5% 25%;
-    width: 50%; }
-  .content .info {
-    margin: 5% 25%;
-    width: 50%; }
-    .content .info p {
-      display: inline;
-      margin-left: 15%; }
-    .content .info #building {
-      display: inline;
-      margin-left: 7%; }
-    .content .info form {
-      padding-top: 0px; }
-      .content .info form h3 {
-        margin-top: 50px; }
-      .content .info form h4 {
-        margin-top: 50px; }
-      .content .info form p {
-        margin: 0px; }
-      .content .info form label {
-        padding: 10px 0px; }
-      .content .info form .openinghours {
-        margin-top: 5px; }
-      .content .info form input[type="time"] {
-        border: 1px solid #29264c;
-        border-radius: 5px;
-        font-family: "Open Sans", sans-serif;
-        font-size: 14px;
-        margin: 0px 10px 5px;
-        padding: 4px 10px; }
-  .content pre.snippet {
-    background-color: white;
-    margin: 0px auto 30px;
-    padding: 20px;
-    width: 100%; }
+    Openinghours
+  ============================ */
+}
+.content .intro {
+  background-color: white;
+  border-radius: 15px;
+  box-shadow: 9px 9px 9px 0 rgba(38, 36, 79, 0.07);
+  height: 250px;
+  margin: -100px 20%;
+  text-align: center;
+  width: 60%;
+}
+.content .intro p {
+  font-size: 20px;
+  margin: 0px auto;
+  padding: 50px 0px;
+  text-align: center;
+  width: 75%;
+}
+.content .container {
+  float: left;
+  margin: 0px 25% 5%;
+  width: 50%;
+}
+.content .info {
+  margin: 5% 25%;
+  width: 50%;
+}
+.content .info p {
+  display: inline;
+  margin-left: 15%;
+}
+.content .info form {
+  padding-top: 0px;
+}
+.content .info form p {
+  margin: 0px;
+}
+.content .info form label {
+  padding: 10px 0px;
+}
+.content .openinghours {
+  margin-top: 5px;
+}
+.content .openinghours .weekdays {
+  float: left;
+}
+.content .openinghours .weekdays p {
+  margin: 0px 5px;
+}
+.content .openinghours .hours {
+  float: left;
+}
+.content .openinghours .hours .day input[type=time] {
+  border: 1px solid #29264c;
+  border-radius: 5px;
+  display: inline;
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  margin: 0px 15px;
+  padding: 4px 10px;
+}
+.content .openinghours .hours .day p {
+  display: inline;
+}
+.content pre.snippet {
+  background-color: white;
+  margin: 0px auto 30px;
+  padding: 20px;
+  width: 100%;
+}
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/public/css/styles.css.map b/public/css/styles.css.map
index 0d1fb85..03c5c63 100644
--- a/public/css/styles.css.map
+++ b/public/css/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../templates/css/styles.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAUA;AAAA;AAAA;AAGA;EACE,kBAPK;EAQL,OAPK;EAQL;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE,OApBM;;;AAuBR;EACE;EACA;EACA;;;AAGF;EACE,kBAhCO;EAiCP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE,kBA3Ca;;;AA8Cf;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE,OAjFM;EAkFN;;;AAGF;AAAA;AAAA;AAGA;EACE,kBA5FO;EA6FP;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKN;AAAA;AAAA;AAGA;EACE,kBA9HK;EA+HL;EACA;AA0BA;AAAA;AAAA;AAmDA;AAAA;AAAA;;AA3EA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAMF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAQN;EACE;EACA;EACA;EACA","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../templates/css/styles.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAUA;AAAA;AAAA;AAGA;EACC,kBAPM;EAQN,OAPM;EAQN;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC,OApBO;;;AAuBR;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC,kBAtCQ;EAuCR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC,kBAjDc;;;AAoDf;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC,OAvFO;EAwFP;;;AAGD;AAAA;AAAA;AAGA;EACC,kBAlGQ;EAmGR;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAEA;EACE;EACA;;AAGF;EACE,OAtIE;;;AA4IT;AAAA;AAAA;AAGA;EACC,kBA7IM;EA8IN;EACA;AA0BA;AAAA;AAAA;AA2BA;AAAA;AAAA;;AAnDA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAMF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAUN;EACE;;AAEA;EACE;;AACA;EACE;;AAIJ;EACE;;AAGE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAMR;EACE;EACA;EACA;EACA","file":"styles.css"}
\ No newline at end of file
diff --git a/routes.js b/routes.js
index d1bd21b..1945c05 100644
--- a/routes.js
+++ b/routes.js
@@ -13,12 +13,29 @@ router.get('/', async (req, res, next) => {
 });
 
 // get search with address
-router.get('/zoeken', async (req, res, next) => {
-    res.render('search');
+router.get('/adres', async (req, res, next) => {
+    res.render('address');
+});
+
+// get search with postcode
+router.get('/postcode', async (req, res, next) => {
+    res.render('services');
+});
+
+router.post('/services', async (req, res, next) => {
+    try {
+        res.status(200);
+        console.log(req);
+        // let response = await transformerController.getAdres(req.body);
+        res.render('index');
+    } catch (error) {
+        console.error("TransformerController returned an error");
+        next(error);
+    }
 });
 
 // post search building with address
-router.post('/zoeken', async (req, res, next) => {
+router.post('/gebouwen', async (req, res, next) => {
     try {
         res.status(200);
         let response = await transformerController.getAdres(req.body);
@@ -42,22 +59,23 @@ router.post('/gebouwunits', async (req, res, next) => {
     }
 });
 
-router.post('/gebouw', async (req, res, next) => {
+router.post('/snippet', async (req, res, next) => {
     try {
         res.status(200)
         let response = await transformerController.getGebouwId(req.body)
-        res.render('building', {
+        res.render('snippet', {
             building : JSON.stringify(response, null, 4)
         })
     } catch (error) {
 
     }
 })
+
 // Openinghours page is still to be made 
 router.post('/openingHours', (req, res, next) => {
     try {
-          let response = openingHoursController.getOpeningHours(params)
-          //res.render('')
+        let response = openingHoursController.getOpeningHours(params)
+        //res.render('')
     } catch (error) {
         console.error("OpeningHoursController")
     }
diff --git a/templates/search.pug b/templates/address.pug
similarity index 92%
rename from templates/search.pug
rename to templates/address.pug
index d7bd003..d0e7b4b 100644
--- a/templates/search.pug
+++ b/templates/address.pug
@@ -9,7 +9,7 @@ html
     .content
       .container
         h3 Gebouw zoeken via adres
-        form(action='zoeken', method="POST" id="search-submit")
+        form(action='gebouwen', method="POST" id="search-submit")
           label.label(for='postcode') Postcode:
           input.input-text(id='postcode'  name='postcode' type='number' required min='1000' max='9992') 
           label.label(for='street') Straat:
diff --git a/templates/building-units.pug b/templates/building-units.pug
index d1416b3..a3eda7c 100644
--- a/templates/building-units.pug
+++ b/templates/building-units.pug
@@ -10,10 +10,10 @@ html
       .container
         h3 Voeg informatie toe aan gebouw
         label.label Gevonden gebouweenheden binnen:
-        form(action='/gebouw', method="POST", id="gebouweenheden")
+        form(action='/snippet', method="POST", id="gebouweenheden")
           select(name="gebouwEenheidId" form="gebouweenheden")
             each unit in gebouweenheden 
               option(value=(unit.identificator.objectId)) #{unit.detail} 
-          button.button(type='submit') Bekijk de gebouw-eenheden van dit gebouw
+          button.button(type='submit') Genereer de JSON-LD snippet
 script(src="https://code.jquery.com/jquery-3.2.1.slim.min.js", integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN", crossorigin="anonymous")
 script(src='./app.js')
\ No newline at end of file
diff --git a/templates/css/styles.scss b/templates/css/styles.scss
index 979e39d..5b55fce 100644
--- a/templates/css/styles.scss
+++ b/templates/css/styles.scss
@@ -1,5 +1,5 @@
 /*===========================
-  Variables
+ Variables
 ============================ */
 $purple: #4844A3;
 $yellow: #ffd400;
@@ -9,214 +9,236 @@ $grey: #f3f1f3;
 $text: #29264c;
 
 /*===========================
-  General
+ General
 ============================ */
 body {
-  background-color: $grey;
-  color: $text;
-  font-family: 'Open Sans', sans-serif;
-  font-size: 18px;
-  line-height: 1.75;
-  margin: 0;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+ background-color: $grey;
+ color: $text;
+ font-family: 'Open Sans', sans-serif;
+ font-size: 18px;
+ line-height: 1.75;
+ margin: 0;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
 }
 
 h1, h2 {
-  color: $white;
+ color: $white;
 }
 
 h3 {
-  font-size: 25px;
-  padding-bottom: 15px;
-  text-align: center;
+ font-size: 25px;
+ margin-top: 25px;
+ margin-bottom: 15px;
+ text-align: center;
+}
+
+h4 {
+ text-align: center;
+ margin: 0px 0px 45px;
 }
 
 .button {
-  background-color: $yellow;
-  border: 0;
-  border-radius: 25px;
-  color: white;
-  font-size: 20px;
-  letter-spacing: 1px;
-  line-height: 1.5;
-  margin: 20px auto;
-  padding: 6px 30px;
+ background-color: $yellow;
+ border: 0;
+ border-radius: 25px;
+ color: white;
+ font-size: 20px;
+ letter-spacing: 1px;
+ line-height: 1.5;
+ margin: 20px auto;
+ padding: 6px 30px;
 }
 
 .button:hover {
-  background-color: $light-yellow;
+ background-color: $light-yellow;
 }
 
 .form {
-  font-size: 20px;
-  display: block;
-  margin: 0 15%;
-  overflow: hidden;
-  padding: 16px 0 32px;
-  position: relative;
+ font-size: 20px;
+ display: block;
+ margin: 0 15%;
+ overflow: hidden;
+ padding: 16px 0 32px;
+ position: relative;
 }
 
 .label {
-  display: block;
-  line-height: 1.125;
+ display: block;
+ line-height: 1.125;
 }
 
 .input-text {
-  border: 1px solid $text;
-  border-radius: 5px;
-  font-family: 'Open Sans', sans-serif;
-  font-size: 18px;
-  margin: 10px 0px 20px;
-  padding: 7px;
-  transition: 150ms border-color linear;
-  width: 100%;
+ border: 1px solid $text;
+ border-radius: 5px;
+ font-family: 'Open Sans', sans-serif;
+ font-size: 18px;
+ margin: 10px 0px 20px;
+ padding: 7px;
+ transition: 150ms border-color linear;
+ width: 100%;
 }
 
 select {
-  border: 1px solid $text;
-  border-radius: 5px;
-  font-family: 'Open Sans', sans-serif;
-  font-size: 18px;
-  margin: 10px 0px 20px;
-  padding: 7px;
-  width: 100%;
+ border: 1px solid $text;
+ border-radius: 5px;
+ font-family: 'Open Sans', sans-serif;
+ font-size: 18px;
+ margin: 10px 0px 20px;
+ padding: 7px;
+ width: 100%;
 }
 
 a {
-  color: $white;
-  text-decoration: none;
+ color: $white;
+ text-decoration: none;
 }
 
 /*===========================
-  Header
+ Header
 ============================ */
 header {
-  background-color: $purple;
-  height: 350px;
-  margin: 0;
-  width: 100%;
-
-  .header {
-    color: white;
-    margin: 0px 12.5%;
-    padding-top: 30px;
-    width: 75%;
-
-    h1 {
-      font-size: 25px;
-      margin: 7px 80px;
-    }
-
-    h2 {
-      font-size: 35px;
-      font-weight: bold;
-      letter-spacing: 2px;
-      margin-top: 75px;
-    }
-
-    img {
-      float: left;
-      max-width: 5%;
-    }
-
-    a {
-      float: right;
-    }
-  }
+ background-color: $purple;
+ height: 350px;
+ margin: 0;
+ width: 100%;
+
+ .header {
+   color: white;
+   margin: 0px 12.5%;
+   padding-top: 30px;
+   width: 75%;
+
+   h1 {
+     font-size: 25px;
+     margin: 7px 80px;
+   }
+
+   h2 {
+     font-size: 35px;
+     font-weight: bold;
+     letter-spacing: 2px;
+     margin-top: 75px;
+   }
+
+   img {
+     float: left;
+     max-width: 5%;
+   }
+
+   .nav {
+     float: right;
+     
+     a {
+       float: left;
+       padding: 15px;
+     }
+
+     a:hover {
+       color: $yellow;
+     }
+   }
+ }
 }
 
 /*===========================
-  Content
+ Content
 ============================ */
 .content {
-  background-color: $grey;
-  float: left;
-  width: 100%;
-
-  .intro {
-    background-color: white;
-    border-radius: 15px;
-    box-shadow: 9px 9px 9px 0 rgba(38,36,79,.07);
-    height: 250px;
-    margin: -100px 20%;
-    text-align: center;
-    width: 60%;
-
-    p {
-      font-size: 20px;
-      margin: 0px auto;
-      padding: 50px 0px;
-      text-align: center;
-      width: 75%;
-    }
-  }  
-
-  .container {
-    float: left;
-    margin: 5% 25%;
-    width: 50%;
-  }
-
-  /*===========================
-    Info
-  ============================ */
-  .info {
-    margin: 5% 25%;
-    width: 50%;
-
-    p {
-      display: inline;
-      margin-left: 15%;
-    }
-
-    #building {
-      display: inline;
-      margin-left: 7%;
-    }
-
-    form {
-      padding-top: 0px;
-
-      h3 {
-        margin-top: 50px;
-      }
-
-      h4 {
-        margin-top: 50px;
-      }
-
-      p {
-        margin: 0px;
-      }
-
-      label {
-        padding: 10px 0px;
-      }
-
-      .openinghours {
-        margin-top: 5px;
-      }
-
-      input[type="time"] {
-        border: 1px solid #29264c;
-        border-radius: 5px;
-        font-family: "Open Sans", sans-serif;
-        font-size: 14px;
-        margin: 0px 10px 5px;
-        padding: 4px 10px;
-      }
-    }
-  }
-
-  /*===========================
-    Snippet
-  ============================ */
-  pre.snippet {
-    background-color: white;
-    margin: 0px auto 30px;
-    padding: 20px;
-    width: 100%; 
-  }   
-}
\ No newline at end of file
+ background-color: $grey;
+ float: left;
+ width: 100%;
+
+ .intro {
+   background-color: white;
+   border-radius: 15px;
+   box-shadow: 9px 9px 9px 0 rgba(38,36,79,.07);
+   height: 250px;
+   margin: -100px 20%;
+   text-align: center;
+   width: 60%;
+
+   p {
+     font-size: 20px;
+     margin: 0px auto;
+     padding: 50px 0px;
+     text-align: center;
+     width: 75%;
+   }
+ }  
+
+ .container {
+   float: left;
+   margin: 0px 25% 5%;
+   width: 50%;
+ }
+
+ /*===========================
+   Info
+ ============================ */
+ .info {
+   margin: 5% 25%;
+   width: 50%;
+
+   p {
+     display: inline;
+     margin-left: 15%;
+   }
+
+   form {
+     padding-top: 0px;
+
+     p {
+       margin: 0px;
+     }
+
+     label {
+       padding: 10px 0px;
+     }
+
+     
+   }
+ }
+
+ /*===========================
+   Openinghours
+ ============================ */
+ .openinghours {
+   margin-top: 5px;
+
+   .weekdays {
+     float: left;
+     p {
+       margin: 0px 5px;
+     }
+   }
+
+   .hours {
+     float: left;
+
+     .day {
+       input[type="time"] {
+         border: 1px solid #29264c;
+         border-radius: 5px;
+         display: inline;
+         font-family: "Open Sans", sans-serif;
+         font-size: 14px;
+         margin: 0px 15px;
+         padding: 4px 10px;
+       }
+
+       p {
+         display: inline;
+       }
+     }
+   }
+ }
+
+ pre.snippet {
+   background-color: white;
+   margin: 0px auto 30px;
+   padding: 20px;
+   width: 100%; 
+ }   
+} 
\ No newline at end of file
diff --git a/templates/index.pug b/templates/index.pug
index 24af511..98e496a 100644
--- a/templates/index.pug
+++ b/templates/index.pug
@@ -9,5 +9,5 @@ html
     .content
       .intro
         p Zoek een gebouw in uw stad en voeg de informatie over dit gebouw toe aan de datacatalogus.
-        a.button(href='zoeken') Zoek gebouw
+        a.button(href='adres') Zoek gebouw
 script(src='https://code.jquery.com/jquery-3.2.1.slim.min.js', integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN', crossorigin='anonymous')
diff --git a/templates/info.pug b/templates/info.pug
index 3d3c39c..760125a 100644
--- a/templates/info.pug
+++ b/templates/info.pug
@@ -14,17 +14,21 @@ html
           select#category(form='addProperty', name='category')
             option(value='bezienswaardigheid') Bezienswaardigheid
             option(value='bibliotheek') Bibliotheek
+            option(value='cafe') Café
             option(value='cinema') Cinema
             option(value='cultureelcentrum') Cultureel centrum
             option(value='gemeentehuis') Gemeentehuis
+            option(value='ontspanning') Ontspanning
+            option(value='restaurant') Restaurant
             option(value='speeltuin') Speeltuin
             option(value='sporthal') Sporthal
+            option(value='winkel') Winkel
             option(value='zwembad') Zwembad
             
           label.label Type dienst:
           select#type(form='addProperty', name='type')
-            option(value='bezienswaardigheid') Bezienswaardigheid
-            option(value='bibliotheek') Bibliotheek
+            option(value='bezienswaardigheid') ?
+            option(value='bibliotheek') ?
           
           label.label Algemene openingsuren:
           .openinghours
diff --git a/templates/partials/header.pug b/templates/partials/header.pug
index ed05211..1c22711 100644
--- a/templates/partials/header.pug
+++ b/templates/partials/header.pug
@@ -1,5 +1,8 @@
 .header
   img(src='https://raw.githubusercontent.com/oSoc18/SmartFlanders-blog/master/images/logo-smartflanders.png')
-  a(href="/transform/") Home 
+  .nav
+    a(href="/") Home 
+    a(href="/adres") Gebouw 
+    a(href="/postcode") Service 
   h1 Smart Flanders
-  h2 Gebouwenregister SmartFlander, mooie slogan
+  h2 Gebouwenregister SmartFlander
diff --git a/templates/postcode.pug b/templates/postcode.pug
new file mode 100644
index 0000000..88e5b80
--- /dev/null
+++ b/templates/postcode.pug
@@ -0,0 +1,17 @@
+doctype html
+html
+  head
+    include partials/head
+
+  body
+    header
+      include partials/header
+    .content
+      .container
+        h3 Service toevoegen aan een gebouw
+        h4 Geef een postcode in om alle gebouwen in deze gemeente te bekijken
+        form(action='gebouwen', method="POST")
+          label.label(for='postcode') Postcode:
+          input.input-text(id='postcode'  name='postcode' type='number' required min='1000' max='9992') 
+          button.button(type='submit') Bekijk gebouwen
+script(src='https://code.jquery.com/jquery-3.2.1.slim.min.js', integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN', crossorigin='anonymous')
diff --git a/templates/services.pug b/templates/services.pug
new file mode 100644
index 0000000..4ec487e
--- /dev/null
+++ b/templates/services.pug
@@ -0,0 +1,90 @@
+doctype html
+html
+  head
+    include partials/head
+  body
+    header
+      include partials/header
+    .content
+      .container
+        h3 Voeg informatie toe aan deze service
+        form(action='services', method="POST")
+            label.label(for='name') Naam:
+            input.input-text(id='name'  name='name' type='text' required) 
+            label.label(for='description') Beschrijving:
+            input.input-text(id='description'  name='description' type='text' required) 
+            label.label(for='producttype') Producttype:
+            input.input-text(id='producttype'  name='producttype' type='text' required) 
+            label.label(for='email') Emailadres:
+            input.input-text(id='email'  name='email' type='text' required)
+            label.label(for='phone') Telefoonnummer:
+            input.input-text(id='phone'  name='phone' type='number' required)          
+            label.label Openingsuren:
+            .openinghours
+                .weekdays
+                    p Maandag van:
+                    p Dindsdag van:
+                    p Woensdag van:
+                    p Donderdag van:
+                    p Vrijdag van:
+                    p Zaterdag van:
+                    p Zondag van:
+                .hours
+                    .day
+                        input(type='time' id='mo-start-am' name='mo-start-am') 
+                        p tot 
+                        input(type='time' id='mo-end-am' name='mo-end-am')
+                        p en van 
+                        input(type='time' id='mo-start-pm' name='mo-start-pm')
+                        p tot 
+                        input(type='time' id='mo-end-pm' name='mo-end-pm')
+                    .day
+                        input(type='time' id='tu-start-am' name='tu-start-am')
+                        p tot 
+                        input(type='time' id='tu-end-am' name='tu-end-am')
+                        p en van 
+                        input(type='time' id='tu-start-pm' name='tu-start-pm')
+                        p tot 
+                        input(type='time' id='tu-end-pm' name='tu-end-pm')
+                    .day
+                        input(type='time' id='we-start-am' name='we-start-am')
+                        p tot 
+                        input(type='time' id='we-end-am' name='we-end-am')
+                        p en van 
+                        input(type='time' id='we-start-pm' name='we-start-pm')
+                        p tot 
+                        input(type='time' id='we-end-pm' name='we-end-pm')
+                    .day
+                        input(type='time' id='th-start-am' name='th-start-am')
+                        p tot 
+                        input(type='time' id='th-end-am' name='th-end-am')
+                        p en van 
+                        input(type='time' id='th-start-pm' name='th-start-pm')
+                        p tot 
+                        input(type='time' id='th-end-pm' name='th-end-pm')
+                    .day
+                        input(type='time' id='fr-start-am' name='fr-start-am')
+                        p tot 
+                        input(type='time' id='fr-end-am' name='fr-end-am')
+                        p en van 
+                        input(type='time' id='fr-start-pm' name='fr-start-pm')
+                        p tot 
+                        input(type='time' id='fr-end-pm' name='fr-end-pm')
+                    .day
+                        input(type='time' id='sa-start-am' name='sa-start-am')
+                        p tot 
+                        input(type='time' id='sa-end-am' name='sa-end-am')
+                        p en van 
+                        input(type='time' id='sa-start-pm' name='sa-start-pm')
+                        p tot 
+                        input(type='time' id='sa-end-pm' name='sa-end-pm')
+                    .day
+                        input(type='time' id='su-start-am' name='su-start-am')
+                        p tot 
+                        input(type='time' id='su-end-am' name='su-end-am')
+                        p en van 
+                        input(type='time' id='su-start-pm' name='su-start-pm')
+                        p tot 
+                        input(type='time' id='su-end-pm' name='su-end-pm')  
+            button.button(type='submit') Voeg informatie toe
+script(src='https://code.jquery.com/jquery-3.2.1.slim.min.js', integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN', crossorigin='anonymous')
diff --git a/templates/building.pug b/templates/snippet.pug
similarity index 100%
rename from templates/building.pug
rename to templates/snippet.pug