diff --git a/src/lib/components/common/Banner.svelte b/src/lib/components/common/Banner.svelte
index a64cc857ff..99efc97697 100644
--- a/src/lib/components/common/Banner.svelte
+++ b/src/lib/components/common/Banner.svelte
@@ -18,7 +18,7 @@
 		dismissible: true,
 		timestamp: Math.floor(Date.now() / 1000)
 	};
-	export let className = 'mx-4';
+	export let className = 'mx-2 px-2 rounded-lg';
 
 	export let dismissed = false;
 
@@ -46,7 +46,7 @@
 {#if !dismissed}
 	{#if mounted}
 		<div
-			class="{className} top-0 left-0 right-0 py-0.5 flex justify-center items-center relative border border-transparent text-gray-800 dark:text-gary-100 bg-white dark:bg-gray-900 backdrop-blur-xl z-30"
+			class="{className} top-0 left-0 right-0 py-1 flex justify-center items-center relative border border-transparent text-gray-800 dark:text-gary-100 bg-transparent backdrop-blur-xl z-30"
 			transition:fade={{ delay: 100, duration: 300 }}
 		>
 			<div class=" flex flex-col md:flex-row md:items-center flex-1 text-sm w-fit gap-1.5">