diff --git a/css/index.css b/css/index.css
deleted file mode 100644
index c67cada..0000000
--- a/css/index.css
+++ /dev/null
@@ -1,233 +0,0 @@
-body {
-    font-family: 'Arial', sans-serif;
-    background-color: #f1f1f1;
-    margin: 0;
-    padding: 0;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    overflow-x: hidden;
-}
-.Container18{
-    display: flex;
-    width: 1%;
-    flex-wrap:wrap;
-    justify-content: center;
-    margin: 0 auto;
-}
-.Container15{
-    display: flex;
-    width: 1%;
-    flex-wrap:wrap;
-    justify-content:center;
-    margin: 0 auto;
-}
-.ContainerOther{
-    display: flex;
-    width: 1%;
-    flex-wrap:wrap;
-    justify-content:center;
-    margin: 0 auto;
-}
-h1 {
-    color: #000000;
-}
-
-h2 {
-     color: #000000;
-}
-p {
-    color: #000000;
-}
-button {
-    background-color: #4caf50;
-    color: white;
-    padding: 10px 20px;
-    font-size: 16px;
-    cursor: pointer;
-    border: none;
-    border-radius: 5px;
-    margin: 10px auto;
-    text-decoration: none;
-    display: inline-block;
-    max-width: 200px;
-    transition: transform 0.5s ease;
-}
-
-
-.source-btn {
-    background-color: #333333;
-    color: white;
-    padding: 10px 20px;
-    font-size: 16px;
-    cursor: pointer;
-    border: none;
-    border-radius: 5px;
-    margin: 10px auto;
-    text-decoration: none;
-    display: inline-block;
-    max-width: 200px;
-    transition: transform 0.5s ease;
-}
-
-.dsc-btn {
-    background-color: #9656ce;
-    color: white;
-    padding: 10px 20px;
-    font-size: 16px;
-    cursor: pointer;
-    border: none;
-    border-radius: 5px;
-    margin: 10px auto;
-    text-decoration: none;
-    display: inline-block;
-    max-width: 200px;
-    transition: transform 0.5s ease;
-}
-
-.clr-btn {
-    background-color: #ff3c00;
-    color: white;
-    padding: 10px 20px;
-    font-size: 16px;
-    cursor: pointer;
-    border: none;
-    border-radius: 5px;
-    margin: 10px auto;
-    text-decoration: none;
-    display: inline-block;
-    max-width: 200px;
-    transition: transform 0.5s ease;
-}
-
-button:hover {
-    background-color: #45a049;
-    transform: scale(1.1);
-}
-
-.source-btn:hover {
-    background-color: #000000;
-    transform: scale(1.1);
-}
-
-.dsc-btn:hover {
-    background-color: #a751f2;
-    transform: scale(1.1);
-}
-.clr-btn:hover {
-     transform: scale(1.1);
-}
-
-.dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #f9f9f9;
-    min-width: 160px;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-    z-index: 1;
-}
-.filter-button > button {
-    min-width: 200px;
-}
-.dropdown-content a {
-    color: black;
-    padding: 12px 16px;
-    text-decoration: none;
-    display: block;
-}
-
-.dropdown-content a:hover {
-    background-color: #ddd;
-}
-
-.dropdown-btn:hover .dropdown-content {
-    display: block;
-}
-
-.pick-client {
-    color: #000000;
-}
-
-.line {
-    width: 50%;
-    border-top: 1px solid #888;
-    margin: 10px auto;
-}
-
-.version-text {
-    margin: 10px 0;
-    color: #000000;
-}
-.version-link {
-    display: block ruby;
-}
-.footer {
-    margin-top: auto;
-    background-color: #ddd;
-    padding: 20px;
-    width: 100%;
-}
-
-.footer a {
-    text-decoration: none;
-    color: #0d5152;
-    font-size: inherit;
-    font-weight: inherit;
-}
-
-.footer a:hover {
-    text-decoration: underline;
-}
-
-.recommended {
-    vertical-align: middle;
-    margin-left: 5px;
-    width: 20px;
-    height: 20px;
-}
-.title {
-    font-family: "Poppins", sans-serif;
-    font-weight: 500;
-    font-style: normal;
-}
-.clicker {
-    background-color: #5e5e5e;
-    color: white;
-    padding: 10px 20px;
-    font-size: 16px;
-    cursor: pointer;
-    border: none;
-    border-radius: 5px;
-    margin: 10px auto;
-    text-decoration: none;
-    display: inline-block;
-    max-width: 200px;
-    transition: transform 0.5s ease; 
-    text-align: center;
-  }
-  .clicker.hidden {
-    display: none;
-  }
-  .hiddendiv {
-    height: 0px;
-    background-color: green;
-    overflow: hidden;
-    transition: height 0.5s;
-  }
-  .hiddendiv.nr2 {
-    background-color: red;
-  }
-  
-  #showdiv1:target ~ div a[href="#showdiv1"],
-  #showdiv2:target ~ div a[href="#showdiv2"] {
-    display: none;
-  }
-  #showdiv1:target ~ div a[href="#hidediv1"],
-  #showdiv2:target ~ div a[href="#hidediv2"] {
-    display: inline-block;
-  }
-  #showdiv1:target ~ div .hiddendiv.nr1,
-  #showdiv2:target ~ div .hiddendiv.nr2 {
-    height: 130px;
-  }
diff --git a/css/popup.css b/css/popup.css
deleted file mode 100644
index 6c3ef26..0000000
--- a/css/popup.css
+++ /dev/null
@@ -1,81 +0,0 @@
-body {
-    font-family: 'Arial', sans-serif;
-    background-color: #f4f4f4;
-    margin: 0;
-    padding: 0;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-}
-
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    justify-content: center;
-    align-items: center;
-}
-
-.modal-content {
-    background-color: white;
-    padding: 20px;
-    border-radius: 10px;
-    width: 80%;
-    max-width: 400px;
-    text-align: center;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.modal h2 {
-    color: #333;
-}
-
-.modal p {
-    color: #555;
-    margin-bottom: 20px;
-}
-
-.modal button {
-    background-color: #4caf50;
-    color: white;
-    padding: 10px 20px;
-    font-size: 16px;
-    cursor: pointer;
-    border: none;
-    border-radius: 5px;
-    margin: 5px;
-}
-
-.modal button.cancel-btn {
-    background-color: #f44336;
-}
-
-.modal button:hover {
-    background-color: #45a049;
-}
-
-.modal button.cancel-btn:hover {
-    background-color: #e53935;
-}
-
-.copy-link {
-    background-color: #f4f4f4;
-    padding: 10px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    margin-bottom: 15px;
-}
-
-.copy-btn {
-    background-color: #9656ce;
-}
-
-.copy-btn:hover {
-    background-color: #5b209a;
-}
diff --git a/css/searchbar.css b/css/searchbar.css
deleted file mode 100644
index a07334e..0000000
--- a/css/searchbar.css
+++ /dev/null
@@ -1,15 +0,0 @@
-
-.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/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..ce5e93c
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,265 @@
+/* General Styles */
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f1f1f1;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    overflow-x: hidden;
+    color: #333;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+body.dark-mode {
+    background-color: #141414;
+    color: #f1f1f1;
+}
+
+header {
+    background-color: #4caf50;
+    color: white;
+    padding: 20px 0;
+    text-align: center;
+}
+
+header h1 {
+    margin: 0;
+}
+
+main {
+    flex: 1;
+    padding: 20px;
+}
+
+.counter, .info, .clients, .danger-zone {
+    margin-bottom: 20px;
+}
+
+.Container18, .Container15, .ContainerOther {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    margin: 20px 0;
+}
+
+button, .source-btn, .dsc-btn, .clr-btn {
+    background-color: #4caf50;
+    color: white;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+    text-decoration: none;
+    display: inline-block;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+button:hover, .source-btn:hover, .dsc-btn:hover, .clr-btn:hover {
+    background-color: #45a049;
+    transform: scale(1.05);
+}
+
+.source-btn {
+    background-color: #000; /* Black color for GitHub button */
+}
+
+.dsc-btn {
+    background-color: #9656ce;
+}
+
+.clr-btn {
+    background-color: #ff3c00;
+}
+
+.search-container {
+    margin: 20px 0;
+}
+
+#search-bar {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 50%;
+    max-width: 400px;
+    transition: border-color 0.3s ease;
+}
+
+#search-bar:focus {
+    border-color: #4caf50;
+    outline: none;
+}
+
+.footer {
+    background-color: #444; /* Dark gray color for footer */
+    color: white; /* Light text color for footer */
+    padding: 20px;
+    text-align: center;
+    margin-top: auto;
+}
+
+.footer a {
+    color: white; /* Light text color for footer links */
+    text-decoration: none;
+    margin: 0 10px;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}
+
+.footer button {
+    color: white;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+    text-decoration: none;
+    display: inline-block;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.footer button.server-list {
+    background-color: #000; /* Black color for Server List button */
+}
+
+.footer button.server-list:hover {
+    background-color: #333; /* Slightly lighter shade for hover effect */
+    transform: scale(1.05);
+}
+
+.footer button.eaglerrinth-mod-list {
+    background-color: #9656ce; /* Same color as Discord link button */
+}
+
+.footer button.eaglerrinth-mod-list:hover {
+    background-color: #a751f2; /* Slightly lighter shade for hover effect */
+    transform: scale(1.05);
+}
+
+/* Modal Styles */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    background-color: white;
+    padding: 20px;
+    border-radius: 10px;
+    width: 80%;
+    max-width: 400px;
+    text-align: center;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.modal h2 {
+    color: #333;
+}
+
+.modal p {
+    color: #555;
+    margin-bottom: 20px;
+}
+
+.modal button {
+    background-color: #4caf50;
+    color: white;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+    margin: 5px;
+}
+
+.modal button.cancel-btn {
+    background-color: #f44336;
+}
+
+.modal button:hover {
+    background-color: #45a049;
+}
+
+.modal button.cancel-btn:hover {
+    background-color: #e53935;
+}
+
+.copy-link {
+    background-color: #f4f4f4;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    margin-bottom: 15px;
+}
+
+.copy-btn {
+    background-color: #9656ce;
+}
+
+.copy-btn:hover {
+    background-color: #5b209a;
+}
+
+/* Dark Mode Styles */
+body.dark-mode .modal-content {
+    background-color: #333;
+    color: #f1f1f1;
+}
+
+body.dark-mode .modal h2 {
+    color: #f1f1f1;
+}
+
+body.dark-mode .modal p {
+    color: #ccc;
+}
+
+body.dark-mode #search-bar {
+    background-color: #444;
+    color: #f1f1f1;
+    border-color: #555;
+}
+
+body.dark-mode #search-bar:focus {
+    border-color: #4caf50;
+}
+
+body.dark-mode .footer {
+    background-color: #444; /* Dark gray color for footer in dark mode */
+    color: white; /* Light text color for footer in dark mode */
+}
+
+body.dark-mode .footer a {
+    color: white; /* Light text color for footer links in dark mode */
+}
+
+body.dark-mode .footer button.server-list {
+    background-color: #000; /* Black color for Server List button in dark mode */
+}
+
+body.dark-mode .footer button.server-list:hover {
+    background-color: #333; /* Slightly lighter shade for hover effect in dark mode */
+}
+
+body.dark-mode .footer button.eaglerrinth-mod-list {
+    background-color: #9656ce; /* Same color as Discord link button in dark mode */
+}
+
+body.dark-mode .footer button.eaglerrinth-mod-list:hover {
+    background-color: #a751f2; /* Slightly lighter shade for hover effect in dark mode */
+}
diff --git a/index.html b/index.html
index bdd534a..55e4835 100644
--- a/index.html
+++ b/index.html
@@ -1,164 +1,152 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Eaglercraft Web Clients Site">
     <meta name="keywords" content="Eaglercraft, EaglercraftX, Eaglercraft X, EaglercraftX 1.8, Eaglercraft X 1.8, EaglercraftX 1-8, Eaglercraft X 1-8, Eagler, Minecraft, MC, MC Web, MC Online, Minecraft Online, Minecraft Web, Eaglercraft 1.9, Eaglercraft 1-9, Eaglercraft 1.9, Eaglercraft 1-9, Eaglercraft 1.5.2, Eaglercraft 1-5-2, Eaglercraft Clients, Games, Games, 1.8, 1.8.8, 1-8, 1-8-8, 1.9, 1-9, 1.5, 1.5.2, 1-5, 1-5-2">
     <title>EaglerCraftX</title>
     <link rel="icon" type="image/x-icon" href="images/icon.jpeg">
