diff --git a/index.html b/index.html
index eee59ab9c..d04e6259a 100644
--- a/index.html
+++ b/index.html
@@ -18,27 +18,27 @@
     <a class="btn" href="white-paper">About us</a>
     <a class="btn" href="buy">Buy</a>
     <a class="btn" href="personalize">Personalize</a>
-    <a class="btn" target="x" href="https://x.com/susquares">
+    <a class="btn" target="_blank" href="https://x.com/susquares">
+      <!-- Corrected target attribute -->
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
         <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"/>
       </svg>
     </a>
-    <a class="btn" target="x" href="https://discord.gg/6nTGNdjQ3B">
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord"
-        viewBox="0 0 16 16">
-        <path
-          d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z" />
+    <a class="btn" target="_blank" href="https://discord.gg/6nTGNdjQ3B">
+      <!-- Corrected target attribute -->
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
+        <path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z" />
       </svg>
     </a>
   </header>
 
   <article>
     <p>Click below to buy an available Su Square (0.5 ETH)</p>
-    <a id="wheretogo" href="" target="_blank">
+    <a id="wheretogo" href="#" target="_blank">
       <div style="position:relative;height:1000px">
         <img id="theImage" src="build/wholeSquare.png" alt="All Su Squares" style="margin:0; height:1000px; width:1000px">
         <div id="position"
-          style="background:pink;opacity:0.8;width:10px;height:10px;top:0;left:0;position:absolute;pointer-events:none">
+          style="background:pink;opacity:0.8;width:10px;height:10px;;position:absolute;pointer-events:none">
         </div>
         <div id="tooltip" style="color:black"></div>
         <div id="electric-fence"></div>
@@ -64,20 +64,21 @@
     </small>
   </footer>
   <script>
-    var squarePersonalizations = []; // Index 0 is for Square 1
-    var squareExtra = []; // Index 0 is for Square 1
-
+    let positionSquareNumber = 1;
+    var squarePersonalizations = [];
+    var squareExtra = [];
+  
     const squarePersonalizationsPromise = fetch("build/squarePersonalizations.json").then(response => response.json());
     const squareExtraPromise = fetch("build/squareExtra.json").then(response => response.json());
-
+  
     Promise.all([squarePersonalizationsPromise, squareExtraPromise])
       .then(([personalizations, extra]) => {
         squarePersonalizations = personalizations;
         squareExtra = extra;
-
+  
         // Start fence animation
         lightUpFence(new Set([1]));
-
+  
         // Show newly minted and personalized Squares
         const newlyMintedSection = document.getElementById("newly-minted");
         const newlyPersonalizedSection = document.getElementById("newly-personalized");
@@ -101,7 +102,7 @@
         const mostRecentPersonalizedSquares = squareExtra
           .map((extraData, index) => [index, extraData])
           .filter(([index, extraData]) => extraData !== null)
-          .filter(([index, extraData]) => extraData[1] !== extraData[0]) // minted but not personalized
+          .filter(([index, extraData]) => extraData[1] !== extraData[0])
           .sort((a, b) => b[1][1] - a[1][1])
           .slice(0, 5);
         mostRecentPersonalizedSquares.forEach(([index, extraData]) => {
@@ -116,55 +117,79 @@
           );
         });
       });
