diff --git a/core/src/types/message/messageEntity.ts b/core/src/types/message/messageEntity.ts
index e9211d550..b7365c6cd 100644
--- a/core/src/types/message/messageEntity.ts
+++ b/core/src/types/message/messageEntity.ts
@@ -29,6 +29,9 @@ export type ThreadMessage = {
   metadata?: Record<string, unknown>
 
   type?: string
+
+  /** The error code which explain what error type. Used in conjunction with MessageStatus.Error */
+  error_code?: ErrorCode
 }
 
 /**
@@ -77,6 +80,12 @@ export enum MessageStatus {
   Stopped = 'stopped',
 }
 
+export enum ErrorCode {
+  InvalidApiKey = 'invalid_api_key',
+
+  Unknown = 'unknown',
+}
+
 /**
  * The content type of the message.
  */
diff --git a/extensions/inference-openai-extension/src/helpers/sse.ts b/extensions/inference-openai-extension/src/helpers/sse.ts
index 11db38282..23528912d 100644
--- a/extensions/inference-openai-extension/src/helpers/sse.ts
+++ b/extensions/inference-openai-extension/src/helpers/sse.ts
@@ -1,3 +1,4 @@
+import { ErrorCode } from '@janhq/core'
 import { Observable } from 'rxjs'
 
 /**
@@ -40,9 +41,12 @@ export function requestInference(
     })
       .then(async (response) => {
         if (!response.ok) {
-          subscriber.next(
-            (await response.json()).error?.message ?? 'Error occurred.'
-          )
+          const data = await response.json()
+          const error = {
+            message: data.error?.message ?? 'Error occurred.',
+            code: data.error?.code ?? ErrorCode.Unknown,
+          }
+          subscriber.error(error)
           subscriber.complete()
           return
         }
diff --git a/extensions/inference-openai-extension/src/index.ts b/extensions/inference-openai-extension/src/index.ts
index 481171742..8fbba0ea3 100644
--- a/extensions/inference-openai-extension/src/index.ts
+++ b/extensions/inference-openai-extension/src/index.ts
@@ -216,6 +216,7 @@ export default class JanInferenceOpenAIExtension extends BaseExtension {
         }
         message.content = [messageContent]
         message.status = MessageStatus.Error
+        message.error_code = err.code
         events.emit(MessageEvent.OnMessageUpdate, message)
       },
     })
diff --git a/web/screens/Chat/ChatBody/index.tsx b/web/screens/Chat/ChatBody/index.tsx
index f6fc7d723..a82451f19 100644
--- a/web/screens/Chat/ChatBody/index.tsx
+++ b/web/screens/Chat/ChatBody/index.tsx
@@ -78,11 +78,11 @@ const ChatBody: React.FC = () => {
         <ScrollToBottom className="flex h-full w-full flex-col">
           {messages.map((message, index) => (
             <div key={message.id}>
-              {((message.status !== MessageStatus.Error &&
-                message.status !== MessageStatus.Pending) ||
-                message.content.length > 0) && (
-                <ChatItem {...message} key={message.id} />
-              )}
+              {message.status !== MessageStatus.Error &&
+                message.content.length > 0 && (
+                  <ChatItem {...message} key={message.id} />
+                )}
+
               {(message.status === MessageStatus.Error ||
                 message.status === MessageStatus.Stopped) &&
                 index === messages.length - 1 && (
diff --git a/web/screens/Chat/ErrorMessage/index.tsx b/web/screens/Chat/ErrorMessage/index.tsx
index c9041e23a..b1439597f 100644
--- a/web/screens/Chat/ErrorMessage/index.tsx
+++ b/web/screens/Chat/ErrorMessage/index.tsx
@@ -1,4 +1,4 @@
-import { MessageStatus, ThreadMessage } from '@janhq/core'
+import { ErrorCode, MessageStatus, ThreadMessage } from '@janhq/core'
 import { Button } from '@janhq/uikit'
 import { useAtomValue, useSetAtom } from 'jotai'
 import { RefreshCcw } from 'lucide-react'
@@ -10,6 +10,8 @@ import ModalTroubleShooting, {
 import { loadModelErrorAtom } from '@/hooks/useActiveModel'
 import useSendChatMessage from '@/hooks/useSendChatMessage'
 
+import { getErrorTitle } from '@/utils/errorMessage'
+
 import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
 
 const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
@@ -25,6 +27,8 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
     resendChatMessage(message)
   }
 
+  const errorTitle = getErrorTitle(message.error_code ?? ErrorCode.Unknown)
+
   return (
     <div className="mt-10">
       {message.status === MessageStatus.Stopped && (
@@ -68,7 +72,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
               key={message.id}
               className="flex flex-col items-center text-center text-sm font-medium text-gray-500"
             >
-              <p>{`Apologies, something’s amiss!`}</p>
+              <p>{errorTitle}</p>
               <p>
                 Jan’s in beta. Access&nbsp;
                 <span
diff --git a/web/utils/errorMessage.ts b/web/utils/errorMessage.ts
new file mode 100644
index 000000000..3af75e787
--- /dev/null
+++ b/web/utils/errorMessage.ts
@@ -0,0 +1,11 @@
+import { ErrorCode } from '@janhq/core'
+
+export const getErrorTitle = (errorCode: ErrorCode) => {
+  if (errorCode === ErrorCode.Unknown) {
+    return 'Apologies, something’s amiss!'
+  }
+
+  if (errorCode === ErrorCode.InvalidApiKey) {
+    return 'Invalid API key. Please check your API key and try again.'
+  }
+}