-    <link rel="stylesheet" href="css/index.css">
-    <link rel="stylesheet" href="css/popup.css">
-    <link rel="stylesheet" href="css/searchbar.css">
+    <link rel="stylesheet" href="css/styles.css">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2593894696548093" crossorigin="anonymous"></script>
-    <script src="js/ga4.js"></script> <!-- if you put the ga4 script in ANY other file, put a "/" before "js" -->
-    <script src="js/darkmode.js"></script>
-    <script src="js/showmodded.js"></script>
-  </head>
-  <body style="background-color: rgb(241, 241, 241); color: black;">
-    <h1 style="color: black;">Welcome to EaglerCraftX</h1>
-    <label for="darkModeCheckbox">Dark Mode Checkbox</label>
-    <input type="checkbox" id="darkModeCheckbox">
-    <p style="color: black;">Site views counter:</p>
-    <div align="center">
-      <a>
-        <img src="https://www.free-website-hit-counter.com/c.php?d=9&amp;id=177632&amp;s=16" border="0" alt="View Counter">
-      </a>
-    </div>
-    <p style="color: black;">These clients might be outdated.</p>
-    <p style="color: black;">Please give our github repository a star if you like this site (link at the bottom)</p>
-    <p style="color: black;">Server List and Mod List also at the bottom if you need it.</p>
-    <p style="color: black;">Have any questions, bug reports or suggestions? Join our Discord server by pressing the button below!</p>
-    <a href="https://discord.gg/czV7M8JXXM" class="dsc-btn" target="_blank">Discord Server</a>
-    <p style="color: black;">Scroll down to the bottom for buttons/links.</p>
-    <h2 class="pick-client" style="color: black;">Pick a Client:</h2>
-    <label for="showModded">Show Modded Clients</label>
-    <input type="checkbox" id="showModded">
-    <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" style="color: black;">Version 1.8</p>
-      <div class="Container18">
-        <a class="version-link filter-button" href="./eagler-files/1.8/Main/index.html">
-          <button style="background-color: rgb(76, 175, 80);">Main 1.8 Client</button>
-        </a>
-        <a class="version-link filter-button" href="./eagler-files/1.8/resent4.0/index.html">
-          <button style="background-color: rgb(76, 175, 80);">Resent Client 4.0</button>
-        </a>
-        <a class="version-link filter-button" href="./eagler-files/1.8/Shadow/index.html">
-          <button style="background-color: rgb(76, 175, 80);">Shadow Client 4.0</button>
-        </a>
-        <a class="version-link filter-button" href="./eagler-files/1.8/Astra_Client.html">
-          <button style="background-color: rgb(76, 175, 80);">Astra Client 1.3</button>
-        </a>
-        <a class="version-link filter-button" href="./eagler-files/1.8/EaglerForge/index.html">
-          <button style="background-color: rgb(76, 175, 80);">EaglerForge</button>
-        </a>
-      </div>
-    </div>
-    <div id="moddedButtons">
-      <p class="version-text" style="color: black;">Version 1.8 Modded Clients</p>
-      <div class="Container18">
-        <a class="modded-buttons filter-button" href="./eagler-files/modded/1.8/Starlike_Client_Offline.html">
-          <button style="background-color: rgb(76, 175, 80);">Starlike Client</button>
-        </a>
-      </div>
-    </div>
-    <!-- Version 1.5.2 Section -->
-    <div id="desktopVersion152">
-      <p class="version-text" style="color: black;">Version 1.5.2</p>
-      <div class="Container15">
-        <a class="version-link filter-button" href="./eagler-files/1.5.2/main/index.html">
-          <button style="background-color: rgb(76, 175, 80);">Main 1.5.2 Client</button>
-        </a>
-        <a class="version-link filter-button" href="./eagler-files/1.5.2/PrecisionBeta.html">
-          <button style="background-color: rgb(76, 175, 80);">Precision Beta Client</button>
-        </a>
-        <a class="version-link filter-button" href="./eagler-files/1.5.2/precisionbeta2/index.html">
-          <button style="background-color: rgb(76, 175, 80);">Precision Beta 2 Client</button>
-        </a>
-      </div>
-    </div>
-    <!-- Other Section -->
-    <div id="desktopVersionOther">
-      <p class="version-text" style="color: black;">Other Versions</p>
-      <div class="ContainerOther">
-        <a class="version-link filter-button" href="./eagler-files/1.7.3/Beta_1.7.3_Offline_Download.html">
-          <button style="background-color: rgb(76, 175, 80);">1.7.3 Beta Client</button>
-        </a>
-        <a class="version-link filter-button" href="./eagler-files/infdev/Infdev-20100630-1.html">
-          <button style="background-color: rgb(76, 175, 80);">Infdev Client</button>
-        </a>
-      </div>
-    </div>
-    <h3>DANGER ZONE</h3>
-    <a onclick="openClrModal();" class="clr-btn">Reset All Local Data</a>
-    <a onclick="eruda.init();">
-      <button style="background-color: rgb(76, 175, 80);">Devtools</button>
-    </a>
-    <div id="clr-data-model" class="modal">
-      <div class="modal-content">
-        <h2>DANGER ZONE</h2>
-        <p style="color: black;">Are you sure you want to clear all your local data</p>
-        <button onclick="localStorage.clear(); location.reload();" style="background-color: rgb(76, 175, 80);">Yes</button>
-        <button class="cancel-btn" onclick="closeClrModal()" style="background-color: rgb(76, 175, 80);">Cancel</button>
-      </div>
-    </div>
-    <script src="js/mobilecheck.js"></script>
-    <script src="js/searchbar.js"></script>
-    <div class="footer" style="background-color: rgb(221, 221, 221);">
-      <p style="color: black;">I am not affiliated with EaglerCraft, Eagtek, Microsoft, or Mojang. I solely host these sites.</p>
-      <p style="color: black;">By using this site you agree to Google Analytics being used on this site</p>
-      <a href="https://github.com/eaglercraftx1-8/eaglercraftx1-8.github.io" class="source-btn" target="_blank" style="background-color: rgb(51, 51, 51);">Github Repository</a>
-      <a href="https://discord.gg/czV7M8JXXM" class="dsc-btn" target="_blank">Discord Server</a>
-      <a href="https://servers.eaglercraft.com/" target="_blank">
-        <button style="background-color: rgb(76, 175, 80);">Server List</button>
-      </a>
-      <a href="https://eaglerrinth.github.io/" target="_blank">
-        <button style="background-color: rgb(76, 175, 80);">EaglerRinth Mod List</button>
-      </a>
-<div id="showdiv2"></div>
-
-<div>
-  <a href="#showdiv2" class="clicker" target="_blank">
-  <a href="#showdiv2" class="clicker" tabindex="2">Settings Page</a>
-  <a href="#hidediv2" class="clicker hidden" tabindex="2">Settings Page</a>
-
-  <div class="hiddendiv nr1"></div>
-  <div class="hiddendiv nr2"></div>
-</div>
-
-    </div>
-    <div id="joinModal" class="modal" style="display: none;">
-      <div class="modal-content">
-        <h2>Join Our Discord Server!</h2>
-        <p style="color: black;">Join for voting, bug reports, suggestions, help, etc.</p>
-        <button onclick="openCopyModal()" style="background-color: rgb(76, 175, 80);">Yes</button>
-        <button class="cancel-btn" onclick="closeModal()" style="background-color: rgb(76, 175, 80);">Cancel</button>
-        <div style="margin-top: 20px;">
-          <input type="checkbox" id="dontShowCheckbox">
-          <label for="dontShowCheckbox">Don't show again</label>
-        </div>
-      </div>
-    </div>
-    <div id="copyModal" class="modal" style="display: none;">
-      <div class="modal-content">
-        <h2>Copy Discord Link</h2>
-        <p class="copy-link" id="discordLink" style="color: black;">https://discord.gg/czV7M8JXXM</p>
-        <button class="copy-btn" onclick="copyLink()" style="background-color: rgb(76, 175, 80);">Copy Link</button>
-        <button class="cancel-btn" onclick="closeModal()" style="background-color: rgb(76, 175, 80);">Close</button>
-        <script>
-          window.addEventListener('message', (event) => {
-              // Set the received color as the background color of the page
-              document.body.style.backgroundColor = event.data;
-          });
-      </script>
-      </div>
-    </div>
+    <script src="js/ga4.js"></script>
+    <script src="js/main.js"></script>
     <script src="js/popup.js"></script>
