diff --git a/apps/static/js/api.js b/apps/static/js/api.js
index 2c0c8ba..e7e9a33 100644
--- a/apps/static/js/api.js
+++ b/apps/static/js/api.js
@@ -172,3 +172,14 @@ async function getGuildSettings(guildId) {
 async function editGuildSettings(id, formData) {
     return await ajaxRequest(`/api/guild-settings/${id}/`, "PUT", formData);
 }
+
+// Unique Content Rules
+
+async function getUniqueContentRules() {
+    return await ajaxRequest("/api/unique-content-rule/", "GET");
+}
+
+async function getUniqueContentRule(ruleId) {
+    return await ajaxRequest(`/api/unique-content-rule/${ruleId}/`, "GET");
+}
+
diff --git a/apps/static/js/home/index.js b/apps/static/js/home/index.js
index 4a6f07f..e150dac 100644
--- a/apps/static/js/home/index.js
+++ b/apps/static/js/home/index.js
@@ -122,12 +122,12 @@ $(document).ready(function() {
         $(this).replaceWith(`
             <label for="${id}Picker" class="form-label">${label}</label>
             <div id="${id}" class="input-group">
-                <input type="color" name="${id}Picker" id="${id}Picker" class="form-control-color input-group-text colour-picker" tabindex="${tabIndex}">
+                <input type="color" name="${id}Picker" id="${id}Picker" class="form-control-color input-group-text colour-picker rounded-start-1" tabindex="${tabIndex}">
                 <input type="text" name="${id}Text" id="${id}Text" class="form-control colour-text" tabindex="${tabIndex + 1}">
                 <button type="button" class="btn btn-secondary colour-reset" data-bs-toggle="tooltip" data-bs-title="Reset Colour" data-defaultcolour="${defaultColour}" tabindex="${tabIndex + 2}">
                     <i class="bi bi-arrow-clockwise"></i>
                 </button>
-                <button type="button" class="btn btn-secondary colour-random" data-bs-toggle="tooltip" data-bs-title="Random Colour" tabindex="${tabIndex + 3}">
+                <button type="button" class="btn btn-secondary rounded-end-1 colour-random" data-bs-toggle="tooltip" data-bs-title="Random Colour" tabindex="${tabIndex + 3}">
                     <i class="bi bi-dice-5"></i>
                 </button>
             </div>
diff --git a/apps/static/js/home/subscriptions.js b/apps/static/js/home/subscriptions.js
index 72a0aa4..4403912 100644
--- a/apps/static/js/home/subscriptions.js
+++ b/apps/static/js/home/subscriptions.js
@@ -416,6 +416,7 @@ $(document).on("selectedServerChange", async function() {
     await loadChannelOptions(guildId);
     await loadFilterOptions(guildId);
     await loadMutatorOptions();
+    await loadUniqueContentRuleOptions();
 })
 
 async function updateDefaultSubEmbedColour(settings=null) {
@@ -568,6 +569,33 @@ async function loadChannelOptions(guildId) {
     }
 }
 
+async function loadUniqueContentRuleOptions() {
+    $("#subUniqueRules").prop("disabled", true);
+
+    $("#subUniqueRules option").each(function() {
+        if ($(this).val()) { $(this).remove() }
+    });
+
+    $("#subUniqueRules").val("").change();
+
+    try {
+        const rules = await getUniqueContentRules();
+        rules.results.forEach(rule => {
+            $("#subUniqueRules").append($("<option>", {
+                text: rule.name,
+                value: rule.id
+            }));
+        });
+    }
+    catch (error) {
+        console.error(error);
+        showToast("danger", "Error loading Unique Content Rules", error, 18000);
+    }
+    finally {
+        $("#subUniqueRules").prop("disabled", false);
+    }
+}
+
 async function loadMutatorOptions() {
 
     // Disable input while options are loading
@@ -584,8 +612,6 @@ async function loadMutatorOptions() {
 
     try {
         const mutators = await getMutators();
-        console.log(JSON.stringify(mutators));
-
         mutators.forEach(mutator => {
             $(".sub-mutators-field").append($("<option>", {
                 text: mutator.name,
diff --git a/apps/templates/home/includes/submodal.html b/apps/templates/home/includes/submodal.html
index a0c2065..e4dbbc7 100644
--- a/apps/templates/home/includes/submodal.html
+++ b/apps/templates/home/includes/submodal.html
@@ -129,11 +129,18 @@
                         <div class="col-lg-6 ps-lg-4">
                             <div class="mb-4">
                                 <label for="subPubThreshold" class="form-label">Publish Datetime Threshold</label>
-                                <input type="datetime-local" name="subPubThreshold" id="subPubThreshold" class="form-control" data-field="published_threshold" tabindex="9">
+                                <input type="datetime-local" name="subPubThreshold" id="subPubThreshold" class="form-control rounded-1" data-field="published_threshold" tabindex="9">
                                 <div class="form-text">RSS content older than this datetime will be skipped.</div>
                             </div>
                         </div>
                         <div class="col-lg-6 pe-lg-4">
+                            <div>
+                                <label for="subUniqueRules">Unique Content Rules</label>
+                                <select name="subUniqueRules" id="subUniqueRules" class="select-2" multiple data-dropdownparent="#subAdvancedModal" tabindex="11"></select>
+                                <div class="form-text">Prevent duplicate articles, by identifying articles matched by these selected fields.</div>
+                            </div>
+                        </div>
+                        <div class="col-lg-6 ps-lg-4">
                             <div class="form-switch ps-0">
                                 <label for="subArticleFetchImage" class="form-check-label mb-2">Show Images on Embed?</label>
                                 <br>
@@ -145,7 +152,7 @@
                     </div>
                 </div>
                 <div class="modal-footer px-4">
-                    <button type="button" class="btn btn-primary rounded-1 me-0 ms-3" data-bs-toggle="modal" data-bs-target="#subFormModal" tabindex="11">Back</button>                    
+                    <button type="button" class="btn btn-primary rounded-1 me-0 ms-3" data-bs-toggle="modal" data-bs-target="#subFormModal" tabindex="12">Back</button>                    
                 </div>
             </form>
         </div>