diff --git a/fe_repo/src/App.tsx b/fe_repo/src/App.tsx
index 80bc90833..d8b49caa2 100644
--- a/fe_repo/src/App.tsx
+++ b/fe_repo/src/App.tsx
@@ -1,6 +1,6 @@
 import {ChatBox, Content, Header} from './pages'
 import {ReactNode, useState} from "react";
-import {analyze, sendMessage} from "./functions/api.ts";
+import {analyze, sendMessage, suggest} from "./functions/api.ts";
 
 export type Message = {
   text: string | ReactNode,
@@ -77,11 +77,35 @@ function App() {
     setMessages((messages) => [...messages]);
   }
 
+  const onSuggest = async () => {
+    const sendingMessage: Message = {
+      text: 'Waiting for interview question suggestions...',
+      isUser: false
+    };
+    // show loading message
+    setMessages((messages) => [...messages, {
+      text: 'Suggest interview questions',
+      isUser: true
+    }, sendingMessage]);
+    // show loading message
+    const response = await suggest();
+    if (null === response) {
+      sendingMessage.text = "Something went wrong, please try again later."
+    } else {
+      sendingMessage.text = (
+        <>
+          <div className="font-bold">Suggested questions:<br/>{response.response}</div>
+        </>
+      );
+    }
+    setMessages((messages) => [...messages]);
+  }
+
   return (
     <div className="flex flex-col h-screen bg-gray-100 p-5">
       <Header/>
       <Content messages={messages}></Content>
-      <ChatBox onSendMessage={onSendMessage} onAnalyze={onAnalyze}></ChatBox>
+      <ChatBox onSendMessage={onSendMessage} onAnalyze={onAnalyze} onSuggest={onSuggest}></ChatBox>
     </div>
   )
 }
diff --git a/fe_repo/src/functions/api.test.ts b/fe_repo/src/functions/api.test.ts
index 7242e82b7..f4e05360d 100644
--- a/fe_repo/src/functions/api.test.ts
+++ b/fe_repo/src/functions/api.test.ts
@@ -1,5 +1,5 @@
 import {expect, test} from 'vitest';
-import {analyze, login, sendMessage, uploadFile} from "./api.ts";
+import {analyze, login, sendMessage, suggest, uploadFile} from "./api.ts";
 
 test('sendMessage', () => {
   expect(sendMessage("I'm adam")).toBeDefined();
@@ -24,3 +24,8 @@ test('login', () => {
   // make sure message is always returned
   expect(login('')).toBeDefined();
 })
+
+test('suggest', () => {
+  // make sure message is always returned
+  expect(async () => (await suggest())).toBeDefined();
+})
diff --git a/fe_repo/src/functions/api.ts b/fe_repo/src/functions/api.ts
index 4f109d4e5..80d909bbe 100644
--- a/fe_repo/src/functions/api.ts
+++ b/fe_repo/src/functions/api.ts
@@ -24,6 +24,22 @@ export type LoginResponse = {
   user_id: string
 }
 
+export async function suggest(): Promise<QuestionResponse | null> {
+  try {
+    return axios.post<QuestionResponse>(uri + '/suggest/interiew_question',
+      {user_id: getUserId()},
+      {headers: {'Content-Type': 'multipart/form-data'}})
+      .then(response => response.data)
+      .catch(error => {
+        console.error('Error fetching response', error);
+        return null;
+      });
+  } catch (error) {
+    console.error('Error fetching the backend response', error);
+    return null;
+  }
+}
+
 export async function sendMessage(message: string): Promise<QuestionResponse> {
   console.log("Sending message: " + message);
   try {
diff --git a/fe_repo/src/pages/ChatBox.tsx b/fe_repo/src/pages/ChatBox.tsx
index 9dec15c94..d9b5ea016 100644
--- a/fe_repo/src/pages/ChatBox.tsx
+++ b/fe_repo/src/pages/ChatBox.tsx
@@ -7,9 +7,10 @@ import xss from "xss";
 interface IChatBoxProps {
   onSendMessage: (message: string) => void;
   onAnalyze: (jd: string) => void;
+  onSuggest: () => void;
 }
 
-export const ChatBox = ({onSendMessage, onAnalyze}: IChatBoxProps) => {
+export const ChatBox = ({onSendMessage, onAnalyze, onSuggest}: IChatBoxProps) => {
 
   const [message, setMessage] = useState("");
   const [showPrompt, setShowPrompt] = useState(false);
@@ -87,11 +88,17 @@ export const ChatBox = ({onSendMessage, onAnalyze}: IChatBoxProps) => {
             />
           </div>
           <button
-              className="cursor-pointer px-4 py-2 rounded-full bg-blue-500 text-white text-sm flex items-center gap-1 hover:bg-blue-600 transition"
-              onClick={() => setShowPrompt(true)}
+            className="cursor-pointer px-4 py-2 rounded-full bg-blue-500 text-white text-sm flex items-center gap-1 hover:bg-blue-600 transition"
+            onClick={() => setShowPrompt(true)}
           >
             <span className="text-base">📄</span> Analyze my resume
           </button>
+          <button
+            className="cursor-pointer px-4 py-2 rounded-full bg-blue-500 text-white text-sm flex items-center gap-1 hover:bg-blue-600 transition"
+            onClick={() => onSuggest()}
+          >
+            <span className="text-base">🛈</span> Interview question suggestion
+          </button>
           {/*🛈 /!* Example icon - you can use actual icons here *!/*/}
           {/*💼 /!* Example icon for interview *!/*/}
         </div>