diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 32f47e02d5..158df6d2e4 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -223,6 +223,7 @@
     --color-masked-unread-marker: hsl(0deg 0% 80%);
     --color-failed-message-send-icon: hsl(3.88deg 98.84% 66.27%);
     --color-background-modal: hsl(0deg 0% 98%);
+    --color-background-invitee-emails-pill-container: hsl(0deg 0% 100%);
     --color-unmuted-or-followed-topic-list-item: hsl(0deg 0% 20%);
     --color-outline-focus: hsl(215deg 47% 50%);
     --color-background-search: hsl(0deg 0% 100%);
@@ -559,6 +560,7 @@
     --color-unread-marker: hsl(217deg 64% 59%);
     --color-masked-unread-marker: hsl(0deg 0% 30%);
     --color-background-modal: hsl(212deg 28% 18%);
+    --color-background-invitee-emails-pill-container: hsl(0deg 0% 0% / 20%);
     --color-unmuted-or-followed-topic-list-item: hsl(236deg 33% 90%);
     --color-recipient-bar-controls-spinner: hsl(0deg 0% 100%);
     --color-background-search: hsl(0deg 0% 20%);
diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index 5a4e2d129a..7749c54d70 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -143,6 +143,8 @@
 
 #invitee_emails_container .pill-container {
     width: 100%;
+    box-sizing: border-box;
+    background-color: var(--color-background-invitee-emails-pill-container);
 }
 
 .deactivated-pill {