diff --git a/App.tsx b/App.tsx
index bf5d6c7..cba21c2 100644
--- a/App.tsx
+++ b/App.tsx
@@ -302,7 +302,7 @@ export const Nav = () => {
                 headerStyle: {
                   backgroundColor: '#34A6F8',
                 },
-                headerRight: geonetLogo,
+                headerRight: geonetLogo2,
                 headerTintColor: '#FFFFFF',
                 headerShadowVisible: false,
               }}
@@ -383,7 +383,7 @@ export const Nav = () => {
               fontSize:20
             }
           }}/>
-          <Stack.Screen name="PJU Collecting" component={CollectScreen}
+          <Stack.Screen name="Add Data PJU" component={CollectScreen}
           options={{
             headerStyle: {
               backgroundColor: '#34A6F8',
@@ -604,7 +604,7 @@ export const Nav = () => {
               fontSize:20
             }
           }}/>
-          <Stack.Screen name="PDAM Collecting" component={CollectLineScreen}
+          <Stack.Screen name="Add Data PDAM" component={CollectLineScreen}
           options={{
             headerStyle: {
               backgroundColor: '#34A6F8',
diff --git a/src/component/collectLinescreen.tsx b/src/component/collectLinescreen.tsx
index bb6fcf0..06ae917 100644
--- a/src/component/collectLinescreen.tsx
+++ b/src/component/collectLinescreen.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert} from 'react-native';
+import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert, StatusBar, Pressable, FlatList} from 'react-native';
 
 import MapLibreGL from '@maplibre/maplibre-react-native';
 import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
@@ -14,6 +14,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import turfcenter from '@turf/center';
 const {points,polygon,lineString} =  require('@turf/helpers');
 import RNFetchBlob from 'rn-fetch-blob';
+import Modal from "react-native-modal";
 
 
 
@@ -56,7 +57,7 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
     const [files, setFiles] = useState([]);
     const [pipeName, setPipeName] = useState('');
     const [selectedPipeType, setselectedPipeType] = useState("");
-    const [checkedStatus, setCheckedStatus] = useState('');
+    const [checkedStatus, setCheckedStatus] = useState('Baik');
     const [Information, setInformation] = useState('');
     const [open, setOpen] = useState(false);
     const [install_date, setInstallDate] = useState(new Date());
@@ -67,6 +68,7 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
     const [pipeTyeError, setPipeTypeError] = useState(false);
     const [pipeStatusError, setPipeStatusError] = useState(false);
     const [pipeInfoError, setPipeInfoError] = useState(false);
+      const [ModalAttachment, setModalAttachment] = useState(false);
     
     const openCameraLib = async () => {
         const result = await launchCamera({
@@ -268,235 +270,240 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
       } catch (error) {
         console.log(error);
       }
-    }
+    };
+    const renderItem = ({item,index}:any) => {
+      return (
+        <View key={index} style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row'}}>
+          <Image style={{width: '100%',height: '100%',borderRadius:10}}
+              source={{uri: `data:image/jpeg;base64,${imgUrl[index]}`}}
+          />
+        </View>
+      );
+    };
     return (
         <View style={styles.mainContainer}>
-            <ScrollView style={styles.container}>
-                <View>
-                    <Text style={styles.label}>Image</Text>
-                    <View style={styles.borderImg}>
-                        <Text style={{justifyContent: 'center', alignItems: 'center', alignSelf: 'center', color: 'black'}}>{imgUrl.length === 0 ? currentIndex :currentIndex+1}/{imgUrl.length}</Text>
-                        <View style={{flexDirection: 'row'}}>
-                            <PrevImg isIndex={currentIndex}/>
-                            <Animated.FlatList
-                                ref={ref}
-                                data={imgUrl} 
-                                showsHorizontalScrollIndicator={false}
-                                pagingEnabled
-                                onScroll={e=>{
-                                const x = e.nativeEvent.contentOffset.x;
-                                setCurrentIndex(parseFloat((x/330).toFixed(0)));
-                                }}
-                                horizontal
-                                renderItem={({item,index}) => {
-                                return(
-                                    <Animated.Image resizeMode='center' style={{width: 350,
-                                        height: 500,
-                                        borderRadius: 6,}} source={{uri: `data:image/jpeg;base64,${imgUrl[index]}`}} />
-                                )
-                                }}
-                            />
-                            <NextImg isIndex={currentIndex}/>
-                        </View>
-                        <View style={styles.btnCameraContainer}>
-                            <TouchableOpacity style={styles.btnCamera} onPress={openCameraLib}>
-                                <Image
-                                    source={require('../../assets/icon/camera.png')}
-                                    style={styles.buttonImageIconStyle}
-                                />
-                            </TouchableOpacity>
-                            <TouchableOpacity style={styles.btnCamera} onPress={openLib}>
-                                <Image
-                                    source={require('../../assets/icon/gallery.png')}
-                                    style={styles.buttonImageIconStyle}
-                                />
-                            </TouchableOpacity>
-                        </View>
-                    </View>
-                </View>
-                <View
-                    style={{
-                        marginTop: 15
-                    }}
-                />
+          <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
+          <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} />
+            <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,paddingTop:25}}>
+              <ScrollView style={styles.container}>
                 <View style={{flexDirection:'column'}}>
                     <MapView
-                        style={{width:'80%',height:160,alignSelf:'center'}}
-                        mapStyle={styleURL}
-                        zoomEnabled={false}
-                        scrollEnabled={false}
+                      style={{width:352,height:200,borderWidth:1,borderColor:'#A6A6A6',overflow:'hidden',alignSelf:'center',borderTopRightRadius:10,borderTopLeftRadius:10}}
+                      mapStyle={styleURL}
+                      rotateEnabled={false}
+                      zoomEnabled={false}
+                      pitchEnabled={false}
+                      scrollEnabled={false}
                     >
-                        <Camera 
-                            centerCoordinate={centerCoords}
-                            zoomLevel={15}
-                            minZoomLevel={5}
-                            maxZoomLevel={20}
+                      <Camera 
+                        centerCoordinate={centerCoords}
+                        zoomLevel={15}
+                        minZoomLevel={5}
+                        maxZoomLevel={20}
+                      />
+                      <ShapeSource
+                          id="line"
+                          shape={{
+                              "type": "FeatureCollection",
+                              "features": [
+                                  {
+                                      "type": "Feature",
+                                      "properties": {},
+                                      "geometry": {
+                                          "type": "LineString",
+                                          "coordinates": route.params.coordinates
+                                      }
+                                  }
+                              ]
+                          }}
+                      >
+                        <LineLayer 
+                            id="linelayer1"
+                            style={{lineColor:'red',lineWidth:3}}
                         />
