diff --git a/app/(app)/Appointments/ReschedualAppointment/rescheduleDate.tsx b/app/(app)/Appointments/ReschedualAppointment/rescheduleDate.tsx
new file mode 100644
index 00000000..fa7c1cc8
--- /dev/null
+++ b/app/(app)/Appointments/ReschedualAppointment/rescheduleDate.tsx
@@ -0,0 +1,296 @@
+import React, { useContext, useState } from "react";
+import {
+  SafeAreaView,
+  Text,
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Pressable,
+  Platform,
+  ScrollView,
+  Image,
+} from "react-native";
+import DatePicker, { getFormatedDate } from "react-native-modern-datepicker";
+import { Colors } from "@/constants/Colors";
+import { router } from "expo-router";
+import { MaterialIcons } from "@expo/vector-icons";
+import { ThemeContext } from "@/ctx/ThemeContext";
+import { StatusBar } from "expo-status-bar";
+import Typography from "@/constants/Typography";
+import { useModal } from "@/ctx/ModalContext";
+import { LeftArrow, LoadingIcon } from "@/components/UI/Icons";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+export default function RescheduleAppointment() {
+  const { theme, changeTheme } = useContext(ThemeContext);
+  const [selectedTime, setSelectedTime] = useState(null);
+  const [selectedDate, setSelectedDate] = useState("");
+  const modal = useModal();
+
+  const handleTimeSlotPress = ({ time }: { time: any }) => {
+    setSelectedTime(time === selectedTime ? null : time);
+    console.log(time);
+  };
+  console.log(selectedTime);
+  changeTheme("light");
+  //  documentation : https://hosseinshabani.github.io/react-native-modern-datepicker/?ref=retool-blog
+  // Function to generate time slots from 9:00 AM to 15:00 PM
+  const generateTimeSlots = () => {
+    const timeSlots = [];
+    for (let hour = 9; hour <= 14; hour++) {
+      for (let minute = 0; minute < 60; minute += 30) {
+        const hourFormat = hour < 12 ? "AM" : "PM";
+        const formattedHour = hour <= 12 ? hour : hour + 1;
+        const time = `${formattedHour.toString().padStart(2, "0")}:${minute
+          .toString()
+          .padStart(2, "0")} ${hourFormat}`;
+        timeSlots.push(
+          <TouchableOpacity
+            key={time}
+            style={[
+              styles.button,
+              selectedTime === time && styles.buttonSelected,
+            ]}
+            onPress={(time: any) => handleTimeSlotPress(time)}
+          >
+            <Text
+              style={[
+                styles.buttonText,
+                selectedTime === time && styles.buttonTextSelected,
+                Typography.bold.xLarge,
+              ]}
+            >
+              {time}
+            </Text>
+          </TouchableOpacity>
+        );
+      }
+    }
+    return timeSlots;
+  };
+
+  function handleDate(select: string) {
+    setSelectedDate(select);
+    console.log(select);
+  }
+
+  const ios = Platform.OS === "ios";
+
+  async function handlemodal() {
+    modal.show({
+      children: (
+        <View
+          style={{
+            padding: 40,
+            alignItems: "center",
+            gap: 20,
+            borderRadius: 48,
+            backgroundColor:
+              theme === "light" ? Colors.others.white : Colors.dark._2,
+          }}
+        >
+          <Image source={require("@/assets/images/calendarmodal.png")} />
+          <View
+            style={{
+              gap: 20,
+              backgroundColor:
+                theme === "light" ? Colors.others.white : Colors.dark._2,
+            }}
+          >
+            <Text
+              style={[
+                Typography.heading._4,
+                {
+                  color: Colors.main.primary._500,
+                  textAlign: "center",
+                },
+              ]}
+            >
+              Rescheduling Success!
+            </Text>
+            <Text
+              style={[
+                Typography.regular.large,
+                {
+                  textAlign: "center",
+                  color:
+                    theme === "light"
+                      ? Colors.grayScale._900
+                      : Colors.others.white,
+                },
+              ]}
+            >
+              Appointment successfully changed. You will receive a notification
+              and the doctor you selected will contact you.
+            </Text>
+            <TouchableOpacity style={styles.btn}>
+              <Text
+                style={[Typography.bold.large, { color: Colors.others.white }]}
+              >
+                View Appointment
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={modal.hide}
+              style={{
+                backgroundColor: theme === "light"
+                ? Colors.main.primary._100:Colors.dark._3,
+                borderRadius: 100,
+                padding: 18,
+                alignItems: "center",
+              }}
+            >
+              <Text
+                style={[
+                  Typography.bold.large,
+                  {  color:theme === "light" ? Colors.main.primary._500:Colors.others.white },
+                ]}
+              >
+                cancel
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      ),
+    });
+  }
+  return (
+    <View style={{ flex: 1, backgroundColor: theme === "light" ? Colors.others.white : Colors.dark._1, }}>
+      <SafeAreaView style={{ marginBottom: ios ? 10 : 50 }}>
+        <StatusBar style="dark" />
+      </SafeAreaView>
+      <View style={{ flex: 1, justifyContent: "space-around",marginTop:40 }}>
+        <View
+          style={{
+            backgroundColor:
+              theme === "light" ? Colors.others.white : Colors.dark._1,
+          }}
+        >
+          <Pressable
+            onPress={() => router.back()}
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 30,
+              paddingLeft: 20,
+              
+              backgroundColor:
+                theme === "light" ? Colors.others.white : Colors.dark._1,
+            }}
+          >
+             <LeftArrow
+            fillColor={
+              theme === "dark" ? Colors.others.white : Colors.grayScale._900
+            }
+          />
+            <Text
+              style={[Typography.heading._4,{color:theme === 'light'? Colors.grayScale._900: Colors.others.white}]}
+            >
+              Reschedule Appointment
+            </Text>
+          </Pressable>
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            style={{ marginBottom: 30 }}
+          >
+            <View
+              style={{
+                padding: 20,
+                justifyContent: "space-between",
+              }}
+            >
+              <View style={{ gap: 10 }}>
+                <Text style={[Typography.bold.xLarge,{color:theme === 'light'? Colors.grayScale._900: Colors.others.white}]}>Select Date</Text>
+                <View style={{ borderRadius: 20 }}>
+                  <DatePicker
+                    onSelectedChange={(date) => handleDate(date)}
+                    mode="calendar"
+                    options={{
+                      backgroundColor: theme === 'light'? Colors.transparent.blue : Colors.dark._2 ,
+                      textHeaderColor:theme === 'light'? Colors.grayScale._900: Colors.others.white,
+                      textDefaultColor: theme === 'light'? Colors.grayScale._900: Colors.grayScale._300,
+                      selectedTextColor: Colors.others.white,
+                      mainColor: "#246BFD",
+                      textSecondaryColor: theme === 'light'? Colors.grayScale._900: Colors.others.white,
+                      borderColor: "rgba(122, 146, 165, 0.1)",
+                    }}
+                    current="2020-07-13"
+                    style={{
+                      borderRadius: 20,
+                    }}
+                  />
+                </View>
+                <View style={{ gap: 10 }}>
+                  <Text style={[Typography.bold.xLarge,{color: theme === 'light'? Colors.grayScale._900: Colors.others.white}]}>Select Hour</Text>
+                  <View style={styles.change}>{generateTimeSlots()}</View>
+                </View>
+              </View>
+
+              <TouchableOpacity onPress={handlemodal} style={styles.btn}>
+                <Text style={styles.btnText}>Submit</Text>
+              </TouchableOpacity>
+            </View>
+          </ScrollView>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  hour: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 20,
+    paddingBottom: 20,
+  },
+  change: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    marginHorizontal: 10,
+    flexWrap: "wrap",
+  },
+  button: {
+    flexBasis: "30%",
+    borderColor: Colors.main.primary._500,
+    borderWidth: 2,
+    backgroundColor: "transparent",
+    padding: 5,
+    borderRadius: 100,
+    marginVertical: 10,
+    marginHorizontal: "1%",
+  },
+  buttonSelected: {
+    backgroundColor: Colors.main.primary._500,
+    borderWidth: 0,
+    color: "white",
+  },
+  buttonText: {
+    color: Colors.main.primary._500,
+    fontSize: 16,
+    padding: 5,
+    alignSelf: "center",
+  },
+
+  buttonTextSelected: {
+    color: "white",
+  },
+  btn: {
+    backgroundColor: Colors.main.primary._500,
+    textAlign: "center",
+    alignItems: "center",
+    padding: 18,
+    borderRadius: 100,
+    marginTop: 10,
+  },
+  btnText: {
+    textAlign: "center",
+    color: "white",
+  },
+});
diff --git a/app/(app)/Appointments/ReschedualAppointment/selectreason.tsx b/app/(app)/Appointments/ReschedualAppointment/selectreason.tsx
new file mode 100644
index 00000000..5d10982d
--- /dev/null
+++ b/app/(app)/Appointments/ReschedualAppointment/selectreason.tsx
@@ -0,0 +1,150 @@
+import { useContext, useState } from "react";
+import { ThemeContext } from "@/ctx/ThemeContext";
+import { Pressable, View, StyleSheet,TextInput, TouchableOpacity } from "react-native";
+import { Text } from "@/components/Themed";
+import { LeftArrow } from "@/components/UI/Icons";
+import { Colors } from "@/constants/Colors";
+import Typography from "@/constants/Typography";
+import { router } from "expo-router";
+import { RadioButton } from 'react-native-paper';
+
+export default function Selectreason(){
+    const { theme, changeTheme } = useContext(ThemeContext);
+    const [selectedValue, setSelectedValue] = useState('option1');
+  changeTheme("light");
+    return(
+        <>
+      <View style={theme === "dark" ? styles.containerdark : styles.container}>
+      <Pressable onPress={()=> router.back()}
+        style={theme === "dark" ? styles.headerdark : styles.header}>
+          <LeftArrow
+            fillColor={
+              theme === "dark" ? Colors.others.white : Colors.grayScale._900
+            }
+          />
+          <Text
+            style={[
+              Typography.heading._4,
+              {
+                color:
+                  theme === "dark"
+                    ? Colors.others.white
+                    : Colors.grayScale._900,
+              },
+            ]}
+          >
+            Reschedule Appointment
+          </Text>
+        </Pressable>
+        <Text style={[Typography.heading._5,{color: theme==='light'?  Colors.grayScale._900: Colors.others.white,alignSelf:"flex-start"}]}>Reason for Schedule Change</Text>
+        <View style={{flexDirection:'row',alignItems:'center'}}>
+        <RadioButton 
+        value="option1"
+        status={selectedValue === 'option1' ? 'checked' : 'unchecked'}
+        onPress={() => setSelectedValue('option1')}
+        color={selectedValue === 'option1' ? Colors.main.primary._500 : Colors.main.primary._500}
+        /><Text style={[Typography.medium.xLarge,{color: theme==='light'?  Colors.grayScale._900: Colors.others.white}]}>I'm having a schedule clash</Text>
+      </View>
+      <View style={{flexDirection:'row',alignItems:'center'}}>
+        <RadioButton 
+        value="option2"
+        status={selectedValue === 'option2' ? 'checked' : 'unchecked'}
+        onPress={() => setSelectedValue('option2')}
+        color={ Colors.main.primary._500 }
+        /><Text style={[Typography.medium.xLarge,{color: theme==='light'?  Colors.grayScale._900: Colors.others.white}]}>I'm not available on schedule</Text>
+      </View>
+      <View style={{flexDirection:'row',alignItems:'center'}}>
+        <RadioButton 
+        value="option3"
+        status={selectedValue === 'option3' ? 'checked' : 'unchecked'}
+        onPress={() => setSelectedValue('option3')}
+        color={ Colors.main.primary._500}
+        /><Text style={[Typography.medium.xLarge,{color: theme==='light'?  Colors.grayScale._900: Colors.others.white}]}>I have a activity that can't be left behind</Text>
+      </View>
+      <View style={{flexDirection:'row',alignItems:'center'}}>
+        <RadioButton 
+        value="option4"
+        status={selectedValue === 'option4' ? 'checked' : 'unchecked'}
+        onPress={() => setSelectedValue('option4')}
+        color={ Colors.main.primary._500}
+        /><Text style={[Typography.medium.xLarge,{color: theme==='light'?  Colors.grayScale._900: Colors.others.white}]}>I don't want to tell</Text>
+      </View>
+      <View style={{flexDirection:'row',alignItems:'center'}}>
+        <RadioButton 
+        value="option5"
+        status={selectedValue === 'option5' ? 'checked' : 'unchecked'}
+        onPress={() => setSelectedValue('option5')}
+        color={ Colors.main.primary._500}
+        /><Text style={[Typography.medium.xLarge,{color: theme==='light'?  Colors.grayScale._900: Colors.others.white}]}>Others</Text>
+      </View>
+      {  selectedValue==='option5'? <TextInput
+    multiline={true}
+    numberOfLines={5}
+    style={[Typography.semiBold.medium,{ width: '100%',height:200,backgroundColor: theme==='light'? Colors.grayScale._100: Colors.dark._2,borderRadius:16, }]}
+    placeholder="Write Your other reason"
+    placeholderTextColor={theme==='light'?  Colors.grayScale._900: Colors.others.white}
+    
+
+    /> :<></>}
+      
+      <TouchableOpacity
+        onPress={()=> router.push("(app)/Appointments/ReschedualAppointment/rescheduleDate")}
+          style={{
+            width: '100%',
+            height: 58,
+            borderRadius: 100,
+            backgroundColor: Colors.main.primary._500,
+            alignItems: "center",
+            justifyContent: "center",
+            
+            
+          }}
+        >
+          <Text style={[Typography.bold.large, { color: Colors.others.white }]}>
+            Next
+          </Text>
+        </TouchableOpacity>
+      </View>
+        
+        </>
+    );
+}
+const styles = StyleSheet.create({
+    itemcontainer: {},
+  
+    header: {
+      width: "100%",
+      flexDirection: "row",
+      justifyContent: "flex-start",
+      gap: 20,
+      alignItems: "center",
+      marginTop: 60,
+      backgroundColor: "transparent",
+    },
+    container: {
+      
+      gap: 20,
+      alignItems: "flex-start",
+      backgroundColor: Colors.grayScale._50,
+      flex: 1,
+      padding: 20,
+    },
+  
+    headerdark: {
+      width: "100%",
+      flexDirection: "row",
+      justifyContent: "flex-start",
+      gap: 20,
+      alignItems: "center",
+      marginTop: 60,
+      backgroundColor: "transparent",
+    },
+    containerdark: {
+      gap: 20,
+      backgroundColor: Colors.dark._1,
+      alignItems: "flex-start",
+      flex: 1,
+      padding: 20,
+    },
+  });
+  
\ No newline at end of file
diff --git a/app/(app)/Appointments/_layout.tsx b/app/(app)/Appointments/_layout.tsx
index 2ec37656..b16b27de 100644
--- a/app/(app)/Appointments/_layout.tsx
+++ b/app/(app)/Appointments/_layout.tsx
@@ -7,7 +7,8 @@ export default function Layout() {
       <Stack.Screen name="VideoCallAppointment/index" />
       <Stack.Screen name="VoiceCallAppointment/index" />
       <Stack.Screen name="MessagingAppointment/index" />
-      <Stack.Screen name="ReschedualAppointment/index" />
+      <Stack.Screen name="ReschedualAppointment/rescheduleDate" options={{ headerShown: false }}  />
+      <Stack.Screen name="ReschedualAppointment/selectreason" options={{ headerShown: false }}  />
     </Stack>
   );
 }
diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx
index f1938741..db7dbde9 100644
--- a/app/(app)/_layout.tsx
+++ b/app/(app)/_layout.tsx
@@ -178,6 +178,9 @@ export default function Layout() {
           }}
         />
       </Tabs>
+        <Stack.Screen name="Booking" options={{ headerShown: false }} />
+        <Stack.Screen name="Appointments" options={{ headerShown: false }} />
+      
     </>
   );
 }
diff --git a/assets/images/calendarmodal.png b/assets/images/calendarmodal.png
new file mode 100644
index 00000000..a74e7aa3
Binary files /dev/null and b/assets/images/calendarmodal.png differ
diff --git a/package-lock.json b/package-lock.json
index 46e78a5a..b74961d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "react-native-indicators": "^0.17.0",
         "react-native-modern-datepicker": "^1.0.0-beta.91",
         "react-native-otp-entry": "^1.6.1",
+        "react-native-paper": "^5.12.3",
         "react-native-reanimated": "~3.10.1",
         "react-native-safe-area-context": "4.10.1",
         "react-native-screens": "3.31.1",
@@ -50,6 +51,7 @@
         "@eslint/js": "^9.1.1",
         "@types/react": "~18.2.45",
         "@types/react-native-indicators": "^0.16.6",
+        "@types/react-native-modern-datepicker": "^1.0.5",
         "eslint": "^8.57.0",
         "eslint-plugin-react": "^7.34.1",
         "globals": "^15.1.0",
