diff --git a/templates/brutalism.html b/templates/brutalism.html
index 009964d..bef39b6 100644
--- a/templates/brutalism.html
+++ b/templates/brutalism.html
@@ -448,6 +448,18 @@
             font-weight: 700;
             letter-spacing: 0.5px;
         }
+        .category-badge {
+            display: inline-block;
+            font-size: 10px;
+            padding: 2px 6px;
+            background: var(--accent-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--bg-primary);
+            margin-left: 4px;
+            text-transform: uppercase;
+            font-weight: 700;
+            letter-spacing: 0.5px;
+        }
 
         .no-data {
             text-align: center;
@@ -844,7 +856,8 @@
             const topGames = filtered.slice(0, topN).map(g => ({
                 name: g.name,
                 playtime: g.playtime,
-                service: g.service
+                service: g.service,
+                categories: g.categories || []
             }));
 
             let othersGames = [];
@@ -853,7 +866,8 @@
                 othersGames = filtered.slice(topN).map(g => ({
                     name: g.name,
                     playtime: g.playtime,
-                    service: g.service
+                    service: g.service,
+                    categories: g.categories || []
                 }));
                 const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0);
                 const othersCount = othersGames.length;
@@ -1069,6 +1083,12 @@
                 const serviceBadge = !isOthers
                     ? `<span class="service-badge">${game.service}</span>`
                     : '';
