diff --git a/frontend/src/components/Chat.tsx b/frontend/src/components/Chat.tsx
index 66c92b9..f0d1ec4 100644
--- a/frontend/src/components/Chat.tsx
+++ b/frontend/src/components/Chat.tsx
@@ -1,21 +1,14 @@
-import { FiMenu, FiSend } from 'react-icons/fi';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
 
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import TypingIndicator from './TypingIndicator';
 import remarkGfm from 'remark-gfm';
 import styles from './Chat.module.css';
+import type { Message,ChatProps,HandleSendType } from '../../types/DataTypes'
+import Header from './sub-components/Header';
+import WelcomePromptSuggestions from './sub-components/WelcomePromptSuggestions';
+import InputArea from './sub-components/InputArea';
 
-interface Message {
-  text: string;
-  sender: 'user' | 'bot';
-  timestamp: string;
-}
-
-interface ChatProps {
-  onMenuClick: () => void;
-  resetSignal?: number;
-}
 
 const Chat: React.FC<ChatProps> = ({ onMenuClick, resetSignal }) => {
   const [messages, setMessages] = useState<Message[]>([]);
@@ -36,7 +29,7 @@ const Chat: React.FC<ChatProps> = ({ onMenuClick, resetSignal }) => {
   const userId = getOrCreateId('apiconf_user_id');
   const sessionId = getOrCreateId('apiconf_session_id');
 
-  const handleSend = useCallback(async (messageToSend: string) => {
+  const handleSend:HandleSendType = useCallback(async (messageToSend: string) => {
     if (!messageToSend.trim()) return;
 
     // Save the first user message as the preview for the history
@@ -169,30 +162,12 @@ const Chat: React.FC<ChatProps> = ({ onMenuClick, resetSignal }) => {
 
   return (
     <div className={styles.chat}>
-      <div className={styles.chatHeader}>
-        <button className={styles.menuButton} onClick={onMenuClick}>
-          <FiMenu />
-        </button>
-        Chat with Ndu
-      </div>
+      {/* header */}
+      <Header onMenuClick={onMenuClick}/>
       <div className={styles.content}>
         <div className={styles.messages}>
           {messages.length === 0 ? (
-            <div className={styles.welcome}>
-              <h1>Welcome!</h1>
-              <p>Your friendly assistant for the API Conference 2025 in Lagos. Ask me about speakers, schedules, and more!</p>
-              <div className={styles.promptSuggestions}>
-                <button className={styles.promptButton} onClick={() => handleSend('Who are the main speakers?')}>
-                  Who are the main speakers?
-                </button>
-                <button className={styles.promptButton} onClick={() => handleSend('What is the conference schedule?')}>
-                  What is the conference schedule?
-                </button>
-                <button className={styles.promptButton} onClick={() => handleSend('How do I get to the venue?')}>
-                  How do I get to the venue?
-                </button>
-              </div>
-            </div>
+           <WelcomePromptSuggestions handleSend={handleSend}/>
           ) : (
             messages.map((msg, index) => (
               <div
@@ -224,20 +199,7 @@ const Chat: React.FC<ChatProps> = ({ onMenuClick, resetSignal }) => {
           <div ref={messagesEndRef} />
         </div>
       </div>
-      <div className={styles.inputArea}>
-        <form onSubmit={handleSubmit} className={styles.inputForm}>
-          <input
-            type="text"
-            className={styles.inputField}
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            placeholder="Ask something..."
-          />
-          <button type="submit" className={styles.sendButton}>
-            <FiSend />
-          </button>
-        </form>
-      </div>
+      <InputArea input={input} setInput={setInput} handleSubmit={handleSubmit}/>
     </div>
   );
 };
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 7feb23d..bccbae2 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,20 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import styles from './Sidebar.module.css';
 import { FiPlus, FiX } from 'react-icons/fi';
+import type {HistoryItem,SidebarProps} from '../../types/DataTypes'
+
 
-interface HistoryItem {
-  sessionId: string;
-  timestamp: string;
-  preview: string;
-}
 
-interface SidebarProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onNewChat: () => void;
-  onRestoreSession: (sessionId: string) => void;
-  activeSessionId: string | null;
-}
 
 const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose, onNewChat, onRestoreSession, activeSessionId }) => {
   const [history, setHistory] = useState<HistoryItem[]>([]);
diff --git a/frontend/src/components/sub-components/Header.tsx b/frontend/src/components/sub-components/Header.tsx
new file mode 100644
index 0000000..192d726
--- /dev/null
+++ b/frontend/src/components/sub-components/Header.tsx
@@ -0,0 +1,17 @@
+
+import styles from '../Chat.module.css';
+import { FiMenu} from 'react-icons/fi';
+import type { HeaderType} from '../../../types/DataTypes';
+
+const Header = ({onMenuClick}:HeaderType) => {
+  return (
+    <div className={styles.chatHeader}>
+        <button className={styles.menuButton} onClick={onMenuClick}>
+          <FiMenu />
+        </button>
+        Chat with Ndu
+      </div>
+  )
+}
+
+export default Header
\ No newline at end of file
diff --git a/frontend/src/components/sub-components/InputArea.tsx b/frontend/src/components/sub-components/InputArea.tsx
new file mode 100644
index 0000000..33e0df6
--- /dev/null
+++ b/frontend/src/components/sub-components/InputArea.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import type { InputAreaProps } from '../../../types/DataTypes'
+import styles from '../Chat.module.css';
+import { FiSend } from 'react-icons/fi';
+
+
+const InputArea: React.FC <InputAreaProps> = ({input,setInput,handleSubmit}) => {
+  return (
+    <div className={styles.inputArea}>
+        <form onSubmit={handleSubmit} className={styles.inputForm}>
+          <input
+            type="text"
+            className={styles.inputField}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Ask something..."
+          />
+          <button type="submit" className={styles.sendButton}>
+            <FiSend />
+          </button>
+        </form>
+      </div>
+  )
+}
+
+export default InputArea
\ No newline at end of file
diff --git a/frontend/src/components/sub-components/WelcomePromptSuggestions.tsx b/frontend/src/components/sub-components/WelcomePromptSuggestions.tsx
new file mode 100644
index 0000000..bf98bd9
--- /dev/null
+++ b/frontend/src/components/sub-components/WelcomePromptSuggestions.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import styles from '../Chat.module.css';
+import type { WelcomePromptSuggestionsProps } from '../../../types/DataTypes';
+
+
+const WelcomePromptSuggestions = ({handleSend}:WelcomePromptSuggestionsProps) => {
+
+  return (
+     <div className={styles.welcome}>
+              <h1>Welcome!</h1>
+              <p>Your friendly assistant for the API Conference 2025 in Lagos. Ask me about speakers, schedules, and more!</p>
+              <div className={styles.promptSuggestions}>
+                <button className={styles.promptButton} onClick={() => handleSend('Who are the main speakers?')}>
+                  Who are the main speakers?
+                </button>
+                <button className={styles.promptButton} onClick={() => handleSend('What is the conference schedule?')}>
+                  What is the conference schedule?
+                </button>
+                <button className={styles.promptButton} onClick={() => handleSend('How do I get to the venue?')}>
+                  How do I get to the venue?
+                </button>
+              </div>
+            </div>
+  )
+}
+
+export default WelcomePromptSuggestions
\ No newline at end of file
diff --git a/frontend/types/DataTypes.ts b/frontend/types/DataTypes.ts
new file mode 100644
index 0000000..e960ed3
--- /dev/null
+++ b/frontend/types/DataTypes.ts
@@ -0,0 +1,42 @@
+export interface Message {
+  text: string;
+  sender: 'user' | 'bot';
+  timestamp: string;
+}
+
+export interface InputAreaProps {
+  input: string;
+  setInput: React.Dispatch<React.SetStateAction<string>>;
+  handleSubmit: (e: React.FormEvent) => void;
+}
+
+export interface HandleSendType {
+  (messageToSend: string): Promise<void>;
+}
+
+export interface WelcomePromptSuggestionsProps {
+  handleSend: HandleSendType;
+}
+
+export interface HeaderType {
+  onMenuClick: ()=> void
+}
+
+export interface ChatProps {
+  onMenuClick: () => void;
+  resetSignal?: number;
+}
+
+export interface HistoryItem {
+  sessionId: string;
+  timestamp: string;
+  preview: string;
+}
+
+export interface SidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onNewChat: () => void;
+  onRestoreSession: (sessionId: string) => void;
+  activeSessionId: string | null;
+}
\ No newline at end of file