diff --git a/CHANGELOG.md b/CHANGELOG.md
index 27be4b7..0f5311d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,21 @@
 Notable changes to Mailpit will be documented in this file.
 
 
+## 0.1.3
+
+### Feature
+- Mark all messages as read
+
+### UI
+- Better error handling when connection to server is broken
+- Add reset search button
+- Minor UI tweaks
+- Update pagination values when new mail arrives when not on first page
+
+
+### Pull Requests
+- Merge pull request [#6](https://github.com/axllent/mailpit/issues/6) from KaptinLin/develop
+
 ## 0.1.2
 
 ### Feature
diff --git a/cmd/root.go b/cmd/root.go
index a5547fb..da09ca3 100644
--- a/cmd/root.go
+++ b/cmd/root.go
@@ -87,15 +87,21 @@ func init() {
 	if len(os.Getenv("MP_UI_AUTH_FILE")) > 0 {
 		config.UIAuthFile = os.Getenv("MP_UI_AUTH_FILE")
 	}
-	if len(os.Getenv("MP_SMTP_AUTH_FILE")) > 0 {
-		config.SMTPAuthFile = os.Getenv("MP_SMTP_AUTH_FILE")
-	}
 	if len(os.Getenv("MP_UI_SSL_CERT")) > 0 {
 		config.UISSLCert = os.Getenv("MP_UI_SSL_CERT")
 	}
 	if len(os.Getenv("MP_UI_SSL_KEY")) > 0 {
 		config.UISSLKey = os.Getenv("MP_UI_SSL_KEY")
 	}
+	if len(os.Getenv("MP_SMTP_AUTH_FILE")) > 0 {
+		config.SMTPAuthFile = os.Getenv("MP_SMTP_AUTH_FILE")
+	}
+	if len(os.Getenv("MP_SMTP_SSL_CERT")) > 0 {
+		config.SMTPSSLCert = os.Getenv("MP_SMTP_SSL_CERT")
+	}
+	if len(os.Getenv("MP_SMTP_SSL_KEY")) > 0 {
+		config.SMTPSSLKey = os.Getenv("MP_SMTP_SSL_KEY")
+	}
 
 	// deprecated 2022/08/06
 	if len(os.Getenv("MP_AUTH_FILE")) > 0 {
diff --git a/screenshot.png b/screenshot.png
index d2005ab..ef3a4fb 100644
Binary files a/screenshot.png and b/screenshot.png differ
diff --git a/server/api.go b/server/api.go
index e5f5662..468d3e2 100644
--- a/server/api.go
+++ b/server/api.go
@@ -218,6 +218,22 @@ func apiUnreadOne(w http.ResponseWriter, r *http.Request) {
 	_, _ = w.Write([]byte("ok"))
 }
 
+// Mark single message as unread
+func apiMarkAllRead(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+
+	mailbox := vars["mailbox"]
+
+	err := storage.MarkAllRead(mailbox)
+	if err != nil {
+		httpError(w, err.Error())
+		return
+	}
+
+	w.Header().Add("Content-Type", "text/plain")
+	_, _ = w.Write([]byte("ok"))
+}
+
 // Websocket to broadcast changes
 func apiWebsocket(w http.ResponseWriter, r *http.Request) {
 	websockets.ServeWs(websockets.MessageHub, w, r)
diff --git a/server/server.go b/server/server.go
index 8c202a9..ada8462 100644
--- a/server/server.go
+++ b/server/server.go
@@ -39,6 +39,7 @@ func Listen() {
 	r.HandleFunc("/api/{mailbox}/search", middleWareFunc(apiSearchMailbox))
 	r.HandleFunc("/api/{mailbox}/delete", middleWareFunc(apiDeleteAll))
 	r.HandleFunc("/api/{mailbox}/events", apiWebsocket)
+	r.HandleFunc("/api/{mailbox}/read", apiMarkAllRead)
 	r.HandleFunc("/api/{mailbox}/{id}/source", middleWareFunc(apiDownloadSource))
 	r.HandleFunc("/api/{mailbox}/{id}/part/{partID}", middleWareFunc(apiDownloadAttachment))
 	r.HandleFunc("/api/{mailbox}/{id}/delete", middleWareFunc(apiDeleteOne))
diff --git a/server/ui-src/App.vue b/server/ui-src/App.vue
index e846b83..83cc588 100644
--- a/server/ui-src/App.vue
+++ b/server/ui-src/App.vue
@@ -99,6 +99,13 @@ export default {
 			this.loadMessages();
 		},
 
+		resetSearch: function(e) {
+			e.preventDefault();
+			this.search = '';
+			this.scrollInPlace = true;
+			this.loadMessages();
+		},
+
 		reloadMessages: function() {
 			this.search = "";
             this.start = 0;
@@ -198,6 +205,16 @@ export default {
 			});
 		},
 
+		markAllRead: function() {
+			let self = this;
+			let uri = 'api/' +  self.mailbox + '/read'
+			self.get(uri, false, function(response) {
+				window.location.hash = "";
+				self.scrollInPlace = true;
+				self.loadMessages();
+			});
+		},
+
 		// websocket connect
         connect: function () {
             let wsproto = location.protocol == 'https:' ? 'wss' : 'ws';
@@ -210,12 +227,14 @@ export default {
 				}
 				// new messages
 				if (response.Type == "new" && response.Data) {
-                	if (self.start < 1) {
-						if (!self.searching) {
+					if (!self.searching) {
+                		if (self.start < 1) {
 							self.items.unshift(response.Data);
 							if (self.items.length > self.limit) {
 								self.items.pop();
 							}
+						} else {
+							self.start++;
 						}
 					}
 	                self.total++;
@@ -299,7 +318,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">
@@ -325,7 +344,10 @@ export default {
 		<div class="col col-md-9 col-lg-5" v-if="!message && total">
 			<form v-on:submit="doSearch">
 				<div class="input-group">
-					<input type="text" class="form-control" v-model.trim="search" placeholder="Search mailbox">
+					<div class="d-flex bg-white border rounded-start flex-fill position-relative">
+						<input type="text" class="form-control border-0" v-model.trim="search" placeholder="Search mailbox">
+						<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 class="btn btn-outline-secondary" type="submit"><i class="bi bi-search"></i></button>
 				</div>
 			</form>
@@ -358,15 +380,15 @@ export default {
 	<div class="row flex-fill" style="min-height:0">
 		<div class="d-none d-md-block col-lg-2 col-md-3 mh-100 position-relative" style="overflow-y: auto;">
 			<ul class="list-unstyled mt-3 mb-5">
-				<li v-if="isConnected" title="Messages will auto-load">
+				<li v-if="isConnected" title="Messages will auto-load" class="mb-2">
 					<i class="bi bi-power text-success"></i>
 					Connected
 				</li>
-				<li v-else title="Messages will auto-load">
+				<li v-else title="You need to manually refresh your mailbox" class="mb-3">
 					<i class="bi bi-power text-danger"></i>
 					Disconnected
 				</li>
-				<li class="mt-3">
+				<li class="mb-5">
 					<a class="position-relative ps-0" href="#" v-on:click="reloadMessages">
 						<i class="bi bi-envelope me-1" v-if="isConnected"></i>
 						<i class="bi bi-arrow-clockwise me-1" v-else></i>
@@ -376,20 +398,26 @@ export default {
 						</span>
 					</a>
 				</li>
-				<li class="mt-3">
-					<a v-if="total" href="#" data-bs-toggle="modal" data-bs-target="#DeleteAllModal">
+				<li class="my-3" v-if="unread">
+					<a href="#" data-bs-toggle="modal" data-bs-target="#MarkAllReadModal">
+						<i class="bi bi-check2-square"></i>
+						Mark all read
+					</a>
+				</li>
+				<li class="my-3" v-if="total">
+					<a href="#" data-bs-toggle="modal" data-bs-target="#DeleteAllModal">
 						<i class="bi bi-trash-fill me-1 text-danger"></i>
 						Delete all
 					</a>
 				</li>
-				<li class="mt-3" v-if="notificationsSupported && !notificationsEnabled">
+				<li class="my-3" v-if="notificationsSupported && !notificationsEnabled">
 					<a href="#" data-bs-toggle="modal" data-bs-target="#EnableNotificationsModal" title="Enable browser notifications">
 						<i class="bi bi-bell"></i>
 						Enable alerts
 					</a>
 				</li>
 				<li class="mt-5 position-fixed bottom-0">
-					<a href="https://github.com/axllent/mailpit" target="_blank" class="text-muted w-100 d-block bg-white py-2">
+					<a href="https://github.com/axllent/mailpit" target="_blank" class="text-muted w-100 d-block bg-white my-3">
 						<i class="bi bi-github"></i>
 						GitHub
 					</a>
@@ -433,7 +461,14 @@ export default {
 						</div>
 					</a>
 				</div>
-				<div v-else class="text-muted py-3">No messages</div>
+				<div v-else class="text-muted my-3">
+					<span v-if="searching">
+						No results matching your search
+					</span>
+					<span v-else>
+						There are no emails in your mailbox
+					</span>
+				</div>
 			</div>
 
 			<Message v-if="message" :message="message" :mailbox="mailbox"></Message>
@@ -466,6 +501,25 @@ export default {
 		</div>
 	</div>
 
+	<!-- Modal -->
+	<div class="modal fade" id="MarkAllReadModal" tabindex="-1" aria-labelledby="MarkAllReadModalLabel" aria-hidden="true">
+		<div class="modal-dialog">
+			<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title" id="MarkAllReadModalLabel">Mark all messages as read?</h5>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+			</div>
+			<div class="modal-body">
+				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" v-on:click="markAllRead">Confirm</button>
+			</div>
+			</div>
+		</div>
+	</div>
+
 	<!-- Modal -->
 	<div class="modal fade" id="EnableNotificationsModal" tabindex="-1" aria-labelledby="EnableNotificationsModalLabel" aria-hidden="true">
 		<div class="modal-dialog modal-lg">
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;
+}
diff --git a/server/ui-src/mixins.js b/server/ui-src/mixins.js
index c1604f0..494a64b 100644
--- a/server/ui-src/mixins.js
+++ b/server/ui-src/mixins.js
@@ -27,7 +27,7 @@ const commonMixins = {
         // Ajax error message
         handleError: function (error) {
             // handle error
-            if (error.response) {
+            if (error.response && error.response.data) {
                 // The request was made and the server responded with a status code
                 // that falls out of the range of 2xx
                 if (error.response.data.Error) {
diff --git a/storage/database.go b/storage/database.go
index b2aa8f1..7b2c31b 100644
--- a/storage/database.go
+++ b/storage/database.go
@@ -574,3 +574,38 @@ func DeleteAllMessages(mailbox string) error {
 
 	return nil
 }
+
+// MarkAllRead will mark every unread message in a mailbox as read
+func MarkAllRead(mailbox string) error {
+	mailbox = sanitizeMailboxName(mailbox)
+
+	totalStart := time.Now()
+
+	q, err := db.FindAll(clover.NewQuery(mailbox).
+		Where(clover.Field("Read").IsFalse()))
+	if err != nil {
+		return err
+	}
+
+	total := len(q)
+
+	updates := make(map[string]interface{})
+	updates["Read"] = true
+
+	for _, m := range q {
+		if err := db.UpdateById(mailbox, m.ObjectId(), updates); err != nil {
+			logger.Log().Error(err)
+			return err
+		}
+	}
+
+	if err := statsRefresh(mailbox); err != nil {
+		return err
+	}
+
+	elapsed := time.Since(totalStart)
+
+	logger.Log().Debugf("[db] marked %d messages in %s as read in %s", total, mailbox, elapsed)
+
+	return nil
+}