diff --git a/assets/images/info/NamefulLogo.png b/assets/images/info/new-nameful-logo.png
similarity index 100%
rename from assets/images/info/NamefulLogo.png
rename to assets/images/info/new-nameful-logo.png
diff --git a/assets/images/info/screenshot-1.jpg b/assets/images/info/screenshot-1.jpg
new file mode 100644
index 0000000..5c12f11
Binary files /dev/null and b/assets/images/info/screenshot-1.jpg differ
diff --git a/assets/images/info/screenshot-2.jpg b/assets/images/info/screenshot-2.jpg
new file mode 100644
index 0000000..1de4e30
Binary files /dev/null and b/assets/images/info/screenshot-2.jpg differ
diff --git a/assets/images/info/screenshot-3.jpg b/assets/images/info/screenshot-3.jpg
new file mode 100644
index 0000000..3ca8ca9
Binary files /dev/null and b/assets/images/info/screenshot-3.jpg differ
diff --git a/assets/images/info/screenshot-4.jpg b/assets/images/info/screenshot-4.jpg
new file mode 100644
index 0000000..9558cd9
Binary files /dev/null and b/assets/images/info/screenshot-4.jpg differ
diff --git a/assets/images/info/screenshot-5.jpg b/assets/images/info/screenshot-5.jpg
new file mode 100644
index 0000000..60ca7da
Binary files /dev/null and b/assets/images/info/screenshot-5.jpg differ
diff --git a/assets/images/info/ss-25_05_2025-01-53-13.png b/assets/images/info/ss-25_05_2025-01-53-13.png
deleted file mode 100644
index 734c961..0000000
Binary files a/assets/images/info/ss-25_05_2025-01-53-13.png and /dev/null differ
diff --git a/assets/images/info/ss-25_05_2025-01-53-25.png b/assets/images/info/ss-25_05_2025-01-53-25.png
deleted file mode 100644
index aaa2210..0000000
Binary files a/assets/images/info/ss-25_05_2025-01-53-25.png and /dev/null differ
diff --git a/assets/images/info/ss-25_05_2025-01-53-48.png b/assets/images/info/ss-25_05_2025-01-53-48.png
deleted file mode 100644
index 71dbf49..0000000
Binary files a/assets/images/info/ss-25_05_2025-01-53-48.png and /dev/null differ
diff --git a/assets/images/info/ss-25_05_2025-01-53-58.png b/assets/images/info/ss-25_05_2025-01-53-58.png
deleted file mode 100644
index d2d90dc..0000000
Binary files a/assets/images/info/ss-25_05_2025-01-53-58.png and /dev/null differ
diff --git a/assets/images/info/ss-25_05_2025-01-54-19.png b/assets/images/info/ss-25_05_2025-01-54-19.png
deleted file mode 100644
index 16d8694..0000000
Binary files a/assets/images/info/ss-25_05_2025-01-54-19.png and /dev/null differ
diff --git a/assets/javascript/index.js b/assets/javascript/index.js
index 034478e..8c4dc02 100644
--- a/assets/javascript/index.js
+++ b/assets/javascript/index.js
@@ -1,5 +1,6 @@
 const url = new URL(window.location.toLocaleString());
-const sectionList = document.getElementsByClassName("section");
+const pageList = document.getElementsByClassName("page");
+const loaded = []
 
 const nnRuler = "cool_tellow";
 const nnCoRuler = "ColoradoCrusade";
@@ -82,98 +83,6 @@ function processColorCodes() {
   console.log("Processed color codes!")
 }
 
