diff --git a/web/css/style.css b/web/css/style.css
index ea99dca..c5b35df 100644
--- a/web/css/style.css
+++ b/web/css/style.css
@@ -115,6 +115,12 @@ body {
   font-family: "texgyreheroscnbold", monospace;
 }
 
+.colophon a {
+  color: white;
+  text-decoration: none;
+  border-bottom: 3px solid white;
+}
+
 #sortArea label{
   margin-right: 6px; 
 }
diff --git a/web/css/style_projectpage.css b/web/css/style_projectpage.css
index 6c242b4..ce517f5 100644
--- a/web/css/style_projectpage.css
+++ b/web/css/style_projectpage.css
@@ -12,6 +12,9 @@ h2 {
   font-family: "inconsolata", monospace;
   font-weight: normal;
   margin: 0;
+}
+
+#creator {
   border-bottom: 0;
   padding-bottom: 0;
 }
@@ -21,6 +24,8 @@ h2 {
   width: 80%;
   float: right;
   position:relative;
+  height: 100%;
+  display: table;
 }
 
 .zwartAreaText{
@@ -45,7 +50,6 @@ h2 {
   color: white;
 }
 
-
 .colophon, .highlight{
   color: white;
 }
@@ -56,17 +60,33 @@ h2 {
 
 #sideBarDescInfo{
   border-bottom: 3px solid white;
-  /*height: 60px;*/
+  padding: 10px;
+}
+
+#sideBarDescInfo p{
+  display: initial;
 }
 
-#sideBarDescInner p:first-of-type{
-    padding-top: 0;
+.hightlightSidebar {
+   word-wrap: break-word;
 }
 
 #sideBarDescInner p{
   border-bottom: 3px double white;
 }
 
+#bio {
+  line-height: 22px;
+  font-size: 16px;
+  font-family: "inconsolata", monospace;
+  padding: 10px;
+  border-bottom: 3px double white;
+}
+
+#title  {
+  padding-top: 0 !important;
+}
+
 #sideBarDescInner a,
 #sideBarDescInner a:active,
 #sideBarDescInner a:visited,
@@ -152,6 +172,39 @@ h2 {
   max-height: 600px;
 }
 
