diff --git a/src/client/public/js/guild/subscriptions.js b/src/client/public/js/guild/subscriptions.js
index a3ec25f..6d8b4d4 100644
--- a/src/client/public/js/guild/subscriptions.js
+++ b/src/client/public/js/guild/subscriptions.js
@@ -17,6 +17,8 @@ const formatTimestamp = timestamp => {
         : `${d.getDate()} ${d.toLocaleString("en-GB", { month: "short" })} ${d.getFullYear()}`;
 }
 
+//#region Table
+
 const emptyTableHtml = `
         <div class="max-w-md w-full min-h-[400px] flex flex-col justify-center mx-auto px-6 py-4">
             <div class="flex justify-center items-center size-[46px] bg-gray-100 rounded-lg dark:bg-neutral-800">
@@ -196,7 +198,12 @@ const defineTable = () => {
                 searchable: false,
                 render: (data, type, row) => {
                     return `
-
+                        <td class="size-px whitespace-nowrap align-top">
+                            <div class="px-6 py-4 text-center">
+                                <div class="inline-block rounded-md size-5 bg-red-500 mx-auto">
+                                </div>    
+                            </div>
+                        </td>
                     `;
                 }
             },
@@ -225,28 +232,52 @@ const defineTable = () => {
                 orderable: true,
                 searchable: true,
                 render: (data, type, row) => {
-                    if (!row.active) {
-                        return `
-                            <div class="px-6 py-4">
-                                <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
-                                    <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
-                                    </svg>
-                                    Inactive
-                                </span>
-                            </div>
-                        `;
+
+                    // TODO:
+                    //        fix the badge icon not showing,
+                    //        its probvably because of jquery adding a closing tag ?
+
+                    wrapper = $("<div>").addClass("px-6 py-4");
+                    badge = $("<span>").addClass("py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium rounded-full");
+                    icon = $('<svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">');
+                    label = $("<span>");
+
+                    if (row.active) {
+                        badge.addClass("bg-teal-100 text-teal-800 dark:bg-teal-500/10 dark:text-teal-500");
+                        icon.append($('<svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>'));
+                        badge.append(icon).append(label.text("Active"));
                     }
-                    return `
-                        <div class="px-6 py-4">
-                            <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
-                                <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
-                                </svg>
-                                Active
-                            </span>
-                        </div>
-                    `;
+                    else {
+                        badge.addClass("bg-red-100 text-red-800 dark:bg-red-500/10 dark:text-red-500");
+                        icon.append('<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>');
+                        badge.append(icon).append(label.text("Inactive"));
+                    }
+
+                    wrapper.append(badge);
+                    return wrapper.get(0);
+
+                    // if (!row.active) {
+                    //     return `
+                    //         <div class="px-6 py-4">
+                    //             <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
+                    //                 <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                    //                     <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+                    //                 </svg>
+                    //                 Inactive
+                    //             </span>
+                    //         </div>
+                    //     `;
+                    // }
+                    // return `
+                    //     <div class="px-6 py-4">
+                    //         <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
+                    //             <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                    //                 <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+                    //             </svg>
+                    //             Active
+                    //         </span>
+                    //     </div>
+                    // `;
                 }
             }
         ]
@@ -258,6 +289,8 @@ const defineTable = () => {
         .on("draw", onTableSelectChange);
 }
 
