diff --git a/src/manager/commands/menuManager.ts b/src/manager/commands/menuManager.ts
index 69e1339..1dd9033 100644
--- a/src/manager/commands/menuManager.ts
+++ b/src/manager/commands/menuManager.ts
@@ -40,14 +40,13 @@ abstract class Base extends CommandManagerBase {
 		commandList: CommandIconPair[]
 	): (_item: MenuItem) => void {
 		return (item: MenuItem) => {
-			item.dom.addClass("cmdr");
+			item.dom.addClass("cmdr", "cmdr-menu-item");
 			item.dom.style.color =
 				cmdPair.color === "#000000" || cmdPair.color === undefined
 					? "inherit"
 					: cmdPair.color;
 			item.setSection("cmdr");
 
-			item.dom.style.display = "flex";
 			const optionEl = createDiv({
 				cls: "cmdr-menu-more-options",
 			});
@@ -117,10 +116,10 @@ abstract class Base extends CommandManagerBase {
 
 			let isRemovable = false;
 			const setNormal = (): void => {
-				optionEl.style.display = "none";
+				optionEl.removeClass("is-visible");
 			};
 			const setRemovable = (): void => {
-				optionEl.style.display = "block";
+				optionEl.addClass("is-visible");
 			};
 			const removeMenu = async (): Promise<void> => {
 				item.dom.addClass("cmdr-removing");
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 5176d03..49f9494 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -45,6 +45,10 @@
 	margin-bottom: -18px;
 }
 
+.cmdr-menu-item {
+	display: flex;
+}
+
 .cmdr-menu-more-options {
 	color: var(--text-muted);
 	position: absolute;
@@ -52,11 +56,37 @@
 	padding-top: 2px;
 	transform: scale(0.9);
 	transition: all 150ms ease;
+	display: none;
+	&.is-visible {
+		display: block;
+	}
 	&:hover {
 		color: var(--text-primary);
 	}
 }
 
+.cmdr-confirm-delete-modal {
+	z-index: 99;
+}
+
+.cmdr-hide-suggestions {
+	display: none;
+}
+
+.cmdr-name-input-wrapper-parent {
+	display: block;
+}
+
+.cmdr-confetti-canvas {
+	position: fixed;
+	width: 100vw;
+	height: 100vh;
+	top: 0;
+	left: 0;
+	pointer-events: none;
+	z-index: 100;
+}
+
 .cmdr-mobile .cmdr-credits {
 	place-content: center;
 }
diff --git a/src/ui/chooseCustomNameModal.ts b/src/ui/chooseCustomNameModal.ts
index c41a080..6f3264f 100644
--- a/src/ui/chooseCustomNameModal.ts
+++ b/src/ui/chooseCustomNameModal.ts
@@ -9,7 +9,7 @@ export default class ChooseCustomNameModal extends SuggestModal<string> {
 	) {
 		super(plugin.app);
 		this.setPlaceholder(t("Use a custom name"));
-		this.resultContainerEl.style.display = "none";
+		this.resultContainerEl.addClass("cmdr-hide-suggestions");
 
 		this.setInstructions([
 			{
@@ -34,7 +34,7 @@ export default class ChooseCustomNameModal extends SuggestModal<string> {
 		const wrapper = createDiv({ cls: "cmdr-name-input-wrapper" });
 		this.inputEl.parentNode?.insertBefore(wrapper, this.inputEl);
 		wrapper.appendChild(this.inputEl);
-		wrapper.parentElement!.style.display = "block";
+		wrapper.parentElement!.addClass("cmdr-name-input-wrapper-parent");
 
 		const btn = createEl("button", { text: t("Save"), cls: "mod-cta" });
 		btn.onclick = (e): void => this.selectSuggestion(this.inputEl.value, e);
diff --git a/src/ui/confirmDeleteModal.ts b/src/ui/confirmDeleteModal.ts
index 1cf9e16..a3a91f4 100644
--- a/src/ui/confirmDeleteModal.ts
+++ b/src/ui/confirmDeleteModal.ts
@@ -13,7 +13,7 @@ export default class ConfirmDeleteModal extends Modal {
 
 	public async onOpen(): Promise<void> {
 		this.titleEl.innerText = t("Remove Command");
-		this.containerEl.style.zIndex = "99";
+		this.containerEl.addClass("cmdr-confirm-delete-modal");
 		render(h(confirmDeleteComponent, { modal: this }), this.contentEl);
 	}
 
diff --git a/src/util.tsx b/src/util.tsx
index 5ab0b57..cc6f75b 100644
--- a/src/util.tsx
+++ b/src/util.tsx
@@ -97,17 +97,10 @@ export function updateHiderStylesheet(settings: CommanderSettings): void {
 }
 
 export async function showConfetti({ target }: MouseEvent): Promise<void> {
-	const myCanvas = activeDocument.createElement("canvas");
+	const myCanvas = activeDocument.createEl("canvas", {
+		cls: "cmdr-confetti-canvas",
+	});
 	activeDocument.body.appendChild(myCanvas);
-	myCanvas.style.position = "fixed";
-	myCanvas.style.width = "100vw";
-	myCanvas.style.height = "100vh";
-	myCanvas.style.top = "0px";
-	myCanvas.style.left = "0px";
-	//@ts-ignore
-	myCanvas.style["pointer-events"] = "none";
-	//@ts-ignore
-	myCanvas.style["z-index"] = "100";
 
 	const myConfetti = confetti.create(myCanvas, {
 		resize: true,