diff --git a/cardie/main/templates/authentication.html b/cardie/main/templates/authentication.html
index c8468e0..9b546ca 100644
--- a/cardie/main/templates/authentication.html
+++ b/cardie/main/templates/authentication.html
@@ -13,62 +13,62 @@
 {% endblock %}
 
 {% block body %}
-    <div id="authentication-box" x-data="box_param_check()">
+    <div id="authentication_box" x-data="box_param_check()">
         {% csrf_token %}
-        <img id="authentication-box-image"
+        <img id="authentication_box_image"
              @click="window.location.href = server_ip"
              src="{% static '/main/images/logo_light.png' %}">
         <div class="ui_status_critical"
-             id="authentication-error"
+             id="authentication_error"
              style="display: none">
             <i class="ph-bold ph-warning-octagon ui_status_icon"></i>
             <p class="ui_status_text">Critical status box</p>
         </div>
-        <div id="signin-box" x-show="sign_in" x-transition:enter.delay.200ms>
+        <div id="signin_box" x-show="sign_in" x-transition:enter.delay.200ms>
             <p class="ui_text_header">
                 <i class="ph-bold ph-keyhole"></i> Sign In
             </p>
             <div class="ui_separator_horizontal"></div>
-            <input id="signin-username"
+            <input id="signin_username"
                    type="text"
                    class="ui_input_generic"
                    placeholder="Username">
-            <input id="signin-password"
+            <input id="signin_password"
                    type="password"
                    class="ui_input_generic"
                    placeholder="Password">
-            <button id="signin-signin" class="ui_button_large">
+            <button id="signin_signin" class="ui_button_large">
                 <strong>Sign In</strong> <i class="ph-bold ph-sign-in"></i>
             </button>
-            <button id="signin-createaccount"
+            <button id="signin_createaccount"
                     class="ui_button_small"
                     @click="sign_in = !sign_in">
                 Create an Account <i class="ph-bold ph-arrow-right"></i>
             </button>
         </div>
-        <div id="createaccount-box"
+        <div id="createaccount_box"
              x-show="!sign_in"
              x-transition:enter.delay.200ms>
             <p class="ui_text_header">
                 <i class="ph-bold ph-key"></i> Create Account
             </p>
             <div class="ui_separator_horizontal"></div>
-            <input id="createaccount-username"
+            <input id="createaccount_username"
                    type="text"
                    class="ui_input_generic"
                    placeholder="Username">
-            <input id="createaccount-password"
+            <input id="createaccount_password"
                    type="password"
                    class="ui_input_generic"
                    placeholder="Password">
-            <input id="createaccount-email"
+            <input id="createaccount_email"
                    type="text"
                    class="ui_input_generic"
                    placeholder="Email">
-            <button id="createaccount-createaccount" class="ui_button_large">
+            <button id="createaccount_createaccount" class="ui_button_large">
                 <strong>Create Account</strong> <i class="ph-bold ph-user-plus"></i>
             </button>
-            <button id="createaccount-signin"
+            <button id="createaccount_signin"
                     class="ui_button_small"
                     @click="sign_in = !sign_in">
                 Sign In <i class="ph-bold ph-arrow-right"></i>
diff --git a/cardie/main/templates/editor.html b/cardie/main/templates/editor.html
index c712d8b..152d38e 100644
--- a/cardie/main/templates/editor.html
+++ b/cardie/main/templates/editor.html
@@ -144,17 +144,17 @@
             <div class="ui_separator_horizontal"></div>
         </div>
     </div>
-    <div id="editor-iconselector">
-        <div id="editor-iconselector-top">
+    <div id="editor_iconselector">
+        <div id="editor_iconselector_top">
             <input type="text"
                    class="ui_input_generic"
-                   id="editor-iconselector-top-search"
+                   id="editor_iconselector_top_search"
                    placeholder="Search for an icon">
-            <button class="ui_button_icon" id="editor-iconselector-top-close">
+            <button class="ui_button_icon" id="editor_iconselector_top_close">
                 <i class="ph-bold ph-x"></i>
             </button>
         </div>
-        <div id="editor-iconselector-icons"></div>
+        <div id="editor_iconselector_icons"></div>
     </div>
     <div id="editor_rename">
         <div id="editor_rename_top">
diff --git a/cardie/main/templates/home.html b/cardie/main/templates/home.html
index 01c30f3..e4fd9c6 100644
--- a/cardie/main/templates/home.html
+++ b/cardie/main/templates/home.html
@@ -8,16 +8,16 @@
     <link rel="stylesheet" type="text/css" href="{% static '/main/home.css' %}">
 {% endblock %}
 {% block body %}
-    <div id="home-top">
-        <div id="home-top-logo">
-            <img id="home-top-image" src="{% static '/main/images/logo_light.png' %}">
-            <p id="home-top-text" class="ui_text_subheader_left">Hello, {{ username }}</p>
+    <div id="home_top">
+        <div id="home_top_logo">
+            <img id="home_top_image" src="{% static '/main/images/logo_light.png' %}">
+            <p id="home_top_text" class="ui_text_subheader_left">Hello, {{ username }}</p>
         </div>
