diff --git a/docs/docs/index.html b/docs/docs/index.html
index 7c85c67..5bff45c 100644
--- a/docs/docs/index.html
+++ b/docs/docs/index.html
@@ -12,7 +12,7 @@
 <body>
 <div class="navbar">
     <img onclick="openNav()" class="navicon" src="./assets/ic_fluent_navigation_24_filled.svg" height="25px">
-    <img src="./assets/dijidocs.png" height="40px">
+    <a href="#"><img src="./assets/dijidocs.png" height="40px" style="display: block;"></a>
 </div>
 <div class="banner">
 <img src="./assets/dijidocsbanner.png" width="100%" class="bannerimg">
@@ -22,7 +22,9 @@
     <h1 class="t1">Welcome to diji docs.</h1>
     <h2 class="t2">for version 1.1</h2>
     <div class="container">
-      <div class="getstarted ge">
+    <div class="getstarted ge">
+      <a href="./introduction.html" style="text-decoration: none; color: white;">
+        <div style="width: 100%; height: 100%; display: flex; align-items: center;">
         <div class="getstartedcontentparent">
         <div class="getstartedcontent">
         <img src="./assets/ic_fluent_rocket_24_filled.svg" height="40px" class="gep">
@@ -31,7 +33,12 @@
       </div>
       </div>
       </div>
+      </a>
+      </div>
+      
       <div class="install ge">
+        <a href="./installation.html" style="text-decoration: none; color: white;">
+          <div style="width: 100%; height: 100%; display: flex; align-items: center;">
         <div class="getstartedcontentparent">
           <div class="getstartedcontent">
           <img src="./assets/ic_fluent_apps_add_in_24_filled.svg" height="40px" class="gep">
@@ -40,7 +47,11 @@
         </div>
         </div>
       </div>
+      </a>
+      </div>
       <div class="favicon ge">
+        <a href="./favicons.html" style="text-decoration: none; color: white;">
+          <div style="width: 100%; height: 100%; display: flex; align-items: center;">
         <div class="getstartedcontentparent">
           <div class="getstartedcontent">
           <img src="./assets/ic_fluent_star_24_filled.svg" height="40px" class="gep">
@@ -49,8 +60,11 @@
         </div>
         </div>
       </div>
+      </a>
+      </div>
       <div class="config ge">
-
+        <a href="./configuration.html" style="text-decoration: none; color: white;">
+          <div style="width: 100%; height: 100%; display: flex; align-items: center;">
         <div class="getstartedcontentparent">
           <div class="getstartedcontent">
           <img src="./assets/ic_fluent_settings_24_filled.svg" height="40px" class="gep">
@@ -60,6 +74,8 @@
         </div>
 
       </div>
+      </a>
+      </div>
     </div>
     </div>
   </div>
@@ -69,13 +85,26 @@
   <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>
+    <a href="./introduction.html" class="navdrawerlink">Introduction</a>
+    <a href="./installation.html" class="navdrawerlink">Installation</a>
+    <a href="./favicons.html" class="navdrawerlink">Favicons</a>
+    <a href="./configuration.html" class="navdrawerlink">Configuration</a>
+    <a href="./open-source.html" class="navdrawerlink">Open source</a>
+    <a href="./roadmap.html" class="navdrawerlink">Roadmap</a>
+    <div style="height: 60px;"></div>
+    <!--<div class="drawerbottomlinks">
+      <div class="blc">
+      <a class="bottomlink" href="https://diji.puffercat.xyz">Main website ></a>
+      <a class="bottomlink" href="https://github.com/KZacharski/diji">GitHub ></a>
+      <a class="bottomlink" href="https://github.com/KZacharski/diji/tree/github-files/docs/docs">Docs GitHub ></a>
+      </div>
+    </div>-->
   </div>
   <div id="drawerbg" class="navdrawerbg" onclick="closeNav()"></div>
   <div class="footer">
     <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>
+    <p class="ftrtext"><a href="https://diji.puffercat.xyz" class="footerlink ftlpadding">Main website</a> <a href="https://github.com/KZacharski/diji" class="footerlink ftlpadding">GitHub</a> <a href="https://github.com/KZacharski/diji/tree/github-files/docs/docs" class="footerlink ftlpadding">Docs Github</a></p>
   </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/introduction.html b/docs/docs/introduction.html
