diff --git a/index.js b/index.js
index 58c97dc..ce63933 100644
--- a/index.js
+++ b/index.js
@@ -6,13 +6,13 @@
 */
 
 const ld = require("node-ld");
-const fs = require("fs");
-const path = require("path");
+const fs = require("node:fs");
+const path = require("node:path");
 
 //Setup Webserver
 const express = require("express");
 const app = express();
-const http = require("http");
+const http = require("node:http");
 const server = http.createServer(app);
 const { Server } = require("socket.io");
 const io = new Server(server);
@@ -41,7 +41,7 @@ let isConnectedToGame = false;
 function createVehicle(id, uid, upgrades = [0, 0]) {
   const token = Buffer.alloc(180);
   token.uid = uid;
-  //console.log(upgrades);
+  
   token.writeUInt32LE(upgrades[0], 0x8c); //0x23 * 4
   token.writeUInt16LE(id, 0x90); //0x24 * 4
   token.writeUInt32LE(upgrades[1], 0x94); //0x25 * 4
@@ -63,9 +63,7 @@ function getTokenNameFromID(id) {
   const data = fs.readFileSync(tokenmapPath, "utf8");
   const dataset = JSON.parse(data);
 
-  for (let i = 0; i < dataset.length; i++) {
-    const entry = dataset[i];
-
+  for (let entry of dataset) {
     if (entry.id == id) {
       return entry.name;
     }
@@ -78,9 +76,7 @@ function getCharacterNameFromID(id) {
   const data = fs.readFileSync(charactersMapPath, "utf8");
   const dataset = JSON.parse(data);
 
-  for (let i = 0; i < dataset.length; i++) {
-    const entry = dataset[i];
-
+  for (let entry of dataset) {
     if (entry.id == id) {
       return entry.name;
     }
@@ -101,9 +97,7 @@ function getJSONFromUID(uid) {
   const data = fs.readFileSync(toytagsPath, "utf8");
   const dataset = JSON.parse(data);
 
-  for (let i = 0; i < dataset.length; i++) {
-    const entry = dataset[i];
-
+  for (let entry of dataset) {
     if (entry.uid == uid) {
       return entry;
     }
@@ -117,9 +111,7 @@ function updatePadIndex(uid, index) {
   const data = fs.readFileSync(toytagsPath, "utf8");
   const dataset = JSON.parse(data);
 
-  for (let i = 0; i < dataset.length; i++) {
-    const entry = dataset[i];
-
+  for (let entry of dataset) {
     if (entry.uid == uid) {
       entry.index = index;
       break;
@@ -134,9 +126,7 @@ function updatePadIndex(uid, index) {
 function getUIDFromIndex(index) {
   const data = fs.readFileSync(toytagsPath, "utf8");
   const dataset = JSON.parse(data);
-  for (let i = 0; i < dataset.length; i++) {
-    const entry = dataset[i];
-
+  for (let entry of dataset) {
     if (entry.index == index) {
       return entry.uid;
     }
@@ -150,9 +140,7 @@ function writeJSONData(uid, datatype, value) {
   const tags = fs.readFileSync(toytagsPath, "utf8");
   const dataset = JSON.parse(tags);
 
-  for (let i = 0; i < dataset.length; i++) {
-    const entry = dataset[i];
-
+  for (let entry of dataset) {
     if (entry.uid == uid) {
       entry[datatype] = value;
       break;
@@ -168,9 +156,7 @@ function writeJSONBundle(uid, bundle) {
   const tags = fs.readFileSync(toytagsPath, "utf8");
   const dataset = JSON.parse(tags);
 
-  for (let i = 0; i < dataset.length; i++) {
-    const entry = dataset[i];
-
+  for (let entry of dataset) {
     if (entry.uid == uid) {
       bundle.forEach((data) => {
         entry[data.key] = data.value;
@@ -192,7 +178,6 @@ function initializeToyTagsJSON() {
   });
   fs.writeFileSync(toytagsPath, JSON.stringify(dataset, null, 4));
   console.log("Initialized toytags.JSON");
-  //io.emit("refreshTokens");
 }
 
 function RGBToHex(r, g, b) {
@@ -228,10 +213,6 @@ function RGBToHex(r, g, b) {
     case "#f00016":
       return "#ff2de6";
 
-    //batman stealth
-    case "#000018":
-      return "#0000ff";
-
     //shift keystone (dark colors for blink animation)
     case "#002007":
       return "#007575";
@@ -268,10 +249,6 @@ function RGBToHex(r, g, b) {
       return "#0000ff";
     case "#006700":
       return "#00ff00";
-    //case "#f00000":
-    //return "#ff0000";
-    case "#000016":
-      return "#00ffff";
 
     //scale keystone
     case "#ff1e00":
@@ -423,10 +400,6 @@ tp.hook(tp.CMD_FADAL, (req, res) => {
     right_pad_cycles,
     right_pad_color,
   ]);
-  // setTimeout(function(){io.emit("Fade All",
-  // 					[top_pad_speed, top_pad_cycles, 'white',
-  // 					 left_pad_speed, left_pad_cycles, 'white',
-  // 					 right_pad_speed, right_pad_cycles, 'white'])}, 2500);
 });
 
 ///NOT IMPLEMENTED///
@@ -545,8 +518,6 @@ app.post("/place", (request, response) => {
   console.log("Placing tag: " + request.body.id);
   const entry = getJSONFromUID(request.body.uid);
 
-  //console.log(entry.type);
-
   if (entry.type == "character") {
     const character = createCharacter(request.body.id, request.body.uid);
     tp.place(
@@ -618,7 +589,6 @@ app.post("/vehicle", (request, response) => {
 //This is called when a token needs to be removed from the pad.
 app.delete("/remove", (request, response) => {
   console.log("Removing item: " + request.body.index);
-  // console.log('DEBUG: pad-from-token: ', tp._tokens.filter(v => v.index == request.body.index)[0].pad);
   tp.remove(request.body.index);
   console.log("Item removed: " + request.body.index);
   updatePadIndex(request.body.uid, "-1");
@@ -633,16 +603,7 @@ io.on("connection", (socket) => {
     console.log("IO Recieved: Deleting entry " + uid + " from JSON");
     const tags = fs.readFileSync(toytagsPath, "utf8");
     const dataset = JSON.parse(tags);
-    let index = -1;
-
-    for (let i = 0; i < dataset.length; i++) {
-      const entry = dataset[i];
-
-      if (entry.uid == uid) {
-        index = i;
-        break;
-      }
-    }
+    const index = dataset.findIndex((entry) => entry.uid == uid);
 
     console.log("Entry to delete: ", index);
     if (index === -1) {
@@ -663,7 +624,7 @@ io.on("connection", (socket) => {
   });
 
   socket.on("connectionStatus", () => {
-    if (isConnectedToGame == true) {
+    if (isConnectedToGame) {
       io.emit("Connection True");
     }
   });
@@ -674,7 +635,6 @@ io.on("connection", (socket) => {
     for (let i = 1; i <= 7; i++) {
       const uid = getUIDAtPad(i);
       if (uid != -1) {
-        //console.log(uid, "is at pad #", i);
         writeJSONData(uid, "index", i);
       }
     }
diff --git a/server/index.html b/server/index.html
index 838e87f..0fe400e 100755
--- a/server/index.html
+++ b/server/index.html
@@ -8,7 +8,7 @@
 
 -->
 
-<html>
+<html lang="en">
   <head>
     <meta name="viewport" content="width=device-width" />
     <title>Toy Pad Emulator for Lego Dimensions | v1.4.1</title>
diff --git a/server/scripts/main.js b/server/scripts/main.js
index de438f1..9e8d30a 100644
--- a/server/scripts/main.js
+++ b/server/scripts/main.js
@@ -1,8 +1,10 @@
+let characters;
+let vehicles;
+
+const socket = io();
+
 $(function () {
   // Pre-load character and vehicle data, since it is required for the operation of the page and there are multiple places it is used
-  var characters;
-  var vehicles;
-
   $.ajax({
     dataType: "json",
     url: "json/charactermap.json",
@@ -23,11 +25,10 @@ $(function () {
 
   setupFilterInputs();
 
-  var socket = io();
   socket.emit("connectionStatus");
   socket.emit("syncToyPad");
 
-  var currentMousePos = { x: -1, y: -1 };
+  const currentMousePos = { x: -1, y: -1 };
   $(document).mousemove(function (event) {
     currentMousePos.x = event.pageX;
     currentMousePos.y = event.pageY;
@@ -47,7 +48,6 @@ $(function () {
     helper: "clone",
     appendTo: document.getElementById("focus"),
     containment: document.getElementById("focus"),
-    //cursorAt: {left: (-(($(document).width() - $(window).width())/2))},
 
     sort: function (event, ui) {
       ui.helper[0].style.left = currentMousePos.x - 20;
@@ -66,11 +66,11 @@ $(function () {
     },
 
     stop: function (event, ui) {
-      var parentBox = ui.item.closest(".box");
-      var previousPadNum = parseInt(ui.item.attr("previous-pad-num"));
-      var newPadNum = parseInt(parentBox.attr("pad-num"));
-      var previousPadIndex = parseInt(ui.item.attr("previousPadIndex"));
-      var newPadIndex = parseInt(parentBox.attr("pad-index"));
+      const parentBox = ui.item.closest(".box");
+      const previousPadNum = Number.parseInt(ui.item.attr("previous-pad-num"));
+      const newPadNum = Number.parseInt(parentBox.attr("pad-num"));
+      const previousPadIndex = Number.parseInt(ui.item.attr("previousPadIndex"));
+      const newPadIndex = Number.parseInt(parentBox.attr("pad-index"));
 
       // If moving to the same space on the Toy Pad, remove and place in the current space
       if (
@@ -81,7 +81,7 @@ $(function () {
       ) {
         updateToyPadPosition(
           ui.item.attr("data-uid"),
-          parseInt(ui.item.attr("data-id")),
+          Number.parseInt(ui.item.attr("data-id")),
           newPadNum,
           newPadIndex,
           newPadIndex
@@ -94,7 +94,7 @@ $(function () {
       applyFilters(); //Refilter in case anything was in the search bar.
     },
     receive: function (event, ui) {
-      var $this = $(this);
+      const $this = $(this);
 
       if ($this.attr("id") == "remove-tokens") {
         socket.emit("deleteToken", ui.item.attr("data-uid"));
@@ -102,10 +102,6 @@ $(function () {
           refreshToyBox();
         }, 500);
       }
-      // else if($this.attr('id') == "edit-tokens") {
-      // 	dialog.dialog("open");
-      // 	setTimeout(function () { refreshToyBox(); }, 500)
-      // }
       else if (
         $this.attr("pad-num") == undefined ||
         ($this.children("li").length > 1 && $this.attr("id") != "toybox-tokens")
@@ -118,18 +114,18 @@ $(function () {
           contentType: "application/json",
           url: "/remove",
           data: JSON.stringify({
-            index: parseInt(ui.sender.attr("pad-index")),
+            index: Number.parseInt(ui.sender.attr("pad-index")),
             uid: ui.item.attr("data-uid"),
           }),
         });
       }
       //If moving from the Toy Box, place tag in the game.
-      else if (parseInt(ui.sender.attr("pad-num")) === -1) {
-        var content = {
+      else if (Number.parseInt(ui.sender.attr("pad-num")) === -1) {
+        const content = {
           uid: ui.item.attr("data-uid"),
-          id: parseInt(ui.item.attr("data-id")),
-          position: parseInt($this.attr("pad-num")),
-          index: parseInt($this.attr("pad-index")),
+          id: Number.parseInt(ui.item.attr("data-id")),
+          position: Number.parseInt($this.attr("pad-num")),
+          index: Number.parseInt($this.attr("pad-index")),
         };
         console.log(content);
         $.ajax({
@@ -143,10 +139,10 @@ $(function () {
       else {
         updateToyPadPosition(
           ui.item.attr("data-uid"),
-          parseInt(ui.item.attr("data-id")),
-          parseInt($this.attr("pad-num")),
-          parseInt(ui.sender.attr("pad-index")),
-          parseInt($this.attr("pad-index"))
+          Number.parseInt(ui.item.attr("data-id")),
+          Number.parseInt($this.attr("pad-num")),
+          Number.parseInt(ui.sender.attr("pad-index")),
+          Number.parseInt($this.attr("pad-index"))
         );
       }
     },
@@ -168,15 +164,15 @@ $(function () {
 
   socket.on("Fade One", function (e) {
     console.log("IO Recieved: Fade One");
-    padindexs = [[2], [1, 4, 5], [3, 6, 7]];
-    pad = e[0];
-    speed = e[1];
-    cycles = e[2];
-    color = e[3] + "80";
+    const padindexs = [[2], [1, 4, 5], [3, 6, 7]];
+    const pad = e[0];
+    const speed = e[1];
+    const cycles = e[2];
+    const color = e[3] + "80";
     console.log("FADE ONE: ", e);
-    pads = padindexs[pad - 1];
+    const pads = padindexs[pad - 1];
     pads.forEach((element) => {
-      pad = document.getElementById("toypad" + element);
+      const padElement = document.getElementById("toypad" + element);
 
       console.log("#toypad" + element + " Color: " + color);
       $("#toypad" + element)
@@ -185,21 +181,23 @@ $(function () {
       setTimeout(() => {
         $("#toypad" + element)
           .animate()
-          .css({ backgroundColor: pad.color });
+          .css({ backgroundColor: padElement.color });
       }, speed * 100);
     });
   });
 
   socket.on("Fade All", function (e) {
     console.log("IO Recieved: Fade All");
-    padindexs = [1, 2, 3, 4, 5, 6, 7];
-    speed = e[0];
-    cycles = e[1];
+    const padindexs = [1, 2, 3, 4, 5, 6, 7];
+    const speed = e[0];
+    const cycles = e[1];
     padindexs.forEach((element) => {
-      pad = document.getElementById("toypad" + element);
-      if (element == 2) var color = e[2];
-      else if (element == 1 || element == 4 || element == 5) var color = e[5];
-      else if (element == 3 || element == 6 || element == 7) var color = e[8];
+      const pad = document.getElementById("toypad" + element);
+      let color;
+
+      if (element == 2) color = e[2];
+      else if (element == 1 || element == 4 || element == 5) color = e[5];
+      else if (element == 3 || element == 6 || element == 7) color = e[8];
       console.log("#toypad" + element + " Color: " + color);
       color = color + "80";
       $("#toypad" + element)
@@ -215,27 +213,29 @@ $(function () {
 
   socket.on("Color One", function (e) {
     console.log("IO Recieved: Color One");
-    padindexs = [[2], [1, 4, 5], [3, 6, 7]];
-    pad = e[0];
-    color = e[1] + "80";
+    const padindexs = [[2], [1, 4, 5], [3, 6, 7]];
+    const pad = e[0];
+    const color = e[1] + "80";
     console.log(color);
-    pads = padindexs[pad - 1];
+    const pads = padindexs[pad - 1];
     pads.forEach((element) => {
-      pad = document.getElementById("toypad" + element);
-      pad.setAttribute("color", e[1]);
+      const padElement = document.getElementById("toypad" + element);
+      padElement.setAttribute("color", e[1]);
       $("#toypad" + element).css({ backgroundColor: color });
     });
   });
 
   socket.on("Color All", function (e) {
     console.log("IO Recieved: Color All");
-    padindexs = [1, 2, 3, 4, 5, 6, 7];
+    const padindexs = [1, 2, 3, 4, 5, 6, 7];
     padindexs.forEach((element) => {
-      pad = document.getElementById("toypad" + element);
-      padnum = pad.pad - num;
-      if (element == 2) var color = e[0];
-      else if (element == 1 || element == 4 || element == 5) var color = e[1];
-      else if (element == 3 || element == 6 || element == 7) var color = e[2];
+      const pad = document.getElementById("toypad" + element);
+
+      let color;
+
+      if (element == 2) color = e[0];
+      else if (element == 1 || element == 4 || element == 5) color = e[1];
+      else if (element == 3 || element == 6 || element == 7) color = e[2];
       pad.setAttribute("color", color);
       console.log(pad);
       color = color + "80";
@@ -248,335 +248,41 @@ $(function () {
     $("#status").css({ display: "none" });
   });
 
-  //**Script Functions**
-
-  function filterById(jsonObject, id) {
-    return jsonObject.filter(function (jsonObject) {
-      return jsonObject["id"] == id;
-    })[0];
-  }
-
-  function filterByName(jsonObject, name) {
-    return jsonObject.filter(function (jsonObject) {
-      return jsonObject["name"] == name;
-    })[0];
-  }
-
-  //Remove all token items from the lists and reread toytags.json and repopulate the lists.
-  function refreshToyBox() {
-    //Remove All Current Tokens
-    var boxes = document.querySelectorAll(".box");
-
-    boxes.forEach(function (toybox) {
-      while (
-        toybox.lastChild &&
-        toybox.lastChild.id != "deleteToken" &&
-        toybox.lastChild.id != "colorToken"
-      ) {
-        toybox.removeChild(toybox.lastChild);
-      }
-    });
-
-    //Reread JSON file
-    $.getJSON("./json/toytags.json", function (data) {
-      tags = data;
-    }).done(function () {
-      $.each(tags, function (i, item) {
-        console.log("ID: " + item.id + " UID: " + item.uid);
-        if (item.name != "N/A" && item.index == "-1") {
-          $("#toybox-tokens").append(createItemHtml(item));
-        } else if (item.index != "-1") {
-          $("#toypad" + item.index).append(createItemHtml(item));
-        }
-        applyFilters();
-      });
-    });
-  }
-
-  function createItemHtml(item) {
-    var itemData;
-
-    if (item.type == "character") {
-      itemData = filterById(characters, item.id);
-    } else {
-      itemData = filterById(vehicles, item.id);
-    }
-
-    var content = "<h3>" + itemData.name + "</h3>";
-    var path = "images/" + itemData.id + ".png";
-    var url = $(location).attr("href") + "/../" + path;
-    if (fileExists(url)) {
-      content =
-        "<img src=" +
-        path +
-        " alt=" +
-        itemData.name +
-        " style='width: 100%; height: 100%; object-fit: contain; pointer-events: none;'>";
-    }
-
-    return (
-      "<li class=item draggable=true data-name=" +
-      item.name +
-      " data-type=" +
-      item.type +
-      " data-id= " +
-      item.id +
-      " data-uid=" +
-      item.uid +
-      " pad=" +
-      item.pad +
-      ' data-world="' +
-      itemData.world +
-      '" data-abilities="' +
-      itemData.abilities +
-      '">' +
-      content +
-      "</li>"
-    );
-  }
-
-  function fileExists(url) {
-    var http = new XMLHttpRequest();
-    http.open("HEAD", url, false);
-    http.send();
-    return http.status != 404;
-  }
-
-  function updateToyPadPosition(uid, id, position, currentIndex, newIndex) {
-    console.log(currentIndex);
-    $.ajax({
-      method: "DELETE",
-      contentType: "application/json",
-      url: "/remove",
-      data: JSON.stringify({ index: currentIndex, uid: uid }),
-    }).done(function () {
-      setTimeout(function () {
-        $.ajax({
-          method: "POST",
-          contentType: "application/json",
-          url: "/place",
-          data: JSON.stringify({
-            uid: uid,
-            id: id,
-            position: position,
-            index: newIndex,
-          }),
-        });
-      }, 500);
-    });
-  }
-
-  //Filter the toybox to tags matching the current text of the search bar.
-  function applyNameFilter() {
-    var text = $("#name-filter").val().toLowerCase();
-    $(".item").each(function (index, item) {
-      var name = $(item).text().toLowerCase();
-      if (!name.includes(text)) {
-        $(item).addClass("filtered");
-      }
-    });
-  }
-
-  function setupFilterInputs() {
-    $.each(characters, function (i, item) {
-      if (item.name != "Unknown" || item.name.includes("(unreleased)"))
-        $("#character-list").append(
-          '<option value="' +
-            item.name +
-            '" data-world="' +
-            item.world +
-            '" data-abilities="' +
-            item.abilities +
-            '">'
-        );
-    });
-
-    $.each(vehicles, function (i, item) {
-      if (item.name != "Unknown")
-        $("#vehicle-list").append(
-          '<option value="' +
-            item.name +
-            '" data-world="' +
-            item.world +
-            '" data-abilities="' +
-            item.abilities +
-            '">'
-        );
-    });
-
-    var worlds = [];
-    var ignoredWorlds = ["15", "16", "17", "18", "19", "20", "N/A", "Unknown"];
-    worlds = worlds.concat(
-      characters.map(function (character) {
-        return character.world;
-      })
-    );
-    worlds = worlds.concat(
-      vehicles.map(function (vehicle) {
-        return vehicle.world;
-      })
-    );
-    worlds = getUniqueSortedValues(worlds);
-    worlds = worlds.filter(function (world) {
-      return !ignoredWorlds.includes(world);
-    });
-
-    $.each(worlds, function (i, world) {
-      if (world != "Unknown")
-        $("#world-list").append('<option value="' + world + '">');
-    });
-
-    var abilities = [];
-    abilities = abilities.concat(
-      characters.map(function (character) {
-        return character.abilities.split(",");
-      })
-    );
-    abilities = abilities.concat(
-      vehicles.map(function (vehicle) {
-        return vehicle.abilities.split(",");
-      })
-    );
-    abilities = abilities.flat();
-    abilities = getUniqueSortedValues(abilities);
-
-    $.each(abilities, function (i, ability) {
-      if (ability != "Unknown")
-        $("#ability-list").append('<option value="' + ability + '">');
-    });
-  }
-
-  function applyFilters() {
-    clearFilters();
-    applyNameFilter();
-    applyWorldFilter();
-    applyAbilityFilter();
-  }
-
-  function applyWorldFilter() {
-    var world = $("#tag-world-filter").val();
-    if (world != "") {
-      $("#character-list option, #vehicle-list option").each(function (
-        index,
-        option
-      ) {
-        if ($(option).attr("data-world") != world) {
-          $(option).prop("disabled", true);
-        }
-      });
-
-      $(".item").each(function (index, item) {
-        if ($(item).attr("data-world") != world) {
-          $(item).addClass("filtered");
-        }
-      });
-    }
-  }
-
-  function applyAbilityFilter() {
-    var ability = $("#tag-ability-filter").val();
-    if (ability != "") {
-      $("#character-list option, #vehicle-list option").each(function (
-        index,
-        option
-      ) {
-        if (!$(option).attr("data-abilities").split(",").includes(ability)) {
-          $(option).prop("disabled", true);
-        }
-      });
-
-      $(".item:not(#deleteToken)").each(function (index, item) {
-        if (!$(item).attr("data-abilities").split(",").includes(ability)) {
-          $(item).addClass("filtered");
-        }
-      });
-    }
-  }
-
-  function clearFilterInputs() {
-    $("#tag-world-filter, #tag-ability-filter, #name-filter").val("");
-  }
-
-  function clearFilters() {
-    $("#character-list option, #vehicle-list option").prop("disabled", false);
-    $(".item").removeClass("filtered");
-  }
-
-  function getUniqueSortedValues(array) {
-    return array
-      .filter(function (value, index, self) {
-        return self.indexOf(value) === index;
-      })
-      .sort(compareWithoutArticles);
-  }
-
-  function compareWithoutArticles(a, b) {
-    var aWithoutArticles = removeArticles(a);
-    var bWithoutArticles = removeArticles(b);
-
-    if (aWithoutArticles > bWithoutArticles) {
-      return 1;
-    }
-
-    if (aWithoutArticles < bWithoutArticles) {
-      return -1;
-    }
-
-    return 0;
-  }
-
-  function removeArticles(string) {
-    words = string.split(" ");
-    if (words.length <= 1) {
-      return string;
-    }
-
-    if (words[0] == "The") {
-      return words.splice(1).join(" ");
-    }
-
-    return string;
-  }
-
   $("#character-select").submit(function (e) {
     e.preventDefault();
 
-    var name = $("#character-name").val();
+    const name = $("#character-name").val();
     $.ajax({
       method: "POST",
       contentType: "application/json",
       url: "/character",
       data: JSON.stringify({ id: filterByName(characters, name).id }),
     }).done(function () {
-      var now = Date.now();
-      var end = now + 150;
-      while (now < end) {
-        now = Date.now();
-      }
-      socket.emit("syncToyPad");
-      $("#character-select")[0].reset();
+      setTimeout(() => 
+      {
+        socket.emit("syncToyPad");
+        $("#character-select")[0].reset();  
+      }, 150);
     });
   });
 
   $("#vehicle-select").submit(function (e) {
     e.preventDefault();
 
-    var name = $("#vehicle-name").val();
+    const name = $("#vehicle-name").val();
     console.log(name);
-    var id = filterByName(vehicles, name).id;
+    const id = filterByName(vehicles, name).id;
     $.ajax({
       method: "POST",
       contentType: "application/json",
       url: "/vehicle",
       data: JSON.stringify({ id: id }),
     }).done(function () {
-      var now = Date.now();
-      var end = now + 150;
-      while (now < end) {
-        now = Date.now();
-      }
-      socket.emit("syncToyPad");
-      $("#vehicle-select")[0].reset();
+      setTimeout(() => 
+      {
+        socket.emit("syncToyPad");
+        $("#vehicle-select")[0].reset();   
+      }, 150);
     });
   });
 
@@ -585,8 +291,7 @@ $(function () {
   });
 
   //**Customize Token**
-  var dialog;
-  dialog = $("#dialog-form").dialog({
+  const dialog = $("#dialog-form").dialog({
     autoOpen: false,
     height: 400,
     width: 350,
@@ -626,3 +331,295 @@ $(function () {
     clearFilters();
   });
 });
+
+//**Script Functions**
+
+function filterById(jsonObject, id) {
+	return jsonObject.find(function(jsonObject) {
+		return jsonObject["id"] == id;
+	});
+}
+
+function filterByName(jsonObject, name) {
+	return jsonObject.find(function(jsonObject) {
+		return jsonObject["name"] == name;
+	});
+}
+
+//Remove all token items from the lists and reread toytags.json and repopulate the lists.
+function refreshToyBox() {
+	//Remove All Current Tokens
+	const boxes = document.querySelectorAll(".box");
+
+	boxes.forEach(function(toybox) {
+		while (
+			toybox.lastChild &&
+			toybox.lastChild.id != "deleteToken" &&
+			toybox.lastChild.id != "colorToken"
+		) {
+			toybox.lastChild.remove();
+		}
+	});
+
+	//Reread JSON file
+	$.getJSON("./json/toytags.json", function(data) {
+    $.each(data, function(i, item) {
+			console.log("ID: " + item.id + " UID: " + item.uid);
+			if (item.name != "N/A" && item.index == "-1") {
+				$("#toybox-tokens").append(createItemHtml(item));
+			} else if (item.index != "-1") {
+				$("#toypad" + item.index).append(createItemHtml(item));
+			}
+			applyFilters();
+		});
+	});
+}
+
+function createItemHtml(item) {
+	let itemData;
+
+	if (item.type == "character") {
+		itemData = filterById(characters, item.id);
+	} else {
+		itemData = filterById(vehicles, item.id);
+	}
+
+	let content = "<h3>" + itemData.name + "</h3>";
+	const path = "images/" + itemData.id + ".png";
+	const url = $(location).attr("href") + "/../" + path;
+
+	if (fileExists(url)) {
+		content =
+			"<img src=" +
+			path +
+			" alt=" +
+			itemData.name +
+			" style='width: 100%; height: 100%; object-fit: contain; pointer-events: none;'>";
+	}
+
+	return (
+		"<li class=item draggable=true data-name=" +
+		item.name +
+		" data-type=" +
+		item.type +
+		" data-id= " +
+		item.id +
+		" data-uid=" +
+		item.uid +
+		" pad=" +
+		item.pad +
+		' data-world="' +
+		itemData.world +
+		'" data-abilities="' +
+		itemData.abilities +
+		'">' +
+		content +
+		"</li>"
+	);
+}
+
+function fileExists(url) {
+	const http = new XMLHttpRequest();
+	http.open("HEAD", url, false);
+	http.send();
+	return http.status != 404;
+}
+
+function updateToyPadPosition(uid, id, position, currentIndex, newIndex) {
+	console.log(currentIndex);
+	$.ajax({
+		method: "DELETE",
+		contentType: "application/json",
+		url: "/remove",
+		data: JSON.stringify({
+			index: currentIndex,
+			uid: uid
+		}),
+	}).done(function() {
+		setTimeout(function() {
+			$.ajax({
+				method: "POST",
+				contentType: "application/json",
+				url: "/place",
+				data: JSON.stringify({
+					uid: uid,
+					id: id,
+					position: position,
+					index: newIndex,
+				}),
+			});
+		}, 500);
+	});
+}
+
+//Filter the toybox to tags matching the current text of the search bar.
+function applyNameFilter() {
+	const text = $("#name-filter").val().toLowerCase();
+	$(".item").each(function(index, item) {
+		const name = $(item).text().toLowerCase();
+		if (!name.includes(text)) {
+			$(item).addClass("filtered");
+		}
+	});
+}
+
+function setupFilterInputs() {
+	$.each(characters, function(i, item) {
+		if (item.name != "Unknown" || item.name.includes("(unreleased)"))
+			$("#character-list").append(
+				'<option value="' +
+				item.name +
+				'" data-world="' +
+				item.world +
+				'" data-abilities="' +
+				item.abilities +
+				'">'
+			);
+	});
+
+	$.each(vehicles, function(i, item) {
+		if (item.name != "Unknown")
+			$("#vehicle-list").append(
+				'<option value="' +
+				item.name +
+				'" data-world="' +
+				item.world +
+				'" data-abilities="' +
+				item.abilities +
+				'">'
+			);
+	});
+
+	let worlds = [];
+	const ignoredWorlds = new Set(["15", "16", "17", "18", "19", "20", "N/A", "Unknown"]);
+	worlds = worlds.concat(
+		characters.map(function(character) {
+			return character.world;
+		})
+	);
+	worlds = worlds.concat(
+		vehicles.map(function(vehicle) {
+			return vehicle.world;
+		})
+	);
+	worlds = getUniqueSortedValues(worlds);
+	worlds = worlds.filter(function(world) {
+		return !ignoredWorlds.has(world);
+	});
+
+	$.each(worlds, function(i, world) {
+		if (world != "Unknown")
+			$("#world-list").append('<option value="' + world + '">');
+	});
+
+	let abilities = [];
+	abilities = abilities.concat(
+		characters.map(function(character) {
+			return character.abilities.split(",");
+		})
+	);
+	abilities = abilities.concat(
+		vehicles.map(function(vehicle) {
+			return vehicle.abilities.split(",");
+		})
+	);
+	abilities = abilities.flat();
+	abilities = getUniqueSortedValues(abilities);
+
+	$.each(abilities, function(i, ability) {
+		if (ability != "Unknown")
+			$("#ability-list").append('<option value="' + ability + '">');
+	});
+}
+
+function applyFilters() {
+	clearFilters();
+	applyNameFilter();
+	applyWorldFilter();
+	applyAbilityFilter();
+}
+
+function applyWorldFilter() {
+	const world = $("#tag-world-filter").val();
+	if (world != "") {
+		$("#character-list option, #vehicle-list option").each(function(
+			index,
+			option
+		) {
+			if ($(option).attr("data-world") != world) {
+				$(option).prop("disabled", true);
+			}
+		});
+
+		$(".item").each(function(index, item) {
+			if ($(item).attr("data-world") != world) {
+				$(item).addClass("filtered");
+			}
+		});
+	}
+}
+
+function applyAbilityFilter() {
+	const ability = $("#tag-ability-filter").val();
+	if (ability != "") {
+		$("#character-list option, #vehicle-list option").each(function(
+			index,
+			option
+		) {
+			if (!$(option).attr("data-abilities").split(",").includes(ability)) {
+				$(option).prop("disabled", true);
+			}
+		});
+
+		$(".item:not(#deleteToken)").each(function(index, item) {
+			if (!$(item).attr("data-abilities").split(",").includes(ability)) {
+				$(item).addClass("filtered");
+			}
+		});
+	}
+}
+
+function clearFilterInputs() {
+	$("#tag-world-filter, #tag-ability-filter, #name-filter").val("");
+}
+
+function clearFilters() {
+	$("#character-list option, #vehicle-list option").prop("disabled", false);
+	$(".item").removeClass("filtered");
+}
+
+function getUniqueSortedValues(array) {
+	return array
+		.filter(function(value, index, self) {
+			return self.indexOf(value) === index;
+		})
+		.sort(compareWithoutArticles);
+}
+
+function compareWithoutArticles(a, b) {
+	const aWithoutArticles = removeArticles(a);
+	const bWithoutArticles = removeArticles(b);
+
+	if (aWithoutArticles > bWithoutArticles) {
+		return 1;
+	}
+
+	if (aWithoutArticles < bWithoutArticles) {
+		return -1;
+	}
+
+	return 0;
+}
+
+function removeArticles(string) {
+	const words = string.split(" ");
+	if (words.length <= 1) {
+		return string;
+	}
+
+	if (words[0] == "The") {
+		return words.splice(1).join(" ");
+	}
+
+	return string;
+}
\ No newline at end of file
diff --git a/server/stylesheets/main.css b/server/stylesheets/main.css
index 158ccdb..46839cf 100644
--- a/server/stylesheets/main.css
+++ b/server/stylesheets/main.css
@@ -161,7 +161,6 @@ button:active {
     border-radius: 0.5rem;
     color: #000;
     box-sizing: border-box;
-    cursor: pointer;
     box-shadow: #00000033 0 4px 12px;
     cursor: grab;
     position: relative;
@@ -237,9 +236,7 @@ button:active {
     border: solid 3px transparent;
     margin: 0;
     list-style-type: none;
-    padding: 10px;
     transition: background-color 0.25s ease-out;
-    border-radius: 0.5rem;
     height: 8em;
     width: 8em;
     display: flex;
@@ -247,7 +244,7 @@ button:active {
     justify-content: center;
     border-radius: 0.5rem;
     cursor: default;
-    padding: 10;
+    padding: 10px;
 }
 
 .box-edit>#deleteToken {