diff --git a/src/Moonglade.Web/Pages/Settings/Notification.cshtml b/src/Moonglade.Web/Pages/Settings/Notification.cshtml
index f0f301310..9b67f9411 100644
--- a/src/Moonglade.Web/Pages/Settings/Notification.cshtml
+++ b/src/Moonglade.Web/Pages/Settings/Notification.cshtml
@@ -25,6 +25,7 @@
     </script>
 }
 @{
+    ViewBag.ThemeSwitchReady = true;
     var settings = BlogConfig.NotificationSettings;
 }
 
@@ -48,7 +49,7 @@
                     }
                     else
                     {
-                        <div class="settings-entry row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
+                        <div class="settings-entry row align-items-center py-3 px-2 rounded-3 shadow-sm border mb-2">
                             <div class="col-auto">
                                 <i class="bi-link settings-entry-icon"></i>
                             </div>
@@ -61,7 +62,7 @@
                         </div>
                     }
 
-                    <div class="settings-entry row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
+                    <div class="settings-entry row align-items-center py-3 px-2 rounded-3 shadow-sm border mb-2">
                         <div class="col-auto">
                             <i class="bi-pen settings-entry-icon"></i>
                         </div>
@@ -73,7 +74,7 @@
                         </div>
                     </div>
 
-                    <div class="settings-entry row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
+                    <div class="settings-entry row align-items-center py-3 px-2 rounded-3 shadow-sm border mb-2">
                         <div class="col-auto">
                             <i class="bi-envelope settings-entry-icon"></i>
                         </div>
@@ -92,7 +93,7 @@
                 <div>
                     <h4 class="admin-subtitle fw-bold mb-2">@SharedLocalizer["Notification Options"]</h4>
 
-                    <div class="settings-entry row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
+                    <div class="settings-entry row align-items-center py-3 px-2 rounded-3 shadow-sm border mb-2">
                         <div class="col-auto">
                             <i class="bi-envelope settings-entry-icon"></i>
                         </div>
@@ -107,7 +108,7 @@
                         </div>
                     </div>
 
-                    <div class="settings-entry row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
+                    <div class="settings-entry row align-items-center py-3 px-2 rounded-3 shadow-sm border mb-2">
                         <div class="col-auto">
                             <i class="bi-chat-left settings-entry-icon"></i>
                         </div>
@@ -122,7 +123,7 @@
                         </div>
                     </div>
 
-                    <div class="settings-entry row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
+                    <div class="settings-entry row align-items-center py-3 px-2 rounded-3 shadow-sm border mb-2">
                         <div class="col-auto">
                             <i class="bi-reply settings-entry-icon"></i>
                         </div>
diff --git a/src/Moonglade.Web/wwwroot/css/admin.css b/src/Moonglade.Web/wwwroot/css/admin.css
index 8c9b7cec5..8789ded0c 100644
--- a/src/Moonglade.Web/wwwroot/css/admin.css
+++ b/src/Moonglade.Web/wwwroot/css/admin.css
@@ -293,6 +293,7 @@ div.mce-fullscreen {
 .settings-entry {
     margin-left: 0;
     margin-right: 0;
+    background-color: var(--bs-white);
 }
 
 .tags-dropdown .tagify__dropdown__item {
@@ -359,4 +360,8 @@ div.mce-fullscreen {
 
 [data-bs-theme="dark"] .admin-nav-section .list-group-item:hover {
     background-color: var(--bs-body-bg);
+}
+
+[data-bs-theme="dark"] .settings-entry {
+    background-color: var(--bs-body-bg);
 }
\ No newline at end of file