diff --git a/src/front/cobalt.css b/src/front/cobalt.css
index ebc77223..a9aeca1e 100644
--- a/src/front/cobalt.css
+++ b/src/front/cobalt.css
@@ -107,7 +107,7 @@ a {
     color: var(--accent-subtext);
 }
 .switches::-webkit-scrollbar,
-#popup-content::-webkit-scrollbar {
+.popup-content::-webkit-scrollbar {
     display: none;
 }
 :focus-visible {
@@ -450,22 +450,22 @@ button:active,
 .popup.small.visible {
     transform: translate(-50%, -50%);
 }
-.popup.small #popup-header-contents,
+.popup.small .popup-header-contents,
 .popup.small .popup-content-inner,
-.popup.small #popup-header {
+.popup.small .popup-header {
     padding: 0;
 }
-.popup.small #popup-header {
+.popup.small .popup-header {
     position: relative;
     border: none;
 }
-.popup.small #popup-title {
+.popup.small .popup-title {
     margin-bottom: 0.6rem;
 }
 .popup.small .explanation {
     margin-bottom: 0.9rem;
 }
-#close-error {
+.close-error {
     background: var(--accent);
     color: var(--background);
 }
@@ -520,7 +520,7 @@ button:active,
     font-size: 1.1rem;
     padding-bottom: var(--padding-1);
 }
-#popup-desc,
+.popup-desc,
 .desc-error,
 #popup-info-desc {
     width: 100%;
@@ -533,7 +533,7 @@ button:active,
 .desc-error {
     padding-bottom: 1.5rem;
 }
-#popup-title {
+.popup-title {
     font-size: 1.5rem;
     line-height: 1.2em;
     display: flex;
@@ -541,11 +541,11 @@ button:active,
     margin-bottom: 0.4rem;
     margin-top: 0.4rem;
 }
-#popup-above-title {
+.popup-above-title {
     color: var(--accent-subtext);
     font-size: 0.8rem;
 }
-#popup-content {
+.popup-content {
     overflow-x: scroll;
     overflow-y: auto;
     height: 100%;
@@ -564,7 +564,7 @@ button:active,
 .bullpadding {
     padding-left: 0.58rem;
 }
-#popup-header {
+.popup-header {
     position: absolute;
     z-index: 999;
     padding-top: calc(env(safe-area-inset-top)/2 + 1.7rem);
@@ -646,16 +646,16 @@ button:active,
 .switch:focus {
     box-shadow: var(--inset-focus) inset;
 }
-#popup-tabs .switch {
+.popup-tabs .switch {
     background: none;
 }
-.desktop #popup-tabs .switch:hover,
-#popup-tabs .switch:active {
+.desktop .popup-tabs .switch:hover,
+.popup-tabs .switch:active {
     background: var(--accent-hover-transparent);
     box-shadow: 0 0 0 0.1rem var(--accent-highlight) inset;
 }
 .switch[data-enabled="true"],
-#popup-tabs .switch[data-enabled="true"] {
+.popup-tabs .switch[data-enabled="true"] {
     color: var(--background);
     background: var(--accent)!important;
     cursor: default;
@@ -693,20 +693,20 @@ button:active,
     padding: var(--gap-no-icon);
     overflow: clip;
 }
-#back-button {
+.back-button {
     padding: 0;
     background: none;
     max-width: 4rem;
     font-size: 1rem;
 }
-#back-button svg path,
+.back-button svg path,
 .collapse-indicator svg path {
     fill: var(--accent);
 }
 .popup-tab-content[data-enabled="false"] {
     display: none;
 }
-#popup-tabs {
+.popup-tabs {
     z-index: 999;
     bottom: 0;
     position: absolute;
@@ -823,7 +823,7 @@ button:active,
 }
 .popup-content-inner,
 .tab-content-settings,
-#popup-header-contents {
+.popup-header-contents {
     padding-left: 1rem;
     padding-right: 1rem;
 }
@@ -947,15 +947,15 @@ button:active,
 #bottom #paste,
 #footer .switch,
 #audioMode,
-#popup-content .switches,
+.popup-content .switches,
 .checkbox,
 .changelog-img,
 .changelog-banner,
-#close-error,
+.close-error,
 .changelog-tag-version,
 #download-switcher .switch,
 #popup-about .switch,
-#popup-tabs .switch,
+.popup-tabs .switch,
 .text-to-copy,
 .text-to-copy.text-backdrop,
 #filename-preview {
@@ -965,16 +965,16 @@ button:active,
     border-radius: 3px / 4px;
 }
 .popup,
-.scrollable #popup-content {
+.scrollable .popup-content {
     border-radius: 8px;
 }
-#popup-header .glass-bkg {
+.popup-header .glass-bkg {
     border-top-left-radius: 8px 9px;
     border-top-right-radius: 8px 9px;
     border-bottom: var(--accent-highlight) solid 0.1rem;
     top: -1px;
 }
-#popup-tabs .glass-bkg {
+.popup-tabs .glass-bkg {
     border-bottom-left-radius: 8px 9px;
     border-bottom-right-radius: 8px 9px;
     border-top: var(--accent-highlight) solid 0.1rem;
@@ -1103,12 +1103,12 @@ button:active,
         padding-top: calc(env(safe-area-inset-bottom)/2 + 1rem);
     }
     .popup,
-    #popup-header .glass-bkg,
-    #popup-tabs .glass-bkg,
+    .popup-header .glass-bkg,
+    .popup-tabs .glass-bkg,
     .glass-bkg.small {
         border-radius: 0;
     }
-    #popup-tabs .glass-bkg {
+    .popup-tabs .glass-bkg {
         bottom: 0;
     }
     .switches {
@@ -1141,13 +1141,13 @@ button:active,
         transform: none;
         transition: transform 210ms cubic-bezier(0.062, 0.82, 0.165, 1), opacity 130ms ease-in-out;
     }
-    .popup.small #popup-header {
+    .popup.small .popup-header {
         background: none;
     }
     .no-animation .popup.small {
         transition: none;
     }
-    #close-error {
+    .close-error {
         bottom: 3rem;
     }
     #picker-holder::-webkit-scrollbar {
@@ -1166,13 +1166,13 @@ button:active,
         max-height: 100%;
         box-shadow: none;
     }
