diff --git a/15versions.html b/15versions.html
new file mode 100644
index 0000000..554888d
--- /dev/null
+++ b/15versions.html
@@ -0,0 +1,15 @@
+<!-- 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
diff --git a/18versions.html b/18versions.html
new file mode 100644
index 0000000..1170207
--- /dev/null
+++ b/18versions.html
@@ -0,0 +1,21 @@
+<!-- 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
diff --git a/css/index.css b/css/index.css
index c90ddf9..f2e415a 100644
--- a/css/index.css
+++ b/css/index.css
@@ -8,29 +8,31 @@ body {
     flex-direction: column;
     min-height: 100vh;
     overflow-x: hidden;
+    position:fixed;
+    width:100%
 }
-.mobileContainer18 {
+#mobileContainer18 {
     display: flex;
     width: 1%;
     flex-wrap:wrap;
     justify-content: center;
     margin: 0 auto;
 }
-.Container18{
+#Container18{
     display: flex;
     width: 1%;
     flex-wrap:wrap;
     justify-content: center;
     margin: 0 auto;
 }
-.Container15{
+#Container15{
     display: flex;
     width: 1%;
     flex-wrap:wrap;
     justify-content:center;
     margin: 0 auto;
 }
-.mobileContainer15{
+#mobileContainer15{
     display: flex;
     width: 1%;
     flex-wrap:wrap;
diff --git a/css/searchbar.css b/css/searchbar.css
index a07334e..a76fbb0 100644
--- a/css/searchbar.css
+++ b/css/searchbar.css
@@ -2,6 +2,8 @@
 .search-container {
     text-align: center;
     margin: 20px 0;
+    display:flex;
+    flex-direction: column;
  }
  
  #search-bar {
@@ -12,4 +14,14 @@
     width: 50%;
     max-width: 400px;
  }
- 
\ No newline at end of file
+ #search-icon{
+   font-size:30px;
+   position:fixed;
+   left: calc(100vw - 800px);
+}
+#search-clear{
+   font-size:30px;
+   font-size:30px;
+   position:fixed;
+   right: calc(100vw - 800px);
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 744bdd6..7564e20 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>EaglerCraftX</title>
     <link rel="icon" type="image/x-icon" href="images/icon.jpeg">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <link rel="stylesheet" href="css/index.css">
     <link rel="stylesheet" href="css/popup.css">
     <link rel="stylesheet" href="css/searchbar.css">
@@ -19,7 +20,7 @@
 <body>
     <h1>EAGLERCRAFT X CLIENT COLLECTION</h1 class="title">
 
-    <p>Site views counter:</p>
+    <!-- <p>Site views counter:</p>
     <div><a><img src='https://www.free-website-hit-counter.com/c.php?d=9&id=177632&s=16' border='0' alt='View Counter'></a></div>
     <p>These clients might be outdated.</p>
     <p>Have any questions, bug reports or suggestions? Join our Discord server by pressing the button below!</p>
@@ -29,48 +30,25 @@
     <h2 class="pick-client">Pick a Client:</h2>
 
     <label for="mobileCheckbox">Mobile Checkbox</label>
-    <input type="checkbox" id="mobileCheckbox">
+    <input type="checkbox" id="mobileCheckbox"> -->
     <div class="search-container">
         <input type="text" id="search-bar" placeholder="Search Clients...">
+        <button alt="Search">
+            <i class="bi bi-search" id="search-icon" ></i>
+        </button>
+        <button alt="Clear search">
+            <i class="bi bi-x" id="search-clear" ></i>
+        </button>
     </div>
-
-    <!-- Version 1.8 Section -->
-    <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 id="versionSelector">
+        <button>1.8</button>
+        <button>1.5</button>
     </div>
-
-    <div id="mobileVersion18" style="display: none;">
-        <p class="version-text">Version 1.8 - Mobile</p>
-        <div class="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>
-
-    <!-- Version 1.5.2 Section -->
-    <div id="desktopVersion152">
-        <p class="version-text">Version 1.5.2</p>
-        <div class="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 class="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 id="mobileSelector">
+        <button>Mobile</button>
+        <button>Desktop</button>
     </div>
+    <!-- add iframes for all the eaglercraft versions--> 
 
     <h3>DANGER ZONE</h3>
     <a onclick="openClrModal();" class="clr-btn">Reset All Local Data</a>