diff --git a/src/components/Badge.svelte b/src/components/Badge.svelte
index 83ec74a16..5d32db374 100644
--- a/src/components/Badge.svelte
+++ b/src/components/Badge.svelte
@@ -9,6 +9,7 @@
     | "negative"
     | "positive"
     | "primary"
+    | "delegate"
     | "secondary";
   export let round: boolean = false;
   export let style: string | undefined = undefined;
@@ -38,6 +39,10 @@
     color: var(--color-foreground-match-background);
     background: var(--color-fill-gray);
   }
+  .delegate {
+    color: var(--color-foreground-primary);
+    background: var(--color-fill-delegate);
+  }
   .neutral {
     color: var(--color-foreground-contrast);
     background: var(--color-fill-ghost);
@@ -112,6 +117,7 @@
   class:medium={size === "medium"}
   class:caution={variant === "caution"}
   class:yellow={variant === "yellow"}
+  class:delegate={variant === "delegate"}
   class:outline={variant === "outline"}
   class:background={variant === "background"}
   class:foreground={variant === "foreground"}
diff --git a/src/views/projects/Source/PeerSelector.svelte b/src/views/projects/Source/PeerSelector.svelte
index 4ce0f7743..fc66e7806 100644
--- a/src/views/projects/Source/PeerSelector.svelte
+++ b/src/views/projects/Source/PeerSelector.svelte
@@ -89,12 +89,10 @@
             {item.remote.alias || formatNodeId(item.remote.id)}
           </span>
           {#if item.remote.delegate}
-            <div style:color="var(--color-fill-secondary)">
-              <Badge size="tiny" variant="primary">
-                <IconSmall name="badge" />
-                Delegate
-              </Badge>
-            </div>
+            <Badge size="tiny" variant="delegate">
+              <IconSmall name="badge" />
+              Delegate
+            </Badge>
           {/if}
         </DropdownListItem>
       </Link>