diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..a053d23
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,14 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "program": "${file}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 7f7e5be..84fc5c9 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@ gatsby new gatsby-wiki
 10. [Adding File Data](#10-adding-file-data)
 11. [Working with Markdown](#11-working-with-markdown)
 12. [Adding Material-UI](#12-adding-material-ui)
+
 XX. [Build the Static Page](#xx-build-the-static-page)
 ---
 
@@ -46,7 +47,7 @@ You can now access your website on http://localhost:8000 :
 ## 02 Adding content and Linking Pages
 
 
-The */src/pages/index.js* file contains regular JSX - add any HTML inside the /<div/> tag to make it appear inside your website (Gatsby is hot-reloading).
+The _/src/pages/index.js_ file contains regular JSX - add any HTML inside the /<div/> tag to make it appear inside your website (Gatsby is hot-reloading).
 
 ```js
 import React from 'react'
@@ -70,7 +71,7 @@ You need to import Link from gatsby-link to use the Link Component and link to o
 <Link to="/page-2/">Go to page 2</Link>
 ```
 
-component, linking our **index.js** page to another page inside the same folder with the name **page-2.js**. Every js file inside the */src/pages* folder will automagically be routed by Gatsby!
+component, linking our __index.js__ page to another page inside the same folder with the name __page-2.js__. Every js file inside the _/src/pages_ folder will automagically be routed by Gatsby!
 
 
 ![](./gatsby_02.png)
@@ -106,7 +107,7 @@ How to install those plugins is explained below - [Gatsby Plugins](#07-gatsby-pl
 
 React allows you to add interaction to your page - we want to add a counter, set it's state to 0 on load and have two buttons that use onClick events to increment or decrement the state of the counter.
 
-We can just add a new file */src/pages/counter.js* and link to it from the index page *\<Link to="/counter/"\>Go to Counter\</Link\>*:
+We can just add a new file _/src/pages/counter.js_ and link to it from the index page _\<Link to="/counter/"\>Go to Counter\</Link\>_:
 
 ```js
 import React from 'react'
@@ -140,7 +141,7 @@ export default Counter
 
 So far, we used every file inside the pages directory as a separate site. But React.js allows us to take the default component - that is exported at the bottom of the file - and import it into another page. For example, we could take the \<Counter /\> component above and add it to the index page (instead of just linking to it).
 
-We just need to add an import line to the beginning of /src/pages/index.js:
+We just need to add an import line to the beginning of _/src/pages/index.js_:
 
 ```js
 import React from 'react'
@@ -219,13 +220,13 @@ render() {
 
 ### Setting Default Props
 
-To be able to still open the *localhost:8000/counter* URL, we now have to define a default prop inside the counter component - the header tag and font colour will be undefined, if there is no parent component passing down props! This can be done by Prop-Types, that we need to install:
+To be able to still open the _localhost:8000/counter_ URL, we now have to define a default prop inside the counter component - the header tag and font colour will be undefined, if there is no parent component passing down props! This can be done by Prop-Types, that we need to install:
 
 ```
 npm install --save prop-types
 ```
 
-Now we can import it into */src/pages/counter.js* :
+Now we can import it into _/src/pages/counter.js_ :
 
 ```js
 import React from 'react'
@@ -343,7 +344,7 @@ module.exports = {
 
 ## 08 Single-Page-Application
 
-Gatsby offers an easy way to create Single-Page-Applications (**SPA's**) with it's layout feature. You can find the JSX and CSS inside */src/layout*. The Gatsby Starter, that we are using, already uses a header navbar, that is defined inside the index.js file (and comes with the necessary css).
+Gatsby offers an easy way to create Single-Page-Applications (__SPA's__) with it's layout feature. You can find the JSX and CSS inside _/src/layout_. The Gatsby Starter, that we are using, already uses a header navbar, that is defined inside the index.js file (and comes with the necessary css).
 
 You can see that the app already uses [React-Helmet](https://github.com/nfl/react-helmet) as a Gatsby plugin. This reusable React component will manage all of your changes to the document \<head\>. Helmet takes plain HTML tags and outputs plain HTML tags.
 
@@ -367,7 +368,7 @@ module.exports = {
 }
 ```
 
-This Data will be available to every page and can be queried usind **GraphQL**. Just add the following GraphQL query to */src/pages/index.js*, to get a hold of those values:
+This Data will be available to every page and can be queried usind __GraphQL__. Just add the following GraphQL query to _/src/pages/index.js_, to get a hold of those values:
 
 ```js
 export const query = graphql`
@@ -383,7 +384,7 @@ export const query = graphql`
 `
 ```
 
-Then we have to inject this **{data}** into the parent component \<IndexPage /\>:
+Then we have to inject this __{data}__ into the parent component \<IndexPage /\>:
 
 ```js
 const IndexPage = ({data}) =>
@@ -395,7 +396,7 @@ Now we are able to query this data inside the component:
 <h1>{data.site.siteMetadata.description}</h1>
 ```
 
-Why is it **data.site.siteMetadata**? Gatsby's graphql debugger is running at http://localhost:8000/___graphql you can also use it to test your queries and see how the results look. Just open the debugger and try out our previous query:
+Why is it __data.site.siteMetadata__? Gatsby's graphql debugger is running at _http://localhost:8000/___graphql_ you can also use it to test your queries and see how the results look. Just open the debugger and try out our previous query:
 
 
 ![](./gatsby_05.png)
@@ -415,7 +416,7 @@ npm install --save gatsby-source-filesystem
 
 After installation, add the plugin to gatsby-config.js. You can have multiple instances of this plugin to read source nodes from different locations on your filesystem.
 
-The following sets up the Jekyll pattern of having a *pages* directory for **Markdown files** and a *data* directory for **.json**, **.yaml**, **.csv**.:
+The following sets up the Jekyll pattern of having a _pages_ directory for __Markdown files__ and a _data_ directory for __.json__, __.yaml__, __.csv__.:
 
 ```js
 {
@@ -434,7 +435,7 @@ The following sets up the Jekyll pattern of having a *pages* directory for **Mar
 }
 ```
 
-You can now open the GraphiQL debugger put in curly brackets - when you start typing allFiles, it should offer autocompletion. Just press enter to accept and **CTRL + ENTER** again to fill out the query for all page ID's:
+You can now open the GraphiQL debugger put in curly brackets - when you start typing allFiles, it should offer autocompletion. Just press enter to accept and __CTRL + ENTER__ again to fill out the query for all page ID's:
 
 ```
 {
@@ -452,20 +453,20 @@ You can now open the GraphiQL debugger put in curly brackets - when you start ty
 ![](./gatsby_06.png)
 
 
-When you delete *id* and press **CTRL + SPACE**, you will be given a drop down menu with all options that you can query:
+When you delete _id_ and press __CTRL + SPACE__, you will be given a drop down menu with all options that you can query:
 
 
 ![](./gatsby_07.png)
 
 
-Using the *parent*, *children* and *relativePath* attribute enables you to create e.g. a breadcrumb navigation:
+Using the _parent_, _children_ and _relativePath_ attribute enables you to create e.g. a breadcrumb navigation:
 
 
 ![](./gatsby_08.png)
 
 
 
-We can now add a GraphQL query to */src/pages/page-2.js* to loop through all of our pages and display some data:
+We can now add a GraphQL query to _/src/pages/page-2.js_ to loop through all of our pages and display some data:
 
 ```js
 export const query = graphql`
@@ -484,7 +485,7 @@ export const query = graphql`
 `
 ```
 
-Don't forget to inject the **{data}** to the page component:
+Don't forget to inject the __{data}__ to the page component:
 
 ```js
 const SecondPage = ({data}) =>
@@ -532,7 +533,7 @@ Now we can add some JSX that loops through all of our files and outputs the info
 
 ## 11 Working with Markdown
 
-Now we are able to access information about all of our pages. But as mentioned, in the beginning of the last paragraph, we are also able to use **Gatsby Transformer Plugins** to look into files and make their content available to GraphQL.
+Now we are able to access information about all of our pages. But as mentioned, in the beginning of the last paragraph, we are also able to use __Gatsby Transformer Plugins__ to look into files and make their content available to GraphQL.
 
 In this case we want to use Markdown files and transform them, to be able to display their content in our website. The Transformer Plugin needed for this is [gatsby-transformer-remark](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/). First we need to install the plugin:
 
@@ -540,37 +541,237 @@ In this case we want to use Markdown files and transform them, to be able to dis
 npm install --save gatsby-transformer-remark
 ```
 
-Then create a markdown page inside */src/pages/myfirstpost.md* that contains some **FrontMatter** (metadata in the beginning of the file, that can later be queried by GraphQL) and some text:
+And add it to our _gatsby-config.js_:
+
+```js
+plugins: [
+  `gatsby-transformer-remark`,
+]
+```
+
+Then create a markdown page inside _/src/pages/FirstMDpost/index.md_ that contains some __FrontMatter__ (metadata in the beginning of the file, that can later be queried by GraphQL) and some text:
 
 
 ```
 ---
-title: "My first Post"
-author: "Mike Polinowski"
+path: '/md-posts'
+title: 'My first Post'
+date:   '2017-10-05'
+author: 'Mike Polinowski'
+chapter: 'Index'
 ---
 
 # This is my first mardown Post!
 ```
 
-Now we need to add the plugin to */gatsby-config.js* :
+Now we have Markdown available in GraphQL - as before, just start typing allMardownRemark (ENTER autocompletes) and then press __CTRL + ENTER__ to complete your query:
+
+
+![](./gatsby_10.png)
+
+
+
+Now we can query for the FrontMatter as well as the MD-to-HTML transformed content of each MD file we add to our pages folder:
+
+
+![](./gatsby_11.png)
+
+
+### Post Template for our Markdown Data
+
+The markdown represents the data that is going to be displayed. But now we need to create a style template that is used with this data. Lets start by adding a new folder inside _/src_ called templates. Now add a file to it called __post.js__ that will contain the structure template for every post entry. The file contains the JSX markup for our post:
+
+```js
+import React from 'react'
+
+export default function Template({data}) {
+  const {markdownRemark: post} = data
+  
+  return (
+    <div>
+      <h1>{post.frontmatter.title}</h1>
+      <div dangerouslySetInnerHTML={{__html: post.html}} />
+    </div>
+  )
+}
 
+export const postQuery = graphql`
+  query BlogPostByPath($path: String!) {
+    markdownRemark(frontmatter: { path: { eq: $path} }) {
+      html
+      frontmatter {
+        path
+        title
+      }
+    }
+  }
+`
 ```
-`gatsby-transformer-remark`,
+The \<Template /\> component receives \{data\} props, that are retrieved by an GraphQL query.
+
+The query looks for a markdown post, where the called URL equals the $path given inside it's frontmatter. So if the URL that you type into your browser was _/md-posts_, a markdown file with a path: _'/md-posts'_ inside it's frontmatter, would be a hit.
+
+The query then uses the markdownRemark plugin to transform the post markdown to HTML and make both the path and title from it's frontmatter available iside {data}, that is passed down into the <Template /> component and then rendered.
+
+Gatsby is already configured to route all pages inside /src/pages as pages for our website. But now we have to register our posts, that are from the markdown files and the post.js template. To do this, we have to create a file named __gatsby-node.js__ inside the root directory of our app. We are going to use the [createPages Gatsby API](https://www.gatsbyjs.org/docs/node-apis/#createPages) to create pages from our post template:
+
+
+```js
+const path = require('path');
+
+exports.createPages = ({boundActionCreators, graphql}) => {
+  const {createPage} = boundActionCreators;
+  // const createPage = boundActionCreators.createPage;
+
+  const postTemplate = path.resolve('src/templates/post.js');
+
+  return graphql(`{
+    allMarkdownRemark {
+      edges {
+        node {
+          html
+          id
+          frontmatter {
+            path
+            title
+          }
+        }
+      }
+    }
+  }`)
+  .then(res => {
+    if(res.errors) {
+      return Promise.reject(res.errors);
+    }
+
+    res.data.allMarkdownRemark.edges.forEach(({node}) => {
+      createPage({
+        path: node.frontmatter.path,
+        component: postTemplate
+      })
+    })
+
+  })
+}
 ```
 
-Now we have Markdown available in GraphQL - as before, just start typing allMardownRemark (ENTER autocompletes) and then press **CTRL + ENTER** to complete your query:
+Save and restart your app - then open _http://localhost:8000/md-posts_ inside your web browser - Voila` !
 
 
-![](./gatsby_10.png)
+### Nested Routes with Markdown
 
+To create children post for the _./src/pages/FirstMDpost/index.md_ file, we can simply add more files to the folder and define nested routes inside their frontmatter - e.g. _./src/pages/FirstMDpost/myfirstpost.md_:
 
 
-Now we can query for the FrontMatter as well as the MD-to-HTML transformed content of each MD file we add to our pages folder:
+```
+---
+path: '/md-posts/first-post'
+title: 'First Blog Post'
+date:   '2017-10-05'
+author: 'Mike Polinowski'
+chapter: 'Markdown Posts'
+---
 
+# This is my first markdown Post!
+```
+
+and _./src/pages/FirstMDpost/mysecondpost.md_:
+
+```
+---
+path: '/md-posts/second-post'
+title: 'Second Blog Post'
+date:   '2017-10-05'
+author: 'Mike Polinowski'
+chapter: 'Markdown Posts'
+---
+
+# A dive into Markdown Syntax
+```
+
+They will be accessible via _http://localhost:8000/md-posts/first-post_ and _http://localhost:8000/md-posts/second-post_ respectively.
 
-![](./gatsby_11.png)
 
+### Creating an Index Page
+
+
+We can now use GraphQL to retrieve all of our Markdown pages and apply filter to them. For this test, we will just add the a table to our start page, showing the last 10 posts (I know we only made 3 so far...), we want to order them descending by date and only display pages that are inside the _chapter: 'Markdown Posts'_, which will exclude our _index.md_:
+
+
+```js
+const IndexPage = ({data}) => (
+  <div>
+      <h2>Markdown Index</h2>
+      <p>The table below sorts out all Markdown pages that are not inside the "Markdown Posts" chapter - as defined inside their frontmatter. It also applies a filter, to only display the latest 10 posts. Click on here to display &nbsp;
+      <Link to="/md-posts/">
+          all Markdown pages
+      </Link>
+      .</p>
+      <table>
+        <thead>
+          <tr>
+            <th>Date</th>
+            <th>Link</th>
+          </tr>
+        </thead>
+        <tbody>
+        {data.allMarkdownRemark.edges.map(post => (
+          <tr key={post.node.id}>
+            <td>
+              {post.node.frontmatter.date}
+            </td>
+            <td>
+              <Link
+                to={post.node.frontmatter.path}>
+                {post.node.frontmatter.title}
+              </Link>
+            </td>
+          </tr>
+        ))}
+        </tbody>
+      </table>
+  </div>
+)
+
+export const pageQuery = graphql`
+  query IndexQuery {
+      allMarkdownRemark(limit: 10
+      sort: {fields: [frontmatter___date], order: DESC}
+      filter: { frontmatter: { chapter: {eq: "Markdown Posts"} }}
+    ) {
+      edges {
+        node {
+          id
+          frontmatter {
+            path
+            title
+            date
+          }
+        }
+      }
+    }
+  }
+`
+```
+
+
+### Catching Links from Markdown
+
+
+Once you start adding links inside your Markdown files, you will notice that clicking them will reload your application - which isn't good :( But no worries here is [gatsby-plugin-catch-links](https://www.gatsbyjs.org/packages/gatsby-plugin-catch-links/) coming to your rescue! And the nice thing about it - you just install it, add to your Gatsby plugins inside _./gatsby-config.js_ and it just works:
+
+```
+npm install --save gatsby-plugin-catch-links
+```
+
+```js
+// In your gatsby-config.js
+plugins: [
+  `gatsby-plugin-catch-links`,
+]
+```
 
+Sweet!
 
 
 ## 12 Adding Material-UI
@@ -616,4 +817,4 @@ We now want to move our website from the development environment to our webserve
 npm run build
 ```
 
-You can find the output inside the */public* folder of your Gatsby App.
+You can find the output inside the _/public_ folder of your Gatsby App.
diff --git a/gatsby_10.png b/gatsby_10.png
index e91200f..81c7ba3 100644
Binary files a/gatsby_10.png and b/gatsby_10.png differ
diff --git a/gatsby_11.png b/gatsby_11.png
index f6bd314..4657927 100644
Binary files a/gatsby_11.png and b/gatsby_11.png differ
diff --git a/package.json b/package.json
index f78f903..69409ea 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "gatsby-source-filesystem": "^1.5.7",
     "gatsby-transformer-remark": "^1.7.19",
     "gatsby-transformer-sharp": "^1.6.13",
+    "jshint": "^2.9.5",
     "material-ui": "^1.0.0-beta.20",
     "material-ui-icons": "^1.0.0-beta.17",
     "prop-types": "^15.6.0",
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 482680f..406c3cc 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -9,7 +9,7 @@ import Counter from './../components/Counter'
 const IndexPage = ({data}) => (
   <div>
     <h1>Welcome to our new Gatsby site.</h1>
-    <p>Is this the right framework to rebuild our Wiki on? I don't know yet...</p>
+    <p>Is this the right framework to rebuild our Wiki on? I am starting to become more comfortable with the idea ...</p>
     <IndexButtons />
     <br/><br/><br/><br/>
       <h2>Markdown Index</h2>