-    #popup-tabs {
+    .popup-tabs {
         padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.5rem);
     }
     .popup-content-inner,
     .tab-content-settings,
     .popup-tabs-child,
-    #popup-header-contents {
+    .popup-header-contents {
         padding-left: 0.7rem;
         padding-right: 0.7rem;
     }
diff --git a/src/modules/pageRender/elements.js b/src/modules/pageRender/elements.js
index 308f9748..a677d2bc 100644
--- a/src/modules/pageRender/elements.js
+++ b/src/modules/pageRender/elements.js
@@ -59,27 +59,27 @@ export function popup(obj) {
         body = ``
         for (let i = 0; i < obj.body.length; i++) {
             if (obj.body[i]["text"].length > 0) {
-                classes = obj.body[i]["classes"] ? obj.body[i]["classes"] : []
+                classes = obj.body[i]["classes"] ?? []
                 if (i !== obj.body.length - 1 && !obj.body[i]["nopadding"]) {
                     classes.push("desc-padding")
                 }
-                body += obj.body[i]["raw"] ? obj.body[i]["text"] : `<div id="popup-desc" class="${classes.length > 0 ? classes.join(' ') : ''}">${obj.body[i]["text"]}</div>`
+                body += obj.body[i]["raw"] ? obj.body[i]["text"] : `<div class="${['popup-desc', ...classes].join(' ')}">${obj.body[i]["text"]}</div>`
             }
         }
     }
     return `
     ${obj.standalone ? `<div id="popup-${obj.name}" class="popup center${!obj.buttonOnly ? " box" : ''}${classes.length > 0 ? ' ' + classes.join(' ') : ''}">` : ''}
-        <div id="popup-header" class="popup-header">
-            <div id="popup-header-contents">
+        <div class="popup-header">
+            <div class="popup-header-contents">
                 ${obj.buttonOnly ? obj.header.emoji : ``}
-                ${obj.header.aboveTitle ? `<a id="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
-                ${obj.header.title ? `<div id="popup-title">${obj.header.title}</div>` : ''}
+                ${obj.header.aboveTitle ? `<a class="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
+                ${obj.header.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
                 ${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
             </div>
             ${!obj.buttonOnly ? `<div class="glass-bkg alone"></div>` : ''}
         </div>
-        <div id="popup-content" class="popup-content-inner">
-            ${body}${obj.buttonOnly ? `<button id="close-error" class="switch" onclick="popup('${obj.name}', 0)">${obj.buttonText}</button>` : ''}
+        <div class="popup-content popup-content-inner">
+            ${body}${obj.buttonOnly ? `<button class="close-error switch" onclick="popup('${obj.name}', 0)">${obj.buttonText}</button>` : ''}
         </div>
         ${classes.includes("small") ? `<div class="glass-bkg small"></div>` : ''}
     ${obj.standalone ? `</div>` : ''}`
@@ -87,7 +87,7 @@ export function popup(obj) {
 
 export function multiPagePopup(obj) {
     let tabs = `
-    <button id="back-button" class="switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}>
+    <button class="back-button switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}>
         ${backButtonSVG}
     </button>`;
 
@@ -99,16 +99,16 @@ export function multiPagePopup(obj) {
 
     return `
     <div id="popup-${obj.name}" class="popup center box scrollable">
-        <div id="popup-content">
-        ${obj.header ? `<div id="popup-header" class="popup-header">
-            <div id="popup-header-contents">
-                ${obj.header.aboveTitle ? `<a id="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
-                ${obj.header.title ? `<div id="popup-title">${obj.header.title}</div>` : ''}
+        <div class="popup-content">
+        ${obj.header ? `<div class="popup-header">
+            <div class="popup-header-contents">
+                ${obj.header.aboveTitle ? `<a class="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
+                ${obj.header.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
                 ${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
             </div>
             <div class="glass-bkg alone"></div>
         </div>` : ''}${tabContent}</div>
-        <div id="popup-tabs" class="switches popup-tabs">
+        <div class="switches popup-tabs">
             <div class="switches popup-tabs-child">${tabs}</div>
             <div class="glass-bkg alone"></div>
         </div>
@@ -131,7 +131,7 @@ export function collapsibleList(arr) {
 }
 export function popupWithBottomButtons(obj) {
     let tabs = `
-    <button id="back-button" class="switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}>
+    <button class="back-button switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}>
         ${backButtonSVG}
     </button>`
 
@@ -140,17 +140,17 @@ export function popupWithBottomButtons(obj) {
     }
     return `
     <div id="popup-${obj.name}" class="popup center box scrollable">
-        <div id="popup-content">
-       ${obj.header ? `<div id="popup-header" class="popup-header">
-            <div id="popup-header-contents">
-                ${obj.header.aboveTitle ? `<a id="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
-                ${obj.header.title ? `<div id="popup-title">${obj.header.title}</div>` : ''}
+        <div class="popup-content">
+       ${obj.header ? `<div class="popup-header">
+            <div class="popup-header-contents">
+                ${obj.header.aboveTitle ? `<a class="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
+                ${obj.header.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
                 ${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
                 ${obj.header.explanation ? `<div class="explanation">${obj.header.explanation}</div>` : ''}
             </div>
             <div class="glass-bkg alone"></div>
         </div>` : ''}${obj.content}</div>
-        <div id="popup-tabs" class="switches popup-tabs">
+        <div class="switches popup-tabs">
             <div id="picker-buttons" class="switches popup-tabs-child">${tabs}</div>
             <div class="glass-bkg alone"></div>
         </div>
@@ -171,7 +171,7 @@ export function socialLinks(lang) {
 }
 export function settingsCategory(obj) {
     return `<div id="settings-${obj.name}" class="settings-category">
-        <div class="category-title">${obj.title ? obj.title : obj.name}</div>
+        <div class="category-title">${obj.title ?? obj.name}</div>
         <div class="category-content">${obj.body}</div>
     </div>`
 }
diff --git a/src/modules/pageRender/onDemand.js b/src/modules/pageRender/onDemand.js
index ef005eb8..226ff6b4 100644
--- a/src/modules/pageRender/onDemand.js
+++ b/src/modules/pageRender/onDemand.js
@@ -20,11 +20,11 @@ export function changelogHistory() { // blockId 0
                 `width="${history[i]["banner"]["width"]}" ` +
                 `height="${history[i]["banner"]["height"]}" ` +
                 `onerror="this.style.opacity=0" loading="lazy">`+
-            `</img>
+            `
         </div>` : ''}
-        <div id="popup-desc" class="changelog-tags">${history[i]["version"]}</div>
-        <div id="popup-desc" class="changelog-subtitle">${history[i]["title"]}</div>
-        <div id="popup-desc" class="desc-padding">${history[i]["content"]}</div>`
+        <div class="popup-desc changelog-tags">${history[i]["version"]}</div>
+        <div class="popup-desc changelog-subtitle">${history[i]["title"]}</div>
+        <div class="popup-desc desc-padding">${history[i]["content"]}</div>`
     }
     render = cleanHTML(render);
     cache['0'] = render;