diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index f1f1a5eac..a849a80f6 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -38,9 +38,10 @@
 
   --info-background: #f0f4fd;
   --info-foreground: #141653;
-  
+
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
+  --low-indigo: #e0e7ff;
 
   --chat-bot-icon: #afe6ef;
   --chat-user-icon: #aface9;
@@ -52,6 +53,7 @@
   --chat-trigger-disabled: #b4c3da;
   --status-red: #ef4444;
   --status-yellow: #eab308;
+  --chat-send: #059669;
   --status-green: #4ade80;
   --status-blue:#2563eb;
   --connection: #555;
@@ -104,6 +106,7 @@
 
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
+  --low-indigo: #e0e7ff;
 
   /* Colors that are shared in dark and light mode */
   --blur-shared: #151923d2;
@@ -112,6 +115,7 @@
   --chat-trigger-disabled: #2d3b54;
   --status-red: #ef4444;
   --status-yellow: #eab308;
+  --chat-send: #059669;
   --status-green: #4ade80;
   --status-blue: #2563eb;
   --connection: #555;
diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx
index 63f224e92..6a5bc2ddc 100644
--- a/src/frontend/src/modals/formModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/formModal/chatInput/index.tsx
@@ -68,10 +68,10 @@ export default function ChatInput({
           className={classNames(
             "form-modal-send-button",
             noInput
-              ? "bg-indigo-600 text-background"
+              ? "bg-high-indigo text-background"
               : chatValue === ""
               ? "text-primary"
-              : "bg-emerald-600 text-background"
+              : "bg-chat-send text-background"
           )}
           disabled={lockChat}
           onClick={() => sendMessage()}
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index 0ce772a3f..f0e18a118 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -395,7 +395,7 @@ export default function FormModal({
               <span className="pr-2">Chat</span>
               <IconComponent
                 name="prompts"
-                className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
+                className="h-6 w-6 pl-1 text-foreground"
                 aria-hidden="true"
               />
             </DialogTitle>
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index cdc5af220..2b9062c5f 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -29,6 +29,8 @@ module.exports = {
     },
     extend: {
       colors: {
+        "low-indigo": "var(--low-indigo)",
+        "chat-send": "var(--chat-send)",
         connection: "var(--connection)",
         "almost-dark-gray": "var(--almost-dark-gray)",
         "almost-light-blue": "var(--almost-light-blue)",