diff --git a/frontend/src/routes/account/settings/security/backup_codes.svelte b/frontend/src/routes/account/settings/security/backup_codes.svelte
index 6dc9a7d..55a8189 100644
--- a/frontend/src/routes/account/settings/security/backup_codes.svelte
+++ b/frontend/src/routes/account/settings/security/backup_codes.svelte
@@ -26,13 +26,15 @@
 <div class="w-screen h-screen fixed top-0 left-0 p-48 z-30 bg-black bg-opacity-50">
 	<div class="w-full h-full">
 		<button
-			class="bg-gray-200 px-2 py-1 rounded-t-lg hover:bg-gray-300 transition"
+			class="bg-gray-200 dark:bg-gray-900 px-2 py-1 rounded-t-lg hover:bg-gray-300 transition"
 			on:click={() => {
 				backup_code = undefined;
 			}}
 			>Close
 		</button>
-		<div class="bg-white rounded-b-lg rounded-tr-lg w-full h-full flex flex-col">
+		<div
+			class="bg-white dark:bg-gray-700 rounded-b-lg rounded-tr-lg w-full h-full flex flex-col"
+		>
 			<h2 class="text-3xl m-auto">Your Backup-Code</h2>
 			<p
 				class="select-all font-mono text-xl m-auto"
diff --git a/frontend/src/routes/account/settings/security/totp_setup.svelte b/frontend/src/routes/account/settings/security/totp_setup.svelte
index fdd4bb7..3630a0d 100644
--- a/frontend/src/routes/account/settings/security/totp_setup.svelte
+++ b/frontend/src/routes/account/settings/security/totp_setup.svelte
@@ -17,13 +17,13 @@
 <div class="w-screen h-screen fixed top-0 left-0 p-48 z-30 bg-black bg-opacity-50">
 	<div class="w-full h-full">
 		<button
-			class="bg-gray-200 px-2 py-1 rounded-t-lg hover:bg-gray-300 transition"
+			class="bg-gray-200 dark:bg-gray-900 px-2 py-1 rounded-t-lg hover:bg-gray-300 transition"
 			on:click={() => {
 				totp_data = undefined;
 			}}
 			>Close
 		</button>
-		<div class="bg-white rounded-b-lg rounded-tr-lg w-full h-full">
+		<div class="bg-white dark:bg-gray-700 rounded-b-lg rounded-tr-lg w-full h-full">
 			<div class="grid grid-cols-3 w-full h-full">
 				<div class="flex flex-col justify-center w-full h-5/6">
 					<span class="m-auto" />