diff --git a/equipment/equipment.js b/equipment/equipment.js
new file mode 100644
index 0000000..86d5a27
--- /dev/null
+++ b/equipment/equipment.js
@@ -0,0 +1,133 @@
+function loadHeader() {
+  fetch("../../../header.html")
+    .then(res => res.text())
+    .then(html => {
+      const headerContainer = document.getElementById("header-container");
+      if (headerContainer) {
+        headerContainer.innerHTML = html;
+
+        const stageButton = headerContainer.querySelector('.menu-item.stage');
+        if (stageButton) {
+          stageButton.classList.add('active');
+        }
+      }
+    })
+    .catch(err => console.error("Failed to load header:", err));
+}
+
+function animateLoadingCanvas() {
+  const canvas = document.getElementById("loading-canvas");
+  const loadingOverlay = document.getElementById("loading-overlay");
+  if (!canvas || !loadingOverlay) return;
+  const ctx = canvas.getContext("2d");
+  const image = new Image();
+  image.src = "/assets/en/loading/@2x-se6335ab797-cb27d69f23a4d1112bc2a0d272538f39dd3017be20e5f2e3f4a460bd0071b68d.png";
+  const frameWidth = 100;
+  const frameHeight = 100;
+  const totalFrames = 17;
+  let currentFrame = 0;
+  let lastUpdateTime = 0;
+  let animationId;
+  image.onload = () => {
+    function animate(timestamp = 0) {
+      if (loadingOverlay.style.display === "none") {
+        cancelAnimationFrame(animationId);
+        return;
+      }
+      if (!lastUpdateTime) lastUpdateTime = timestamp;
+      const elapsed = timestamp - lastUpdateTime;
+      if (elapsed > 50) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(
+          image,
+          0,
+          currentFrame * frameHeight,
+          frameWidth,
+          frameHeight,
+          0,
+          0,
+          frameWidth,
+          frameHeight
+        );
+        currentFrame = (currentFrame + 1) % totalFrames;
+        lastUpdateTime = timestamp;
+      }
+      animationId = requestAnimationFrame(animate);
+    }
+    animationId = requestAnimationFrame(animate);
+  };
+}
+
+//pain in the ass to implement. im proud of ts
+const canvas = document.getElementById("squid-canvas");
+const ctx = canvas.getContext("2d");
+const frameWidth = 64;
+const frameHeight = 64;
+const totalFrames = 8;
+const squidCount = 5;
+const squids = [];
+const canvasWidth = canvas.width;
+const canvasHeight = canvas.height;
+const titleYThreshold = 0;
+
+function createSquid() {
+  return {
+    x: Math.random() * canvasWidth,
+    y: canvasHeight + Math.random() * 300,
+    currentFrame: Math.floor(Math.random() * totalFrames),
+    speed: 0.05 + Math.random() * 0.15,
+    lastFrameUpdate: 0
+  };
+}
+
+for (let i = 0; i < squidCount; i++) {
+  squids.push(createSquid());
+}
+
+let lastTimestamp = 0;
+
+const image = new Image();
+image.src = "/assets/ika-8e075a29ff487983044303f98958fb8c852bc3e9ab07ee7597724b6c0aa4a5d7.png";
+
+image.onload = () => {
+  function animate(timestamp = 0) {
+    if (!lastTimestamp) lastTimestamp = timestamp;
+    const delta = timestamp - lastTimestamp;
+
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+
+    for (const squid of squids) {
+      squid.y -= squid.speed * delta;
+
+      if (squid.y + frameHeight < titleYThreshold) {
+        squid.x = Math.random() * canvasWidth;
+        squid.y = canvasHeight + Math.random() * 300;
+        squid.currentFrame = Math.floor(Math.random() * totalFrames);
+        squid.speed = 0.05 + Math.random() * 0.15;
+      }
+
+      if (timestamp - squid.lastFrameUpdate > 100) {
+        squid.currentFrame = (squid.currentFrame + 1) % totalFrames;
+        squid.lastFrameUpdate = timestamp;
+      }
+
+      ctx.drawImage(
+        image,
+        squid.currentFrame * frameWidth,
+        0,
+        frameWidth,
+        frameHeight,
+        squid.x,
+        squid.y,
+        frameWidth,
+        frameHeight
+      );
+    }
+
+    lastTimestamp = timestamp;
+    requestAnimationFrame(animate);
+  }
+  requestAnimationFrame(animate);
+};
+
+animateLoadingCanvas();
\ No newline at end of file
diff --git a/equipment/index.html b/equipment/index.html
new file mode 100644
index 0000000..8a5b713
--- /dev/null
+++ b/equipment/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>SplatNet - Splatoon's multiplayer service hub</title>
+  <link rel="icon" href="../favicon.ico" type="image/x-icon" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <div id="header-container"></div>
+  
+  <div id="squid-container">
+    <canvas id="squid-canvas" width="1920" height="1080"></canvas>
+  </div>
+
+  <div id="loading-overlay" class="loading-overlay">
+    <canvas id="loading-canvas" width="100" height="100"></canvas>
+    <div id="loading-text">Loading</div>
+  </div>
+
+
+  
+  <script>
+    //TODO: migrate into accompanying JS, just put it in here for now to allow for copy paste,
+    //however ie screams abt you doing this afaik
+    fetch("../header.html")
+  .then(res => res.text())
+  .then(html => {
+    const headerContainer = document.getElementById("header-container");
+    headerContainer.innerHTML = html;
+
+    const friendButton = headerContainer.querySelector('.menu-item.equipment');
+    if (friendButton) {
+      friendButton.classList.add('active');
+    }
+    
+    // temporaily force hide lol
+    document.getElementById("loading-overlay").style.display = "none";
+  });
+  </script>
+
+  <script src="equipment.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/equipment/styles.css b/equipment/styles.css
new file mode 100644
index 0000000..61aba75
--- /dev/null
+++ b/equipment/styles.css
@@ -0,0 +1,106 @@
+@font-face {
+    font-family: "Splatoon1";
+    src: url("../splatoon1.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Regular";
+    src: url("../regular.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+html {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: flex-start;
+    min-height: 100vh;
+    background-image: url("/assets/en/bg/@2x/bg_equipment-bedf92d6f41ee59b7f391f7e01d7ec00cb932e5152a2196ac939df0ad6c674b3.png"); 
+    background-repeat: repeat;
+    background-size: 800px 800px;
+    background-attachment: fixed;
+}
+
+.menu-item .hover-state {
+    display: none;
+}
+
+.menu-item:hover .hover-state,
+.menu-item.active .hover-state {
+    display: block;
+}
+
+.menu-item:hover .default,
+.menu-item.active .default {
+    display: none;
+}
+
+.loading-overlay {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 200px;
+    height: 250px;
+    background-color: rgba(0,0,0,0.8);
+    border: 3px solid white;
+    border-radius: 12px;
+    padding: 20px 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    user-select: none;
+    pointer-events: none;
+    box-sizing: border-box;
+}
+
+#loading-canvas {
+    image-rendering: pixelated;
+    width: 100px;
+    height: 100px;
+    display: block;
+    margin: 0 auto;
+}
+
+#loading-text {
+    margin-top: 12px;
+    color: white;
+    font-family: "Splatoon1", sans-serif;
+    font-size: 20px;
+    letter-spacing: 1.2px;
+    text-align: center;
+}
+
+#squid-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    overflow: visible;
+    pointer-events: none;
+    z-index: 0;
+}
+
+#squid-canvas {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+    width: 1920px;
+    height: 1080px;
+    will-change: transform;
+    pointer-events: none;
+    user-select: none;
+    z-index: 0;
+    display: block;
+}
\ No newline at end of file
diff --git a/friend_list/friendlist.js b/friend_list/friendlist.js
new file mode 100644
index 0000000..86d5a27
--- /dev/null
+++ b/friend_list/friendlist.js
@@ -0,0 +1,133 @@
+function loadHeader() {
+  fetch("../../../header.html")
+    .then(res => res.text())
+    .then(html => {
+      const headerContainer = document.getElementById("header-container");
+      if (headerContainer) {
+        headerContainer.innerHTML = html;
+
+        const stageButton = headerContainer.querySelector('.menu-item.stage');
+        if (stageButton) {
+          stageButton.classList.add('active');
+        }
+      }
+    })
+    .catch(err => console.error("Failed to load header:", err));
+}
+
+function animateLoadingCanvas() {
+  const canvas = document.getElementById("loading-canvas");
+  const loadingOverlay = document.getElementById("loading-overlay");
+  if (!canvas || !loadingOverlay) return;
+  const ctx = canvas.getContext("2d");
+  const image = new Image();
+  image.src = "/assets/en/loading/@2x-se6335ab797-cb27d69f23a4d1112bc2a0d272538f39dd3017be20e5f2e3f4a460bd0071b68d.png";
+  const frameWidth = 100;
+  const frameHeight = 100;
+  const totalFrames = 17;
+  let currentFrame = 0;
+  let lastUpdateTime = 0;
+  let animationId;
+  image.onload = () => {
+    function animate(timestamp = 0) {
+      if (loadingOverlay.style.display === "none") {
+        cancelAnimationFrame(animationId);
+        return;
+      }
+      if (!lastUpdateTime) lastUpdateTime = timestamp;
+      const elapsed = timestamp - lastUpdateTime;
+      if (elapsed > 50) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(
+          image,
+          0,
+          currentFrame * frameHeight,
+          frameWidth,
+          frameHeight,
+          0,
+          0,
+          frameWidth,
+          frameHeight
+        );
+        currentFrame = (currentFrame + 1) % totalFrames;
+        lastUpdateTime = timestamp;
+      }
+      animationId = requestAnimationFrame(animate);
+    }
+    animationId = requestAnimationFrame(animate);
+  };
+}
+
+//pain in the ass to implement. im proud of ts
+const canvas = document.getElementById("squid-canvas");
+const ctx = canvas.getContext("2d");
+const frameWidth = 64;
+const frameHeight = 64;
+const totalFrames = 8;
+const squidCount = 5;
+const squids = [];
+const canvasWidth = canvas.width;
+const canvasHeight = canvas.height;
+const titleYThreshold = 0;
+
+function createSquid() {
+  return {
+    x: Math.random() * canvasWidth,
+    y: canvasHeight + Math.random() * 300,
+    currentFrame: Math.floor(Math.random() * totalFrames),
+    speed: 0.05 + Math.random() * 0.15,
+    lastFrameUpdate: 0
+  };
+}
+
+for (let i = 0; i < squidCount; i++) {
+  squids.push(createSquid());
+}
+
+let lastTimestamp = 0;
+
+const image = new Image();
+image.src = "/assets/ika-8e075a29ff487983044303f98958fb8c852bc3e9ab07ee7597724b6c0aa4a5d7.png";
+
+image.onload = () => {
+  function animate(timestamp = 0) {
+    if (!lastTimestamp) lastTimestamp = timestamp;
+    const delta = timestamp - lastTimestamp;
+
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+
+    for (const squid of squids) {
+      squid.y -= squid.speed * delta;
+
+      if (squid.y + frameHeight < titleYThreshold) {
+        squid.x = Math.random() * canvasWidth;
+        squid.y = canvasHeight + Math.random() * 300;
+        squid.currentFrame = Math.floor(Math.random() * totalFrames);
+        squid.speed = 0.05 + Math.random() * 0.15;
+      }
+
+      if (timestamp - squid.lastFrameUpdate > 100) {
+        squid.currentFrame = (squid.currentFrame + 1) % totalFrames;
+        squid.lastFrameUpdate = timestamp;
+      }
+
+      ctx.drawImage(
+        image,
+        squid.currentFrame * frameWidth,
+        0,
+        frameWidth,
+        frameHeight,
+        squid.x,
+        squid.y,
+        frameWidth,
+        frameHeight
+      );
+    }
+
+    lastTimestamp = timestamp;
+    requestAnimationFrame(animate);
+  }
+  requestAnimationFrame(animate);
+};
+
+animateLoadingCanvas();
\ No newline at end of file
diff --git a/friend_list/index.html b/friend_list/index.html
new file mode 100644
index 0000000..b1a4ca3
--- /dev/null
+++ b/friend_list/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>SplatNet - Splatoon's multiplayer service hub</title>
+  <link rel="icon" href="../favicon.ico" type="image/x-icon" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <div id="header-container"></div>
+  
+  <div id="squid-container">
+    <canvas id="squid-canvas" width="1920" height="1080"></canvas>
+  </div>
+
+  <div id="loading-overlay" class="loading-overlay">
+    <canvas id="loading-canvas" width="100" height="100"></canvas>
+    <div id="loading-text">Loading</div>
+  </div>
+
+
+  
+  <script>
+    //TODO: migrate into accompanying JS, just put it in here for now to allow for copy paste,
+    //however ie screams abt you doing this afaik
+    fetch("../header.html")
+  .then(res => res.text())
+  .then(html => {
+    const headerContainer = document.getElementById("header-container");
+    headerContainer.innerHTML = html;
+
+    const friendButton = headerContainer.querySelector('.menu-item.friend');
+    if (friendButton) {
+      friendButton.classList.add('active');
+    }
+    
+    // temporaily force hide lol
+    document.getElementById("loading-overlay").style.display = "none";
+  });
+  </script>
+
+  <script src="friendlist.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/friend_list/styles.css b/friend_list/styles.css
new file mode 100644
index 0000000..56fea98
--- /dev/null
+++ b/friend_list/styles.css
@@ -0,0 +1,106 @@
+@font-face {
+    font-family: "Splatoon1";
+    src: url("../splatoon1.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Regular";
+    src: url("../regular.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+html {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: flex-start;
+    min-height: 100vh;
+    background-image: url("/assets/en/bg/@2x/bg_friendlist-d20dccde83e0d769455ff580421b84805be7ff1c6494e812200a51d067b10be0.png"); 
+    background-repeat: repeat;
+    background-size: 800px 800px;
+    background-attachment: fixed;
+}
+
+.menu-item .hover-state {
+    display: none;
+}
+
+.menu-item:hover .hover-state,
+.menu-item.active .hover-state {
+    display: block;
+}
+
+.menu-item:hover .default,
+.menu-item.active .default {
+    display: none;
+}
+
+.loading-overlay {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 200px;
+    height: 250px;
+    background-color: rgba(0,0,0,0.8);
+    border: 3px solid white;
+    border-radius: 12px;
+    padding: 20px 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    user-select: none;
+    pointer-events: none;
+    box-sizing: border-box;
+}
+
+#loading-canvas {
+    image-rendering: pixelated;
+    width: 100px;
+    height: 100px;
+    display: block;
+    margin: 0 auto;
+}
+
+#loading-text {
+    margin-top: 12px;
+    color: white;
+    font-family: "Splatoon1", sans-serif;
+    font-size: 20px;
+    letter-spacing: 1.2px;
+    text-align: center;
+}
+
+#squid-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    overflow: visible;
+    pointer-events: none;
+    z-index: 0;
+}
+
+#squid-canvas {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+    width: 1920px;
+    height: 1080px;
+    will-change: transform;
+    pointer-events: none;
+    user-select: none;
+    z-index: 0;
+    display: block;
+}
\ No newline at end of file
diff --git a/header.html b/header.html
index b6aecb4..6806643 100644
--- a/header.html
+++ b/header.html
@@ -11,49 +11,49 @@
     <img src="../assets/en/ui/SplatNetLogo.png" alt="SplatNet">
   </div>
 