@@ -2329,6 +2331,26 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@callstack/react-theme-provider": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz",
+      "integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==",
+      "dependencies": {
+        "deepmerge": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -7663,14 +7685,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@react-native-community/cli/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@react-native-community/cli/node_modules/jsonfile": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -8600,6 +8614,15 @@
         "react-native": "*"
       }
     },
+    "node_modules/@types/react-native-modern-datepicker": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/react-native-modern-datepicker/-/react-native-modern-datepicker-1.0.5.tgz",
+      "integrity": "sha512-YO9t6nyKCLa90PPLq2OsBhGQU9PlRKSrzpYbz7hbeQ0RJDft1YiNTqktQbRN1g64qmlmjNPbMOFSuV7NpdgNzg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-native-vector-icons": {
       "version": "6.4.18",
       "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.18.tgz",
@@ -20859,6 +20882,31 @@
       "resolved": "https://registry.npmjs.org/react-native-otp-entry/-/react-native-otp-entry-1.6.1.tgz",
       "integrity": "sha512-a6nJu9lnezUyCsUU/HEJzmw+Sk/hX7WtqU1vW825DhPuAdHv1GcO28xOf69oIYEnkUAKyxpelA2u1k6hyScPcA=="
     },
+    "node_modules/react-native-paper": {
+      "version": "5.12.3",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.12.3.tgz",
+      "integrity": "sha512-nH1e1pGPE/aOE5YR2GRX7CfMHFA9cAfrAfgCtwL4amJPDZCoVjc5yt2VDiUE1rT+JUfk0qdICMP3UggxvjMgug==",
+      "dependencies": {
+        "@callstack/react-theme-provider": "^3.0.9",
+        "color": "^3.1.2",
+        "use-latest-callback": "^0.1.5"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": "*",
+        "react-native-vector-icons": "*"
+      }
+    },
+    "node_modules/react-native-paper/node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "node_modules/react-native-ratings": {
       "version": "8.0.4",
       "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-8.0.4.tgz",
diff --git a/package.json b/package.json
index 9b1e6403..92aa6826 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   "dependencies": {
     "@expo/vector-icons": "^14.0.0",
     "@oclif/screen": "^3.0.8",
+    "@react-native-community/datetimepicker": "7.7.0",
     "@react-navigation/native": "^6.0.2",
     "eas-cli": "^8.0.0",
     "expo": "^51.0.2",
@@ -44,6 +45,7 @@
     "react-native-indicators": "^0.17.0",
     "react-native-modern-datepicker": "^1.0.0-beta.91",
     "react-native-otp-entry": "^1.6.1",
+    "react-native-paper": "^5.12.3",
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
@@ -59,6 +61,7 @@
     "@eslint/js": "^9.1.1",
     "@types/react": "~18.2.45",
     "@types/react-native-indicators": "^0.16.6",
+    "@types/react-native-modern-datepicker": "^1.0.5",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.1",
     "globals": "^15.1.0",