-        <div id="home-top-profile" x-data="{ open: false }" @click="open = !open">
-            <button id="home-top-username" class="ui_button_small">
+        <div id="home_top_profile" x-data="{ open: false }" @click="open = !open">
+            <button id="home_top_username" class="ui_button_small">
                 {{ username }} <i class="ph-bold ph-caret-down"></i>
             </button>
-            <div id="home-top-profile-dropdown" x-show="open" x-transition>
+            <div id="home_top_profile_dropdown" x-show="open" x-transition>
                 <button class="ui_button_small" @click="log_out()">
                     <i class="ph-bold ph-sign-out"></i> Log Out
                 </button>
@@ -25,21 +25,21 @@
         </div>
     </div>
     <div x-data="{ cards: true, cards_disabled: true, wallet_disabled: false }">
-        <div id="home-navigation">
-            <button id="home-navigation-wallet"
+        <div id="home_navigation">
+            <button id="home_navigation_wallet"
                     class="ui_button_grid"
                     @click="cards = false; cards_disabled = false; wallet_disabled = true;"
                     x-bind:disabled="wallet_disabled">
                 Wallet <i class="ph-bold ph-wallet"></i>
             </button>
-            <button id="home-navigation-cards"
+            <button id="home_navigation_cards"
                     class="ui_button_grid"
                     @click="cards = true; wallet_disabled = false; cards_disabled = true;"
                     x-bind:disabled="cards_disabled">
                 My Cards <i class="ph-bold ph-cards"></i>
             </button>
         </div>
-        <div id="home-wallet" x-show="!cards" x-transition>
+        <div id="home_wallet" x-show="!cards" x-transition>
             <p class="ui_text_subheader_left">
                 <i class="ph-bold ph-wallet"></i> My Wallet
             </p>
@@ -49,7 +49,7 @@
                 <p class="ui_status_text">You don't have any cards saved yet! Once you do, they will appear here for you to find later.</p>
             </div>
         </div>
-        <div id="home-cards" x-show="cards" x-transition>
+        <div id="home_cards" x-show="cards" x-transition>
             <p class="ui_text_subheader_left">
                 <i class="ph-bold ph-cards"></i> My Cards
             </p>
diff --git a/cardie/static/main/authentication.css b/cardie/static/main/authentication.css
index 165cb7d..2da02ab 100644
--- a/cardie/static/main/authentication.css
+++ b/cardie/static/main/authentication.css
@@ -2,7 +2,7 @@ html {
     background: rgb(37, 40, 49);
 }
 
-#authentication-box {
+#authentication_box {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -14,7 +14,7 @@ html {
     z-index: 1;
 }
 
-#authentication-box-image {
+#authentication_box_image {
     width: clamp(30vh, 300px, 30vw);
     height: auto;
 
@@ -25,31 +25,31 @@ html {
     transition: var(--default-transition);
 }
 
-#authentication-box-image:hover {
+#authentication_box_image:hover {
     scale: 1.05;
 }
 
-#signin-box {
+#signin_box {
     display: flex;
     flex-direction: column;
 
     align-items: center;
 }
 
-#createaccount-box {
+#createaccount_box {
     display: flex;
     flex-direction: column;
 
     align-items: center;
 }
 
-#authentication-error {
+#authentication_error {
     opacity: 0;
     scale: 0.8;
     transition: var(--default-transition);
 }
 
-#authentication-error.show {
+#authentication_error.show {
     opacity: 1;
     scale: 1;
 }
