diff --git a/docs/docs/assets/dijidocsbanner.png b/docs/docs/assets/dijidocsbanner.png
new file mode 100644
index 0000000..5760251
Binary files /dev/null and b/docs/docs/assets/dijidocsbanner.png differ
diff --git a/docs/docs/assets/ic_fluent_apps_add_in_24_filled.svg b/docs/docs/assets/ic_fluent_apps_add_in_24_filled.svg
new file mode 100644
index 0000000..b27457b
--- /dev/null
+++ b/docs/docs/assets/ic_fluent_apps_add_in_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="M10.5 3A2.5 2.5 0 0 1 13 5.5V11h5.5a2.5 2.5 0 0 1 2.5 2.5v5a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 18.5v-13A2.5 2.5 0 0 1 5.5 3h5Zm.5 10H5v5.5a.5.5 0 0 0 .5.5H11v-6Zm7.5 0H13v6h5.5a.5.5 0 0 0 .5-.5v-5a.5.5 0 0 0-.5-.5Zm-8-8h-5a.5.5 0 0 0-.5.5V11h6V5.5a.5.5 0 0 0-.5-.5Zm7.383-2.993L18 2a1 1 0 0 1 .993.883L19 3v2h2a1 1 0 0 1 .993.883L22 6a1 1 0 0 1-.883.993L21 7h-2v2a1 1 0 0 1-.883.993L18 10a1 1 0 0 1-.993-.883L17 9V7h-2a1 1 0 0 1-.993-.883L14 6a1 1 0 0 1 .883-.993L15 5h2V3a1 1 0 0 1 .883-.993L18 2l-.117.007Z" fill="#ffffff"/></svg>
\ No newline at end of file
diff --git a/docs/docs/assets/ic_fluent_rocket_24_filled.svg b/docs/docs/assets/ic_fluent_rocket_24_filled.svg
new file mode 100644
index 0000000..baeeace
--- /dev/null
+++ b/docs/docs/assets/ic_fluent_rocket_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="M13.057 7.431a2.5 2.5 0 1 1 3.536 3.536 2.5 2.5 0 0 1-3.536-3.536Zm2.475 1.06a1 1 0 1 0-1.414 1.415 1 1 0 0 0 1.414-1.414Z" fill="#ffffff"/><path d="M19.698 2.512a2.75 2.75 0 0 1 1.81 1.81l.207.665a6.75 6.75 0 0 1-1.673 6.776l-.998.998a3.497 3.497 0 0 1-.328 4.568l-1.242 1.242a.75.75 0 0 1-1.06 0l-1.59-1.59-.177.177a1.75 1.75 0 0 1-2.475 0l-.487-.487-.811 1.39a.75.75 0 0 1-1.178.153l-3.89-3.889a.75.75 0 0 1 .146-1.174l1.384-.829-.47-.47a1.75 1.75 0 0 1 0-2.475l.18-.18-1.592-1.59a.75.75 0 0 1 0-1.061l1.243-1.243a3.498 3.498 0 0 1 4.569-.327l.996-.995a6.75 6.75 0 0 1 6.773-1.674l.663.205Zm.378 2.256a1.25 1.25 0 0 0-.823-.823l-.662-.205a5.25 5.25 0 0 0-5.269 1.301l-5.396 5.397a.25.25 0 0 0 0 .353l5.307 5.307a.25.25 0 0 0 .353 0l5.396-5.395a5.25 5.25 0 0 0 1.3-5.27l-.206-.665ZM6.69 18.395a.75.75 0 0 0-1.06-1.061l-2.476 2.475a.75.75 0 0 0 1.061 1.06l2.475-2.474ZM4.745 15.39a.75.75 0 0 1 0 1.06l-1.06 1.06a.75.75 0 1 1-1.061-1.06l1.06-1.06a.75.75 0 0 1 1.061 0ZM8.632 20.341a.75.75 0 1 0-1.06-1.06l-1.059 1.058a.75.75 0 0 0 1.06 1.06l1.06-1.058Z" fill="#ffffff"/></svg>
\ No newline at end of file
diff --git a/docs/docs/assets/ic_fluent_settings_24_filled.svg b/docs/docs/assets/ic_fluent_settings_24_filled.svg
new file mode 100644
index 0000000..13ed0d1
--- /dev/null
+++ b/docs/docs/assets/ic_fluent_settings_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="M12.012 2.25c.734.008 1.465.093 2.182.253a.75.75 0 0 1 .582.649l.17 1.527a1.384 1.384 0 0 0 1.927 1.116l1.401-.615a.75.75 0 0 1 .85.174 9.792 9.792 0 0 1 2.204 3.792.75.75 0 0 1-.271.825l-1.242.916a1.381 1.381 0 0 0 0 2.226l1.243.915a.75.75 0 0 1 .272.826 9.797 9.797 0 0 1-2.204 3.792.75.75 0 0 1-.848.175l-1.407-.617a1.38 1.38 0 0 0-1.926 1.114l-.169 1.526a.75.75 0 0 1-.572.647 9.518 9.518 0 0 1-4.406 0 .75.75 0 0 1-.572-.647l-.168-1.524a1.382 1.382 0 0 0-1.926-1.11l-1.406.616a.75.75 0 0 1-.849-.175 9.798 9.798 0 0 1-2.204-3.796.75.75 0 0 1 .272-.826l1.243-.916a1.38 1.38 0 0 0 0-2.226l-1.243-.914a.75.75 0 0 1-.271-.826 9.793 9.793 0 0 1 2.204-3.792.75.75 0 0 1 .85-.174l1.4.615a1.387 1.387 0 0 0 1.93-1.118l.17-1.526a.75.75 0 0 1 .583-.65c.717-.159 1.45-.243 2.201-.252ZM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z" fill="#212121"/></svg>
\ No newline at end of file
diff --git a/docs/docs/assets/ic_fluent_star_24_filled.svg b/docs/docs/assets/ic_fluent_star_24_filled.svg
new file mode 100644
index 0000000..1ebfd51
--- /dev/null
+++ b/docs/docs/assets/ic_fluent_star_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="M10.788 3.103c.495-1.004 1.926-1.004 2.421 0l2.358 4.777 5.273.766c1.107.161 1.549 1.522.748 2.303l-3.816 3.72.901 5.25c.19 1.103-.968 1.944-1.959 1.424l-4.716-2.48-4.715 2.48c-.99.52-2.148-.32-1.96-1.424l.901-5.25-3.815-3.72c-.801-.78-.359-2.142.748-2.303L8.43 7.88l2.358-4.777Z" fill="#212121"/></svg>
\ No newline at end of file
diff --git a/docs/docs/index.html b/docs/docs/index.html
index 7c30b9d..c5b447a 100644
--- a/docs/docs/index.html
+++ b/docs/docs/index.html
@@ -11,9 +11,43 @@
 </head>
 <body>
 <div class="navbar">