+//#endregion Table
+
 // Ensure the datatable recognises when all rows are selected, otherwise rows are only visually selected
 $("#selectAllBox").on("change", function() {
     this.checked ? table.dataTable.rows().select() : table.dataTable.rows().deselect();
@@ -300,8 +333,20 @@ $("input[name='filterActive']").on("change", () => {
 
 const openSubForm = () => {
     $("#subForm").removeClass("submitted");
+
+    // Clear the form values
+    $("#formName").val("");
+    $("#formUrl").val("");
     $("#formPublishedThreshold").val(new Date().toISOString().slice(0, 16));
+
+    HSSelect.getInstance("#formStyle", true).element.setValue([]);
+    HSSelect.getInstance("#formChannels", true).element.setValue([]);
+    HSSelect.getInstance("#formFilters", true).element.setValue([]);
+    $("#formChannelsInput").css("width", "");
+    $("#formFiltersInput").css("width", "");
+
     $("#formActive").prop("checked", true);
+
     HSOverlay.open($("#subModal").get(0));
 }
 
diff --git a/src/client/views/guild/subscriptions.ejs b/src/client/views/guild/subscriptions.ejs
index 5d2ecdd..1475554 100644
--- a/src/client/views/guild/subscriptions.ejs
+++ b/src/client/views/guild/subscriptions.ejs
@@ -106,39 +106,31 @@
                                         </div>
                                     </th>
                     
-                                    <th scope="col" class="px-6 py-3 text-start">
+                                    <th scope="col" class="px-6 py-3 text-start --exclude-from-ordering">
                                         <div class="flex justify-between items-center gap-x-2">
                                             <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
                                                 Channels
                                             </span>
-                                            <!-- <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                                <path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
-                                                <path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
-                                            </svg> -->
                                         </div>
                                     </th>
                     
-                                    <th scope="col" class="px-6 py-3 text-start">
+                                    <th scope="col" class="px-6 py-3 text-start --exclude-from-ordering">
                                         <div class="flex justify-between items-center gap-x-2">
                                             <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
                                                 Filters
                                             </span>
-                                            <!-- <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                                <path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
-                                                <path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
-                                            </svg> -->
                                         </div>
                                     </th>
                     
                                     <th scope="col" class="px-6 py-3 text-start">
-                                        <div class="flex justify-between items-center gap-x-2">
+                                        <div class="flex justify-between items-center gap-x-2 cursor-pointer">
                                             <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
                                                 Style
                                             </span>
-                                            <!-- <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                            <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                 <path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
                                                 <path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
-                                            </svg> -->
+                                            </svg>
                                         </div>
                                     </th>
     
@@ -332,10 +324,10 @@
                         "dropdownScope": "window",
                         "optionClasses": "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-none focus:bg-gray-100 hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
                         "mode": "tags",
-                        "tagsInputId": "formChannelsInput",
+                        "tagsInputId": "formFiltersInput",
                         "wrapperClasses": "relative ps-0.5 pe-9 min-h-[46px] flex items-center flex-wrap text-nowrap w-full border border-gray-200 rounded-lg text-start text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400",
                         "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-10 bg-white border border-gray-200 rounded-lg p-1 m-1 dark:bg-neutral-900 dark:border-neutral-700 \"><div class=\"ms-1 whitespace-nowrap text-gray-800 dark:text-neutral-200 \" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-2 rounded-lg text-gray-800 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 text-sm dark:bg-neutral-700/50 dark:hover:bg-neutral-700 dark:text-neutral-400 cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></div></div>",
-                        "tagsInputClasses": "py-3 px-2 rounded-sm order-1 text-sm outline-none dark:bg-neutral-900 dark:placeholder-neutral-500 dark:text-neutral-400",
+                        "tagsInputClasses": "py-3 px-2 rounded-lg order-1 text-sm outline-none dark:bg-neutral-900 dark:placeholder-neutral-500 dark:text-neutral-400",
                         "optionTemplate": "<div class=\"flex items-center\"><div class=\"size-8 me-2 flex shrink-0 items-center justify-center text-gray-500 dark:text-neutral-500\" data-icon></div><div><div class=\"text-sm font-semibold text-gray-800 dark:text-neutral-200 \" data-title></div><div class=\"text-xs text-gray-500 dark:text-neutral-500 \" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4 text-blue-600\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>",
                         "extraMarkup": "<div class=\"absolute top-1/2 end-3 -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-gray-500 dark:text-neutral-500 \" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
                         }' class="hidden">