diff --git a/apps/home/static/home/js/tabs/subs.js b/apps/home/static/home/js/tabs/subs.js
index a4084ad..165536e 100644
--- a/apps/home/static/home/js/tabs/subs.js
+++ b/apps/home/static/home/js/tabs/subs.js
@@ -12,13 +12,13 @@ function initSubscriptionsModule() {
             {
                 title: "Name",
                 data: "name",
-                className: "text-truncate col-3",
+                className: "text-truncate",
                 render: renderEditColumn
             },
             {
                 title: "URL",
                 data: "url",
-                className: "text-truncate col-4",
+                className: "text-truncate",
                 render: function(data, type) {
                     const url = sanitise(data);
                     return `<a href="${url}" class="btn btn-link text-start text-decoration-none" target="_blank">${url}</a>`;
@@ -32,23 +32,13 @@ function initSubscriptionsModule() {
             },
             {
                 title: "Rules",
-                data: "unique_rules",
-                className: "text-center text-nowrap col-1",
-                render: function(data, type) {
-                    let badges = $("<div>");
-                    data.forEach(function(rule, idx) {
-                        let badge = $(`<span class="badge text-bg-secondary">${rule}</span>`)  // TODO: translate to rule.name
-                        if (idx > 0) { badge.addClass("ms-2") }
-                        badges.append(badge);
-                    });
-
-                    return badges.html();
-                }
+                data: "unique_rules_detail",
+                className: "text-center text-nowrap",
+                render: data => renderArrayBadgesColumn(data.map(item => item.name))
             },
             {
                 title: "Created At",
                 data: "created_at",
-                className: "col-3",
                 render: function(data, type) {
                     let dateTime = new Date(data);
                     return $(`
@@ -66,7 +56,7 @@ function initSubscriptionsModule() {
                 title: "Enabled",
                 data: "active",
                 orderable: false,
-                className: "text-center form-switch col-1",
+                className: "text-center form-switch",
                 render: function(data, type) {
                     return `<input type="checkbox" class="sub-toggle-active form-check-input ms-0" ${data ? "checked" : ""} />`
                 }