diff --git a/frontend/src/lib/components/Button.svelte b/frontend/src/lib/components/Button.svelte
index 8b511cb8d5..a889d3d4a9 100644
--- a/frontend/src/lib/components/Button.svelte
+++ b/frontend/src/lib/components/Button.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <button
-	class="{$$props.class} inline-flex items-center bg-blue-500 hover:bg-blue-700 text-white 
+	class="{$$props.class} inline-flex items-center bg-[#5e81ac] hover:bg-blue-700 text-white 
 	font-bold py-1 px-2 border rounded border-blue-500 hover:border-blue-700 w-min min-w-max 
 	text-sm {getCategoryClasses()}"
 	on:click
diff --git a/frontend/src/lib/components/CenteredModal.svelte b/frontend/src/lib/components/CenteredModal.svelte
index 454ac30c38..6bfaefb033 100644
--- a/frontend/src/lib/components/CenteredModal.svelte
+++ b/frontend/src/lib/components/CenteredModal.svelte
@@ -11,7 +11,7 @@
 	})
 </script>
 
-<div class="flex justify-center min-h-screen pt-10 relative">
+<div class="flex justify-center min-h-screen pt-10 relative bg-[#3b4252]">
 	<div class="w-10/12 md:w-7/12 lg:w-6/12 xl:4/12 m-auto z-10">
 		<div class="border rounded-md py-4 px-16 shadow-md bg-gray-50">
 			<h1 class="justify-center text-center font-medium pb-4">