diff --git a/_data/menu.yml b/_data/menu.yml
index 1768057..001e37f 100644
--- a/_data/menu.yml
+++ b/_data/menu.yml
@@ -1,17 +1,29 @@
 - title: Home
   link: /
+  icon: home
+  initclass: active
 
 - title: About
   link: /about
+  icon: users
+  initclass: ''
 
 - title: Blog
   link: /blog
+  icon: newspaper-o
+  initclass: ''
 
 - title: Library 
   link: /library
+  icon: database
+  initclass: ''
   
 - title: Guide for submissions
   link: /guide
+  icon: map
+  initclass: ''
 
 - title: Publications
   link: /publications
+  icon: book
+  initclass: ''
diff --git a/_includes/header.html b/_includes/header.html
index b490d05..88f1444 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,18 +1,5 @@
 <div id="header_wrap" class="outer">
     <header class="inner">
-      <!--{% if site.github.is_project_page %}
-        <a id="forkme_banner" href="{{ site.github.repository_url }}">View on GitHub</a>
-      {% endif %}-->
-
       {% include site-title.html %}
-
-      <!--{% if site.show_downloads %}
-        <section id="downloads">
-          <a class="zip_download_link" href="{{ site.github.zip_url }}">Download this project as a .zip file</a>
-          <a class="tar_download_link" href="{{ site.github.tar_url }}">Download this project as a tar.gz file</a>
-        </section>
-      {% endif %}-->
-      
-      {% include navigation.html %}
     </header>
 </div>
diff --git a/_includes/navigation.html b/_includes/navigation.html
index c8e1e30..630d9dd 100644
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@@ -1,7 +1,20 @@
-<nav>
-    <ul>
+<nav class="main-menu">
+  <img style="width: 100%; border: none; box-shadow: none; align-self: baseline;" src="{{ site.url }}{{site.baseurl}}/assets/Logo_noText.png">
+  <ul>
       {% for item in site.data.menu %}
-      <li><a href="{{site.baseurl}}{{item.link}}">{{item.title}}</a></li>
+      <li class="list-item">
+        <a href="{{site.baseurl}}{{item.link}}">
+          <span class="icon"><i class="fas fa-{{item.icon}}" aria-hidden="true"></i></span>
+          <span class="menu-title">{{item.title}}</span>
+        </a>
+      </li>
       {% endfor %}
-    </ul>
+      <li>
+        <a href="https://github.com/Archaeology-ABM">
+          <span class="icon"><i class="fab fa-github" aria-hidden="true"></i></span>
+          <span class="menu-title">On GitHub</span>
+        </a>
+      </li>
+  </ul>
 </nav>
+<script src="{{ site.baseurl }}/assets/js/select-menu.js" type="text/javascript"></script>
diff --git a/_includes/site-title.html b/_includes/site-title.html
index e916f14..28e352a 100644
--- a/_includes/site-title.html
+++ b/_includes/site-title.html
@@ -1,15 +1,15 @@
 <div class="headerRow">
-  <div class="headerColumn">
+  <div class="headerColumn" style="text-align: right;">
     <span class="faded faded-wide faded-all">
-      <img style="width: 100%; padding: 0px;border: 0px;" src="{{ site.url }}{{site.baseurl}}/assets/Logo_noText.png" width="33%">
+      <img style="width: 50%; padding: 0px;border: 0px;" src="{{ site.url }}{{site.baseurl}}/assets/Logo_noText.png">
     </span>
   </div>
-  <div class="headerColumn" style="color:lightcyan; font-size: 120%;">
-    <strong style="color: #03989E; font-size: 150%;">N</strong>etwork for<br>
-    <strong style="color: #03989E; font-size: 150%;">A</strong>gent-based modelling of<br>
-    <strong style="color: #03989E; font-size: 150%;">S</strong>ocio-ecological<br>
-    <strong style="color: #03989E; font-size: 150%;">S</strong>ystems in<br>
-    <strong style="color: #03989E; font-size: 150%;">A</strong>rchaeology
+  <div class="headerColumn" style="color:lightcyan; font-size: 100%;">
+    <strong style="color: #03989E; font-size: 100%;">N</strong>etwork for<br>
+    <strong style="color: #03989E; font-size: 100%;">A</strong>gent-based modelling of<br>
+    <strong style="color: #03989E; font-size: 100%;">S</strong>ocio-ecological<br>
+    <strong style="color: #03989E; font-size: 100%;">S</strong>ystems in<br>
+    <strong style="color: #03989E; font-size: 100%;">A</strong>rchaeology
   </div>
 </div>
 <!-- <h1 id="project_title">{{ site.title | default: site.github.repository_name }}</h1>
