diff --git a/assets/scss/layouts/drawer.scss b/assets/scss/layouts/drawer.scss
index 10d22fa..205415c 100644
--- a/assets/scss/layouts/drawer.scss
+++ b/assets/scss/layouts/drawer.scss
@@ -17,6 +17,11 @@ body {
 
 #drawer-toggler:checked ~ body, .drawer-body-scrolling-disabled {
   overflow: hidden;
+  background:grey;
+  * {
+      color:red!important;
+  }
+
 }
 
 .main-page-wrap {
@@ -80,3 +85,9 @@ body {
     font-size: 1.3em;
   }
 }
+#drawer-toggler:checked + .drawer{
+    width: 300px;
+    .drawer-links {
+	opacity: 1;
+    }
+}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 1eb7762..ab3b40f 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -5,8 +5,9 @@
     
     {{- block "head" . -}}{{ end }}
 </head>
-    <input type=checkbox hidden name=drawer-toggler id=drawer-toggler>
 <body>
+    <input type=checkbox hidden name=drawer-toggler id=drawer-toggler>
+    {{ partial "drawer" . }}
     <div
         id="main-page-wrap"
         class="main-page-wrap"
diff --git a/layouts/partials/drawer.html b/layouts/partials/drawer.html
index 0f3d6f8..f723acb 100644
--- a/layouts/partials/drawer.html
+++ b/layouts/partials/drawer.html
@@ -3,11 +3,11 @@
 	class="drawer">
     <div class="drawer-content">
 	<div class="drawer-close-container">
-	    <div 
+	    <label 
 	     class="drawer-close-button" 
 	     for="drawer-toggler">
 		<i class="fa fas fa-times-circle"></i>
-	    </div>
+	    </label>
 	</div>
 	<div class="drawer-links">
 	{{ range .Site.Menus.main.ByWeight }}
