diff --git a/app/(app)/History/MessageHistory/index.tsx b/app/(app)/History/MessageHistory/index.tsx
index 5774aa9a..26154521 100644
--- a/app/(app)/History/MessageHistory/index.tsx
+++ b/app/(app)/History/MessageHistory/index.tsx
@@ -1,10 +1,196 @@
-import React from 'react'
-import { Text, View } from 'react-native'
+import { MoreIcon } from "@/assets/icons/MoreCircleSvg";
+import { SearchIcon } from "@/assets/icons/SearchSvg";
+import { Colors } from "@/constants/Colors";
+import Typography from "@/constants/Typography";
+import { router } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import React, { ReactElement, useState } from "react";
+import { Platform, TouchableOpacity } from "react-native";
+import { Image, ImageBackground, Text, View, FlatList,ScrollView } from "react-native";
+import { SvgXml } from "react-native-svg";
+import data from "../history.json"
+import NofoundComponent from "@/components/NofoundComponent";
+import SearchComponent from "@/components/SearchComponent";
+import Historyheader from "@/components/Historyheader";
+import { DoctorComponentVoice,DoctorComponentVideo } from "@/components/CardComponent";
+import MessageComponent from "@/components/MessageComponent";
+import { rightArrow } from "@/assets/icons/Right_arrow";
+
+
+
+
+interface imageMapProp{
+    [key:string]:ReturnType<typeof require>
+}
+interface iconMappingProp{
+    [key :string]:ReactElement
+}
+
+const imageMap:imageMapProp = {
+    'doctor1.png': require("../../../../assets/images/Doctors/doctor1.png"),
+    'doctor2.png': require("../../../../assets/images/Doctors/doctor2.png"),
+    'doctor3.png': require("../../../../assets/images/Doctors/doctor3.png"),
+    'doctor4.png': require("../../../../assets/images/Doctors/doctor4.png"),
+    'doctor5.png':require("../../../../assets/images/Doctors/doctor5.png")
+
+}
+export const iconMapping:iconMappingProp = {
+    rightArrow: <SvgXml xml={rightArrow} />,
+   
+}
 
 const index = () => {
+  const [showSearch, setShowSearch] = useState<boolean>(false)
+  const [searchTerm, setSearchTerm] = useState<string>('')
+  const [selectedCategory, setSelectedCategory] = useState(data.categories[0])
+  const handleSearchSubmit = (text: string) => {
+        setSearchTerm(text.toLowerCase())
+    }
+  const handleSearchPressed = () => {
+        setShowSearch(true)
+  }
+
+  const handleCategoryPressed = (category: any) => {
+    setSelectedCategory(category)
+  }
+  
+  const filteredDoctors=searchTerm.length>0 ? selectedCategory.Doctors.filter(doctor=>doctor.name.toLowerCase().includes(searchTerm)):selectedCategory.Doctors
   return (
-    <Text>index</Text>
-  )
-}
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: Colors.others.white,
+        flexDirection: "column",
+        padding: 20,
+      }}
+    >
+      <StatusBar style="dark" />
+      
+      <View style={{ paddingTop: 20, gap: 30 }}>
+        <View
+          style={{
+            backgroundColor: "transparent",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          {
+            !showSearch ? (
+              <Historyheader
+                onSearchPressed={handleSearchPressed}
+              
+              />
+            )
+              : (
+                <SearchComponent
+                  onSearchSubmit={handleSearchSubmit}
+                
+                />
+            )
+         }
+  
+
+        </View>
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-around",
+            alignItems: "center",
+            width: "100%"
+          }}
+        >
+          {data.categories.map((category, index) =>
+          
+          <TouchableOpacity key={index} onPress={()=>handleCategoryPressed(category)} style={{display:"flex",justifyContent:"center",alignItems:"center"}}>
+            <Text
+              style={[
+                Typography.semiBold.xLarge,
+                  { color:category===selectedCategory? "#246BFD": Colors.grayScale._400 ,marginBottom:3},
+                
+              ]}
+            >
+             {category.name}
+              </Text>
+              <View style={{width:110,backgroundColor:category===selectedCategory?"#246BFD":"#D3D3D3",height:category===selectedCategory?3:1,marginTop:5,marginBottom:5,borderRadius:10}}></View>
+          </TouchableOpacity>
+          
+          )}
+        </View>
+      </View>
+      <View style={{ backgroundColor: "white", width: "100%" }}>
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{
+            paddingTop: 20,
+            paddingBottom:100
+          }}
+        
+        >
+        {
+          filteredDoctors.length > 0 ? (
+            filteredDoctors.map((doctor: any, index: number) => (
+              selectedCategory.name === "Messaging" ? (
+                <MessageComponent
+                  key={index}
+                  imageSource={imageMap[doctor.imageSource]}
+                  message={doctor.Message}
+                  timeFrame={doctor.timeFrame}
+                  time={doctor.time}
+                  name={doctor.name}
+                
+                
+                />
+              ) :selectedCategory.name==="Voice Call"?
+                (
+                  
+                  <DoctorComponentVoice
+                    key={index}
+                    imageSource={imageMap[doctor.imageSource]}
+                    iconComponent={iconMapping[doctor.iconComponent]}
+                    name={doctor.name}
+                    method="Voice Call"
+                    day={doctor.timeFrame}
+                    time={doctor.time}
+
+                    
+                  
+                  />
+                  ) : selectedCategory.name === "Video Call" ?
+                    
+                    (
+                      <DoctorComponentVideo
+                        key={index}
+                    imageSource={imageMap[doctor.imageSource]}
+                    iconComponent={iconMapping[doctor.iconComponent]}
+                    name={doctor.name}
+                    method="Video call"
+                    day={doctor.timeFrame}
+                    time={doctor.time}
+                      
+                      
+                      
+                      
+                      />
+
+                    ):null
+              
+            
+
+          ))
+            
+          ):
+            (
+              <NofoundComponent/>
+              
+          )
+        }
+       </ScrollView> 
+
+</View>
+
+    </View>
+  );
+};
 
