diff --git a/15versions.html b/15versions.html
index 554888d..40b2337 100644
--- a/15versions.html
+++ b/15versions.html
@@ -1,15 +1,7 @@
 <!-- Version 1.5.2 Section -->
-<div id="desktopVersion152">
-    <div id="Container15">
-        <a class="version-link filter-button" href="./eagler-files/1.5.2/main/index.html"><button>Main 1.5.2 Client</button></a>
-        <a class="version-link filter-button" href="./eagler-files/1.5.2/PrecisionBeta.html"><button>Precision Beta Client</button></a>
-        <a class="version-link filter-button" href="./eagler-files/1.5.2/precisionbeta2/index.html"><button>Precision Beta 2 Client</button></a>
-    </div>
-</div>
-<div id="mobileVersion152" style="display: none;">
-    <p class="version-text">Version 1.5.2 - Mobile</p>
-    <div id="mobileContainer15">
-        <a class="version-link filter-button" href="./eagler-files/mobile/1.5.2/EaglerMobile/index.html"><button>EaglerMobile 1.5.2</button></a>
-        <a class="version-link filter-button" href="./eagler-files/mobile/1.5.2/EaglerPocketMobile/index.html"><button>EaglerPocketMobile 1.5.2</button></a>
-    </div>
-</div>
\ No newline at end of file
+
+<a class="version-link filter-button" href="./eagler-files/1.5.2/main/index.html"><button>Main 1.5.2 Client</button></a>
+<a class="version-link filter-button" href="./eagler-files/1.5.2/PrecisionBeta.html"><button>Precision Beta Client</button></a>
+<a class="version-link filter-button" href="./eagler-files/1.5.2/precisionbeta2/index.html"><button>Precision Beta 2 Client</button></a>
+<a class="version-link filter-button" href="./eagler-files/mobile/1.5.2/EaglerMobile/index.html"><button>EaglerMobile 1.5.2</button></a>
+<a class="version-link filter-button" href="./eagler-files/mobile/1.5.2/EaglerPocketMobile/index.html"><button>EaglerPocketMobile 1.5.2</button></a>
\ No newline at end of file
diff --git a/18versions.html b/18versions.html
index 1170207..3dfbe00 100644
--- a/18versions.html
+++ b/18versions.html
@@ -1,21 +1,9 @@
-<!-- Version 1.8 Section -->
-<div id="18container">
-    <div id="desktopVersion18">
-        <p class="version-text">Version 1.8</p>
-        <div class="Container18">
-            <a class="version-link filter-button" href="./eagler-files/1.8/main/index.html"><button>Main 1.8 Client</button></a>
-            <a class="version-link filter-button" href="./eagler-files/1.8/resent4.0/index.html"><button>Resent 4.0 Client <img src="images/Recomended.png" alt="Recommended" class="recommended"></button></a>
-            <a class="version-link filter-button" href="./eagler-files/1.8/ShadowClient.html"><button>Shadow Client</button></a>
-            <a class="version-link filter-button" href="./eagler-files/1.8/Astra_Client.html"><button>Astra Client</button></a>
-            <a class="version-link filter-button" href="./eagler-files/1.8/EaglerForge/index.html"><button>EaglerForge</button></a>
-        </div>
-    </div>
 