-
-    // Hover over Squares
-    theImage.addEventListener("mousemove", (e) => {
-      const theImage = document.getElementById("theImage");
+  
+    function setPosition(squareNumber) {
+      positionSquareNumber = squareNumber;
       const positionDiv = document.getElementById("position");
       const tooltipDiv = document.getElementById("tooltip");
       const whereToGoAnchor = document.getElementById("wheretogo");
-      const x = Math.min(Math.max(Math.floor((e.clientX - theImage.x / 2) / 10), 0), 99);
-      const y = Math.min(Math.max(Math.floor((e.clientY - theImage.y / 2) / 10), 0), 99);
-      const squareNumber = x + y * 100 + 1;
-      positionDiv.style.left = x * 10 + "px";
-      positionDiv.style.top = y * 10 + "px";
-      let title = "Square #" + (squareNumber) + "\n";
-      if (squarePersonalizations[squareNumber - 1] == null) {
-        theImage.style.cursor = "pointer";
-        title = title + " is available for sale, click to buy.";
-        whereToGoAnchor.href = "buy?square=" + (squareNumber);
+  
+      if (!squarePersonalizations[squareNumber - 1]) {
+        document.getElementById("theImage").style.cursor = "pointer";
+        tooltipDiv.textContent = "Square #" + squareNumber + " is available for sale, click to buy.";
+        whereToGoAnchor.href = "buy?square=" + squareNumber;
       } else if (!squarePersonalizations[squareNumber - 1][1] && !squarePersonalizations[squareNumber - 1][2]) {
-        theImage.style.cursor = "not-allowed";
-        title = title + " WAS PURCHASED BUT NOT YET PERSONALIZED";
+        document.getElementById("theImage").style.cursor = "not-allowed";
+        tooltipDiv.textContent = "Square #" + squareNumber + " WAS PURCHASED BUT NOT YET PERSONALIZED";
         whereToGoAnchor.removeAttribute("href");
       } else {
-        theImage.style.cursor = "pointer";
-        title = title + squarePersonalizations[squareNumber - 1][1];
+        document.getElementById("theImage").style.cursor = "pointer";
+        tooltipDiv.textContent = "Square #" + squareNumber + " " + squarePersonalizations[squareNumber - 1][1];
         whereToGoAnchor.href = squarePersonalizations[squareNumber - 1][2];
       }
-      tooltipDiv.textContent = title;
-      tooltipDiv.style.left = x * 10 + "px";
-      tooltipDiv.style.top = y * 10 + 30 + "px";
+  
+      positionDiv.style.left = ((squareNumber - 1) % 100) * 10 + "px";
+      positionDiv.style.top = Math.floor((squareNumber - 1) / 100) * 10 + "px";
+      tooltipDiv.style.left = positionDiv.style.left;
+      tooltipDiv.style.top = (parseInt(positionDiv.style.top) + 30) + "px";
       tooltipDiv.style.display = "block";
+    }
+  
+    document.getElementById("theImage").addEventListener("mousemove", (e) => {
+      const theImage = document.getElementById("theImage");
+      const rect = theImage.getBoundingClientRect(); // Get the bounding rectangle of the image
+      const x = Math.min(Math.max(Math.floor((e.clientX - rect.left) / 10), 0), 99); // Adjust by element's left position
+      const y = Math.min(Math.max(Math.floor((e.clientY - rect.top) / 10), 0), 99); // Adjust by element's top position
+      const squareNumber = x + y * 100 + 1;
+      setPosition(squareNumber);
     });
-
-    // Animate the electric fence
-    let fence = new Set();
-    let litUpEdge = new Set();
-    let wasEverLitUp = new Set();
-
+  
+    document.addEventListener("keydown", (e) => {
+      const key = e.key.toLowerCase();
+      if (key === 'w' || key === ',' || key === 'arrowup') {
+        // Move up
+        if (positionSquareNumber > 100) setPosition(positionSquareNumber - 100);
+        event.preventDefault(); // Prevent scrolling
+      } else if (key === 'a' || key === 'a' || key === 'arrowleft') {
+        // Move left
+        if (positionSquareNumber % 100 !== 1) setPosition(positionSquareNumber - 1);
+      } else if (key === 's' || key === 'o' || key === 'arrowdown') {
+        // Move down
+        if (positionSquareNumber <= 100 * 99) setPosition(positionSquareNumber + 100);
+        event.preventDefault(); // Prevent scrolling
+      } else if (key === 'd' || key === 'e' || key === 'arrowright') {
+        // Move right
+        if (positionSquareNumber % 100 !== 0) setPosition(positionSquareNumber + 1);
+      } else if (key === 'enter') {
+        // Trigger click for highlighted square
+        const whereToGoAnchor = document.getElementById("wheretogo");
+        if (whereToGoAnchor.href) {
+          whereToGoAnchor.click();
+        }
+      }
+    });
+  
     function lightUpFence(edge) {
-      // Unlight old
       litUpEdge.forEach(s => {
         const element = document.getElementById("electric-fence-" + s);
-        element.parentNode.removeChild(element);
+        if (element && element.parentNode) {
+          element.parentNode.removeChild(element);
+        }
       });
       litUpEdge.clear();
-      // Light up new
       let nextEdge = new Set();
       edge.forEach((square) => {
         wasEverLitUp.add(square);
-        // create element
         const element = document.createElement("div");
         element.id = "electric-fence-" + square;
         element.style.pointerEvents = "none";
@@ -176,10 +201,8 @@
         element.style.background = "#ffd700";
         element.style.opacity = "0.25";
         document.getElementById("electric-fence").appendChild(element);
-        // if minted then step it, if not then add to fence
         if (squarePersonalizations[square - 1] !== null) {
           litUpEdge.add(square);
-          // Span to next edge
           if (square > 100 && !wasEverLitUp.has(square - 100)) {
             nextEdge.add(square - 100);
           }
@@ -201,6 +224,6 @@
       }
     }
   </script>
-</body>
+  </body>
 
 </html>
diff --git a/square.html b/square.html
index 80a57e7fb..de5b6e62c 100644
--- a/square.html
+++ b/square.html
@@ -18,12 +18,12 @@
     <a class="btn" href="white-paper">About us</a>
     <a class="btn" href="buy">Buy</a>
     <a class="btn" href="https://tools.tenthousandsu.com/personalize">Personalize</a>
-    <a class="btn" target="x" href="https://x.com/susquares">
+    <a class="btn" target="_blank" href="https://x.com/susquares">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
         <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"/>
       </svg>
     </a>
-    <a class="btn" target="x" href="https://discord.gg/6nTGNdjQ3B">
+    <a class="btn" target="_blank" href="https://discord.gg/6nTGNdjQ3B">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord"
         viewBox="0 0 16 16">
         <path