diff --git a/server/ui-src/views/MailboxView.vue b/server/ui-src/views/MailboxView.vue
index 90fad61..7bed109 100644
--- a/server/ui-src/views/MailboxView.vue
+++ b/server/ui-src/views/MailboxView.vue
@@ -176,7 +176,7 @@ export default {
 </script>
 
 <template>
-	<div class="navbar navbar-expand-lg navbar-dark row flex-shrink-0 bg-primary text-white d-print-none">
+	<div class="navbar navbar-expand-lg row flex-shrink-0 bg-primary text-white d-print-none" data-bs-theme="dark">
 		<div class="col-xl-2 col-md-3 col-auto pe-0">
 			<RouterLink to="/" class="navbar-brand text-white me-0" @click="reloadMailbox">
 				<img :src="resolve('/mailpit.svg')" alt="Mailpit" />
diff --git a/server/ui-src/views/MessageView.vue b/server/ui-src/views/MessageView.vue
index 0fc20fb..efd2fb9 100644
--- a/server/ui-src/views/MessageView.vue
+++ b/server/ui-src/views/MessageView.vue
@@ -463,7 +463,7 @@ export default {
 </script>
 
 <template>
-	<div class="navbar navbar-expand-lg navbar-dark row flex-shrink-0 bg-primary text-white d-print-none">
+	<div class="navbar navbar-expand-lg row flex-shrink-0 bg-primary text-white d-print-none" data-bs-theme="dark">
 		<div class="d-none d-xl-block col-xl-3 col-auto pe-0">
 			<RouterLink to="/" class="navbar-brand text-white me-0" @click="pagination.start = 0">
 				<img :src="resolve('/mailpit.svg')" alt="Mailpit" />
diff --git a/server/ui-src/views/SearchView.vue b/server/ui-src/views/SearchView.vue
index 16a3d32..447ae16 100644
--- a/server/ui-src/views/SearchView.vue
+++ b/server/ui-src/views/SearchView.vue
@@ -124,7 +124,7 @@ export default {
 </script>
 
 <template>
-	<div class="navbar navbar-expand-lg navbar-dark row flex-shrink-0 bg-primary text-white d-print-none">
+	<div class="navbar navbar-expand-lg row flex-shrink-0 bg-primary text-white d-print-none" data-bs-theme="dark">
 		<div class="col-xl-2 col-md-3 col-auto pe-0">
 			<RouterLink to="/" class="navbar-brand text-white me-0" @click="pagination.start = 0">
 				<img :src="resolve('/mailpit.svg')" alt="Mailpit" />