diff --git a/app/(app)/ActionMenu/AllDoctorScreen.tsx b/app/(app)/ActionMenu/AllDoctorScreen.tsx
new file mode 100644
index 00000000..e1fd100a
--- /dev/null
+++ b/app/(app)/ActionMenu/AllDoctorScreen.tsx
@@ -0,0 +1,376 @@
+import React,{ReactElement, useEffect, useState} from 'react';
+import { StyleSheet, Text, Image, View, TouchableHighlight, SafeAreaView, Button, Alert, Platform, Dimensions,TextInput, ScrollView, Pressable} from 'react-native'
+import { Feather } from '@expo/vector-icons';
+import { AntDesign } from '@expo/vector-icons';
+import { Ionicons } from '@expo/vector-icons';
+import DoctorComponent from '@/components/DoctorComponent';
+import { FontAwesome } from '@expo/vector-icons';
+ import { SvgXml } from "react-native-svg"
+import { WhiteHeart } from '@/components/UI/icons/WhiteHeart';
+import { star } from '@/assets/icons/star';
+import { search } from '@/assets/icons/search';
+import { more } from '@/assets/icons/more';
+import { leftArrow } from '@/assets/icons/left';
+import data from "../../doctors.json"
+import HeaderComponent from '@/components/HeaderComponent';
+import SearchComponent from '@/components/SearchComponent';
+import FoundDoctorCount from '@/components/FoundDoctorCount';
+import NofoundComponent from '@/components/NofoundComponent';
+import RemovefavoritePopup from '@/components/RemovefavoritePopup';
+import FilterPopup from '@/components/FilterSearchComponent';
+import { StatusBar } from 'expo-status-bar';
+import NotFoundScreen from '@/app/+not-found';
+import { ThemeContext } from '@/ctx/ThemeContext';
+import { useContext } from 'react';
+import { supabase } from '@/lib/supabase';
+
+
+
+const tableName = 'doctors'
+
+
+
+
+interface imageMapProp{
+    [key:string]:ReturnType<typeof require>
+}
+
+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")
+
+}
+interface iconMappingProp{
+    [key :string]:ReactElement
+}
+
+
+interface Doctor{
+    id: number,
+    first_name: string,
+    last_name: string,
+    hospital: string,
+    rate: string,
+    review: string,
+    specialization: string,
+    about:string
+}
+interface categoryProp{
+    name: string,
+    Doctors:Doctor[]
+}
+
+export const iconMapping:iconMappingProp = {
+    heart: <SvgXml xml={WhiteHeart } />,
+    star: <SvgXml xml={star} />,
+}
+
+
+
+function DoctorScreen() {
+    const [showSearch, setShowSearch] = useState<boolean>(false)
+    const [searchTerm, setSearchTerm] = useState<string>('')
+    const [selectedCategory, setSelectedCategory] = useState(data.categories[0])
+    const [showpopUp, setShowPopup] = useState(false)
+    const [selectedDoctor, setSelectedDoctor] = useState()
+    const [showFilter, setShowfilter] = useState(false)
+    const [doctors,setDoctors]=useState<Doctor[]>([])
+    const { theme, changeTheme } = useContext(ThemeContext)
+    const containerStyle = theme === "dark" ? styles.outerDark : styles.outerLight
+    const scrollbackColor = theme === "dark" ? styles.scrollDark : styles.scrollLight
+    
+    useEffect(() => {
+        async function fetchData() {
+  const { data, error } = await supabase.from(tableName).select('*');
+
+  if (error) {
+    console.error('Error fetching data:', error);
+    return;
+            }
+            setDoctors(data)
+           
+  console.log('Fetched data:', data);
+}
+
+fetchData();
+    },[])
+
+    const handleSearchPressed = () => {
+        setShowSearch(true)
+    }
+    const handleSearchSubmit = (text: string) => {
+        setSearchTerm(text.toLowerCase())
+    }
+    
+    const handleFilter = () => {
+        setShowfilter(true)
+    }
+    const handleRemove = (doctor:any) => {
+        setSelectedDoctor(doctor)
+        
+        setShowPopup(true)
+    }
+
+    const filteredDoctors=searchTerm.length>0 ? doctors.filter(doctor=>doctor.last_name.toLowerCase().includes(searchTerm)):doctors
+    return (
+        <SafeAreaView style={[styles.container, containerStyle]}>
+           <StatusBar style={theme === "dark" ? "light" : "dark"} />
+            <View>
+                
+                <View style={[styles.upper,containerStyle]}>
+                    {
+                        !showSearch ? (
+                            <HeaderComponent
+                                onSearchPressed={handleSearchPressed}
+                                headerText="Top Doctor"
+                            
+                            />
+                        ) : (
+                               
+                            <SearchComponent
+                                    onSearchSubmit={handleSearchSubmit}
+                                    filterAction={handleFilter}
+                                
+                                
+                            />
+                        )
+                    }
+                </View>
+                <View style={[styles.categoryBtnView,containerStyle]}>
+                <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.categoryScroll}
+                    contentContainerStyle={{
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        alignItems:'center'
+
+                    }}>
+                    
+                    {data.categories.map((category, index) =>
+                        <Pressable key={index} style={[styles.categoryBtn,
+                            selectedCategory === category ? styles.firstCategoryBtn : {},
+                            ]}>
+                            
+                            <Text style={[
+                                styles.categoryBtnText,
+                                selectedCategory === category ? styles.firstCategoryBtnText : {},
+                                ]}>{category.name}</Text>  
+                            
+                    </Pressable>
+                        )}
+                    </ScrollView>
+                    
+                </View>
+                <View style={styles.foundDoctorView}>
+                    {showSearch && (
+                        <FoundDoctorCount count={filteredDoctors.length } />
+                    )}
+                </View>
+                <View>
+                <ScrollView
+                showsVerticalScrollIndicator={false}
+             style={[styles.scroll,scrollbackColor]}
+              contentContainerStyle={{
+            justifyContent: "center",
+            //  alignItems: 'center',
+            paddingBottom: 150,
+            paddingTop:20
+          }}
+                    >
+                        {filteredDoctors.length > 0 ? (
+                            
+                                filteredDoctors.map((doctor: any, index: any) =>
+                        
+                                    <View key={index} style={styles.componentView}>
+                                        <DoctorComponent
+
+                                            imageSource={{uri:doctor.image}}
+                                            name={`${doctor.first_name} ${doctor.last_name}`}
+                                            iconComponent={<SvgXml xml={WhiteHeart } />}
+                                            professionalTitle={doctor.specialization}
+                                            hospital={doctor.hospital}
+                                            star={<SvgXml xml={star} />}
+                                            review={doctor.review}
+                                            rate={doctor.rate}
+                                            remove={()=>handleRemove(doctor)}
+
+                                        />
+                                    </View>
+                        
+                                )
+                            
+                        ) : (
+                             <NofoundComponent/>   
+                    )}
+                         
+
+                    </ScrollView>
+                     
+                </View>
+               
+                   
+            
+            </View>
+            <RemovefavoritePopup
+                cancel={()=>setShowPopup(false)}
+                visible={showpopUp}
+                onClose={() => setShowPopup(false)}
+                doctor={selectedDoctor}
+            
+            
+            />
+            <FilterPopup
+                cancel={()=>setShowfilter(false)}
+                visible={showFilter}
+                onClose={() => setShowfilter(false)}
+            
+            
+            
+            />
+            
+
+             
+        </SafeAreaView>
+        
+    );
+}
+
+export default DoctorScreen;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        zIndex:1
+    },
+    outerDark: {
+        backgroundColor:"#181A20"
+        
+    },
+    outerLight: {
+     backgroundColor: "white",
+        
+    },
+    upper: {
+        display: "flex",
+        flexDirection: 'row',
+        justifyContent: "center",
+        alignItems: "center",
+        width:"100%",
+         marginBottom: "7%",
+        marginTop: "18%",
+    },
+    foundDoctorView: {
+        width: "100%",
+        display: "flex",
+        flexDirection: 'row',
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    searchComponent: {
+        
+    },
+    upperInner: {
+        width: "95%",
+        display: "flex",
+        flexDirection: 'row',
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    upperLeft: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: 'space-between',
+        width: "70%",
+        height:"100%",
+    },
+    categoryScroll: {
+    
+    },
+    categoryBtnView: {
+        display:"flex",
+        flexDirection: "row",
+        alignItems: 'center',
+        marginBottom: "5%",
+        backgroundColor: "white",
+    },
+    categoryBtn: {
+        borderWidth: 2,
+        borderColor: "#246BFD",
+        height: 40,
+        paddingHorizontal: 20,
+        paddingVertical:7,
+        borderRadius: 20,
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        marginRight: 8,
+        marginLeft:10
+    },
+    firstCategoryBtn: {
+      backgroundColor:  "#246BFD"
+    },
+    firstCategoryBtnText: {
+      color:"white"  
+    },
+    categoryBtnText: {
+        color: "#246BFD",
+        fontSize:16    
+    },
+    body: {
+        width: "98%",
+        backgroundColor:"#F7F7F7",
+    },
+    scroll: {
+        width: "100%",
+        height: "100%",
+        zIndex: 1, 
+    },
+    scrollDark: {
+        backgroundColor:"#181A20"
+        
+    },
+    scrollLight: {
+        backgroundColor: "#F7F7F7"
+        
+    },
+    searchView: {
+        display: "flex",
+        flexDirection: 'row',
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    moreOuter: {
+       display: "flex",
+        flexDirection: 'row',
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    Headstyle: {
+        color: "#212121",
+        fontWeight: "bold",
+        fontSize:20
+    },
+    NotificationView: {
+        width:"80%"
+    },
+    componentView: {
+        marginBottom: "5%",
+        width: "100%",
+        height:150,
+       display: "flex",
+        flexDirection: 'row',
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    rightView: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: 'space-between',
+        width:"25%"
+    },
+   
+    
+})
\ No newline at end of file
diff --git a/app/(app)/ActionMenu/FavoriteDoctorScreen.tsx b/app/(app)/ActionMenu/FavoriteDoctorScreen.tsx
index e45b3c26..e08434b2 100644
--- a/app/(app)/ActionMenu/FavoriteDoctorScreen.tsx
+++ b/app/(app)/ActionMenu/FavoriteDoctorScreen.tsx
@@ -1,332 +1,374 @@
-import React, { ReactElement, useContext, useState } from "react";
-import {
-  StyleSheet,
-  Text,
-  Image,
-  View,
-  TouchableHighlight,
-  SafeAreaView,
-  Button,
-  Alert,
-  Platform,
-  Dimensions,
-  TextInput,
-  ScrollView,
-  Pressable,
-} from "react-native";
-import { Feather } from "@expo/vector-icons";
-import { AntDesign } from "@expo/vector-icons";
-import { Ionicons } from "@expo/vector-icons";
-import DoctorComponent from "@/components/DoctorComponent";
-import { FontAwesome } from "@expo/vector-icons";
-import { SvgXml } from "react-native-svg";
-import { blueheart } from "@/assets/icons/blueHeart";
-import { star } from "@/assets/icons/star";
-import { search } from "@/assets/icons/search";
-import { more } from "@/assets/icons/more";
-import { leftArrow } from "@/assets/icons/left";
-import data from "../../doctors.json";
-import HeaderComponent from "@/components/HeaderComponent";
-import SearchComponent from "@/components/SearchComponent";
-import FoundDoctorCount from "@/components/FoundDoctorCount";
-import NofoundComponent from "@/components/NofoundComponent";
-import RemovefavoritePopup from "@/components/RemovefavoritePopup";
-import FilterPopup from "@/components/FilterSearchComponent";
-import { StatusBar } from "expo-status-bar";
-import NotFoundScreen from "@/app/+not-found";
-import Chips from "@/components/UI/ChipsComponent";
-import { ThemeContext } from "@/ctx/ThemeContext";
+import React,{ReactElement, useEffect, useState} from 'react';
+import { StyleSheet, Text, Image, View, TouchableHighlight, SafeAreaView, Button, Alert, Platform, Dimensions,TextInput, ScrollView, Pressable} from 'react-native'
+import { Feather } from '@expo/vector-icons';
+import { AntDesign } from '@expo/vector-icons';
+import { Ionicons } from '@expo/vector-icons';
+import DoctorComponent from '@/components/DoctorComponent';
+import { FontAwesome } from '@expo/vector-icons';
+ import { SvgXml } from "react-native-svg"
+import { blueheart } from '@/assets/icons/blueHeart';
+import { star } from '@/assets/icons/star';
+import { search } from '@/assets/icons/search';
+import { more } from '@/assets/icons/more';
+import { leftArrow } from '@/assets/icons/left';
+import data from "../../doctors.json"
+import HeaderComponent from '@/components/HeaderComponent';
+import SearchComponent from '@/components/SearchComponent';
+import FoundDoctorCount from '@/components/FoundDoctorCount';
+import NofoundComponent from '@/components/NofoundComponent';
+import RemovefavoritePopup from '@/components/RemovefavoritePopup';
+import FilterPopup from '@/components/FilterSearchComponent';
+import { StatusBar } from 'expo-status-bar';
+import NotFoundScreen from '@/app/+not-found';
+import { ThemeContext } from '@/ctx/ThemeContext';
+import { useContext } from 'react';
+import { supabase } from '@/lib/supabase';
 
-interface imageMapProp {
-  [key: string]: ReturnType<typeof require>;
+
+const tableName = 'doctors'
+
+
+
+
+interface imageMapProp{
+    [key:string]:ReturnType<typeof require>
 }
 
-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"),
-};
-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")
+
 }
