diff --git a/docs/config/firewall.mdx b/docs/config/firewall.mdx
index a09afdbd..ddef58b6 100644
--- a/docs/config/firewall.mdx
+++ b/docs/config/firewall.mdx
@@ -140,6 +140,8 @@ enabling the built-in Nebula SSH server, you may wish to grant access over the N
 ## firewall.default_local_cidr_any
 
 <Pill className="mb-24">Default: False</Pill> <Pill className="mb-24">Reloadable</Pill>
+{/** children passed as prop to avoid MDX generating a paragraph inside Pill */}
+<Pill className="mb-24" variant="warning" children="Deprecated" />
 
 This setting was introduced in Nebula v1.9.0 set to `true` for backwards compatibility purposes. The default was changed
 to `false` in Nebula v1.10.0 and the config option is now deprecated.
diff --git a/src/components/Pill/Pill.module.css b/src/components/Pill/Pill.module.css
index 84c54c82..12ec1efb 100644
--- a/src/components/Pill/Pill.module.css
+++ b/src/components/Pill/Pill.module.css
@@ -5,15 +5,20 @@
   font-weight: 600;
   line-height: 1;
   border-radius: 10rem;
-  background-color: var(--ifm-color-emphasis-200);
   padding: 4px 8px;
 
   &:global(.no-transform),
-  & :global(.no-transform) {
+  &:global(.no-transform) {
     text-transform: none;
   }
 }
 
 .Pill___info {
   color: var(--ifm-color-secondary-contrast-foreground);
+  background-color: var(--ifm-color-secondary-contrast-background);
+}
+
+.Pill___warning {
+  background-color: var(--ifm-color-warning-contrast-background);
+  color: var(--ifm-color-warning-contrast-foreground);
 }
diff --git a/src/components/Pill/Pill.tsx b/src/components/Pill/Pill.tsx
index 5344a234..2034a9e6 100644
--- a/src/components/Pill/Pill.tsx
+++ b/src/components/Pill/Pill.tsx
@@ -4,7 +4,7 @@ import styles from './Pill.module.css';
 type Props = {
   children: React.ReactNode;
   className?: string;
-  variant?: 'info';
+  variant?: 'info' | 'warning';
 };
 
 export function Pill({ children, className, variant = 'info' }) {