diff --git a/wled00/data/index.css b/wled00/data/index.css
index 3c43e2519..f06dced24 100644
--- a/wled00/data/index.css
+++ b/wled00/data/index.css
@@ -1345,30 +1345,16 @@ TD .checkmark, TD .radiomark {
 	top: calc(var(--sti) + 42px);
 }
 
-.dialog:not(.hide)::after {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: var(--c-o);
-	content: "";
-	z-index: -1;
+dialog::backdrop {
+	backdrop-filter: blur(5px);
 }
-.dialog {
-	position: fixed;
-	z-index: 5;
-	top: 10%;
-	left: 0;
-	right: 0;
-	max-width: 280px;
+dialog {
 	max-height: 70%;
-	margin: auto;
-	padding: 12px 24px;
+	border: 0;
 	border-radius: 10px;
-	background-color: var(--c-5);
-	overflow: scroll;
+	background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.1)), var(--c-3);
 	box-shadow: 4px 4px 10px 4px var(--c-1);
+	color: var(--c-f);
 }
 
 #fxlist .lstI.sticky,
diff --git a/wled00/data/index.js b/wled00/data/index.js
index 90289b746..3fed6d20e 100644
--- a/wled00/data/index.js
+++ b/wled00/data/index.js
@@ -1616,9 +1616,9 @@ function setEffectParameters(idx)
 		// disable palette list
 		text += ' not used';
 		palw.style.display = "none";
-		// hide palette dialog if not available
-		if (gId("palw").lastElementChild.classList.contains("dialog")) {
-			gId("palw").lastElementChild.classList.add("hide");
+		// Close palette dialog if not available
+		if (gId("palw").lastElementChild.tagName == "DIALOG") {
+			gId("palw").lastElementChild.close();
 		}
 	}
 	pall.innerHTML = icon + text;
@@ -2285,9 +2285,9 @@ function setFX(ind = null)
 		d.querySelector(`#fxlist input[name="fx"][value="${ind}"]`).checked = true;
 	}
 
-	// Hide effect dialog in simplified UI
+	// Close effect dialog in simplified UI
 	if (simplifiedUI) {
-		gId("fx").lastElementChild.classList.add("hide");
+		gId("fx").lastElementChild.close();
 	}
 
 	var obj = {"seg": {"fx": parseInt(ind), "fxdef": cfg.comp.fxdef}}; // fxdef sets effect parameters to default values
@@ -2302,9 +2302,9 @@ function setPalette(paletteId = null)
 		d.querySelector(`#pallist input[name="palette"][value="${paletteId}"]`).checked = true;
 	}
 
-	// Hide palette dialog in simplified UI
+	// Close palette dialog in simplified UI
 	if (simplifiedUI) {
-		gId("palw").lastElementChild.classList.add("hide");
+		gId("palw").lastElementChild.close();
 	}
 
 	var obj = {"seg": {"pal": paletteId}};
@@ -3059,7 +3059,7 @@ function simplifyUI() {
 	// Create dropdown dialog
 	function createDropdown(id, buttonText, dialogElements = null) {
 		// Create dropdown dialog
-		const dialog = document.createElement("div");
+		const dialog = document.createElement("dialog");
 		// Move every dialogElement to the dropdown dialog or if none are given, move all children of the element with the given id
 		if (dialogElements) {
 			dialogElements.forEach((e) => {
@@ -3070,7 +3070,6 @@ function simplifyUI() {
 				dialog.appendChild(gId(id).firstChild);
 			}
 		}
-		dialog.classList.add("hide", "dialog");
 
 		// Create button for the dropdown
 		const btn = document.createElement("button");
@@ -3079,7 +3078,14 @@ function simplifyUI() {
 		btn.innerText = buttonText;
 		function toggleDialog(e) {
 			if (e.target != btn && e.target != dialog) return;
-			dialog.classList.toggle("hide");
+			if (dialog.open) {
+				dialog.close();
+				return;
+			}
+			// Prevent autofocus on dialog open
+			dialog.inert = true;
+			dialog.showModal();
+			dialog.inert = false;
 			clean(dialog.firstElementChild.children[1]);
 			dialog.scrollTop = 0;
 		};