diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss
index e629692..4642ce6 100644
--- a/assets/scss/common/_dark.scss
+++ b/assets/scss/common/_dark.scss
@@ -194,3 +194,12 @@ body.dark .card {
 body.dark .card.bg-light {
   background: $body-overlay-dark !important;
 }
+
+body.dark .navbar .menu-icon .navicon {
+  background: $navbar-dark-color;
+}
+
+body.dark .navbar .menu-icon .navicon:before,
+body.dark .navbar .menu-icon .navicon:after {
+  background: $navbar-dark-color;
+}
diff --git a/assets/scss/layouts/_header.scss b/assets/scss/layouts/_header.scss
index 0843c1d..35d96b0 100644
--- a/assets/scss/layouts/_header.scss
+++ b/assets/scss/layouts/_header.scss
@@ -108,3 +108,76 @@
   background-position: right calc(0.375em + 0.1875rem) center;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 }
+
+/* 
+ * Source: https://medium.com/creative-technology-concepts-code/responsive-mobile-dropdown-navigation-using-css-only-7218e4498a99
+*/
+
+
+/* Style the menu icon for the dropdown */
+
+.navbar .menu-icon {
+  cursor: pointer;
+  /* display: inline-block; */
+  /* float: right; */
+  padding: 1.125rem 0.625rem;
+  margin: 0 0 0 -0.625rem;
+  /* position: relative; */
+  user-select: none;
+}
+
+.navbar .menu-icon .navicon {
+  background: $navbar-light-color;
+  display: block;
+  height: 2px;
+  position: relative;
+  transition: background .2s ease-out;
+  width: 18px;
+}
+
+.navbar .menu-icon .navicon:before,
+.navbar .menu-icon .navicon:after {
+  background: $navbar-light-color;
+  content: '';
+  display: block;
+  height: 100%;
+  position: absolute;
+  transition: all .2s ease-out;
+  width: 100%;
+}
+
+.navbar .menu-icon .navicon:before {
+  top: 5px;
+}
+
+.navbar .menu-icon .navicon:after {
+  top: -5px;
+}
+
+/* Add the icon and menu animations when the checkbox is clicked */
+
+.navbar .menu-btn {
+  display: none;
+}
+
+.navbar .menu-btn:checked ~ .navbar-collapse {
+  display: block;
+  max-height: 100vh;
+}
+
+.navbar .menu-btn:checked ~ .menu-icon .navicon {
+  background: transparent;
+}
+
+.navbar .menu-btn:checked ~ .menu-icon .navicon:before {
+  transform: rotate(-45deg);
+}
+
+.navbar .menu-btn:checked ~ .menu-icon .navicon:after {
+  transform: rotate(45deg);
+}
+
+.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
+.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
+  top: 0;
+}
diff --git a/layouts/index.headers b/layouts/index.headers
index 641a486..385e241 100644
--- a/layouts/index.headers
+++ b/layouts/index.headers
@@ -2,7 +2,7 @@
   Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
   X-Content-Type-Options: nosniff
   X-XSS-Protection: 1; mode=block
-  Content-Security-Policy:  default-src 'self'; img-src 'self' data:; script-src 'self' 'unsafe-eval'; style-src 'self'
+  Content-Security-Policy:  default-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self'
   X-Frame-Options: SAMEORIGIN
   Referrer-Policy: strict-origin
   Feature-Policy: geolocation 'self'
diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html
index 0fa4910..c23e750 100644
--- a/layouts/partials/header/header.html
+++ b/layouts/partials/header/header.html
@@ -1,6 +1,10 @@
 <!-- <div class="header-bar fixed-top"></div> -->
-<header x-data="{ open: false }" class="navbar fixed-top navbar-expand-md navbar-light">
+<header class="navbar fixed-top navbar-expand-md navbar-light">
   <div class="container">
+
+    <input class="menu-btn order-3" type="checkbox" id="menu-btn">
+    <label class="menu-icon d-md-none" for="menu-btn"><span class="navicon"></span></label>
+    
     <a class="navbar-brand order-0 mr-auto" href="{{ .Site.BaseURL }}">{{ .Site.Params.Title }}</a>
     <button id="mode" class="btn btn-link order-1 order-md-4" type="button" aria-label="Toggle mode">
       <span class="toggle-dark"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
@@ -13,11 +17,16 @@
         </li>
       {{ end -}}
     </ul>
-    <button @click="open = true" id="navigation" class="btn btn-link order-3 d-md-none" type="button" aria-expanded="false" aria-label="Toggle navigation">
-      <svg x-bind:class="{ 'd-none': open }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-      <svg class="d-none" x-bind:class="{ 'd-block': open }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+
+
+
+    <!--
+    <button id="navigation" class="btn btn-link order-3 d-md-none" type="button" aria-expanded="false" aria-label="Toggle navigation">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
     </button>
-    <div x-show="open" @click.away="open = false" x-bind:class="{ 'd-block': open }" class="navbar-collapse order-4 order-md-1">
+    -->
+    <div class="collapse navbar-collapse order-4 order-md-1">
       <ul class="navbar-nav main-nav mr-auto order-5 order-md-2">
         {{- $current := . -}}
         {{ range .Site.Menus.main -}}