+interface iconMappingProp{
+    [key :string]:ReactElement
+}
+
 
-interface Doctor {
-  imageSource: string;
-  name: string;
-  iconComponent: ReactElement;
-  professionalTitle: string;
-  hospital: string;
-  star: number;
-  review: number;
-  rate: number;
+interface Doctor{
+    id: number,
+    first_name: string,
+    last_name: string,
+    hospital: string,
+    rate: string,
+    review: string,
+    specialization: string,
+    about:string
 }
-interface categoryProp {
-  name: string;
-  Doctors: Doctor[];
+interface categoryProp{
+    name: string,
+    Doctors:Doctor[]
 }
 
-export const iconMapping: iconMappingProp = {
-  heart: <SvgXml xml={blueheart} />,
-  star: <SvgXml xml={star} />,
-};
+export const iconMapping:iconMappingProp = {
+    heart: <SvgXml xml={blueheart} />,
+    star: <SvgXml xml={star} />,
+}
+
+
 
 function DoctorScreen() {
-  const [showSearch, setShowSearch] = useState<boolean>(false);
-  const [searchTerm, setSearchTerm] = useState<string>("");
-  const [selectedCategory, setSelectedCategory] = useState(data.categories[0]);
-  const [showpopUp, setShowPopup] = useState(false);
-  const [selectedDoctor, setSelectedDoctor] = useState();
-  const [showFilter, setShowfilter] = useState(false);
-  const { theme, changeTheme } = useContext(ThemeContext);
-  const containerStyle =
-    theme === "dark" ? styles.outerDark : styles.outerLight;
-  const scrollbackColor =
-    theme === "dark" ? styles.scrollDark : styles.scrollLight;
+    const [showSearch, setShowSearch] = useState<boolean>(false)
+    const [searchTerm, setSearchTerm] = useState<string>('')
+    const [selectedCategory, setSelectedCategory] = useState(data.categories[0])
+    const [showpopUp, setShowPopup] = useState(false)
+    const [selectedDoctor, setSelectedDoctor] = useState()
+    const [showFilter, setShowfilter] = useState(false)
+    const [doctors,setDoctors]=useState<Doctor[]>([])
+    const { theme, changeTheme } = useContext(ThemeContext)
+    const containerStyle = theme === "dark" ? styles.outerDark : styles.outerLight
+    const scrollbackColor = theme === "dark" ? styles.scrollDark : styles.scrollLight
+    
+    useEffect(() => {
+        async function fetchData() {
+  const { data, error } = await supabase.from(tableName).select('*');
 
-  const handleSearchPressed = () => {
-    setShowSearch(true);
-  };
-  const handleSearchSubmit = (text: string) => {
-    setSearchTerm(text.toLowerCase());
-  };
+  if (error) {
+    console.error('Error fetching data:', error);
+    return;
+            }
+            setDoctors(data)
+           
+  console.log('Fetched data:', data);
+}
+
+fetchData();
+    },[])
+
+    const handleSearchPressed = () => {
+        setShowSearch(true)
+    }
+    const handleSearchSubmit = (text: string) => {
+        setSearchTerm(text.toLowerCase())
+    }
+    
+    const handleFilter = () => {
+        setShowfilter(true)
+    }
+    const handleRemove = (doctor:any) => {
+        setSelectedDoctor(doctor)
+        
+        setShowPopup(true)
+    }
 
-  const handleCategoryChange = (category: any) => {
-    setSelectedCategory(category), setSearchTerm("");
-  };
-  const handleFilter = () => {
-    setShowfilter(true);
-  };
-  const handleRemove = (doctor: any) => {
-    setSelectedDoctor(doctor);
+    const filteredDoctors=searchTerm.length>0 ? doctors.filter(doctor=>doctor.last_name.toLowerCase().includes(searchTerm)):doctors
+    return (
+        <SafeAreaView style={[styles.container, containerStyle]}>
+           <StatusBar style={theme === "dark" ? "light" : "dark"} />
+            <View>
+                
+                <View style={[styles.upper,containerStyle]}>
+                    {
+                        !showSearch ? (
+                            <HeaderComponent
+                                onSearchPressed={handleSearchPressed}
+                                headerText="Top Doctor"
+                            
+                            />
+                        ) : (
+                               
+                            <SearchComponent
+                                    onSearchSubmit={handleSearchSubmit}
+                                    filterAction={handleFilter}
+                                
+                                
+                            />
+                        )
+                    }
+                </View>
+                <View style={[styles.categoryBtnView,containerStyle]}>
+                <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.categoryScroll}
+                    contentContainerStyle={{
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        alignItems:'center'
 
-    setShowPopup(true);
-  };
+                    }}>
+                    
+                    {data.categories.map((category, index) =>
+                        <Pressable key={index} style={[styles.categoryBtn,
+                            selectedCategory === category ? styles.firstCategoryBtn : {},
+                            ]}>
+                            
+                            <Text style={[
+                                styles.categoryBtnText,
+                                selectedCategory === category ? styles.firstCategoryBtnText : {},
+                                ]}>{category.name}</Text>  
+                            
+                    </Pressable>
+                        )}
+                    </ScrollView>
+                    
+                </View>
+                <View style={styles.foundDoctorView}>
+                    {showSearch && (
+                        <FoundDoctorCount count={filteredDoctors.length } />
+                    )}
+                </View>
+                <View>
+                <ScrollView
+                showsVerticalScrollIndicator={false}
+             style={[styles.scroll,scrollbackColor]}
+              contentContainerStyle={{
+            justifyContent: "center",
+            paddingBottom: 150,
+            paddingTop:20
+          }}
+                    >
+                        {filteredDoctors.length > 0 ? (
+                            
+                                filteredDoctors.map((doctor: any, index: any) =>
+                        
+                                    <View key={index} style={styles.componentView}>
+                                        <DoctorComponent
 
-  const filteredDoctors =
-    searchTerm.length > 0
-      ? selectedCategory.Doctors.filter((doctor) =>
-          doctor.name.toLowerCase().includes(searchTerm)
-        )
-      : selectedCategory.Doctors;
-  return (
-    <SafeAreaView style={[styles.container, containerStyle]}>
-      <StatusBar style={theme === "dark" ? "light" : "dark"} />
-      <View>
-        <View style={[styles.upper, containerStyle]}>
-          {!showSearch ? (
-            <HeaderComponent
-              onSearchPressed={handleSearchPressed}
-              headerText="Top Doctor"
+                                            imageSource={{uri:doctor.image}}
+                                            name={`${doctor.first_name} ${doctor.last_name}`}
+                                            iconComponent={<SvgXml xml={blueheart} />}
+                                            professionalTitle={doctor.specialization}
+                                            hospital={doctor.hospital}
+                                            star={<SvgXml xml={star} />}
+                                            review={doctor.review}
+                                            rate={doctor.rate}
+                                            remove={()=>handleRemove(doctor)}
+
+                                        />
+                                    </View>
+                        
+                                )
+                            
+                        ) : (
+                             <NofoundComponent/>   
+                    )}
+                         
+
+                    </ScrollView>
+                     
+                </View>
+               
+                   
+            
+            </View>
+            <RemovefavoritePopup
+                cancel={()=>setShowPopup(false)}
+                visible={showpopUp}
+                onClose={() => setShowPopup(false)}
+                doctor={selectedDoctor}
+            
+            
             />
-          ) : (
-            <SearchComponent
-              onSearchSubmit={handleSearchSubmit}
-              filterAction={handleFilter}
+            <FilterPopup
+                cancel={()=>setShowfilter(false)}
+                visible={showFilter}
+                onClose={() => setShowfilter(false)}
+            
+            
+            
             />
-          )}
-        </View>
-        <View style={[styles.categoryBtnView, containerStyle]}>
-          <ScrollView
-            horizontal={true}
-            showsHorizontalScrollIndicator={false}
-            style={styles.categoryScroll}
-            contentContainerStyle={{
-              flexDirection: "row",
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
-          >
-            {data.categories.map((category, index) => (
-              <>
-                <Chips
-                  key={index}
-                  text={category.name}
-                  type={selectedCategory === category ? "filled" : "border"}
-                  onPress={() => handleCategoryChange(category)}
-                  size="medium"
-                  style={{ marginLeft: 10 }}
-                />
-              </>
-            ))}
-          </ScrollView>
-        </View>
-        <View style={styles.foundDoctorView}>
-          {showSearch && <FoundDoctorCount count={filteredDoctors.length} />}
-        </View>
-        <View>
-          <ScrollView
-            showsVerticalScrollIndicator={false}
-            style={styles.scroll}
-            contentContainerStyle={{
-              justifyContent: "center",
-              alignItems: "center",
-              paddingBottom: 150,
-              paddingTop: 20,
-            }}
-          >
-            {filteredDoctors.length > 0 ? (
-              filteredDoctors.map((doctor: any, index: any) => (
-                <View key={index} style={styles.componentView}>
-                  <DoctorComponent
-                    imageSource={imageMap[doctor.imageSource]}
-                    name={doctor.name}
-                    iconComponent={iconMapping[doctor.iconComponent]}
-                    professionalTitle={doctor.professionalTitle}
-                    hospital={doctor.hospital}
-                    star={iconMapping[doctor.star]}
-                    review={doctor.review}
-                    rate={doctor.rate}
-                    remove={() => handleRemove(doctor)}
-                  />
-                </View>
-              ))
-            ) : (
-              <NofoundComponent />
-            )}
-          </ScrollView>
-        </View>
-      </View>
-      <RemovefavoritePopup
-        cancel={() => setShowPopup(false)}
-        visible={showpopUp}
-        onClose={() => setShowPopup(false)}
-        doctor={selectedDoctor}
-      />
-      <FilterPopup
-        cancel={() => setShowfilter(false)}
-        visible={showFilter}
-        onClose={() => setShowfilter(false)}
-      />
-    </SafeAreaView>
-  );
+            
+
+             
+        </SafeAreaView>
+        
+    );
 }
 
 export default DoctorScreen;
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    zIndex: 1,
-  },
-  outerDark: {
-    backgroundColor: "#181A20",
-  },
-  outerLight: {
-    backgroundColor: "white",
-  },
-  upper: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-    width: "100%",
-    marginBottom: "7%",
-    marginTop: "18%",
-  },
-  foundDoctorView: {
-    width: "100%",
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  searchComponent: {},
-  upperInner: {
-    width: "95%",
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  upperLeft: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    width: "70%",
-    height: "100%",
-  },
-  categoryScroll: {},
-  categoryBtnView: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: "5%",
-    backgroundColor: "white",
-  },
-  categoryBtn: {
-    borderWidth: 2,
-    borderColor: "#246BFD",
-    height: 40,
-    paddingHorizontal: 20,
-    paddingVertical: 7,
-    borderRadius: 20,
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-    marginRight: 8,
-    marginLeft: 10,
-  },
-  firstCategoryBtn: {
-    backgroundColor: "#246BFD",
-  },
-  firstCategoryBtnText: {
-    color: "white",
-  },
-  categoryBtnText: {
-    color: "#246BFD",
-    fontSize: 16,
-  },
-  body: {
-    width: "98%",
-    backgroundColor: "#F7F7F7",
-  },
-  scroll: {
-    width: "100%",
-    height: "100%",
-    zIndex: 1,
-  },
-  scrollDark: {
-    backgroundColor: "#181A20",
-  },
-  scrollLight: {
-    backgroundColor: "#F7F7F7",
-  },
-  searchView: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  moreOuter: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  Headstyle: {
-    color: "#212121",
-    fontWeight: "bold",
-    fontSize: 20,
-  },
-  NotificationView: {
-    width: "80%",
-  },
-  componentView: {
-    marginBottom: "5%",
-    width: "100%",
-    height: 150,
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  rightView: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    width: "25%",
-  },
-});
+    container: {
+        flex: 1,
+        zIndex:1
+    },
+    outerDark: {
+        backgroundColor:"#181A20"
+        
+    },
+    outerLight: {
+     backgroundColor: "white",
+        
+    },
+    upper: {
+        display: "flex",
+        flexDirection: 'row',
+        justifyContent: "center",
+        alignItems: "center",
+        width:"100%",
+         marginBottom: "7%",
+        marginTop: "18%",
+    },
+    foundDoctorView: {
+        width: "100%",
+        display: "flex",
+        flexDirection: 'row',
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    searchComponent: {
+        
+    },
+    upperInner: {
+        width: "95%",
+        display: "flex",
+        flexDirection: 'row',
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    upperLeft: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: 'space-between',
+        width: "70%",
+        height:"100%",
+    },
+    categoryScroll: {
+    
+    },
+    categoryBtnView: {
+        display:"flex",
+        flexDirection: "row",
+        alignItems: 'center',
+        marginBottom: "5%",
+        backgroundColor: "white",
+    },
+    categoryBtn: {
+        borderWidth: 2,
+        borderColor: "#246BFD",
+        height: 40,
+        paddingHorizontal: 20,
+        paddingVertical:7,
+        borderRadius: 20,
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        marginRight: 8,
+        marginLeft:10
+    },
+    firstCategoryBtn: {
+      backgroundColor:  "#246BFD"
+    },
+    firstCategoryBtnText: {
+      color:"white"  
+    },
+    categoryBtnText: {
+        color: "#246BFD",
+        fontSize:16    
+    },
+    body: {
+        width: "98%",
+        backgroundColor:"#F7F7F7",
+    },
+    scroll: {
+        width: "100%",
+        height: "100%",
+        zIndex: 1, 
+    },
+    scrollDark: {
+        backgroundColor:"#181A20"
+        
+    },
+    scrollLight: {
+        backgroundColor: "#F7F7F7"
+        
+    },
+    searchView: {
+        display: "flex",
+        flexDirection: 'row',
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    moreOuter: {
+       display: "flex",
+        flexDirection: 'row',
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    Headstyle: {
+        color: "#212121",
+        fontWeight: "bold",
+        fontSize:20
+    },
+    NotificationView: {
+        width:"80%"
+    },
+    componentView: {
+        marginBottom: "5%",
+        width: "100%",
+        height:150,
+       display: "flex",
+        flexDirection: 'row',
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    rightView: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: 'space-between',
+        width:"25%"
+    },
+   
+    
+})
\ No newline at end of file
diff --git a/app/(app)/ActionMenu/_layout.tsx b/app/(app)/ActionMenu/_layout.tsx
index 6576c213..a93e4d8b 100644
--- a/app/(app)/ActionMenu/_layout.tsx
+++ b/app/(app)/ActionMenu/_layout.tsx
@@ -15,6 +15,10 @@ export default function Layout() {
         name="FavoriteDoctorScreen"
         options={{ headerShown: false }}
       />
+      <Stack.Screen
+        name="AllDoctorScreen"
+        options={{headerShown:false}}
+      />
     </Stack>
   );
 }
