diff --git a/src/interface/web/app/common/colorUtils.ts b/src/interface/web/app/common/colorUtils.ts
index 6cd57a64..a7eabb03 100644
--- a/src/interface/web/app/common/colorUtils.ts
+++ b/src/interface/web/app/common/colorUtils.ts
@@ -42,6 +42,13 @@ export function converColorToBgGradient(color: string) {
     return `${convertToBGGradientClass(color)} dark:border dark:border-neutral-700`;
 }
 
+export function convertColorToCaretClass(color: string | undefined) {
+    if (color && tailwindColors.includes(color)) {
+        return `caret-${color}-500`;
+    }
+    return `caret-orange-500`;
+}
+
 export function convertColorToRingClass(color: string | undefined) {
     if (color && tailwindColors.includes(color)) {
         return `focus-visible:ring-${color}-500`;
diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index b60228df..7d349081 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -37,7 +37,11 @@ import { Popover, PopoverContent } from "@/components/ui/popover";
 import { PopoverTrigger } from "@radix-ui/react-popover";
 import { Textarea } from "@/components/ui/textarea";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { convertColorToTextClass, convertToBGClass } from "@/app/common/colorUtils";
+import {
+    convertColorToCaretClass,
+    convertColorToTextClass,
+    convertToBGClass,
+} from "@/app/common/colorUtils";
 
 import LoginPrompt from "../loginPrompt/loginPrompt";
 import { uploadDataForIndexing } from "../../common/chatFunctions";
@@ -494,8 +498,8 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                         </div>
                         <Textarea
                             ref={chatInputRef}
-                            className={`border-none focus:border-none
-                                focus:outline-none focus-visible:ring-transparent
+                            className={`border-none focus:border-none focus:outline-none focus-visible:ring-transparent
+                                animate-carate-blink ${convertColorToCaretClass(props.agentColor)}
                                 w-full h-16 min-h-16 max-h-[128px] md:py-4 rounded-lg resize-none dark:bg-neutral-700
                                 ${props.isMobileWidth ? "text-md" : "text-lg"}`}
                             placeholder="Type / to see a list of commands"
diff --git a/src/interface/web/tailwind.config.ts b/src/interface/web/tailwind.config.ts
index cea53e8e..32e66d3b 100644
--- a/src/interface/web/tailwind.config.ts
+++ b/src/interface/web/tailwind.config.ts
@@ -32,6 +32,11 @@ const config = {
                 /ring-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|400|500|950)/,
             variants: ["focus-visible", "dark"],
         },
+        {
+            pattern:
+                /caret-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|400|500|950)/,
+            variants: ["focus", "dark"],
+        },
     ],
     darkMode: ["class"],
     content: [