diff --git a/.eleventy.js b/.eleventy.js
new file mode 100644
index 0000000..9586d4f
--- /dev/null
+++ b/.eleventy.js
@@ -0,0 +1,7 @@
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPassthroughCopy("css");
+  eleventyConfig.addLayoutAlias("default", "default.njk");
+  return {
+    passthroughFileCopy: true
+  };
+};
diff --git a/_includes/default.njk b/_includes/default.njk
index 6b914b4..5bb6c51 100644
--- a/_includes/default.njk
+++ b/_includes/default.njk
@@ -7,8 +7,64 @@ title: OpenJS NodeJS Application Developer Study Guide
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ title }}</title>
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.css">
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet"
+      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/default.min.css">
+<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
   </head>
   <body>
-    {{ content | safe }}
+    <header class="container">
+        <div class="row">
+          <div class="column column-50">
+            <h1 class="logo"><a href="/">ONAD Study Guide</a></h1>
+          </div>
+          <div class="top-links column column-50">
+            <ul>
+              <li><a href="https://training.linuxfoundation.org/certification/jsnad/" target="_blank" title="OpenJS Node.js Application Developer (JSNAD)">JSNAD Certification</a></li>
+            </ul>
+          </div>
+        </div>
+    </header>
+    <main class="container">
+      <div class="row">
+        <div class="sidebar column">
+          <nav>
+            <ul>
+              <li><a href="#" {% if page.url === '/buffer/' %} class="current" {% endif %}>Buffer and Streams</a></li>
+              <li><a href="#">Control flow</a></li>
+              <li><a href="#">Child Processes</a></li>
+              <li><a href="#">Diagnostics</li>
+              <li><a href="#">Error Handling</a></li>
+              <li><a href="#">Node.js CLI</a></li>
+              <li><a href="/events" {% if page.url === '/events/' %} class="current" {% endif %}>Events</li>
+              <li><a href="#">File System</a></li>
+              <li><a href="#">JavaScript Prerequisites</a></li>
+              <li><a href="#">Module system</a></li>
+              <li><a href="#">Process/Operating System</a></li>
+              <li><a href="#">Package.json</a></li>
+              <li><a href="#">Unit Testing</a></li>
+            </ul>
+          </nav>
+        </div>
+        <div class="main-content column column-75">
+          <h1>{{ title }}</h1>
+
+          {{ content | safe }}
+        </div>
+      </div>
+    </main>
+    <footer class="container">
+      <div class="row">
+        <div class="column column-75 column-offset-25">
+          <p>&copy; NearForm Ltd.<p>
+          <p><a href="https://github.com/jjmax75/openjs-nodejs-application-developer-study-guide/tree/master/{{ page.inputPath }}">Edit this page on GitHub</a></p>
+        </div>
+      </div>
+      
+      </footer>
   </body>
 </html>
\ No newline at end of file
diff --git a/cheatsheet/index.md b/cheatsheet/index.md
index d6f7f0d..a3abf0f 100644
--- a/cheatsheet/index.md
+++ b/cheatsheet/index.md
@@ -1,6 +1,9 @@
-# Node Cheat Sheet
+---
+layout: default.njk
+title: Node Cheat Sheet
+---
 
-# <a name="Events"></a>Events
+## [Events](#events)
 
 Class: events.EventEmitter
 
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..ba72201
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,71 @@
+body {
+  color: #333;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 18px;
+}
+
+main h1 {
+  color: #80bd01;
+}
+
+a {
+  color: #80bd01;
+  font-weight: bold;
+}
+
+a:hover {
+  color: #4d7000;
+  font-weight: bold;
+}
+
+.top-links {
+  text-align: right;
+}
+
+.top-links ul {
+  margin: 2rem 0;
+}
+
+.top-links li {
+  list-style: none;
+  display: inline-block;
+}
+
+.sidebar {
+  margin: 2rem;
+}
+
+.main-content {
+  margin: 2rem;
+}
+
+.logo {
+  font-size: 22px;
+  margin: 2rem 0;
+}
+
+.logo a {
+  color: #888;
+}
+
+.logo a:hover {
+  color: #80bd01;
+}
+
+.sidebar li {
+  list-style: none;
+}
+
+.sidebar a {
+  color: #888;
+  font-weight: normal;
+}
+
+.sidebar a.current {
+  color: #80bd01;
+}
+
+.sidebar a:hover {
+  color: #80bd01;
+}
diff --git a/events/index.md b/events/index.md
index 923f304..57a6198 100644
--- a/events/index.md
+++ b/events/index.md
@@ -1,10 +1,9 @@
 ---
 layout: default.njk
 title: Events
