diff --git a/server/ui-src/App.vue b/server/ui-src/App.vue
index 0ebdadb..df45da1 100644
--- a/server/ui-src/App.vue
+++ b/server/ui-src/App.vue
@@ -505,34 +505,33 @@ export default {
 </script>
 
 <template>
-	<div class="navbar navbar-expand-lg navbar-light row flex-shrink-0 bg-light shadow-sm">
+	<div class="navbar navbar-expand-lg navbar-dark row flex-shrink-0 bg-primary text-white">
 		<div class="col-lg-2 col-md-3 d-none d-md-block">
-			<a class="navbar-brand" href="#" v-on:click="reloadMessages">
+			<a class="navbar-brand text-white" href="#" v-on:click="reloadMessages">
 				<img src="mailpit.svg" alt="Mailpit">
 				<span class="ms-2">Mailpit</span>
 			</a>
 		</div>
 
 		<div class="col col-md-9 col-lg-10" v-if="message">
-			<a class="btn btn-outline-secondary me-4 px-3" href="#" v-on:click="message=false"
-				title="Return to messages">
+			<a class="btn btn-outline-light me-4 px-3" href="#" v-on:click="message=false" title="Return to messages">
 				<i class="bi bi-arrow-return-left"></i>
 			</a>
-			<button class="btn btn-outline-secondary me-2" title="Mark unread" v-on:click="markUnread">
+			<button class="btn btn-outline-light me-2" title="Mark unread" v-on:click="markUnread">
 				<i class="bi bi-eye-slash"></i> <span class="d-none d-md-inline">Mark unread</span>
 			</button>
-			<button class="btn btn-outline-secondary me-2" title="Delete message" v-on:click="deleteMessages">
+			<button class="btn btn-outline-light me-2" title="Delete message" v-on:click="deleteMessages">
 				<i class="bi bi-trash-fill"></i> <span class="d-none d-md-inline">Delete</span>
 			</button>
-			<a class="btn btn-outline-secondary float-end" :class="messageNext ? '':'disabled'" :href="'#'+messageNext"
+			<a class="btn btn-outline-light float-end" :class="messageNext ? '':'disabled'" :href="'#'+messageNext"
 				title="View next message">
 				<i class="bi bi-caret-right-fill"></i>
 			</a>
-			<a class="btn btn-outline-secondary ms-2 me-1 float-end" :class="messagePrev ? '': 'disabled'"
+			<a class="btn btn-outline-light ms-2 me-1 float-end" :class="messagePrev ? '': 'disabled'"
 				:href="'#'+messagePrev" title="View previous message">
 				<i class="bi bi-caret-left-fill"></i>
 			</a>
-			<a :href="'api/v1/message/' + message.ID + '/raw?dl=1'" class="btn btn-outline-secondary me-2 float-end"
+			<a :href="'api/v1/message/' + message.ID + '/raw?dl=1'" class="btn btn-outline-light me-2 float-end"
 				title="Download message">
 				<i class="bi bi-file-arrow-down-fill"></i> <span class="d-none d-md-inline">Download</span>
 			</a>
@@ -551,7 +550,7 @@ export default {
 						<span class="btn btn-link position-absolute end-0 text-muted" v-if="search"
 							v-on:click="resetSearch"><i class="bi bi-x-circle"></i></span>
 					</div>
-					<button v-if="total" class="btn btn-outline-secondary" type="submit"><i
+					<button v-if="total" class="btn btn-outline-light" type="submit"><i
 							class="bi bi-search"></i></button>
 				</div>
 			</form>
@@ -562,7 +561,7 @@ export default {
 				<i class="bi bi-trash-fill"></i>
 			</button>
 
-			<button v-if="unread" class="btn btn-outline-primary float-start d-md-none" data-bs-toggle="modal"
+			<button v-if="unread" class="btn btn-outline-light float-start d-md-none" data-bs-toggle="modal"
 				data-bs-target="#MarkAllReadModal" title="Mark all read">
 				<i class="bi bi-check2-square"></i>
 			</button>
@@ -579,14 +578,14 @@ export default {
 			</span>
 			<span v-else>
 				<small>
-					<b>{{ formatNumber(start + 1) }}-{{ formatNumber(start + items.length) }}</b> of <b>{{
-					formatNumber(total) }}</b>
+					{{ formatNumber(start + 1) }}-{{ formatNumber(start + items.length) }} <small>of</small> {{
+					formatNumber(total) }}
 				</small>
-				<button class="btn btn-outline-secondary ms-2 me-1" :disabled="!canPrev" v-on:click="viewPrev"
+				<button class="btn btn-outline-light ms-2 me-1" :disabled="!canPrev" v-on:click="viewPrev"
 					v-if="!searching" :title="'View previous '+limit+' messages'">
 					<i class="bi bi-caret-left-fill"></i>
 				</button>
-				<button class="btn btn-outline-secondary" :disabled="!canNext" v-on:click="viewNext" v-if="!searching"
+				<button class="btn btn-outline-light" :disabled="!canNext" v-on:click="viewNext" v-if="!searching"
 					:title="'View next '+limit+' messages'">
 					<i class="bi bi-caret-right-fill"></i>
 				</button>
@@ -669,7 +668,7 @@ export default {
 
 		<div class="col-lg-10 col-md-9 mh-100 pe-0">
 			<div class="mh-100" style="overflow-y: auto;" :class="message ? 'd-none':''" id="message-page">
-				<div class="list-group" v-if="items.length">
+				<div class="list-group my-2" v-if="items.length">
 					<a v-for="message in items" :href="'#'+message.ID"
 						v-on:click.ctrl="toggleSelected($event, message.ID)"
 						v-on:click.shift="selectRange($event, message.ID)"
@@ -740,7 +739,7 @@ export default {
 					This will permanently delete {{ formatNumber(total) }} message<span v-if="total > 1">s</span>.
 				</div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+					<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
 					<button type="button" class="btn btn-danger" data-bs-dismiss="modal"
 						v-on:click="deleteAll">Delete</button>
 				</div>
@@ -761,8 +760,8 @@ export default {
 					This will mark {{ formatNumber(unread) }} message<span v-if="unread > 1">s</span> as read.
 				</div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-					<button type="button" class="btn btn-primary" data-bs-dismiss="modal"
+					<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+					<button type="button" class="btn btn-success" data-bs-dismiss="modal"
 						v-on:click="markAllRead">Confirm</button>
 				</div>
 			</div>
diff --git a/server/ui-src/assets/_bootstrap_variables.scss b/server/ui-src/assets/_bootstrap_variables.scss
index 1d3791f..d695d0e 100644
--- a/server/ui-src/assets/_bootstrap_variables.scss
+++ b/server/ui-src/assets/_bootstrap_variables.scss
@@ -1,2 +1,2 @@
 $link-decoration: none;
-$primary: #3465b5;
+$primary: #2c3e50;
diff --git a/server/ui-src/assets/styles.scss b/server/ui-src/assets/styles.scss
index 674bb5a..bbedf79 100644
--- a/server/ui-src/assets/styles.scss
+++ b/server/ui-src/assets/styles.scss
@@ -9,6 +9,7 @@
 
     .navbar-brand {
         color: #2d4a5d;
+        transition: all 0.2s;
 
         img {
             width: 40px;
@@ -24,6 +25,19 @@
     }
 }
 
+.navbar-brand {
+    span {
+        opacity: 0.8;
+        transition: all 0.5s;
+    }
+
+    &:hover {
+        span {
+            opacity: 1;
+        }
+    }
+}
+
 #loading {
     position: absolute;
     top: 0;
diff --git a/server/ui-src/templates/Message.vue b/server/ui-src/templates/Message.vue
index a6aa977..d09c752 100644
--- a/server/ui-src/templates/Message.vue
+++ b/server/ui-src/templates/Message.vue
@@ -28,7 +28,7 @@ export default {
 			handler(newQuestion) {
 				let self = this;
 				// delay 100ms to select first tab and add HTML highlighting (prev/next)
-				window.setTimeout(function() {
+				window.setTimeout(function () {
 					self.renderUI();
 				}, 100)
 			},
@@ -47,20 +47,20 @@ export default {
 			self.srcURI = 'api/v1/message/' + self.message.ID + '/raw';
 		});
 	},
-	
-	unmounted: function() {
+
+	unmounted: function () {
 		window.removeEventListener("resize", this.resizeIframes);
 	},
 
 	methods: {
-		renderUI: function() {
+		renderUI: function () {
 			let self = this;
 			// click the first non-disabled tab
 			document.querySelector('#nav-tab button:not([disabled])').click();
 			document.activeElement.blur(); // blur focus
 			document.getElementById('message-view').scrollTop = 0;
 
-			window.setTimeout(function(){
+			window.setTimeout(function () {
 				let p = document.getElementById('preview-html');
 
 				if (p) {
@@ -83,13 +83,13 @@ export default {
 			window.Prism.manual = true;
 			Prism.highlightAll();
 		},
-		
-		resizeIframe: function(el) {
+
+		resizeIframe: function (el) {
 			let i = el.target;
 			i.style.height = i.contentWindow.document.body.scrollHeight + 50 + 'px';
 		},
 
-		resizeIframes: function() {
+		resizeIframes: function () {
 			let h = document.getElementById('preview-html');
 			if (h) {
 				h.style.height = h.contentWindow.document.body.scrollHeight + 50 + 'px';
@@ -101,7 +101,7 @@ export default {
 			}
 		},
 
-		messageDate: function(d) {
+		messageDate: function (d) {
 			return moment(d).format('ddd, D MMM YYYY, h:mm a');
 		}
 	}
@@ -168,7 +168,8 @@ export default {
 			<div class="col-md-auto text-md-end mt-md-3">
 				<p class="text-muted small d-none d-md-block"><small>{{ messageDate(message.Date) }}</small></p>
 				<div class="dropdown mt-2" v-if="allAttachments(message)">
-					<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+					<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
+						aria-expanded="false">
 						Attachment<span v-if="allAttachments(message).length > 1">s</span>
 						({{ allAttachments(message).length }})
 					</button>
@@ -188,41 +189,40 @@ export default {
 
 		<nav>
 			<div class="nav nav-tabs my-3" id="nav-tab" role="tablist">
-				<button class="nav-link" id="nav-html-tab" data-bs-toggle="tab"
-					data-bs-target="#nav-html" type="button" role="tab" aria-controls="nav-html"
-					aria-selected="true" v-if="message.HTML">HTML</button>
-				<button class="nav-link" id="nav-html-source-tab" data-bs-toggle="tab"
-					data-bs-target="#nav-html-source" type="button" role="tab" aria-controls="nav-html-source"
-					aria-selected="false" v-if="message.HTML">HTML Source</button>
-				<button class="nav-link" id="nav-plain-text-tab" data-bs-toggle="tab"
-					data-bs-target="#nav-plain-text" type="button" role="tab" aria-controls="nav-plain-text"
-					aria-selected="false" :class="message.HTML == '' ? 'show':''">Text</button>
-				<button class="nav-link" id="nav-raw-tab" data-bs-toggle="tab"
-					data-bs-target="#nav-raw" type="button" role="tab" aria-controls="nav-raw"
-					aria-selected="false">Raw</button>
+				<button class="nav-link" id="nav-html-tab" data-bs-toggle="tab" data-bs-target="#nav-html" type="button"
+					role="tab" aria-controls="nav-html" aria-selected="true" v-if="message.HTML">HTML</button>
+				<button class="nav-link" id="nav-html-source-tab" data-bs-toggle="tab" data-bs-target="#nav-html-source"
+					type="button" role="tab" aria-controls="nav-html-source" aria-selected="false"
+					v-if="message.HTML">HTML Source</button>
+				<button class="nav-link" id="nav-plain-text-tab" data-bs-toggle="tab" data-bs-target="#nav-plain-text"
+					type="button" role="tab" aria-controls="nav-plain-text" aria-selected="false"
+					:class="message.HTML == '' ? 'show':''">Text</button>
+				<button class="nav-link" id="nav-raw-tab" data-bs-toggle="tab" data-bs-target="#nav-raw" type="button"
+					role="tab" aria-controls="nav-raw" aria-selected="false">Raw</button>
 			</div>
 		</nav>
 		<div class="tab-content mb-5" id="nav-tabContent">
 			<div v-if="message.HTML != ''" class="tab-pane fade show" id="nav-html" role="tabpanel"
 				aria-labelledby="nav-html-tab" tabindex="0">
-				<iframe target-blank="" class="tab-pane" id="preview-html" :srcdoc="message.HTML" v-on:load="resizeIframe"
-					seamless frameborder="0" style="width: 100%; height: 100%;">
+				<iframe target-blank="" class="tab-pane" id="preview-html" :srcdoc="message.HTML"
+					v-on:load="resizeIframe" seamless frameborder="0" style="width: 100%; height: 100%;">
 				</iframe>
-				<Attachments v-if="allAttachments(message).length" :message="message" :attachments="allAttachments(message)"></Attachments>
+				<Attachments v-if="allAttachments(message).length" :message="message"
+					:attachments="allAttachments(message)"></Attachments>
 			</div>
-			<div class="tab-pane fade" id="nav-html-source" role="tabpanel"
-				aria-labelledby="nav-html-source-tab" tabindex="0" v-if="message.HTML">
+			<div class="tab-pane fade" id="nav-html-source" role="tabpanel" aria-labelledby="nav-html-source-tab"
+				tabindex="0" v-if="message.HTML">
 				<pre><code class="language-html">{{ message.HTML }}</code></pre>
 			</div>
-			<div class="tab-pane fade" id="nav-plain-text" role="tabpanel"
-				aria-labelledby="nav-plain-text-tab" tabindex="0" :class="message.HTML == '' ? 'show':''">
+			<div class="tab-pane fade" id="nav-plain-text" role="tabpanel" aria-labelledby="nav-plain-text-tab"
+				tabindex="0" :class="message.HTML == '' ? 'show':''">
 				<div class="text-view">{{ message.Text }}</div>
-				<Attachments v-if="allAttachments(message).length" :message="message" :attachments="allAttachments(message)"></Attachments>
+				<Attachments v-if="allAttachments(message).length" :message="message"
+					:attachments="allAttachments(message)"></Attachments>
 			</div>
-			<div class="tab-pane fade" id="nav-raw" role="tabpanel" aria-labelledby="nav-raw-tab"
-				tabindex="0">
-				<iframe v-if="srcURI" :src="srcURI" v-on:load="resizeIframe"
-					seamless frameborder="0" style="width: 100%; height: 300px;" id="message-src"></iframe>
+			<div class="tab-pane fade" id="nav-raw" role="tabpanel" aria-labelledby="nav-raw-tab" tabindex="0">
+				<iframe v-if="srcURI" :src="srcURI" v-on:load="resizeIframe" seamless frameborder="0"
+					style="width: 100%; height: 300px;" id="message-src"></iframe>
 			</div>
 		</div>
 	</div>
diff --git a/server/ui/favicon.svg b/server/ui/favicon.svg
new file mode 100644
index 0000000..304b05d
--- /dev/null
+++ b/server/ui/favicon.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="500"
+   height="460"
+   viewBox="0 0 132.292 121.708"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="favicon.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="0.80851684"
+     inkscape:cx="401.9706"
+     inkscape:cy="327.76064"
+     inkscape:window-width="1554"
+     inkscape:window-height="838"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M12.321 0l53.861 53.918L120.365 0zM5.155 9.025l60.842 59.673 61.211-59.489-.185 36.835L66.921 70.54l15.164 12.616-8.137 5.986-41.609.184c-4.838-.022-25.877-18.34-27.185-41.255z"
+     fill-opacity=".941"
+     fill="#2d4a5f"
+     id="path2"
+     style="fill:#415066;fill-opacity:1"
+     inkscape:export-filename="/mnt/apache/sandpit/go/mailpit/server/ui/mailpit.png"
+     inkscape:export-xdpi="12.29"
+     inkscape:export-ydpi="12.29" />
+  <path
+     d="M78.385 72.049l53.907-21.679-8.031 57.318-11.845-9.132c-21.727 23.171-45.255 26.289-67.997 20.837S12.281 98.39 5.155 83.8-.67 53.116 2.843 38.769c1.13 10.511-1.313 16.316 6.38 33.612 6.31 11.399 14.413 20.417 25.89 24.956 13.9 6.195 32.247 3.357 41.701-3.039l14.24-12.156z"
+     fill="#00b786"
+     id="path4"
+     inkscape:export-filename="/mnt/apache/sandpit/go/mailpit/server/ui/mailpit.png"
+     inkscape:export-xdpi="12.29"
+     inkscape:export-ydpi="12.29" />
+</svg>
diff --git a/server/ui/index.html b/server/ui/index.html
index 442c1f1..c5065cd 100644
--- a/server/ui/index.html
+++ b/server/ui/index.html
@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width,initial-scale=1.0">
 	<meta name="referrer" content="no-referrer">
 	<meta name="robots" content="noindex, nofollow, noarchive">
-	<link rel="icon" href="mailpit.svg">
+	<link rel="icon" href="favicon.svg">
 	<title>Mailpit</title>
 	<link rel=stylesheet href="dist/app.css">
 </head>
diff --git a/server/ui/mailpit.png b/server/ui/mailpit.png
deleted file mode 100644
index dadbdd9..0000000
Binary files a/server/ui/mailpit.png and /dev/null differ
diff --git a/server/ui/mailpit.svg b/server/ui/mailpit.svg
index 9c6cc4c..814a7c9 100644
--- a/server/ui/mailpit.svg
+++ b/server/ui/mailpit.svg
@@ -1 +1,50 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="460" viewBox="0 0 132.292 121.708" xmlns:v="https://vecta.io/nano"><path d="M12.321 0l53.861 53.918L120.365 0zM5.155 9.025l60.842 59.673 61.211-59.489-.185 36.835L66.921 70.54l15.164 12.616-8.137 5.986-41.609.184c-4.838-.022-25.877-18.34-27.185-41.255z" fill-opacity=".941" fill="#2d4a5f"/><path d="M78.385 72.049l53.907-21.679-8.031 57.318-11.845-9.132c-21.727 23.171-45.255 26.289-67.997 20.837S12.281 98.39 5.155 83.8-.67 53.116 2.843 38.769c1.13 10.511-1.313 16.316 6.38 33.612 6.31 11.399 14.413 20.417 25.89 24.956 13.9 6.195 32.247 3.357 41.701-3.039l14.24-12.156z" fill="#00b786"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="500"
+   height="460"
+   viewBox="0 0 132.292 121.708"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="mailpit.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="0.80851684"
+     inkscape:cx="401.35218"
+     inkscape:cy="327.76064"
+     inkscape:window-width="1554"
+     inkscape:window-height="838"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M12.321 0l53.861 53.918L120.365 0zM5.155 9.025l60.842 59.673 61.211-59.489-.185 36.835L66.921 70.54l15.164 12.616-8.137 5.986-41.609.184c-4.838-.022-25.877-18.34-27.185-41.255z"
+     fill-opacity=".941"
+     fill="#2d4a5f"
+     id="path2"
+     style="fill:#ffffff;fill-opacity:1"
+     inkscape:export-filename="/mnt/apache/sandpit/go/mailpit/server/ui/mailpit.png"
+     inkscape:export-xdpi="12.29"
+     inkscape:export-ydpi="12.29" />
+  <path
+     d="M78.385 72.049l53.907-21.679-8.031 57.318-11.845-9.132c-21.727 23.171-45.255 26.289-67.997 20.837S12.281 98.39 5.155 83.8-.67 53.116 2.843 38.769c1.13 10.511-1.313 16.316 6.38 33.612 6.31 11.399 14.413 20.417 25.89 24.956 13.9 6.195 32.247 3.357 41.701-3.039l14.24-12.156z"
+     fill="#00b786"
+     id="path4"
+     inkscape:export-filename="/mnt/apache/sandpit/go/mailpit/server/ui/mailpit.png"
+     inkscape:export-xdpi="12.29"
+     inkscape:export-ydpi="12.29" />
+</svg>