diff --git a/web/html/index.html b/web/html/index.html
index c0354500..bc5483b0 100644
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -457,8 +457,8 @@
           </a-select>
         </a-input-group>
       </a-form-item>
-      <a-form-item>
-        <a-input size="small" v-model="xraylogModal.filter"></a-input>
+      <a-form-item label="Filter:">
+        <a-input size="small" v-model="xraylogModal.filter" @keyup.enter="openXrayLogs()"></a-input>
       </a-form-item>
       <a-form-item>
         <a-checkbox v-model="xraylogModal.showDirect" @change="openXrayLogs()">Direct</a-checkbox>
@@ -676,17 +676,17 @@
 
             const parts = log.split(' ');
 
-            if(parts.length === 9) {
+            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>`;
 
               let outboundColor = '';
-              if (parts[8].startsWith('blocked')) {
-                outboundColor = ' style="color: #e04141;"';
+              if (parts[9] === "b") {
+                outboundColor = ' style="color: #e04141;"'; //red for blocked
               }
-              else if (!parts[8].startsWith('direct')) {
-                outboundColor = ' style="color: #3c89e8;"';
+              else if (parts[9] === "p") {
+                outboundColor = ' style="color: #3c89e8;"'; //blue for proxies
               }
 
               formattedLogs += `<span${outboundColor}>
@@ -695,10 +695,10 @@ ${dateTime}
  ${from}
  ${parts[4]}
  ${to}
- ${parts.slice(6).join(' ')}
+ ${parts.slice(6, 9).join(' ')}
 </span>`;
             } else {
-              formattedLogs += `<span>${parts.join(' ')}</span>`;
+              formattedLogs += `<span>${log}</span>`;
             }
           });
 
diff --git a/web/service/server.go b/web/service/server.go
index cd51f2f2..e05c9567 100644
--- a/web/service/server.go
+++ b/web/service/server.go
@@ -490,7 +490,8 @@ func (s *ServerService) GetXrayLogs(
 	showProxy string,
 	freedoms []string,
 	blackholes []string) []string {
-	c, _ := strconv.Atoi(count)
+
+	countInt, _ := strconv.Atoi(count)
 	var lines []string
 
 	pathToAccessLog, err := xray.GetAccessLogPath()
@@ -508,28 +509,40 @@ func (s *ServerService) GetXrayLogs(
 
 	for scanner.Scan() {
 		line := strings.TrimSpace(scanner.Text())
+
 		if line == "" || strings.Contains(line, "api -> api") {
-			continue
-		}
-		if filter != "" && !strings.Contains(line, filter) {
+			//skipping api calls
 			continue
 		}
 
-		if showDirect == "false" && hasSuffix(line, freedoms) {
+		if filter != "" && !strings.Contains(line, filter) {
+			//skipping empty lines
 			continue
 		}
-		if showBlocked == "false" && hasSuffix(line, blackholes) {
-			continue
-		}
-		if showProxy == "false" && !hasSuffix(line, append(freedoms, blackholes...)) {
-			continue
+
+		//adding suffixes to further distinguish entries by outbound
+		if hasSuffix(line, freedoms) {
+			if showDirect == "false" {
+				continue
+			}
+			line = line + " f"
+		} else if hasSuffix(line, blackholes) {
+			if showBlocked == "false" {
+				continue
+			}
+			line = line + " b"
+		} else {
+			if showProxy == "false" {
+				continue
+			}
+			line = line + " p"
 		}
 
 		lines = append(lines, line)
 	}
 
-	if len(lines) > c {
-		lines = lines[len(lines)-c:]
+	if len(lines) > countInt {
+		lines = lines[len(lines)-countInt:]
 	}
 
 	return lines