+.project h1,
+.project h2,
+.project h3 {
+  font-family: 'texgyreheroscnbold';
+
+}
+
+.project h1 {
+  font-size: 25px;
+  padding-left: 10px;
+  text-indent: 50px;
+}
+
+.project h2 {
+  font-size: 23px;
+  padding-left: 10px;
+  text-indent: 50px;
+}
+
+.project h3 {
+  font-size: 21px;
+  padding-left: 10px;
+  text-indent: 50px;
+}
+
+#thumnail {
+  display: none;
+}
+
+iframe {
+  border: none;
+}
+
 @media only screen and (max-width:1600px){
 
   .project {
@@ -179,11 +232,9 @@ h2 {
   }
 
 @media only screen and (max-width:1280px){
-
   .project {
     width: 90%;
   }
-
 }
 
 @media only screen and (max-width: 768px){ 
@@ -201,9 +252,20 @@ h2 {
   }
 
   .project {
-      width: 100%;
-      margin-top: 50px;
-    }
+    width: 100%;
+    margin-top: 50px;
+  }
+
+  .project img {
+    max-width: 100%;
+    padding: 10px 0 10px 0;
+  }
+
+  iframe {
+    border: none;
+    max-width: 100%;
+    padding: 10px 0 10px 0;
+  }
 
   .sidebarBorderLeft {
     border-left: 0;
@@ -213,7 +275,7 @@ h2 {
       -webkit-box-shadow: inset 0px -3px 0px 0px white;
          -moz-box-shadow: inset 0px -3px 0px 0px white;
               box-shadow: inset 0px -3px 0px 0px white;
-    }
+  }
 
   .hoverBackA {
     display: none !important; 
diff --git a/web/img/arrowa.svg b/web/img/arrowa.svg
deleted file mode 100644
index 9ebcfaf..0000000
--- a/web/img/arrowa.svg
+++ /dev/null
@@ -1,71 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="58.688324"
-   height="41.601223"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.48.3.1 r9886"
-   sodipodi:docname="arrow2.svg">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1.4"
-     inkscape:cx="45.383594"
-     inkscape:cy="-124.96541"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:window-width="1920"
-     inkscape:window-height="1151"
-     inkscape:window-x="0"
-     inkscape:window-y="29"
-     inkscape:window-maximized="1"
-     showguides="false" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-264.24648,-231.20752)">
-    <g
-       transform="matrix(9.7769443e-8,6.8051692,-6.8051692,9.7769443e-8,1249.5812,-1226.1354)"
-       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Crimson Text;-inkscape-font-specification:Crimson Text"
-       id="flowRoot2985">
-      <path
-         d="m 220.26552,138.23638 0,6.55572 -0.99609,0 0,-5.55963 -3.47646,0 1.36523,1.36524 -0.70312,0.70312 -2.30274,-2.30273 0,-0.52734 2.30274,-2.30274 0.70312,0.70313 -1.36523,1.36523 4.47255,0"
-         id="path2994"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="ccccccccccccc" />
-    </g>
-  </g>
-</svg>
diff --git a/web/img/arrowb.svg b/web/img/arrowb.svg
deleted file mode 100644
index 86334c7..0000000
--- a/web/img/arrowb.svg
+++ /dev/null
@@ -1,71 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="58.688324"
-   height="41.601223"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.48.3.1 r9886"
-   sodipodi:docname="arrowa.svg">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1.4"
-     inkscape:cx="45.383592"
-     inkscape:cy="-124.96538"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:window-width="1920"
-     inkscape:window-height="1151"
-     inkscape:window-x="0"
-     inkscape:window-y="29"
-     inkscape:window-maximized="1"
-     showguides="false" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-264.24648,-231.20755)">
-    <g
-       transform="matrix(9.7769443e-8,-6.8051692,-6.8051692,-9.7769443e-8,1249.5812,1730.1517)"
-       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Crimson Text;-inkscape-font-specification:Crimson Text"
-       id="flowRoot2985">
-      <path
-         d="m 220.26552,138.23638 0,6.55572 -0.99609,0 0,-5.55963 -3.47646,0 1.36523,1.36524 -0.70312,0.70312 -2.30274,-2.30273 0,-0.52734 2.30274,-2.30274 0.70312,0.70313 -1.36523,1.36523 4.47255,0"
-         id="path2994"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="ccccccccccccc" />
-    </g>
-  </g>
-</svg>
diff --git a/web/img/white_PZI_logo.svg b/web/img/white_PZI_logo.svg
new file mode 100644
index 0000000..3355c46
--- /dev/null
+++ b/web/img/white_PZI_logo.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="187.21013"
+   height="106.30025"
+   id="svg3014"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="white_PZI_logo.svg">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview9"
+     showgrid="false"
+     inkscape:zoom="2.1473197"
+     inkscape:cx="93.605064"
+     inkscape:cy="53.150124"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg3014" />
+  <defs
+     id="defs3016" />
+  <metadata
+     id="metadata3019">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-186.39494,-464.92634)"
+     id="layer1"
+     style="fill:#ffffff">
+    <g
+       transform="matrix(0.125,0,0,-0.125,19.707438,571.22659)"
+       id="g12"
+       style="fill:#ffffff">
+      <path
+         d="m 1980.79,0 850.391,0 0,850.402 -850.391,0 0,-850.402 z"
+         id="path14"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+      <path
+         d="m 1611,323.332 c -37.49,0 -127.5,0 -127.5,0 l 0,98.328 c 0,0 95,0 127.5,0 32.5,0 47.51,-28.32 47.51,-49.16 0,-20.84 -15.11,-49.168 -47.51,-49.168 z m 63.34,188.328 c -33.33,0 -340.84,0 -340.84,0 l 0,-434.1717 150,0 0,162.1527 c 0,0 128.34,0 190.84,0 51.67,0 126.67,39.32 126.67,136.191 0,107.508 -70,135.828 -126.67,135.828"
+         id="path16"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
+    </g>
+  </g>
+</svg>