diff --git a/tests/index.html b/tests/index.html
index f018f73..44f1d48 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -9,8 +9,138 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Web Developers & Friends</title>
+  <style>
+    .headermaincontainer{
+        display: flex;
+        background-color: grey;
+        flex-direction: row;
+        font-family: Arial;
+          
+    }
+    .headerparagraphformat{
+        margin-left: 15px;
+    }
+    .linksformat{
+        background-color: gray;
+        padding-left: 15px;
+        padding-right: 15px;
+        color: white;
+        padding-top: 15px;
+        padding-bottom: 15px;
+        /*Idk why I can't control the height but meh the height is ok for now I
+        think it has to do with the paragraph soooo yeah.... =)*/
+      }
+      .linksformat:hover{
+        background-color: gray;
+        color: white;
+        padding-top: 15px;
+        padding-bottom: 15px;
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    .hyperlinkreformat{
+        background-color: gray;
+        padding-left: 35px;
+        padding-right: 35px;
+        color: white;
+        padding-top: 0px;
+        padding-bottom: 0px;
+        text-decoration: none;
+        font-size: 20px;
+    }
+    .footermainholder{
+        display: flex;
+        flex-direction: row;
+        background-color: grey;
+        padding-left: 45px;
+        
+    }
+    .individualcolumnholderthingies{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding-right: 15px;
+        padding-left: 15px;
+        color: white;
+        font-family: Arial;
+        padding-bottom: 15px;
+        padding-top: 10px;
+    }
+    .footerlinks{
+        text-decoration: none;
+        color: white;
+        padding-bottom: 30px;
+        padding-top: 10px;
+    }
+    .footerlinks:hover{
+        text-decoration: underline;
+    }
+  </style>
 </head>
-<body>
-  nothing is here
+<body style="margin: 0px;">
+  <header>
+    <nav>
+        <div>
+            <div class="headermaincontainer">
+                <div class="linksformat"> 
+                <!--<p class="headerparagraphformat">Home</p>-->
+                <a href="" class="hyperlinkreformat">Home</a>
+                </div>
+                <div class="linksformat">
+                <!--<p class="headerparagraphformat">Our Discord</p>-->
+                <a href="" class="hyperlinkreformat">Our Discord</a>
+                </div>
+                <div class="linksformat">
+                    <!--<p class="headerparagraphformat">HTML Docs</p>-->
+                    <a href="" class="hyperlinkreformat">HTML Docs</a>
+                </div>
+                <div class="linksformat">
+                    <!--<p class="headerparagraphformat">CSS Docs</p>-->
+                    <a href="" class="hyperlinkreformat">CSS Docs</a>
+                </div>
+                <div class="linksformat">
+                    <!--<p class="headerparagraphformat">JS Docs</p>-->
+                    <a href="" class="hyperlinkreformat">JS Docs</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+  </header>
+  <main>
+    <br>
+    <br>
+  </main>
+  <footer>
+      <div class="footermainholder">
+          <div class="individualcolumnholderthingies">
+            <h3>About Us</h3>
+            <a href="" class="footerlinks">Our Discord</a>
+            <a href="" class="footerlinks">Our Mission Statement</a>
+            <!--Note: Put something instead of mission statement-->
+          </div>
+          <div class="individualcolumnholderthingies">
+            <h3>HTML Docs</h3>
+            <a href="" class="footerlinks">HTML Tutorials</a>
+            <a href="" class="footerlinks">HTML References</a>
+          </div>
+          <div class="individualcolumnholderthingies">
+            <h3>CSS Docs</h3>
+            <a href="" class="footerlinks">CSS Tutorials</a>
+            <a href="" class="footerlinks">CSS References</a>
+          </div>
+          <div class="individualcolumnholderthingies">
+            <h3>JavaScript Docs</h3>
+            <a href="" class="footerlinks">JavaScript Tutorials</a>
+            <a href="" class="footerlinks">JavaScript References</a>
+          </div>
+          <div class="individualcolumnholderthingies">
+            <h3>Ads</h3>
+            <a href="" class="footerlinks">Why ads?</a>
+            <a href="" class="footerlinks">Opt-out of ads</a>
+            <!--Note: The ads topic is up for discussion-->
+          </div>
+
+      </div>
+  </footer>
 </body>
 </html>