-    <span onclick="openNav()"><img class="navicon" src="./assets/ic_fluent_navigation_24_filled.svg" height="25px"></span>
+    <img onclick="openNav()" class="navicon" src="./assets/ic_fluent_navigation_24_filled.svg" height="25px">
     <img src="./assets/dijidocs.png" height="40px">
 </div>
+<div class="banner">
+<img src="./assets/dijidocsbanner.png" width="100%" class="bannerimg">
+</div>
+  <div class="content">
+<div class="anotherfuckingcontainer">
+    <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="getstartedcontentparent">
+        <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>
+      </div>
+      </div>
+      </div>
+      <div class="install ge">
+        <div class="getstartedcontentparent">
+          <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">Check how to install diji properly</p>
+        </div>
+        </div>
+      </div>
+      <div class="favicon ge"></div>
+      <div class="config ge"></div>
+    </div>
+    </div>
+  </div>
+
+  
+
 <div id="drawer" class="navdrawer">
     <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
     <a href="#">About</a>
diff --git a/docs/docs/style.css b/docs/docs/style.css
index cfad83c..27193a5 100644
--- a/docs/docs/style.css
+++ b/docs/docs/style.css
@@ -1,17 +1,54 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
+
 body {
-font-family: sans-serif;
+font-family: 'Open Sans', sans-serif;
 margin: 0;
+background-color: #111;
+color: white;
 } .navbar {
-    position: fixed;
+    position: sticky;
+    top: 0px;
     width: 100%;
     background-color: black;
     box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.473);
     display: flex;
     align-items: center;
     padding: 10px;
+    padding-right: 0;
+    padding-left: 0;
 } .navicon {
-    margin-left: 10px;
+    margin-left: 20px;
     margin-right: 10px;
+} .content {
+  padding-left: 20px;
+  padding-right: 20px;
+  margin-right: auto;
+    margin-left: auto;
+    max-width: 1000px;
+}
+
+.anotherfuckingcontainer {
+  margin: 20px;
+}
+
+.t1 {
+  margin: 0;
+  margin-top: 10px;
+  margin-bottom: 5px;
+} .t2 {
+  margin: 0;
+}
+
+.banner {
+  object-fit: cover;
+  max-height: 400px;
+  margin-left: auto;
+  margin-right: auto;
+} .bannerimg {
+  object-fit: cover;
+  max-height: 400px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .navdrawer {
@@ -61,4 +98,82 @@ margin: 0;
   @media screen and (max-height: 450px) {
     .navdrawer {padding-top: 15px;}
     .navdrawer a {font-size: 18px;}
+    
+  }
+
+ 
+
+
+
+
+  .container {  display: grid;
+    
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+    gap: 20px 0;
+    margin-top: 30px;
+    grid-auto-flow: column;
+    grid-template-areas: 
+    "getstarted"
+    "install"
+    "favicon"
+    "config";
+  }
+
+  @media only screen and (min-width: 35em) {  .container {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 20px 20px;
+    
+   
+    
+    margin-top: 30px;
+    grid-auto-flow: row;
+    grid-template-areas:
+      "getstarted install"
+      "favicon config";
+  }}
+  
+  .getstarted { grid-area: getstarted; 
+  background-color: rgb(0, 0, 0);
+
+  
+  }
+  
+  .install { grid-area: install; 
+    background-color: #000;}
+  
+  .favicon { grid-area: favicon; 
+    background-color: #000;}
+  
+  .config { grid-area: config; 
+    background-color: #000;}
+
+    .ge {
+      border-radius: 20px;
+      border-style: solid;
+      border-color: #ffffff21;
+     border-width: 2px;
+     display: block;
+     transition: 0.2s;
+    }
+
+    .ge:hover {
+      transition: 0.2s;
+      box-shadow: 0 10px 10px 0 #00000080;
+    }
+  
+  .getstartedcontent {
+    margin: 20px;
+    
+  } .gep {
+    margin: 0;
+    padding: 0;
+  } .getstartedcontentparent {
+    margin: 20px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 8px;
+    width: fit-content;
+    height: fit-content;
   }
\ No newline at end of file