diff --git a/app/Appointments/voice-call/writeReview.tsx b/app/Appointments/voice-call/writeReview.tsx
index 1539b5dd..4d606fad 100644
--- a/app/Appointments/voice-call/writeReview.tsx
+++ b/app/Appointments/voice-call/writeReview.tsx
@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from "react";
 import { View, Text, TouchableOpacity, Image, TextInput, StyleSheet, Modal, ScrollView, SafeAreaView, Pressable } from "react-native";
-import { router } from "expo-router";
+import { router, useLocalSearchParams } from "expo-router";
 import { useFonts } from 'expo-font';
 import FiveStarRating from "../doctorcard/star";
+import { supabase } from "@/app/supabase";
 
 interface CustomCheckBoxProps {
   selected: boolean;
@@ -21,12 +22,9 @@ export default function Writereview() {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isoption, setIsoption] = useState("");
   const [text, setText] = useState('');
-  const [fontLoaded] = useFonts({
-    'UrbanistBold': require('../../../assets/fonts/Urbanist-Bold.ttf'),
-    'UrbanistRegular': require("../../../assets/fonts/Urbanist-Regular.ttf"),
-    'Urbanist-SemiBold': require("../../../assets/fonts/Urbanist-SemiBold.ttf"),
-    'UrbanistMedium': require("../../../assets/fonts/Urbanist-Medium.ttf")
-  });
+ const [name, setName]=useState("");
+ const [image, setImage]=useState("");
+ const {appointmentId}=useLocalSearchParams();
 
   const handleChangeText = (value: string) => {
     setText(value);
@@ -34,12 +32,20 @@ export default function Writereview() {
 
   const isSubmitEnabled = text.trim().length > 0 && isoption.length > 0;
 
-  if (!fontLoaded) {
-    return null;
-  }
+  
 
   const Options = ["Yes", "No"];
 
+  useEffect(()=>{
+    const fetchDoctor=async()=>{
+    const {data, error}=await supabase.from("doctor").select("*").eq("id",appointmentId).single();
+    if(data){
+      setName(data.name);
+      console.log(data.name);
+      setImage(data.image)
+    }
+  if (error) throw error}
+  fetchDoctor()},[])
   return (
     <>
       <Modal
@@ -71,10 +77,10 @@ export default function Writereview() {
               <Text className="text-[#212121] font-UrbanistBold text-[24px] pl-5">Write a Review</Text>
             </View>
             <View className="w-[370px] flex justify-center items-center gap-5 mb-2">
-              <Image source={require("../../../assets/doctors/Ellipse.png")} />
+              <Image source={{uri:image}} style={styles.doctorImage}/>
               <View>
                 <Text className="text-[#212121] font-UrbanistBold text-[20px] text-center">How was your experience </Text>
-                <Text className="text-[#212121] font-UrbanistBold text-[20px] text-center">with Dr. Drake Boeson?</Text>
+                <Text className="text-[#212121] font-UrbanistBold text-[20px] text-center">with {name}?</Text>
               </View>
               <View className=" w-[350px] flex flex-row  justify-center pb-3">
                 <SafeAreaView>
@@ -92,7 +98,7 @@ export default function Writereview() {
                 placeholder="Your review here..."
                 style={styles.textInput}
               />
-              <Text className="text-[#212121] font-UrbanistBold text-[20px] pb-5 pt-3">Would you recommend Dr. Drake Boeson to your friends?</Text>
+              <Text className="text-[#212121] font-UrbanistBold text-[20px] pb-5 pt-3">Would you recommend {name} to your friends?</Text>
               <View className="flex flex-row items-center pl-2 justify-between w-[130px]">
                 {Options.map((option, index) => (
                   <View key={index} className="flex flex-row items-center justify-center gap-2">
@@ -184,4 +190,10 @@ const styles = StyleSheet.create({
     width: '100%',
     minHeight: 100,
   },
+  doctorImage: {
+    width: 120,  
+    height: 120, 
+    borderRadius: 60, 
+    marginBottom: 10,
+  },
 });
diff --git a/app/chat-history/VideoCall.tsx b/app/chat-history/VideoCall.tsx
index bca03a5b..a8e720cc 100644
--- a/app/chat-history/VideoCall.tsx
+++ b/app/chat-history/VideoCall.tsx
@@ -1,64 +1,45 @@
-import React from "react";
+import React, {useState, useEffect} from "react";
 import { View, ScrollView } from "react-native";
 import DoctorVideo from "@/components/cards/DoctorVideo";
 import { useRouter } from "expo-router";
-import { DoctorCard } from "./types"; // Import the types
-
+import { DoctorCard } from "./types"; 
+import { supabase } from "../supabase";
 const VideoCall = () => {
   const router = useRouter();
+  const [appointment, setAppointment]=useState<any[]>([]);
 
-  const docCards: DoctorCard[] = [
-    {
-      name: "Dr. Randy Wigham",
-      callDay: "Wednesday",
-      callTime: "1:00 PM",
-      images: require("../../assets/doctors/doc2.png"),
-    },
-    {
-      name: "Dr. Jenny Watson",
-      callDay: "Wednesday",
-      callTime: "1:00 PM",
-      images: require("../../assets/doctors/doc3.png"),
-    },
-    {
-      name: "Dr. Raul Zirkind",
-      callDay: "Wednesday",
-      callTime: "1:00 PM",
-      images: require("../../assets/doctors/doc1.png"),
-    },
-    {
-      name: "Dr. Elijah Baranick",
-      callDay: "Wednesday",
-      callTime: "1:00 PM",
-      images: require("../../assets/doctors/doc2.png"),
-    },
-    {
-      name: "Dr. Stephen Shute",
-      callDay: "Wednesday",
-      callTime: "1:00 PM",
-      images: require("../../assets/doctors/doc5.png"),
-    },
-  ];
-
-  const handlePress = (doctor: DoctorCard) => {
+  useEffect(()=>{
+    const fetchAppointments=async()=>{
+    const {data, error}=await supabase.auth.getUser();
+    if(error) throw error;
+    const userId=data?.user?.id;
+    const {data:AppointmentData, error:Error}=await supabase.from("appointment").select("*, doctor(name,image)").eq("patient_id", userId).eq("package","Video Call").eq("status", "Completed")
+    if(Error) throw Error
+    if(AppointmentData){
+    setAppointment(AppointmentData);
+    }
+    }
+    fetchAppointments();
+      },[])
+ 
+  const handlePress = (appointmentId:any) => {
     router.push({
       pathname: "/chat-history/VideoRecord",
-      params: { doctor: JSON.stringify(doctor) },
+      params: {appointmentId},
     });
   };
-
   return (
     <View style={{ backgroundColor: "white" }}>
       <ScrollView style={{ backgroundColor: "#FAFAFA", paddingBottom: 6 }}>
-        {docCards.map((doctor, index) => (
+        {appointment.map((appointments, index) => (
           <DoctorVideo
             key={index}
-            onPress={() => handlePress(doctor)}
-            doctorName={doctor.name}
-            doctorImage={doctor.images}
-            callType="Video Call"
-            callDay={doctor.callDay}
-            callTime={doctor.callTime}
+            onPress={() => handlePress(appointments.id)}
+            doctorName={appointments.doctor.name}
+            doctorImage={appointments.doctor.image}
+            callType={appointments.package}
+            callDay={appointments.appointment_date}
+            callTime={appointments.appointment_time.slice(0,5)}
             isVideoCallScreen={false}
           />
         ))}
diff --git a/app/chat-history/VideoRecord.tsx b/app/chat-history/VideoRecord.tsx
index a11bc7ce..f6317a02 100644
--- a/app/chat-history/VideoRecord.tsx
+++ b/app/chat-history/VideoRecord.tsx
@@ -14,20 +14,22 @@ import PlayButton from "@/components/cards/PlayButton";
 import { useRouter, useLocalSearchParams } from "expo-router";
 import { SvgXml } from "react-native-svg";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-
-import { DoctorCard } from "./types";
 import { moreTransparent } from "@/assets/icons/more";
 import { back } from "@/assets/icons/userprofile/icons";
+import { supabase } from "../supabase";
 
 const VideoRecord: React.FC = () => {
   const router = useRouter();
-  const { doctor: doctorString } = useLocalSearchParams();
-  const doctor: DoctorCard = doctorString
-    ? JSON.parse(doctorString as string)
-    : null;
-
+ 
+  
+const {appointmentId}=useLocalSearchParams();
   const [modalVisible, setModalVisible] = useState(false);
   const [videoDuration, setVideoDuration] = useState<number>(0);
+  const[ name, setName]=useState("");
+  const[date, setDate]=useState("");
+  const[time, setTime]=useState("");
+  const[packageType, setPackage]=useState("");
+  const[image, setImage]=useState("");
 
   useEffect(() => {
     const fetchDuration = async () => {
@@ -40,9 +42,7 @@ const VideoRecord: React.FC = () => {
     fetchDuration();
   }, []);
 
-  if (!doctor) {
-    return null;
-  }
+ 
 
   const handlePress = () => {
     router.push("/chat-history/PlayRecord");
@@ -64,7 +64,7 @@ const VideoRecord: React.FC = () => {
     setModalVisible(false);
   };
 
-  const { name, images, callDay, callTime } = doctor;
+  
 
   const formatTime = (timeInSeconds: number) => {
     const hours = Math.floor(timeInSeconds / 3600);
@@ -79,6 +79,21 @@ const VideoRecord: React.FC = () => {
       return `${minutes}:${String(seconds).padStart(2, "0")} minutes`;
     }
   };
+  useEffect(()=>{
+    const fetchAppointments=async()=>{
+    const {data:AppointmentData, error:Error}=await supabase.from("appointment").select("*, doctor(name,image)").eq("id",appointmentId).single();
+    if(Error) throw Error
+    if(AppointmentData){
+   setName(AppointmentData.doctor.name);
+   setPackage(AppointmentData.package);
+   setImage(AppointmentData.doctor.image);
+   setTime(AppointmentData.appointment_time);
+   setDate(AppointmentData.appointment_date);
+    
+    }
+    }
+    fetchAppointments();
+      },[appointmentId])
 
   return (
     <SafeAreaView style={areaView}>
@@ -89,12 +104,12 @@ const VideoRecord: React.FC = () => {
             <SvgXml xml={moreTransparent} onPress={handleMorePress} />
           </View>
           <View style={{ rowGap: 28, backgroundColor: "#FAFAFA" }}>
-            <DoctorVideo
+          <DoctorVideo
               doctorName={name}
-              doctorImage={images}
-              callType="Video Call"
-              callDay={callDay}
-              callTime={callTime}
+              doctorImage={image}
+              callType={packageType}
+              callDay={date}
+              callTime={time.slice(0, 5)}
               isVideoCallScreen={true}
             />
             <View
diff --git a/app/chat-history/chatHistory.tsx b/app/chat-history/chatHistory.tsx
index 8cd065ce..0c46e05e 100644
--- a/app/chat-history/chatHistory.tsx
+++ b/app/chat-history/chatHistory.tsx
@@ -8,8 +8,9 @@ import {
   TouchableOpacity,
   Modal,
   Dimensions,
+  Alert,
 } from "react-native";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { NavigationHeader } from "@/components/NavigationHeader";
 import { Icon } from "@/components/Icon";
 import { SvgXml } from "react-native-svg";
@@ -18,12 +19,14 @@ import { searchDark } from "@/assets/icons/search";
 import { back } from "@/assets/icons/userprofile/icons";
 import { doubleTick } from "@/assets/icons/doubletick";
 import { download } from "@/assets/icons/download";
+import moment from "moment";
 import { deleteBtn, deleteRed } from "@/assets/icons/delete";
 import Chat from "@/components/chats/chat";
 import Index from "./VideoCall";
 import { MessagesType, messages } from "./data";
 import VoiceCalls from "./voiceCalls";
-
+import { supabase } from "../supabase";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 export default function Chathistory() {
   const y = Dimensions.get("screen").height;
@@ -31,31 +34,111 @@ export default function Chathistory() {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [visible, setVisible] = useState(false);
   const [docName, setDocname] = useState("");
-  const handleDocName = (doc: string) => {
+  const [messages, setMessage]=useState<any[]>([]);
+  const [userId, setUserId] = useState("");
+  const [appointment, setAppointment]=useState<any[]>([]);
+  const [selectedAppointmentId, setSelectedAppointmentId] = useState<string | null>(null);
+
+  const handleDocName = (doc: string, appointmentId: string) => {
     setDocname(doc);
+    setSelectedAppointmentId(appointmentId);
     setIsModalVisible(true);
   };
-  const renderItems = ({ item }: { item: MessagesType }) => {
+
+  useEffect(()=>{
+const fetchAppointments=async()=>{
+const {data, error}=await supabase.auth.getUser();
+if(error) throw error;
+const userId=data?.user?.id;
+setUserId(userId);
+const {data:AppointmentData, error:Error}=await supabase.from("appointment").select("*, doctor(name,image)").eq("patient_id", userId).eq("package","Messaging")
+if(Error) throw Error
+if(AppointmentData){
+setAppointment(AppointmentData);
+}
+const{data:MessageData, error:MessageError}=await supabase.from("messages").select("*")
+if(MessageData){
+  setMessage(MessageData);
+}
+if(MessageError)throw MessageError;
+
+}
+fetchAppointments();
+  },[])
+
+  const handleDeleteMessages = async () => {
+    try {
+      const { error } = await supabase
+        .from("messages")
+        .delete()
+        .eq("appointment_id", selectedAppointmentId);
+
+      if (error) {
+        console.error("Error deleting messages:", error);
+        Alert.alert("Delete Messages", "Failed to delete messages!");
+      } else {
+        Alert.alert("Delete Messages", "Messages deleted successfully!");
+      }
+    } catch (error) {
+      console.error("Error deleting messages:", error);
+      Alert.alert("Delete Messages", "Failed to delete messages!");
+    }
+  };
+
+  const handleExportMessages = async () => {
+    try {
+      const { data, error } = await supabase
+        .from("messages")
+        .select("*")
+        .eq("appointment_id", selectedAppointmentId);
+
+      if (error) {
+        console.error("Error exporting messages:", error);
+        Alert.alert("Export Messages", "Failed to export messages!");
+      } else {
+        // Implement your logic to export data, e.g., create a CSV file
+        console.log("Exported messages:", data);
+        Alert.alert("Export Messages", "Messages exported successfully!");
+      }
+    } catch (error) {
+      console.error("Error exporting messages:", error);
+      Alert.alert("Export Messages", "Failed to export messages!");
+    }
+  };
+
+  const handleClearChat = async () => {
+    try {
+      await AsyncStorage.removeItem("chatMessages"); // Assuming messages are stored in AsyncStorage
+      Alert.alert("Clear Chat", "Chat cleared successfully!");
+    } catch (error) {
+      console.error("Error clearing chat:", error);
+      Alert.alert("Clear Chat", "Failed to clear chat!");
+    }
+  };
+
+
+  
+  const renderHistory = (appointment: any, index:number) => {
     return (
-      <View className="flex flex-row w-1/1 justify-between items-center py-3 ">
+      <View key={index} className="flex flex-row w-1/1 justify-between items-center py-3 ">
         <View className="flex-none w-[20%]">
-          <Image source={item.image} style={{ width: 58, height: 58 }} />
+          <Image source={{uri:appointment.doctor.image}} style={{ width: 58, height: 58 }} />
         </View>
         <TouchableOpacity
           className="flex-auto w-[73%] pl-2"
-          onPress={() => handleDocName(item.name)}
+          onPress={() => handleDocName(appointment.doctor.name, appointment.id)}
         >
           <Text className="font-UrbanistBold text-[16px] pb-2">
-            {item.name}
+            {appointment.doctor.name}
           </Text>
-          <Text className="font-UrbanistRegular text-grey">{item.message}</Text>
+          <Text className="font-UrbanistRegular text-grey">...</Text>
         </TouchableOpacity>
         <View className="flex-auto w-[30%] justify-start">
           <Text className="font-UrbanistRegular text-grey pb-2 text-right">
-            {item.date}
+            {appointment.appointment_date}
           </Text>
           <Text className="font-UrbanistRegular text-grey text-right">
-            {item.time}
+            {appointment.appointment_time.slice(0,5)}
           </Text>
         </View>
       </View>
@@ -71,12 +154,12 @@ export default function Chathistory() {
         >
           <View className="w-[100%]">
             <View className="w-[37%] relative top-[50px] left-[59%] p-4 right-0 bg-white rounded-xl">
-              <TouchableOpacity className="flex-row gap-2 py-2">
+              <TouchableOpacity className="flex-row gap-2 py-2" onPress={handleClearChat}>
                 <SvgXml xml={deleteBtn} />
                 <Text className="font-UrbanistSemiBold">Clear chat</Text>
               </TouchableOpacity>
               <View className="w-[85%] ml-3 pt-2 border-b-[1px] border-grey opacity-40" />
-              <TouchableOpacity className="flex-row gap-2 pb-2 pt-4 ">
+              <TouchableOpacity className="flex-row gap-2 pb-2 pt-4 " onPress={handleExportMessages}>
                 <SvgXml xml={download} />
                 <Text className="font-UrbanistSemiBold"> Export chat</Text>
               </TouchableOpacity>
@@ -85,6 +168,7 @@ export default function Chathistory() {
                 className="flex-row gap-2 pt-3"
                 onPress={() => {
                   setVisible(false);
+                  handleDeleteMessages
                 }}
               >
                 <SvgXml xml={deleteRed} stroke={"#F75555"} />
@@ -124,58 +208,28 @@ export default function Chathistory() {
                 </Text>
               </View>
             </View>
-
-            <Chat
-              direction="end"
-              message="Hi, good afternoon Dr. Drake... 😁😁"
-              time="16:00 PM"
-              color="lightblue"
-            />
-            <Chat
-              direction="end"
-              message="I'm Andrew, I have a problem with my immune system 😢"
-              time="16:00 PM"
-              color="lightblue"
-            />
-            <Chat
-              direction="start"
-              message="Hello, good afternoon too Andrew 😁"
-              time="16:01 PM"
-              color="lightgrey"
-            />
-            <Chat
-              direction="start"
-              message="Can you tell me the problem you are having? So that I can identify it."
-              time="16:01 PM"
-              color="lightgrey"
-            />
-            <Chat
-              direction="end"
-              message="Recently I often feel unwell. I also sometimes experience pain in the legs, and I don't know why 😭😭
-                        Do you know anything doc?"
-              time="16:02 PM"
-              color="lightblue"
-            />
-            <View className={`w-[100%] flex items-end my-3`}>
+            {messages
+    .filter((message: any) => message.appointment_id === selectedAppointmentId)
+    .map((message: any, index: any) => (
+      <Chat
+      key={index}
+      direction={message.sender_id === userId ? "end" : "start"}
+      message={message.message}
+      time={moment(`${message.created_at}`).calendar()}
+      color={message.sender_id === userId ? "lightblue" : "lightgrey"}
+    />
+            ))}
+            <View className="flex-row justify-center items-center my-3">
+              <View className="w-1/3 bg-[#75757512] justify-center items-center rounded-xl">
+                <Text className="text-[13px] p-1 text-[#757575] font-UrbanistSemiBold">
+                  Session Ended
+                </Text>
+              </View>
+            </View>
+ <View className={`w-[100%] flex items-end my-3`}>
               <View
                 className={` rounded-xl p-4 w-3/4 flex justify-end gap-r-2`}
               >
-                <View className={` w-[73%] flex-row gap-x-4 pb-3`}>
-                  <Image
-                    source={require("../../assets/images/chat/leg.png")}
-                    style={{ width: 100, height: 100 }}
-                    resizeMode="contain"
-                  />
-                  <Image
-                    source={require("../../assets/images/chat/leg1.png")}
-                    style={{ width: 100, height: 100 }}
-                    resizeMode="contain"
-                  />
-                </View>
-                {/* <View className="flex-row items-center gap-x-1 justify-end">
-                                    <Text className={`font-UrbanistRegular text-[10px]`}>16:03 PM</Text>
-                                    <SvgXml xml={doubleTick} stroke={'black'} />
-                                </View> */}
               </View>
             </View>
           </ScrollView>
@@ -249,16 +303,12 @@ export default function Chathistory() {
           </View>
           <View className="w-[100%] border-b-[2px] border-[#EEEEEE] relative bottom-[2.6px] z-[-1]"></View>
         </View>
-
         {selected === "Messages" && (
-          <FlatList
-            data={messages}
-            renderItem={renderItems}
-            style={{ height: "82%" }}
-            showsVerticalScrollIndicator={false}
-          />
+          <ScrollView style={{ height: "82%" }} showsVerticalScrollIndicator={false}>
+            {appointment.map((appointmentItem,index) => renderHistory(appointmentItem,index))}
+          </ScrollView>
         )}
-
+{selected==="Calls"&&<VoiceCalls/>}
         {selected === "Videos" && <Index />}
       </View>
     </>
diff --git a/app/chat-history/singleCall.tsx b/app/chat-history/singleCall.tsx
index 10cf37da..e9e68204 100644
--- a/app/chat-history/singleCall.tsx
+++ b/app/chat-history/singleCall.tsx
@@ -9,9 +9,10 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { play } from "@/assets/icons/playBtn";
 import { download } from '@/assets/icons/download';
 import { deleteRed } from '@/assets/icons/delete';
-import { router } from 'expo-router';
+import { router, useLocalSearchParams } from 'expo-router';
 import { AVPlaybackSource, AVPlaybackStatus, AVPlaybackStatusSuccess, Audio } from "expo-av";
 import { Sound } from 'expo-av/build/Audio';
+import { supabase } from '../supabase';
 
 const { width } = Dimensions.get('window');
 const WAVEFORM_ELEMENTS_COUNT = 50;
@@ -23,18 +24,26 @@ export default function SingleCall() {
     const [duration, setDuration] = useState<number | any>(1);
     const [sound, setSound] = useState<Sound | null>(null);
     const progressAnim = useRef(new Animated.Value(0)).current;
+    const { appointmentId } = useLocalSearchParams();
     const intervalRef = useRef<NodeJS.Timer | null>(null);
     const [waveformHeights, setWaveformHeights] = useState<number[]>([]);
-
+    const [appointment, setAppointment] = useState<any[]>([]);
+    const [name, setName] = useState("");
+    const [date, setDate] = useState("");
+    const [time, setTime] = useState("");
+    const [packageType, setPackage] = useState("");
+    const [image, setImage] = useState("");
     const generateWaveformHeights = () => {
+
         return Array.from({ length: WAVEFORM_ELEMENTS_COUNT }, () => Math.random() * 50 + 10);
     };
-    const handleLoad= async()=>{
+    const handleLoad = async () => {
         const { sound } = await Audio.Sound.createAsync(require('@/assets/Travis-Mafia.mp3'));
+
         setSound(sound);
         await sound.loadAsync(require('@/assets/Travis-Mafia.mp3'));
         const status = await sound.getStatusAsync();
-        if (status.isLoaded){
+        if (status.isLoaded) {
             setDuration(status.durationMillis);
         }
     }
@@ -80,12 +89,12 @@ export default function SingleCall() {
 
     const formatTime = (millis: number) => {
         const minutes = Math.floor(millis / 60 / 1000);
-        const seconds= Math.round(((millis/60/1000)-minutes)*60);
-        return seconds<10? `${minutes} minutes and 0${seconds} seconds`:`${minutes} minutes and ${seconds} seconds`;;
+        const seconds = Math.round(((millis / 60 / 1000) - minutes) * 60);
+        return seconds < 10 ? `${minutes} minutes and 0${seconds} seconds` : `${minutes} minutes and ${seconds} seconds`;;
     }
-    useEffect(()=>{
+    useEffect(() => {
         handleLoad();
-    },[])
+    }, [])
     useEffect(() => {
         intervalRef.current = setInterval(() => {
             handleProgress();
@@ -111,6 +120,20 @@ export default function SingleCall() {
         setWaveformHeights(generateWaveformHeights());
     }, [sound]);
 
+    useEffect(() => {
+        const fetchAppointments = async () => {
+            const { data: AppointmentData, error: Error } = await supabase.from("appointment").select("*, doctor(name,image)").eq("id", appointmentId).single()
+            if (AppointmentData) {
+                setName(AppointmentData.doctor.name);
+                setPackage(AppointmentData.package);
+                setImage(AppointmentData.doctor.image);
+                setTime(AppointmentData.appointment_time);
+                setDate(AppointmentData.appointment_date);
+            }
+        }
+        fetchAppointments();
+    }, [appointmentId])
+
     return (
         <>
             <View className={`${visible ? '' : 'hidden'} absolute w-[100%] right-0 `}>
@@ -138,13 +161,12 @@ export default function SingleCall() {
                         <SvgXml xml={moreTransparent} onPress={() => setVisible(!visible)} />
                     </View>
                 </View>
-
                 <CallsCard
-                    name='Dr Dustin Bugingo'
-                    type='Voice call'
-                    date='Today'
-                    time='14:00 PM'
-                    image={require('@/assets/doctors/doc1.png')}
+                    name={name}
+                    type={packageType}
+                    date={date}
+                    time={time.slice(0, 5)}
+                    image={image}
                     icon={phone}
                 />
                 <View className='border-[1px] border-[#EEEEEE] my-5' />
@@ -160,13 +182,13 @@ export default function SingleCall() {
                             {waveformHeights.map((height, index) => {
                                 const barWidth = width * 0.75 / WAVEFORM_ELEMENTS_COUNT;
                                 const barProgress = progressAnim.interpolate({
-                                    inputRange: [0, (index ) / WAVEFORM_ELEMENTS_COUNT * width],
+                                    inputRange: [0, (index) / WAVEFORM_ELEMENTS_COUNT * width],
                                     outputRange: [0, 1],
                                     extrapolate: 'clamp',
                                 });
                                 const backgroundColor = barProgress.interpolate({
                                     inputRange: [0, 1],
-                                    outputRange: ['#E9F0FF','#246BFD']
+                                    outputRange: ['#E9F0FF', '#246BFD']
                                 });
                                 return (
                                     <Pressable
diff --git a/app/chat-history/voiceCalls.tsx b/app/chat-history/voiceCalls.tsx
index 0c6fded9..709868a2 100644
--- a/app/chat-history/voiceCalls.tsx
+++ b/app/chat-history/voiceCalls.tsx
@@ -1,66 +1,47 @@
 import DoctorCard from "@/components/cards/doctorCard";
 import CallsCard, { CallsType } from "@/components/chats/voiceCard";
 import { router } from "expo-router";
+import { useEffect, useState } from "react";
 import { Text, View, ScrollView, ImageSourcePropType } from "react-native";
 import { FlatList } from "react-native";
+import { supabase } from "../supabase";
 
-interface VoiceCardType {
-    name:string,
-    type:string,
-    date:string,
-    time:string,
-    image:ImageSourcePropType,
-}
-export default function VoiceCalls() {
-    const data = [{
-        name: 'Dr. Jenny Watson',
-        type: 'Voice call',
-        date: 'Today',
-        time: '14:00 PM',
-        image: require('@/assets/doctors/doc1.png')
-    },
-    {
-        name: 'Dr. Dustin Jurries',
-        type: 'Voice call',
-        date: 'Yesterday',
-        time: '19:00 PM',
-        image: require('@/assets/doctors/doc2.png')
-    },
-    {
-        name: 'Dr. Aidan Allende',
-        type: 'Voice call',
-        date: 'Dec 10, 2022',
-        time: '10:30 AM',
-        image: require('@/assets/doctors/doc3.png')
-    },
-    {
-        name: 'Dr. Raul Zirkind',
-        type: 'Voice call',
-        date: 'Dec 05, 2022',
-        time: '15:00 PM',
-        image: require('@/assets/doctors/doc4.png')
-    },
 
-    ]
-    const renderItems = ({ item }: { item: VoiceCardType }) => {
+export default function VoiceCalls() {
+    const[appointment, setAppointment]=useState<any[]>([]);
+    
+    useEffect(()=>{
+        const fetchAppointments=async()=>{
+        const {data, error}=await supabase.auth.getUser();
+        if(error) throw error;
+        const userId=data?.user?.id;
+        const {data:AppointmentData, error:Error}=await supabase.from("appointment").select("*, doctor(name,image)").eq("patient_id", userId).eq("package","Voice Call").eq("status", "Completed")
+        if(Error) throw Error
+        if(AppointmentData){
+        setAppointment(AppointmentData);
+        }
+        }
+        fetchAppointments();
+          },[])
+    const renderItems = (appointment: any, index:any) => {
         return (
             <>
                 <CallsCard
-                    name={item.name}
-                    type={item.type}
-                    date={item.date}
-                    time={item.time}
-                    image={item.image}
-                    onPress={()=>router.push('chat-history/singleCall')}
+                    key={index}
+                    name={appointment.doctor.name}
+                    type={appointment.package}
+                    date={appointment.appointment_date}
+                    time={appointment.appointment_time.slice(0,5)}
+                    image={appointment.doctor.image}
+                    onPress={()=>router.push({pathname:'chat-history/singleCall', params:{appointmentId:appointment.id}})}
                 />
             </>
         )
     }
 
-    const image = require('@/assets/doctors/doc1.png');
     return (
         <>
-        <FlatList data={data} renderItem={renderItems} showsVerticalScrollIndicator={false} className="h-[82%]"/>
+                    {appointment.map((appointmentItem,index) => renderItems(appointmentItem,index))} 
         </>
     )
 }
\ No newline at end of file
diff --git a/components/cards/DoctorVideo.tsx b/components/cards/DoctorVideo.tsx
index 086bd55e..409257ef 100644
--- a/components/cards/DoctorVideo.tsx
+++ b/components/cards/DoctorVideo.tsx
@@ -23,7 +23,7 @@ export default function DoctorCard(props: DocCardProps) {
     <ScrollView className="mb-6">
       <View className="bg-white rounded-3xl p-4">
         <View className="flex-row ">
-          <Image source={props.doctorImage} className="w-28 h-28" />
+          <Image source={{uri:props.doctorImage}} className="w-28 h-28" />
           <View className="flex-1 pl-4 justify-around">
             <Text className="font-[18px] font-[UrbanistBold]">
               {props.doctorName}
diff --git a/components/chats/voiceCard.tsx b/components/chats/voiceCard.tsx
index ad2fc2af..7f25a80f 100644
--- a/components/chats/voiceCard.tsx
+++ b/components/chats/voiceCard.tsx
@@ -1,5 +1,4 @@
 import { leftArrowBlue, leftFilledArrowIcon } from "@/assets/icons/arrow";
-import { heart, heartFilledIcon } from "@/assets/icons/heart";
 import {
     Image,
     ImageSourcePropType,
@@ -16,7 +15,7 @@ export type CallsType = {
     time: string;
     date: string;
     icon?: any;
-    image: ImageSourcePropType;
+    image: any;
     onPress?: () => void;
 };
 
@@ -25,7 +24,7 @@ export default function CallsCard(props: CallsType) {
         <Pressable onPress={props.onPress} style={styles.container}>
             <View className="bg-white rounded-3xl p-4 mb-6 mr-1" style={styles.card1}>
                 <View className="flex-row justify-between w-full">
-                    <Image source={props.image} className="w-24 h-24" />
+                    <Image source={{uri:props.image}} className="w-24 h-24" />
                     <View className="justify-evenly pl-2 w-[50%]">
                         <View className="justify-between w-full items-center flex-row">
                             <Text className="text-[16px] font-[UrbanistBold]">