diff --git a/frontend/src/assets/alert.svg b/frontend/src/assets/alert.svg
new file mode 100644
index 00000000..05c7634b
--- /dev/null
+++ b/frontend/src/assets/alert.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.16669 11.5H9.83335V13.1666H8.16669V11.5ZM8.16669 4.83329H9.83335V9.83329H8.16669V4.83329ZM8.99169 0.666626C4.39169 0.666626 0.666687 4.39996 0.666687 8.99996C0.666687 13.6 4.39169 17.3333 8.99169 17.3333C13.6 17.3333 17.3334 13.6 17.3334 8.99996C17.3334 4.39996 13.6 0.666626 8.99169 0.666626ZM9.00002 15.6666C5.31669 15.6666 2.33335 12.6833 2.33335 8.99996C2.33335 5.31663 5.31669 2.33329 9.00002 2.33329C12.6834 2.33329 15.6667 5.31663 15.6667 8.99996C15.6667 12.6833 12.6834 15.6666 9.00002 15.6666Z" fill="#F44336"/>
+</svg>
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 6fa99131..1283c798 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 import Avatar from '../Avatar';
 import { MESSAGE_TYPE } from './conversationModels';
+import Alert from './../assets/alert.svg';
 
 const ConversationBubble = forwardRef<
   HTMLDivElement,
@@ -14,11 +15,26 @@ const ConversationBubble = forwardRef<
     <div
       ref={ref}
       className={`flex rounded-3xl ${
-        type === 'QUESTION' ? '' : 'bg-gray-1000'
+        type === 'ANSWER'
+          ? 'bg-gray-1000'
+          : type === 'ERROR'
+          ? 'bg-red-1000'
+          : ''
       } py-7 px-5 ${className}`}
     >
       <Avatar avatar={type === 'QUESTION' ? '👤' : '🦖'}></Avatar>
-      <p className="ml-5">{message}</p>
+      <div
+        className={`ml-5 flex items-center ${
+          type === 'ERROR'
+            ? 'rounded-lg border border-red-2000 p-2 text-red-3000'
+            : ''
+        }`}
+      >
+        {type === 'ERROR' && (
+          <img src={Alert} alt="alert" className="mr-2 inline" />
+        )}
+        <span>{message}</span>
+      </div>
     </div>
   );
 });
diff --git a/frontend/src/conversation/conversationApi.ts b/frontend/src/conversation/conversationApi.ts
index c58532b6..20302847 100644
--- a/frontend/src/conversation/conversationApi.ts
+++ b/frontend/src/conversation/conversationApi.ts
@@ -5,7 +5,7 @@ export function fetchAnswerApi(
   apiKey: string,
 ): Promise<Answer> {
   // a mock answer generator, this is going to be replaced with real http call
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     setTimeout(() => {
       let result = '';
       const characters =
@@ -18,7 +18,16 @@ export function fetchAnswerApi(
         );
         counter += 1;
       }
-      resolve({ answer: result, query: question, result });
+      const randNum = getRandomInt(0, 10);
+      randNum < 5
+        ? reject()
+        : resolve({ answer: result, query: question, result });
     }, 3000);
   });
 }
+
+function getRandomInt(min: number, max: number) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive
+}
diff --git a/frontend/src/conversation/conversationModels.ts b/frontend/src/conversation/conversationModels.ts
index e2b55e44..c30977d1 100644
--- a/frontend/src/conversation/conversationModels.ts
+++ b/frontend/src/conversation/conversationModels.ts
@@ -1,4 +1,4 @@
-export type MESSAGE_TYPE = 'QUESTION' | 'ANSWER';
+export type MESSAGE_TYPE = 'QUESTION' | 'ANSWER' | 'ERROR';
 export type Status = 'idle' | 'loading' | 'failed';
 
 export interface Message {
diff --git a/frontend/src/conversation/conversationSlice.ts b/frontend/src/conversation/conversationSlice.ts
index 82e62ceb..bd6929e8 100644
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/frontend/src/conversation/conversationSlice.ts
@@ -38,8 +38,12 @@ export const conversationSlice = createSlice({
           type: 'ANSWER',
         });
       })
-      .addCase(fetchAnswer.rejected, (state) => {
+      .addCase(fetchAnswer.rejected, (state, action) => {
         state.status = 'failed';
+        state.conversation.push({
+          text: 'Something went wrong. Please try again later.',
+          type: 'ERROR',
+        });
       });
   },
 });
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 8596bc5d..73cc3eda 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -12,6 +12,9 @@ module.exports = {
         jet: '#343541',
         'gray-alpha': 'rgba(0,0,0, .1)',
         'gray-1000': '#F6F6F6',
+        'red-1000': 'rgb(254, 202, 202)',
+        'red-2000' : '#F44336',
+        'red-3000': '#621B16',
       },
     },
   },