diff --git a/index.html b/index.html
index 54fa4cf..8300b80 100644
--- a/index.html
+++ b/index.html
@@ -4,25 +4,31 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Main page</title>
+    <meta name="description" content="dyz's own website to contain mods, goofy stuff & just some cool projects">
+    <!--<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />-->
     <link rel="stylesheet" href="other/main.css">
 </head>
 <body>
-    <h1>Mods available for downloads</h1>
-    <p>Some <strong>SW2/SE mods</strong> that are available to download for your convinienve, or mine :)</p>
-    <ul>
-        <li>Stick War 2 Empires</li>
-        <li>Stick War 2</li>
-    </ul>
+    <div class="topnav">
+        <a class="active" href="">Home</a>
+        <a href="/other/wiki/">Wiki Page</a>
+        <a href="/other/EasyController/">EasyController</a>
+    </div>
 
-    <div>
+    
+    <h1>Home</h1>
+    <p>just a home page for normal stuff, use the new top navigation bar ^^</p>
 
-    </div>
 
+    <!--<ul>
+        <li>Stick War 2 Empires</li>
+        <li>Stick War 2</li>
+    </ul>
     <br><br>
-    <h2>Access <a href="other/EasyController/">EasyController</a> page from here!</h2>
+    /*<h2>Access <a href="other/EasyController/">EasyController</a> page from here!</h2>
 
     <h2>Access <a href="other/wiki/">Wiki Resources</a> from here!</h2>
-    <!--<footer>
+    <footer>
         <p>&copy; dyz 2024</p>
     </footer>-->
 </body>
diff --git a/other/EasyController/README.md b/other/EasyController/README.md
deleted file mode 100644
index 7d962d7..0000000
--- a/other/EasyController/README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-# What is EasyController?
-check later lmao
diff --git a/other/EasyController/index.html b/other/EasyController/index.html
new file mode 100644
index 0000000..dd38681
--- /dev/null
+++ b/other/EasyController/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Main page</title>
+    <meta name="description" content="EasyController main page, stores all the second hand files">
+    <!--<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />-->
+    <link rel="stylesheet" href="../main.css">
+</head>
+<body>
+    <div class="topnav">
+        <a href="">Home</a>
+        <a href="/other/wiki/">Wiki Page</a>
+        <a class="active" href="/other/EasyController/">EasyController</a>
+    </div>
+
+    
+    <h1>EasyController</h1>
+    <p>The <a href="https://github.com/dyzqy/EasyController">github page</a> is linked, and the current version(developer for now) is <a href="version.txt">here</a>.</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/other/main.css b/other/main.css
index 7d848a0..6fdc85f 100644
--- a/other/main.css
+++ b/other/main.css
@@ -1,6 +1,6 @@
 body {
     font-family: Frutiger, Arial, sans-serif;
-    color: black;
+    color: #24292E;
 }
 h1, h3 {
     font-family: Frutiger, Arial, sans-serif;
@@ -26,23 +26,9 @@ p {
     margin: 0%;
     font-size: 20px;
 }
-a {
-    color: rgb(0, 102, 255);
-    text-decoration: none;
-}
 a:hover {
     text-decoration: underline;
 }
-@media (prefers-color-scheme: dark) {
-    body {
-        color: #D8D5D1;
-        background-color: #181A1B;
-    }
-    a {
-        color: rgb(0, 255, 149);
-        text-decoration: none;
-    }
-}
 
 .table-container {
     margin: 0 auto;
@@ -62,6 +48,84 @@ th {
     color: #24292E;
 }
 
+@media (prefers-color-scheme: light) {
+    body {
+        font-family: Frutiger, Arial, sans-serif;
+        color: #24292E;
+    }
+    a {
+        color: rgb(0, 102, 255);
+        text-decoration: none;
+    }
+    .topnav {
+        overflow: hidden;
+        /*background-color: #191b1d;*/
+    }
+    .topnav a {
+        float: left;
+        color: #24292E;
+        text-align: center;
+        padding: 14px 16px;
+        text-decoration: none;
+        font-size: 17px;
+    }
+    .topnav a:hover {
+        background-color: #cecece6b;
+        color: #191b1d;
+    }
+    .topnav a.active {
+        color: rgb(0, 102, 255);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        color: #D8D5D1;
+        background-color: #181A1B;
+    }
+    a {
+        color: rgb(0, 255, 149);
+        text-decoration: none;
+    }
+    .topnav {
+        overflow: hidden;
+        /*background-color: #191b1d;*/
+    }
+    .topnav a {
+        float: left;
+        color: #C1CAC7;
+        text-align: center;
+        padding: 14px 16px;
+        text-decoration: none;
+        font-size: 17px;
+    }
+    .topnav a:hover {
+        background-color: #262627;
+        color: #D5D3D1;
+    }
+    .topnav a.active {
+        color: rgb(0, 255, 149);
+    }
+
+    .table-container {
+        margin: 0 auto;
+    }
+    table {
+        width: 100%;
+        max-width: 50%; /* Limiting to 40% of screen width */
+        border-collapse: collapse;
+    }
+    th, td {
+        border: 1px solid gray;
+        text-align: center;
+        padding: 5px;
+    }
+    th {
+        background-color: rgb(32, 34, 34);
+        color: rgb(204, 202, 199);
+    }
+}
+
 @font-face {
     font-family: Frutiger;
     src: url('FrutigerNeue.ttf');
diff --git a/other/wiki/index.html b/other/wiki/index.html
index e9ae935..44c6d0c 100644
--- a/other/wiki/index.html
+++ b/other/wiki/index.html
@@ -3,16 +3,17 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wiki Page</title>
+    <title>Wiki Resources</title>
     <link rel="stylesheet" href="../main.css">
+    <meta name="description" content="Wiki Resources page, contains some data about SW2/SE units & other such data">
 </head>
 <body>
-    <h1>Main Resources</h1>
-    <!--<ul>
-        <li><p><strong>Stick War 2</strong> units <a href="./swiidata.html">stats & data</a>.</p></li>
-        <li><p><strong>Stick War 2</strong> campaign <a href="./swiicampaigndata.html">stats & data</a>.</p></li>
-        <li><p><strong>Stick Empires</strong> units <a href="./stickempiresdata.html">stats & data</a>.</p></li>
-    </ul>-->
+  <div class="topnav">
+    <a href="../../">Home</a>
+    <a class="active" href="">Wiki Page</a>
+    <a href="../EasyController/">EasyController</a>
+  </div>
+    <h1>Wiki Resources</h1>
     <table>
         <tr>
             <th></th>
@@ -35,7 +36,7 @@ <h1>Main Resources</h1>
           <tr>
             <th>Stick Empires</th>
             <td><a href="./stickempiresdata.html">Game Constants</a></td>
-            <td>/</td>
+            <td>None</td>
             <td>/</td>
           </tr>
     </table>