+                const categoriesBadges = !isOthers && game.categories && game.categories.length > 0
+                    ? game.categories
+                        .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny')
+                        .map(cat => `<span class="category-badge">${cat}</span>`)
+                        .join('')
+                    : '';
                 const row = document.createElement('tr');
                 if (isOthers) {
                     row.className = 'others-row';
@@ -1077,7 +1097,7 @@
                     <td>${index + 1}</td>
                     <td>
                         <span class="color-box" style="background: ${colors[index]}"></span>
-                        ${game.name}${serviceBadge}
+                        ${game.name}${serviceBadge}${categoriesBadges}
                     </td>
                     <td class="time">${formatTime(game.playtime)}</td>
                     <td class="percent">${percent}%</td>
@@ -1088,13 +1108,19 @@
                     const detailRows = [];
                     othersGames.forEach((otherGame, otherIndex) => {
                         const otherPercent = ((otherGame.playtime / totalPlaytime) * 100).toFixed(1);
+                        const otherCategoriesBadges = otherGame.categories && otherGame.categories.length > 0
+                            ? otherGame.categories
+                                .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny')
+                                .map(cat => `<span class="category-badge">${cat}</span>`)
+                                .join('')
+                            : '';
                         const detailRow = document.createElement('tr');
                         detailRow.className = 'others-detail';
                         detailRow.innerHTML = `
                             <td>${index + 1}.${otherIndex + 1}</td>
                             <td>
                                 ${otherGame.name}
-                                <span class="service-badge">${otherGame.service}</span>
+                                <span class="service-badge">${otherGame.service}</span>${otherCategoriesBadges}
                             </td>
                             <td class="time">${formatTime(otherGame.playtime)}</td>
                             <td class="percent">${otherPercent}%</td>
diff --git a/templates/glassmorphism.html b/templates/glassmorphism.html
index ba2a58f..85f9ba0 100644
--- a/templates/glassmorphism.html
+++ b/templates/glassmorphism.html
@@ -413,6 +413,17 @@
             text-transform: capitalize;
             font-weight: 500;
         }
+        .category-badge {
+            display: inline-block;
+            font-size: 10px;
+            padding: 2px 8px;
+            background: rgba(99, 102, 241, 0.2);
+            border-radius: 12px;
+            color: var(--accent-color);
+            margin-left: 4px;
+            text-transform: capitalize;
+            font-weight: 500;
+        }
 
         .no-data {
             text-align: center;
@@ -808,7 +819,8 @@
             const topGames = filtered.slice(0, topN).map(g => ({
                 name: g.name,
                 playtime: g.playtime,
-                service: g.service
+                service: g.service,
+                categories: g.categories || []
             }));
 
             let othersGames = [];
@@ -817,7 +829,8 @@
                 othersGames = filtered.slice(topN).map(g => ({
                     name: g.name,
                     playtime: g.playtime,
-                    service: g.service
+                    service: g.service,
+                    categories: g.categories || []
                 }));
                 const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0);
                 const othersCount = othersGames.length;
@@ -1013,6 +1026,12 @@
                 const serviceBadge = !isOthers
                     ? `<span class="service-badge">${game.service}</span>`
                     : '';
+                const categoriesBadges = !isOthers && game.categories && game.categories.length > 0
+                    ? game.categories
+                        .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny')
+                        .map(cat => `<span class="category-badge">${cat}</span>`)
+                        .join('')
+                    : '';
                 const row = document.createElement('tr');
                 if (isOthers) {
                     row.className = 'others-row';
@@ -1021,7 +1040,7 @@
                     <td>${index + 1}</td>
                     <td>
                         <span class="color-box" style="background: ${colors[index]}"></span>
-                        ${game.name}${serviceBadge}
+                        ${game.name}${serviceBadge}${categoriesBadges}
                     </td>
                     <td class="time">${formatTime(game.playtime)}</td>
                     <td class="percent">${percent}%</td>
@@ -1032,13 +1051,19 @@
                     const detailRows = [];
                     othersGames.forEach((otherGame, otherIndex) => {
                         const otherPercent = ((otherGame.playtime / totalPlaytime) * 100).toFixed(1);
+                        const otherCategoriesBadges = otherGame.categories && otherGame.categories.length > 0
+                            ? otherGame.categories
+                                .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny')
+                                .map(cat => `<span class="category-badge">${cat}</span>`)
+                                .join('')
+                            : '';
                         const detailRow = document.createElement('tr');
                         detailRow.className = 'others-detail';
                         detailRow.innerHTML = `
                             <td>${index + 1}.${otherIndex + 1}</td>
                             <td>
                                 ${otherGame.name}
-                                <span class="service-badge">${otherGame.service}</span>
+                                <span class="service-badge">${otherGame.service}</span>${otherCategoriesBadges}
                             </td>
                             <td class="time">${formatTime(otherGame.playtime)}</td>
                             <td class="percent">${otherPercent}%</td>
diff --git a/templates/neumorphism.html b/templates/neumorphism.html
index 77d250a..7b60469 100644
--- a/templates/neumorphism.html
+++ b/templates/neumorphism.html
@@ -445,6 +445,20 @@
                 inset 1px 1px 2px var(--shadow-inset-dark),
                 inset -1px -1px 2px var(--shadow-inset-light);
         }
+        .category-badge {
+            display: inline-block;
+            font-size: 10px;
+            padding: 3px 10px;
+            background: var(--bg-tertiary);
+            border-radius: 12px;
+            color: var(--accent-color);
+            margin-left: 4px;
+            text-transform: capitalize;
+            font-weight: 500;
+            box-shadow:
+                inset 1px 1px 2px var(--shadow-inset-dark),
+                inset -1px -1px 2px var(--shadow-inset-light);
+        }
 
         .no-data {
             text-align: center;
@@ -845,7 +859,8 @@
             const topGames = filtered.slice(0, topN).map(g => ({
                 name: g.name,
                 playtime: g.playtime,
-                service: g.service
+                service: g.service,
+                categories: g.categories || []
             }));
 
             let othersGames = [];
@@ -854,7 +869,8 @@
                 othersGames = filtered.slice(topN).map(g => ({
                     name: g.name,
                     playtime: g.playtime,
-                    service: g.service
+                    service: g.service,
+                    categories: g.categories || []
                 }));
                 const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0);
                 const othersCount = othersGames.length;
@@ -1050,6 +1066,12 @@
                 const serviceBadge = !isOthers
                     ? `<span class="service-badge">${game.service}</span>`
                     : '';
+                const categoriesBadges = !isOthers && game.categories && game.categories.length > 0
+                    ? game.categories
+                        .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny')
+                        .map(cat => `<span class="category-badge">${cat}</span>`)
+                        .join('')
+                    : '';
                 const row = document.createElement('tr');
                 if (isOthers) {
                     row.className = 'others-row';
@@ -1058,7 +1080,7 @@
                     <td>${index + 1}</td>
                     <td>
                         <span class="color-box" style="background: ${colors[index]}"></span>
-                        ${game.name}${serviceBadge}
+                        ${game.name}${serviceBadge}${categoriesBadges}
                     </td>
                     <td class="time">${formatTime(game.playtime)}</td>
                     <td class="percent">${percent}%</td>
@@ -1069,13 +1091,19 @@
                     const detailRows = [];
                     othersGames.forEach((otherGame, otherIndex) => {
                         const otherPercent = ((otherGame.playtime / totalPlaytime) * 100).toFixed(1);
+                        const otherCategoriesBadges = otherGame.categories && otherGame.categories.length > 0
+                            ? otherGame.categories
+                                .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny')
+                                .map(cat => `<span class="category-badge">${cat}</span>`)
+                                .join('')
+                            : '';
                         const detailRow = document.createElement('tr');
                         detailRow.className = 'others-detail';
                         detailRow.innerHTML = `
                             <td>${index + 1}.${otherIndex + 1}</td>
                             <td>
                                 ${otherGame.name}
-                                <span class="service-badge">${otherGame.service}</span>
+                                <span class="service-badge">${otherGame.service}</span>${otherCategoriesBadges}
                             </td>
                             <td class="time">${formatTime(otherGame.playtime)}</td>
                             <td class="percent">${otherPercent}%</td>
diff --git a/templates/platinum.html b/templates/platinum.html
index 9fd5140..6aa52dc 100644
--- a/templates/platinum.html
+++ b/templates/platinum.html
@@ -299,6 +299,16 @@
             margin-left: 6px;
             text-transform: capitalize;
         }
+        .category-badge {
+            display: inline-block;
+            font-size: 9px;
+            padding: 1px 4px;
+            background: #D4E4FF;
+            border: 1px solid #A8C8FF;
+            color: #2d5a9f;
+            margin-left: 4px;
+            text-transform: capitalize;
+        }
         .no-data {
             text-align: center;
             padding: 20px;
@@ -680,7 +690,8 @@
             const topGames = filtered.slice(0, topN).map(g => ({
                 name: g.name,
                 playtime: g.playtime,
-                service: g.service
+                service: g.service,
+                categories: g.categories || []
             }));
 
             let othersGames = [];
@@ -689,7 +700,8 @@
                 othersGames = filtered.slice(topN).map(g => ({
                     name: g.name,
                     playtime: g.playtime,
-                    service: g.service
+                    service: g.service,
+                    categories: g.categories || []
                 }));
                 const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0);
                 const othersCount = othersGames.length;
@@ -859,6 +871,12 @@
                 const serviceBadge = !isOthers
                     ? `<span class="service-badge">${game.service}</span>`
                     : '';
+                const categoriesBadges = !isOthers && game.categories && game.categories.length > 0
+                    ? game.categories
+                        .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny')
+                        .map(cat => `<span class="category-badge">${cat}</span>`)
+                        .join('')
+                    : '';
                 const row = document.createElement('tr');
                 if (isOthers) {
                     row.className = 'others-row';
@@ -867,7 +885,7 @@
                     <td>${index + 1}</td>
                     <td>
                         <span class="color-box" style="background: ${colors[index]}"></span>
-                        ${game.name}${serviceBadge}
+                        ${game.name}${serviceBadge}${categoriesBadges}
                     </td>
                     <td class="time">${formatTime(game.playtime)}</td>
                     <td class="percent">${percent}%</td>
@@ -878,13 +896,19 @@
                     const detailRows = [];
                     othersGames.forEach((otherGame, otherIndex) => {
                         const otherPercent = ((otherGame.playtime / totalPlaytime) * 100).toFixed(1);
+                        const otherCategoriesBadges = otherGame.categories && otherGame.categories.length > 0
+                            ? otherGame.categories
+                                .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny')
+                                .map(cat => `<span class="category-badge">${cat}</span>`)
+                                .join('')
+                            : '';
                         const detailRow = document.createElement('tr');
                         detailRow.className = 'others-detail';
                         detailRow.innerHTML = `
                             <td>${index + 1}.${otherIndex + 1}</td>
                             <td>
                                 ${otherGame.name}
-                                <span class="service-badge">${otherGame.service}</span>
+                                <span class="service-badge">${otherGame.service}</span>${otherCategoriesBadges}
                             </td>
                             <td class="time">${formatTime(otherGame.playtime)}</td>
                             <td class="percent">${otherPercent}%</td>