diff --git a/_layouts/default.html b/_layouts/default.html
index 0fb4473..73e6d1a 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -16,14 +16,17 @@
   <body>
 
     {% include header.html %}
-      
+    
     <!-- MAIN CONTENT -->
     <div id="main_content_wrap" class="outer">
-      <section id="main_content" class="inner">
+      
+      {% include navigation.html %}
+      
+      <div id="main_content" class="inner">
         {% include text-to-speech-player.html  %}
-          
+        <br>
         {{ content }}
-      </section>
+      </div>
     </div>
 
     {% include footer.html %}
diff --git a/_layouts/post.html b/_layouts/post.html
index 6d0e579..7532036 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -6,6 +6,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2">
     <link rel="stylesheet" type="text/css" media="screen" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
+    
     {% seo %}
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
@@ -16,8 +19,13 @@
 
     <!-- MAIN CONTENT -->
     <div id="main_content_wrap" class="outer">
-      <section id="main_content" class="inner">
+
+      {% include navigation.html %}
+
+      <div id="main_content" class="inner">
+
         {% include text-to-speech-player.html  %}
+        <br>
         <!-- DATE -->
         <p style="font-size: 80%; font-style: italic; text-align: right; color: #a9a9a9; margin: 0;">
           <time datetime="{{ page.date | date: "%Y-%m-%d" }}">
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 06a4243..3d7e1c7 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -3,31 +3,158 @@
 
 @import "{{ site.theme }}";
 
-#forkme_banner{ display: none !important; }
+$headerandsidebackground: #212121;
+$colorhighlight: #03989E;
+$headerandsideborderwidth: 10px;
+$white: #ddd;
+$pad:     0.925rem;
+$sidepadopen: 250px;
+$sidepadclosed: 70px;
+$headerheight: 200px;
 