+url: events
 ---
 
-# Events
-
 The Node.js core API is built around the idea of events being "emitted" and "listened" to. Objects called "emitters" emit _named_ events, that are picked up by "listener" functions.
 
 Objects that emit events extend the `EventEmitter` class. These objects expose an `on` method that allows one or more functions to be attached to named events emitted by the object.
@@ -15,23 +14,23 @@ When the EventEmitter object emits an event, all of the functions attached to th
 
 This example creates an event listener for `foo` events, and an event emitter to fire these events.
 
-```
-const { EventEmitter } = require('events');
+```javascript
+const { EventEmitter } = require("events");
 
 // create a listener function. These can be arrow functions, but will
 // loose `this` refering to the EventEmitter object
 const foo = function foo() {
-  console.log('foo executed.', this)
-}
+  console.log("foo executed.", this);
+};
 
 // create an emitter and bind some events to it
-const eventEmitter = new EventEmitter()
+const eventEmitter = new EventEmitter();
 
 // Bind the connection event with the listner1 function
-eventEmitter.on('foo', foo)
+eventEmitter.on("foo", foo);
 
 // fire the event
-eventEmitter.emit('foo')
+eventEmitter.emit("foo");
 ```
 
 ## Passing parameters
@@ -64,4 +63,4 @@ Imagine we are building a SaaS that does a number of things when a user creates
 is created, we want to emit a `userCreated` event. One of the listeners for this will email a confirmation
 email to that user.
 
-Build an event emitter to simulate the `userCreated` event, and an event listener that sends a confirmation email. There is a mock emailer class in the folder that has a method `send`, which expects an email address and a message body as the parameters.
\ No newline at end of file
+Build an event emitter to simulate the `userCreated` event, and an event listener that sends a confirmation email. There is a mock emailer class in the folder that has a method `send`, which expects an email address and a message body as the parameters.
diff --git a/index.md b/index.md
index c0f2a69..5fe6a59 100644
--- a/index.md
+++ b/index.md
@@ -3,12 +3,9 @@ layout: default.njk
 title: OpenJS NodeJS Application Developer Study Guide
 ---
 
-# {{title}}
-
 TODO:
 
 - Set out the purpose here and list the sections with links
 - Styling and update the default template
 
-
-[Events](/events)
\ No newline at end of file
+[Events](/events)
diff --git a/package.json b/package.json
index 399bce8..b2acf31 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,9 @@
   "version": "1.0.0",
   "description": "OpenJS Node application developer study guide",
   "scripts": {
-    "start": "eleventy --serve",
-    "deploy": "gh-pages -d _site"
+    "start": "eleventy --serve --input=. --output=_site",
+    "build": "eleventy --config=.eleventy-deploy.js",
+    "deploy": "npm run build && gh-pages -d _site/_eleventy_redirect"
   },
   "repository": {
     "type": "git",
diff --git a/readme.md b/readme.md
index ecfdd0e..3f05417 100644
--- a/readme.md
+++ b/readme.md
@@ -19,3 +19,7 @@ Then run `npm start`. You can access your site on [localhost:8080](http://localh
 TODO: Use Github pages deployment for 11ty (from the generated \_site folder)
 
 [Events](/events/events.md)
+
+## Styling
+
+The base theme for this site is provided by [Milligram](https://milligram.io) with custom theming.
diff --git a/styleguide/index.md b/styleguide/index.md
new file mode 100644
index 0000000..df6ea73
--- /dev/null
+++ b/styleguide/index.md
@@ -0,0 +1,275 @@
+---
+layout: default.njk
+title: Style guide
+description: Kitchen sink of elements for design purposes
+---
+
+This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+# Paragraphs
+
+A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
+
+# Blockquotes
+
+> A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.
+>
+> It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
+>
+> <cite>[Said no one, ever.](#!)</cite>
+
+# Lists
+
+### Definition list
+
+<dl>
+
+<dt>Definition List Title</dt>
+
+<dd>This is a definition list division.</dd>
+
+</dl>
+
+### Ordered List
+
+1.  List Item 1
+2.  List Item 2
+3.  List Item 3
+
+### Unordered List
+
+- List Item 1
+- List Item 2
+- List Item 3
+
+# Horizontal rules
+
+# Tabular data
+
+<table>
+   <caption>Table Caption</caption>
+   <thead>
+      <tr>
+         <th>Table Heading 1</th>
+         <th>Table Heading 2</th>
+         <th>Table Heading 3</th>
+         <th>Table Heading 4</th>
+         <th>Table Heading 5</th>
+      </tr>
+   </thead>
+   <tfoot>
+      <tr>
+         <th>Table Footer 1</th>
+         <th>Table Footer 2</th>
+         <th>Table Footer 3</th>
+         <th>Table Footer 4</th>
+         <th>Table Footer 5</th>
+      </tr>
+   </tfoot>
+   <tbody>
+      <tr>
+         <td>Table Cell 1</td>
+         <td>Table Cell 2</td>
+         <td>Table Cell 3</td>
+         <td>Table Cell 4</td>
+         <td>Table Cell 5</td>
+      </tr>
+      <tr>
+         <td>Table Cell 1</td>
+         <td>Table Cell 2</td>
+         <td>Table Cell 3</td>
+         <td>Table Cell 4</td>
+         <td>Table Cell 5</td>
+      </tr>
+      <tr>
+         <td>Table Cell 1</td>
+         <td>Table Cell 2</td>
+         <td>Table Cell 3</td>
+         <td>Table Cell 4</td>
+         <td>Table Cell 5</td>
+      </tr>
+      <tr>
+         <td>Table Cell 1</td>
+         <td>Table Cell 2</td>
+         <td>Table Cell 3</td>
+         <td>Table Cell 4</td>
+         <td>Table Cell 5</td>
+      </tr>
+   </tbody>
+</table>
+
+# Code
+
+```javascript
+function whereTo() {
+  const foo = "bar";
+  for (let i = 0; i < 10; i++) {
+    console.log(foo);
+  }
+}
+
+whereTo();
+```
+
+**Keyboard input:** <kbd>Cmd</kbd>
+
+**Inline code:** `<div>code</div>`
+
+**Sample output:** <samp>This is sample output from a computer program.</samp>
+
+## Pre-formatted text
+
+<pre>P R E F O R M A T T E D T E X T
+  ! " # $ % & ' ( ) * + , - . /
+  0 1 2 3 4 5 6 7 8 9 : ; < = > ?
+  @ A B C D E F G H I J K L M N O
+  P Q R S T U V W X Y Z [ \ ] ^ _
+  ` a b c d e f g h i j k l m n o
+  p q r s t u v w x y z { | } ~ </pre>
+
+# Inline elements
+
+[This is a text link](#!).
+
+**Strong is used to indicate strong importance.**
+
+_This text has added emphasis._
+
+The **b element** is stylistically different text from normal text, without any special importance.
+
+The _i element_ is text that is offset from the normal text.
+
+The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.
+
+<del>This text is deleted</del> and <ins>This text is inserted</ins>.
+
+<s>This text has a strikethrough</s>.
+
+Superscript<sup>®</sup>.
+
+Subscript for things like H<sub>2</sub>O.
+
+<small>This small text is small for for fine print, etc.</small>
+
+Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr>
+
+<q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q>
+
+<cite>This is a citation.</cite>
+
+The <dfn>dfn element</dfn> indicates a definition.
+
+The <mark>mark element</mark> indicates a highlight.
+
+The <var>variable element</var>, such as <var>x</var> = <var>y</var>.
+
+The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>
+
+# Embedded content
+
+## Images
+
+### No `<figure>` element
+
+![Image alt text](http://placekitten.com/480/480)
+
+### Wrapped in a `<figure>` element, no `<figcaption>`
+
+<figure>![Image alt text](http://placekitten.com/420/420)</figure>
+
+### Wrapped in a `<figure>` element, with a `<figcaption>`
+
+<figure>![Image alt text](http://placekitten.com/420/420)
+
+<figcaption>Here is a caption for this image.</figcaption>
+
+</figure>
+
+## Progress
+
+<div><progress>progress</progress></div>
+
+## Inline SVG
+
+## IFrame
+
+<iframe src="index.html" height="300"></iframe>
+
+# Form elements
+
+<fieldset id="forms__input">
+  <legend>Input fields</legend>
+  <label for="input__text">Text Input</label> <input id="input__text" type="text" placeholder="Text Input">
+  <label for="input__password">Password</label> <input id="input__password" type="password" placeholder="Type your Password">
+  <label for="input__webaddress">Web Address</label> <input id="input__webaddress" type="url" placeholder="http://yoursite.com">
+  <label for="input__emailaddress">Email Address</label> <input id="input__emailaddress" type="email" placeholder="name@email.com">
+  <label for="input__phone">Phone Number</label> <input id="input__phone" type="tel" placeholder="(999) 999-9999">
+  <label for="input__search">Search</label> <input id="input__search" type="search" placeholder="Enter Search Term">
+  <label for="input__text2">Number Input</label> <input id="input__text2" type="number" placeholder="Enter a Number">
+  <label for="input__text3" class="error">Error</label> <input id="input__text3" class="is-error" type="text" placeholder="Text Input">
+  <label for="input__text4" class="valid">Valid</label> <input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
+</fieldset>
+<fieldset id="forms__select">
+  <legend>Select menus</legend>
+  <label for="select">Select</label> 
+  <select id="select">
+    <optgroup label="Option Group">
+      <option>Option One</option>
+      <option>Option Two</option>
+      <option>Option Three</option>
+    </optgroup>
+  </select>
+</fieldset>
+<fieldset id="forms__checkbox">
+  <legend>Checkboxes</legend>
+  *   <label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label>
+  *   <label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label>
+  *   <label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label>
+</fieldset>
+<fieldset id="forms__radio">
+  <legend>Radio buttons</legend>
+  *   <label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label>
+  *   <label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label>
+  *   <label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label>
+</fieldset>
+<fieldset id="forms__textareas">
+  <legend>Textareas</legend>
+  <label for="textarea">Textarea</label>
+  <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
+</fieldset>
+<fieldset id="forms__html5">
+  <legend>HTML5 inputs</legend>
+  <label for="ic">Color input</label> <input type="color" id="ic" value="#000000">
+  <label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5">
+  <label for="ir">Range input</label> <input type="range" id="ir" value="10">
+  <label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01">
+  <label for="idm">Month input</label> <input type="month" id="idm" value="1970-01">
+  <label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01">
+  <label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
+  <label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00">
+
+# Buttons
+
+<a class="button" href="#">Default Button</a>
+<button class="button button-outline">Outlined Button</button>
+<input class="button button-clear" type="submit" value="Clear Button">
+
+## Input button variations
+
+<input type="submit" value="<input type=submit>">
+<input type="button" value="<input type=button>">
+
+<input type="reset" value="<input type=reset>">
+<input type="submit" value="<input disabled>" disabled="">

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5