-  </body>
+</head>
+<body>
+    <header>
+        <h1>Welcome to EaglerCraftX</h1>
+        <label for="darkModeCheckbox">Dark Mode</label>
+        <input type="checkbox" id="darkModeCheckbox">
+    </header>
+    <main>
+        <section class="counter">
+            <p>Site views counter:</p>
+            <div align="center">
+                <img src="https://www.free-website-hit-counter.com/c.php?d=9&amp;id=177632&amp;s=16" border="0" alt="View Counter">
+            </div>
+        </section>
+        <section class="info">
+            <p>These clients might be outdated.</p>
+            <p>Please give our <a href="https://github.com/eaglercraftx1-8/eaglercraftx1-8.github.io" target="_blank">GitHub repository</a> a star if you like this site.</p>
+            <p>Server List and Mod List also at the bottom if you need it.</p>
+            <p>Have any questions, bug reports, or suggestions? Join our Discord server by pressing the button below!</p>
+            <a href="https://discord.gg/czV7M8JXXM" class="dsc-btn" target="_blank">Discord Server</a>
+            <p>Scroll down to the bottom for buttons/links.</p>
+        </section>
+        <section class="clients">
+            <h2 class="pick-client">Pick a Client:</h2>
+            <label for="showModded">Show Modded Clients</label>
+            <input type="checkbox" id="showModded">
+            <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>
+                <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 Client 4.0</button>
+                    </a>
+                    <a class="version-link filter-button" href="./eagler-files/1.8/Shadow/index.html">
+                        <button>Shadow Client 4.0</button>
+                    </a>
+                    <a class="version-link filter-button" href="./eagler-files/1.8/Astra_Client.html">
+                        <button>Astra Client 1.3</button>
+                    </a>
+                    <a class="version-link filter-button" href="./eagler-files/1.8/EaglerForge/index.html">
+                        <button>EaglerForge</button>
+                    </a>
+                </div>
+            </div>
+            <div id="moddedButtons">
+                <p class="version-text">Version 1.8 Modded Clients</p>
+                <div class="Container18">
+                    <a class="modded-buttons filter-button" href="./eagler-files/modded/1.8/Starlike_Client_Offline.html">
+                        <button>Starlike Client</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>
+            <!-- Other Section -->
+            <div id="desktopVersionOther">
+                <p class="version-text">Other Versions</p>
+                <div class="ContainerOther">
+                    <a class="version-link filter-button" href="./eagler-files/1.7.3/Beta_1.7.3_Offline_Download.html">
+                        <button>1.7.3 Beta Client</button>
+                    </a>
+                    <a class="version-link filter-button" href="./eagler-files/infdev/Infdev-20100630-1.html">
+                        <button>Infdev Client</button>
+                    </a>
+                </div>
+            </div>
+        </section>
+        <section class="danger-zone">
+            <h3>DANGER ZONE</h3>
+            <a onclick="openClrModal();" class="clr-btn">Reset All Local Data</a>
+            <a onclick="eruda.init();">
+                <button>Devtools</button>
+            </a>
+            <div id="clr-data-model" class="modal">
+                <div class="modal-content">
+                    <h2>DANGER ZONE</h2>
+                    <p>Are you sure you want to clear all your local data?</p>
+                    <button>Yes</button>
+                    <button class="cancel-btn">Cancel</button>
+                </div>
+            </div>
+        </section>
+    </main>
+    <footer class="footer">
+        <p>I am not affiliated with EaglerCraft, Eagtek, Microsoft, or Mojang. I solely host these sites.</p>
+        <p>By using this site you agree to Google Analytics being used on this site.</p>
+        <a href="https://github.com/eaglercraftx1-8/eaglercraftx1-8.github.io" class="source-btn" target="_blank">GitHub Repository</a>
+        <a href="https://discord.gg/czV7M8JXXM" class="dsc-btn" target="_blank">Discord Server</a>
+        <a href="https://servers.eaglercraft.com/" target="_blank">
+            <button class="server-list">Server List</button>
+        </a>
+        <a href="https://eaglerrinth.github.io/" target="_blank">
+            <button class="eaglerrinth-mod-list">EaglerRinth Mod List</button>
+        </a>
+    </footer>
+    <div id="joinModal" class="modal">
+        <div class="modal-content">
+            <h2>Join Our Discord Server!</h2>
+            <p>Join for voting, bug reports, suggestions, help, etc.</p>
+            <button>Yes</button>
+            <button class="cancel-btn">Cancel</button>
+            <div style="margin-top: 20px;">
+                <input type="checkbox" id="dontShowCheckbox">
+                <label for="dontShowCheckbox">Don't show again</label>
+            </div>
+        </div>
+    </div>
+    <div id="copyModal" class="modal">
+        <div class="modal-content">
+            <h2>Copy Discord Link</h2>
+            <p class="copy-link" id="discordLink">https://discord.gg/czV7M8JXXM</p>
+            <button class="copy-btn">Copy Link</button>
+            <button class="cancel-btn">Close</button>
+        </div>
+    </div>
+</body>
 </html>
