diff --git a/content/media/css/custom.css b/content/media/css/custom.css
index 991bdf3..70ce993 100644
--- a/content/media/css/custom.css
+++ b/content/media/css/custom.css
@@ -1,3 +1,17 @@
+
+/*
+ * override some w3.css options
+ */
+@media (min-width:993px){.w3-sidebar.w3-collapse{display:none}}
+.w3-top {
+  width: 80%;
+}
+
+ul.posts > li {
+  padding-left: 1.5em;
+  text-indent: -1em;
+}
+
 .small {
   font-size: 80%;
 }
diff --git a/layout/base.j2 b/layout/base.j2
index cf1f2e2..5710c03 100644
--- a/layout/base.j2
+++ b/layout/base.j2
@@ -47,19 +47,45 @@
 	<meta name="viewport" content="{{ resource.meta.viewport }}">
 
 	{% block css %}
+	<link rel="stylesheet" href="{{ media_url('css/w3.css') }}">
 	<link rel="stylesheet" href="{{ media_url('css/custom.css') }}">
 	<link rel="stylesheet" href="{{ media_url('css/tufte.css') }}">
 	{% endblock css %}
 	{% block endhead %}{% endblock endhead %}
 </head>
 
-<body id="{{ resource.meta.id if resource.meta.id else resource.slug }}">
+<body class="w3-main" id="{{ resource.meta.id if resource.meta.id else resource.slug }}">
+<!-- from: https://www.w3schools.com/w3css/w3css_sidebar.asp -->
+<div class="w3-top">
+<div class="w3-bar w3-lightgrey">
+<button class="w3-bar-item w3-button w3-xlarge w3-right" onclick="w3_open()">&#9776;</button>
+</div>
+</div>
+<div class="w3-sidebar w3-animate-right w3-bar-block w3-collapse" style="width:350px;right:0;display:block;" id="mySidebar">
+  <button class="w3-bar-item w3-button" onclick="w3_close()">Close &times;</button>
+	{% set hierarchy = node.rwalk()|list %}
+        {% for yeargrp in hierarchy[-1].walk_resources_sorted_by_time()|groupby("meta.created.year")|reverse %}
+          <div class="w3-dropdown-hover w3-dropdown-click">
+            <button class="w3-button">{{ yeargrp.grouper }}{# font awesome <i class="fa fa-caret-down"></i> #}</button>
+            <div class="w3-dropdown-content w3-bar-block">
+              {% for monthgrp in yeargrp.list|groupby("meta.created.month")|reverse %}
+                <button class="w3-button">{{ monthgrp.list[0].meta.created|date_format('%B') }}{# font awesome <i class="fa fa-caret-down"></i> #}</button>
+                {% for item in monthgrp.list %}
+                  <div class="w3-dropdown-click w3-bar-block" style="margin-left: 0.75em;">
+                    <a href="{{ content_url(item.url) }}" class="no-tufte-underline w3-bar-item w3-button">{{ item.meta.title }}</a>
+                  </div>
+                {% endfor %}
+              {% endfor %}
+            </div>
+          </div>
+        {% endfor %}
+</div>
 	{% block content %}
 	<div class="site" id="main" role="main">
 		{% block container %}
 		<header class="banner clearfix title">
 			{% block header -%}
-			<h1>{{ site.context.title }}</h1>
+			<h1><a class="no-tufte-underline" href="{{ content_url('/') }}">{{ site.context.title }}</a></h1>
 			{%- endblock %}
 		</header>
 		{% block main %}
@@ -83,6 +109,18 @@
 {% endblock scripts %}
 
 
+<script>
+/* incase there is no JS, always make it visible */
+document.getElementById("mySidebar").style.display = "none";
+
+function w3_open() {
+  document.getElementById("mySidebar").style.display = "block";
+}
+
+function w3_close() {
+  document.getElementById("mySidebar").style.display = "none";
+}
+</script>
 <!--[if lt IE 7 ]>
 <script src="js/libs/dd_belatedpng.js"></script>
 <script>DD_belatedPNG.fix('img, .png_bg'); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script>
diff --git a/layout/tagged_posts.j2 b/layout/tagged_posts.j2
index 326b5c2..b5b3ea2 100644
--- a/layout/tagged_posts.j2
+++ b/layout/tagged_posts.j2
@@ -3,7 +3,7 @@
 {% block main %}
 <section class="archives">
 <h1 class="tag title">{{ tag.name }}</h1>
-<ul class="posts clear">
+<ul class="posts clear w3-ul">
 {% for resource in walker() -%}
 <li class="post clear">
     <time datetime="{{ resource.meta.created.strftime('%Y-%m-%d') }}">
@@ -11,7 +11,7 @@
     </time>
     <a href="{{ content_url(resource.url) }}">{{ resource.meta.title }}</a>
     {% if resource.meta.tags %}
-    <ul class="tags">
+    <ul class="tags clear">
     {% for tag in resource.meta.tags %}
     <li>
         <a class="small" href="{{ content_url('search/label/'~tag~'.html') }}">
diff --git a/requirements.txt b/requirements.txt
index 4da2c06..f23f3a7 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,3 +1,3 @@
--e git+https://www.funkthat.com/gitea/jmg/hyde.git@aa02fc981079e243a91242eb9e90eaa272f26b59#egg=hyde
+-e git+https://www.funkthat.com/gitea/jmg/hyde.git@cb5a12ba06b4910aeddcef2899f05894fc2ef549#egg=hyde
 markdown==3.3.4
 lxml