diff --git a/cardie/static/main/editor.css b/cardie/static/main/editor.css
index d3c7a23..ba6b8dd 100644
--- a/cardie/static/main/editor.css
+++ b/cardie/static/main/editor.css
@@ -146,7 +146,7 @@ html {
 @media (min-width: 1000px) {
     /* Large screens */
 
-    #editor-iconselector {
+    #editor_iconselector {
         background-color: var(--default-glass-background);
         border: var(--default-glass-border);
         backdrop-filter: var(--default-glass-blur);
@@ -180,7 +180,7 @@ html {
 @media (max-width: 1000px) {
     /* Small Screens */
 
-    #editor-iconselector {
+    #editor_iconselector {
         background-color: var(--default-glass-background);
         backdrop-filter: var(--default-glass-blur);
     
@@ -208,18 +208,18 @@ html {
     }
 }
 
-#editor-iconselector-top {
+#editor_iconselector_top {
     display: flex;
     flex-direction: row;
 }
 
-#editor-iconselector-top-search {
+#editor_iconselector_top_search {
     height: clamp(2vh, 20px, 2vw);
     max-height: clamp(2vh, 20px, 2vw);
     margin-bottom: clamp(1vh, 10px, 1vw);
 }
 
-#editor-iconselector-icons {
+#editor_iconselector_icons {
     display: flex;
     flex-wrap: wrap;
     overflow-y: auto;
@@ -249,22 +249,22 @@ html {
     box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
 }
 
-.editor-iconselector-icon:hover {
+.editor_iconselector_icon:hover {
     scale: 1.05;
 }
 
-.editor-iconselector-icon:active {
+.editor_iconselector_icon:active {
     scale: 0.95;
 }
 
-.editor-iconselector-icon-icon {
+.editor_iconselector_icon_icon {
     color: var(--default-text-color);
     font-size: clamp(3vh, 30px, 3vw);
     text-align: center;
     margin-top: clamp(0.3vh, 3px, 0.3vw);
 }
 
-.editor-iconselector-icon-text {
+.editor_iconselector_icon_text {
     color: var(--default-text-color);
     font-family: "Noto Sans Mono", "Courier New", monospace;
     font-size: clamp(1vh, 10px, 1vw);
@@ -272,7 +272,7 @@ html {
     user-select: none;
 }
 
-@keyframes show-rename {
+@keyframes show_rename {
     from {
         opacity: 0;
         scale: 0.8;
@@ -284,7 +284,7 @@ html {
     }
 }
 
-@keyframes hide-rename {
+@keyframes hide_rename {
     from {
         opacity: 1;
         scale: 1;
@@ -296,12 +296,12 @@ html {
     }
 }
 
-.show-rename {
-    animation: show-rename 0.2s ease-in-out forwards;
+.show_rename {
+    animation: show_rename 0.2s ease-in-out forwards;
 }
 
-.hide-rename {
-    animation: hide-rename 0.2s ease-in-out forwards;
+.hide_rename {
+    animation: hide_rename 0.2s ease-in-out forwards;
 }
 
 @media (min-width: 1000px) {
diff --git a/cardie/static/main/home.css b/cardie/static/main/home.css
index e732dfc..de50d35 100644
--- a/cardie/static/main/home.css
+++ b/cardie/static/main/home.css
@@ -5,7 +5,7 @@ html {
 @media (min-width: 1000px) {
     /* Large screens */
 
-    #home-top {
+    #home_top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -15,29 +15,29 @@ html {
         margin-top: clamp(5vh, 50px, 5vw);
     }
     
-    #home-top-text {
+    #home_top_text {
         margin-left: clamp(6vh, 60px, 6vw);
     }
     
-    #home-navigation {
+    #home_navigation {
         margin-top: clamp(1vh, 10px, 1vw);
         margin-left: clamp(12vh, 120px, 12vw);
         margin-bottom: clamp(2vh, 20px, 2vw);
     }
     
-    #home-wallet {
+    #home_wallet {
         margin-left: clamp(12vh, 120px, 12vw);
         display: flex;
         flex-direction: column;
     }
     
-    #home-cards {
+    #home_cards {
         margin-left: clamp(12vh, 120px, 12vw);
         display: flex;
         flex-direction: column;
     }
 
-    #home-top-image {
+    #home_top_image {
         width: clamp(30vh, 300px, 30vw);
         height: auto;
         transition: var(--default-transition);
@@ -48,7 +48,7 @@ html {
 @media (max-width: 1000px) {
     /* Small Screens */
 
-    #home-top {
+    #home_top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -58,29 +58,29 @@ html {
         margin-top: clamp(1vh, 10px, 1vw);
     }
     
-    #home-top-text {
+    #home_top_text {
         margin-left: clamp(2vh, 20px, 2vw);
     }
     
-    #home-navigation {
+    #home_navigation {
         margin-top: clamp(1vh, 10px, 1vw);
         margin-left: clamp(2vh, 20px, 2vw);
         margin-bottom: clamp(1vh, 10px, 1vw);
     }
     
-    #home-wallet {
+    #home_wallet {
         margin-left: clamp(2vh, 20px, 2vw);
         display: flex;
         flex-direction: column;
     }
     
-    #home-cards {
+    #home_cards {
         margin-left: clamp(2vh, 20px, 2vw);
         display: flex;
         flex-direction: column;
     }
 
-    #home-top-image {
+    #home_top_image {
         width: clamp(20vh, 200px, 20vw);
         height: auto;
         transition: var(--default-transition);
@@ -88,7 +88,7 @@ html {
     }
 }
 
-#home-top-image:hover {
+#home_top_image:hover {
     scale: 1.05;
 }
 
@@ -137,15 +137,15 @@ html {
     width: fit-content;
 }
 
-#home-top-profile {
+#home_top_profile {
     position: relative;
 }
 
-#home-top-username {
+#home_top_username {
     height: fit-content;
 }
 
-#home-top-profile-dropdown {
+#home_top_profile_dropdown {
     position: absolute;
     top: 30%;
 
@@ -158,7 +158,7 @@ html {
     width: fit-content;
 }
 
-#home-top-profile-dropdown > button {
+#home_top_profile_dropdown > button {
     white-space: nowrap;
 }
 
diff --git a/cardie/static/main/scripts/authentication/authentication.js b/cardie/static/main/scripts/authentication/authentication.js
index f6656a4..a92a3b4 100644
--- a/cardie/static/main/scripts/authentication/authentication.js
+++ b/cardie/static/main/scripts/authentication/authentication.js
@@ -14,18 +14,18 @@ try {
 
 function show_warning(warning) {
     log("WARNING", warning)
-    document.querySelector("#authentication-error > p").innerText = warning;
-    document.querySelector("#authentication-error").style.display = "flex";
+    document.querySelector("#authentication_error > p").innerText = warning;
+    document.querySelector("#authentication_error").style.display = "flex";
 
     setTimeout(function() {
-        document.querySelector("#authentication-error").classList.add("show");
+        document.querySelector("#authentication_error").classList.add("show");
     }, 100);
 }
 
 async function sign_in() {
     log("INFO", "Signing the user in...");
-    var username = document.querySelector("#signin-username").value;
-    var password = document.querySelector("#signin-password").value;
+    var username = document.querySelector("#signin_username").value;
+    var password = document.querySelector("#signin_password").value;
 
     if (temp_uuid) {
         var response = await fetch(server_ip + "/auth/signin", {
@@ -90,9 +90,9 @@ async function sign_in() {
 
 async function create_account() {
     log("INFO", "Creating an account for the user...");
-    var username = document.querySelector("#createaccount-username").value;
-    var password = document.querySelector("#createaccount-password").value;
-    var email = document.querySelector("#createaccount-email").value;
+    var username = document.querySelector("#createaccount_username").value;
+    var password = document.querySelector("#createaccount_password").value;
+    var email = document.querySelector("#createaccount_email").value;
 
     if (temp_uuid) {
         var response = await fetch(server_ip + "/auth/createaccount", {
@@ -171,35 +171,35 @@ async function create_account() {
 }
 
 function check_sign_in() {
-    document.querySelector("#signin-signin").disabled = !(
-        document.querySelector("#signin-username").value != "" && 
-        document.querySelector("#signin-password").value != ""
+    document.querySelector("#signin_signin").disabled = !(
+        document.querySelector("#signin_username").value != "" && 
+        document.querySelector("#signin_password").value != ""
     );
 }
 
 function check_create_account() {
-    document.querySelector("#createaccount-createaccount").disabled = !(
-        document.querySelector("#createaccount-username").value != "" && 
-        document.querySelector("#createaccount-password").value != "" && 
-        document.querySelector("#createaccount-email").value != ""
+    document.querySelector("#createaccount_createaccount").disabled = !(
+        document.querySelector("#createaccount_username").value != "" && 
+        document.querySelector("#createaccount_password").value != "" && 
+        document.querySelector("#createaccount_email").value != ""
     );
 }
 
-document.querySelector("#signin-signin").addEventListener("click", sign_in);
-document.querySelector("#createaccount-createaccount").addEventListener("click", create_account);
+document.querySelector("#signin_signin").addEventListener("click", sign_in);
+document.querySelector("#createaccount_createaccount").addEventListener("click", create_account);
 
-document.querySelector("#signin-username").addEventListener("input", check_sign_in);
-document.querySelector("#signin-password").addEventListener("input", check_sign_in);
-document.querySelector("#createaccount-username").addEventListener("input", check_create_account);
-document.querySelector("#createaccount-password").addEventListener("input", check_create_account);
-document.querySelector("#createaccount-email").addEventListener("input", check_create_account);
+document.querySelector("#signin_username").addEventListener("input", check_sign_in);
+document.querySelector("#signin_password").addEventListener("input", check_sign_in);
+document.querySelector("#createaccount_username").addEventListener("input", check_create_account);
+document.querySelector("#createaccount_password").addEventListener("input", check_create_account);
+document.querySelector("#createaccount_email").addEventListener("input", check_create_account);
 
-document.querySelector("#signin-signin").disabled = true;
-document.querySelector("#createaccount-createaccount").disabled = true;
+document.querySelector("#signin_signin").disabled = true;
+document.querySelector("#createaccount_createaccount").disabled = true;
 
 document.addEventListener("keyup", (event) => {
     if (event.code === "Enter") {
-        if (document.querySelector("#signin-box").style.display != "none") {
+        if (document.querySelector("#signin_box").style.display != "none") {
             sign_in();
             
         } else {
diff --git a/cardie/static/main/scripts/editor/icons.js b/cardie/static/main/scripts/editor/icons.js
index d4b5c44..6d0f257 100644
--- a/cardie/static/main/scripts/editor/icons.js
+++ b/cardie/static/main/scripts/editor/icons.js
@@ -21,7 +21,7 @@ function create_icon(icon) {
 
     itemsData.push(div_element);
 
-    document.querySelector("#editor-iconselector-icons").appendChild(div_element)
+    document.querySelector("#editor_iconselector_icons").appendChild(div_element)
 }
 
 function render_icons(icons) {
@@ -43,8 +43,8 @@ document.addEventListener("DOMContentLoaded", (event) => {
 
 // Function to render items
 const renderItems = (filteredItems) => {
-    document.querySelector("#editor-iconselector-icons").innerHTML = '';
-    filteredItems.forEach(item => document.querySelector("#editor-iconselector-icons").appendChild(item));
+    document.querySelector("#editor_iconselector_icons").innerHTML = '';
+    filteredItems.forEach(item => document.querySelector("#editor_iconselector_icons").appendChild(item));
 };
 
 // Function to sort items alphabetically by the icon attribute
@@ -59,7 +59,7 @@ const filterItems = (query) => {
 };
 
 // Event listener for the search box
-document.querySelector("#editor-iconselector-top-search").addEventListener('input', (e) => {
+document.querySelector("#editor_iconselector_top_search").addEventListener('input', (e) => {
     const query = e.target.value;
     const filteredItems = filterItems(query);
     const sortedItems = sortItems(filteredItems);
@@ -70,17 +70,17 @@ function show_iconselector(item) {
     icon_selected_item = item;
     show_background_blur();
 
-    document.querySelector("#editor-iconselector").style.display = "flex";
-    document.querySelector("#editor-iconselector").classList.remove("hide-iconselector");
-    document.querySelector("#editor-iconselector").classList.add("show-iconselector");
+    document.querySelector("#editor_iconselector").style.display = "flex";
+    document.querySelector("#editor_iconselector").classList.remove("hide-iconselector");
+    document.querySelector("#editor_iconselector").classList.add("show-iconselector");
 }
 
 function hide_iconselector() {
-    document.querySelector("#editor-iconselector").classList.add("hide-iconselector");
+    document.querySelector("#editor_iconselector").classList.add("hide-iconselector");
 
     setTimeout(function() {
-        document.querySelector("#editor-iconselector").classList.remove("show-iconselector");
-        document.querySelector("#editor-iconselector").style.display = "none";
+        document.querySelector("#editor_iconselector").classList.remove("show-iconselector");
+        document.querySelector("#editor_iconselector").style.display = "none";
         hide_background_blur();
     }, 500);
 }
@@ -96,6 +96,6 @@ function icon_clicked(event) {
     hide_iconselector();
 }
 
-document.querySelector("#editor-iconselector-top-close").addEventListener("click", (event) => {
+document.querySelector("#editor_iconselector_top_close").addEventListener("click", (event) => {
     hide_iconselector();
 });
\ No newline at end of file
diff --git a/cardie/static/main/scripts/editor/rename.js b/cardie/static/main/scripts/editor/rename.js
index 90536c0..a3c9b23 100644
--- a/cardie/static/main/scripts/editor/rename.js
+++ b/cardie/static/main/scripts/editor/rename.js
@@ -2,15 +2,15 @@ function show_rename() {
     show_background_blur();
 
     document.querySelector("#editor_rename").style.display = "flex";
-    document.querySelector("#editor_rename").classList.remove("hide-rename");
-    document.querySelector("#editor_rename").classList.add("show-rename");
+    document.querySelector("#editor_rename").classList.remove("hide_rename");
+    document.querySelector("#editor_rename").classList.add("show_rename");
 }
 
 function hide_rename() {
-    document.querySelector("#editor_rename").classList.add("hide-rename");
+    document.querySelector("#editor_rename").classList.add("hide_rename");
 
     setTimeout(function() {
-        document.querySelector("#editor_rename").classList.remove("show-rename");
+        document.querySelector("#editor_rename").classList.remove("show_rename");
         document.querySelector("#editor_rename").style.display = "none";
 
         hide_background_blur();
diff --git a/cardie/static/main/scripts/home/home.js b/cardie/static/main/scripts/home/home.js
index aaceeaf..f57d4f2 100644
--- a/cardie/static/main/scripts/home/home.js
+++ b/cardie/static/main/scripts/home/home.js
@@ -90,7 +90,7 @@ function create_home_card(uuid, name) {
 
     div.setAttribute("open", false);
 
-    document.querySelector("#home-cards").appendChild(div);
+    document.querySelector("#home_cards").appendChild(div);
 }
 
 function create_wallet_card(uuid, name) {
@@ -137,7 +137,7 @@ function create_wallet_card(uuid, name) {
 
     div.setAttribute("open", false);
 
-    document.querySelector("#home-wallet").appendChild(div);
+    document.querySelector("#home_wallet").appendChild(div);
 }
 
 function home_wallet_view(event) {
@@ -244,7 +244,7 @@ async function get_wallet() {
     });
 }
 
-document.querySelector("#home-top-image").addEventListener("click", (event) => {
+document.querySelector("#home_top_image").addEventListener("click", (event) => {
     window.location.href = server_ip;
 });
 
diff --git a/cardie/staticfiles/main/authentication.css b/cardie/staticfiles/main/authentication.css
index 165cb7d..2da02ab 100644
--- a/cardie/staticfiles/main/authentication.css
+++ b/cardie/staticfiles/main/authentication.css
@@ -2,7 +2,7 @@ html {
     background: rgb(37, 40, 49);
 }
 
-#authentication-box {
+#authentication_box {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -14,7 +14,7 @@ html {
     z-index: 1;
 }
 
-#authentication-box-image {
+#authentication_box_image {
     width: clamp(30vh, 300px, 30vw);
     height: auto;
 
@@ -25,31 +25,31 @@ html {
     transition: var(--default-transition);
 }
 
-#authentication-box-image:hover {
+#authentication_box_image:hover {
     scale: 1.05;
 }
 
-#signin-box {
+#signin_box {
     display: flex;
     flex-direction: column;
 
     align-items: center;
 }
 
-#createaccount-box {
+#createaccount_box {
     display: flex;
     flex-direction: column;
 
     align-items: center;
 }
 
-#authentication-error {
+#authentication_error {
     opacity: 0;
     scale: 0.8;
     transition: var(--default-transition);
 }
 
-#authentication-error.show {
+#authentication_error.show {
     opacity: 1;
     scale: 1;
 }
diff --git a/cardie/staticfiles/main/editor.css b/cardie/staticfiles/main/editor.css
index d3c7a23..ba6b8dd 100644
--- a/cardie/staticfiles/main/editor.css
+++ b/cardie/staticfiles/main/editor.css
@@ -146,7 +146,7 @@ html {
 @media (min-width: 1000px) {
     /* Large screens */
 
-    #editor-iconselector {
+    #editor_iconselector {
         background-color: var(--default-glass-background);
         border: var(--default-glass-border);
         backdrop-filter: var(--default-glass-blur);
@@ -180,7 +180,7 @@ html {
 @media (max-width: 1000px) {
     /* Small Screens */
 
-    #editor-iconselector {
+    #editor_iconselector {
         background-color: var(--default-glass-background);
         backdrop-filter: var(--default-glass-blur);
     
@@ -208,18 +208,18 @@ html {
     }
 }
 
-#editor-iconselector-top {
+#editor_iconselector_top {
     display: flex;
     flex-direction: row;
 }
 
-#editor-iconselector-top-search {
+#editor_iconselector_top_search {
     height: clamp(2vh, 20px, 2vw);
     max-height: clamp(2vh, 20px, 2vw);
     margin-bottom: clamp(1vh, 10px, 1vw);
 }
 
-#editor-iconselector-icons {
+#editor_iconselector_icons {
     display: flex;
     flex-wrap: wrap;
     overflow-y: auto;
@@ -249,22 +249,22 @@ html {
     box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
 }
 
-.editor-iconselector-icon:hover {
+.editor_iconselector_icon:hover {
     scale: 1.05;
 }
 
-.editor-iconselector-icon:active {
+.editor_iconselector_icon:active {
     scale: 0.95;
 }
 
-.editor-iconselector-icon-icon {
+.editor_iconselector_icon_icon {
     color: var(--default-text-color);
     font-size: clamp(3vh, 30px, 3vw);
     text-align: center;
     margin-top: clamp(0.3vh, 3px, 0.3vw);
 }
 
-.editor-iconselector-icon-text {
+.editor_iconselector_icon_text {
     color: var(--default-text-color);
     font-family: "Noto Sans Mono", "Courier New", monospace;
     font-size: clamp(1vh, 10px, 1vw);
@@ -272,7 +272,7 @@ html {
     user-select: none;
 }
 
-@keyframes show-rename {
+@keyframes show_rename {
     from {
         opacity: 0;
         scale: 0.8;
@@ -284,7 +284,7 @@ html {
     }
 }
 
-@keyframes hide-rename {
+@keyframes hide_rename {
     from {
         opacity: 1;
         scale: 1;
@@ -296,12 +296,12 @@ html {
     }
 }
 
-.show-rename {
-    animation: show-rename 0.2s ease-in-out forwards;
+.show_rename {
+    animation: show_rename 0.2s ease-in-out forwards;
 }
 
-.hide-rename {
-    animation: hide-rename 0.2s ease-in-out forwards;
+.hide_rename {
+    animation: hide_rename 0.2s ease-in-out forwards;
 }
 
 @media (min-width: 1000px) {
diff --git a/cardie/staticfiles/main/home.css b/cardie/staticfiles/main/home.css
index e732dfc..de50d35 100644
--- a/cardie/staticfiles/main/home.css
+++ b/cardie/staticfiles/main/home.css
@@ -5,7 +5,7 @@ html {
 @media (min-width: 1000px) {
     /* Large screens */
 
-    #home-top {
+    #home_top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -15,29 +15,29 @@ html {
         margin-top: clamp(5vh, 50px, 5vw);
     }
     
-    #home-top-text {
+    #home_top_text {
         margin-left: clamp(6vh, 60px, 6vw);
     }
     
-    #home-navigation {
+    #home_navigation {
         margin-top: clamp(1vh, 10px, 1vw);
         margin-left: clamp(12vh, 120px, 12vw);
         margin-bottom: clamp(2vh, 20px, 2vw);
     }
     
-    #home-wallet {
+    #home_wallet {
         margin-left: clamp(12vh, 120px, 12vw);
         display: flex;
         flex-direction: column;
     }
     
-    #home-cards {
+    #home_cards {
         margin-left: clamp(12vh, 120px, 12vw);
         display: flex;
         flex-direction: column;
     }
 
-    #home-top-image {
+    #home_top_image {
         width: clamp(30vh, 300px, 30vw);
         height: auto;
         transition: var(--default-transition);
@@ -48,7 +48,7 @@ html {
 @media (max-width: 1000px) {
     /* Small Screens */
 
-    #home-top {
+    #home_top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -58,29 +58,29 @@ html {
         margin-top: clamp(1vh, 10px, 1vw);
     }
     
-    #home-top-text {
+    #home_top_text {
         margin-left: clamp(2vh, 20px, 2vw);
     }
     
-    #home-navigation {
+    #home_navigation {
         margin-top: clamp(1vh, 10px, 1vw);
         margin-left: clamp(2vh, 20px, 2vw);
         margin-bottom: clamp(1vh, 10px, 1vw);
     }
     
-    #home-wallet {
+    #home_wallet {
         margin-left: clamp(2vh, 20px, 2vw);
         display: flex;
         flex-direction: column;
     }
     
-    #home-cards {
+    #home_cards {
         margin-left: clamp(2vh, 20px, 2vw);
         display: flex;
         flex-direction: column;
     }
 
-    #home-top-image {
+    #home_top_image {
         width: clamp(20vh, 200px, 20vw);
         height: auto;
         transition: var(--default-transition);
@@ -88,7 +88,7 @@ html {
     }
 }
 
-#home-top-image:hover {
+#home_top_image:hover {
     scale: 1.05;
 }
 
@@ -137,15 +137,15 @@ html {
     width: fit-content;
 }
 
-#home-top-profile {
+#home_top_profile {
     position: relative;
 }
 
-#home-top-username {
+#home_top_username {
     height: fit-content;
 }
 
-#home-top-profile-dropdown {
+#home_top_profile_dropdown {
     position: absolute;
     top: 30%;
 
@@ -158,7 +158,7 @@ html {
     width: fit-content;
 }
 
-#home-top-profile-dropdown > button {
+#home_top_profile_dropdown > button {
     white-space: nowrap;
 }
 
diff --git a/cardie/staticfiles/main/scripts/authentication/authentication.js b/cardie/staticfiles/main/scripts/authentication/authentication.js
index f6656a4..a92a3b4 100644
--- a/cardie/staticfiles/main/scripts/authentication/authentication.js
+++ b/cardie/staticfiles/main/scripts/authentication/authentication.js
@@ -14,18 +14,18 @@ try {
 
 function show_warning(warning) {
     log("WARNING", warning)
-    document.querySelector("#authentication-error > p").innerText = warning;
-    document.querySelector("#authentication-error").style.display = "flex";
+    document.querySelector("#authentication_error > p").innerText = warning;
+    document.querySelector("#authentication_error").style.display = "flex";
 
     setTimeout(function() {
-        document.querySelector("#authentication-error").classList.add("show");
+        document.querySelector("#authentication_error").classList.add("show");
     }, 100);
 }
 
 async function sign_in() {
     log("INFO", "Signing the user in...");
-    var username = document.querySelector("#signin-username").value;
-    var password = document.querySelector("#signin-password").value;
+    var username = document.querySelector("#signin_username").value;
+    var password = document.querySelector("#signin_password").value;
 
     if (temp_uuid) {
         var response = await fetch(server_ip + "/auth/signin", {
@@ -90,9 +90,9 @@ async function sign_in() {
 
 async function create_account() {
     log("INFO", "Creating an account for the user...");
-    var username = document.querySelector("#createaccount-username").value;
-    var password = document.querySelector("#createaccount-password").value;
-    var email = document.querySelector("#createaccount-email").value;
+    var username = document.querySelector("#createaccount_username").value;
+    var password = document.querySelector("#createaccount_password").value;
+    var email = document.querySelector("#createaccount_email").value;
 
     if (temp_uuid) {
         var response = await fetch(server_ip + "/auth/createaccount", {
@@ -171,35 +171,35 @@ async function create_account() {
 }
 
 function check_sign_in() {
-    document.querySelector("#signin-signin").disabled = !(
-        document.querySelector("#signin-username").value != "" && 
-        document.querySelector("#signin-password").value != ""
+    document.querySelector("#signin_signin").disabled = !(
+        document.querySelector("#signin_username").value != "" && 
+        document.querySelector("#signin_password").value != ""
     );
 }
 
 function check_create_account() {
-    document.querySelector("#createaccount-createaccount").disabled = !(
-        document.querySelector("#createaccount-username").value != "" && 
-        document.querySelector("#createaccount-password").value != "" && 
-        document.querySelector("#createaccount-email").value != ""
+    document.querySelector("#createaccount_createaccount").disabled = !(
+        document.querySelector("#createaccount_username").value != "" && 
+        document.querySelector("#createaccount_password").value != "" && 
+        document.querySelector("#createaccount_email").value != ""
     );
 }
 
-document.querySelector("#signin-signin").addEventListener("click", sign_in);
-document.querySelector("#createaccount-createaccount").addEventListener("click", create_account);
+document.querySelector("#signin_signin").addEventListener("click", sign_in);
+document.querySelector("#createaccount_createaccount").addEventListener("click", create_account);
 
-document.querySelector("#signin-username").addEventListener("input", check_sign_in);
-document.querySelector("#signin-password").addEventListener("input", check_sign_in);
-document.querySelector("#createaccount-username").addEventListener("input", check_create_account);
-document.querySelector("#createaccount-password").addEventListener("input", check_create_account);
-document.querySelector("#createaccount-email").addEventListener("input", check_create_account);
+document.querySelector("#signin_username").addEventListener("input", check_sign_in);
+document.querySelector("#signin_password").addEventListener("input", check_sign_in);
+document.querySelector("#createaccount_username").addEventListener("input", check_create_account);
+document.querySelector("#createaccount_password").addEventListener("input", check_create_account);
+document.querySelector("#createaccount_email").addEventListener("input", check_create_account);
 
-document.querySelector("#signin-signin").disabled = true;
-document.querySelector("#createaccount-createaccount").disabled = true;
+document.querySelector("#signin_signin").disabled = true;
+document.querySelector("#createaccount_createaccount").disabled = true;
 
 document.addEventListener("keyup", (event) => {
     if (event.code === "Enter") {
-        if (document.querySelector("#signin-box").style.display != "none") {
+        if (document.querySelector("#signin_box").style.display != "none") {
             sign_in();
             
         } else {
diff --git a/cardie/staticfiles/main/scripts/editor/icons.js b/cardie/staticfiles/main/scripts/editor/icons.js
index d4b5c44..6d0f257 100644
--- a/cardie/staticfiles/main/scripts/editor/icons.js
+++ b/cardie/staticfiles/main/scripts/editor/icons.js
@@ -21,7 +21,7 @@ function create_icon(icon) {
 
     itemsData.push(div_element);
 
-    document.querySelector("#editor-iconselector-icons").appendChild(div_element)
+    document.querySelector("#editor_iconselector_icons").appendChild(div_element)
 }
 
 function render_icons(icons) {
@@ -43,8 +43,8 @@ document.addEventListener("DOMContentLoaded", (event) => {
 
 // Function to render items
 const renderItems = (filteredItems) => {
-    document.querySelector("#editor-iconselector-icons").innerHTML = '';
-    filteredItems.forEach(item => document.querySelector("#editor-iconselector-icons").appendChild(item));
+    document.querySelector("#editor_iconselector_icons").innerHTML = '';
+    filteredItems.forEach(item => document.querySelector("#editor_iconselector_icons").appendChild(item));
 };
 
 // Function to sort items alphabetically by the icon attribute
@@ -59,7 +59,7 @@ const filterItems = (query) => {
 };
 
 // Event listener for the search box
-document.querySelector("#editor-iconselector-top-search").addEventListener('input', (e) => {
+document.querySelector("#editor_iconselector_top_search").addEventListener('input', (e) => {
     const query = e.target.value;
     const filteredItems = filterItems(query);
     const sortedItems = sortItems(filteredItems);
@@ -70,17 +70,17 @@ function show_iconselector(item) {
     icon_selected_item = item;
     show_background_blur();
 
-    document.querySelector("#editor-iconselector").style.display = "flex";
-    document.querySelector("#editor-iconselector").classList.remove("hide-iconselector");
-    document.querySelector("#editor-iconselector").classList.add("show-iconselector");
+    document.querySelector("#editor_iconselector").style.display = "flex";
+    document.querySelector("#editor_iconselector").classList.remove("hide-iconselector");
+    document.querySelector("#editor_iconselector").classList.add("show-iconselector");
 }
 
 function hide_iconselector() {
-    document.querySelector("#editor-iconselector").classList.add("hide-iconselector");
+    document.querySelector("#editor_iconselector").classList.add("hide-iconselector");
 
     setTimeout(function() {
-        document.querySelector("#editor-iconselector").classList.remove("show-iconselector");
-        document.querySelector("#editor-iconselector").style.display = "none";
+        document.querySelector("#editor_iconselector").classList.remove("show-iconselector");
+        document.querySelector("#editor_iconselector").style.display = "none";
         hide_background_blur();
     }, 500);
 }
@@ -96,6 +96,6 @@ function icon_clicked(event) {
     hide_iconselector();
 }
 
-document.querySelector("#editor-iconselector-top-close").addEventListener("click", (event) => {
+document.querySelector("#editor_iconselector_top_close").addEventListener("click", (event) => {
     hide_iconselector();
 });
\ No newline at end of file
diff --git a/cardie/staticfiles/main/scripts/editor/rename.js b/cardie/staticfiles/main/scripts/editor/rename.js
index 90536c0..a3c9b23 100644
--- a/cardie/staticfiles/main/scripts/editor/rename.js
+++ b/cardie/staticfiles/main/scripts/editor/rename.js
@@ -2,15 +2,15 @@ function show_rename() {
     show_background_blur();
 
     document.querySelector("#editor_rename").style.display = "flex";
-    document.querySelector("#editor_rename").classList.remove("hide-rename");
-    document.querySelector("#editor_rename").classList.add("show-rename");
+    document.querySelector("#editor_rename").classList.remove("hide_rename");
+    document.querySelector("#editor_rename").classList.add("show_rename");
 }
 
 function hide_rename() {
-    document.querySelector("#editor_rename").classList.add("hide-rename");
+    document.querySelector("#editor_rename").classList.add("hide_rename");
 
     setTimeout(function() {
-        document.querySelector("#editor_rename").classList.remove("show-rename");
+        document.querySelector("#editor_rename").classList.remove("show_rename");
         document.querySelector("#editor_rename").style.display = "none";
 
         hide_background_blur();
diff --git a/cardie/staticfiles/main/scripts/home/home.js b/cardie/staticfiles/main/scripts/home/home.js
index aaceeaf..f57d4f2 100644
--- a/cardie/staticfiles/main/scripts/home/home.js
+++ b/cardie/staticfiles/main/scripts/home/home.js
@@ -90,7 +90,7 @@ function create_home_card(uuid, name) {
 
     div.setAttribute("open", false);
 
-    document.querySelector("#home-cards").appendChild(div);
+    document.querySelector("#home_cards").appendChild(div);
 }
 
 function create_wallet_card(uuid, name) {
@@ -137,7 +137,7 @@ function create_wallet_card(uuid, name) {
 
     div.setAttribute("open", false);
 
-    document.querySelector("#home-wallet").appendChild(div);
+    document.querySelector("#home_wallet").appendChild(div);
 }
 
 function home_wallet_view(event) {
@@ -244,7 +244,7 @@ async function get_wallet() {
     });
 }
 
-document.querySelector("#home-top-image").addEventListener("click", (event) => {
+document.querySelector("#home_top_image").addEventListener("click", (event) => {
     window.location.href = server_ip;
 });