diff --git a/server/ui-src/App.vue b/server/ui-src/App.vue
index 71e2a3c..e7672ec 100644
--- a/server/ui-src/App.vue
+++ b/server/ui-src/App.vue
@@ -311,7 +311,7 @@ export default {
 </script>
 
 <template>
-	<div class="navbar navbar-expand-lg navbar-light row flex-shrink-0 bg-light">
+	<div class="navbar navbar-expand-lg navbar-light row flex-shrink-0 bg-light shadow-sm">
 		<div class="col-lg-2 col-md-3 col-auto">
 			<a class="navbar-brand" href="#" v-on:click="reloadMessages">
 				<img src="mailpit.svg" alt="Mailpit">
diff --git a/server/ui-src/assets/styles.scss b/server/ui-src/assets/styles.scss
index 5628896..15c78b0 100644
--- a/server/ui-src/assets/styles.scss
+++ b/server/ui-src/assets/styles.scss
@@ -1,16 +1,18 @@
-// @import "../../../node_modules/bootstrap-icons"; ///scss/root";
-
 @import "bootstrap";
 
 [v-cloak] {
     display: none !important;
 }
 
-.navbar-brand {
-    color: #2d4a5d;
+.navbar {
+    z-index: 99;
 
-    img {
-        width: 40px;
+    .navbar-brand {
+        color: #2d4a5d;
+
+        img {
+            width: 40px;
+        }
     }
 }
 
@@ -25,7 +27,6 @@
 }
 
 .message.read:not(.active) {
-    // background: $gray-100;
     color: $gray-500;
 }
 
@@ -52,3 +53,7 @@
         vertical-align: top;
     }
 }
+
+.list-group-item:first-child {
+    border-top: 0;
+}