-  <div class="menu-item friend">
-    <img class="bg default" src="../assets/en/ui/default.png">
-    <img class="bg hover-state" src="../assets/en/ui/friendlist-selected.png">
-    
-    <img class="icon default" src="../assets/en/svg/ui/ico_friendlist-320cb666486606280b494d4d4427451b2de2c9ad01f3332c286433c6f536db0a.svg">
-    <img class="icon hover-state" src="../assets/en/svg/ui/ico_friendlist_wht-032a1f27d7f1529f75f86f8976877a12ce0ec18496e84fcb249a510129aa337c.svg">
-    
-    <img class="label default" src="../assets/en/svg/text/menu/tx_friendlist-c96280213f50b1bc3c6380aa2bf191f6aaf4fd2da44a111bcbb1495444f23868.svg">
-    <img class="label hover-state" src="../assets/en/svg/text/menu/tx_friendlist_wht-b805b3146503cef16e75964333f58c2934bc3b6b6e1cd6e21172c85706a4deda.svg">
-  </div>
+  <a href="/friend_list/" class="menu-link">
+    <div class="menu-item friend">
+      <img class="bg default" src="../assets/en/ui/default.png">
+      <img class="bg hover-state" src="../assets/en/ui/friendlist-selected.png">
+      <img class="icon default" src="../assets/en/svg/ui/ico_friendlist-320cb666486606280b494d4d4427451b2de2c9ad01f3332c286433c6f536db0a.svg">
+      <img class="icon hover-state" src="../assets/en/svg/ui/ico_friendlist_wht-032a1f27d7f1529f75f86f8976877a12ce0ec18496e84fcb249a510129aa337c.svg">
+      <img class="label default" src="../assets/en/svg/text/menu/tx_friendlist-c96280213f50b1bc3c6380aa2bf191f6aaf4fd2da44a111bcbb1495444f23868.svg">
+      <img class="label hover-state" src="../assets/en/svg/text/menu/tx_friendlist_wht-b805b3146503cef16e75964333f58c2934bc3b6b6e1cd6e21172c85706a4deda.svg">
+    </div>
+  </a>
 