diff --git a/app/(app)/ActionMenu/index.tsx b/app/(app)/ActionMenu/index.tsx
index 00acf7d3..494b9e9f 100644
--- a/app/(app)/ActionMenu/index.tsx
+++ b/app/(app)/ActionMenu/index.tsx
@@ -167,17 +167,8 @@ export default function Index() {
           </ImageBackground>
         </View>
         <View style={styles.TxtContainer}>
-          <Text
-            style={{
-              color: theme === "dark" ? "#FFFFFF" : "#000000",
-              fontFamily: "Urbanist-bold",
-              fontSize: 19,
-              marginLeft: "4%",
-            }}
-          >
-            Doctor Speciality
-          </Text>
-          <TouchableOpacity>
+          <Text style={{color: theme === "dark" ? "#FFFFFF" : "#000000",fontFamily: "Urbanist-bold", fontSize: 19,marginLeft: "4%",}}>Doctor Speciality</Text>
+          <TouchableOpacity onPress={()=> router.push("/ActionMenu/FavoriteDoctorScreen")}>
             <Text style={styles.seeTxt}>See All</Text>
           </TouchableOpacity>
         </View>
@@ -308,19 +299,8 @@ export default function Index() {
           </Text>
         </View>
         <View style={styles.TopDocs}>
-          <Text
-            style={{
-              color: theme === "dark" ? "#FFFFFF" : "#000000",
-              fontFamily: "Urbanist-bold",
-              fontSize: 19,
-              marginLeft: "4%",
-            }}
-          >
-            Top Doctors
-          </Text>
-          <TouchableOpacity
-            onPress={() => router.push("/ActionMenu/FavoriteDoctorScreen")}
-          >
+          <Text style={{color: theme === "dark" ? "#FFFFFF" : "#000000",fontFamily: "Urbanist-bold", fontSize: 19,marginLeft: "4%",}}>Top Doctors</Text>
+          <TouchableOpacity onPress={() => router.push("/ActionMenu/AllDoctorScreen")}>
             <Text style={styles.seeTxt}>See All</Text>
           </TouchableOpacity>
         </View>
diff --git a/assets/images/Doctors/African 1.png b/assets/images/Doctors/African 1.png
new file mode 100644
index 00000000..1a4bc2d4
Binary files /dev/null and b/assets/images/Doctors/African 1.png differ
diff --git a/assets/whiteHeart.ts b/assets/whiteHeart.ts
new file mode 100644
index 00000000..6617cf05
--- /dev/null
+++ b/assets/whiteHeart.ts
@@ -0,0 +1,5 @@
+export const whiteHeart=`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.3929 9.66527C1.49873 6.8736 2.54373 3.68277 5.47456 2.7386C7.01623 2.2411 8.7179 2.53443 9.99956 3.4986C11.2121 2.5611 12.9762 2.24443 14.5162 2.7386C17.4471 3.68277 18.4987 6.8736 17.6054 9.66527C16.2137 14.0903 9.99956 17.4986 9.99956 17.4986C9.99956 17.4986 3.83123 14.1419 2.3929 9.66527Z" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.333 5.58325C14.2247 5.87159 14.8547 6.66742 14.9305 7.60158" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`
\ No newline at end of file
diff --git a/components/DoctorComponent.tsx b/components/DoctorComponent.tsx
index 12fdf9fa..4d5544f6 100644
--- a/components/DoctorComponent.tsx
+++ b/components/DoctorComponent.tsx
@@ -5,7 +5,7 @@ import { SvgXml } from "react-native-svg"
 import { ThemeContext } from '@/ctx/ThemeContext';
 import { useContext } from 'react';
 interface DoctorComponentProps{
-    imageSource: ImageURISource|number
+    imageSource: {uri:string}
     name: string,
     iconComponent: ReactElement,
     professionalTitle: string,
@@ -21,13 +21,15 @@ function DoctorComponent({ imageSource, name, iconComponent, professionalTitle,
     const containerStyle = theme === "dark" ? styles.outerDark : styles.outerLight
     const nameColor = theme === "dark" ? styles.textDark : styles.textLight
     const descriptionColor = theme === "dark" ? styles.descriptionDark : styles.descriptionLight
-    const horizontalColor=theme==="dark"?styles.horizontalDark:styles.horizontalLight
+    const horizontalColor = theme === "dark" ? styles.horizontalDark : styles.horizontalLight
+    console.log("image url", imageSource.uri)
+  
 
     return (
         <View style={[styles.outer,containerStyle,backgroundStyle]}>
             <View style={styles.inner}>
                 <View style={styles.profileView}>
-                    <Image source={imageSource } />
+                    <Image source={imageSource } style={styles.image} />
                 </View>
                 <View style={styles.rightView}>
                     <View style={styles.rightViewInner}>
@@ -234,6 +236,10 @@ const styles = StyleSheet.create({
          color:"#424242"
     },
     allReviewView: {
-        
+       
+    },
+    image: {
+        width: 110,
+        height:110
     }
 })
\ No newline at end of file