diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx
index b110742ec..f46cd55f6 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx
@@ -15,7 +15,7 @@ import {
 } from '@elastic/eui'
 import { css } from '@emotion/react'
 import * as React from 'react'
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 const containerStyles = css`
     height: 100%;
@@ -66,6 +66,7 @@ export const Chat = () => {
     const inputRef = useRef<HTMLInputElement>(null)
     const scrollRef = useRef<HTMLDivElement>(null)
     const lastMessageStatusRef = useRef<string | null>(null)
+    const [inputValue, setInputValue] = useState('')
 
     const dynamicScrollableStyles = css`
         ${scrollableStyles}
@@ -81,6 +82,7 @@ export const Chat = () => {
             if (inputRef.current) {
                 inputRef.current.value = ''
             }
+            setInputValue('')
 
             // Scroll to bottom after new message
             setTimeout(() => scrollToBottom(scrollRef.current), 100)
@@ -202,6 +204,7 @@ export const Chat = () => {
                         inputRef={inputRef}
                         fullWidth
                         placeholder="Ask Elastic Docs AI Assistant"
+                        onChange={(e) => setInputValue(e.target.value)}
                         onKeyDown={(e) => {
                             if (e.key === 'Enter') {
                                 handleSubmit(e.currentTarget.value)
@@ -219,7 +222,7 @@ export const Chat = () => {
                         `}
                         color="primary"
                         iconType="sortUp"
-                        display="base"
+                        display={inputValue.trim() ? 'fill' : 'base'}
                         onClick={() => {
                             if (inputRef.current) {
                                 handleSubmit(inputRef.current.value)
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx
index 856c7addd..0e8bb6f08 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx
@@ -1,8 +1,9 @@
 import { initCopyButton } from '../../../copybutton'
+import { GeneratingStatus } from './GeneratingStatus'
+import { References } from './RelatedResources'
 import { ChatMessage as ChatMessageType } from './chat.store'
 import { LlmGatewayMessage } from './useLlmGateway'
 import {
-    EuiAvatar,
     EuiButtonIcon,
     EuiCallOut,
     EuiCopy,
@@ -10,7 +11,6 @@ import {
     EuiFlexItem,
     EuiIcon,
     EuiLoadingElastic,
-    EuiLoadingSpinner,
     EuiPanel,
     EuiSpacer,
     EuiText,
@@ -58,6 +58,30 @@ const getAccumulatedContent = (messages: LlmGatewayMessage[]) => {
         .join('')
 }
 
+const splitContentAndReferences = (
+    content: string
+): { mainContent: string; referencesJson: string | null } => {
+    const startDelimiter = '<!--REFERENCES'
+    const endDelimiter = '-->'
+
+    const startIndex = content.indexOf(startDelimiter)
+    if (startIndex === -1) {
+        return { mainContent: content, referencesJson: null }
+    }
+
+    const endIndex = content.indexOf(endDelimiter, startIndex)
+    if (endIndex === -1) {
+        return { mainContent: content, referencesJson: null }
+    }
+
+    const mainContent = content.substring(0, startIndex).trim()
+    const referencesJson = content
+        .substring(startIndex + startDelimiter.length, endIndex)
+        .trim()
+
+    return { mainContent, referencesJson }
+}
+
 const getMessageState = (message: ChatMessageType) => ({
     isUser: message.type === 'user',
     isLoading: message.status === 'streaming',
@@ -65,6 +89,59 @@ const getMessageState = (message: ChatMessageType) => ({
     hasError: message.status === 'error',
 })
 
+// Helper functions for computing AI status
+const getToolCallSearchQuery = (
+    messages: LlmGatewayMessage[]
+): string | null => {
+    const toolCallMessage = messages.find((m) => m.type === 'tool_call')
+    if (!toolCallMessage) return null
+
+    try {
+        const toolCalls = toolCallMessage.data?.toolCalls
+        if (toolCalls && toolCalls.length > 0) {
+            const firstToolCall = toolCalls[0]
+            return firstToolCall.args?.searchQuery || null
+        }
+    } catch (e) {
+        console.error('Error extracting search query from tool call:', e)
+    }
+
+    return null
+}
+
+const hasContentStarted = (messages: LlmGatewayMessage[]): boolean => {
+    return messages.some((m) => m.type === 'ai_message_chunk' && m.data.content)
+}
+
+const hasReachedReferences = (messages: LlmGatewayMessage[]): boolean => {
+    const accumulatedContent = messages
+        .filter((m) => m.type === 'ai_message_chunk')
+        .map((m) => m.data.content)
+        .join('')
+    return accumulatedContent.includes('<!--REFERENCES')
+}
+
+const computeAiStatus = (
+    llmMessages: LlmGatewayMessage[],
+    isComplete: boolean
+): string | null => {
+    if (isComplete) return null
+
+    const searchQuery = getToolCallSearchQuery(llmMessages)
+    const contentStarted = hasContentStarted(llmMessages)
+    const reachedReferences = hasReachedReferences(llmMessages)
+
+    if (reachedReferences) {
+        return 'Gathering resources'
+    } else if (contentStarted) {
+        return 'Generating'
+    } else if (searchQuery) {
+        return `Searching for "${searchQuery}"`
+    }
+
+    return 'Thinking'
+}
+
 // Action bar for complete AI messages
 const ActionBar = ({
     content,
@@ -73,7 +150,7 @@ const ActionBar = ({
     content: string
     onRetry?: () => void
 }) => (
-    <EuiFlexGroup responsive={false} component="span" gutterSize="s">
+    <EuiFlexGroup responsive={false} component="span" gutterSize="none">
         <EuiFlexItem grow={false}>
             <EuiToolTip content="This answer was helpful">
                 <EuiButtonIcon
@@ -137,34 +214,27 @@ export const ChatMessage = ({
 
     if (isUser) {
         return (
-            <EuiFlexGroup
-                gutterSize="s"
-                alignItems="flexStart"
-                responsive={false}
+            <div
                 data-message-type="user"
                 data-message-id={message.id}
+                css={css`
+                    max-width: 50%;
+                    justify-self: flex-end;
+                `}
             >
-                <EuiFlexItem grow={false}>
-                    <EuiAvatar
-                        name="User"
-                        size="m"
-                        color="#6DCCB1"
-                        iconType="user"
-                    />
-                </EuiFlexItem>
-                <EuiFlexItem>
-                    <EuiPanel
-                        paddingSize="m"
-                        hasShadow={false}
-                        hasBorder={true}
-                        css={css`
-                            background-color: ${euiTheme.colors.emptyShade};
-                        `}
-                    >
-                        <EuiText size="s">{message.content}</EuiText>
-                    </EuiPanel>
-                </EuiFlexItem>
-            </EuiFlexGroup>
+                <EuiPanel
+                    paddingSize="s"
+                    hasShadow={false}
+                    hasBorder={true}
+                    css={css`
+                        border-radius: ${euiTheme.border.radius.medium};
+                        background-color: ${euiTheme.colors
+                            .backgroundLightText};
+                    `}
+                >
+                    <EuiText size="s">{message.content}</EuiText>
+                </EuiPanel>
+            </div>
         )
     }
 
@@ -176,10 +246,32 @@ export const ChatMessage = ({
 
     const hasError = message.status === 'error' || !!error
 
+    // Only split content and references when complete for better performance
+    const { mainContent, referencesJson } = useMemo(() => {
+        if (isComplete) {
+            return splitContentAndReferences(content)
+        }
+        // During streaming, strip out unparsed references but don't parse them yet
+        const startDelimiter = '<!--REFERENCES'
+        const delimiterIndex = content.indexOf(startDelimiter)
+        if (delimiterIndex !== -1) {
+            return {
+                mainContent: content.substring(0, delimiterIndex).trim(),
+                referencesJson: null,
+            }
+        }
+        return { mainContent: content, referencesJson: null }
+    }, [content, isComplete])
+
     const parsed = useMemo(() => {
-        const html = markedInstance.parse(content) as string
+        const html = markedInstance.parse(mainContent) as string
         return DOMPurify.sanitize(html)
-    }, [content])
+    }, [mainContent])
+
+    const aiStatus = useMemo(
+        () => computeAiStatus(llmMessages, isComplete),
+        [llmMessages, isComplete]
+    )
 
     const ref = React.useRef<HTMLDivElement>(null)
 
@@ -239,16 +331,12 @@ export const ChatMessage = ({
                 <EuiPanel
                     paddingSize="m"
                     hasShadow={false}
-                    hasBorder={true}
+                    hasBorder={false}
                     css={css`
-                        background-color: ${euiTheme.colors
-                            .backgroundLightText};
+                        padding-top: 8px;
                     `}
                 >
                     {content && (
-                        // <EuiMarkdownFormat css={markdownFormatStyles}>
-                        //     {content}
-                        // </EuiMarkdownFormat>
                         <div
                             ref={ref}
                             className="markdown-content"
@@ -262,30 +350,20 @@ export const ChatMessage = ({
                         />
                     )}
 
-                    {isLoading && (
-                        <>
-                            {content && <EuiSpacer size="s" />}
-                            <EuiFlexGroup
-                                alignItems="center"
-                                gutterSize="s"
-                                responsive={false}
-                            >
-                                <EuiFlexItem grow={false}>
-                                    <EuiLoadingSpinner size="s" />
-                                </EuiFlexItem>
-                                <EuiFlexItem grow={false}>
-                                    <EuiText size="xs" color="subdued">
-                                        Generating...
-                                    </EuiText>
-                                </EuiFlexItem>
-                            </EuiFlexGroup>
-                        </>
+                    {referencesJson && (
+                        <References referencesJson={referencesJson} />
                     )}
 
+                    {content && isLoading && <EuiSpacer size="m" />}
+                    <GeneratingStatus status={aiStatus} />
+
                     {isComplete && content && (
                         <>
                             <EuiSpacer size="m" />
-                            <ActionBar content={content} onRetry={onRetry} />
+                            <ActionBar
+                                content={mainContent}
+                                onRetry={onRetry}
+                            />
                         </>
                     )}
 
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessageList.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessageList.tsx
index 1426b7a2d..2668431e0 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessageList.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessageList.tsx
@@ -21,7 +21,7 @@ export const ChatMessageList = ({ messages }: ChatMessageListProps) => {
                             isLast={index === messages.length - 1}
                         />
                     )}
-                    {index < messages.length - 1 && <EuiSpacer size="m" />}
+                    {index < messages.length - 1 && <EuiSpacer size="l" />}
                 </React.Fragment>
             ))}
         </>
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/GeneratingStatus.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/GeneratingStatus.tsx
new file mode 100644
index 000000000..da543d91b
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/GeneratingStatus.tsx
@@ -0,0 +1,31 @@
+/** @jsxImportSource @emotion/react */
+import {
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiLoadingSpinner,
+    EuiText,
+} from '@elastic/eui'
+import * as React from 'react'
+
+interface GeneratingStatusProps {
+    status: string | null
+}
+
+export const GeneratingStatus = ({ status }: GeneratingStatusProps) => {
+    if (!status) {
+        return null
+    }
+
+    return (
+        <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+            <EuiFlexItem grow={false}>
+                <EuiLoadingSpinner size="s" />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+                <EuiText size="xs" color="subdued">
+                    {status}...
+                </EuiText>
+            </EuiFlexItem>
+        </EuiFlexGroup>
+    )
+}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/RelatedResources.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/RelatedResources.tsx
new file mode 100644
index 000000000..ea44b403e
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/RelatedResources.tsx
@@ -0,0 +1,127 @@
+/** @jsxImportSource @emotion/react */
+import {
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiText,
+    EuiLink,
+    EuiSpacer,
+    EuiIcon,
+    EuiPanel,
+    useEuiTheme,
+} from '@elastic/eui'
+import { css } from '@emotion/react'
+import * as React from 'react'
+
+interface Reference {
+    url: string
+    title: string
+    description: string
+}
+
+interface ReferencesProps {
+    referencesJson: string
+}
+
+const parseReferences = (jsonString: string): Reference[] => {
+    try {
+        // Remove markdown code fences if present
+        let cleanedJson = jsonString.trim()
+
+        // Check for ```json or ``` at the start
+        if (cleanedJson.startsWith('```json')) {
+            cleanedJson = cleanedJson.substring(7) // Remove ```json
+        } else if (cleanedJson.startsWith('```')) {
+            cleanedJson = cleanedJson.substring(3) // Remove ```
+        }
+
+        // Remove closing ``` at the end
+        if (cleanedJson.endsWith('```')) {
+            cleanedJson = cleanedJson.substring(0, cleanedJson.length - 3)
+        }
+
+        cleanedJson = cleanedJson.trim()
+
+        const parsed = JSON.parse(cleanedJson)
+        if (Array.isArray(parsed)) {
+            return parsed
+        }
+        return []
+    } catch (e) {
+        console.warn('Failed to parse references JSON:', e)
+        return []
+    }
+}
+
+export const References = ({ referencesJson }: ReferencesProps) => {
+    const references = parseReferences(referencesJson)
+    const { euiTheme } = useEuiTheme()
+
+    if (references.length === 0) {
+        return null
+    }
+
+    return (
+        <>
+            <EuiSpacer size="l" />
+            <EuiPanel
+                hasShadow={false}
+                paddingSize="m"
+                grow={false}
+                css={css`
+                    background-color: ${euiTheme.colors.backgroundBaseSubdued};
+                `}
+            >
+                <div>
+                    <EuiText size="s">
+                        <strong>Related resources:</strong>
+                    </EuiText>
+                    <EuiSpacer size="s" />
+                    <EuiFlexGroup direction="column" gutterSize="m">
+                        {references.map((ref, index) => (
+                            <EuiFlexItem key={index}>
+                                <EuiFlexGroup
+                                    gutterSize="xs"
+                                    alignItems="flexStart"
+                                    responsive={false}
+                                >
+                                    <EuiFlexItem grow={false}>
+                                        <EuiIcon
+                                            type="document"
+                                            size="s"
+                                            css={css`
+                                                margin-top: 6px;
+                                            `}
+                                        />
+                                    </EuiFlexItem>
+                                    <EuiFlexItem>
+                                        <div>
+                                            <EuiLink
+                                                href={ref.url}
+                                                target="_blank"
+                                                css={css`
+                                                    font-size: 12px;
+                                                    font-weight: 600;
+                                                `}
+                                            >
+                                                {ref.title}
+                                            </EuiLink>
+                                            <EuiText
+                                                size="xs"
+                                                color="subdued"
+                                                css={css`
+                                                    margin-top: 2px;
+                                                `}
+                                            >
+                                                {ref.description}
+                                            </EuiText>
+                                        </div>
+                                    </EuiFlexItem>
+                                </EuiFlexGroup>
+                            </EuiFlexItem>
+                        ))}
+                    </EuiFlexGroup>
+                </div>
+            </EuiPanel>
+        </>
+    )
+}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults.tsx
index f7b19f224..98517e043 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults.tsx
@@ -192,7 +192,7 @@ function Breadcrumbs({ parents }: { parents: SearchResultItem['parents'] }) {
             css={css`
                 margin-top: 2px;
                 display: flex;
-                gap: 0 ${euiTheme.size.xs};
+                gap: 0 ${euiTheme.size.s};
                 flex-wrap: wrap;
                 list-style: none;
             `}
@@ -205,27 +205,20 @@ function Breadcrumbs({ parents }: { parents: SearchResultItem['parents'] }) {
                         css={css`
                             &:not(:last-child)::after {
                                 content: '/';
-                                margin-left: ${euiTheme.size.xs};
+                                margin-left: ${euiTheme.size.s};
                                 font-size: ${smallFontsize};
-                                color: ${euiTheme.colors.text};
+                                color: ${euiTheme.colors.textSubdued};
                                 margin-top: -1px;
                             }
                             display: inline-flex;
                         `}
                     >
-                        <EuiLink href={parent.url} color="text" tabIndex={-1}>
-                            <EuiText
-                                size="xs"
-                                color="subdued"
-                                css={css`
-                                    .euiMark {
-                                        background-color: transparent;
-                                        text-decoration: underline;
-                                        color: inherit;
-                                        font-weight: inherit;
-                                    }
-                                `}
-                            >
+                        <EuiLink
+                            href={parent.url}
+                            color="subdued"
+                            tabIndex={-1}
+                        >
+                            <EuiText size="xs" color="subdued">
                                 {parent.title}
                             </EuiText>
                         </EuiLink>
diff --git a/src/api/Elastic.Documentation.Api.Core/AskAi/AskAiUsecase.cs b/src/api/Elastic.Documentation.Api.Core/AskAi/AskAiUsecase.cs
index c39b23c38..01366b9d0 100644
--- a/src/api/Elastic.Documentation.Api.Core/AskAi/AskAiUsecase.cs
+++ b/src/api/Elastic.Documentation.Api.Core/AskAi/AskAiUsecase.cs
@@ -19,21 +19,77 @@ public record AskAiRequest(string Message, string? ThreadId)
 {
 	public static string SystemPrompt =>
 		"""
-		Role: You are a specialized AI assistant designed to answer user questions exclusively from a set of provided documentation. Your primary purpose is to retrieve, synthesize, and present information directly from these documents.
+		You are an expert documentation assistant. Your primary task is to answer user questions using **only** the provided documentation.
 
-		## Core Directives:
+		## Task Overview
+		Synthesize information from the provided text to give a direct, comprehensive, and self-contained answer to the user's query.
 
-		- Source of Truth: Your only source of information is the document content provided to you for each user query. You must not use any pre-trained knowledge or external information.
-		- Answering Style: Answer the user's question directly and comprehensively. As the user cannot ask follow-up questions, your response must be a complete, self-contained answer to their query. Do not start with phrases like "Based on the documents..."—simply provide the answer.
-		- Handling Unknowns: If the information required to answer the question is not present in the provided documents, you must explicitly state that the answer cannot be found. Do not attempt to guess, infer, or provide a general response.
-		- Helpful Fallback: If you cannot find a direct answer, you may suggest and link to a few related or similar topics that are present in the documentation. This provides value even when a direct answer is unavailable.
-		- Output Format: Your final response should be a single, coherent block of text.
-		- Short and Concise: Keep your answers as brief as possible while still being complete and informative. For more more details refer to the documentation with links.
+		---
 
-		## Negative Constraints:
+		## Critical Rules
+		1.  **Strictly Adhere to Provided Sources:** Your ONLY source of information is the document content provided with by your RAG search. **DO NOT** use any of your pre-trained knowledge or external information.
+		2.  **Handle Unanswerable Questions:** If the answer is not in the documents, you **MUST** state this explicitly (e.g., "The answer to your question could not be found in the provided documentation."). Do not infer, guess, or provide a general knowledge answer. As a helpful fallback, you may suggest a few related topics that *are* present in the documentation.
+		3.  **Be Direct and Anonymous:** Answer the question directly without any preamble like "Based on the documents..." or "In the provided text...". **DO NOT** mention that you are an AI or language model.
 
-		- Do not mention that you are a language model or AI.
-		- Do not provide answers based on your general knowledge.
-		- Do not ask the user for clarification.
+		---
+
+		## Response Formatting
+
+		### 1. User-Visible Answer
+		* The final response must be a single, coherent block of text.
+		* Format your answer using Markdown (headings, bullet points, etc.) for clarity.
+		* Use sentence case for all headings.
+		* Do not use `---` or any other section dividers in your answer.
+		* Keep your answers concise yet complete. Answer the user's question fully, but link to the source documents for more extensive details.
+
+		### 2. Hidden Source References (*Crucial*)
+		* At the end of your response, you **MUST** **ALWAYS** provide a list of all documents you used to formulate the answer.
+		* Also include links that you used in your answer.
+		* This list must be a JSON array wrapped inside a specific multi-line comment delimiter.
+		* DO NOT add any headings, preamble, or explanations around the reference block. The JSON must be invisible to the end-user.
+
+		**Delimiter and JSON Schema:**
+
+		Use this exact format. The JSON array goes inside the comment block like the example below:
+
+		```markdown
+		<!--REFERENCES
+
+		[]
+
+		-->
+		```
+
+		**JSON Schema Definition:**
+		```json
+		{
+		  "$schema": "http://json-schema.org/draft-07/schema#",
+		  "title": "List of Documentation Resources",
+		  "description": "A list of objects, each representing a documentation resource with a URL, title, and description.",
+		  "type": "array",
+		  "items": {
+		    "type": "object",
+		    "properties": {
+		      "url": {
+		        "description": "The URL of the resource.",
+		        "type": "string",
+		        "format": "uri"
+		      },
+		      "title": {
+		        "description": "The title of the resource.",
+		        "type": "string"
+		      },
+		      "description": {
+		        "description": "A brief description of the resource.",
+		        "type": "string"
+		      }
+		    },
+		    "required": [
+		      "url",
+		      "title",
+		      "description"
+		    ]
+		  }
+		}
 		""";
 }