diff --git a/app/(root)/confirm-ride.tsx b/app/(root)/confirm-ride.tsx
index b200e79..63dcbed 100644
--- a/app/(root)/confirm-ride.tsx
+++ b/app/(root)/confirm-ride.tsx
@@ -1,12 +1,57 @@
-import { Text, View } from "react-native"
-
+import CustomButton from "@/components/CustomButton"
+import DriverCard from "@/components/DriverCard"
+import RideLayout from "@/components/RideLayout"
+import { router } from "expo-router"
+import { FlatList, Text, View } from "react-native"
+const drivers = [
+    {
+        "id": "1",
+        "first_name": "James",
+        "last_name": "Wilson",
+        "profile_image_url": "https://ucarecdn.com/dae59f69-2c1f-48c3-a883-017bcf0f9950/-/preview/1000x666/",
+        "car_image_url": "https://ucarecdn.com/a2dc52b2-8bf7-4e49-9a36-3ffb5229ed02/-/preview/465x466/",
+        "car_seats": 4,
+        "rating": "4.80"
+    },
+    {
+        "id": "2",
+        "first_name": "David",
+        "last_name": "Brown",
+        "profile_image_url": "https://ucarecdn.com/6ea6d83d-ef1a-483f-9106-837a3a5b3f67/-/preview/1000x666/",
+        "car_image_url": "https://ucarecdn.com/a3872f80-c094-409c-82f8-c9ff38429327/-/preview/930x932/",
+        "car_seats": 5,
+        "rating": "4.60"
+    },
+    {
+        "id": "3",
+        "first_name": "Michael",
+        "last_name": "Johnson",
+        "profile_image_url": "https://ucarecdn.com/0330d85c-232e-4c30-bd04-e5e4d0e3d688/-/preview/826x822/",
+        "car_image_url": "https://ucarecdn.com/289764fb-55b6-4427-b1d1-f655987b4a14/-/preview/930x932/",
+        "car_seats": 4,
+        "rating": "4.70"
+    },
+    {
+        "id": "4",
+        "first_name": "Robert",
+        "last_name": "Green",
+        "profile_image_url": "https://ucarecdn.com/fdfc54df-9d24-40f7-b7d3-6f391561c0db/-/preview/626x417/",
+        "car_image_url": "https://ucarecdn.com/b6fb3b55-7676-4ff3-8484-fb115e268d32/-/preview/930x932/",
+        "car_seats": 4,
+        "rating": "4.90"
+    }
+]
 const ConfirmRide=()=>{
 return(
-    <View>
-        <Text>
-            Confirm ride
-        </Text>
+    <RideLayout title="Choose a Driver" snapPoints={["65%","85%"]}>
+<FlatList data={drivers} renderItem={(item)=><DriverCard item={item}/>}
+ListFooterComponent={()=>(
+    <View className="mx-5 mt-10">
+        <CustomButton title="Select Ride" onPress={()=>router.push("/(root)/book-ride")}/>
     </View>
+)}
+/>
+    </RideLayout>
 )
 }
 export default ConfirmRide
