diff --git a/src/components/SearchPage.js b/src/components/SearchPage.js
index 50995e1..1b21889 100644
--- a/src/components/SearchPage.js
+++ b/src/components/SearchPage.js
@@ -1,45 +1,43 @@
-import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react';
-import { List, Divider, Text, TouchableRipple, Searchbar } from 'react-native-paper';
+import React from 'react';
+import { List, Searchbar, TouchableRipple } from 'react-native-paper';
 import { StyleSheet, View, ScrollView } from 'react-native';
-import { colors } from '../utils/color'
 import { useRoute } from '@react-navigation/native';
+import { colors } from '../utils/color';
+import Icon from 'react-native-vector-icons/AntDesign';
+
 export default function SearchPage({ navigation }) {
     const [searchQuery, setSearchQuery] = React.useState('');
     const route = useRoute();
-    const { dummyData } = route.params;
+    const { dataListProjectCharters, onSelect } = route.params;
 
     const handleProjectSelect = (project) => {
-        console.log("project", project);
-        navigation.goBack()
+        onSelect(project);
+        navigation.goBack();
     };
 
-    const filteredData = dummyData.filter(item =>
-        item.name.toLowerCase().includes(searchQuery.toLowerCase())
+    const filteredData = dataListProjectCharters.filter(item =>
+        item.project_name.toLowerCase().includes(searchQuery.toLowerCase())
     );
 
     return (
         <View style={styles.container}>
             <Searchbar
-                mode='bar'
                 placeholder="Cari Project"
                 onChangeText={setSearchQuery}
                 value={searchQuery}
-                traileringIconColor={colors.white}
                 style={{ backgroundColor: colors.white }}
-                showDivider={true}
-                elevation={2}
             />
             <ScrollView style={styles.listData}>
                 <View>
                     {filteredData.map(item => (
-                        <>
-                            <TouchableRipple onPress={() => handleProjectSelect(item)}>
-                                <List.Item
-                                    title={item.name}
-                                    right={() => <List.Icon icon="arrow-top-left" />}
-                                />
-                            </TouchableRipple>
-                        </>
+                        <TouchableRipple key={item.id} onPress={() => handleProjectSelect(item)}>
+                            <List.Item
+                                title={item.sicn}
+                                titleNumberOfLines={3}
+                                left={() => <Icon name="search1" size={20} color={colors.black} />}
+                                right={() => <List.Icon icon="arrow-top-left" />}
+                            />
+                        </TouchableRipple>
                     ))}
                 </View>
             </ScrollView>
@@ -47,17 +45,15 @@ export default function SearchPage({ navigation }) {
     );
 }
 
-
 const styles = StyleSheet.create({
     container: {
         flex: 1,
         marginTop: 50,
         marginHorizontal: 10,
-
     },
     listData: {
         flex: 1,
         marginTop: 20,
-        marginHorizontal: 10
+        marginHorizontal: 10,
     },
-});
\ No newline at end of file
+});