-    <div id="mobileVersion18" style="display: none;">
-        <p class="version-text">Version 1.8 - Mobile</p>
-        <div id="mobileContainer18">
-            <a class="version-link filter-button mobile18" href="./eagler-files/mobile/1.8/EaglerMobile/index.html"><button>EaglerMobile 1.8</button></a>
-            <a class="version-link filter-button mobile18" href="./eagler-files/mobile/1.8/EaglerPocketMobile/index.html"><button>EaglerPocketMobile 1.8</button></a>
-        </div>
-    </div>
-<div>
\ No newline at end of file
+<a class="version-link filter-button" href="./eagler-files/1.8/main/index.html"><button>Main 1.8 Client</button></a>
+<a class="version-link filter-button" href="./eagler-files/1.8/resent4.0/index.html"><button>Resent 4.0 Client <img src="images/Recomended.png" alt="Recommended" class="recommended"></button></a>
+<a class="version-link filter-button" href="./eagler-files/1.8/ShadowClient.html"><button>Shadow Client</button></a>
+<a class="version-link filter-button" href="./eagler-files/1.8/Astra_Client.html"><button>Astra Client</button></a>
+<a class="version-link filter-button" href="./eagler-files/1.8/EaglerForge/index.html"><button>EaglerForge</button></a>
+
+<a class="version-link filter-button mobile18" href="./eagler-files/mobile/1.8/EaglerMobile/index.html"><button>EaglerMobile 1.8</button></a>
+<a class="version-link filter-button mobile18" href="./eagler-files/mobile/1.8/EaglerPocketMobile/index.html"><button>EaglerPocketMobile 1.8</button></a>
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index f2e415a..403b42f 100644
--- a/css/index.css
+++ b/css/index.css
@@ -216,4 +216,61 @@ button:hover {
 }
 #footerText > p {
     margin:0;
+}
+/* flexbox will solve all problems guys trust */
+#gamescontainer {
+    background-color: #d9d9d9;
+    border-radius: 20px;
+    height: 33%;
+    width: 75%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    column-gap: 2ch;
+    row-gap: 2ch;
+}
+#stupid {
+    color: #a6a6a6;
+    height: 10px;
+    border-radius: 53px;
+    z-index: 2;
+    
+}
+#stupidbackgroundbox {
+    color: #a6a6a6;
+    z-index: -1;
+    height:10px;
+    border-radius: 53px;
+}
+#stupidcontainer{
+    display: flex;
+    flex-direction: row;
+    height: 10px;
+    border-radius: 53px;
+}
+#dumb {
+    color: #d9d9d9;
+    z-index: 0;
+    height:10px;
+    border-radius: 53px;
+}
+#dumbBackgroundbox {
+    color: #d9d9d9;
+    z-index: 1;
+    height:10px;
+    border-radius: 53px;
+}
+#dumbcontainer {
+    display:flex;
+    flex-direction: row;
+    height:10px;
+}
+#versionSelector {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    height: 10px;
+    width:100%;
+    justify-content: center;
+    width: 151px;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index a5ff096..a00eac4 100644
--- a/index.html
+++ b/index.html
@@ -41,11 +41,20 @@
         </button>
     </div>
     <div id="versionSelector">
-        <button>1.8</button>
-        <button>1.5</button>
+        <div id="stupidcontainer">
+            <button id="stupid">1.8</button>
+            <div id="stupidbackgroundbox"></div>
+        </div>
+        <div id="dumbcontainer">
+            <button id="dumb">1.5.2</button>
+            <div id="dumbbackgroundbox"></div>
+        </div>
+    </div>
+    <div id="gamescontainer">
+        
     </div>
-    <!-- add iframes for all the eaglercraft versions--> 
 
+ 
     <h3>DANGER ZONE</h3>
     <a onclick="openClrModal();" class="clr-btn">Reset All Local Data</a>
     
diff --git a/js/versionSelect.js b/js/versionSelect.js
new file mode 100644
index 0000000..a20d346
--- /dev/null
+++ b/js/versionSelect.js
@@ -0,0 +1,10 @@
+var gamesDiv = document.getElementById("gamescontainer")
+var ireallyhateasyncprogrammingpulhhhh = await fetch("./15versions.html")
+var rfr = await fetch("./18versions.html")
+async function set15() {
+    //wooooo more awaits i love waiting 
+    gamesDiv.innerHTML = await ireallyhateasyncprogrammingpulhhhh.text
+}
+async function set18() {
+    gamesDiv.innerHTML = await rfr.text
+}