diff --git a/web/html/index.html b/web/html/index.html
index 2ff8db3e..5d8b0640 100644
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -598,40 +598,56 @@
             this.formattedLogs = this.logs?.length > 0 ? this.formatLogs(this.logs) : "No Record...";
         },
         formatLogs(logs) {
-            let formattedLogs = '';
+            let formattedLogs = `
+<style>
+  table {
+    border-collapse: collapse;
+    width: auto;
+  }
 
-          logs.forEach((log, index) => {
-            if(index > 0) formattedLogs += '<br>';
+  table td, table th {
+    padding: 2px 15px;
+  }
+</style>
 
-            const parts = log.split(' ');
+<table>
+    <tr>
+        <th>Date</th>
+        <th>From</th>
+        <th>To</th>
+        <th>Inbound</th>
+        <th>Outbound</th>
+        <th>Email</th>
+    </tr>
+`;
 
-            if(parts.length === 10) {
-              const dateTime = `<b>${parts[0]} ${parts[1]}</b>`;
-              const from = `<b>${parts[3]}</b>`;
-              const to = `<b>${parts[5].replace(/^\/+/, "")}</b>`;
+            logs.reverse().forEach((log, index) => {
+                let outboundColor = '';
+                if (log.Event === 1) {
+                    outboundColor = ' style="color: #e04141;"'; //red for blocked
+                }
+                else if (log.Event === 2) {
+                    outboundColor = ' style="color: #3c89e8;"'; //blue for proxies
+                }
 
-              let outboundColor = '';
-              if (parts[9] === "b") {
-                outboundColor = ' style="color: #e04141;"'; //red for blocked
-              }
-              else if (parts[9] === "p") {
-                outboundColor = ' style="color: #3c89e8;"'; //blue for proxies
-              }
+                let text = ``;
+                if (log.Email !== "") {
+                    text = `<td>${log.Email}</td>`;
+                }
 
-              formattedLogs += `<span${outboundColor}>
-${dateTime}
- ${parts[2]}
- ${from}
- ${parts[4]}
- ${to}
- ${parts.slice(6, 9).join(' ')}
-</span>`;
-            } else {
-              formattedLogs += `<span>${log}</span>`;
-            }
-          });
+                formattedLogs += `
+<tr ${outboundColor}>
+    <td><b>${new Date(log.DateTime).toLocaleString()}</b></td>
+    <td>${log.FromAddress}</td>
+    <td>${log.ToAddress}</td>
+    <td>${log.Inbound}</td>
+    <td>${log.Outbound}</td>
+    ${text}
+</tr>
+`;
+            });
 
-            return formattedLogs;
+            return formattedLogs += "</table>";
         },
         hide() {
             this.visible = false;
diff --git a/web/service/server.go b/web/service/server.go
index 85af5597..03ffdae8 100644
--- a/web/service/server.go
+++ b/web/service/server.go
@@ -100,6 +100,16 @@ type ServerService struct {
 	noIPv6         bool
 }
 
+type LogEntry struct {
+	DateTime    time.Time
+	FromAddress string
+	ToAddress   string
+	Inbound     string
+	Outbound    string
+	Email       string
+	Event       int
+}
+
 func getPublicIP(url string) string {
 	client := &http.Client{
 		Timeout: 3 * time.Second,
@@ -516,19 +526,25 @@ func (s *ServerService) GetXrayLogs(
 	showBlocked string,
 	showProxy string,
 	freedoms []string,
-	blackholes []string) []string {
+	blackholes []string) []LogEntry {
+
+	const (
+		Direct = iota
+		Blocked
+		Proxied
+	)
 
 	countInt, _ := strconv.Atoi(count)
-	var lines []string
+	var entries []LogEntry
 
 	pathToAccessLog, err := xray.GetAccessLogPath()
 	if err != nil {
-		return lines
+		return nil
 	}
 
 	file, err := os.Open(pathToAccessLog)
 	if err != nil {
-		return lines
+		return nil
 	}
 	defer file.Close()
 
@@ -547,37 +563,62 @@ func (s *ServerService) GetXrayLogs(
 			continue
 		}
 
-		//adding suffixes to further distinguish entries by outbound
-		if hasSuffix(line, freedoms) {
+		var entry LogEntry
+		parts := strings.Fields(line)
+
+		for i, part := range parts {
+
+			if i == 0 {
+				dateTime, err := time.Parse("2006/01/02 15:04:05.999999", parts[0]+" "+parts[1])
+				if err != nil {
+					continue
+				}
+				entry.DateTime = dateTime
+			}
+
+			if part == "from" {
+				entry.FromAddress = parts[i+1]
+			} else if part == "accepted" {
+				entry.ToAddress = parts[i+1]
+			} else if strings.HasPrefix(part, "[") {
+				entry.Inbound = part[1:]
+			} else if strings.HasSuffix(part, "]") {
+				entry.Outbound = part[:len(part)-1]
+			} else if part == "email:" {
+				entry.Email = parts[i+1]
+			}
+		}
+
+		if logEntryContains(line, freedoms) {
 			if showDirect == "false" {
 				continue
 			}
-			line = line + " f"
-		} else if hasSuffix(line, blackholes) {
+			entry.Event = Direct
+		} else if logEntryContains(line, blackholes) {
 			if showBlocked == "false" {
 				continue
 			}
-			line = line + " b"
+			entry.Event = Blocked
 		} else {
 			if showProxy == "false" {
 				continue
 			}
-			line = line + " p"
+			entry.Event = Proxied
 		}
 
-		lines = append(lines, line)
+		entries = append(entries, entry)
 	}
 
-	if len(lines) > countInt {
-		lines = lines[len(lines)-countInt:]
+	if len(entries) > countInt {
+		entries = entries[len(entries)-countInt:]
 	}
 
-	return lines
+	return entries
 }
 
-func hasSuffix(line string, suffixes []string) bool {
+func logEntryContains(line string, suffixes []string) bool {
 	for _, sfx := range suffixes {
-		if strings.HasSuffix(line, sfx+"]") {
+		if strings.Contains(line, sfx+"]") {
 			return true
 		}
 	}