-  <div class="menu-item rank">
-    <img class="bg default" src="../assets/en/ui/default.png">
-    <img class="bg hover-state" src="../assets/en/ui/rank-selected.png">
-    
-    <img class="icon default" src="../assets/en/svg/ui/ico_ranking-c89e570ab4d08a764d285e453423188b1976895b3feacf031e3f231b1506b441.svg">
-    <img class="icon hover-state" src="../assets/en/svg/ui/ico_ranking_wht-526d8e4da303f0c9e77ee41ea8422d265f41280e2ffc6ffa763b35d96f8e51f1.svg">
-    
-    <img class="label default" src="../assets/en/svg/text/menu/tx_ranking-8d97ac01b5b5c5b9244c8a4960bce79d33349175d141b06da0d835c71c8298e2.svg">
-    <img class="label hover-state" src="../assets/en/svg/text/menu/tx_ranking_wht-6b4dcbc2bb6f0d50c8e6180ec1da935b54c3b0cc761dd7700b26c7bd1b5ac9d4.svg">
-  </div>
+  <a href="/rank/" class="menu-link">
+    <div class="menu-item rank">
+      <img class="bg default" src="../assets/en/ui/default.png">
+      <img class="bg hover-state" src="../assets/en/ui/rank-selected.png">
+      <img class="icon default" src="../assets/en/svg/ui/ico_ranking-c89e570ab4d08a764d285e453423188b1976895b3feacf031e3f231b1506b441.svg">
+      <img class="icon hover-state" src="../assets/en/svg/ui/ico_ranking_wht-526d8e4da303f0c9e77ee41ea8422d265f41280e2ffc6ffa763b35d96f8e51f1.svg">
+      <img class="label default" src="../assets/en/svg/text/menu/tx_ranking-8d97ac01b5b5c5b9244c8a4960bce79d33349175d141b06da0d835c71c8298e2.svg">
+      <img class="label hover-state" src="../assets/en/svg/text/menu/tx_ranking_wht-6b4dcbc2bb6f0d50c8e6180ec1da935b54c3b0cc761dd7700b26c7bd1b5ac9d4.svg">
+    </div>
+  </a>
 
