diff --git a/assets/icon/camorlib.png b/assets/icon/camorlib.png
new file mode 100644
index 0000000..03e3613
Binary files /dev/null and b/assets/icon/camorlib.png differ
diff --git a/assets/icon/findmylock.png b/assets/icon/findmyloc.png
similarity index 100%
rename from assets/icon/findmylock.png
rename to assets/icon/findmyloc.png
diff --git a/src/component/collectscreen.tsx b/src/component/collectscreen.tsx
index f7d827e..cef109a 100644
--- a/src/component/collectscreen.tsx
+++ b/src/component/collectscreen.tsx
@@ -1,6 +1,6 @@
 // global.Buffer = require('buffer').Buffer;
 import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
-import { Alert, Animated, Keyboard } from 'react-native';
+import { Alert, Animated, Keyboard, Pressable } from 'react-native';
 import {
   TextInput,
   Button,
@@ -142,7 +142,7 @@ function CollectScreen({route,navigation}: collectScreenProps) {
   const [pju_name, setPJUname] = useState('');
   const [selectedPJUType, setselectedPJUType] = useState("");
   const [pju_info, setPJUinfo] = useState('');
-  const [checkedStatus, setCheckedStatus] = useState('');
+  const [checkedStatus, setCheckedStatus] = useState('Baik');
   const [install_date, setInstallDate] = useState(new Date());
   const momentDate = Moment(install_date).format('YYYY-MM-DD')
   const [attachmentImgError, setattachmentImgError] = useState(false);
@@ -363,209 +363,288 @@ 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) => (
+    <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
+      <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
+    </TouchableOpacity>
+  );
+  const renderItem = ({item}:any) => {
+    return (
+      <View key={item} style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row'}}></View>
+    );
+  };
   return(
     <View style={styles.mainContainer}>
-      <ScrollView style={styles.container}>
-        <Text style={styles.title}>Form Survey PJU</Text>
-        <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}
-                style={{width:'80%'}}
-                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: 295,
-                        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}>
+      <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'}}>
+            <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}}>
                 <Image
-                    source={require('../../assets/icon/camera.png')}
-                    style={styles.buttonImageIconStyle}
+                    source={require('../../assets/icon/findmyloc.png')}
                 />
-                {/* <Text>
-                  Open Camera
-                </Text> */}
-              </TouchableOpacity>
-              <TouchableOpacity style={styles.btnCamera} onPress={openLib}>
-              <Image
-                  source={require('../../assets/icon/gallery.png')}
-                  style={styles.buttonImageIconStyle}
-              />
-              </TouchableOpacity>
-            </View>
+                <Text style={{fontSize:14,fontWeight:'semibold',color:'#434343'}}>{fixCoordinate.lat},</Text>
+                <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}
+                    />
+                    
+              </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> */}
           </View>