diff --git a/js/darkmode.js b/js/darkmode.js
deleted file mode 100644
index b9da1b3..0000000
--- a/js/darkmode.js
+++ /dev/null
@@ -1,74 +0,0 @@
-$(document).ready(function() {
-    function updateDarkMode() {
-        var isChecked = $("#darkModeCheckbox").is(":checked");
-        if (isChecked) {
-            const body = document.querySelector('body');
-            body.style.backgroundColor = '#141414';
-            body.style.color = '#f1f1f1';
-
-            const paragraphs = document.querySelectorAll('p');
-            paragraphs.forEach(function(p) {
-                p.style.color = '#f1f1f1';
-            });
-
-            const headTwo = document.querySelector('h2');
-            headTwo.style.color = '#f1f1f1';
-
-            const head = document.querySelector('h1');
-            head.style.color = '#f1f1f1';
-            
-            const foot = document.querySelector('.footer');
-            foot.style.backgroundColor = '#010101';
-
-            const gitBtn = document.querySelector('.source-btn');
-            gitBtn.style.backgroundColor = '#ff6847';
-            
-            const buttons = document.querySelectorAll('button');
-            buttons.forEach(function(button) {
-                button.style.backgroundColor = '#30d3d2';
-            });
-
-            const versionTexts = document.querySelectorAll('.version-text');
-            versionTexts.forEach(function(vt) {
-                vt.style.color = '#f1f1f1';
-            });
-
-        } else {
-            const body = document.querySelector('body');
-            body.style.backgroundColor = '#f1f1f1';
-            body.style.color = 'black';
-            const paragraphs = document.querySelectorAll('p');
-            paragraphs.forEach(function(p) {
-                p.style.color = 'black';
-            });
-
-            const headTwo = document.querySelector('h2');
-            headTwo.style.color = 'black';
-
-            const head = document.querySelector('h1');
-            head.style.color = 'black';
-            
-            const foot = document.querySelector('.footer');
-            foot.style.backgroundColor = '#ddd';
-
-            const gitBtn = document.querySelector('.source-btn');
-            gitBtn.style.backgroundColor = '#333333';
-
-            const buttons = document.querySelectorAll('button');
-            buttons.forEach(function(button) {
-                button.style.backgroundColor = '#4caf50';
-            });
-
-            const versionTexts = document.querySelectorAll('.version-text');
-            versionTexts.forEach(function(vt) {
-                vt.style.color = 'black';
-            });
-        }
-    }
-
-    $("#darkModeCheckbox").on("change", function() {
-        updateDarkMode();
-    });
-
-    updateDarkMode();
-});
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..3a615f9
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,67 @@
+// main.js
+
+$(document).ready(function() {
+    // Dark Mode Functionality
+    function updateDarkMode() {
+        var isChecked = $("#darkModeCheckbox").is(":checked");
+        var body = document.querySelector('body');
+        var paragraphs = document.querySelectorAll('p');
+        var headings = document.querySelectorAll('h1, h2, h3');
+        var footer = document.querySelector('.footer');
+        var buttons = document.querySelectorAll('button, .source-btn, .dsc-btn, .clr-btn');
+        var versionTexts = document.querySelectorAll('.version-text');
+
+        if (isChecked) {
+            body.classList.add('dark-mode');
+        } else {
+            body.classList.remove('dark-mode');
+        }
+    }
+
+    $("#darkModeCheckbox").on("change", updateDarkMode);
+    updateDarkMode();
+
+    // Clr data
+    function openClrModal() {
+        document.getElementById('clr-data-model').style.display = 'flex';
+    }
+
+    function closeClrModal() {
+        document.getElementById('clr-data-model').style.display = 'none';
+    }
+
+    document.getElementById('clr-data-model').addEventListener('click', function(event) {
+        if (event.target.classList.contains('cancel-btn')) {
+            closeClrModal();
+        } else if (event.target.tagName === 'BUTTON' && event.target.textContent === 'Yes') {
+            localStorage.clear();
+            location.reload();
+        }
+    });
+
+    // Search Bar Functionality
+    $('#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();
+            }
+        });
+    });
+
+    // Show Modded Clients Functionality
+    function updateShowModded() {
+        var isChecked = $("#showModded").is(":checked");
+        if (isChecked) {
+            $("#moddedButtons").show();
+        } else {
+            $("#moddedButtons").hide();
+        }
+    }
+
+    $("#showModded").on("change", updateShowModded);
+    updateShowModded();
+});
diff --git a/js/searchbar.js b/js/searchbar.js
deleted file mode 100644
index 27dc739..0000000
--- a/js/searchbar.js
+++ /dev/null
@@ -1,13 +0,0 @@
-$(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();
-            }
-        });
-    });
-});
diff --git a/js/showmodded.js b/js/showmodded.js
deleted file mode 100644
index 73bea34..0000000
--- a/js/showmodded.js
+++ /dev/null
@@ -1,21 +0,0 @@
-$(document).ready(function() {
-    function updateShowModded() {
-        var isChecked = $("#showModded").is(":checked");
-        if (isChecked) {
-            $("#moddedButtons").show();
-        } else {
-            $("#moddedButtons").hide();
-        }
-    }
-    function updateButtons() {
-        $(".modded-buttons").each(function() {
-            var url = $(this).data("url");
-            $(this).attr("href", url);
-        });
-    }
-    $("#showModded").on("change", function() {
-        updateShowModded();
-        updateButtons();
-    });
-    updateShowModded();
-});
\ No newline at end of file