diff --git a/src/frontend/src/components/content/PlanChatBody.tsx b/src/frontend/src/components/content/PlanChatBody.tsx
index 5d9a8869..ea1c60fb 100644
--- a/src/frontend/src/components/content/PlanChatBody.tsx
+++ b/src/frontend/src/components/content/PlanChatBody.tsx
@@ -1,11 +1,12 @@
 import ChatInput from "@/coral/modules/ChatInput";
 import { PlanChatProps } from "@/models";
-import { Button } from "@fluentui/react-components";
-import { SendRegular } from "@fluentui/react-icons";
+import { Button, Caption1 } from "@fluentui/react-components";
+import { Send } from "@/coral/imports/bundleicons";
 
 interface SimplifiedPlanChatProps extends PlanChatProps {
     waitingForPlan: boolean;
 }
+
 const PlanChatBody: React.FC<SimplifiedPlanChatProps> = ({
     planData,
     input,
@@ -15,38 +16,91 @@ const PlanChatBody: React.FC<SimplifiedPlanChatProps> = ({
     waitingForPlan
 }) => {
     return (
-
         <div
             style={{
-                padding: '20px 24px 32px',
-                borderTop: '1px solid var(--colorNeutralStroke2)',
                 backgroundColor: 'var(--colorNeutralBackground1)',
-                maxWidth: '800px',
-                margin: '0 auto',
-                width: '98%'
+                padding: '20px 0'
             }}
-
         >
-            <ChatInput
-                value={input}
-                onChange={setInput}
-                onEnter={() => OnChatSubmit(input)}
-                disabledChat={submittingChatDisableInput}
-                placeholder={
-                    waitingForPlan
-                        ? "Creating plan..."
-                        : "Add more info to this plan..."
-                }
+            <div
+                style={{
+                    maxWidth: '800px',
+                    margin: '0 auto',
+                    padding: '0 24px'
+                }}
+            >
+                {/* Chat Input Container */}
+                <div style={{
+                    position: 'relative',
+                    width: '100%'
+                }}>
+                    <ChatInput
+                        value={input}
+                        onChange={setInput}
+                        onEnter={() => OnChatSubmit(input)}
+                        disabledChat={submittingChatDisableInput}
+                        placeholder={
+                            waitingForPlan
+                                ? "Creating plan..."
+                                : "Tell us what needs planning, building, or connecting—we'll handle the rest."
+                        }
+                        style={{
+                            minHeight: '56px',
+                            fontSize: '16px',
+                            borderRadius: '8px',
+                            border: '2px solid var(--colorNeutralStroke2)',
+                            backgroundColor: 'var(--colorNeutralBackground1)',
+                            padding: '16px 60px 16px 20px',
+                            width: '100%',
+                            boxSizing: 'border-box',
+                            alignItems: 'flex-start',
+                            textAlign: 'left',
+                            verticalAlign: 'top'
+                        }}
+                    >
+                        <Button
+                            appearance="subtle"
+                            className="home-input-send-button"
+                            onClick={() => OnChatSubmit(input)}
+                            disabled={submittingChatDisableInput}
+                            icon={<Send />}
+                            style={{
+                                position: 'absolute',
+                                right: '12px',
+                                top: '16px',
+                                height: '32px',
+                                width: '32px',
+                                borderRadius: '4px',
+                                backgroundColor: 'transparent',
+                                border: 'none',
+                                color: submittingChatDisableInput 
+                                    ? 'var(--colorNeutralForegroundDisabled)' 
+                                    : 'var(--colorBrandForeground1)'
+                            }}
+                        />
+                    </ChatInput>
+
+                    {/* AI disclaimer */}
+                    <div style={{
+                        color: 'var(--colorNeutralForeground3)',
+                        marginTop: '8px',
+                        paddingBottom: '8px',
+                        textAlign: 'center'
+                    }}>
+                        {/* <Caption1>AI-generated content may be incorrect</Caption1> */}
+                    </div>
+                </div>
+            </div>
+            <div
+                style={{
+                    marginTop: '8px',
+                    paddingBottom: '8px',
+                }}
             >
-                <Button
-                    appearance="transparent"
-                    onClick={() => OnChatSubmit(input)}
-                    icon={<SendRegular />}
-                    disabled={submittingChatDisableInput}
-                    style={{ height: '40px', width: '40px' }}
-                />
-            </ChatInput>
-        </div>);
+               
+            </div>
+        </div>
+    );
 }
 
 export default PlanChatBody;
\ No newline at end of file
diff --git a/src/frontend/src/components/content/streaming/StreamingAgentMessage.tsx b/src/frontend/src/components/content/streaming/StreamingAgentMessage.tsx
index efd1f34e..81b62af2 100644
--- a/src/frontend/src/components/content/streaming/StreamingAgentMessage.tsx
+++ b/src/frontend/src/components/content/streaming/StreamingAgentMessage.tsx
@@ -1,94 +1,278 @@
-import { AgentMessageData, AgentMessageType, role } from "@/models";
+import React from "react";
+import { AgentMessageData, AgentMessageType } from "@/models";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypePrism from "rehype-prism";
-import { Body1, Button, Tag } from "@fluentui/react-components";
+import { Body1, Button, Tag, makeStyles, tokens } from "@fluentui/react-components";
 import { TaskService } from "@/services";
 import { Copy } from "@/coral/imports/bundleicons";
-import { DiamondRegular, HeartRegular } from "@fluentui/react-icons";
+import { PersonRegular, Code20Regular } from "@fluentui/react-icons";
+import { TeamService } from "@/services/TeamService";
+import { iconMap } from "@/models/homeInput";
 
+const useStyles = makeStyles({
+  container: {
+    maxWidth: '800px',
+    margin: '0 auto 32px auto',
+    padding: '0 24px',
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: '16px',
+    fontFamily: tokens.fontFamilyBase
+  },
+  avatar: {
+    width: '32px',
+    height: '32px',
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0
+  },
+  humanAvatar: {
+    backgroundColor: 'var(--colorBrandBackground)'
+  },
+  botAvatar: {
+    backgroundColor: 'var(--colorNeutralBackground3)'
+  },
+  messageContent: {
+    flex: 1,
+    maxWidth: 'calc(100% - 48px)',
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  humanMessageContent: {
+    alignItems: 'flex-end'
+  },
+  botMessageContent: {
+    alignItems: 'flex-start'
+  },
+  agentHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    marginBottom: '8px'
+  },
+  agentName: {
+    fontWeight: '600',
+    fontSize: '14px',
+    color: 'var(--colorNeutralForeground1)',
+    lineHeight: '20px'
+  },
+  botBadge: {
+    fontSize: '11px',
+    fontWeight: '600',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
+    backgroundColor: 'var(--colorNeutralBackground3)',
+    color: 'var(--colorNeutralForeground1)',
+    border: '1px solid var(--colorNeutralStroke2)',
+    padding: '2px 8px',
+    borderRadius: '4px'
+  },
+  messageBubble: {
+    padding: '12px 16px',
+    borderRadius: '8px',
+    fontSize: '14px',
+    lineHeight: '1.5',
+    wordWrap: 'break-word'
+  },
+  humanBubble: {
+    backgroundColor: 'var(--colorBrandBackground)',
+    color: 'var(--colorNeutralForegroundInverted)',
+    maxWidth: '80%',
+    alignSelf: 'flex-end'
+  },
+  botBubble: {
+    backgroundColor: 'var(--colorNeutralBackground2)',
+    color: 'var(--colorNeutralForeground1)',
+    maxWidth: '100%',
+    alignSelf: 'flex-start'
+  },
+ 
+  clarificationBubble: {
+    backgroundColor: 'var(--colorNeutralBackground2)',
+    color: 'var(--colorNeutralForeground1)',
+    padding: '6px 8px', // Reduced from 12px 16px
+    borderRadius: '8px',
+    fontSize: '14px',
+    lineHeight: '1.5',
+    wordWrap: 'break-word',
+    maxWidth: '100%',
+    alignSelf: 'flex-start'
+  },
+  actionContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: '12px',
+    paddingTop: '8px',
+    borderTop: '1px solid var(--colorNeutralStroke2)'
+  },
+  copyButton: {
+    height: '28px',
+    width: '28px'
+  },
+  sampleTag: {
+    fontSize: '11px',
+    opacity: 0.7
+  }
+});
 
