diff --git a/ts/modules/accounts.ts b/ts/modules/accounts.ts
index 66139cb..8fadba1 100644
--- a/ts/modules/accounts.ts
+++ b/ts/modules/accounts.ts
@@ -130,12 +130,12 @@ class user implements User {
         const matrix = this._matrixID != "";
         if (!telegram && !discord && !matrix) return;
         let innerHTML = `
-        <i class="icon ri-settings-2-line ml-half dropdown-button"></i>
+        <i class="icon ri-settings-2-line ml-2 dropdown-button"></i>
         <div class="dropdown manual">
             <div class="dropdown-display lg">
                 <div class="card ~neutral @low">
                     <span class="supra sm">${window.lang.strings("contactThrough")}</span>
-                    <label class="row switch pb-4 mt-half">
+                    <label class="row switch pb-4 mt-2">
                         <input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-email">
                         </span>Email</span>
                     </label>
@@ -381,7 +381,7 @@ class user implements User {
         let innerHTML = `
             <td><input type="checkbox" value=""></td>
             <td><div class="table-inline"><span class="accounts-username"></span> <span class="accounts-admin"></span> <span class="accounts-disabled"></span></span></td>
-            <td><div class="table-inline"><i class="icon ri-edit-line accounts-email-edit"></i><span class="accounts-email-container ml-half"></span></div></td>
+            <td><div class="table-inline"><i class="icon ri-edit-line accounts-email-edit"></i><span class="accounts-email-container ml-2"></span></div></td>
         `;
         if (window.telegramEnabled) {
             innerHTML += `
@@ -423,10 +423,10 @@ class user implements User {
             if (this._emailEditButton.classList.contains("ri-edit-line")) {
                 this._email.innerHTML = emailEditor;
                 this._email.querySelector("input").value = this._emailAddress;
-                this._email.classList.remove("ml-half");
+                this._email.classList.remove("ml-2");
             } else {
                 this._email.textContent = this._emailAddress;
-                this._email.classList.add("ml-half");
+                this._email.classList.add("ml-2");
             }
             this._emailEditButton.classList.toggle("ri-check-line");
             this._emailEditButton.classList.toggle("ri-edit-line");
@@ -938,7 +938,7 @@ export class accountsList {
             dList.textContent = '';
             for (let name of list) {
                 const el = document.createElement("div") as HTMLDivElement;
-                el.classList.add("flex-expand", "ellipsis", "mt-half");
+                el.classList.add("flex-expand", "ellipsis", "mt-2");
                 el.innerHTML = `
                 <span class="button ~neutral sm full-width accounts-announce-template-button">${name}</span><span class="button ~critical fr ml-4 accounts-announce-template-delete">&times;</span>
                 `;
diff --git a/ts/modules/common.ts b/ts/modules/common.ts
index f0159fb..6b0ea74 100644
--- a/ts/modules/common.ts
+++ b/ts/modules/common.ts
@@ -104,7 +104,7 @@ export class notificationBox implements NotificationBox {
 
     private _error = (message: string): HTMLElement => {
         const noti = document.createElement('aside');
-        noti.classList.add("aside", "~critical", "@low", "mt-half", "notification-error");
+        noti.classList.add("aside", "~critical", "@low", "mt-2", "notification-error");
         let error = "";
         if (window.lang) {
             error = window.lang.strings("error") + ":"
@@ -120,7 +120,7 @@ export class notificationBox implements NotificationBox {
     
     private _positive = (bold: string, message: string): HTMLElement => {
         const noti = document.createElement('aside');
-        noti.classList.add("aside", "~positive", "@low", "mt-half", "notification-positive");
+        noti.classList.add("aside", "~positive", "@low", "mt-2", "notification-positive");
         noti.innerHTML = `<strong>${bold}</strong> ${message}`;
         const closeButton = document.createElement('span') as HTMLSpanElement;
         closeButton.classList.add("button", "~positive", "@low", "ml-4");
diff --git a/ts/modules/invites.ts b/ts/modules/invites.ts
index 3de724c..69008d4 100644
--- a/ts/modules/invites.ts
+++ b/ts/modules/invites.ts
@@ -251,7 +251,7 @@ class DOMInvite implements Invite {
 
         this._header = document.createElement('div') as HTMLDivElement;
         this._container.appendChild(this._header);
-        this._header.classList.add("card", "~neutral", "@low", "inv-header", "elem-pad", "no-pad", "flex-expand", "row", "mt-half", "overflow-y");
+        this._header.classList.add("card", "~neutral", "@low", "inv-header", "elem-pad", "no-pad", "flex-expand", "row", "mt-2", "overflow-y");
 
         this._codeArea = document.createElement('div') as HTMLDivElement;
         this._header.appendChild(this._codeArea);
@@ -304,7 +304,7 @@ class DOMInvite implements Invite {
 
         this._details = document.createElement('div') as HTMLDivElement;
         this._container.appendChild(this._details);
-        this._details.classList.add("card", "~neutral", "@low", "mt-half", "no-pad", "inv-details");
+        this._details.classList.add("card", "~neutral", "@low", "mt-2", "no-pad", "inv-details");
         const detailsInner = document.createElement('div') as HTMLDivElement;
         this._details.appendChild(detailsInner);
         detailsInner.classList.add("inv-row", "flex-expand", "row", "elem-pad", "align-top");
@@ -425,7 +425,7 @@ export class inviteList implements inviteList {
             this._list.classList.add("empty");
             this._list.innerHTML = `
             <div class="inv inv-empty">
-                <div class="card ~neutral @low inv-header flex-expand mt-half">
+                <div class="card ~neutral @low inv-header flex-expand mt-2">
                     <div class="inv-codearea">
                         <span class="code monospace">${window.lang.strings("inviteNoInvites")}</span>
                     </div>
diff --git a/ts/modules/lang.ts b/ts/modules/lang.ts
index ebface0..aba0951 100644
--- a/ts/modules/lang.ts
+++ b/ts/modules/lang.ts
@@ -77,7 +77,7 @@ export const loadLangSelector = (page: string) => {
             const list = document.getElementById("lang-list") as HTMLDivElement;
             let innerHTML = '';
             for (let code in req.response) {
-                innerHTML += `<a href="?lang=${code}" class="button input ~neutral field mb-half lang-link">${req.response[code]}</a>`;
+                innerHTML += `<a href="?lang=${code}" class="button input ~neutral field mb-2 lang-link">${req.response[code]}</a>`;
             }
             list.innerHTML = innerHTML;
         }
diff --git a/ts/modules/profiles.ts b/ts/modules/profiles.ts
index a03cf50..39ad52c 100644
--- a/ts/modules/profiles.ts
+++ b/ts/modules/profiles.ts
@@ -23,10 +23,10 @@ class profile implements Profile {
     get admin(): boolean { return this._adminChip.classList.contains("chip"); }
     set admin(state: boolean) {
         if (state) {
-            this._adminChip.classList.add("chip", "~info", "ml-half");
+            this._adminChip.classList.add("chip", "~info", "ml-2");
             this._adminChip.textContent = "Admin";
         } else {
-            this._adminChip.classList.remove("chip", "~info", "ml-half");
+            this._adminChip.classList.remove("chip", "~info", "ml-2");
             this._adminChip.textContent = "";
         }
     }
diff --git a/ts/modules/settings.ts b/ts/modules/settings.ts
index b69a144..5559069 100644
--- a/ts/modules/settings.ts
+++ b/ts/modules/settings.ts
@@ -109,7 +109,7 @@ class DOMInput {
                 <i class="icon ri-information-line"></i>
                 <span class="content sm"></span>
             </div>
-            <input type="${inputType}" class="input ~neutral @low mt-half mb-half">
+            <input type="${inputType}" class="input ~neutral @low mt-2 mb-2">
         </label>
         `;
         this._tooltip = this._container.querySelector("div.setting-tooltip") as HTMLDivElement;
@@ -263,7 +263,7 @@ class DOMBool implements SBool {
         this._container = document.createElement("div");
         this._container.classList.add("setting");
         this._container.innerHTML = `
-        <label class="switch mb-half">
+        <label class="switch mb-2">
             <input type="checkbox">
             <span class="setting-label"></span> <span class="setting-required"></span> <span class="setting-restart"></span>
             <div class="setting-tooltip tooltip right unfocused">
@@ -403,7 +403,7 @@ class DOMSelect implements SSelect {
                 <i class="icon ri-information-line"></i>
                 <span class="content sm"></span>
             </div>
-            <div class="select ~neutral @low mt-half mb-half">
+            <div class="select ~neutral @low mt-2 mb-2">
                 <select class="settings-select"></select>
             </div>
         </label>
@@ -549,7 +549,7 @@ export class settingsList {
         this._sections[name] = section;
         this._panel.appendChild(this._sections[name].asElement());
         const button = document.createElement("span") as HTMLSpanElement;
-        button.classList.add("button", "~neutral", "@low", "settings-section-button", "mb-half");
+        button.classList.add("button", "~neutral", "@low", "settings-section-button", "mb-2");
         button.textContent = s.meta.name;
         if (subButton) { button.appendChild(subButton); }
         button.onclick = () => { this._showPanel(name); };