-function switchSection(sectionName, button) {
-  for (let i = 0; i < sectionList.length; i++) {
-    sectionList[i].style.display = "none";
-  }
-
-  let navButton = document.getElementsByClassName("navButton");
-  for (let i = 0; i < navButton.length; i++) {
-    navButton[i].style.backgroundColor = "black";
-    navButton[i].style.color = "white";
-  }
-  
-  document.title = button.innerText;
-  document.cookie = "section=" + sectionName;
-
-  document.getElementById(sectionName).style.display = "block";
-
-  button.style.backgroundColor = "white";
-  button.style.color = "black";
-}
-
-function loadRulersAndElectionCountdown() {
-  console.log("Ruler found: \"" + nnRuler + "\"");
-  document.getElementById("ruler").innerText = nnRuler;
-  document.getElementById("rulerAttachment").src = "https://minotar.net/armor/body/" + nnRuler + "/100.png";
-
-  console.log("Co-ruler found: \"" + nnCoRuler + "\"");
-  document.getElementById("coRuler").innerText = nnCoRuler;
-  document.getElementById("coRulerAttachment").src = "https://minotar.net/armor/body/" + nnCoRuler + "/100.png";
-
-  console.log("Next election occurs in " + calculateCountdown(electionDate) + " days");
-
-
-  if (Math.ceil(calculateCountdown(electionDate)) <= 0) {
-    document.getElementById("electionCountdown").innerText = "The next election is RIGHT NOW!!!";
-  } else {
-    document.getElementById("electionCountdown").innerText = "The next election is in " + Math.ceil(calculateCountdown(electionDate)) + " days!";
-  }
-}
-
-function randomizeSplash() {
-  let randomSplash = splashes[Math.floor(Math.random() * splashes.length)];
-  console.log("Splash randomized to \"" + randomSplash +"\"");
-
-  document.getElementById("splash").innerHTML = randomSplash;
-}
-
-function loadConstitution() {
-  for (let constitutionSection = 0; constitutionSection < constitutionSections.length; constitutionSection++) {
-    let constitutionSectionName = constitutionSections[constitutionSection].toLowerCase();
-    let constitutionSectionContainer = document.createElement("div");
-    let constitutionSectionTitle = document.createElement("p");
-    let constitutionLine = document.createElement("hr");
-
-    constitutionSectionContainer.className = "card";
-    constitutionSectionContainer.id = constitutionSectionName + "ConstitutionSection";
-    constitutionSectionTitle.innerText = constitutionSections[constitutionSection];
-
-    document.getElementById("constitution").append(constitutionSectionContainer);
-    document.getElementById(constitutionSectionContainer.id).append(constitutionSectionTitle,constitutionLine);
-
-    if (typeof (constitutionPreambles[constitutionSection]) !== "undefined") {
-      let sectionPreamble = document.createElement("div");
-
-      sectionPreamble.id = constitutionSectionName + "Preamble";
-      sectionPreamble.innerText = constitutionPreambles[constitutionSection];
-
-      document.getElementById(constitutionSectionContainer.id).append(sectionPreamble);
-    }
-
-    for (let amendment = 0; amendment < constitutionAmendments[constitutionSection].length; amendment++) {
-      let amendmentContent = document.createElement("p");
-
-      amendmentContent.class = "amendment";
-      amendmentContent.id = constitutionSections[constitutionSection] + "Amendment" + amendment;
-      amendmentContent.innerText = amendment + 1 + ") " + constitutionAmendments[constitutionSection][amendment];
-
-
-      document.getElementById(constitutionSectionContainer.id).append(amendmentContent);
-    }
-  }
-}
-
-function loadMemberList() {
-  for (let member = 0; member < memberList.length; member++) {
-    let memberListItem = document.createElement("p");
-    memberListItem.innerHTML = memberList[member];
-
-    document.getElementById("memberCount").innerText = "Member Count: " + memberList.length;
-    document.getElementById("memberList").append(memberListItem);
-  }
-}
-
 function loadDiscordMessagesFromJson(jsonName, addMessageContent, addAttachments, attachmentLinkOrEmbed) {
   fetch("/assets/json/" + jsonName + "/" + jsonName + ".json")
   .then(response => response.json())
@@ -187,9 +96,9 @@ function loadDiscordMessagesFromJson(jsonName, addMessageContent, addAttachments
       let messageLine = document.createElement("hr");
 
       messageContainer.className = "card";
-      messageContainer.id = jsonName + message;
-      messageAuthorAvatar.className = "messageAuthorAvatar";
-      messageAuthorAvatar.src = json.messages[message].author.avatarUrl;
+      messageContainer.id = jsonName + "-" + message;
+      messageAuthorAvatar.className = "message-author-avatar";
+      messageAuthorAvatar.src = "/assets/json/" + jsonName + "/" + json.messages[message].author.avatarUrl;
       messageTitle.style = "margin-top: 5px;"
       messageTitle.innerHTML = "<span style='color: " + json.messages[message].author.color + ";'>" + json.messages[message].author.nickname + "</span>" + " | " + messageDate.toLocaleDateString();
 
@@ -205,56 +114,166 @@ function loadDiscordMessagesFromJson(jsonName, addMessageContent, addAttachments
       }
 
       if (addAttachments == true) {
+        let messageAttachment;
         for (let attachment = 0; attachment < json.messages[message].attachments.length; attachment++) {
           if (attachmentLinkOrEmbed === "link") {
-            let messageAttachment = document.createElement("a");
+            messageAttachment = document.createElement("a");
             
-            messageAttachment.className = "messageAttachment";
-            messageAttachment.href = json.messages[message].attachments[attachment].url;
+            messageAttachment.href = "/assets/json/" + jsonName + json.messages[message].attachments[attachment].url;
             messageAttachment.innerText = json.messages[message].attachments[attachment].fileName;
             
-            document.getElementById(messageContainer.id).append(messageAttachment);
           } else if (attachmentLinkOrEmbed === "embed") {
-            let messageAttachment = document.createElement("img");
+            messageAttachment = document.createElement("img");
 
-            messageAttachment.className = "messageAttachment";
-            messageAttachment.src = json.messages[message].attachments[attachment].url;
+            messageAttachment.src = "/assets/json/" + jsonName + "/" + json.messages[message].attachments[attachment].url;
 
             document.getElementById(messageContainer.id).append(messageAttachment);
           }
+          messageAttachment.className = "message-attachment";
+          document.getElementById(messageContainer.id).append(messageAttachment);
         }
       }
     }
   });
 }
 
