diff --git a/app.js b/app.js
index e39069f..365cbbf 100644
--- a/app.js
+++ b/app.js
@@ -2,18 +2,19 @@
 var express = require('express');
 var less = require('express-less');
 var markdown = require('express-markdown');
-
+var fs = require('fs');
 var app = express();
 
 //Set up jade rendering engine.
 app.set('view engine', 'jade');
 app.disable('view cache');
 app.set('views', __dirname + '/resources/jade');
+app.locals.articles = fs.readdirSync(__dirname + '/markdown');
 
 //Set up all static directories for getting resources.
-app.use('/css', less(__dirname + '/resources/less'));
+app.use('/css', less(__dirname + '/resources/less', {debug : true}));
 // app.use('/js', express.static(__dirname + '/resources/js'));
-app.use('/other', express.static(__dirname + '/resources/other'));
+app.use('/images', express.static(__dirname + '/resources/images'));
 //Setup markdown middleware.
 app.use(markdown({directory: __dirname + '/markdown', view: 'article'}));
 
diff --git a/markdown/eli5.md b/markdown/eli5.md
index d3d7ae3..e439955 100644
--- a/markdown/eli5.md
+++ b/markdown/eli5.md
@@ -1,3 +1,10 @@
-#ELI5
+##ELI5
 
-Als je naar de titel van deze pagina kijkt dan denk je zeker, wat is dit nou weer voor een rare term. Vast voor iets gerelateerd aan programeren of zo iets moeilijks. Gelukkig voor jou, de lezer, is dat het omgekeerde. ELI5 staat voor "Explain Like I'm 5", dat wil zeggen, leg me dit uit alsof ik vijf jaar oud ben. Dit is om ervoor te zorgen dat mijn uitleg voor iedereen begrijpbaar zou moeten zijn. Ik geef van dezelfde hoofdstukken ook nog uitleg op een gemiddeld en een wat hoger niveau, dus mocht je geintereseerd zijn dan is er meer en wat diepgaandere informatie beschikbaar. Aan het begin en aan het eind van elke pagina zijn er dus meerdere knoppen aanwezig voor het verwisselen van moeilijkheid. [Momenteel nog niet beschikbaar]
+---
+Als je naar de titel van deze pagina kijkt dan denk je zeker, wat is dit nou weer voor een rare term. Vast voor iets gerelateerd aan programeren of zo iets moeilijks. Gelukkig voor jou, de lezer, is dat het omgekeerde. ELI5 staat voor "Explain Like I'm 5", dat wil zeggen, leg me dit uit alsof ik vijf jaar oud ben. Dit is om ervoor te zorgen dat mijn uitleg voor iedereen begrijpbaar zou moeten zijn. Ik geef van dezelfde hoofdstukken ook nog uitleg op een gemiddeld en een wat hoger niveau, dus mocht je geintereseerd zijn dan is er meer en wat diepgaandere informatie beschikbaar. Aan het begin en aan het eind van elke pagina zijn er dus meerdere knoppen aanwezig voor het verwisselen van moeilijkheid. [Momenteel nog niet beschikbaar/word later toegevoegd].
+
+Bij het maken van de nieuwe versie van werkmanrooster heb ik vooral gedacht aan het schrijven van code die door mensen leesbaar is, en niet alleen door machines.
+
+> Any fool can write code that a computer can understand. Good programmers write code that humans can understand. -Martin Fowler
+
+Dit allemaal bij elkaar is een poging om alles zo duidelijk mogelijk uit te leggen.
diff --git a/markdown/home.md b/markdown/home.md
index 604a9ed..318da6d 100644
--- a/markdown/home.md
+++ b/markdown/home.md
@@ -1,8 +1,23 @@
-#Hoe werkt Werkmanrooster?
-######Door Bram van der Veen
-
+##Hoe werkt Werkmanrooster?
+---
 Welkom op de index van mijn profielwerkstuk. Vanuit hier kun je alle verschillende hoofdstukken en deelvragen bekijken en nalezen. Ik zou echt wel voorstellen om de artikelen te lezen op chronologische volgorde, want op die manier zou het het makkelijkste te lezen zijn.
 