-                        <ShapeSource
-                            id="line"
-                            shape={{
-                                "type": "FeatureCollection",
-                                "features": [
-                                    {
-                                        "type": "Feature",
-                                        "properties": {},
-                                        "geometry": {
-                                            "type": "LineString",
-                                            "coordinates": route.params.coordinates
-                                        }
-                                    }
-                                ]
-                            }}
-                        >
-                            <LineLayer 
-                                id="linelayer1"
-                                style={{lineColor:'red',lineWidth:3}}
-                            />
-                        </ShapeSource>
+                      </ShapeSource>
                       {
-                          route.params.coordinates.map((item:any,index:number)=>(
-                              <PointAnnotation
-                                  children={<></>}
-                                  key={index}
-                                  id={String(index)}
-                                  coordinate={item}
-                                  draggable={false}
-                              />
-                          ))
-                      }
+                        route.params.coordinates.map((item:any,index:number)=>(
+                            <PointAnnotation
+                                children={<></>}
+                                key={index}
+                                id={String(index)}
+                                coordinate={item}
+                                draggable={false}
+                            />
+                        ))
+                      } 
                     </MapView>
-                    <TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>navigation.navigate('PDAM Map Collect', { screen: 'PDAM Map Collect'})}>
-                        <View style={{backgroundColor:'#217dd3',flexDirection:'row',width:150,height:30,borderRadius:20,justifyContent:'center'}}>
-                            <Text style={{alignSelf:'center',fontWeight:'bold',fontSize:16,color:'white'}}>View</Text>
-                        </View>
-                    </TouchableOpacity>
+                  {/* </Pressable> */}
+                  <TouchableOpacity style={{alignSelf:'center',backgroundColor:'#F9F9F9',width:352,height:50,borderBottomLeftRadius:10,borderBottomRightRadius:10,justifyContent:'center',borderWidth:1,borderColor:'#A6A6A6'}} onPress={()=>navigation.navigate('PDAM Map Collect', { screen: 'PDAM Map Collect'})}>
+                      <Text style={{alignSelf:'center',fontWeight:'semibold',fontSize:16,color:'#434343'}}>Change Location</Text>
+                  </TouchableOpacity>
                 </View>
                 <View
                     style={{
                         marginTop: 15
                     }}
                 />
