diff --git a/frontend/public/global.css b/frontend/public/global.css
index dd91401..a53103f 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -204,6 +204,12 @@ body {
 	float: left;
 }
 
+@media screen and (min-width: 768px) {
+	.modal-backdrop-opaque .modal .modal-footer {
+		background-color: var(--background-color-1);
+	}
+}
+
 @media screen and (max-width: 768px) {
 	.modal {
 		width: 100%;
diff --git a/frontend/src/components/overlays/Settings.svelte b/frontend/src/components/overlays/Settings.svelte
index a38e627..a4fff53 100644
--- a/frontend/src/components/overlays/Settings.svelte
+++ b/frontend/src/components/overlays/Settings.svelte
@@ -106,7 +106,7 @@
                 <span class="material-icons-outlined">alternate_email</span>
                 <span class="h5 top-bar-heading">{ $userInfoStore ? $userInfoStore.username : "" }</span>
                 <div class="account-buttons">
-                    <button class="button button-red" on:click="{ doLogout }">Log Out</button>
+                    <button class="button button-danger" on:click="{ doLogout }">Log Out</button>
                 </div>
             </div>