\ No newline at end of file
diff --git a/app/(root)/find-ride.tsx b/app/(root)/find-ride.tsx
index 867f08f..0d3313a 100644
--- a/app/(root)/find-ride.tsx
+++ b/app/(root)/find-ride.tsx
@@ -9,7 +9,7 @@ import { Text, View } from "react-native"
 const FindRide = () => {
     const { userAddress, destinationAddress, setDestinationLocation, setUserLocation } = useLocationStore()
     return (
-        < RideLayout title="Ride" >
+        < RideLayout title="Ride" snapPoints={["85%"]}>
             <View className="my-3">
                 <Text className="text-lg font-JakartaSemiBold mb-3">From</Text>
                 <GoogleTextInput icon={icons.target} initialLocation={userAddress!}
diff --git a/components/DriverCard.tsx b/components/DriverCard.tsx
new file mode 100644
index 0000000..a4d4f76
--- /dev/null
+++ b/components/DriverCard.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { Image, Text, TouchableOpacity, View } from "react-native";
+
+import { icons } from "@/constants";
+import { formatTime } from "@/lib/utils";
+import { DriverCardProps } from "@/types/type";
+
+const DriverCard = ({ item, selected, setSelected }: DriverCardProps) => {
+  return (
+    <TouchableOpacity
+      onPress={setSelected}
+      className={`${
+        selected === item.id ? "bg-general-600" : "bg-white"
+      } flex flex-row items-center justify-between py-5 px-3 rounded-xl`}
+    >
+      <Image
+        source={{ uri: item.profile_image_url }}
+        className="w-14 h-14 rounded-full"
+      />
+
+      <View className="flex-1 flex flex-col items-start justify-center mx-3">
+        <View className="flex flex-row items-center justify-start mb-1">
+          <Text className="text-lg font-JakartaRegular">{item.title}</Text>
+
+          <View className="flex flex-row items-center space-x-1 ml-2">
+            <Image source={icons.star} className="w-3.5 h-3.5" />
+            <Text className="text-sm font-JakartaRegular">4</Text>
+          </View>
+        </View>
+
+        <View className="flex flex-row items-center justify-start">
+          <View className="flex flex-row items-center">
+            <Image source={icons.dollar} className="w-4 h-4" />
+            <Text className="text-sm font-JakartaRegular ml-1">
+              ${item.price}
+            </Text>
+          </View>
+
+          <Text className="text-sm font-JakartaRegular text-general-800 mx-1">
+            |
+          </Text>
+
+          <Text className="text-sm font-JakartaRegular text-general-800">
+            {formatTime(item.time!)}
+          </Text>
+
+          <Text className="text-sm font-JakartaRegular text-general-800 mx-1">
+            |
+          </Text>
+
+          <Text className="text-sm font-JakartaRegular text-general-800">
+            {item.car_seats} seats
+          </Text>
+        </View>
+      </View>
+
+      <Image
+        source={{ uri: item.car_image_url }}
+        className="h-14 w-14"
+        resizeMode="contain"
+      />
+    </TouchableOpacity>
+  );
+};
+
+export default DriverCard;
\ No newline at end of file
diff --git a/components/RideLayout.tsx b/components/RideLayout.tsx
index 7800a33..0c6ad70 100644
--- a/components/RideLayout.tsx
+++ b/components/RideLayout.tsx
@@ -1,17 +1,17 @@
 import BottomSheet, {
     BottomSheetScrollView,
     BottomSheetView,
-  } from "@gorhom/bottom-sheet";
-  import { router } from "expo-router";
-  import React, { useRef } from "react";
-  import { Image, Text, TouchableOpacity, View } from "react-native";
-  import { GestureHandlerRootView } from "react-native-gesture-handler";
-  
-  import Map from "@/components/map";
-  import { icons } from "@/constants";
-const RideLayout = ({ title, children }: { title: string, children: React.ReactNode }) => {
+} from "@gorhom/bottom-sheet";
+import { router } from "expo-router";
+import React, { useRef } from "react";
+import { Image, Text, TouchableOpacity, View } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 
-    const bottomSheetRef = useRef<BottomSheet>(null);    
+import Map from "@/components/map";
+import { icons } from "@/constants";
+const RideLayout = ({ title, children, snapPoints }: { title: string, children: React.ReactNode, snapPoints: string[] }) => {
+
+    const bottomSheetRef = useRef<BottomSheet>(null);
     return (
         <GestureHandlerRootView>
             <View className="flex-1 bg-white">
@@ -28,7 +28,7 @@ const RideLayout = ({ title, children }: { title: string, children: React.ReactN
                     </View>
                     <Map />
                 </View>
-                <BottomSheet ref={bottomSheetRef} snapPoints={["40%", "85%"]} index={0} >
+                <BottomSheet keyboardBehavior="extend" ref={bottomSheetRef} snapPoints={["40%", "85%"]} index={0} >
                     <BottomSheetScrollView style={{ flex: 1, padding: 20 }}>
                         {children}
                     </BottomSheetScrollView>