-const StreamingAgentMessage = (agentMessages: AgentMessageData[]) => {
+// Function to get agent icon from team configuration
+const getAgentIconFromTeam = (agentName: string): React.ReactNode => {
+  const storedTeam = TeamService.getStoredTeam();
+  
+  if (!storedTeam?.agents) {
+    return <Code20Regular style={{ fontSize: '16px', color: 'var(--colorNeutralForeground2)' }} />;
+  }
+
+  const cleanAgentName = TaskService.cleanTextToSpaces(agentName);
+  
+  const agent = storedTeam.agents.find(a => 
+    TaskService.cleanTextToSpaces(a.name).toLowerCase().includes(cleanAgentName.toLowerCase()) ||
+    a.type.toLowerCase().includes(cleanAgentName.toLowerCase()) ||
+    a.input_key.toLowerCase().includes(cleanAgentName.toLowerCase())
+  );
+
+  if (agent?.icon && iconMap[agent.icon]) {
+    return React.cloneElement(iconMap[agent.icon] as React.ReactElement, {
+      style: { fontSize: '16px', color: 'var(--colorNeutralForeground2)' }
+    });
+  }
+
+  return <Code20Regular style={{ fontSize: '16px', color: 'var(--colorNeutralForeground2)' }} />;
+};
+
+// Check if message is a clarification request
+const isClarificationMessage = (content: string): boolean => {
+  const clarificationKeywords = [
+    'need clarification',
+    'please clarify',
+    'could you provide more details',
+    'i need more information',
+    'please specify',
+    'what do you mean by',
+    'clarification about'
+  ];
+  
+  const lowerContent = content.toLowerCase();
+  return clarificationKeywords.some(keyword => lowerContent.includes(keyword));
+};
+
+const renderAgentMessages = (agentMessages: AgentMessageData[]) => {
+  const styles = useStyles();
+  
   if (!agentMessages?.length) return null;
 
   // Filter out messages with empty content
   const validMessages = agentMessages.filter(msg => msg.content?.trim());
-  const messages = validMessages;
   if (!validMessages.length) return null;
 
   return (
-
-
-    <div className="message-wrapper">
-      {messages.map((msg, index) => {
+    <>
+      {validMessages.map((msg, index) => {
         const isHuman = msg.agent_type === AgentMessageType.HUMAN_AGENT;
+        const isClarification = !isHuman && isClarificationMessage(msg.content || '');
 
         return (
           <div
             key={index}
-            className={`message ${isHuman ? role.user : role.assistant}`}
+            className={styles.container}
+            style={{
+              flexDirection: isHuman ? 'row-reverse' : 'row'
+            }}
           >
-            {!isHuman && (
-              <div className="plan-chat-header">
-                <div className="plan-chat-speaker">
-                  <Body1 className="speaker-name">
+            {/* Avatar */}
+            <div className={`${styles.avatar} ${isHuman ? styles.humanAvatar : styles.botAvatar}`}>
+              {isHuman ? (
+                <PersonRegular style={{ fontSize: '16px', color: 'white' }} />
+              ) : (
+                getAgentIconFromTeam(msg.agent)
+              )}
+            </div>
+
+            {/* Message Content */}
+            <div className={`${styles.messageContent} ${isHuman ? styles.humanMessageContent : styles.botMessageContent}`}>
+              {/* Agent Header (only for bots) */}
+              {!isHuman && (
+                <div className={styles.agentHeader}>
+                  <Body1 className={styles.agentName}>
                     {TaskService.cleanTextToSpaces(msg.agent)}
                   </Body1>
                   <Tag
                     size="extra-small"
                     shape="rounded"
-                    appearance="brand"
-                    className="bot-tag"
+                    appearance="filled"
+                    className={styles.botBadge}
                   >
                     BOT
                   </Tag>
                 </div>
-              </div>
-            )}
+              )}
 
-            <Body1>
-              <div className="plan-chat-message-content">
+              {/* Message Bubble */}
+              <div className={
+                isHuman 
+                  ? `${styles.messageBubble} ${styles.humanBubble}`
+                  : isClarification 
+                    ? styles.clarificationBubble 
+                    : `${styles.messageBubble} ${styles.botBubble}`
+              }>
                 <ReactMarkdown
                   remarkPlugins={[remarkGfm]}
                   rehypePlugins={[rehypePrism]}
+                  components={{
+                      a: ({ node, ...props }) => (
+                        <a
+                          {...props}
+                          style={{
+                            color: 'var(--colorNeutralBrandForeground1)',
+                            textDecoration: 'none'
+                          }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.textDecoration = 'underline';
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.textDecoration = 'none';
+                          }}
+                        />
+                      )
+                    }}
                 >
                   {TaskService.cleanHRAgent(msg.content) || ""}
                 </ReactMarkdown>
 
+                {/* Action buttons for bot messages */}
                 {!isHuman && (
-                  <div className="assistant-footer">
-                    <div className="assistant-actions">
-                      <div>
-                        <Button
-                          onClick={() =>
-                            msg.content &&
-                            navigator.clipboard.writeText(msg.content)
-                          }
-                          title="Copy Response"
-                          appearance="subtle"
-                          style={{ height: 28, width: 28 }}
-                          icon={<Copy />}
-                        />
-                      </div>
-
-                      <Tag
-                        icon={<DiamondRegular />}
-                        appearance="filled"
-                        size="extra-small"
-                      >
-                        Sample data for demonstration purposes only.
-                      </Tag>
-                    </div>
+                  <div className={styles.actionContainer}>
+                    <Button
+                      onClick={() =>
+                        msg.content &&
+                        navigator.clipboard.writeText(msg.content)
+                      }
+                      title="Copy Response"
+                      appearance="subtle"
+                      size="small"
+                      icon={<Copy />}
+                      className={styles.copyButton}
+                    />
+                    
+                    <Tag
+                      appearance="filled"
+                      size="extra-small"
+                      className={styles.sampleTag}
+                    >
+                      Sample data for demonstration purposes only.
+                    </Tag>
                   </div>
                 )}
               </div>
-            </Body1>
+            </div>
           </div>
         );
       })}
-    </div>
-
+    </>
   );
 };
 
-export default StreamingAgentMessage;
\ No newline at end of file
+export default renderAgentMessages;
\ No newline at end of file
diff --git a/src/frontend/src/components/content/streaming/StreamingBufferMessage.tsx b/src/frontend/src/components/content/streaming/StreamingBufferMessage.tsx
index 5710b891..8e888d27 100644
--- a/src/frontend/src/components/content/streaming/StreamingBufferMessage.tsx
+++ b/src/frontend/src/components/content/streaming/StreamingBufferMessage.tsx
@@ -19,103 +19,124 @@ const renderBufferMessage = (streamingMessageBuffer: string) => {
 
     return (
         <div style={{
-            backgroundColor: 'var(--colorNeutralBackground2)',
-            border: '1px solid var(--colorNeutralStroke1)',
-            borderRadius: '8px',
-            padding: '16px',
-            marginBottom: '16px'
+            maxWidth: '800px',
+            margin: '0 auto 32px auto',
+            padding: '0 24px'
         }}>
-
             <div style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                marginBottom: isExpanded ? '16px' : '8px'
+                backgroundColor: 'var(--colorNeutralBackground2)',
+                border: '1px solid var(--colorNeutralStroke2)',
+                borderRadius: '8px',
+                padding: '16px',
+                fontSize: '14px',
+                lineHeight: '1.5'
             }}>
+                {/* Header */}
                 <div style={{
                     display: 'flex',
+                    justifyContent: 'space-between',
                     alignItems: 'center',
-                    gap: '12px'
+                    marginBottom: isExpanded ? '16px' : '8px'
                 }}>
-                    <CheckmarkCircle20Regular style={{
-                        color: 'var(--colorNeutralForeground1)',
-                        fontSize: '20px',
-                        width: '20px',
-                        height: '20px',
-                        flexShrink: 0
-                    }} />
-                    <span style={{
-                        fontWeight: '500',
-                        color: 'var(--colorNeutralForeground1)',
-                        fontSize: '14px',
-                        lineHeight: '20px'
+                    <div style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '12px'
                     }}>
-                        AI Thinking Process
-                    </span>
+                        <CheckmarkCircle20Regular style={{
+                            fontSize: '20px',
+                            color: 'var(--colorNeutralForeground1)',
+                            width: '20px',
+                            height: '20px',
+                            flexShrink: 0
+                        }} />
+                        <span style={{
+                            fontWeight: '500',
+                            color: 'var(--colorNeutralForeground1)',
+                            fontSize: '14px',
+                            lineHeight: '20px'
+                        }}>
+                            AI Thinking Process
+                        </span>
+                    </div>
+
+                    <Button
+                        appearance="secondary"
+                        size="small"
+                        onClick={() => setIsExpanded(!isExpanded)}
+                        style={{
+                            backgroundColor: 'var(--colorNeutralBackground3)',
+                            border: '1px solid var(--colorNeutralStroke2)',
+                            borderRadius: '16px',
+                            padding: '4px 12px',
+                            fontSize: '14px'
+                        }}
+                    >
+                        Details
+                    </Button>
                 </div>
 
-                <Button
-                    appearance="secondary"
-                    size="small"
-                    // icon={isExpanded ? <ChevronDownRegular /> : <ChevronRightRegular />}
-                    onClick={() => setIsExpanded(!isExpanded)}
-                    style={{
-                        backgroundColor: 'var(--colorNeutralBackground3)',
-                        border: '1px solid var(--colorNeutralStroke2)',
-                        borderRadius: '16px',
-                        padding: '4px 12px',
-                        fontSize: '14px'
+                {/* Preview content when collapsed */}
+                {!isExpanded && (
+                    <div style={{
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                        gap: '8px',
+                        marginLeft: '32px'
+                    }}>
+                        <ArrowTurnDownRightRegular style={{
+                            color: 'var(--colorNeutralForeground3)',
+                            fontSize: '14px',
+                            marginTop: '2px',
+                            flexShrink: 0
+                        }} />
+                        <div style={{
+                            color: 'var(--colorNeutralForeground2)',
+                            fontSize: '14px',
+                            lineHeight: '1.4'
+                        }}>
+                            <ReactMarkdown
+                                remarkPlugins={[remarkGfm]}
+                                rehypePlugins={[rehypePrism]}
+                                 components={{
+                      a: ({ node, ...props }) => (
+                        <a
+                          {...props}
+                          style={{
+                            color: 'var(--colorNeutralBrandForeground1)',
+                            textDecoration: 'none'
+                          }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.textDecoration = 'underline';
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.textDecoration = 'none';
+                          }}
+                        />
+                      )
                     }}
-                >
-                    Details
-                </Button>
-            </div>
+                            >
+                                {previewText}
+                            </ReactMarkdown>
+                        </div>
+                    </div>
+                )}
 
-            {!isExpanded && (
-                <div style={{
-                    display: 'flex',
-                    alignItems: 'flex-start',
-                    gap: '8px',
-                    marginLeft: '32px'
-                }}>
-                    <ArrowTurnDownRightRegular style={{
-                        color: 'var(--colorNeutralForeground3)',
-                        fontSize: '14px',
-                        marginTop: '2px',
-                        flexShrink: 0
-                    }} />
+                {/* Full content when expanded */}
+                {isExpanded && (
                     <div style={{
-                        color: 'var(--colorNeutralForeground2)',
-                        fontSize: '14px',
-                        lineHeight: '1.4'
+                        padding: '12px',
+                        marginTop: '8px'
                     }}>
                         <ReactMarkdown
                             remarkPlugins={[remarkGfm]}
                             rehypePlugins={[rehypePrism]}
                         >
-                            {previewText}
+                            {streamingMessageBuffer}
                         </ReactMarkdown>
-
                     </div>
-                </div>
-            )}
-
-            {isExpanded && (
-                <div style={{
-                    // backgroundColor: 'var(--colorNeutralBackground1)',
-                    // border: '1px solid var(--colorNeutralStroke1)',
-                    // borderRadius: '6px',
-                    padding: '12px',
-                    marginTop: '8px'
-                }}>
-                    <ReactMarkdown
-                        remarkPlugins={[remarkGfm]}
-                        rehypePlugins={[rehypePrism]}
-                    >
-                        {streamingMessageBuffer}
-                    </ReactMarkdown>
-                </div>
-            )}
+                )}
+            </div>
         </div>
     );
 };
diff --git a/src/frontend/src/components/content/streaming/StreamingPlanResponse.tsx b/src/frontend/src/components/content/streaming/StreamingPlanResponse.tsx
index 723a4cec..2e2d91b6 100644
--- a/src/frontend/src/components/content/streaming/StreamingPlanResponse.tsx
+++ b/src/frontend/src/components/content/streaming/StreamingPlanResponse.tsx
@@ -1,86 +1,120 @@
 import { MPlanData } from "@/models";
 import { 
     Button, 
-    Text, 
-    Title3, 
+    Text,  
     Body1, 
-    Caption1,
     Badge,
     makeStyles,
     tokens
 } from "@fluentui/react-components";
 import { 
-    BotRegular, 
-    Copy20Regular, 
-    InfoRegular, 
-    ClockRegular,
     CheckmarkCircle20Regular 
 } from "@fluentui/react-icons";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import rehypePrism from "rehype-prism";
 import React, { useState } from 'react';
+import { TeamService } from "@/services/TeamService";
+import { TaskService } from "@/services";
+import { iconMap } from "@/models/homeInput";
+import { Desktop20Regular } from "@fluentui/react-icons";
 
-// FluentUI styles using design tokens with 14px max font size
+// Function to get agent icon from team configuration
+const getAgentIconFromTeam = (agentName: string): React.ReactNode => {
+  const storedTeam = TeamService.getStoredTeam();
+  
+  if (!storedTeam?.agents) {
+    return <Desktop20Regular style={{ fontSize: '16px', color: 'var(--colorNeutralForeground2)' }} />;
+  }
+
+  const cleanAgentName = TaskService.cleanTextToSpaces(agentName);
+  
+  const agent = storedTeam.agents.find(a => 
+    TaskService.cleanTextToSpaces(a.name).toLowerCase().includes(cleanAgentName.toLowerCase()) ||
+    a.type.toLowerCase().includes(cleanAgentName.toLowerCase()) ||
+    a.input_key.toLowerCase().includes(cleanAgentName.toLowerCase())
+  );
+
+  if (agent?.icon && iconMap[agent.icon]) {
+    return React.cloneElement(iconMap[agent.icon] as React.ReactElement, {
+      style: { fontSize: '16px', color: 'var(--colorNeutralForeground2)' }
+    });
+  }
+
+  // Use Desktop icon for AI agents instead of Person icon
+  return <Desktop20Regular style={{ fontSize: '16px', color: 'var(--colorNeutralForeground2)' }} />;
+};
+
+// Updated styles to match consistent spacing and remove brand colors from bot elements
 const useStyles = makeStyles({
     container: {
         maxWidth: '800px',
-        margin: '0 auto',
-        padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXL}`,
-        backgroundColor: tokens.colorNeutralBackground1,
+        margin: '0 auto 32px auto',
+        padding: '0 24px',
         fontFamily: tokens.fontFamilyBase
     },
     agentHeader: {
         display: 'flex',
         alignItems: 'center',
-        gap: tokens.spacingHorizontalM,
-        marginBottom: tokens.spacingVerticalXL,
-        padding: tokens.spacingVerticalM,
-        backgroundColor: tokens.colorNeutralBackground2,
-        borderRadius: tokens.borderRadiusMedium
+        gap: '16px',
+        marginBottom: '8px'
     },
     agentAvatar: {
         width: '32px',
         height: '32px',
         borderRadius: '50%',
-        backgroundColor: tokens.colorBrandForeground1,
+        backgroundColor: 'var(--colorNeutralBackground3)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         flexShrink: 0
     },
+    hiddenAvatar: {
+        width: '32px',
+        height: '32px',
+        visibility: 'hidden',
+        flexShrink: 0
+    },
     agentInfo: {
         display: 'flex',
         alignItems: 'center',
-        gap: tokens.spacingHorizontalM,
+        gap: '12px',
         flex: 1
     },
     agentName: {
         fontSize: '14px',
-        fontWeight: tokens.fontWeightSemibold,
-        color: tokens.colorNeutralForeground1,
-        lineHeight: tokens.lineHeightBase400
+        fontWeight: '600',
+        color: 'var(--colorNeutralForeground1)',
+        lineHeight: '20px'
     },
     botBadge: {
-        border: 'none',
         fontSize: '11px',
-        fontWeight: tokens.fontWeightSemibold,
+        fontWeight: '600',
         textTransform: 'uppercase',
-        letterSpacing: '0.5px'
+        letterSpacing: '0.5px',
+        backgroundColor: 'var(--colorNeutralBackground3)',
+        color: 'var(--colorNeutralForeground1)',
+        border: '1px solid var(--colorNeutralStroke2)',
+        padding: '2px 8px',
+        borderRadius: '4px'
+    },
+    messageContainer: {
+        backgroundColor: 'var(--colorNeutralBackground2)',
+        padding: '12px 16px',
+        borderRadius: '8px',
+        fontSize: '14px',
+        lineHeight: '1.5',
+        wordWrap: 'break-word'
     },
     factsSection: {
-        marginBottom: tokens.spacingVerticalXL,
-        marginLeft: `calc(32px + ${tokens.spacingHorizontalM} + ${tokens.spacingVerticalM})`,
-        backgroundColor: tokens.colorNeutralBackground2,
-        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        backgroundColor: 'var(--colorNeutralBackground2)',
+        border: '1px solid var(--colorNeutralStroke2)',
         borderRadius: '8px',
-        padding: '16px'
+        padding: '16px',
+        marginBottom: '16px'
     },
     factsHeader: {
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: '8px'
+        marginBottom: '12px'
     },
     factsHeaderLeft: {
         display: 'flex',
@@ -89,78 +123,87 @@ const useStyles = makeStyles({
     },
     factsTitle: {
         fontWeight: '500',
-        color: tokens.colorNeutralForeground1,
+        color: 'var(--colorNeutralForeground1)',
         fontSize: '14px',
         lineHeight: '20px'
     },
     factsButton: {
-        backgroundColor: tokens.colorNeutralBackground3,
-        border: `1px solid ${tokens.colorNeutralStroke2}`,
+        backgroundColor: 'var(--colorNeutralBackground3)',
+        border: '1px solid var(--colorNeutralStroke2)',
         borderRadius: '16px',
         padding: '4px 12px',
-        fontSize: '12px'
+        fontSize: '14px',
+        fontWeight: '500',
+        cursor: 'pointer'
     },
     factsPreview: {
-        display: 'flex',
-        alignItems: 'flex-start',
-        gap: '8px',
-        marginLeft: '32px'
+        fontSize: '14px',
+        lineHeight: '1.4',
+        color: 'var(--colorNeutralForeground2)',
+        marginTop: '8px'
     },
     factsContent: {
-        padding: '12px',
-        marginTop: '8px',
         fontSize: '14px',
-        lineHeight: '1.4'
+        lineHeight: '1.5',
+        color: 'var(--colorNeutralForeground2)',
+        marginTop: '8px',
+        whiteSpace: 'pre-wrap'
+    },
+    planTitle: {
+        marginBottom: '20px',
+        fontSize: '18px',
+        fontWeight: '600',
+        color: 'var(--colorNeutralForeground1)',
+        lineHeight: '24px'
     },
     stepsList: {
-        marginBottom: tokens.spacingVerticalXXL,
-        marginLeft: `calc(32px + ${tokens.spacingHorizontalM} + ${tokens.spacingVerticalM})`
+        marginBottom: '16px'
     },
     stepItem: {
-        marginBottom: tokens.spacingVerticalL,
         display: 'flex',
         alignItems: 'flex-start',
-        gap: tokens.spacingHorizontalS
+        gap: '12px',
+        marginBottom: '12px'
     },
     stepNumber: {
-        fontSize: '14px',
-        fontWeight: tokens.fontWeightSemibold,
-        color: tokens.colorNeutralForeground1,
         minWidth: '24px',
+        height: '24px',
+        borderRadius: '50%',
+       color: 'var(--colorNeutralForeground1)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '12px',
+        fontWeight: '600',
         flexShrink: 0,
         marginTop: '2px'
     },
-    stepHeading: {
-        marginBottom: tokens.spacingVerticalM,
-        marginLeft: `calc(32px + ${tokens.spacingHorizontalM} + ${tokens.spacingVerticalM})`,
-        fontSize: '14px',
-        fontWeight: tokens.fontWeightSemibold,
-        color: tokens.colorNeutralForeground1,
-        lineHeight: '1.5'
-    },
     stepText: {
         fontSize: '14px',
-        color: tokens.colorNeutralForeground1,
+        color: 'var(--colorNeutralForeground1)',
         lineHeight: '1.5',
         flex: 1,
         wordWrap: 'break-word',
         overflowWrap: 'break-word'
     },
+    stepHeading: {
+        marginBottom: '12px',
+        fontSize: '16px',
+        fontWeight: '600',
+        color: 'var(--colorNeutralForeground1)',
+        lineHeight: '22px'
+    },
     instructionText: {
-        marginBottom: tokens.spacingVerticalXL,
-        color: tokens.colorNeutralForeground2,
+        color: 'var(--colorNeutralForeground2)',
         fontSize: '14px',
-        lineHeight: tokens.lineHeightBase400,
-        textAlign: 'left',
-        marginLeft: `calc(32px + ${tokens.spacingHorizontalM} + ${tokens.spacingVerticalM})`
+        lineHeight: '1.5',
+        marginBottom: '16px'
     },
     buttonContainer: {
         display: 'flex',
-        gap: tokens.spacingHorizontalM,
-        paddingTop: tokens.spacingVerticalM,
+        gap: '12px',
         alignItems: 'center',
-        justifyContent: 'flex-start',
-        marginLeft: `calc(32px + ${tokens.spacingHorizontalM} + ${tokens.spacingVerticalM})`
+        marginTop: '20px'
     }
 });
 
@@ -272,7 +315,7 @@ const getFactsPreview = (content: string): string => {
     return content.length > 200 ? content.substring(0, 200) + "..." : content;
 };
 
-// FluentUI-based plan response component
+// FluentUI-based plan response component with consistent spacing and proper colors
 const renderPlanResponse = (
     planApprovalRequest: MPlanData | null, 
     handleApprovePlan: () => void, 
@@ -289,133 +332,143 @@ const renderPlanResponse = (
     const { factsContent, planSteps } = extractDynamicContent(planApprovalRequest);
     const factsPreview = getFactsPreview(factsContent);
 
+    // Check if this is a "creating plan" state
+    const isCreatingPlan = !planSteps.length && !factsContent;
+
     let stepCounter = 0;
 
     return (
         <div className={styles.container}>
             {/* Agent Header */}
             <div className={styles.agentHeader}>
-                <div className={styles.agentAvatar}>
-                    <BotRegular style={{ fontSize: '16px', color: tokens.colorNeutralForeground2 }} />
-                </div>
+                {/* Hide avatar when creating plan */}
+                {isCreatingPlan ? (
+                    <div className={styles.hiddenAvatar}></div>
+                ) : (
+                    <div className={styles.agentAvatar}>
+                        {getAgentIconFromTeam(agentName)}
+                    </div>
+                )}
                 <div className={styles.agentInfo}>
                     <Text className={styles.agentName}>
                         {agentName}
                     </Text>
-                    <Badge 
-                        appearance="filled" 
-                        size="small"
-                        className={styles.botBadge}
-                    >
-                        BOT
-                    </Badge>
+                    {!isCreatingPlan && (
+                        <Badge 
+                            appearance="filled" 
+                            size="small"
+                            className={styles.botBadge}
+                        >
+                            BOT
+                        </Badge>
+                    )}
                 </div>
             </div>
 
-            {/* Facts Section */}
-            {factsContent && (
-                <div className={styles.factsSection}>
-                    <div className={styles.factsHeader}>
-                        <div className={styles.factsHeaderLeft}>
-                            <CheckmarkCircle20Regular style={{
-                                color: tokens.colorNeutralForeground2,
-                                fontSize: '20px',
-                                width: '20px',
-                                height: '20px',
-                                flexShrink: 0
-                            }} />
-                            <span className={styles.factsTitle}>
-                                Analysis & Context
-                            </span>
+            {/* Message Container */}
+            <div className={styles.messageContainer}>
+                {/* Facts Section */}
+                {factsContent && (
+                    <div className={styles.factsSection}>
+                        <div className={styles.factsHeader}>
+                            <div className={styles.factsHeaderLeft}>
+                                <CheckmarkCircle20Regular style={{
+                                    color: 'var(--colorNeutralForeground1)',
+                                    fontSize: '20px',
+                                    width: '20px',
+                                    height: '20px',
+                                    flexShrink: 0
+                                }} />
+                                <span className={styles.factsTitle}>
+                                    Analysis
+                                </span>
+                            </div>
+                            
+                            <Button 
+                                appearance="secondary" 
+                                size="small"
+                                onClick={() => setIsFactsExpanded(!isFactsExpanded)}
+                                className={styles.factsButton}
+                            >
+                                {isFactsExpanded ? 'Hide' : 'Details'}
+                            </Button>
                         </div>
                         
-                        <Button 
-                            appearance="secondary" 
-                            size="small"
-                            onClick={() => setIsFactsExpanded(!isFactsExpanded)}
-                            className={styles.factsButton}
-                        >
-                            {isFactsExpanded ? 'Hide' : 'Details'}
-                        </Button>
-                    </div>
-                    
-                    {!isFactsExpanded && (
-                        <div className={styles.factsPreview}>
-                            <div style={{
-                                color: tokens.colorNeutralForeground2,
-                                fontSize: '14px',
-                                lineHeight: '1.4'
-                            }}>
+                        {!isFactsExpanded && (
+                            <div className={styles.factsPreview}>
                                 {factsPreview}
                             </div>
-                        </div>
-                    )}
-                    
-                    {isFactsExpanded && (
-                        <div className={styles.factsContent}>
-                            <div style={{ whiteSpace: 'pre-wrap' }}>
+                        )}
+                        
+                        {isFactsExpanded && (
+                            <div className={styles.factsContent}>
                                 {factsContent}
                             </div>
-                        </div>
-                    )}
+                        )}
+                    </div>
+                )}
+
+                {/* Plan Title */}
+                <div className={styles.planTitle}>
+                    {isCreatingPlan ? 'Creating plan...' : `Proposed Plan for ${planApprovalRequest.user_request || 'Task'}`}
                 </div>
-            )}
 
-            {/* Plan Steps - Better formatting like the image */}
-            {planSteps.length > 0 && (
-                <div className={styles.stepsList}>
-                    {planSteps.map((step, index) => {
-                        if (step.type === 'heading') {
-                            return (
-                                <div key={index} className={styles.stepHeading}>
-                                    {step.text}
-                                </div>
-                            );
-                        } else {
-                            stepCounter++;
-                            return (
-                                <div key={index} className={styles.stepItem}>
-                                    <div className={styles.stepNumber}>
-                                        {stepCounter}.
-                                    </div>
-                                    <div className={styles.stepText}>
+                {/* Plan Steps */}
+                {planSteps.length > 0 && (
+                    <div className={styles.stepsList}>
+                        {planSteps.map((step, index) => {
+                            if (step.type === 'heading') {
+                                return (
+                                    <div key={index} className={styles.stepHeading}>
                                         {step.text}
                                     </div>
-                                </div>
-                            );
-                        }
-                    })}
-                </div>
-            )}
+                                );
+                            } else {
+                                stepCounter++;
+                                return (
+                                    <div key={index} className={styles.stepItem}>
+                                        <div className={styles.stepNumber}>
+                                            {stepCounter}
+                                        </div>
+                                        <div className={styles.stepText}>
+                                            {step.text}
+                                        </div>
+                                    </div>
+                                );
+                            }
+                        })}
+                    </div>
+                )}
 
-            {/* Instruction Text */}
-            <Body1 className={styles.instructionText}>
-                If the plan looks good we can move forward with the first step.
-            </Body1>
+                {/* Instruction Text */}
+                {!isCreatingPlan && (
+                    <Body1 className={styles.instructionText}>
+                        If the plan looks good we can move forward with the first step.
+                    </Body1>
+                )}
 
-            {/* Action Buttons */}
-            {showApprovalButtons && (
-                <div className={styles.buttonContainer}>
-                    <Button
-                        appearance="primary"
-                        size="medium"
-                        onClick={handleApprovePlan}
-                        disabled={processingApproval}
-                        style={{ fontSize: '14px' }}
-                    >
-                        {processingApproval ? 'Processing...' : 'Approve Task Plan'}
-                    </Button>
-                    <Button
-                        appearance="secondary"
-                        size="medium"
-                        onClick={handleRejectPlan}
-                        disabled={processingApproval}
-                        style={{ fontSize: '14px' }}
-                    >
-                        Cancel
-                    </Button>
-                </div>
-            )}
+                {/* Action Buttons */}
+                {showApprovalButtons && !isCreatingPlan && (
+                    <div className={styles.buttonContainer}>
+                        <Button
+                            appearance="primary"
+                            size="medium"
+                            onClick={handleApprovePlan}
+                            disabled={processingApproval}
+                        >
+                            {processingApproval ? 'Processing...' : 'Approve Task Plan'}
+                        </Button>
+                        <Button
+                            appearance="secondary"
+                            size="medium"
+                            onClick={handleRejectPlan}
+                            disabled={processingApproval}
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                )}
+            </div>
         </div>
     );
 };
diff --git a/src/frontend/src/components/content/streaming/StreamingPlanState.tsx b/src/frontend/src/components/content/streaming/StreamingPlanState.tsx
index 67d02e60..f881131e 100644
--- a/src/frontend/src/components/content/streaming/StreamingPlanState.tsx
+++ b/src/frontend/src/components/content/streaming/StreamingPlanState.tsx
@@ -1,79 +1,86 @@
-import { Spinner, tokens } from "@fluentui/react-components";
-import { BotRegular } from "@fluentui/react-icons";
+import { Spinner } from "@fluentui/react-components";
 
-// Render AI thinking/planning state
+// Simple thinking message to show while creating plan
 const renderThinkingState = (waitingForPlan: boolean) => {
     if (!waitingForPlan) return null;
 
     return (
         <div style={{
-            display: 'flex',
-            alignItems: 'flex-start',
-            gap: '16px',
-            marginBottom: '32px',
+            maxWidth: '800px',
+            margin: '0 auto 32px auto',
             padding: '0 24px'
         }}>
-            {/* AI Avatar */}
             <div style={{
-                width: '32px',
-                height: '32px',
-                borderRadius: '50%',
-                backgroundColor: 'var(--colorNeutralBackground3)',
                 display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                flexShrink: 0
+                alignItems: 'flex-start',
+                gap: '16px'
             }}>
-                <BotRegular style={{ fontSize: '16px', color: 'var(--colorNeutralForeground2)' }} />
-            </div>
-
-            {/* Thinking Message */}
-            <div style={{ flex: 1, maxWidth: 'calc(100% - 48px)' }}>
-                <div style={{
+                {/* Bot Avatar */}
+                {/* <div style={{
+                    width: '32px',
+                    height: '32px',
+                    borderRadius: '50%',
+                    backgroundColor: 'var(--colorNeutralBackground3)',
                     display: 'flex',
                     alignItems: 'center',
-                    gap: '12px',
-                    padding: '16px 0',
-                    color: 'var(--colorNeutralForeground2)',
-                    fontSize: '15px'
+                    justifyContent: 'center',
+                    flexShrink: 0
                 }}>
-                    <Spinner size="small" />
-                    <span>Creating your plan...</span>
+                    <div style={{
+                        width: '16px',
+                        height: '16px',
+                        backgroundColor: 'var(--colorBrandBackground)',
+                        borderRadius: '2px'
+                    }} />
+                </div> */}
+
+                {/* Thinking Message */}
+                <div style={{ flex: 1, maxWidth: 'calc(100% - 48px)' }}>
+                    <div style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '12px',
+                        padding: '16px 0',
+                        color: 'var(--colorNeutralForeground2)',
+                        fontSize: '14px'
+                    }}>
+                        <Spinner size="small" />
+                        <span>Creating your plan...</span>
+                    </div>
                 </div>
             </div>
         </div>
     );
 };
 
-
 // Simple message to show while executing the plan
-
 const renderPlanExecutionMessage = () => {
     return (
         <div style={{
             maxWidth: '800px',
-            margin: '0 auto',
-            padding: `${tokens.spacingVerticalXL} ${tokens.spacingHorizontalXL}`,
-            display: 'flex',
-            alignItems: 'center',
-            gap: tokens.spacingHorizontalM,
-            backgroundColor: tokens.colorNeutralBackground2,
-            borderRadius: tokens.borderRadiusMedium,
-            border: `1px solid ${tokens.colorNeutralStroke1}`,
-            marginBottom: tokens.spacingVerticalXL,
-            marginTop: tokens.spacingVerticalXL
+            margin: '0 auto 32px auto',
+            padding: '0 24px'
         }}>
-            <Spinner size="small" />
-            <span style={{
-                fontSize: '14px',
-                color: tokens.colorNeutralForeground1,
-                fontWeight: tokens.fontWeightSemibold
+            <div style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '16px',
+                backgroundColor: 'var(--colorNeutralBackground2)',
+                borderRadius: '8px',
+                border: '1px solid var(--colorNeutralStroke1)',
+                padding: '16px'
             }}>
-                Processing your plan and coordinating with AI agents...
-            </span>
+                <Spinner size="small" />
+                <span style={{
+                    fontSize: '14px',
+                    color: 'var(--colorNeutralForeground1)',
+                    fontWeight: '500'
+                }}>
+                    Processing your plan and coordinating with AI agents...
+                </span>
+            </div>
         </div>
     );
 };
 
-
 export { renderPlanExecutionMessage, renderThinkingState };
\ No newline at end of file
diff --git a/src/frontend/src/components/content/streaming/StreamingUserPlanMessage.tsx b/src/frontend/src/components/content/streaming/StreamingUserPlanMessage.tsx
index 23bb8e06..736ea8f6 100644
--- a/src/frontend/src/components/content/streaming/StreamingUserPlanMessage.tsx
+++ b/src/frontend/src/components/content/streaming/StreamingUserPlanMessage.tsx
@@ -2,19 +2,23 @@ import { PersonRegular } from "@fluentui/react-icons";
 import getUserTask from "./StreamingUserPlan";
 import { MPlanData, ProcessedPlanData } from "@/models";
 
-// Render user task message
+// Render user task message with exact styling from image
 const renderUserPlanMessage = (planApprovalRequest: MPlanData | null,
     initialTask?: string,
     planData?: ProcessedPlanData) => {
     const userPlan = getUserTask(planApprovalRequest, initialTask, planData);
 
+    if (!userPlan) return null;
+
     return (
         <div style={{
+            maxWidth: '800px',
+            margin: '0 auto 32px auto',
+            padding: '0 24px',
             display: 'flex',
             alignItems: 'flex-start',
             gap: '16px',
-            marginBottom: '32px',
-            padding: '0 24px'
+            flexDirection: 'row-reverse'
         }}>
             {/* User Avatar */}
             <div style={{
@@ -31,12 +35,21 @@ const renderUserPlanMessage = (planApprovalRequest: MPlanData | null,
             </div>
 
             {/* User Message */}
-            <div style={{ flex: 1, maxWidth: 'calc(100% - 48px)' }}>
+            <div style={{
+                flex: 1,
+                maxWidth: 'calc(100% - 48px)',
+                display: 'flex',
+                justifyContent: 'flex-end'
+            }}>
                 <div style={{
-                    fontSize: '16px',
-                    lineHeight: '1.6',
-                    color: 'var(--colorNeutralForeground1)',
-                    wordWrap: 'break-word'
+                    backgroundColor: 'var(--colorBrandBackground)',
+                    color: 'var(--colorNeutralForegroundInverted)',
+                    padding: '12px 16px',
+                    borderRadius: '8px',
+                    fontSize: '14px',
+                    lineHeight: '1.5',
+                    wordWrap: 'break-word',
+                    maxWidth: '80%'
                 }}>
                     {userPlan}
                 </div>
@@ -44,4 +57,5 @@ const renderUserPlanMessage = (planApprovalRequest: MPlanData | null,
         </div>
     );
 };
+
 export default renderUserPlanMessage;
\ No newline at end of file