-####Huidige artikelen
-  * [Rapport van onderzoek en nieuwe versie werkmanrooster (26 Juni)](/rapportonderzoek.md)
-  * [Inleiding](/inleiding.md)
+---
+
+Ik ben in de laatste paar weken druk bezig geweest met het maken van het nieuwe Werkmanrooster.
+Ik wil dit nu opnieuw gemaakte project gaan onderzoeken en aan de hand daarvan mensen uit leggen hoe de website achter de schermen werkt. (onderzoek)
+Ik ben hier aan toegekomen in de PWS week maar heb niet een geschreven deel waarvan er al uitleg is, ik heb het voorwerk gedaan om mijn uitleg zo begrijpbaar mogelijk te houden.
+Ik heb volgens mijn logboek nu 55 uur in mijn PWS zitten, dit is het meeste uitgegaan naar het maken van de nieuwe Werkmanrooster en de documentatie daarvan.
+In de zomervakantie ga ik bezig met het maken van een uitleg die voor iedereen te begrijpen is, dit zal dan ook de grond van mijn PWS worden.
+Je kunt de [Werkmanrooster site](http://werkmanrooster.nl) zien als het werk wat ik tot nu toe gedaan heb.
+
+Voor een "logboek" van mijn veranderingen en werk kun je [hier](http://git.werkmanrooster.nl/werkmanrooster/rooster-io/commits/master) terecht.
+Op deze website is alles wat ik heb gedaan bijgehouden met datum, tijd en de verandingen die ik gedaan heb.  
+Daarnaast is het project zelf (de code) [hier](http://git.werkmanrooster.nl/werkmanrooster/rooster-io) te vinden.
+
+Mijn geschreven PWS is deze website waar je nu op zit.  
+Voor het project van deze website kun je [hier terecht](http://git.werkmanrooster.nl/werkmanrooster/hoewerkt) en voor het [logboek hier](http://git.werkmanrooster.nl/werkmanrooster/hoewerkt/commits/master).
+
+De resultaten van de enquête die ik heb gedaan is [hier](https://docs.google.com/spreadsheets/d/1aFATRxpZHEEclkP5N8JychHlphkcezI4vAAl2nWqXe0/edit#gid=547327911) te vinden.
+
+[Naar de inleiding >>](/inleiding.md)
diff --git a/markdown/inleiding.md b/markdown/inleiding.md
index 8bcd63e..d870638 100644
--- a/markdown/inleiding.md
+++ b/markdown/inleiding.md
@@ -1,4 +1,5 @@
-#Werkmanrooster
+##Inleiding
+---
 Heel veel mensen op het Werkmancollege locatie Stadslyceum gebruiken een alternatieve manier van hun rooster bekijken. Dit doen ze via Werkmanrooster, een door leerlingen opgerichte website voor het bekijken van je eigen rooster. Het eerste initiatief van [Moet opzoek naar eerste oprichters] toen overgenomen door [Tweede eigenaar]. Sinds December 2014 was het mijn beurt om het domein in bezit te nemen.
 
 Er zijn in die tijd al verschillende versies van Werkmanrooster langsgekomen, dit profielwerkstuk zou echter gaan over mijn tweede versie van Werkmanrooster, genaamd [rooster.io](http://git.werkmanrooster.nl/werkmanrooster/rooster-io). Dit is de versie van werkmanrooster die iedereen heeft gebruikt voor de twee jaar en waar laatst een nieuwe versie van is uitgekomen. Ik ga in mijn profielwerkstuk uitleggen hoe Werkmanrooster in elkaar zit en wat er allemaal gebeurd tijdens en voordat je jouw rooster opvraagd. Ook ga ik antwoorden geven op veel gestelde vragen en nog een ander voorbeeld geven van soort gelijke webapplicatie.
diff --git a/markdown/rapportonderzoek.md b/markdown/rapportonderzoek.md
deleted file mode 100644
index fb60fbf..0000000
--- a/markdown/rapportonderzoek.md
+++ /dev/null
@@ -1,17 +0,0 @@
-##Huidige stand van zaken PWS (26 Juni 2015)
-
-Ik ben in de laatste paar weken druk bezig geweest met het maken van het nieuwe werkmanrooster.
-Ik wil dit nu opnieuw gemaakte project gaan onderzoeken en aan de hand daarvan mensen uit leggen hoe de website achter de schermen werkt. (onderzoek)
-Ik ben hier aan toegekomen in de PWS week maar heb niet een geschreven deel waarvan er al uitleg is, ik heb het voorwerk gedaan om mijn uitleg zo begrijpbaar mogelijk te houden.
-Ik heb volgens mijn logboek nu 49 uur in mijn PWS zitten, dit is het meeste uitgegaan naar het maken van de nieuwe werkmanrooster en de documentatie daarvan.
-In de zomervakantie ga ik bezig met het maken van een uitleg die voor iedereen te begrijpen is, dit zal dan ook de grond van mijn PWS worden.
-Je kunt de [werkmanrooster](http://werkmanrooster.nl) zien als het werk wat ik tot nu toe gedaan heb.
-
-Voor een "logboek" van mijn veranderingen en werk kun je [hier](http://git.werkmanrooster.nl/werkmanrooster/rooster-io/commits/master) terecht.
-Op deze website is alles wat ik heb gedaan bijgehouden met datum, tijd en de verandingen die ik gedaan heb.  
-Daarnaast is het project zelf (de code) [hier](http://git.werkmanrooster.nl/werkmanrooster/rooster-io) te vinden.
-
-Mijn geschreven PWS is deze website waar je nu op zit.  
-Voor het project van deze website kun je [hier terecht](http://git.werkmanrooster.nl/werkmanrooster/hoewerkt) en voor het [logboek hier](http://git.werkmanrooster.nl/werkmanrooster/hoewerkt/commits/master).
-
--- Bram van der Veen, A5/A6
diff --git a/resources/images/face.png b/resources/images/face.png
new file mode 100644
index 0000000..e3e6c12
Binary files /dev/null and b/resources/images/face.png differ
diff --git a/resources/jade/article.jade b/resources/jade/article.jade
index 1bdd966..baade2d 100644
--- a/resources/jade/article.jade
+++ b/resources/jade/article.jade
@@ -3,6 +3,19 @@ html
     title Hoe werkt Werkmanrooster ?
     link(rel="stylesheet", href="/css/style.css", type="text/css")
     link(rel="stylesheet", href="/css/skeleton.css", type="text/css")
-    
+
   body
-    .container!=markdown
+    .container
+      .row
+        .sidebar.five
+          div
+            h5 Profielwerkstuk
+            p Hoe werkt Werkmanrooster?
+            img(src="/images/face.png")
+            sup Bram van der Veen
+          ul
+            for article in locals.articles
+              li
+                a(href="/" + article)=article.substr(0,1).toUpperCase() + article.replace(/.md/, '').slice(1)
+        .content.seven
+          div!=markdown
diff --git a/resources/less/style.less b/resources/less/style.less
index 5b7e679..a74e12f 100644
--- a/resources/less/style.less
+++ b/resources/less/style.less
@@ -1,3 +1,91 @@
-body {
+.sidebar {
+  height: 100%;
+  border-right: solid 1px #DDD;
+  float: left;
+  margin-right: 20px;
+  padding-right: 20px;
 
+  h5, p, sup {
+    text-align: center !important;
+    display: block;
+    margin: 0;
+  }
+
+  p {
+    margin-top: -10px;
+    font-size: 15px;
+  }
+
+  img {
+    height: 150px;
+    width: 150px;
+    border-radius: 100%;
+    border: solid 3px #96AA48;
+    margin: 0 auto;
+    display: block;
+    -webkit-transition: ease 1s;
+
+    &:hover {
+      border-color: #FF1412;
+      -webkit-transition: ease 1s;
+    }
+  }
+
+  ul {
+    list-style: none;
+
+    li {
+      margin: 0;
+      padding: 0;
+      a {
+        padding: 0;
+        margin: 0;
+        display: block;
+        color: initial;
+        text-decoration: none;
+        border-left: solid 5px #FF1412;
+        border-bottom: solid 1px #CCC;
+        height: 30px;
+        line-height: 30px;
+        padding-left: 7px;
+
+        &:visited {
+          border-color: #96AA48;
+        }
+      }
+    }
+  }
+}
+
+div.content {
+  > div {
+    padding: 10px;
+  }
+
+  a {
+    // color: #
+  }
+
+  blockquote {
+    background-color: #DDD;
+    width: 500px;
+    right: 0px;
+    padding: 15px;
+    padding-bottom: 1px;
+    color: #666;
+  }
+}
+
+.night {
+  background-color: #0A0905;
+  color: #C5C9B8;
+
+  * {
+    background-color: #0A0905;
+    color: #C5C9B8 !important;
+  }
+
+  hr {
+    border-color: #C5C9B8;
+  }
 }