-        </View>
-        <View
-          style={{
-            marginTop: 15
-          }}
-        />
-        <View style={{flexDirection:'column'}}>
-          <MapView
-                style={{width:'80%',height:160,alignSelf:'center'}}
-                mapStyle={styleURL}
-                rotateEnabled={false}
-                zoomEnabled={false}
-                pitchEnabled={false}
-                attributionPosition={{bottom: 8, right: 8}}
-                scrollEnabled={false}
-              >
-                <PointAnnotation 
-                  children={<></>}
-                  id={"pjuCoordinate"}
-                  coordinate={[fixCoordinate.long, fixCoordinate.lat]}
-                />
-                <Camera
-                  centerCoordinate={[fixCoordinate.long, fixCoordinate.lat]!}   
-                  pitch={50}
-                  zoomLevel={15}
-                  minZoomLevel={5}
-                  maxZoomLevel={20}
-                />
-          </MapView>
-          <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>
-        </View>
-        <View
-          style={{
-            marginTop: 15
-          }}
-        />
-        <View>
-          <Text style={styles.label}>Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text>
-          <TextInput
-            style={styles.input}
-            onChangeText={(text) => {
-              setPJUname(text)
-            }}
-            onChange={()=> {
-              setPJUNameError(false)
+          <View
+            style={{
+              marginTop: 15
             }}
           />
-          {pjuNameError ? <Text style={styles.errorInput}>Name is Required!</Text>:null}
-        </View>
-        <View
-          style={{
-            marginTop: 15
-          }}
-        />
-        <View>
-          <Text style={styles.label}>PJU Type <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text>
-          <SelectList
-            search={false}
-            placeholder="Select PJU Type"
-            boxStyles={{borderRadius:50,borderWidth:2}}
-            inputStyles={{color:'black'}}
-            dropdownTextStyles={{color:'black'}}
-            data={PJU_Type}
-            setSelected={setselectedPJUType}
-            onSelect={()=> (
-              [setPJUTypeError(false)]
-            )}
+          <View style={{alignSelf:'center'}}>
+            {/* <Text style={styles.label}>Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
+            <Text style={styles.label}>Name</Text>
+            <TextInput
+              style={styles.input}
+              onChangeText={(text) => {
+                setPJUname(text)
+              }}
+              onChange={()=> {
+                setPJUNameError(false)
+              }}
+            />
+            {pjuNameError ? <Text style={styles.errorInput}>Name is Required!</Text>:null}
+          </View>
+          <View
+            style={{
+              marginTop: 15
+            }}
           />
+          <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 PJU Type"
+              boxStyles={{borderRadius:10,borderWidth:1,borderColor:'#A6A6A6',width:352,height:45}}
+              inputStyles={{color:'#6B5E5E'}}
+              dropdownTextStyles={{color:'#6B5E5E'}}
+              data={PJU_Type}
+              setSelected={setselectedPJUType}
+              onSelect={()=> (
+                [setPJUTypeError(false)]
+              )}
+            />
+          </View>
           {PJUTypeError ? <Text style={styles.errorInput}>PJU Type is Required!</Text>:null}
-        </View>
-        <View
-          style={{
-            marginTop: 15
-          }}
-        />
-        <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'); setPJUStatusError(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'); setPJUStatusError(false); }}
+          <View
+            style={{
+              marginTop: 15
+            }}
           />
-          <Text style={{color:"black"}}>Rusak</Text>
-        </View>
-        {PJUStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null}
-        <View
-          style={{
-            marginTop: 15
-          }}
-        />
-        <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) => {
-              setPJUinfo(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}>Status</Text>
+            <View style={{flexDirection:'row',alignItems:'center'}}>
+              <RadioButton
+                color='#434343'
+                value="Baik"
+                status={ checkedStatus === 'Baik' ? 'checked' : 'unchecked' }
+                onPress={() => {setCheckedStatus('Baik'); setPJUStatusError(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'); setPJUStatusError(false); }}
+              />
+              <Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Rusak</Text>
+            </View>
+            {PJUStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null}
+          </View>
+          <View
+            style={{
+              marginTop: 60
             }}
-            onChange={()=> {
-              setPJUInfoError(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>
+            {
+              !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
             }}
           />
-          {PJUInfoError ? <Text style={styles.errorInput}>Information is Required!</Text>:null}
-        </View>
-        <View
-          style={{
-            marginTop: 15
-          }}
-        />
-        <View>
-          <Text style={styles.label}>Installation Date</Text>
-          <TextInput
-            style={styles.input}
-            onPress={() => setOpen(true)}
-            value={String(momentDate)}
+          <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
+              numberOfLines={5}
+              maxLength={255}
+              onChangeText={(text) => {
+                setPJUinfo(text)
+              }}
+              onChange={()=> {
+                setPJUInfoError(false)
+              }}
+            />
+            {PJUInfoError ? <Text style={styles.errorInput}>Information is Required!</Text>:null}
+          </View>
+          <View
+            style={{
+              marginTop: 15
+            }}
           />
-          <DatePicker
-            locale='en'
-            theme='dark'
-            mode="date"
-            modal
-            open={open}
-            date={install_date}
-            onConfirm={(survey_date) => {
-              setOpen(false)
-              setInstallDate(survey_date)
+          <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
             }}
-            onCancel={() => {
-              setOpen(false)
+          />
+          <View
+            style={{
+              marginTop: 30
             }}
           />
-        </View>
-        <View
-          style={{
-            marginTop: 15
-          }}
-        />
-        <View></View>
-        
-      </ScrollView>
-      <Button title='Send' onPress={showDialog} />
+          {/* <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}
+                  style={{width:'80%'}}
+                  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: 295,
+                          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
+            }}
+          /> */}
+          
+        </ScrollView>
+        <Button title='Send' onPress={showDialog} />
+      </View>
+      
+      
       {/* <Button title='Get Local' onPress={getMyObject} />
       <Button title='Delete' onPress={removeValue} />
       <Button title='GetAll' onPress={getAllKeys} /> */}
@@ -644,23 +723,26 @@ 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',
+      // flex: 1,
+      // backgroundColor: '#ecf0f1',
       padding: 10,
     },
     mainContainer: {
       flex: 1,
     },
     label: {
-      fontSize: 21,
-      color: 'black',
+      fontSize: 16,
+      fontWeight:'semibold',
+      color: '#434343',
       // marginBottom: 20
     },
     title: {
diff --git a/src/component/mapCollectLineScreen.tsx b/src/component/mapCollectLineScreen.tsx
index 2d3308d..8f7a000 100644
--- a/src/component/mapCollectLineScreen.tsx
+++ b/src/component/mapCollectLineScreen.tsx
@@ -198,7 +198,7 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
             </TouchableOpacity>
             {/* <TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'23%',left:'4%'}}>
                 <Image
-                      source={require('../../assets/icon/findmylock.png')}
+                      source={require('../../assets/icon/findmyloc.png')}
                     //   style={styles.buttonImageIconStyle}
                   />
             </TouchableOpacity> */}
diff --git a/src/component/mapCollectPolygonScreen.tsx b/src/component/mapCollectPolygonScreen.tsx
index 9e04432..2b56f7e 100644
--- a/src/component/mapCollectPolygonScreen.tsx
+++ b/src/component/mapCollectPolygonScreen.tsx
@@ -218,7 +218,7 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
             </TouchableOpacity>
             <TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'23%',left:'4%'}}>
                 <Image
-                        source={require('../../assets/icon/findmylock.png')}
+                        source={require('../../assets/icon/findmyloc.png')}
                     //   style={styles.buttonImageIconStyle}
                     />
             </TouchableOpacity>
diff --git a/src/component/mapCollectScreen.tsx b/src/component/mapCollectScreen.tsx
index 19ebb92..2e068b2 100644
--- a/src/component/mapCollectScreen.tsx
+++ b/src/component/mapCollectScreen.tsx
@@ -208,7 +208,7 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
             </TouchableOpacity>
             <TouchableOpacity onPress={()=>getLocation()} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'23%',left:'4%'}}>
                 <Image
-                        source={require('../../assets/icon/findmylock.png')}
+                        source={require('../../assets/icon/findmyloc.png')}
                     //   style={styles.buttonImageIconStyle}
                     />
             </TouchableOpacity>