diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index 73034abd..6866f8b7 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -397,14 +397,14 @@ export default function ChatInputArea(props: ChatInputProps) {
                             <Tooltip>
                                 <TooltipTrigger asChild>
                                     <Button
-                                        variant={'ghost'}
-                                        className={`${message && 'hidden'} !bg-none p-0 m-2 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500`}
+                                        variant='default'
+                                        className={`${!recording && 'hidden'} ${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 m-2 h-auto text-3xl transition transform md:hover:-translate-y-1`}
                                         onClick={() => {
                                             setRecording(!recording);
                                         }}
                                         disabled={props.sendDisabled}
                                     >
-                                        <Stop weight='fill' className='w-8 h-8' />
+                                        <Stop weight='fill' className='w-6 h-6' />
                                     </Button>
                                 </TooltipTrigger>
                                 <TooltipContent>
@@ -421,15 +421,15 @@ export default function ChatInputArea(props: ChatInputProps) {
                                     <Tooltip>
                                         <TooltipTrigger asChild>
                                             <Button
-                                                variant={'ghost'}
-                                                className={`${message && 'hidden'} !bg-none p-0 m-2 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500`}
+                                                variant='default'
+                                                className={`${(!message || recording) || 'hidden'} ${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 m-2 h-auto text-3xl transition transform md:hover:-translate-y-1`}
                                                 onClick={() => {
                                                     setMessage("Listening...");
                                                     setRecording(!recording);
                                                 }}
                                                 disabled={props.sendDisabled}
                                             >
-                                                <Microphone weight='fill' className='w-8 h-8' />
+                                                <Microphone weight='fill' className='w-6 h-6' />
                                             </Button>
                                         </TooltipTrigger>
                                         <TooltipContent>
@@ -440,7 +440,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                         )
                 }
                 <Button
-                    className={`${!message && 'hidden'} ${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 m-2 h-auto text-3xl transition transform md:hover:-translate-y-1`}
+                    className={`${(!message || recording) && 'hidden'} ${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 m-2 h-auto text-3xl transition transform md:hover:-translate-y-1`}
                     onClick={onSendMessage}
                     disabled={props.sendDisabled}>
                     <ArrowUp className='w-6 h-6' weight='bold' />