-  <div class="menu-item equipment">
-    <img class="bg default" src="../assets/en/ui/default.png">
-    <img class="bg hover-state" src="../assets/en/ui/equipment-selected.png">
-    
-    <img class="icon default" src="../assets/en/svg/ui/ico_equipment-40943361040a3d62c745a21d1a1fa95794c851f378e11334f2dc6c1cc81b4984.svg">
-    <img class="icon hover-state" src="../assets/en/svg/ui/ico_equipment_wht-a9d551da5fa6a6792cb2bf8aca2938a107a983a13aef9f4fd020493e6412435e.svg">
-    
-    <img class="label default" src="../assets/en/svg/text/menu/tx_equipment-8d59c4296bdafb1746824229dc9300ef6b140d4bda0bb0284a662903f20afe45.svg">
-    <img class="label hover-state" src="../assets/en/svg/text/menu/tx_equipment_wht-940f9bdfe17d321ac6bc737021f1b837ccace05cf0a14e24315e2a39d3d52a3e.svg">
-  </div>
+  <a href="/equipment/" class="menu-link">
+    <div class="menu-item equipment">
+      <img class="bg default" src="../assets/en/ui/default.png">
+      <img class="bg hover-state" src="../assets/en/ui/equipment-selected.png">
+      <img class="icon default" src="../assets/en/svg/ui/ico_equipment-40943361040a3d62c745a21d1a1fa95794c851f378e11334f2dc6c1cc81b4984.svg">
+      <img class="icon hover-state" src="../assets/en/svg/ui/ico_equipment_wht-a9d551da5fa6a6792cb2bf8aca2938a107a983a13aef9f4fd020493e6412435e.svg">
+      <img class="label default" src="../assets/en/svg/text/menu/tx_equipment-8d59c4296bdafb1746824229dc9300ef6b140d4bda0bb0284a662903f20afe45.svg">
+      <img class="label hover-state" src="../assets/en/svg/text/menu/tx_equipment_wht-940f9bdfe17d321ac6bc737021f1b837ccace05cf0a14e24315e2a39d3d52a3e.svg">
+    </div>
+  </a>
 
