diff --git a/src/layouts/partials/header.html b/src/layouts/partials/header.html
index e69de29..b535171 100644
--- a/src/layouts/partials/header.html
+++ b/src/layouts/partials/header.html
@@ -0,0 +1,43 @@
+<div class="offcanvas black-bg offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasRightLabel">MENU</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+
+      <ul class="navbar-nav ms-auto me-4 my-auto">
+        {{ range .Site.Menus.main }}
+        <li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3">
+          <a class="top-nav-link nav-link{{ if $.IsMenuCurrent "main" . }} active" aria-current="page {{ end }}" href="{{ .URL }}">{{ .Name}}</a>
+        </li>
+        {{ end }}
+      </ul>
+
+  </div>
+</div>
+
+<style>
+
+  @media only screen and (max-width: 992px) {
+
+    .offcanvas{
+      border-left: 2px solid #949494;
+    }
+
+    .offcanvas-title{
+      font-size: 3vw;
+    }
+
+    a.top-nav-link{
+      color: #00ffd0!important;
+      font-size: 6vw;
+      text-align: right;
+    }
+
+    .btn-close{
+      color: white !important;
+    }
+
+  }
+
+</style>
diff --git a/src/layouts/partials/navbar.html b/src/layouts/partials/navbar.html
index d596bc9..668fbdd 100644
--- a/src/layouts/partials/navbar.html
+++ b/src/layouts/partials/navbar.html
@@ -1,18 +1,9 @@
 <nav class="navbar bg-dark navbar-expand-lg navbar-dark sticky-top my-auto main-nav">
     <div class="container-fluid top-nav">
       <a class="navbar-brand" href="#"><img class="nav-logo" src="/Images/tea-logo-2.svg"></a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span>
-          <input type="checkbox" id="checkbox1" class="checkbox1 visuallyHidden">
-          <label for="checkbox1">
-            <div class="hamburger hamburger1">
-              <span class="bar bar1"></span>
-              <span class="bar bar2"></span>
-              <span class="bar bar3"></span>
-              <span class="bar bar4"></span>
-            </div>
-          </label></span>
+      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
+        aria-controls="offcanvasRight" aria-expanded="false" aria-label="Toggle navigation">
+        MENU
       </button>
       <div class="collapse navbar-collapse pt-2 pb-2" id="navbarSupportedContent">
         <ul class="navbar-nav ms-auto me-4 my-auto">