-export default index
\ No newline at end of file
+export default index;
\ No newline at end of file
diff --git a/app/(app)/History/VoiceCallHistory/index.tsx b/app/(app)/History/VoiceCallHistory/index.tsx
index 199bccb7..a1b91a22 100644
--- a/app/(app)/History/VoiceCallHistory/index.tsx
+++ b/app/(app)/History/VoiceCallHistory/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import { View } from 'react-native'
+import { View,Text } from 'react-native'
 
 const index = () => {
   return (
-    <View>index</View>
+    <View><Text>index</Text></View>
   )
 }
 
diff --git a/app/(app)/History/_layout.tsx b/app/(app)/History/_layout.tsx
index a6e42e0b..f3d063c6 100644
--- a/app/(app)/History/_layout.tsx
+++ b/app/(app)/History/_layout.tsx
@@ -1,5 +1,9 @@
 import { Stack } from "expo-router";
 
 export default function Layout() {
-  return <Stack></Stack>;
+  return (
+    <Stack>
+      <Stack.Screen name="MessageHistory/index" options={{ headerShown: false }} />
+    </Stack>
+  );
 }
diff --git a/app/(app)/History/history.json b/app/(app)/History/history.json
new file mode 100644
index 00000000..ccd4b2a1
--- /dev/null
+++ b/app/(app)/History/history.json
@@ -0,0 +1,254 @@
+{
+    "categories":[
+        {
+           "name":"Messaging",
+            "Doctors":[
+                {
+                       "imageSource":"doctor1.png",
+                        "name":"Dr. Travis Westaby",
+                        "iconComponent":"heart",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                },
+                {
+                       "imageSource":"doctor2.png",
+                        "name":"Dr. Nathaniel Valle",
+                        "iconComponent":"heart",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                },
+                 {
+                      "imageSource":"doctor3.png",
+                        "name":"Dr. Beckett Calger",
+                        "iconComponent":"heart",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                },
+                 {
+                       "imageSource":"doctor4.png",
+                        "name":"Dr. Jada Srnsky",
+                        "iconComponent":"heart",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                },
+                 {
+                      "imageSource":"doctor5.png",
+                        "name":"Dr. Bernard Bliss",
+                        "iconComponent":"heart",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                },
+                 {
+                       "imageSource":"doctor1.png",
+                        "name":"Dr. Travis Westaby",
+                        "iconComponent":"heart",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                }
+            ] 
+        },
+        {
+            "name":"Voice Call",
+            "Doctors":[
+                {
+                       "imageSource":"doctor1.png",
+                        "name":"Dr. Travis Westaby",
+                        "iconComponent":"rightArrow",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                },
+                {
+                       "imageSource":"doctor2.png",
+                        "name":"Dr. Nathaniel Valle",
+                        "iconComponent":"rightArrow",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                },
+                 {
+                      "imageSource":"doctor3.png",
+                        "name":"Dr. Beckett Calger",
+                        "iconComponent":"rightArrow",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                },
+                 {
+                       "imageSource":"doctor4.png",
+                        "name":"Dr. Jada Srnsky",
+                        "iconComponent":"rightArrow",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                },
+                 {
+                      "imageSource":"doctor5.png",
+                        "name":"Dr. Travis Westaby",
+                        "iconComponent":"rightArrow",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                },
+                 {
+                       "imageSource":"doctor2.png",
+                        "name":"Dr. Travis Westaby",
+                        "iconComponent":"rightArrow",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                }
+            ]
+        },
+        {
+            "name":"Video Call",
+            "Doctors":[
+                {
+                       "imageSource":"doctor1.png",
+                        "name":"Dr. Travis Westaby",
+                        "iconComponent":"rightArrow",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                },
+                {
+                       "imageSource":"doctor2.png",
+                        "name":"Dr. Nathaniel Valle",
+                        "iconComponent":"rightArrow",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                },
+                 {
+                      "imageSource":"doctor3.png",
+                        "name":"Dr. Beckett Calger",
+                        "iconComponent":"rightArrow",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                },
+                 {
+                       "imageSource":"doctor4.png",
+                        "name":"Dr. Jada Srnsky",
+                        "iconComponent":"rightArrow",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                },
+                 {
+                      "imageSource":"doctor5.png",
+                        "name":"Dr. Travis Westaby",
+                        "iconComponent":"rightArrow",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                },
+                 {
+                       "imageSource":"doctor2.png",
+                        "name":"Dr. Travis Westaby",
+                        "iconComponent":"rightArrow",
+                        "professionalTitle":"Cardiologist",
+                        "hospital":"Alka Hospital",
+                        "timeFrame":"ToDay",
+                        "time":"10:00 PM",
+                        "Message":"My pleasure all the best Sir!",
+                        "star":"star",
+                        "review":"(4,5050 Reviews)",
+                        "rate":"4.5"
+                }
+            ]
+        }
+        
+    ]
+}
\ No newline at end of file
diff --git a/assets/icons/Right_arrow.ts b/assets/icons/Right_arrow.ts
new file mode 100644
index 00000000..e73f001d
--- /dev/null
+++ b/assets/icons/Right_arrow.ts
@@ -0,0 +1,10 @@
+export const rightArrow=`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.52 17.51 22 12 22L11.7202 21.9962C6.32942 21.8478 2 17.4264 2 12C2 6.49 6.48 2 12 2C17.51 2 22 6.49 22 12ZM10.02 8C9.73 8.3 9.73 8.77 10.03 9.06L12.98 12L10.03 14.94C9.73 15.23 9.73 15.71 10.02 16C10.32 16.3 10.79 16.3 11.08 16L14.57 12.53C14.71 12.39 14.79 12.2 14.79 12C14.79 11.8 14.71 11.61 14.57 11.47L11.08 8C10.94 7.85 10.75 7.78 10.56 7.78C10.36 7.78 10.17 7.85 10.02 8Z" fill="url(#paint0_linear_5267_3463)"/>
+<defs>
+<linearGradient id="paint0_linear_5267_3463" x1="22" y1="22" x2="-1.7982" y2="15.0999" gradientUnits="userSpaceOnUse">
+<stop stop-color="#246BFD"/>
+<stop offset="1" stop-color="#5089FF"/>
+</linearGradient>
+</defs>
+</svg>
+`
\ No newline at end of file
diff --git a/components/CardComponent.tsx b/components/CardComponent.tsx
new file mode 100644
index 00000000..0ff16917
--- /dev/null
+++ b/components/CardComponent.tsx
@@ -0,0 +1,137 @@
+import { Colors } from "@/constants/Colors";
+import Typography from "@/constants/Typography";
+import React, { ReactElement } from "react";
+import { Image, Text, TouchableOpacity } from "react-native";
+import { ImageURISource, View } from "react-native";
+import { router } from "expo-router";
+interface DoctorComponentProps {
+  imageSource: ImageURISource | number;
+  name: string;
+  iconComponent?: ReactElement;
+  method: string;
+  day: string;
+  time: string;
+}
+function DoctorComponentVoice({
+  imageSource,
+  iconComponent,
+  name,
+  method,
+  day,
+  time,
+}: DoctorComponentProps) {
+  return (
+      <TouchableOpacity
+          onPress={()=>router.push("History/VoiceCallHistory")}
+      style={{
+        borderRadius: 10,
+        borderColor: "white",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",    
+        backgroundColor: Colors.others.white,    
+        padding: 20,
+        shadowColor: "#cfcfcf",
+        shadowOffset: { width: -2, height: 4 },
+        shadowOpacity: 3,
+        shadowRadius: 2,
+        elevation: 10,
+         marginBottom: 5,
+        marginTop:5
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 30,
+        }}
+      >
+        <View style={{height: 100, width: 100,borderRadius: 10}}>
+          <Image style={{width: "100%", height: "100%",borderRadius: 10}} source={imageSource} />
+        </View>
+        <View style={{ gap: 10, alignItems: "flex-start" }}>
+          <Text style={[Typography.bold.large]}>{name}</Text>
+          <Text>{method}</Text>
+          <Text>
+                      {day} | <Text></Text>
+            {time}
+          </Text>
+        </View>
+      </View>
+          <View style={{
+          width: 40,
+              height: 40,
+              borderRadius: 100,
+              backgroundColor: "#EDF3FF",
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "center",
+              alignItems:"center"
+      }}>{iconComponent}</View>
+    </TouchableOpacity>
+  );
+}
+
+
+
+function DoctorComponentVideo({
+  imageSource,
+  iconComponent,
+  name,
+  method,
+  day,
+  time,
+}: DoctorComponentProps) {
+  return (
+    <TouchableOpacity
+      style={{
+        borderRadius: 10,
+        borderColor: "white",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",    
+        backgroundColor: Colors.others.white,    
+        padding: 20,
+        shadowColor: "#cfcfcf",
+        shadowOffset: { width: -2, height: 4 },
+        shadowOpacity: 3,
+        shadowRadius: 2,
+        elevation: 10,
+         marginBottom: 5,
+        marginTop:5
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 30,
+        }}
+      >
+        <View style={{height: 100, width: 100,borderRadius: 10}}>
+          <Image style={{width: "100%", height: "100%",borderRadius: 10}} source={imageSource} />
+        </View>
+        <View style={{ gap: 10, alignItems: "flex-start" }}>
+          <Text style={[Typography.bold.large]}>{name}</Text>
+          <Text>{method}</Text>
+          <Text>
+            {day} | <Text></Text>
+            {time}
+          </Text>
+        </View>
+      </View>
+          <View style={{
+              width: 40,
+              height: 40,
+              borderRadius: 100,
+              backgroundColor: "#EDF3FF",
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "center",
+              alignItems:"center"
+          }}>{iconComponent}</View>
+    </TouchableOpacity>
+  );
+}
+export {DoctorComponentVoice,DoctorComponentVideo}
\ No newline at end of file
diff --git a/components/Historyheader.tsx b/components/Historyheader.tsx
new file mode 100644
index 00000000..ae8cb0b7
--- /dev/null
+++ b/components/Historyheader.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { MoreIcon } from "@/assets/icons/MoreCircleSvg";
+import { SearchIcon } from "@/assets/icons/SearchSvg";
+import { Colors } from "@/constants/Colors";
+import Typography from "@/constants/Typography";
+import { router } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import { Platform, TouchableOpacity } from "react-native";
+import { Image, ImageBackground, Text, View, FlatList } from "react-native";
+import { SvgXml } from "react-native-svg";
+import NofoundComponent from "@/components/NofoundComponent";
+import SearchComponent from "@/components/SearchComponent";
+
+interface header{
+    onSearchPressed: () => void,
+    
+}
+
+
+function Historyheader({onSearchPressed}:header) {
+    return (
+        <View style={{ paddingTop: 20, gap: 30,width:"100%"}}>
+        <View
+          style={{
+            backgroundColor: "transparent",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+            <Image
+              style={{ backgroundColor: "transparent" }}
+              source={require("@/assets/images/DefaultLogo.png")}
+            />
+            <Text
+              style={[
+                Typography.bold.large,
+                { fontSize: 22, marginLeft: "3%" },
+              ]}
+            >
+              History
+            </Text>
+          </View>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 20 }}>
+            <TouchableOpacity onPress={onSearchPressed}>
+              <SvgXml xml={SearchIcon} />
+            </TouchableOpacity>
+            <TouchableOpacity>
+              <SvgXml xml={MoreIcon} />
+            </TouchableOpacity>
+          </View>
+           
+  
+
+            </View>
+           </View>
+      
+    );
+}
+
+export default Historyheader;
\ No newline at end of file
diff --git a/components/MessageComponent.tsx b/components/MessageComponent.tsx
new file mode 100644
index 00000000..196cddc3
--- /dev/null
+++ b/components/MessageComponent.tsx
@@ -0,0 +1,45 @@
+import { Colors } from "@/constants/Colors";
+import Typography from "@/constants/Typography";
+import React, { ReactElement } from "react";
+import { Image, Text, TouchableOpacity } from "react-native";
+import { ImageURISource, View } from "react-native";
+import { router } from "expo-router";
+
+interface DoctorComponentProps {
+  imageSource: ImageURISource | number;
+  name: string;
+  iconComponent?: ReactElement;
+    time: string;
+    message: string,
+    timeFrame:string
+    
+}
+function MessageComponent({
+  imageSource,
+  name,
+  timeFrame,
+    time,
+  message
+}: DoctorComponentProps) {
+  return (
+    <TouchableOpacity 
+          onPress={()=> router.push("History/MessageHistory/Chats")}
+          style={{flexDirection: "row", alignItems: "center", justifyContent: "space-between",marginBottom:20,borderWidth:1,borderColor:"white",backgroundColor:"white"}}>
+            <View style={{flexDirection: "row", gap: 20, alignItems: "center"}}>
+              <View style={{width: 70, height: 70, borderRadius: 100}}>
+              <Image style={{width: "100%", height: "100%", borderRadius: 100}} source={imageSource}/>
+              </View>
+              <View style={{gap: 10}}>
+                <Text style={[Typography.bold.xLarge]}>{name}</Text>
+                <Text style={[Typography.medium.medium, {color: Colors.grayScale._700}]}>{message}</Text>
+              </View>
+            </View>
+            <View style={{gap: 10}}>
+              <Text style={[Typography.medium.medium, {color: Colors.grayScale._700}]}>{timeFrame}</Text>
+              <Text style={[Typography.medium.medium, {color: Colors.grayScale._700}]}>{time}</Text>
+            </View>
+          </TouchableOpacity>
+  );
+}
+
+export default MessageComponent;
\ No newline at end of file
diff --git a/components/SearchComponent.tsx b/components/SearchComponent.tsx
index b0d0dd93..047abd28 100644
--- a/components/SearchComponent.tsx
+++ b/components/SearchComponent.tsx
@@ -10,7 +10,7 @@ import { router } from 'expo-router';
 
 interface searchComponentProps{
     onSearchSubmit: (searchTerm: string) => void,
-    filterAction:()=>void
+    filterAction?:()=>void
 }
 function SearchComponent({onSearchSubmit,filterAction}:searchComponentProps) {
     const [value, setValue] = useState("")
@@ -60,6 +60,7 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         justifyContent: "center",
         alignItems: "center",
+        
     },
     outer: {
         width: "80%",