diff --git a/index-template-2018.html b/index-template-2018.html
new file mode 100644
index 0000000..ad41f26
--- /dev/null
+++ b/index-template-2018.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <title>2018 Graduation Show - Piet Zwart Institute</title>
+    <meta charset="UTF-8">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link href="img/PZI_icon.png" rel="icon" type="image/x-icon">    
+
+    <meta name="description" content="The Master in Media Design & Communication is an intensive project-based research degree exploring the possibilities released by the friction between media and their related practices. The course does not believe in old media and new media, nor in the pattern of media extinctions that punctuate traditional media histories. Rather students exploit the resonances and gaps between photography, cinema, animation, software and computational culture. In publishing and documenting, students are expected to critically engage with the platforms and networks in which their work operate or are distributed." />
+    <meta name="keywords" content="Master, Media Design, Communication, project, research, degree, media, photography, cinema, animation, software, computational culture, publishing, documenting, critical, platforms, networks, Rotterdam, Netherlands, Willem de Kooning Academy, Piet Zwart Institute" />
+    <meta name="author" content="2018 Graduation Show - Piet Zwart Institute" />
+    <!--meta name="application-name" content="Fuzzy Logic: the 2016 Graduation Show - Piet Zwart Institute" /-->
+    <!-- for Facebook -->
+    <!--meta property="og:title" content="Fuzzy Logic: the 2016 Graduation Show - Piet Zwart Institute"/-->
+    <meta property="og:type" content="website"/>
+    <meta property="og:locale" content="en_US"/>
+    <meta property="og:site_name" content="2018 Graduation Show - Piet Zwart Institute" />
+    <meta content="http://pzimediadesign.nl/img/promotionimage2.png" property="og:image">
+    <meta property="og:url" content="http://pzimediadesign.nl/"/>
+    <meta property="og:description" content="The Master in Media Design & Communication is an intensive project-based research degree exploring the possibilities released by the friction between media and their related practices. The course does not believe in old media and new media, nor in the pattern of media extinctions that punctuate traditional media histories. Rather students exploit the resonances and gaps between photography, cinema, animation, software and computational culture. In publishing and documenting, students are expected to critically engage with the platforms and networks in which their work operate or are distributed." />
+    
+    <!--title>TITLE</title-->
+
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="fonts/fontstylesheet01.css">
+    <link rel="stylesheet" href="css/fixedsticky.css">
+
+  </head>
+
+  <body>
+    <div id="pageWrap">
+      <div class="" id="zwartIntro">
+	<div class="sidebarBorderLeft zwartArea zwartAreaMobile" id="section00">
+	</div>
+	<div class="zwartArea zwartAreaText " id="section01">
+	  <div class="zwartAreaFull zwartAreaIntro">
+	    <img id="logoWhite" src="img/white_PZI_logo.svg">
+	    <!-- &lt;h1 class="highlight"&gt; Piet Zwart Institute&lt;br&gt; -->
+	    <!-- <h1>Master Media Design &amp; Communication</h1> -->
+	    <!-- <p>The Master in Media Design &amp; Communication is an intensive project-based research degree exploring the possibilities released by the friction between media and their related practices. The course does not believe in old media and new media, nor in the pattern of media extinctions that punctuate traditional media histories. Rather students exploit the resonances and gaps between photography, cinema, animation, software and computational culture. In publishing and documenting, students are expected to critically engage with the platforms and networks in which their work operate or are distributed. </p> -->
+
+
+	    <!-- TEXT -->
+
+	    
+	  </div>
+	</div>
+      </div>
+
+
+      
+
+      <div class="sidebarBorder" id="sidebar">
+	<div id="sidebarInner">
+	  <div id="sideBarDesc">
+	    <div id="sideBarDescInfo"><p>Piet Zwart Institute<br/>Master Media Design Graduate Festival 2018</p></div>
+	    <div id="sideBarDescInner">
+	      <!-- DATES / LOCATIONS 
+	      <p class="hightlightSidebar">
+ 	      <p>JUNE 15th 17.00-22.30: Het Nieuwe Instituut
+	      <ul>
+		<li>17:00 - 19:00 Special Issue #3: Interfacing the Law <i>The HNI Library</i></li>
+		<li>19:00 - 21:00 Mystery Tour For All Ages</li>
+		<li>21:30 - 22:30 Adversarial Interface Space <i>5th Floor</i></li>
+	      </ul>
+	      </p>
+	      <hr/>
+	      <p>JUNE 16th 18.OO-22.00: <i><a href="https://kinorotterdam.nl/">KINO Cinema</a></i></p>
+<ul>
+<li>18.00 - 18.30 KINO GRAND Cafe: welcome drinks </li>
+<li>18.30 - 19.30 Lens-Based Cohort Screening</li>
+<li>20.00 - 22.00 Graduation Film Screenings KINO 4</li>	      
+</ul>
+-->
+	    </div>
+	  </div>
+	</div>
+	<div id="logoWrap">
+	  <img id="logo" src="./img/black_PZI_logo_p.svg"/>
+	</div>
+      </div>
+
+      <div id="section02" class="zwartArea sidebarBorderLeft zwartAreaWhite">
+	<div id="filter" class="fixedsticky">
+          <p><!--Fuzzy Logic: Media Design and Communication MA 2016 Graduation Show--> <a class="closeSidebar"><img src="./img/arrowUp.svg"/></a></p>
+	</div>
+	
+	<div class="isotope"> <!-- Maybe sould aslo have have-->
+	  <div class="grid-sizer"></div>
+	</div>
+      </div>
+      <div id="section03" class="sidebarBorderLeft zwartArea">
+	<div class="zwartAreaFull zwartColophon">
+
+
+	  <!-- MORE TEXT -->
+
+	  <!--	  
+	  <h1>JUNE 15th - 17.00-22.30 </br>
+	    PRESENTATIONS, LECTURES &amp; INTERVIEWS</h1>
+	  <p>Het Nieuwe Instituut<br/>
+	    Museumpark 25<br/>
+	    3015CB<br/>
+	    Rotterdam<br/>
+	    <a href="http://hetnieuweinstituut.nl/">hetnieuweinstituut.nl</a>
+	  </p>
+
+	  <p>For the first part of this festival, located at HNI, the first year students of the <a href="http://xpub.nl/">Experimental Publishing</a> path will present their trimester work <em>Interfacing the Law</em>. Later in the evening, graduating students present their graduation projects, and discuss their practice with guests.</p>
+<p><strong>17:00- 19:00 Special Issue #3: Interfacing the Law</strong> The HNI Library</p>
+<p>Public event, presentations of projects with guest Séverine Dusollier (SciencesPo)</p>
+<p><strong>17:00 - 21:00 Mystery Tour For All Ages</strong></p>
+<p>Ministry Of Anomie and volunteers</p>
+<p><strong>21:30 - 22:30 Adverserial Interface Space</strong> 5th Floor</p>
+<p>Presentation and Q&amp;A with Femke Snelting</p>
+--> 
+	  <!--h1>DAY TWO</h1-->
+	  <!--
+<h1>JUNE 16th - 18.00-22.00<br/>
+PUBLIC SCREENINGS</h1>
+<p>KINO Cinema<br/>
+Gouvernestraat 129-133<br/>
+3014 PM Rotterdam<br/>
+<a href="https://kinorotterdam.nl/">kinorotterdam.nl</a>
+</p>
+
+
+	  <p>The second day of the festival is an evening of public screenings: works by first year students of the lens-based path, followed by films of graduating students.</p>
+	  <p><strong>18.00 - 18.30</strong></p><p>Come and join us for drinks in the KINO GRAND Cafe</p>
+	  <p><strong>18.30 - 19.30</strong></p><p>Lens-Based Cohort Screening <em>Works &amp; Research In Progress</em></p>
+	  <p><strong>20.00 - 22.00</strong> KINO 4</p><p>Graduation Film Screenings</p>
+
+<hr/>
+-->
+<p>PZI / WDKA</p>
+<p>Rotterdam University of Applied Sciences</p>
+	    <div class="project">
+	      <p ><a href="http://www.pzwart.nl/">Piet Zwart Institute</a></p>
+	      <p><a href="http://www.pzimediadesign.nl/">Master Media Design & Communication</a></p>
+	      <p><a href="http://xpub.nl">Experimental Publishing Blog</a></p>
+	      <p><a href="2015.html">Graduation Projects 2015</a></p>
+	      <p><a href="2016.html">Graduation Projects 2016</a></p>
+	      <p><a href="2017.html">Graduation Projects 2017</a></p>
+	      
+	    </div>
+	    <hr />
+	  <p>Piet Zwart Institute Master Media Design and Communication<br/>Willem de Kooning Academy<br /> Rotterdam University of Applied Sciences
+</p>
+	  
+	</div>
+      </div>
+    </div>
+  </body>
+
+  <script src='js/jquery-2.1.3.min.js'></script>
+  <script src='js/fixedfixed.js'></script>
+  <script src='js/fixedsticky.js'></script>
+  <script src='js/isotope.pkgd.min.js'></script>
+  <script src='js/imagesloaded.pkgd.min.js'></script>
+  <script src='js/mainScripts.js'></script>
+
+
+</html>
diff --git a/work-2018-template.html b/work-2018-template.html
new file mode 100644
index 0000000..1861efd
--- /dev/null
+++ b/work-2018-template.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+
+    <title></title>
+    <link href="../css/style.css" rel="stylesheet">
+    <link href="../css/style_projectpage.css" rel="stylesheet">
+    <link href="../fonts/fontstylesheet01.css" rel="stylesheet">
+    <link href="../css/fixedsticky.css" rel="stylesheet">
+</head>
+
+<body>
+    <div id="pageWrap">
+        <div id="sidebar">
+            <div id="sidebarInner">
+                <div id="sideBarDesc">
+                    <div id="sideBarDescInfo">
+                        <a href="javascript:history.back()" class="hoverBackA"><img class="template" src="../img/arrowBack.svg"></a><p><!--TITLE--></p>
+                    </div>
+
+                    <div id="sideBarDescInner">
+
+                        <!-- we used h2's and p's instead of divs here, moved date and deleted thumbnail  -->
+
+                        <h2 id="creator"></h2>
+
+                        <p id="title"></p><!--{title} {date} -->
+
+                        <!-- moved up description  -->
+
+                        <div id="description"></div>
+
+                        <div id="bio"></div>
+
+                        <p class="hightlightSidebar"><a href="#" target="_blank"></a></p><!-- {website} -->
+
+                        <!-- // -->
+
+                    </div>
+                </div>
+            </div>
+
+            <div id="logoWrap"><img class="template" id="logo" src="../img/black_PZI_logo_p.svg"></div>
+        </div>
+
+        <div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
+            <div class="fixedsticky" id="filter" style="top:0;">
+              <div class="themes" id="sortArea">
+		<a href="javascript:history.back()" class="hoverBackB">
+		  <img class="template" src="../img/arrowBack.svg">
+		</a>
+		<p></p><!--{title}-->
+		<a class="closeSidebar"><img class="template" src="../img/arrowUpW.svg"/></a>
+              </div>
+            </div>
+                       
+            <!-- extra -->
+
+            <div id="extra" class="project">
+	      <img id="thumbnail" src="" />
+            </div>
+
+            <!---->
+
+        </div>
+    </div>
+
+    <script src='../js/jquery-2.1.3.min.js'></script> 
+    <script src='../js/fixedfixed.js'></script> 
+    <script src='../js/fixedsticky.js'></script> 
+    <script src='../js/mainScripts_single.js'></script>
+
+</body>
+</html>
