diff --git a/materialious/src/lib/components/settings/Interface.svelte b/materialious/src/lib/components/settings/Interface.svelte
index 7f2b7e2e..88cf7acc 100644
--- a/materialious/src/lib/components/settings/Interface.svelte
+++ b/materialious/src/lib/components/settings/Interface.svelte
@@ -35,6 +35,7 @@
 		themeColorStore
 	} from '../../store';
 	import { addToast } from '../Toast.svelte';
+	import { tick } from 'svelte';
 
 	let invidiousInstance = $state(get(instanceStore));
 	let region = $state(get(interfaceRegionStore));
@@ -54,9 +55,10 @@
 		if (!color.hex) return;
 		if (colorPickerDebounce) clearTimeout(colorPickerDebounce);
 
-		colorPickerDebounce = setTimeout(() => {
-			setAmoledTheme();
+		colorPickerDebounce = setTimeout(async () => {
 			themeColorStore.set(color.hex);
+			await tick();
+			setAmoledTheme();
 		}, 10);
 	}
 
@@ -451,7 +453,7 @@
 		--cp-input-color: var(--surface);
 		--cp-button-hover-color: var(--surface-variant);
 		--slider-width: 50px;
-		--picker-width: 60vw;
+		--picker-width: 45vw;
 		width: 100%;
 	}
 
diff --git a/materialious/src/lib/css/global.css b/materialious/src/lib/css/global.css
index f7c3f5a7..7cefd1cd 100644
--- a/materialious/src/lib/css/global.css
+++ b/materialious/src/lib/css/global.css
@@ -97,23 +97,22 @@ menu {
 }
 
 .color-picker .picker {
-	display: none;
+	display: none !important;
+}
+
+.color-picker .wrapper {
+	padding: 0 !important;
+	margin: 0 !important;
 }
 
 .color-picker .thumb {
-	height: 20px;
-	width: 20px;
-	opacity: 0.5;
-}
-
-.color-picker div {
-	margin: 0;
-	padding: 0;
-	width: 100%;
+	height: 20px !important;
+	width: 20px !important;
+	opacity: 0.5 !important;
 }
 
 .color-picker .track {
-	border-radius: 0.25rem;
+	border-radius: 0.25rem !important;
 }
 
 .color-picker .h {