diff --git a/docs/docs/assets/ic_fluent_caret_left_24_filled.svg b/docs/docs/assets/ic_fluent_caret_left_24_filled.svg
new file mode 100644
index 0000000..e677fb4
--- /dev/null
+++ b/docs/docs/assets/ic_fluent_caret_left_24_filled.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15 17.898c0 1.074-1.265 1.648-2.073.941l-6.31-5.522a1.75 1.75 0 0 1 0-2.634l6.31-5.522c.808-.707 2.073-.133 2.073.941v11.796Z" fill="#ffffff"/></svg>
\ No newline at end of file
diff --git a/docs/docs/assets/ic_fluent_chevron_left_24_filled.svg b/docs/docs/assets/ic_fluent_chevron_left_24_filled.svg
new file mode 100644
index 0000000..ee69b9f
--- /dev/null
+++ b/docs/docs/assets/ic_fluent_chevron_left_24_filled.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z" fill="#ffffff"/></svg>
\ No newline at end of file
diff --git a/docs/docs/index.html b/docs/docs/index.html
index fc592a2..c274840 100644
--- a/docs/docs/index.html
+++ b/docs/docs/index.html
@@ -63,16 +63,16 @@
     </div>
     </div>
   </div>
-
   
 
 <div id="drawer" class="navdrawer">
-    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><img src="./assets/ic_fluent_chevron_left_24_filled.svg" width="30px"></a>
     <a href="#">About</a>
     <a href="#">Services</a>
     <a href="#">Clients</a>
     <a href="#">Contact</a>
   </div>
+  <div id="drawerbg" class="navdrawerbg" onclick="closeNav()"></div>
   <div class="footer">
     <p class="ftrtext">Created by <a>KZacharski (Puffercat)</a></p>
     <p class="ftrtext">Project created with diji 1.1</p>
diff --git a/docs/docs/script.js b/docs/docs/script.js
index bf4e8ac..094246c 100644
--- a/docs/docs/script.js
+++ b/docs/docs/script.js
@@ -1,8 +1,17 @@
+var isOpen = false
+
 function openNav() {
     document.getElementById("drawer").style.width = "250px";
+    document.getElementById("drawerbg").style.width = "100%";
+
+    isOpen = true
   }
   
   /* Set the width of the side navigation to 0 */
   function closeNav() {
     document.getElementById("drawer").style.width = "0";
-  } 
\ No newline at end of file
+    document.getElementById("drawerbg").style.width = "0";
+    isOpen = false
+  } 
+
+  
\ No newline at end of file
diff --git a/docs/docs/style.css b/docs/docs/style.css
index d3591f1..519e9f8 100644
--- a/docs/docs/style.css
+++ b/docs/docs/style.css
@@ -60,9 +60,22 @@ color: white;
     left: 0;
     background-color: #111; /* Black*/
     overflow-x: hidden; /* Disable horizontal scroll */
-    padding-top: 60px; /* Place content 60px from the top */
+    padding-top: 15px; /* Place content 60px from the top */
     transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
   }
+
+  .navdrawerbg {
+    height: 100%; /* 100% Full-height */
+    width: 0; /* 0 width - change this with JavaScript */
+    position: fixed; /* Stay in place */
+    z-index: 0; /* Stay on top */
+    top: 0; /* Stay at the top */
+    left: 0;
+    background-color: transparent; /* Black*/
+    overflow-x: hidden; /* Disable horizontal scroll */
+    padding-top: 15px; /* Place content 60px from the top */
+    transition: 0s; /* 0.5 second transition effect to slide in the sidenav */
+  }
   
   /* The navigation menu links */
   .navdrawer a {
@@ -94,12 +107,12 @@ color: white;
     padding: 20px;
   }
   
-  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
+  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) 
   @media screen and (max-height: 450px) {
     .navdrawer {padding-top: 15px;}
     .navdrawer a {font-size: 18px;}
     
-  }
+  }*/