-#header_wrap > header > nav > a {
-color: white;
-  text-decoration: underline;
-  font-size: larger;
+*
+{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.inner
+{
+  max-width: 80%;
+}
+
+/*body
+{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: white
+}*/
+
+#header_wrap
+{
+  height: $headerheight;
+  margin-top: 0%;
+  border-bottom: $headerandsideborderwidth solid $colorhighlight;
 }
 
-#header_wrap > header > nav > a:hover {
-color: gray;
+#header_wrap .inner
+{
+  padding: 10px 0px 0px 30px;
+}
+
+.headerRow {
+  content: "";
+  display: table;
+  clear: both;
+}
+.headerColumn {
+  float: left;
+  width: 45%;
+  padding: 10px;
 }
 
-nav {
-  margin-bottom: 20px;
+#footer_wrap
+{
+  padding-left: $sidepadclosed;
 }
-nav ul {
+
+nav
+{
+  position: fixed;
+  top: 0%;
+  height: 100%;
+  left: 0%;
+  width: $sidepadclosed;
   display: flex;
+  background-color: $headerandsidebackground;
+  box-shadow: $headerandsideborderwidth 0 0 $colorhighlight;
+  border-left: 1px solid $colorhighlight;
+  overflow: hidden;
+  transition: width 0.5s;
+  z-index: 1000;
+}
+nav:hover
+{
+  width: $sidepadopen;
+}
+nav ul
+{
+  position: absolute;
+  top: $headerheight;
+  left: 0;
+  width: 100%;
+  padding-left: 5px;
+  padding-top: 30px;
+}
+nav ul li
+{
+  position: relative;
   list-style: none;
-}
-nav ul li {
-  margin-right: 10px;
+  width: 100%;
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+}
+nav ul li:hover
+{
+  background: $colorhighlight;
+  opacity: 50%;
+}
+nav ul li.list-item.active a {
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  background: $colorhighlight;
+  color: $white;
+}
+nav ul li a
+{
+  position: relative;
+  display: block;
+  width: 100%;
+  display: flex;
   text-decoration: none;
+  color: $colorhighlight;
+}
+nav ul li a:hover
+{
+  color: $white;
+}
+nav ul li a .icon
+{
+  position: relative;
+  display: block;
+  min-width: 60px;
+  height: 60px;
+  line-height: 70px;
+  text-align: center;
+}
+nav ul li a .icon i
+{
+  position: relative;
+  font-size: 1.5em;
+  z-index: 1;
+}
+nav ul li a .menu-title
+{
+  position: relative;
+  display: block;
+  padding-left: 5px;
+  height: 60px;
+  line-height: 60px;
+  white-space: nowrap;
 }
-nav ul li a {
-  color: #03989E;
+
+#main_content_wrap
+{
+  padding-left: $sidepadclosed;
+  transition: transform 400ms, opacity 400ms;
+}
+
+#main_content
+{
+  max-width: 80%;
 }
 
 .grid-container{
@@ -36,9 +163,9 @@ nav ul li a {
   grid-gap: 10px;
 }
 .grid-element{
-  background-color: #ddd;
+  background-color: $white;
   border: 1px solid;
-  border-color: #666;
+  border-color: $headerandsidebackground;
   text-align: center;
   padding: 15px;
 }
@@ -55,32 +182,19 @@ nav ul li a {
   border-radius:50%;
 }
 
-* {
-  box-sizing: border-box;
-}
-
 /* Create two equal columns that floats next to each other */
 .column {
   float: left;
   width: 50%;
   padding: 10px;
 }
-.headerColumn {
-  float: left;
-  width: 45%;
-  padding: 10px;
-}
 /* Clear floats after the columns */
 .row:after {
   content: "";
   display: table;
   clear: both;
 }
-.headerRow:after {
-  content: "";
-  display: table;
-  clear: both;
-}
+
 /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
 @media screen and (max-width: 600px) {
   .column {
@@ -98,7 +212,7 @@ nav ul li a {
   bottom:           0;
   right:            0;
   display:          inline-flex;
-  color:            #000000;
+  color:            $headerandsidebackground;
   cursor:           pointer;
   align-items:      center;
   justify-content:  center;
@@ -107,5 +221,7 @@ nav ul li a {
   padding:          .25em;
   width:            2em;
   height:           2em;
-  background-color: #03989E;
-}
\ No newline at end of file
+  background-color: $colorhighlight;
+}
+
+#forkme_banner{ display: none !important; }
\ No newline at end of file
diff --git a/assets/js/select-menu.js b/assets/js/select-menu.js
new file mode 100644
index 0000000..143d343
--- /dev/null
+++ b/assets/js/select-menu.js
@@ -0,0 +1,16 @@
+// Get the current page URL
+const currentPage = window.location.href;
+
+// Select all the 'nav ul li a' elements
+const menuItems = document.querySelectorAll('nav ul li a');
+
+menuItems.forEach(item => {
+  // Check if the href of the 'a' tag matches the current URL
+  if (item.href === currentPage) {
+    // Add the 'active' class to the parent 'li' element
+    item.parentElement.classList.add('active');
+  } else {
+    // Optionally, remove the 'active' class from the parent 'li' element
+    item.parentElement.classList.remove('active');
+  }
+});
diff --git a/index.md b/index.md
index 5659bcf..ee00702 100644
--- a/index.md
+++ b/index.md
@@ -9,5 +9,3 @@ Agent-based modelling (ABM) has in recent years developed into an important meth
 ABM focuses on the dynamics and actions of individual agents as computational entities that act autonomously and can represent social agents that interact with each other and their environment. When designing an agent-based model, the aim is not to mimic the patterns of our data but to recreate the mechanisms that, under certain conditions, will generate those patterns.
 
 {% include home-grid.html %}
-
-See [NASSA organisation page in GitHub](https://github.com/Archaeology-ABM).