diff --git a/nx-dev/data-access-ai/src/lib/data-access-ai.ts b/nx-dev/data-access-ai/src/lib/data-access-ai.ts
index 8e2126ac39..1ffd90f882 100644
--- a/nx-dev/data-access-ai/src/lib/data-access-ai.ts
+++ b/nx-dev/data-access-ai/src/lib/data-access-ai.ts
@@ -137,9 +137,7 @@ export async function nxDevDataAccessAi(
     // Note: this is experimental. I think it should work
     // mainly because we're testing previous response + query.
     if (!pageSections || pageSections.length === 0) {
-      throw new UserError(
-        'Nothing relevant found in the Nx documentation! Please try another query.'
-      );
+      throw new UserError('No results found.', { no_results: true });
     }
 
     const tokenizer = new GPT3Tokenizer({ type: 'gpt3' });
diff --git a/nx-dev/data-access-ai/src/lib/utils.ts b/nx-dev/data-access-ai/src/lib/utils.ts
index f1ed379eca..4659d8419f 100644
--- a/nx-dev/data-access-ai/src/lib/utils.ts
+++ b/nx-dev/data-access-ai/src/lib/utils.ts
@@ -106,12 +106,18 @@ export function checkEnvVariables(
 }
 
 export class ApplicationError extends Error {
+  public type: string = 'application_error';
   constructor(message: string, public data: Record<string, any> = {}) {
     super(message);
   }
 }
 
-export class UserError extends ApplicationError {}
+export class UserError extends ApplicationError {
+  public override type: string = 'user_error';
+  constructor(message: string, data: Record<string, any> = {}) {
+    super(message, data);
+  }
+}
 
 export function initializeChat(
   chatFullHistory: ChatItem[],
@@ -128,7 +134,7 @@ export function initializeChat(
   - Step 2: Deduce the diagnostic REASONING process from the premises (clues, question), relying ONLY on the information provided in the Nx Documentation. If you recognize vulgar language, answer the question if possible, and educate the user to stay polite.
   - Step 3: EVALUATE the reasoning. If the reasoning aligns with the Nx Documentation, accept it. Do not use any external knowledge or make assumptions outside of the provided Nx documentation. If the reasoning doesn't strictly align with the Nx Documentation or relies on external knowledge or inference, reject it and answer with the exact string: 
   "Sorry, I don't know how to help with that. You can visit the [Nx documentation](https://nx.dev/getting-started/intro) for more info."
-  - Final Step: You can also rely on the messages we have exchanged so far. 
+  - Final Step: You can also rely on the messages we have exchanged so far. Do NOT reveal the approach to the user. 
   Nx Documentation: 
   ${contextText}
 
diff --git a/nx-dev/feature-ai/src/lib/feature-ai.tsx b/nx-dev/feature-ai/src/lib/feature-ai.tsx
index bd0c6d888a..bc93efb5c2 100644
--- a/nx-dev/feature-ai/src/lib/feature-ai.tsx
+++ b/nx-dev/feature-ai/src/lib/feature-ai.tsx
@@ -8,7 +8,7 @@ import {
   getProcessedHistory,
   ChatItem,
 } from '@nx/nx-dev/data-access-ai';
-import { warning, infoBox } from './utils';
+import { warning, infoBox, noResults } from './utils';
 
 export function FeatureAi(): JSX.Element {
   const [chatHistory, setChatHistory] = useState<ChatItem[] | null>([]);
@@ -54,8 +54,8 @@ export function FeatureAi(): JSX.Element {
       sourcesMarkdown = aiResponse.sourcesMarkdown;
 
       setLoading(false);
-    } catch (error) {
-      setError(error as any);
+    } catch (error: any) {
+      setError(error);
       setLoading(false);
     }
     sendCustomEvent('ai_query', 'ai', 'query', undefined, {
@@ -66,9 +66,12 @@ export function FeatureAi(): JSX.Element {
       sourcesMarkdown.length === 0
         ? ''
         : `
-        {% callout type="info" title="Sources" %}
-        ${sourcesMarkdown}
-        {% /callout %}`;
+\n
+{% callout type="info" title="Sources" %}
+${sourcesMarkdown}
+{% /callout %}
+\n
+        `;
 
     setFinalResult(
       renderMarkdown(completeText + sourcesMd, { filePath: '' }).node
@@ -124,7 +127,7 @@ export function FeatureAi(): JSX.Element {
 
   function renderChatHistory(history: ChatItem[]) {
     return (
-      <div className="mx-auto bg-white p-6 rounded shadow">
+      <div className="mx-auto bg-white p-6 rounded shadow flex flex-col">
         {history.length > 30 && (
           <div>
             You've reached the maximum message history limit. Some previous
@@ -149,16 +152,26 @@ export function FeatureAi(): JSX.Element {
         ref={index === historyLength - 1 ? lastMessageRef : null}
         className={` p-2 m-2 rounded-lg ${
           chatItem.role === 'assistant' ? 'bg-blue-200' : 'bg-gray-300'
+        } ${chatItem.role === 'user' ? 'text-right' : ''} ${
+          chatItem.role === 'user' ? 'self-end' : ''
         }`}
       >
-        <strong className="text-gray-700">
-          {chatItem.role === 'user' ? 'you' : 'nx assistant'}:
-        </strong>
-        <div className="text-gray-600 mt-1">
-          {renderMarkdown(chatItem.content, { filePath: '' }).node}
-        </div>
-
+        {chatItem.role === 'assistant' && (
+          <strong className="text-gray-700">
+            nx assistant{' '}
+            <span role="img" aria-label="Narwhal">
+              🐳
+            </span>
+          </strong>
+        )}
+        {((chatItem.role === 'assistant' && !error) ||
+          chatItem.role === 'user') && (
+          <div className="text-gray-600 mt-1">
+            {renderMarkdown(chatItem.content, { filePath: '' }).node}
+          </div>
+        )}
         {chatItem.role === 'assistant' &&
+          !error &&
           chatHistory?.length &&
           (index === chatHistory.length - 1 && loading ? null : !feedbackSent[
               index
@@ -194,8 +207,12 @@ export function FeatureAi(): JSX.Element {
             </p>
           ))}
 
-        {error && !loading ? (
-          <div>There was an error: {error['message']}</div>
+        {error && !loading && chatItem.role === 'assistant' ? (
+          error['data']?.['no_results'] ? (
+            noResults
+          ) : (
+            <div>There was an error: {error['message']}</div>
+          )
         ) : null}
       </div>
     );
diff --git a/nx-dev/feature-ai/src/lib/utils.ts b/nx-dev/feature-ai/src/lib/utils.ts
index 407f6f82e4..a3a4552afa 100644
--- a/nx-dev/feature-ai/src/lib/utils.ts
+++ b/nx-dev/feature-ai/src/lib/utils.ts
@@ -19,3 +19,10 @@ export const infoBox = renderMarkdown(
   `,
   { filePath: '' }
 ).node;
+
+export const noResults = renderMarkdown(
+  `
+  Sorry, I don't know how to help with that. You can visit the [Nx documentation](https://nx.dev/getting-started/intro) for more info.
+  `,
+  { filePath: '' }
+).node;