-                <View>
-                    <Text style={styles.label}>Pipe Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text>
-                    <TextInput
-                        style={styles.input}
-                        onChangeText={(text)=>{
-                          setPipeName(text)
-                        }}
-                        onChange={()=> {
-                          setPipeNameError(false)
-                        }}
-                    />
-                    {pipeNameError ? <Text style={styles.errorInput}>Name is Required!</Text>:null}
+                <View style={{alignSelf:'center'}}>
+                  {/* <Text style={styles.label}>Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
+                  <Text style={styles.label}>Pipe Name</Text>
+                  <TextInput
+                    style={styles.input}
+                    onChangeText={(text) => {
+                      setPipeName(text)
+                    }}
+                    onChange={()=> {
+                      setPipeNameError(false)
+                    }}
+                  />
+                  {pipeNameError ? <Text style={styles.errorInput}>Pipe Name is Required!</Text>:null}
                 </View>
                 <View
                     style={{
                         marginTop: 15
                     }}
                 />
-                <View>
-                    <Text style={styles.label}>Pipe Type <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text>
-                    <SelectList
-                        search={false}
-                        placeholder="Select Pipe Type"
-                        boxStyles={{borderRadius:50,borderWidth:2}}
-                        inputStyles={{color:'black'}}
-                        dropdownTextStyles={{color:'black'}}
-                        data={Pipe_Type}
-                        setSelected={setselectedPipeType}
-                        onSelect={()=> (
-                          setPipeTypeError(false)
-                        )}
-                    />
-                    {pipeTyeError ? <Text style={styles.errorInput}>Pipe Type is Required!</Text>:null}
+                <View style={{alignSelf:'center'}}>
+                  {/* <Text style={styles.label}>PJU Type <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
+                  <Text style={styles.label}>PJU Type</Text>
+                  <SelectList
+                    search={false}
+                    placeholder="Select Pipe Type"
+                    boxStyles={{borderRadius:10,borderWidth:1,borderColor:'#A6A6A6',width:352,height:45}}
+                    inputStyles={{color:'#6B5E5E'}}
+                    dropdownTextStyles={{color:'#6B5E5E'}}
+                    data={Pipe_Type}
+                    setSelected={setselectedPipeType}
+                    onSelect={()=> (
+                      [setPipeTypeError(false)]
+                    )}
+                  />
+                  {pipeTyeError ? <Text style={styles.errorInput}>Pipe Type is Required!</Text>:null}
                 </View>
                 <View
                     style={{
                         marginTop: 15
                     }}
                 />
-                <View>
-                    <Text style={styles.label}>Status <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text>
-                    <View style={{flexDirection:'row',alignItems:'center'}}>
-                        <RadioButton
-                            value="Baik"
-                            status={ checkedStatus === 'Baik' ? 'checked' : 'unchecked' }
-                            onPress={()=>{
-                              setCheckedStatus('Baik');
-                              setPipeStatusError(false);
-                            }}
-                            />
-                        <Text style={{color:'black'}}>Baik</Text>
-                    </View>
-                    <View style={{flexDirection:'row',alignItems:'center'}}>
-                        <RadioButton
-                            value="Rusak"
-                            status={ checkedStatus === 'Rusak' ? 'checked' : 'unchecked' }
-                            onPress={()=>{
-                              setCheckedStatus('Rusak');
-                              setPipeStatusError(false);
-                            }}
-                        />
-                        <Text style={{color:'black'}}>Rusak</Text>
-                    </View>
+                <View style={{alignSelf:'center',width:352,height:45}}>
+                  {/* <Text style={styles.label}>Status<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
+                  <Text style={styles.label}>Status</Text>
+                  <View style={{flexDirection:'row',alignItems:'center'}}>
+                    <RadioButton
+                      color='#434343'
+                      value="Baik"
+                      status={ checkedStatus === 'Baik' ? 'checked' : 'unchecked' }
+                      onPress={() => {setCheckedStatus('Baik'); setPipeStatusError(false)}}
+                    />
+                    <Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Baik</Text>
+                  </View>
+                  <View style={{flexDirection:'row',alignItems:'center'}}>
+                    <RadioButton
+                      color='#434343'
+                      value="Rusak"
+                      status={ checkedStatus === 'Rusak' ? 'checked' : 'unchecked' }
+                      onPress={() => {setCheckedStatus('Rusak'); setPipeStatusError(false); }}
+                    />
+                    <Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Rusak</Text>
+                  </View>
+                  {pipeStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null}
                 </View>
-                {pipeStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null}
                 <View
                     style={{
-                        marginTop: 15
+                        marginTop: 60
                     }}
                 />
-                <View>
-                    <Text style={styles.label}>Information <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text>
-                    <TextInput style={{borderWidth:1,borderRadius:20,padding: 10,color:'black',textAlignVertical:'top'}}
-                        multiline
-                        numberOfLines={5}
-                        maxLength={255}
-                        onChangeText={(text)=>{
-                          setInformation(text)
-                        }}
-                        onChange={()=> {
-                          setPipeInfoError(false)
-                        }}
-                    />
-                    {pipeInfoError ? <Text style={styles.errorInput}>Information is Required!</Text>:null}
+                <View style={{alignSelf:'center'}}>
+                  <Text style={styles.label}>Information</Text>
+                  <TextInput style={{borderWidth:1,borderRadius:20,padding: 10,color:'#6B5E5E',borderColor:'#A6A6A6',textAlignVertical:'top',width:352,height:135}}
+                    multiline
+                    numberOfLines={5}
+                    maxLength={255}
+                    onChangeText={(text) => {
+                      setInformation(text)
+                    }}
+                    onChange={()=> {
+                      setPipeInfoError(false)
+                    }}
+                  />
+                  {pipeInfoError ? <Text style={styles.errorInput}>Information is Required!</Text>:null}
                 </View>
                 <View
-                    style={{
-                        marginTop: 15
+                  style={{
+                    marginTop: 15
+                  }}
+                />
+                <View style={{alignSelf:'center'}}>
+                  <Text style={styles.label}>Installation Date</Text>
+                  <TextInput
+                    style={styles.input}
+                    onPress={() => setOpen(true)}
+                    value={String(momentDate)}
+                  />
+                  <DatePicker
+                    locale='en'
+                    theme='light'
+                    mode='date'
+                    modal
+                    open={open}
+                    date={install_date}
+                    onConfirm={(survey_date) => {
+                      setOpen(false)
+                      setInstallDate(survey_date)
                     }}
+                    onCancel={() => {
+                      setOpen(false)
+                    }}
+                  />
+                </View>
+                <View
+                  style={{
+                    marginTop: 15
+                  }}
                 />
-                <View>
-                    <Text style={styles.label}>Installation Date</Text>
-                    <TextInput
-                        style={styles.input}
-                        onPress={() => setOpen(true)}
-                        value={String(momentDate)}
-                    />
-                    <DatePicker
-                        locale='en'
-                        theme='dark'
-                        mode="date"
-                        modal
-                        open={open}
-                        date={install_date}
-                        onConfirm={(survey_date) => {
-                        setOpen(false)
-                        setInstallDate(survey_date)
-                        }}
-                        onCancel={() => {
-                        setOpen(false)
-                        }}
+                <View style={{alignSelf:'center',width:352}}>
+                  <Text style={styles.label}>Attachment</Text>
+                  <Text style={{fontStyle:'italic',color:'#434343',fontSize:14}}>Lampirkan foto / gambar</Text>
+                  { 
+                    imgUrl.length === 0 ?
+                    <Pressable onPress={()=>setModalAttachment(true)}>
+                      <View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center',flexDirection:'row',columnGap:5}}>
+                        <Image
+                            source={require('../../assets/icon/camorlib.png')}
+                        />
+                        <Text style={{fontStyle:'italic',color:'#434343'}}>Klik untuk menambahkan foto / gambar</Text>
+                      </View>
+                    </Pressable>
+                  :
+                    <FlatList
+                      horizontal={false}
+                      showsHorizontalScrollIndicator={false}
+                      scrollEnabled={false}
+                      ListFooterComponent={()=>
+                        <Pressable onPress={()=>setModalAttachment(true)}>
+                          <View style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
+                            <Image
+                                source={require('../../assets/icon/camorlib.png')}
+                            />
+                          </View>
+                        </Pressable>
+                      }
+                      contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',columnGap:25,rowGap:10}}
+                      data={imgUrl}
+                      renderItem={({item,index})=>renderItem({item,index})}
                     />
+                  }
                 </View>
                 <View
-                    style={{
-                        marginTop: 15
-                    }}
+                  style={{
+                    marginTop: 30
+                  }}
                 />
             </ScrollView>
             <Button title='Send' onPress={showDialog} />
-            <AwesomeAlert
+          </View>
+            
+          <AwesomeAlert
           show={alertOnline}
           showProgress={false}
           title="Collecting Data"
@@ -544,6 +551,29 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
           titleStyle={{fontSize:20}}
           messageStyle={{fontSize:16}}
         />
+        <Modal isVisible={ModalAttachment} animationIn={'fadeInUp'} animationOut={'fadeOutDown'} backdropOpacity={0} onBackdropPress={()=>setModalAttachment(false)} style={{top:'18%',alignSelf:'center'}}>
+          <View key={"modal container"} style={{width:330,height:220,backgroundColor:'#F9F9F9',borderRadius:25,borderWidth:1,borderColor:'#A6A6A6'}}>
+              <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingLeft:30,paddingTop:20,paddingRight:10}}>
+                  <Text style={{fontSize:20,fontWeight:'semibold',color: '#434343',}}>
+                      Select Mode
+                  </Text>
+                  <Pressable onPress={()=>setModalAttachment(false)} style={{alignSelf:'flex-end',padding:10}}>
+                      <Image style={{tintColor:'#434343'}}
+                          source={require('../../assets/icon/x.png')}
+                      />
+                  </Pressable>
+              </View>
+              <View style={{padding:30}}>
+                <TouchableOpacity onPress={()=>{openCameraLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderTopLeftRadius:10,borderTopRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
+                    <Text style={{fontSize:20,fontWeight:'light',color:'#434343'}}>Take photo</Text>
+                </TouchableOpacity>
+                <TouchableOpacity onPress={()=>{openLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderBottomLeftRadius:10,borderBottomRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
+                    <Text style={{fontSize:20,fontWeight:'light',color:'#434343'}}>Choose photo</Text>
+                </TouchableOpacity>
+              </View>
+              
+          </View>
+      </Modal>
         </View>
     )
 };
@@ -569,23 +599,25 @@ const styles = StyleSheet.create({
       color: 'black'
     },
     input: {
-      height: 40,
+      width:352,
+      height: 45,
       borderWidth: 1,
       padding: 10,
-      borderRadius: 50,
-      color: 'black'
+      borderRadius: 10,
+      color: '#6B5E5E',
+      borderColor:'#A6A6A6'
     },
     container: {
-      flex: 1,
-      backgroundColor: '#ecf0f1',
       padding: 10,
+      flexGrow: 1
     },
     mainContainer: {
       flex: 1,
     },
     label: {
-      fontSize: 21,
-      color: 'black',
+      fontSize: 16,
+      fontWeight:'semibold',
+      color: '#434343',
       // marginBottom: 20
     },
     title: {
diff --git a/src/component/collectPolygonscreen.tsx b/src/component/collectPolygonscreen.tsx
index 2220d6b..2fea067 100644
--- a/src/component/collectPolygonscreen.tsx
+++ b/src/component/collectPolygonscreen.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert} from 'react-native';
+import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert, StatusBar, Pressable, FlatList} from 'react-native';
 
 import MapLibreGL from '@maplibre/maplibre-react-native';
 import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
@@ -52,7 +52,7 @@ export default function CollectPolygonScreen({route,navigation}:collectPolygonSc
     const [files, setFiles] = useState([]);
     const [fileDocument, setFileDocument] = useState([]);
     const [companyName, setCompanyName] = useState('');
-    const [checkedStatus, setCheckedStatus] = useState('');
+    const [checkedStatus, setCheckedStatus] = useState('Under Review');
     const [approvedBy,setApprovedBy] = useState('');
     const [location, setLocation] = useState('');
     const [open, setOpen] = useState(false);
@@ -282,250 +282,260 @@ export default function CollectPolygonScreen({route,navigation}:collectPolygonSc
       } catch (error) {
         console.error(error)
       }
-    }
+    };
+    const renderItem = ({item,index}:any) => {
+        return (
+          <Pressable onPress={uploadFileOnHandler}>
+            <View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center',flexDirection:'row',columnGap:5}}>
+              <Text style={{fontSize:20,color:'blue',fontWeight:'bold'}}>{item.name}</Text>
+            </View>
+          </Pressable>
+          
+        );
+    };
     return (
         <View style={styles.mainContainer}>
-            <ScrollView style={styles.container}>
-                <View>
-                  <Text style={styles.label}>Document</Text>
-                  <View style={styles.borderImg}>
-                    <View style={{flexDirection: 'column',padding:20}}>
-                        {fileDocument.map((data, index) => 
-                        <View key={index} style={{flexDirection:'row'}}>
-                            <TextInput
-                              style={{
-                                width: '90%',
-                                height: 40,
-                                borderWidth: 1,
-                                padding: 10,
-                                borderRadius: 50,
-                                color: 'black'
-                              }}
-                              value={data.name}
-                            />
-                            <TouchableOpacity style={{alignSelf:'flex-end'}} onPress={() => {deleteByIndex(index)}}>
-                              <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center',padding:6}}>
-                                  <Image
-                                      source={require('../../assets/icon/delete.png')}
-                                      style={{width:25,height:25}}
-                                  />
-                                  {/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */}
-                              </View>
-                          </TouchableOpacity>
-                        </View> 
-                        )}
-                    </View>
-                    <TouchableOpacity style={{
-                      marginTop:20,
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      alignSelf: 'center',
-                      width: 100,
-                      height: 40,
-                      bottom:20,
-                      borderRadius: 6,
-                      backgroundColor: '#80CBD3'
-                    }} onPress={uploadFileOnHandler}>
-                      <Image
-                          source={require('../../assets/icon/folder.png')}
-                          style={styles.buttonImageIconStyle}
-                      />
-                      </TouchableOpacity>
-                  </View>
-                </View>
-                <View
-                    style={{
-                        marginTop: 15
-                    }}
-                />
+          <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
+            <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} />
+            <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,paddingTop:25}}>
+              <ScrollView 
+                horizontal={false}
+                showsHorizontalScrollIndicator={false}
+                nestedScrollEnabled={true}
+                style={styles.container}>
                 <View style={{flexDirection:'column'}}>
                     <MapView
