diff --git a/css/index.css b/css/index.css
index a794abd..b8a5320 100644
--- a/css/index.css
+++ b/css/index.css
@@ -125,4 +125,18 @@ button:hover {
     margin-left: 5px;
     width: 20px;
     height: 20px;
-}
\ No newline at end of file
+}
+
+.search-container {
+    text-align: center;
+    margin: 20px 0;
+ }
+ 
+ #search-bar {
+    margin: 0 auto;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 50%;
+    max-width: 400px;
+ }
\ No newline at end of file
diff --git a/index.html b/index.html
index 58eb0a9..72f1b51 100644
--- a/index.html
+++ b/index.html
@@ -23,41 +23,46 @@
 
     <label for="mobileCheckbox">Mobile Checkbox</label>
     <input type="checkbox" id="mobileCheckbox">
+    
+    <div class="search-container">
+        <input type="text" id="search-bar" placeholder="Search Clients...">
+    </div>
 
     <!-- Version 1.8 Section -->
     <div id="desktopVersion18">
         <p class="version-text">Version 1.8</p>
 
-        <a class="version-link" data-url="/eagler-files/1.8/index.html" href="#"><button>Main 1.8.9 Client</button></a>
-        <a class="version-link" data-url="/eagler-files/1.8/resent4.0/index.html" href="#"><button>Resent 4.0 Client <img src="images/Recomended.png" alt="Recommended" class="recommended"></button></a>
-        <a class="version-link" data-url="/eagler-files/1.8/ShadowClient.html" href="#"><button>Shadow Client</button></a>
-        <a class="version-link" data-url="/eagler-files/1.8/EaglerForge/index.html" href="#"><button>EaglerForge [MODS!]</button></a>
+        <a class="version-link filter-button" data-url="/eagler-files/1.8/index.html" href="#"><button>Main 1.8.9 Client</button></a>
+        <a class="version-link filter-button" data-url="/eagler-files/1.8/resent4.0/index.html" href="#"><button>Resent 4.0 Client <img src="images/Recomended.png" alt="Recommended" class="recommended"></button></a>
+        <a class="version-link filter-button" data-url="/eagler-files/1.8/ShadowClient.html" href="#"><button>Shadow Client</button></a>
+        <a class="version-link filter-button" data-url="/eagler-files/1.8/EaglerForge/index.html" href="#"><button>EaglerForge [MODS!]</button></a>
     </div>
 
     <div id="mobileVersion18" style="display: none;">
         <p class="version-text">Version 1.8 - Mobile</p>
 
-        <a class="version-link" data-url="/eagler-files/mobile/1.8/EaglerMobile/index.html" href="#"><button>EaglerMobile</button></a>
-        <a class="version-link" data-url="/eagler-files/mobile/1.8/EaglerPocketMobile/index.html" href="#"><button>EaglerPocketMobile</button></a>
+        <a class="version-link filter-button" data-url="/eagler-files/mobile/1.8/EaglerMobile/index.html" href="#"><button>EaglerMobile</button></a>
+        <a class="version-link filter-button" data-url="/eagler-files/mobile/1.8/EaglerPocketMobile/index.html" href="#"><button>EaglerPocketMobile</button></a>
     </div>
 
     <!-- Version 1.5.2 Section -->
     <div id="desktopVersion152">
         <p class="version-text">Version 1.5.2</p>
 
-        <a class="version-link" data-url="/eagler-files/1.5.2/main1.5.2.html" href="#"><button>Main Client</button></a>
-        <a class="version-link" data-url="/eagler-files/1.5.2/PrecisionBeta.html" href="#"><button>Precision Beta Client</button></a>
-        <a class="version-link" data-url="/eagler-files/1.5.2/precisionbeta2/index.html" href="#"><button>Precision Beta 2 Client</button></a>
+        <a class="version-link filter-button" data-url="/eagler-files/1.5.2/main1.5.2.html" href="#"><button>Main Client</button></a>
+        <a class="version-link filter-button" data-url="/eagler-files/1.5.2/PrecisionBeta.html" href="#"><button>Precision Beta Client</button></a>
+        <a class="version-link filter-button" data-url="/eagler-files/1.5.2/precisionbeta2/index.html" href="#"><button>Precision Beta 2 Client</button></a>
     </div>
 
     <div id="mobileVersion152" style="display: none;">
         <p class="version-text">Version 1.5.2 - Mobile</p>
 
-        <a class="version-link" data-url="/eagler-files/mobile/1.5.2/EaglerMobile/main1.5.2.html" href="#"><button>EaglerMobile</button></a>
-        <a class="version-link" data-url="/eagler-files/mobile/1.5.2/EaglerPocketMobile/main1.5.2.html" href="#"><button>EaglerPocketMobile</button></a>
+        <a class="version-link filter-button" data-url="/eagler-files/mobile/1.5.2/EaglerMobile/main1.5.2.html" href="#"><button>EaglerMobile</button></a>
+        <a class="version-link filter-button" data-url="/eagler-files/mobile/1.5.2/EaglerPocketMobile/main1.5.2.html" href="#"><button>EaglerPocketMobile</button></a>
     </div>
 
     <script src="js/mobilecheck.js"></script>
+    <script src="js/searchbar.js"></script>
 
     <div class="footer">
         <p>I am not affiliated with EaglerCraft, Eagtek, Microsoft, or Mojang. I solely host these sites.</p>
diff --git a/js/searchbar.js b/js/searchbar.js
new file mode 100644
index 0000000..27dc739
--- /dev/null
+++ b/js/searchbar.js
@@ -0,0 +1,13 @@
+$(document).ready(function() {
+    $('#search-bar').on('keyup', function() {
+        var query = $(this).val().toLowerCase();
+        $('.filter-button').each(function() {
+            var buttonText = $(this).text().toLowerCase();
+            if (buttonText.indexOf(query) > -1) {
+                $(this).show();
+            } else {
+                $(this).hide();
+            }
+        });
+    });
+});