diff --git a/internal/views/static/css/kafka.css b/internal/views/static/css/kafka.css
index feb6da5..f4aef1c 100644
--- a/internal/views/static/css/kafka.css
+++ b/internal/views/static/css/kafka.css
@@ -339,6 +339,10 @@ main {
   border-bottom: 1px solid var(--border);
 }
 
+.result[data-engine] {
+  border-left: 3px solid var(--accent, transparent);
+}
+
 .result:last-child {
   border-bottom: none;
 }
@@ -393,6 +397,51 @@ main {
   font-size: 0.7rem;
   color: var(--text-muted);
   margin-left: auto;
+  border-left: 2.5px solid transparent;
+  transition: border-color 0.15s ease;
+}
+
+/* ============================================================
+   Engine Accent Colors
+   ============================================================ */
+
+.result[data-engine="google"],
+.engine-badge[data-engine="google"]        { --accent: #4285f4; }
+.result[data-engine="bing"],
+.engine-badge[data-engine="bing"]          { --accent: #00897b; }
+.result[data-engine="duckduckgo"],
+.engine-badge[data-engine="duckduckgo"]    { --accent: #de5833; }
+.result[data-engine="brave"],
+.engine-badge[data-engine="brave"]         { --accent: #fb542b; }
+.result[data-engine="braveapi"],
+.engine-badge[data-engine="braveapi"]      { --accent: #ff6600; }
+.result[data-engine="qwant"],
+.engine-badge[data-engine="qwant"]         { --accent: #5c97ff; }
+.result[data-engine="wikipedia"],
+.engine-badge[data-engine="wikipedia"]     { --accent: #333333; }
+.result[data-engine="github"],
+.engine-badge[data-engine="github"]        { --accent: #8b5cf6; }
+.result[data-engine="reddit"],
+.engine-badge[data-engine="reddit"]        { --accent: #ff4500; }
+.result[data-engine="youtube"],
+.engine-badge[data-engine="youtube"]       { --accent: #ff0000; }
+.result[data-engine="stackoverflow"],
+.engine-badge[data-engine="stackoverflow"] { --accent: #f48024; }
+.result[data-engine="arxiv"],
+.engine-badge[data-engine="arxiv"]         { --accent: #b31b1b; }
+.result[data-engine="crossref"],
+.engine-badge[data-engine="crossref"]      { --accent: #00354d; }
+.result[data-engine="bing_images"],
+.engine-badge[data-engine="bing_images"]   { --accent: #00897b; }
+.result[data-engine="ddg_images"],
+.engine-badge[data-engine="ddg_images"]    { --accent: #de5833; }
+.result[data-engine="qwant_images"],
+.engine-badge[data-engine="qwant_images"]  { --accent: #5c97ff; }
+
+.engine-badge[data-engine] {
+  border-left-color: var(--accent, transparent);
+  color: var(--accent, var(--text-muted));
+  font-weight: 500;
 }
 
 .result_content {
diff --git a/internal/views/templates/result_item.html b/internal/views/templates/result_item.html
index cc548e2..3967891 100644
--- a/internal/views/templates/result_item.html
+++ b/internal/views/templates/result_item.html
@@ -1,12 +1,12 @@
 {{define "result_item"}}
-<article class="result">
+<article class="result" data-engine="{{.Engine}}">
   <div class="result_header">
     <a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.SafeTitle}}</a>
   </div>
   <div class="result_url">
     <img class="result-favicon" src="https://www.google.com/s2/favicons?domain={{.URL | urlquery}}&sz=32" alt="" loading="lazy" onerror="this.style.display='none'">
     <a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.URL}}</a>
-    <span class="engine-badge">{{.Engine}}</span>
+    <span class="engine-badge" data-engine="{{.Engine}}">{{.Engine}}</span>
   </div>
   {{if .Content}}
   <p class="result_content">{{.SafeContent}}</p>