-                        style={{width:'80%',height:160,alignSelf:'center'}}
-                        mapStyle={styleURL}
-                        zoomEnabled={false}
-                        scrollEnabled={false}
+                      style={{width:352,height:200,borderWidth:1,borderColor:'#A6A6A6',overflow:'hidden',alignSelf:'center',borderTopRightRadius:10,borderTopLeftRadius:10}}
+                      mapStyle={styleURL}
+                      rotateEnabled={false}
+                      zoomEnabled={false}
+                      pitchEnabled={false}
+                      scrollEnabled={false}
                     >
-                        <Camera 
-                            centerCoordinate={centerCoords}
-                            zoomLevel={16}
-                            minZoomLevel={5}
-                            maxZoomLevel={20}
-                        />
-                        <ShapeSource
-                          id="polygon"
-                          shape={{
-                              "type": "FeatureCollection",
-                              "features": [
-                                  {
-                                      "type": "Feature",
-                                      "properties": {},
-                                      "geometry": {
-                                          "type": "Polygon",
-                                          "coordinates": [
-                                            route.params.coordinates
-                                          ]
-                                      }
-                                  }
-                              ]
-                          }}
-                        >
-                          <LineLayer 
-                            id="linelayer1"
-                            style={{lineColor:'red',lineWidth:3}}
+                      <Camera 
+                              centerCoordinate={centerCoords}
+                              zoomLevel={16}
+                              minZoomLevel={5}
+                              maxZoomLevel={20}
                           />
