diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 193a746220..401b05a7d9 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -1860,7 +1860,7 @@
         hsl(0deg 0% 100% / 85%),
         hsl(0deg 0% 0% / 40%)
     );
-    --color-background-compose-direct-recipient-pill-container: light-dark(
+    --color-background-pill-container: light-dark(
         hsl(0deg 0% 100%),
         hsl(0deg 0% 0% / 20%)
     );
@@ -1868,6 +1868,10 @@
         hsl(0deg 0% 93%),
         hsl(0deg 0% 0% / 20%)
     );
+    --color-border-pill-container: light-dark(
+        hsl(0deg 0% 0% / 15%),
+        hsl(0deg 0% 0% / 60%)
+    );
 
     /* Inbox view constants - Values from Figma design */
     --width-inbox-search: 29.0625em; /* 465px / 16px em */
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 4dc1ab41e1..7e74215c90 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -107,7 +107,6 @@
 
     textarea,
     select,
-    .pill-container,
     .user-status-content-wrapper,
     .custom-time-input-value,
     #organization-permissions .dropdown-widget-button,
diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index fba5c13dfe..aca296e8e5 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -4,8 +4,10 @@
     flex-wrap: wrap;
     min-width: 0;
 
+    background-color: var(--color-background-pill-container);
+
     padding: var(--outer-spacing-input-pill-container);
-    border: 1px solid hsl(0deg 0% 0% / 15%);
+    border: 1px solid var(--color-border-pill-container);
     border-radius: 4px;
     align-items: center;
 
@@ -236,9 +238,6 @@
 
 #compose-direct-recipient .pill-container {
     border: 1px solid var(--color-compose-recipient-box-border-color);
-    background-color: var(
-        --color-background-compose-direct-recipient-pill-container
-    );
 
     .input:first-child:empty::before {
         content: attr(data-no-recipients-text);