diff --git a/src/main/resources/web/assets/app.js b/src/main/resources/web/assets/app.js
index 90da8aa..8abb865 100644
--- a/src/main/resources/web/assets/app.js
+++ b/src/main/resources/web/assets/app.js
@@ -896,7 +896,9 @@
         el.favoritesList.innerHTML = "";
         filtered.forEach((favorite) => {
             const li = document.createElement("li");
-            li.className = "stream-item";
+            const favoriteTone = favoriteToneClass(favorite);
+            const favoriteBadge = favoriteBadgeLabel(favorite);
+            li.className = `stream-item favorite-item ${favoriteTone}`;
             const isSeriesItem = favorite?.mode === "series_item";
             const isLiveCategory = favorite?.mode === "live_category";
             const isVodCategory = favorite?.mode === "vod_category";
@@ -914,7 +916,7 @@
                 ? `
                     <div>
                         <button type="button" class="stream-title stream-link" data-action="toggle-favorite-series">${isSeriesItemExpanded ? "Hide" : "Show"} ${esc(favorite.title || "Untitled")}</button>
-                        <div class="stream-meta">${esc(favoriteSummary(favorite))}</div>
+                        <div class="stream-meta"><span class="fav-type-badge">${esc(favoriteBadge)}</span>${esc(favoriteSummary(favorite))}</div>
                     </div>
                     <div class="stream-actions">
                         <button type="button" data-action="remove-favorite" class="danger">Remove</button>
@@ -924,7 +926,7 @@
                     ? `
                         <div>
                             <button type="button" class="stream-title stream-link" data-action="toggle-favorite-live-category">${isLiveCategoryExpanded ? "Hide" : "Show"} ${esc(favorite.title || "Untitled")}</button>
-                            <div class="stream-meta">${esc(favoriteSummary(favorite))}</div>
+                            <div class="stream-meta"><span class="fav-type-badge">${esc(favoriteBadge)}</span>${esc(favoriteSummary(favorite))}</div>
                         </div>
                         <div class="stream-actions">
                             <button type="button" data-action="remove-favorite" class="danger">Remove</button>
@@ -934,7 +936,7 @@
                         ? `
                             <div>
                                 <button type="button" class="stream-title stream-link" data-action="toggle-favorite-vod-category">${isVodCategoryExpanded ? "Hide" : "Show"} ${esc(favorite.title || "Untitled")}</button>
-                                <div class="stream-meta">${esc(favoriteSummary(favorite))}</div>
+                                <div class="stream-meta"><span class="fav-type-badge">${esc(favoriteBadge)}</span>${esc(favoriteSummary(favorite))}</div>
                             </div>
                             <div class="stream-actions">
                             <button type="button" data-action="remove-favorite" class="danger">Remove</button>
@@ -944,7 +946,7 @@
                             ? `
                                 <div>
                                     <button type="button" class="stream-title stream-link" data-action="toggle-favorite-series-category">${isSeriesCategoryExpanded ? "Hide" : "Show"} ${esc(favorite.title || "Untitled")}</button>
-                                    <div class="stream-meta">${esc(favoriteSummary(favorite))}</div>
+                                    <div class="stream-meta"><span class="fav-type-badge">${esc(favoriteBadge)}</span>${esc(favoriteSummary(favorite))}</div>
                                 </div>
                                 <div class="stream-actions">
                                     <button type="button" data-action="remove-favorite" class="danger">Remove</button>
@@ -953,7 +955,7 @@
                 : `
                     <div>
                         <button type="button" class="stream-title stream-link" data-action="open-favorite">${esc(favorite.title || "Untitled")}</button>
-                        <div class="stream-meta">${esc(favoriteSummary(favorite))}</div>
+                        <div class="stream-meta"><span class="fav-type-badge">${esc(favoriteBadge)}</span>${esc(favoriteSummary(favorite))}</div>
                     </div>
                     <div class="stream-actions">
                         <button type="button" data-action="remove-favorite" class="danger">Remove</button>
@@ -1541,6 +1543,52 @@
         return mode;
     }
 
+    function favoriteToneClass(favorite) {
+        const mode = String(favorite?.mode || "").toLowerCase();
+        if (mode === "live" || mode === "live_category") {
+            return "fav-tone-live";
+        }
+        if (mode === "vod" || mode === "vod_category") {
+            return "fav-tone-vod";
+        }
+        if (mode === "series_item" || mode === "series_episode" || mode === "series_category") {
+            return "fav-tone-series";
+        }
+        if (mode === "custom") {
+            return "fav-tone-custom";
+        }
+        return "fav-tone-other";
+    }
+
+    function favoriteBadgeLabel(favorite) {
+        const mode = String(favorite?.mode || "").toLowerCase();
+        if (mode === "live") {
+            return "LIVE";
+        }
+        if (mode === "live_category") {
+            return "LIVE CATEGORY";
+        }
+        if (mode === "vod") {
+            return "VOD";
+        }
+        if (mode === "vod_category") {
+            return "VOD CATEGORY";
+        }
+        if (mode === "series_item") {
+            return "SERIES";
+        }
+        if (mode === "series_episode") {
+            return "EPISODE";
+        }
+        if (mode === "series_category") {
+            return "SERIES CATEGORY";
+        }
+        if (mode === "custom") {
+            return "CUSTOM";
+        }
+        return "FAVORITE";
+    }
+
     function makeFavoriteLive(item) {
         const streamId = String(item?.stream_id || "");
         return {
diff --git a/src/main/resources/web/assets/style.css b/src/main/resources/web/assets/style.css
index b78314b..7703ea7 100644
--- a/src/main/resources/web/assets/style.css
+++ b/src/main/resources/web/assets/style.css
@@ -275,6 +275,68 @@ progress::-moz-progress-bar {
     line-height: 1;
 }
 
+.favorite-item {
+    border-left-width: 4px;
+}
+
+.fav-type-badge {
+    display: inline-block;
+    margin-right: 0.45rem;
+    padding: 0.05rem 0.38rem;
+    border-radius: 999px;
+    font-size: 0.67rem;
+    letter-spacing: 0.05rem;
+    font-weight: 700;
+    color: var(--text);
+    border: 1px solid transparent;
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.favorite-item.fav-tone-live {
+    border-left-color: #56d6c8;
+}
+
+.favorite-item.fav-tone-live .fav-type-badge {
+    background: rgba(86, 214, 200, 0.18);
+    border-color: rgba(86, 214, 200, 0.45);
+}
+
+.favorite-item.fav-tone-vod {
+    border-left-color: #f2b95c;
+}
+
+.favorite-item.fav-tone-vod .fav-type-badge {
+    background: rgba(242, 185, 92, 0.2);
+    border-color: rgba(242, 185, 92, 0.45);
+}
+
+.favorite-item.fav-tone-series {
+    border-left-color: #9cb7ff;
+}
+
+.favorite-item.fav-tone-series .fav-type-badge {
+    background: rgba(156, 183, 255, 0.2);
+    border-color: rgba(156, 183, 255, 0.45);
+}
+
+.favorite-item.fav-tone-custom {
+    border-left-color: #f08fd1;
+}
+
+.favorite-item.fav-tone-custom .fav-type-badge {
+    background: rgba(240, 143, 209, 0.2);
+    border-color: rgba(240, 143, 209, 0.45);
+}
+
+.favorite-item.fav-tone-other {
+    border-left-color: #8da2b3;
+}
+
+.favorite-item.fav-tone-other .fav-type-badge {
+    background: rgba(141, 162, 179, 0.2);
+    border-color: rgba(141, 162, 179, 0.45);
+}
+
 .player-panel {
     position: sticky;
     top: 0.6rem;