diff --git a/src/core/routes/test.py b/src/core/routes/test.py
index de5cd01..2d9811e 100644
--- a/src/core/routes/test.py
+++ b/src/core/routes/test.py
@@ -31,6 +31,12 @@ class RequestConversation(BaseModel):
     "How to ensure data privacy in Hyperledger Fabric?": "To ensure data privacy in Hyperledger Fabric:\n1. Use private data collections to restrict access to sensitive data.\n2. Implement access control policies and endorsement policies.\n3. Utilize encryption for data at rest and in transit.\n4. Regularly review and update security configurations and practices.",
 }
 
+@router.get("/response-keys", response_model=List[Dict[str, str]])
+async def get_response_keys() -> List[Dict[str, str]]:
+    # Create a list of dictionaries with 'id' and 'name' keys
+    res = ([{"id": str(index+1), "name": key} for index, key in enumerate(responses.keys())])
+    return res
+
 
 def get_hyperledger_fabric_answer(question):
     return responses.get(question, "Question not found in the database.")
diff --git a/src/frontend/components/chat-page.tsx b/src/frontend/components/chat-page.tsx
index bdbfe7b..5a5b676 100644
--- a/src/frontend/components/chat-page.tsx
+++ b/src/frontend/components/chat-page.tsx
@@ -3,6 +3,8 @@
 import React, { useState } from 'react';
 import ChatHeader from './chat-header';
 import { Message } from '@/lib/types';
+import { Suspense } from 'react';
+import WelcomeSection from './welcome-section';
 import ChatBottomBar from './chat-bottom-bar';
 import ChatSection from './chat-section';
 
@@ -27,6 +29,12 @@ const ChatPage = (props: Props) => {
 			<ChatHeader />
 			<main className="flex-1 overflow-y-auto">
 				<ChatSection messages={messages} />
+
+				{messages.length === 0 && (
+					<Suspense fallback={<p>Loading....</p>}>
+						<WelcomeSection />
+					</Suspense>
+				)}
 			</main>
 			<ChatBottomBar onSend={updateMessages} />
 		</div>
diff --git a/src/frontend/components/welcome-section.tsx b/src/frontend/components/welcome-section.tsx
index 07be1c2..f488df7 100644
--- a/src/frontend/components/welcome-section.tsx
+++ b/src/frontend/components/welcome-section.tsx
@@ -1,13 +1,59 @@
-import React from 'react';
+'use-client';
+import React, {
+	useState,
+	useEffect
+} from 'react';
 import { IconHyperledger } from './icons/IconHyperledger';
+import { SERVER_BASE_URL } from '@/lib/const';
+import { Suspense } from 'react';
 
 type Props = {};
 
+interface Message {
+	id: string;
+	name: string;
+}
+
 const WelcomeSection = (props: Props) => {
+	const [messages, setMessages] = useState<
+		Message[]
+	>([]);
+
+	useEffect(() => {
+		async function fetchData() {
+			const response = await fetch(
+				SERVER_BASE_URL + '/response-keys'
+			);
+			const data = await response.json();
+			setMessages(data);
+		}
+
+		fetchData();
+	}, []);
+
 	return (
-		<div className="flex h-full flex-col items-center justify-center text-primary space-y-2">
-			<IconHyperledger className="w-16 h-16 fill-primary shrink-0" />
-		</div>
+		<>
+			<div className="flex h-1/2 flex-col items-center justify-center text-primary space-y-2">
+				<IconHyperledger className="w-16 h-16 fill-primary shrink-0" />
+			</div>
+
+			<Suspense fallback={<p>Loading....</p>}>
+				<div className="grid grid-cols-2 gap-2 p-4">
+					{messages.map((user: Message) => (
+						<li
+							key={user.id}
+							className="flex flex-end items-center justify-between p-4 bg-white shadow rounded-lg text-gray-600"
+						>
+							<div className="flex flex-col space-y-1">
+								<h2 className="text-lg font-semibold">
+									{user.name}
+								</h2>
+							</div>
+						</li>
+					))}
+				</div>
+			</Suspense>
+		</>
 	);
 };