-  <div class="menu-item stage">
-    <img class="bg default" src="../assets/en/ui/default.png">
-    <img class="bg hover-state" src="../assets/en/ui/stage-selected.png">
-    
-    <img class="icon default" src="../assets/en/svg/ui/ico_stage-8dbc9e30d2dd9f99f4d1678fe53c4aaada7f7ff43929880a0c9f4e49f148f540.svg">
-    <img class="icon hover-state" src="../assets/en/svg/ui/ico_stage_wht-0093ccdcb4a0985c929e77571e4baf690f39def2f97b84a4cb4109e4a4ae10b4.svg">
-    
-    <img class="label default" src="../assets/en/svg/text/menu/tx_stageinfo-5e7f00d4a18387e2ee3065e97a475e23002554c3facc1dc6816cdb157c5985c4.svg">
-    <img class="label hover-state" src="../assets/en/svg/text/menu/tx_stageinfo_wht-5fa41cd0a2c7e72f93cb7ec6821d01af7f5d05e91b9dc16b002197e69fdf9440.svg">
-  </div>
+  <a href="/stages/" class="menu-link">
+    <div class="menu-item stage">
+      <img class="bg default" src="../assets/en/ui/default.png">
+      <img class="bg hover-state" src="../assets/en/ui/stage-selected.png">
+      <img class="icon default" src="../assets/en/svg/ui/ico_stage-8dbc9e30d2dd9f99f4d1678fe53c4aaada7f7ff43929880a0c9f4e49f148f540.svg">
+      <img class="icon hover-state" src="../assets/en/svg/ui/ico_stage_wht-0093ccdcb4a0985c929e77571e4baf690f39def2f97b84a4cb4109e4a4ae10b4.svg">
+      <img class="label default" src="../assets/en/svg/text/menu/tx_stageinfo-5e7f00d4a18387e2ee3065e97a475e23002554c3facc1dc6816cdb157c5985c4.svg">
+      <img class="label hover-state" src="../assets/en/svg/text/menu/tx_stageinfo_wht-5fa41cd0a2c7e72f93cb7ec6821d01af7f5d05e91b9dc16b002197e69fdf9440.svg">
+    </div>
+  </a>
 
   <div class="twitterbgbox">
     <div class="button-container">
