diff --git a/deemix.css b/deemix.css
index e924aba..fae62ec 100644
--- a/deemix.css
+++ b/deemix.css
@@ -1,55 +1,21 @@
-<!DOCTYPE html>
-<html class="h-screen" data-theme="dark" dir="ltr" lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<title>deemix</title>
-		<link href="favicon.ico" rel="shortcut icon" />
-		<meta
-			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0"
-			name="viewport"
-		/>
-		<style>
-			body {
-				background: hsl(240, 10%, 8%);
-				color: hsl(0, 0%, 93%);
-			}
-			#missingBundle {
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-				margin: auto;
-				width: 50%;
-				padding: 24px;
-				text-align: center;
-				font-size: 1.2em;
-				font-family: sans-serif;
-				background-color: hsl(240, 12%, 16%);
-				border-radius: 10px;
-				display: none;
-			}
-		</style>
+main {
+    background: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
+}
 
-		<script>
-			if (localStorage.getItem('selectedTheme')) {
-				document.documentElement.setAttribute('data-theme', localStorage.getItem('selectedTheme'))
-			}
-		</script>
-	</head>
+:root[data-theme="dark"] {
+    --darkreader-bg--main-background: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
+    --darkreader-bg--secondary-background: #202020;
+    --darkreader-border--secondary-background: #7e7568;
+    --darkreader-bg--foreground: #222526;
+    --darkreader-text--foreground: #dddad5;
+    --darkreader-border--foreground: #353a3c;
+    --darkreader-bg--panels-background: #15151c;
+    --darkreader-bg--table-bg: #0f1011;
+    --darkreader-bg--table-zebra: #13131a;
+    --darkreader-bg--table-highlight: #2a2e2f;
+    --darkreader-border--table-highlight: #7a7164;
+}
+.bg-panels-bg {
+    background: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
+}
 
-	<body class="w-full h-full overflow-hidden font-sans bg-background-main text-foreground">
-		<div id="app"></div>
-		<p id="missingBundle">
-			If you're reading this it means that <code>js/bundle.js</code> isn't loading correctly.<br/>
-			Make sure the file is present, if not build the webui.
-		</p>
-	</body>
-
-	<script>
-		setTimeout(()=>{
-			let missingBundle = document.getElementById('missingBundle')
-			if (missingBundle) missingBundle.style.display = 'block'
-		}, 3000)
-	</script>
-	<script src="js/bundle.js"></script>
-</html>