new file mode 100644
index 0000000..b9fa1b6
--- /dev/null
+++ b/docs/docs/introduction.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+<title>Introduction - diji docs</title>
+<link rel="icon" type="image" href="./assets/favicon.png">
+<link rel="stylesheet" type="text/css" href="style.css">
+<script src="script.js"></script>
+</head>
+<body>
+<div class="navbar">
+    <img onclick="openNav()" class="navicon" src="./assets/ic_fluent_navigation_24_filled.svg" height="25px">
+    <a href="./index.html"><img src="./assets/dijidocs.png" height="40px" style="display: block;"></a>
+</div>
+  <div class="content">
+<div class="anotherfuckingcontainer iafc">
+    <h1 class="t1">Introduction</h1>
+    <h3 class="t2">Last edited: 20 August 2023<a href="https://github.com/KZacharski/diji/blob/github-files/docs/docs/introduction.html" class="linkeffect ghlink">Open on GitHub</a></h3>
+  </div>
+  </div>
+  
+
+<div id="drawer" class="navdrawer">
+  <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="./index.html" class="navdrawerlink">Homepage</a>
+    <a href="#" class="navdrawerlinkactive">Introduction</a>
+    <a href="./installation.html" class="navdrawerlink">Installation</a>
+    <a href="./favicons.html" class="navdrawerlink">Favicons</a>
+    <a href="./configuration.html" class="navdrawerlink">Configuration</a>
+    <a href="./open-source.html" class="navdrawerlink">Open source</a>
+    <a href="./roadmap.html" class="navdrawerlink">Roadmap</a>
+    <div style="height: 60px;"></div>
+    <!--<div class="drawerbottomlinks">
+      <div class="blc">
+      <a class="bottomlink" href="https://diji.puffercat.xyz">Main website ></a>
+      <a class="bottomlink" href="https://github.com/KZacharski/diji">GitHub ></a>
+      <a class="bottomlink" href="https://github.com/KZacharski/diji/tree/github-files/docs/docs">Docs GitHub ></a>
+      </div>
+    </div>-->
+  </div>
+  <div id="drawerbg" class="navdrawerbg" onclick="closeNav()"></div>
+  <div class="footer">
+    <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>
+    <p class="ftrtext"><a href="https://diji.puffercat.xyz" class="footerlink ftlpadding">Main website</a> <a href="https://github.com/KZacharski/diji" class="footerlink ftlpadding">GitHub</a> <a href="https://github.com/KZacharski/diji/tree/github-files/docs/docs" class="footerlink ftlpadding">Docs Github</a></p>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/docs/style.css b/docs/docs/style.css
index 9a7870f..5af930f 100644
--- a/docs/docs/style.css
+++ b/docs/docs/style.css
@@ -63,6 +63,7 @@ color: white;
     background-color: #000000; /* Black*/
     overflow-x: hidden; /* Disable horizontal scroll */
     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);
   }
@@ -178,7 +179,7 @@ color: white;
     "config";
   }
 
-  @media only screen and (min-width: 35em) {  .container {
+  @media only screen and (min-width: 38em) {  .container {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     gap: 20px 20px;
@@ -229,6 +230,8 @@ color: white;
   } .gep {
     margin: 0;
     padding: 0;
+    color: #ffffff;
+    text-decoration: none;
   } .getstartedcontentparent {
     margin: 20px;
  /*   margin-left: auto;
@@ -253,4 +256,44 @@ color: white;
 
 .footerlink:hover {
     opacity: 0.6;
+} /*.drawerbottomlinks {
+  background-color: #000;
+
+  width: 250px;
+
+
+} .bottomlink {
+ 
+  color: white;
+  display: block;
+  margin: 2px;
+  padding: 2px;
+
+  margin-left: 10px;
+  margin-right: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  transition: 0.2s;
+} .blc {
+ /* margin-bottom: 65px;   margin-top: 30px;
+
+} .bottomlink:hover {
+  opacity: 0.6;
+}*/
+.ftlpadding {
+  padding: 5px;
+  margin: 5px;
+  padding-left: 0;
+  padding-right: 0;
+} .linkeffect {
+  color: white;
+  transition: .2s;
+}
+
+.linkeffect:hover {
+  opacity: 0.6;
+} .ghlink {
+  margin-left: 10px;
+} .iafc {
+  padding-bottom: 30px;
 }
\ No newline at end of file