-                          <FillLayer 
-                            id="some-fill-feature"
-                            style={{
-                                fillColor: ['interpolate', ['linear'], ['zoom'], 0, '#eeddbb', 2, '#0daa00', 3, '#bbbbee'],
-                                fillOpacity:0.5
+                          <ShapeSource
+                            id="polygon"
+                            shape={{
+                                "type": "FeatureCollection",
+                                "features": [
+                                    {
+                                        "type": "Feature",
+                                        "properties": {},
+                                        "geometry": {
+                                            "type": "Polygon",
+                                            "coordinates": [
+                                              route.params.coordinates
+                                            ]
+                                        }
+                                    }
+                                ]
                             }}
-                          />
-                        </ShapeSource>
-                      {
-                          route.params.coordinates.map((item:any,index:number)=>(
-                              <PointAnnotation
-                                  key={index}
-                                  id={String(index)}
-                                  coordinate={item}
-                                  draggable={false}
-                              >
-                                <View style={{ height: 75, width: 75 }}>
-                                  <View style={{width:15,height:15,backgroundColor:'red',borderColor:'black',borderRadius:50}} />
-                                </View>
-                              </PointAnnotation>
-                          ))
-                      }
+                          >
+                            <LineLayer 
+                              id="linelayer1"
+                              style={{lineColor:'red',lineWidth:3}}
+                            />
+                            <FillLayer 
+                              id="some-fill-feature"
+                              style={{
+                                  fillColor: ['interpolate', ['linear'], ['zoom'], 0, '#eeddbb', 2, '#0daa00', 3, '#bbbbee'],
+                                  fillOpacity:0.5
+                              }}
+                            />
+                          </ShapeSource>
+                        {
+                            route.params.coordinates.map((item:any,index:number)=>(
+                                <PointAnnotation
+                                    key={index}
+                                    id={String(index)}
+                                    coordinate={item}
+                                    draggable={false}
+                                >
+                                  <View style={{ height: 75, width: 75 }}>
+                                    <View style={{width:15,height:15,backgroundColor:'red',borderColor:'black',borderRadius:50}} />
+                                  </View>
+                                </PointAnnotation>
+                            ))
+                        }
                     </MapView>
-                    <TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>navigation.navigate('Permit Map', { screen: 'Permit Map'})}>
-                        <View style={{backgroundColor:'#217dd3',flexDirection:'row',width:150,height:30,borderRadius:20,justifyContent:'center'}}>
-                            <Text style={{alignSelf:'center',fontWeight:'bold',fontSize:16,color:'white'}}>View</Text>
-                        </View>
-                    </TouchableOpacity>
+                  {/* </Pressable> */}
+                  <TouchableOpacity style={{alignSelf:'center',backgroundColor:'#F9F9F9',width:352,height:50,borderBottomLeftRadius:10,borderBottomRightRadius:10,justifyContent:'center',borderWidth:1,borderColor:'#A6A6A6'}} onPress={()=>navigation.navigate('Permit Map', { screen: 'Permit Map'})}>
+                      <Text style={{alignSelf:'center',fontWeight:'semibold',fontSize:16,color:'#434343'}}>Change Location</Text>
+                  </TouchableOpacity>
                 </View>
-                <View
-                    style={{
-                        marginTop: 15
-                    }}
-                />
-                <View>
-                    <Text style={styles.label}>Company Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text>
+                  <View
+                      style={{
+                          marginTop: 15
+                      }}
+                  />
+                  <View style={{alignSelf:'center'}}>
+                    {/* <Text style={styles.label}>Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
+                    <Text style={styles.label}>Company Name</Text>
                     <TextInput
-                        style={styles.input}
-                        onChangeText={(text)=>{
-                          setCompanyName(text)
-                        }}
-                        onChange={()=> {
-                          setCompanyNameError(false)
-                        }}
+                      style={styles.input}
+                      onChangeText={(text) => {
+                        setCompanyName(text)
+                      }}
+                      onChange={()=> {
+                        setCompanyNameError(false)
+                      }}
                     />
                     {companyNameError ? <Text style={styles.errorInput}>Company Name is Required!</Text>:null}
-                </View>
-                <View
+                  </View>
+                  <View
                     style={{
-                        marginTop: 15
+                      marginTop: 15
                     }}
-                />
-                <View>
-                    <Text style={styles.label}>Permit Status <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text>
+                  />
+                  <View style={{alignSelf:'center',width:352,height:45}}>
+                    {/* <Text style={styles.label}>Status<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
+                    <Text style={styles.label}>Permit Status</Text>
                     <View style={{flexDirection:'row',alignItems:'center'}}>
-                        <RadioButton
-                            value="Approved"
-                            status={ checkedStatus === 'Approved' ? 'checked' : 'unchecked' }
-                            onPress={()=>{
-                              setCheckedStatus('Approved');
-                              setPermitStatusError(false);
-                            }}
-                            />
-                        <Text style={{color:'black'}}>Approved</Text>
+                      <RadioButton
+                        color='#434343'
+                        value="Approved"
+                        status={ checkedStatus === 'Approved' ? 'checked' : 'unchecked' }
+                        onPress={() => {setCheckedStatus('Approved'); setPermitStatusError(false)}}
+                      />
+                      <Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Approved</Text>
                     </View>
                     <View style={{flexDirection:'row',alignItems:'center'}}>
-                        <RadioButton
-                            value="Under Review"
-                            status={ checkedStatus === 'Under Review' ? 'checked' : 'unchecked' }
-                            onPress={()=>{
-                              setCheckedStatus('Under Review');
-                              setPermitStatusError(false);
-                            }}
-                        />
-                        <Text style={{color:'black'}}>Under Review</Text>
-                    </View>
-                </View>
-                {permitStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null}
-                {
-                  checkedStatus === 'Approved' ? 
-                  <Animated.View>
-                    <View
-                      style={{
-                        marginTop: 15
-                      }} />
-                    <View>
-                      <Text style={styles.label}>Approved By<Text style={{ color: 'red', fontWeight: 'bold' }}>*</Text></Text>
-                      <TextInput
-                        style={styles.input}
-                        onChangeText={(text) => {
-                          setApprovedBy(text);
-                        } }
-                        />
+                      <RadioButton
+                        color='#434343'
+                        value="Under Review"
+                        status={ checkedStatus === 'Under Review' ? 'checked' : 'unchecked' }
+                        onPress={() => {setCheckedStatus('Under Review'); setPermitStatusError(false); }}
+                      />
+                      <Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Under Review</Text>
                     </View>
-                  </Animated.View>
-                  :
-                  null
-                }
-                <View
+                    {permitStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null}
+                  </View>
+                  <View
                     style={{
-                        marginTop: 15
+                      marginTop: 60
                     }}
-                />
-                <View>
-                    <Text style={styles.label}>Location Detail <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text>
-                    <TextInput style={{borderWidth:1,borderRadius:20,padding: 10,color:'black',textAlignVertical:'top'}}
-                        multiline
-                        numberOfLines={5}
-                        maxLength={255}
-                        onChangeText={(text)=>{
-                          setLocation(text)
-                        }}
-                        onChange={()=> {
-                          setLocationError(false)
-                        }}
+                  />
+                  {
+                    checkedStatus === 'Approved' ? 
+                    <Animated.View>
+                      <View style={{alignSelf:'center'}}>
+                        <Text style={styles.label}>Approved By<Text style={{ color: 'red', fontWeight: 'bold' }}>*</Text></Text>
+                        <TextInput
+                          style={styles.input}
+                          onChangeText={(text) => {
+                            setApprovedBy(text);
+                          } }
+                          />
+                      </View>
+                      <View
+                        style={{
+                          marginTop: 15
+                        }} />
+                    </Animated.View>
+                    :
+                    null
+                  }
+                  <View
+                      style={{
+                          marginTop: 15
+                      }}
+                  />
+                  <View style={{alignSelf:'center'}}>
+                    <Text style={styles.label}>Location Detail</Text>
+                    <TextInput style={{borderWidth:1,borderRadius:20,padding: 10,color:'#6B5E5E',borderColor:'#A6A6A6',textAlignVertical:'top',width:352,height:135}}
+                      multiline
+                      numberOfLines={5}
+                      maxLength={255}
+                      onChangeText={(text) => {
+                        setLocation(text)
+                      }}
+                      onChange={()=> {
+                        setLocationError(false)
+                      }}
                     />
-                    {locationError ? <Text style={styles.errorInput}>Location is Required!</Text>:null}
-                </View>
-                <View
+                    {locationError ? <Text style={styles.errorInput}>Information is Required!</Text>:null}
+                  </View>
+                  <View
                     style={{
-                        marginTop: 15
+                      marginTop: 15
                     }}
-                />
-                <View>
+                  />
+                  <View style={{alignSelf:'center'}}>
                     <Text style={styles.label}>Survey Date</Text>
                     <TextInput
-                        style={styles.input}
-                        onPress={() => setOpen(true)}
-                        value={String(momentDate)}
+                      style={styles.input}
+                      onPress={() => setOpen(true)}
+                      value={String(momentDate)}
                     />
                     <DatePicker
-                        locale='en'
-                        theme='dark'
-                        mode="date"
-                        modal
-                        open={open}
-                        date={install_date}
-                        onConfirm={(survey_date) => {
-                        setOpen(false)
-                        setInstallDate(survey_date)
-                        }}
-                        onCancel={() => {
-                        setOpen(false)
-                        }}
+                      locale='en'
+                      theme='light'
+                      mode='date'
+                      modal
+                      open={open}
+                      date={install_date}
+                      onConfirm={(survey_date) => {
+                      setOpen(false)
+                      setInstallDate(survey_date)
+                      }}
+                      onCancel={() => {
+                      setOpen(false)
+                      }}
                     />
-                </View>
-                <View
+                  </View>
+                  <View
                     style={{
-                        marginTop: 15
+                      marginTop: 15
                     }}
-                />
-            </ScrollView>
-            <Button title='Send' onPress={showDialog} />
+                  />
+                  <View style={{alignSelf:'center',width:352}}>
+                    <Text style={styles.label}>Attachment</Text>
+                    <Text style={{fontStyle:'italic',color:'#434343',fontSize:14}}>Lampirkan dokumen</Text>
+                    { 
+                      fileDocument.length === 0 ?
+                      <Pressable onPress={uploadFileOnHandler}>
+                        <View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center',flexDirection:'row',columnGap:5}}>
+                          <Image
+                              source={require('../../assets/icon/folder.png')}
+                          />
+                          <Text style={{fontStyle:'italic',color:'#434343'}}>Klik untuk menambahkan dokumen</Text>
+                        </View>
+                      </Pressable>
+                    :
+                      <FlatList
+                        horizontal={true}
+                        showsHorizontalScrollIndicator={false}
+                        scrollEnabled={false}
+                        ListFooterComponent={()=>
+                          <Pressable onPress={uploadFileOnHandler}>
+                            <View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center'}}>
+                              <Image
+                                  source={require('../../assets/icon/folder.png')}
+                              />
+                              <Text style={{fontStyle:'italic',color:'#434343'}}>Klik untuk menambahkan dokumen</Text>
+                            </View>
+                          </Pressable>
+                        }
+                        contentContainerStyle={{flexDirection:'column',columnGap:25,rowGap:10}}
+                        data={fileDocument}
+                        renderItem={({item,index})=>renderItem({item,index})}
+                      />
+                    }
+                  </View>
+                  <View
+                      style={{
+                          marginTop: 30
+                      }}
+                  />
+              </ScrollView>
+              <Button title='Send' onPress={showDialog} />
+            </View>
+            
             <AwesomeAlert
           show={alertOnline}
           showProgress={false}
@@ -599,23 +609,25 @@ const styles = StyleSheet.create({
       color: 'black'
     },
     input: {
-      height: 40,
+      width:352,
+      height: 45,
       borderWidth: 1,
       padding: 10,
-      borderRadius: 50,
-      color: 'black'
+      borderRadius: 10,
+      color: '#6B5E5E',
+      borderColor:'#A6A6A6'
     },
     container: {
-      flex: 1,
-      backgroundColor: '#ecf0f1',
       padding: 10,
+      flexGrow: 1
     },
     mainContainer: {
       flex: 1,
     },
     label: {
-      fontSize: 21,
-      color: 'black',
+      fontSize: 16,
+      fontWeight:'semibold',
+      color: '#434343',
       // marginBottom: 20
     },
     title: {
diff --git a/src/component/collectscreen.tsx b/src/component/collectscreen.tsx
index cef109a..2ba2b22 100644
--- a/src/component/collectscreen.tsx
+++ b/src/component/collectscreen.tsx
@@ -31,6 +31,7 @@ import Moment from 'moment';
 import { RadioButton } from 'react-native-paper';
 import AwesomeAlert from 'react-native-awesome-alerts';
 import RNFetchBlob from 'rn-fetch-blob';
+import Modal from "react-native-modal";
 
 import { PJU_API_URL } from "../../urlConfig";
 
@@ -150,7 +151,8 @@ function CollectScreen({route,navigation}: collectScreenProps) {
   const [PJUTypeError, setPJUTypeError] = useState(false);
   const [PJUStatusError, setPJUStatusError] = useState(false);
   const [PJUInfoError, setPJUInfoError] = useState(false);
-  const [attachmentSuccess, setAttachmentSuccess] = useState(0)
+  const [attachmentSuccess, setAttachmentSuccess] = useState(0);
+  const [ModalAttachment, setModalAttachment] = useState(false);
   
   useEffect(()=> {
     navigation.addListener('beforeRemove', (e:any)=> {
@@ -363,21 +365,6 @@ function CollectScreen({route,navigation}: collectScreenProps) {
   const handleCancelAlertOffline = () => {
     setAlertOffline(false);
   };
-  const DATA = [
-    {
-      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-      title: 'First Item',
-    },
-    {
-      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abbsss28ba',
-      title: 'First Item',
-    },
-    {
-      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abbssssss28ba',
-      title: 'First Item',
-    }
-    
-  ];
   const [selectedId, setSelectedId] = useState();
   const [imagenotNull,setImagenotNull] = useState(false);
   const Item = ({item, onPress, backgroundColor, textColor}:any) => (
@@ -385,9 +372,13 @@ function CollectScreen({route,navigation}: collectScreenProps) {
       <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
     </TouchableOpacity>
   );
-  const renderItem = ({item}:any) => {
+  const renderItem = ({item,index}:any) => {
     return (
-      <View key={item} style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row'}}></View>
+      <View key={index} style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row'}}>
+        <Image style={{width: '100%',height: '100%',borderRadius:10}}
+            source={{uri: `data:image/jpeg;base64,${imgUrl[index]}`}}
+        />
+      </View>
     );
   };
   return(
@@ -395,10 +386,14 @@ function CollectScreen({route,navigation}: collectScreenProps) {
       <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
       <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} />
       <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,paddingTop:25}}>
-        <ScrollView style={styles.container}>
+        <ScrollView
+          horizontal={false}
+          showsHorizontalScrollIndicator={false}
+          nestedScrollEnabled={true}
+          style={styles.container}>
           <View style={{flexDirection:'column'}}>
-            <Pressable onPress={()=>navigation.navigate('PJU Map Collect', { screen: 'PJU Map Collect'})} style={{alignItems:'center'}}>
-              <View style={{height:40,width:352,borderTopRightRadius:10,borderTopLeftRadius:10,borderWidth:1,borderColor:'#A6A6A6',backgroundColor:'#F9F9F9',justifyContent:'flex-start',flexDirection:'row',alignItems:'center',columnGap:5}}>
+            {/* <Pressable onPress={()=>navigation.navigate('PJU Map Collect', { screen: 'PJU Map Collect'})} style={{alignItems:'center'}}> */}
+              <View style={{height:40,width:352,borderTopRightRadius:10,borderTopLeftRadius:10,borderWidth:1,borderColor:'#A6A6A6',backgroundColor:'#F9F9F9',justifyContent:'flex-start',flexDirection:'row',alignItems:'center',columnGap:5,alignSelf:'center'}}>
                 <Image
                     source={require('../../assets/icon/findmyloc.png')}
                 />
@@ -406,32 +401,29 @@ function CollectScreen({route,navigation}: collectScreenProps) {
                 <Text style={{fontSize:14,fontWeight:'semibold',color:'#434343'}}>{fixCoordinate.long}</Text>
               </View>
               <MapView
-                    style={{width:352,height:200,borderWidth:1,borderColor:'#A6A6A6',borderBottomRightRadius:10,borderBottomLeftRadius:10,overflow:'hidden'}}
-                    mapStyle={styleURL}
-                    rotateEnabled={false}
-                    zoomEnabled={false}
-                    pitchEnabled={false}
-                    scrollEnabled={false}
-                  >
-                    <PointAnnotation 
-                      children={<></>}
-                      id={"pjuCoordinate"}
-                      coordinate={[fixCoordinate.long, fixCoordinate.lat]}
-                    />
-                    <Camera
-                      centerCoordinate={[fixCoordinate.long, fixCoordinate.lat]!}
-                      zoomLevel={15}
-                      minZoomLevel={5}
-                      maxZoomLevel={20}
-                    />
-                    
+                style={{width:352,height:200,borderWidth:1,borderColor:'#A6A6A6',overflow:'hidden',alignSelf:'center'}}
+                mapStyle={styleURL}
+                rotateEnabled={false}
+                zoomEnabled={false}
+                pitchEnabled={false}
+                scrollEnabled={false}
+              >
+                <PointAnnotation 
+                  children={<></>}
+                  id={"pjuCoordinate"}
+                  coordinate={[fixCoordinate.long, fixCoordinate.lat]}
+                />
+                <Camera
+                  centerCoordinate={[fixCoordinate.long, fixCoordinate.lat]!}
+                  zoomLevel={15}
+                  minZoomLevel={5}
+                  maxZoomLevel={20}
+                /> 
               </MapView>
-            </Pressable>
-            {/* <TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>navigation.navigate('PJU Map Collect', { screen: 'PJU Map Collect'})}>
-              <View style={{backgroundColor:'#217dd3',flexDirection:'row',width:150,height:30,borderRadius:20,justifyContent:'center'}}>
-                  <Text style={{alignSelf:'center',fontWeight:'bold',fontSize:16,color:'white'}}>Change Location</Text>
-              </View>
-            </TouchableOpacity> */}
+            {/* </Pressable> */}
+            <TouchableOpacity style={{alignSelf:'center',backgroundColor:'#F9F9F9',width:352,height:50,borderBottomLeftRadius:10,borderBottomRightRadius:10,justifyContent:'center',borderWidth:1,borderColor:'#A6A6A6'}} onPress={()=>navigation.navigate('PJU Map Collect', { screen: 'PJU Map Collect'})}>
+                <Text style={{alignSelf:'center',fontWeight:'semibold',fontSize:16,color:'#434343'}}>Change Location</Text>
+            </TouchableOpacity>
           </View>
           <View
             style={{
@@ -507,38 +499,7 @@ function CollectScreen({route,navigation}: collectScreenProps) {
               marginTop: 60
             }}
           />
-          <View style={{alignSelf:'center',width:352}}>
-            <Text style={styles.label}>Attachment</Text>
-            <Text style={{fontStyle:'italic',color:'#434343',fontSize:14}}>Lampirkan foto / gambar</Text>
-            {
-              !imagenotNull ?
-              <Pressable onPress={()=>setImagenotNull(true)}>
-                <View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center',flexDirection:'row',columnGap:5}}>
-                  <Image
-                      source={require('../../assets/icon/camorlib.png')}
-                  />
-                  <Text style={{fontStyle:'italic',color:'#434343'}}>Klik untuk menambahkan foto / gambar</Text>
-                </View>
-              </Pressable>
-            :
-              <FlatList
-                // pagingEnabled
-                contentContainerStyle={{flexDirection:'row',flexWrap: 'wrap',columnGap:25,rowGap:10}}
-                data={DATA}
-                renderItem={(item)=>renderItem(item.index)}
-                keyExtractor={item => item.id}
-                extraData={selectedId}
-              />
-
-            }
-          </View>
-          <View
-            style={{
-              marginTop: 15
-            }}
-          />
           <View style={{alignSelf:'center'}}>
-            {/* <Text style={styles.label}>Information <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
             <Text style={styles.label}>Information</Text>
             <TextInput style={{borderWidth:1,borderRadius:20,padding: 10,color:'#6B5E5E',borderColor:'#A6A6A6',textAlignVertical:'top',width:352,height:135}}
               multiline
@@ -586,6 +547,39 @@ function CollectScreen({route,navigation}: collectScreenProps) {
               marginTop: 15
             }}
           />
+          <View style={{alignSelf:'center',width:352}}>
+            <Text style={styles.label}>Attachment</Text>
+            <Text style={{fontStyle:'italic',color:'#434343',fontSize:14}}>Lampirkan foto / gambar</Text>
+            { 
+              imgUrl.length === 0 ?
+              <Pressable onPress={()=>setModalAttachment(true)}>
+                <View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center',flexDirection:'row',columnGap:5}}>
+                  <Image
+                      source={require('../../assets/icon/camorlib.png')}
+                  />
+                  <Text style={{fontStyle:'italic',color:'#434343'}}>Klik untuk menambahkan foto / gambar</Text>
+                </View>
+              </Pressable>
+            :
+              <FlatList
+                horizontal={false}
+                showsHorizontalScrollIndicator={false}
+                scrollEnabled={false}
+                ListFooterComponent={()=>
+                  <Pressable onPress={()=>setModalAttachment(true)}>
+                    <View style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
+                      <Image
+                          source={require('../../assets/icon/camorlib.png')}
+                      />
+                    </View>
+                  </Pressable>
+                }
+                contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',columnGap:25,rowGap:10}}
+                data={imgUrl}
+                renderItem={({item,index})=>renderItem({item,index})}
+              />
+            }
+          </View>
           <View
             style={{
               marginTop: 30
@@ -698,6 +692,30 @@ function CollectScreen({route,navigation}: collectScreenProps) {
           titleStyle={{fontSize:20}}
           messageStyle={{fontSize:16}}
         />
+
+        <Modal isVisible={ModalAttachment} animationIn={'fadeInUp'} animationOut={'fadeOutDown'} backdropOpacity={0} onBackdropPress={()=>setModalAttachment(false)} style={{top:'18%',alignSelf:'center'}}>
+          <View key={"modal container"} style={{width:330,height:220,backgroundColor:'#F9F9F9',borderRadius:25,borderWidth:1,borderColor:'#A6A6A6'}}>
+              <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingLeft:30,paddingTop:20,paddingRight:10}}>
+                  <Text style={{fontSize:20,fontWeight:'semibold',color: '#434343',}}>
+                      Select Mode
+                  </Text>
+                  <Pressable onPress={()=>setModalAttachment(false)} style={{alignSelf:'flex-end',padding:10}}>
+                      <Image style={{tintColor:'#434343'}}
+                          source={require('../../assets/icon/x.png')}
+                      />
+                  </Pressable>
+              </View>
+              <View style={{padding:30}}>
+                <TouchableOpacity onPress={()=>{openCameraLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderTopLeftRadius:10,borderTopRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
+                    <Text style={{fontSize:20,fontWeight:'light',color:'#434343'}}>Take photo</Text>
+                </TouchableOpacity>
+                <TouchableOpacity onPress={()=>{openLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderBottomLeftRadius:10,borderBottomRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
+                    <Text style={{fontSize:20,fontWeight:'light',color:'#434343'}}>Choose photo</Text>
+                </TouchableOpacity>
+              </View>
+              
+          </View>
+      </Modal>
     </View>
   )
 }
@@ -735,6 +753,7 @@ const styles = StyleSheet.create({
       // flex: 1,
       // backgroundColor: '#ecf0f1',
       padding: 10,
+      flexGrow: 1
     },
     mainContainer: {
       flex: 1,
diff --git a/src/component/mapCollectLineScreen.tsx b/src/component/mapCollectLineScreen.tsx
index 8f7a000..cd1a0fc 100644
--- a/src/component/mapCollectLineScreen.tsx
+++ b/src/component/mapCollectLineScreen.tsx
@@ -282,7 +282,7 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
                         {
                             startPoint.length > 1 ?
                             <TouchableOpacity style={{margin:10}} onPress={()=> {
-                                navigation.navigate('PDAM Collecting', { screen: 'PDAM Collecting',coordinates: coordinates})
+                                navigation.navigate('Add Data PDAM', { screen: 'Add Data PDAM',coordinates: coordinates})
                             }}>
                                 <View style={{backgroundColor:'#43eb34',flexDirection:'row',width:60,height:60,borderRadius:100,justifyContent:'center'}}>
                                 <Image
diff --git a/src/component/mapCollectScreen.tsx b/src/component/mapCollectScreen.tsx
index 2e068b2..7b1efb8 100644
--- a/src/component/mapCollectScreen.tsx
+++ b/src/component/mapCollectScreen.tsx
@@ -54,7 +54,7 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
     },[]);
 
     const SelectPosition = () => {
-        navigation.navigate('PJU Collecting', { screen: 'PJU Collecting', fixCoordinate: FixCoor})
+        navigation.navigate('Add Data PJU', { screen: 'Add Data PJU', fixCoordinate: FixCoor})
     };
 
     const [zoom, setZoom] = useState(15);
@@ -194,13 +194,13 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
                 }
             </MapView>
 
-            <TouchableOpacity onPress={()=>setmodalBasemap(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',left:'4%'}}>
+            <TouchableOpacity onPress={()=>setmodalLayerList(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',left:'4%'}}>
                 <Image
                         source={require('../../assets/icon/layerList.png')}
                     //   style={styles.buttonImageIconStyle}
                     />
             </TouchableOpacity>
-            <TouchableOpacity onPress={()=>setmodalLayerList(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'15%',left:'4%'}}>
+            <TouchableOpacity onPress={()=>setmodalBasemap(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'15%',left:'4%'}}>
                 <Image
                         source={require('../../assets/icon/mapOutline.png')}
                     //   style={styles.buttonImageIconStyle}
@@ -225,13 +225,13 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
             {!delayRender ?
                 <TouchableOpacity style={{position:'absolute',alignSelf:'center',bottom:20}} onPress={SelectPosition}>
                     <View style={{backgroundColor:'#0386D0',flexDirection:'row',width:350,height:50,borderRadius:10,justifyContent:'center'}}>
-                        <Text style={{alignSelf:'center',fontWeight:'bold',fontSize:20,color:'white'}}>Select Position</Text>
+                        <Text style={{alignSelf:'center',fontWeight:'bold',fontSize:20,color:'white'}}>Select Location</Text>
                     </View>
                 </TouchableOpacity> 
             :
                 <TouchableOpacity disabled={true} style={{position:'absolute',alignSelf:'center',bottom:20}}>
                     <View style={{backgroundColor:'#0386D0',flexDirection:'row',width:350,height:50,borderRadius:10,justifyContent:'center',opacity:0.5}}>
-                        <Text style={{alignSelf:'center',fontWeight:'bold',fontSize:20,color:'white'}}>Waiting Get Position</Text>
+                        <Text style={{alignSelf:'center',fontWeight:'bold',fontSize:20,color:'white'}}>Waiting Get Location</Text>
                     </View>
                 </TouchableOpacity>
             }