diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 782aef44e..a16aec367 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -6,8 +6,8 @@
 /* TODO: Confirm that all colors here are found in tailwind config */
 
 @layer base {
-
-:root {
+  
+  :root {
   --background: 0 0% 100%; /* hsl(0 0% 100%) */
   --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
   --muted: 210 40% 98%; /* hsl(210 40% 98%) */
@@ -28,21 +28,24 @@
   --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
   --radius: 0.5rem;
   --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-
+  
   --round-btn-shadow: #00000063;
-
+  
   --error-background: #fef2f2;
   --error-foreground: #991b1b;
-
+  
   --success-background: #f0fdf4;
   --success-foreground: #14532d;
 
   --info-background: #f0f4fd;
   --info-foreground: #141653;
-
+  
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
 
+  --chat-bot-icon: #afe6ef;
+  --chat-user-icon: #aface9;
+  
   /* Colors that are shared in dark and light mode */
   --blur-shared: #151923de;
   --build-trigger: 	#dc735b;
@@ -921,7 +924,7 @@ The cursor: default; property value restores the browser's default cursor style
     @apply bg-white text-black
   }
   .form-modal-lockchat {
-    @apply form-input block w-full rounded-md border-gray-300 p-4 pr-16 custom-scroll sm:text-sm
+    @apply form-input block w-full rounded-md border-border p-4 pr-16 custom-scroll sm:text-sm
   }
   .form-modal-send-icon-position {
     @apply absolute bottom-2 right-4
@@ -948,10 +951,10 @@ The cursor: default; property value restores the browser's default cursor style
     @apply relative flex h-8 w-8 items-center justify-center overflow-hidden rounded-md p-5 text-2xl
   }
   .form-modal-chat-bot-icon {
-    @apply form-modal-chat-img-box bg-[#afe6ef]
+    @apply form-modal-chat-img-box bg-chat-bot-icon
   }
   .form-modal-chat-user-icon {
-    @apply form-modal-chat-img-box bg-[#aface9]
+    @apply form-modal-chat-img-box bg-chat-user-icon
   }
   .form-modal-chat-icon-img {
     @apply absolute scale-[60%]
@@ -1035,13 +1038,13 @@ The cursor: default; property value restores the browser's default cursor style
     @apply flex-max-width h-full flex-col items-center justify-center text-center align-middle
   }
   .langflow-chat-span {
-    @apply text-lg text-gray-600
+    @apply text-lg text-foreground
   }
   .langflow-chat-desc {
-    @apply w-2/4 rounded-md border border-gray-200 bg-muted px-6 py-8
+    @apply w-2/4 rounded-md border border-border bg-muted px-6 py-8
   }
   .langflow-chat-desc-span {
-    @apply text-base text-gray-500
+    @apply text-base text-muted-foreground
   }
   .langflow-chat-input-div {
     @apply flex-max-width flex-col items-center justify-between px-8 pb-6
@@ -1054,4 +1057,4 @@ The cursor: default; property value restores the browser's default cursor style
     @apply max-w-[30vw] max-h-[20vh] overflow-auto
   }
 
-}
\ No newline at end of file
+}
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index b3d296560..fe121a030 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -82,6 +82,8 @@ module.exports = {
         "status-yellow": "var(--status-yellow)",
         "success-background": "var(--success-background)",
         "success-foreground": "var(--success-foreground)",
+        "chat-bot-icon": "var(--chat-bot-icon)",
+        "chat-user-icon": "var(--chat-user-icon)",
 
         white: "var(--white)",
         border: "hsl(var(--border))",
@@ -224,4 +226,4 @@ module.exports = {
     require("@tailwindcss/typography"),
     require("daisyui"),
   ],
-};
+};
\ No newline at end of file