diff --git a/rank/index.html b/rank/index.html
new file mode 100644
index 0000000..ab3b7a1
--- /dev/null
+++ b/rank/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>SplatNet - Splatoon's multiplayer service hub</title>
+  <link rel="icon" href="../favicon.ico" type="image/x-icon" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <div id="header-container"></div>
+  
+  <div id="squid-container">
+    <canvas id="squid-canvas" width="1920" height="1080"></canvas>
+  </div>
+
+  <div id="loading-overlay" class="loading-overlay">
+    <canvas id="loading-canvas" width="100" height="100"></canvas>
+    <div id="loading-text">Loading</div>
+  </div>
+
+
+  
+  <script>
+    //TODO: migrate into accompanying JS, just put it in here for now to allow for copy paste,
+    //however ie screams abt you doing this afaik
+    fetch("../header.html")
+  .then(res => res.text())
+  .then(html => {
+    const headerContainer = document.getElementById("header-container");
+    headerContainer.innerHTML = html;
+
+    const friendButton = headerContainer.querySelector('.menu-item.rank');
+    if (friendButton) {
+      friendButton.classList.add('active');
+    }
+    
+    // temporaily force hide lol
+    document.getElementById("loading-overlay").style.display = "none";
+  });
+  </script>
+
+  <script src="rank.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/rank/rank.js b/rank/rank.js
new file mode 100644
index 0000000..86d5a27
--- /dev/null
+++ b/rank/rank.js
@@ -0,0 +1,133 @@
+function loadHeader() {
+  fetch("../../../header.html")
+    .then(res => res.text())
+    .then(html => {
+      const headerContainer = document.getElementById("header-container");
+      if (headerContainer) {
+        headerContainer.innerHTML = html;
+
+        const stageButton = headerContainer.querySelector('.menu-item.stage');
+        if (stageButton) {
+          stageButton.classList.add('active');
+        }
+      }
+    })
+    .catch(err => console.error("Failed to load header:", err));
+}
+
+function animateLoadingCanvas() {
+  const canvas = document.getElementById("loading-canvas");
+  const loadingOverlay = document.getElementById("loading-overlay");
+  if (!canvas || !loadingOverlay) return;
+  const ctx = canvas.getContext("2d");
+  const image = new Image();
+  image.src = "/assets/en/loading/@2x-se6335ab797-cb27d69f23a4d1112bc2a0d272538f39dd3017be20e5f2e3f4a460bd0071b68d.png";
+  const frameWidth = 100;
+  const frameHeight = 100;
+  const totalFrames = 17;
+  let currentFrame = 0;
+  let lastUpdateTime = 0;
+  let animationId;
+  image.onload = () => {
+    function animate(timestamp = 0) {
+      if (loadingOverlay.style.display === "none") {
+        cancelAnimationFrame(animationId);
+        return;
+      }
+      if (!lastUpdateTime) lastUpdateTime = timestamp;
+      const elapsed = timestamp - lastUpdateTime;
+      if (elapsed > 50) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(
+          image,
+          0,
+          currentFrame * frameHeight,
+          frameWidth,
+          frameHeight,
+          0,
+          0,
+          frameWidth,
+          frameHeight
+        );
+        currentFrame = (currentFrame + 1) % totalFrames;
+        lastUpdateTime = timestamp;
+      }
+      animationId = requestAnimationFrame(animate);
+    }
+    animationId = requestAnimationFrame(animate);
+  };
+}
+
+//pain in the ass to implement. im proud of ts
+const canvas = document.getElementById("squid-canvas");
+const ctx = canvas.getContext("2d");
+const frameWidth = 64;
+const frameHeight = 64;
+const totalFrames = 8;
+const squidCount = 5;
+const squids = [];
+const canvasWidth = canvas.width;
+const canvasHeight = canvas.height;
+const titleYThreshold = 0;
+
+function createSquid() {
+  return {
+    x: Math.random() * canvasWidth,
+    y: canvasHeight + Math.random() * 300,
+    currentFrame: Math.floor(Math.random() * totalFrames),
+    speed: 0.05 + Math.random() * 0.15,
+    lastFrameUpdate: 0
+  };
+}
+
+for (let i = 0; i < squidCount; i++) {
+  squids.push(createSquid());
+}
+
+let lastTimestamp = 0;
+
+const image = new Image();
+image.src = "/assets/ika-8e075a29ff487983044303f98958fb8c852bc3e9ab07ee7597724b6c0aa4a5d7.png";
+
+image.onload = () => {
+  function animate(timestamp = 0) {
+    if (!lastTimestamp) lastTimestamp = timestamp;
+    const delta = timestamp - lastTimestamp;
+
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+
+    for (const squid of squids) {
+      squid.y -= squid.speed * delta;
+
+      if (squid.y + frameHeight < titleYThreshold) {
+        squid.x = Math.random() * canvasWidth;
+        squid.y = canvasHeight + Math.random() * 300;
+        squid.currentFrame = Math.floor(Math.random() * totalFrames);
+        squid.speed = 0.05 + Math.random() * 0.15;
+      }
+
+      if (timestamp - squid.lastFrameUpdate > 100) {
+        squid.currentFrame = (squid.currentFrame + 1) % totalFrames;
+        squid.lastFrameUpdate = timestamp;
+      }
+
+      ctx.drawImage(
+        image,
+        squid.currentFrame * frameWidth,
+        0,
+        frameWidth,
+        frameHeight,
+        squid.x,
+        squid.y,
+        frameWidth,
+        frameHeight
+      );
+    }
+
+    lastTimestamp = timestamp;
+    requestAnimationFrame(animate);
+  }
+  requestAnimationFrame(animate);
+};
+
+animateLoadingCanvas();
\ No newline at end of file
diff --git a/rank/styles.css b/rank/styles.css
new file mode 100644
index 0000000..3ec224b
--- /dev/null
+++ b/rank/styles.css
@@ -0,0 +1,106 @@
+@font-face {
+    font-family: "Splatoon1";
+    src: url("../splatoon1.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Regular";
+    src: url("../regular.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+html {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: flex-start;
+    min-height: 100vh;
+    background-image: url("/assets/en/bg/@2x/bg_ranking-a7432ce7bf194d220345649d7369a52fb977878c79c539ed40e2065ec5d8cb85.png"); 
+    background-repeat: repeat;
+    background-size: 800px 800px;
+    background-attachment: fixed;
+}
+
+.menu-item .hover-state {
+    display: none;
+}
+
+.menu-item:hover .hover-state,
+.menu-item.active .hover-state {
+    display: block;
+}
+
+.menu-item:hover .default,
+.menu-item.active .default {
+    display: none;
+}
+
+.loading-overlay {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 200px;
+    height: 250px;
+    background-color: rgba(0,0,0,0.8);
+    border: 3px solid white;
+    border-radius: 12px;
+    padding: 20px 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    user-select: none;
+    pointer-events: none;
+    box-sizing: border-box;
+}
+
+#loading-canvas {
+    image-rendering: pixelated;
+    width: 100px;
+    height: 100px;
+    display: block;
+    margin: 0 auto;
+}
+
+#loading-text {
+    margin-top: 12px;
+    color: white;
+    font-family: "Splatoon1", sans-serif;
+    font-size: 20px;
+    letter-spacing: 1.2px;
+    text-align: center;
+}
+
+#squid-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    overflow: visible;
+    pointer-events: none;
+    z-index: 0;
+}
+
+#squid-canvas {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+    width: 1920px;
+    height: 1080px;
+    will-change: transform;
+    pointer-events: none;
+    user-select: none;
+    z-index: 0;
+    display: block;
+}
\ No newline at end of file
diff --git a/stages/stages.js b/stages/stages.js
index 1583bb3..41e5adf 100644
--- a/stages/stages.js
+++ b/stages/stages.js
@@ -135,7 +135,7 @@ for (let i = 0; i < squidCount; i++) {
 let lastTimestamp = 0;
 
 const image = new Image();
-image.src = "/assets/squids.png";
+image.src = "/assets/ika-8e075a29ff487983044303f98958fb8c852bc3e9ab07ee7597724b6c0aa4a5d7.png";
 
 image.onload = () => {
   function animate(timestamp = 0) {
diff --git a/stages/styles.css b/stages/styles.css
index 6d25f92..87a31aa 100644
--- a/stages/styles.css
+++ b/stages/styles.css
@@ -22,7 +22,7 @@ body {
     display: flex;
     align-items: flex-start;
     min-height: 100vh;
-    background-image: url("/assets/en/bg/bg_stage-e8559cd1808f36e1ead7594ce89cada8d8fb4267892f4771368e384612cf3df8.png"); 
+    background-image: url("/assets/en/bg/@2x/bg_stage-e8fe89423bce5899a3edea3884841d9eed10a3099b29482277d0dbd4a25d8b9e.png"); 
     background-repeat: repeat;
     background-size: 800px 800px;
     background-attachment: fixed;
diff --git a/style.css b/style.css
index 9b8b94e..d23eea9 100644
--- a/style.css
+++ b/style.css
@@ -213,4 +213,10 @@
 
 .menu-item.active .default {
     display: none !important;
+}
+
+.menu-link {
+  text-decoration: none;
+  display: block;
+  color: inherit;
 }
\ No newline at end of file