diff --git a/docs/docs/index.html b/docs/docs/index.html
index c274840..7c85c67 100644
--- a/docs/docs/index.html
+++ b/docs/docs/index.html
@@ -27,7 +27,7 @@
         <div class="getstartedcontent">
         <img src="./assets/ic_fluent_rocket_24_filled.svg" height="40px" class="gep">
         <h2 class="gep">Get started</h2>
-        <p class="gep">Read the introduction and download diji</p>
+        <p class="gep gepar">Read the introduction and download diji</p>
       </div>
       </div>
       </div>
@@ -36,7 +36,7 @@
           <div class="getstartedcontent">
           <img src="./assets/ic_fluent_apps_add_in_24_filled.svg" height="40px" class="gep">
           <h2 class="gep">Install diji</h2>
-          <p class="gep">How to install diji properly</p>
+          <p class="gep gepar">How to install diji properly</p>
         </div>
         </div>
       </div>
@@ -45,7 +45,7 @@
           <div class="getstartedcontent">
           <img src="./assets/ic_fluent_star_24_filled.svg" height="40px" class="gep">
           <h2 class="gep">Favicons</h2>
-          <p class="gep">Learn how to set your own default favicon</p>
+          <p class="gep gepar">Learn how to set your own default favicon</p>
         </div>
         </div>
       </div>
@@ -55,7 +55,7 @@
           <div class="getstartedcontent">
           <img src="./assets/ic_fluent_settings_24_filled.svg" height="40px" class="gep">
           <h2 class="gep">Configuration</h2>
-          <p class="gep">Extra options explained</p>
+          <p class="gep gepar">Extra options explained</p>
         </div>
         </div>
 
@@ -66,15 +66,15 @@
   
 
 <div id="drawer" class="navdrawer">
-    <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>
+  <img src="./assets/dijidocs.png" height="40px" class="logodrawer">  
+  <a href="javascript:void(0)" class="closebtn navdrawera" onclick="closeNav()"><img src="./assets/ic_fluent_chevron_left_24_filled.svg" width="30px"></a>
+    <a href="#" class="navdrawerlinkactive">Homepage</a>
+    <a href="#" class="navdrawerlink">Introduction</a>
+    <a href="#" class="navdrawerlink">Installation</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">Created by <a href="https://puffercat.xyz" class="footerlink">KZacharski (Puffercat)</a></p>
     <p class="ftrtext">Project created with diji 1.1</p>
   </div>
 </body>
diff --git a/docs/docs/style.css b/docs/docs/style.css
index 519e9f8..0f0bd5d 100644
--- a/docs/docs/style.css
+++ b/docs/docs/style.css
@@ -39,6 +39,8 @@ color: white;
   margin: 0;
 }
 
+
+
 .banner {
   object-fit: cover;
   max-height: 400px;
@@ -58,10 +60,11 @@ color: white;
     z-index: 1; /* Stay on top */
     top: 0; /* Stay at the top */
     left: 0;
-    background-color: #111; /* Black*/
+    background-color: #000000; /* Black*/
     overflow-x: hidden; /* Disable horizontal scroll */
-    padding-top: 15px; /* Place content 60px from the top */
-    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
+    padding-top: 50px; /* Place content 60px from the top */
+    transition: 0.3s; /* 0.5 second transition effect to slide in the sidenav */
+    box-shadow: 5px 0px 10px 0px rgba(0, 0, 0, 0.473);
   }
 
   .navdrawerbg {
@@ -78,28 +81,68 @@ color: white;
   }
   
   /* The navigation menu links */
-  .navdrawer a {
-    padding: 8px 8px 8px 32px;
+  .navdrawera {
+    padding: 6px 6px 6px 28px;
+    margin: 10px;
     text-decoration: none;
-    font-size: 25px;
-    color: #818181;
+    font-size: 17px;
+    color: #ffffff;
     display: block;
     transition: 0.3s;
   }
+
+  .navdrawerlink {
+    padding: 6px 6px 6px 10px;
+    margin: 10px;
+    text-decoration: none;
+    font-size: 17px;
+    color: #ffffff;
+    display: block;
+    font-weight: 500;
+    transition: 0.3s;
+    border-radius: 10px;
+  }
+
+  .navdrawerlinkactive {
+    padding: 6px 6px 6px 10px;
+    margin: 10px;
+    text-decoration: none;
+    font-size: 17px;
+    color: #000000;
+    background-color: #ffffff;
+    display: block;
+    font-weight: 500;
+    transition: 0.3s;
+    border-radius: 10px;
+  }
   
   /* When you mouse over the navigation links, change their color */
-  .navdrawer a:hover {
-    color: #f1f1f1;
+  .navdrawera:hover {
+    color: #969696;
+  }
+
+  .navdrawerlink:hover {
+    background-color: #ffffff15;
   }
   
   /* Position and style the close button (top right corner) */
   .navdrawer .closebtn {
     position: absolute;
     top: 0;
-    right: 25px;
+    margin-top: 0;
+    right: 7px;
     font-size: 36px;
     margin-left: 50px;
   }
+
+  .navdrawer .logodrawer {
+    position: absolute;
+    top: 10px;
+    margin-top: 0;
+    left: 7px;
+    font-size: 36px;
+    
+  }
   
   /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
   #main {
@@ -202,4 +245,11 @@ color: white;
     padding: 20px;
   } .ftrtext {
     margin: 5px;
-  }
\ No newline at end of file
+  } .footerlink {
+    color: white;
+    transition: .2s;
+}
+
+.footerlink:hover {
+    opacity: 0.6;
+}
\ No newline at end of file