-function onPageLoad() {
-  if (url.searchParams.has("section")) {
-    console.log("URL parameter found, forcing section to \"" + url.searchParams.get("section") + "\"");
-    document.getElementById(url.searchParams.get("section") + "Button").click();
-  } else if (getCookie("section") === "") {
-    console.log("A wild user appears! Defaulting to first section, \"" + sectionList[0].id + "\"");
-    document.getElementById(sectionList[0].id + "Button").click();
-  } else {
-    console.log("Section cookie found, restoring section to \"" + getCookie("section") + "\"");
-    document.getElementById(getCookie("section") + "Button").click();
+function switchPage(pageName, button) {
+  for (let page = 0; page < pageList.length; page++) {
+    pageList[page].style.display = "none";
   }
 
-  loadRulersAndElectionCountdown();
-  loadConstitution();
-  loadMemberList();
-  loadDiscordMessagesFromJson("announcements", true, true, "embed");
-  loadDiscordMessagesFromJson("newnamefulnewsnotice", false, true, "embed");
-  processColorCodes();
+  let navButtons = document.getElementsByClassName("nav-button");
+  for (let navButton = 0; navButton < navButtons.length; navButton++) {
+    navButtons[navButton].style.backgroundColor = "black";
+    navButtons[navButton].style.color = "white";
+  }
+  
+  document.title = button.innerText;
+  document.cookie = "page=" + pageName;
+
+  document.getElementById(pageName).style.display = "block";
+
+  button.style.backgroundColor = "white";
+  button.style.color = "black";
+
+  for (let page = 0; page <= loaded.length; page++) {
+    if (! loaded.includes(pageName)) {
+      loaded.push(pageName);
+      window[pageName + "Load"]();
+    }
+  }
+}
+
+function infoLoad() {
   randomizeSplash();
 }
 
+function electionLoad() {
+  console.log("Ruler found: \"" + nnRuler + "\"");
+  document.getElementById("ruler").innerText = nnRuler;
+  document.getElementById("ruler-attachment").src = "https://minotar.net/armor/body/" + nnRuler + "/100.png";
+
+  console.log("Co-ruler found: \"" + nnCoRuler + "\"");
+  document.getElementById("co-ruler").innerText = nnCoRuler;
+  document.getElementById("co-ruler-attachment").src = "https://minotar.net/armor/body/" + nnCoRuler + "/100.png";
+
+  console.log("Next election occurs in " + calculateCountdown(electionDate) + " days");
+
+
+  if (Math.ceil(calculateCountdown(electionDate)) <= 0) {
+    document.getElementById("election-countdown").innerText = "The next election is RIGHT NOW!!!";
+  } else {
+    document.getElementById("election-countdown").innerText = "The next election is in " + Math.ceil(calculateCountdown(electionDate)) + " days!";
+  }
+}
+
+function randomizeSplash() {
+  let randomSplash = splashes[Math.floor(Math.random() * splashes.length)];
+  console.log("Splash randomized to \"" + randomSplash +"\"");
+
+  document.getElementById("splash").innerHTML = randomSplash;
+}
+
+function constitutionLoad() {
+  for (let constitutionSection = 0; constitutionSection < constitutionSections.length; constitutionSection++) {
+    let constitutionSectionName = constitutionSections[constitutionSection].toLowerCase();
+    let constitutionSectionContainer = document.createElement("div");
+    let constitutionSectionTitle = document.createElement("p");
+    let constitutionLine = document.createElement("hr");
+
+    constitutionSectionContainer.className = "card";
+    constitutionSectionContainer.id = constitutionSectionName + "-constitution-section";
+    constitutionSectionTitle.innerText = constitutionSections[constitutionSection];
+
+    document.getElementById("constitution").append(constitutionSectionContainer);
+    document.getElementById(constitutionSectionContainer.id).append(constitutionSectionTitle,constitutionLine);
+
+    if (typeof (constitutionPreambles[constitutionSection]) !== "undefined") {
+      let sectionPreamble = document.createElement("div");
+
+      sectionPreamble.id = constitutionSectionName + "-preamble";
+      sectionPreamble.innerText = constitutionPreambles[constitutionSection];
+
+      document.getElementById(constitutionSectionContainer.id).append(sectionPreamble);
+    }
+
+    for (let amendment = 0; amendment < constitutionAmendments[constitutionSection].length; amendment++) {
+      let amendmentContent = document.createElement("p");
+
+      amendmentContent.class = "amendment";
+      amendmentContent.id = constitutionSections[constitutionSection].toLowerCase() + "-amendment-" + amendment;
+      amendmentContent.innerText = amendment + 1 + ") " + constitutionAmendments[constitutionSection][amendment];
+
+
+      document.getElementById(constitutionSectionContainer.id).append(amendmentContent);
+    }
+  }
+}
+
+function membersLoad() {
+  for (let member = 0; member < memberList.length; member++) {
+    let memberListItem = document.createElement("p");
+    memberListItem.innerHTML = memberList[member];
+
+    document.getElementById("member-count").innerText = "Member Count: " + memberList.length;
+    document.getElementById("member-list").append(memberListItem);
+  }
+  processColorCodes();
+}
+
+function announcementsLoad() {
+  loadDiscordMessagesFromJson("announcements", true, true, "embed");
+}
+
+function newnamefulnewsnoticeLoad() {
+  loadDiscordMessagesFromJson("newnamefulnewsnotice", false, true, "embed");
+}
+
+function onPageLoad() {
+  if (url.searchParams.has("page")) {
+    console.log("URL parameter found, forcing page to \"" + url.searchParams.get("page") + "\"");
+    document.getElementById(url.searchParams.get("page") + "-button").click();
+  } else if (getCookie("page") === "") {
+    console.log("A wild user appears! Defaulting to first page, \"" + pageList[0].id + "\"");
+    document.getElementById(pageList[0].id + "-button").click();
+  } else {
+    console.log("Page cookie found, restoring page to \"" + getCookie("page") + "\"");
+    document.getElementById(getCookie("page") + "-button").click();
+  }
+
+  // electionLoad();
+  // constitutionLoad();
+  // membersLoad();
+  // announcementsLoad();
+  // newnamefulnewsnoticeLoad();
+}
+
 function loadArchive() {
   for (let archive = 0; archive < 3; archive++) {
     let archiveAttachment = document.createElement("img");
 
 
-    archiveAttachment.className = "archiveAttachment";
+    archiveAttachment.className = "archive-attachment";
     archiveAttachment.src = "/archive/archive-" + archive;
 
     document.body.append(archiveAttachment);
diff --git a/assets/stylesheets/index.css b/assets/stylesheets/index.css
index e66e122..0d76ad1 100644
--- a/assets/stylesheets/index.css
+++ b/assets/stylesheets/index.css
@@ -67,14 +67,6 @@ body {
   margin: auto;
 }
 
-.cardContainer {
-  margin: auto;
-  padding: 15px;
-  margin-bottom: 20px;
-  width: 90%;
-  height: 220;
-}
-
 #splash {
     color: #FFFF00;
     font-size: 1.5em;
@@ -94,7 +86,7 @@ body {
     animation: pop 0.58s infinite;
 }
 
-.section {
+.page {
   display: none;
   padding: 95px 20px 20px;
 }
@@ -105,7 +97,7 @@ body {
   background-color: black;
 }
 
-.navButton {
+.nav-button {
   float: left;
   padding: 10px 20px;
   border: none;
@@ -116,7 +108,7 @@ body {
   color: white;
 }
 
-.navButton:hover {
+.nav-button:hover {
   background-color: white !important;
   color: black !important;
 }
@@ -129,25 +121,25 @@ body {
 
 #footer a {
   color: white;
+  font-size: 15px;
 }
 
-.infoAttachment {
+.info-attachment {
   padding: 10px;
   width: 75%;
 }
 
-.messageAttachment {
+.message-attachment {
   padding: 10px;
   width: 75%;
 }
 
-.messageAuthorAvatar {
+.message-author-avatar {
   width: 64px;
   border-radius: 100%;
 }
 
-
-.archiveAttachment {
+.archive-attachment {
   padding: 10px;
   width: 75%;
 }
diff --git a/index.html b/index.html
index d83035e..d979419 100755
--- a/index.html
+++ b/index.html
@@ -12,84 +12,84 @@
   </head>
   <body onload="onPageLoad()">
     <div id="navbar">
-      <button class="navButton" id="infoButton" onclick="switchSection('info', this)">Info</button>
-      <button class="navButton" id="electionButton" onclick="switchSection('election', this)">Election</button>
-      <button class="navButton" id="constitutionButton" onclick="switchSection('constitution', this)">Constitution</button>
-      <button class="navButton" id="membersButton" onclick="switchSection('members', this)">Members</button>
-      <button class="navButton" id="announcementsButton" onclick="switchSection('announcements', this)">Announcements</button>
-      <button class="navButton" id="newnamefulnewsnoticeButton" onclick="switchSection('newnamefulnewsnotice', this)">News</button>
-      <!-- <button class="navButton" id="historyButton" onclick="switchSection('history', this)">History</button> -->
-      <button class="navButton" id="discordButton" onclick="window.location.href = 'https://discord.newnameful.com'">Discord</button>
+      <button class="nav-button" id="info-button" onclick="switchPage('info', this)">Info</button>
+      <button class="nav-button" id="election-button" onclick="switchPage('election', this)">Election</button>
+      <button class="nav-button" id="constitution-button" onclick="switchPage('constitution', this)">Constitution</button>
+      <button class="nav-button" id="members-button" onclick="switchPage('members', this)">Members</button>
+      <button class="nav-button" id="announcements-button" onclick="switchPage('announcements', this)">Announcements</button>
+      <button class="nav-button" id="newnamefulnewsnotice-button" onclick="switchPage('newnamefulnewsnotice', this)">News</button>
+      <!-- <button class="nav-button" id="history-button" onclick="switchPage('history', this)">History</button> -->
+      <button class="nav-button" id="discord-button" onclick="window.location.href = 'https://discord.newnameful.com'">Discord</button>
     </div>
-    <div class="section" id="info">
-      <img src="/assets/images/info/NamefulLogo.png" alt="">
+    <div class="page" id="info">
+      <img src="/assets/images/info/new-nameful-logo.png" alt="">
       <div class="tilt">
         <div id="splash" class="pop"></div>
       </div>
-      <div class="card" id="infoIntroduction">
+      <div class="card" id="info-introduction">
         <p>Introduction</p>
         <hr>
         <p>A large, populous town with great infrastructure, a good community, grand opportunities, and influence! New Nameful holds branches along other notable towns, being part of the United Cities and URO as well as the town spearheading the Nether Transit Coalition.</p>
       </div>
-      <div class="card" id="infoDistricts">
+      <div class="card" id="info-districts">
         <p>Districts</p>
         <hr>
         <p>The town is split into a district system, meaning different areas of the town may be managed by different players (and may have different rules, though this is rarely the case. Some noticeable districts include North Nameful, East Nameful, Nameful Bay, and Uptown Nameful.</p>
       </div>
-      <div class="card" id="infoLeadership">
+      <div class="card" id="info-leadership">
         <p>Leadership</p>
         <hr>
         <p>The town is run under a democratic structure of government, with bi-monthly elections to decide who leads the town. A rulership term is 2 months long, and a ruler is good to serve for at max 2 terms in a row before needing to take a mandatory off term. Political parties help group similarly minded individuals.</p>
       </div>
-      <div class="card" id="infoJoinToday">
+      <div class="card" id="info-join-today">
         <p>Join Today!</p>
         <hr>
         <p>New Nameful is FREE TO BUILD, meaning you do not need permission (save for specific districts). Just be respectful of other peoples builds and property. Take part of the community today!</p>
       </div>
-      <div class="card" id="infoAttachments">
+      <div class="card" id="info-attachments">
         <p>Images</p>
         <hr>
-        <img class="infoAttachment" src="assets/images/info/ss-25_05_2025-01-53-13.png" alt="">
-        <img class="infoAttachment" src="assets/images/info/ss-25_05_2025-01-53-25.png" alt="">
-        <img class="infoAttachment" src="assets/images/info/ss-25_05_2025-01-53-48.png" alt="">
-        <img class="infoAttachment" src="assets/images/info/ss-25_05_2025-01-53-58.png" alt="">
-        <img class="infoAttachment" src="assets/images/info/ss-25_05_2025-01-54-19.png" alt="">
+        <img class="info-attachment" src="/assets/images/info/screenshot-1.jpg" alt="">
+        <img class="info-attachment" src="/assets/images/info/screenshot-2.jpg" alt="">
+        <img class="info-attachment" src="/assets/images/info/screenshot-3.jpg" alt="">
+        <img class="info-attachment" src="/assets/images/info/screenshot-4.jpg" alt="">
+        <img class="info-attachment" src="/assets/images/info/screenshot-5.jpg" alt="">
       </div>
     </div>
-    <div class="section" id="election">
+    <div class="page" id="election">
       <p><b>Currently Elected Leaders</b></p>
       <div class="card" style="height: 340px;width: 370px;">
         <p>Ruler</p>
         <hr>
         <p id="ruler">Steve</p>
-        <img id="rulerAttachment" src="https://minotar.net/body/MHF_Steve/100.png" alt="Player Render">
+        <img id="ruler-attachment" src="https://minotar.net/body/MHF_Steve/100.png" alt="Player Render">
       </div>
       <div class="card" style="height: 340px;width: 370px;">
         <p>Co-Ruler</p>
         <hr>
-        <p id="coRuler">Steve</p>
-        <img id="coRulerAttachment" src="https://minotar.net/body/MHF_Steve/100.png" alt="Player Render">
+        <p id="co-ruler">Steve</p>
+        <img id="co-ruler-attachment" src="https://minotar.net/body/MHF_Steve/100.png" alt="Player Render">
       </div>
       <br>
-      <p id="electionCountdown">Election Countdown</p>
+      <p id="election-countdown">Election Countdown</p>
     </div>
-    <div class="section" id="constitution">
+    <div class="page" id="constitution">
       <p><b>Constitution</b></p>
     </div>
-    <div class="section" id="members">
+    <div class="page" id="members">
       <p><b>Member List</b></p>
-      <div class="card" id="memberList" style="width: 370px;">
-        <p id="memberCount">Member Count: 0</p>
+      <div class="card" id="member-list" style="width: 370px;">
+        <p id="member-count">Member Count: 0</p>
         <hr>
       </div>
     </div>
-    <div class="section" id="announcements">
+    <div class="page" id="announcements">
       <p><b>Announcements</b></p>
     </div>
-    <div class="section" id="newnamefulnewsnotice">
+    <div class="page" id="newnamefulnewsnotice">
       <p><b>New Nameful News Nexus News Network News Notice Noticeboard News</b></p>
     </div>
-    <!-- <div class="section" id="history"> -->
+    <!-- <div class="page" id="history"> -->
     <!--   <p>History</p> -->
     <!-- </div> -->
     <div id="footer">