diff --git a/assets/icon/findmylock.png b/assets/icon/findmylock.png
new file mode 100644
index 0000000..e4cd798
Binary files /dev/null and b/assets/icon/findmylock.png differ
diff --git a/assets/icon/layerList.png b/assets/icon/layerList.png
new file mode 100644
index 0000000..0d49784
Binary files /dev/null and b/assets/icon/layerList.png differ
diff --git a/assets/icon/mapOutline.png b/assets/icon/mapOutline.png
new file mode 100644
index 0000000..0428d6c
Binary files /dev/null and b/assets/icon/mapOutline.png differ
diff --git a/assets/icon/openCamera.png b/assets/icon/openCamera.png
new file mode 100644
index 0000000..8fe6bc2
Binary files /dev/null and b/assets/icon/openCamera.png differ
diff --git a/src/component/editLinescreen.tsx b/src/component/editLinescreen.tsx
index 1a52183..44baa2d 100644
--- a/src/component/editLinescreen.tsx
+++ b/src/component/editLinescreen.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert} from 'react-native';
 
 import MapLibreGL from '@maplibre/maplibre-react-native';
+import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
 import { SelectList } from 'react-native-dropdown-select-list';
 import { RadioButton } from 'react-native-paper';
 import DatePicker from 'react-native-date-picker';
@@ -378,7 +379,7 @@ export default function EditLineScreen({route,navigation}:collectLineScreenProps
                         <View style={{flexDirection: 'row'}}>
                             <PrevImg isIndex={currentIndex}/>
                             <Animated.FlatList
-                              ref={ref}
+                                ref={ref}
                                 data={imgUrl} 
                                 showsHorizontalScrollIndicator={false}
                                 pagingEnabled
@@ -421,20 +422,19 @@ export default function EditLineScreen({route,navigation}:collectLineScreenProps
                 {
                   !loadGeom ?
                   <View style={{flexDirection:'column'}}>
-                    <MapLibreGL.MapView
+                    <MapView
                         style={{width:'80%',height:160,alignSelf:'center'}}
-                        styleURL={styleURL}
+                        mapStyle={styleURL}
                         zoomEnabled={false}
                         scrollEnabled={false}
                     >
-                        <MapLibreGL.Camera 
+                        <Camera 
                             centerCoordinate={centerCoords}
-                            allowUpdates={true}
                             zoomLevel={17}
                             minZoomLevel={5}
                             maxZoomLevel={20}
                         />
-                        <MapLibreGL.ShapeSource
+                        <ShapeSource
                             id="line"
                             shape={{
                                 "type": "FeatureCollection",
@@ -450,14 +450,14 @@ export default function EditLineScreen({route,navigation}:collectLineScreenProps
                                 ]
                             }}
                         >
-                            <MapLibreGL.LineLayer 
+                            <LineLayer 
                                 id="linelayer1"
                                 style={{lineColor:'red',lineWidth:3}}
                             />
-                        </MapLibreGL.ShapeSource>
+                        </ShapeSource>
                         {
                             coordinates.map((item:any,index:number)=>(
-                                <MapLibreGL.PointAnnotation
+                                <PointAnnotation
                                     children={<></>}
                                     key={index}
                                     id={String(index)}
@@ -466,7 +466,7 @@ export default function EditLineScreen({route,navigation}:collectLineScreenProps
                                 />
                             ))
                         }
-                    </MapLibreGL.MapView>
+                    </MapView>
                     {!secondPress ?
                       <TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>{navigation.navigate('Map View Line', { screen: 'Map View Line',data: {
                           id:data.id,
diff --git a/src/component/editPolygonscreen.tsx b/src/component/editPolygonscreen.tsx
index 39b666b..88c87c9 100644
--- a/src/component/editPolygonscreen.tsx
+++ b/src/component/editPolygonscreen.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert} from 'react-native';
 import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native';
 import MapLibreGL from '@maplibre/maplibre-react-native';
+import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
 import { SelectList } from 'react-native-dropdown-select-list';
 import { RadioButton } from 'react-native-paper';
 import DatePicker from 'react-native-date-picker';
@@ -420,15 +421,14 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
                     }}
                 />
                 <View style={{flexDirection:'column'}}>
-                    <MapLibreGL.MapView
+                    <MapView
                         style={{width:'80%',height:160,alignSelf:'center'}}
-                        styleURL={styleURL}
+                        mapStyle={styleURL}
                         zoomEnabled={false}
                         scrollEnabled={false}
                     >
-                      <MapLibreGL.Camera 
+                      <Camera 
                         centerCoordinate={centerCoords.length === 0 ? coordinates[0] : centerCoords}
-                        allowUpdates={true}
                         zoomLevel={17}
                         minZoomLevel={5}
                         maxZoomLevel={20}
@@ -437,7 +437,7 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
                         {
                           !loadGeom ?
                           <>
-                            <MapLibreGL.ShapeSource
+                            <ShapeSource
                               id="polygon2"
                               shape={{
                                   "type": "FeatureCollection",
@@ -455,18 +455,18 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
                                   ]
                               }}
                             >
-                              <MapLibreGL.LineLayer 
+                              <LineLayer 
                                 id="linelayer2"
                                 style={{lineColor:'red',lineWidth:3}}
                               />
-                              <MapLibreGL.FillLayer 
+                              <FillLayer 
                                 id="some-fill-feature2"
                                 style={{
                                     fillColor: ['interpolate', ['linear'], ['zoom'], 0, '#eeddbb', 2, '#0daa00', 3, '#bbbbee'],
                                     fillOpacity:0.5
                                 }}
                               />
-                            </MapLibreGL.ShapeSource>
+                            </ShapeSource>
                           </>
                           :
                           null
@@ -474,7 +474,7 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
                         
                       {
                           coordinates.map((item:any,index:number)=>(
-                              <MapLibreGL.PointAnnotation
+                              <PointAnnotation
                                   key={index}
                                   id={String(index)}
                                   coordinate={item}
@@ -483,10 +483,10 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
                                 <View style={{ height: 75, width: 75 }}>
                                   <View style={{width:15,height:15,backgroundColor:'red',borderColor:'black',borderRadius:50}} />
                                 </View>
-                              </MapLibreGL.PointAnnotation>
+                              </PointAnnotation>
                           ))
                       }
-                    </MapLibreGL.MapView>
+                    </MapView>
                     {!secondPress ?
                     <TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>{navigation.navigate('Map View Polygon', { screen: 'Map View Polygon',data: {
                       id:data.id,
diff --git a/src/component/editscreen.tsx b/src/component/editscreen.tsx
index 78b1a47..8fce18c 100644
--- a/src/component/editscreen.tsx
+++ b/src/component/editscreen.tsx
@@ -26,6 +26,7 @@ import {
   import RNFS from 'react-native-fs';
   
   import MapLibreGL from '@maplibre/maplibre-react-native';
+  import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
   import Moment from 'moment';
   import { RadioButton } from 'react-native-paper';
   import AwesomeAlert from 'react-native-awesome-alerts';
@@ -432,27 +433,27 @@ function EditScreen({route,navigation}: editScreenProps) {
           }}
         />
         <View style={{flexDirection:'column'}}>
-          <MapLibreGL.MapView
+          <MapView
                 style={{width:'80%',height:160,alignSelf:'center'}}
-                styleURL={styleURL}
+                mapStyle={styleURL}
                 rotateEnabled={false}
                 zoomEnabled={false}
                 attributionPosition={{bottom: 8, right: 8}}
                 scrollEnabled={false}
               >
-                <MapLibreGL.PointAnnotation
+                <PointAnnotation
                   children={<></>}
                   id={"pjuCoordinate"}
                   coordinate={[long, lat]}
                 />
-                <MapLibreGL.Camera
+                <Camera
                   centerCoordinate={[long, lat]}
                   allowUpdates={true}
                   zoomLevel={15}
                   minZoomLevel={5}
                   maxZoomLevel={20}
                 />
-          </MapLibreGL.MapView>
+          </MapView>
           <TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>navigation.navigate('MapView', { screen: 'MapView',data: {
             id:data.id,
             nama:pju_name,
diff --git a/src/component/mapCollectLineScreen.tsx b/src/component/mapCollectLineScreen.tsx
index 956da4b..e1a4a21 100644
--- a/src/component/mapCollectLineScreen.tsx
+++ b/src/component/mapCollectLineScreen.tsx
@@ -1,5 +1,5 @@
 import React, {useState, useEffect} from "react";
-import { View, Text, StyleSheet, Alert, TouchableOpacity, Image } from "react-native";
+import { View, Text, StyleSheet, Alert, TouchableOpacity, Image, StatusBar } from "react-native";
 
 import MapLibreGL from '@maplibre/maplibre-react-native';
 import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
@@ -108,13 +108,17 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
 
     return(
         <View style={{flex:1}}>
+            <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
+            <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'100%'}} />
+            
             <MapView
-                style={{alignSelf:'stretch',flex:1}} 
+                style={{width:'100%',height:'100%',position:'absolute',marginTop:10,borderTopRightRadius:50,borderTopLeftRadius:35,overflow:'hidden'}}
                 mapStyle={styleURL}
                 zoomEnabled={true}
                 onRegionDidChange={(region)=>
                     setZoom(region.properties.zoomLevel)
                 }
+                compassEnabled={false}
             >
                 <Camera
                     key={"camera"}
@@ -175,9 +179,28 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
                 
 
             </MapView>
+            
+            <TouchableOpacity 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 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}
+                  />
+            </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')}
+                    //   style={styles.buttonImageIconStyle}
+                  />
+            </TouchableOpacity>
+
 
-            {/* Widget Map */}
-            <View style={styles.gotoLocate}>
+            {/* <View style={styles.gotoLocate}>
                 <TouchableOpacity onPress={() => handleZoom(true)}>
                   <Image
                       source={require('../../assets/icon/plus.png')}
@@ -196,7 +219,8 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
                         style={styles.buttonImageIconStyle}
                     />
                 </TouchableOpacity>
-            </View>
+            </View> */}
+            
             {
                 startPoint.length === 0 ?
                     currentPosition.length > 0 ?
diff --git a/src/component/mapCollectPolygonScreen.tsx b/src/component/mapCollectPolygonScreen.tsx
index 2a8e045..7183cb3 100644
--- a/src/component/mapCollectPolygonScreen.tsx
+++ b/src/component/mapCollectPolygonScreen.tsx
@@ -1,5 +1,5 @@
 import React, {useState, useEffect, useRef} from "react";
-import { View, Text, StyleSheet, Alert, TouchableOpacity, Image } from "react-native";
+import { View, Text, StyleSheet, Alert, TouchableOpacity, Image, StatusBar } from "react-native";
 
 import MapLibreGL from '@maplibre/maplibre-react-native';
 import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
@@ -123,8 +123,10 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
 
     return(
         <View style={{flex:1}}>
+            <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
+            <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'100%'}} />
             <MapView
-                style={{alignSelf:'stretch',flex:1}} 
+                style={{width:'100%',height:'100%',position:'absolute',marginTop:10,borderTopRightRadius:50,borderTopLeftRadius:35,overflow:'hidden'}}
                 mapStyle={styleURL}
                 zoomEnabled={true}
                 onRegionDidChange={(region)=>
@@ -198,6 +200,24 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
                 }
             </MapView>
 
+            <TouchableOpacity 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 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}
+                    />
+            </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')}
+                    //   style={styles.buttonImageIconStyle}
+                    />
+            </TouchableOpacity>
             {/* Widget Map */}
             <View style={styles.gotoLocate}>
                 <TouchableOpacity onPress={() => handleZoom(true)}>
diff --git a/src/component/myAccount.tsx b/src/component/myAccount.tsx
index aa880a6..7cd9e9f 100644
--- a/src/component/myAccount.tsx
+++ b/src/component/myAccount.tsx
@@ -30,7 +30,14 @@ export default function MyAccount() {
                             source={require('../../assets/img/mcf.jpg')}
                             style={[{width:131,height:131,borderRadius:100}]}
                         />
+                        <TouchableOpacity style={{position:'absolute',right:0,bottom:0}}>
+                            <Image
+                                source={require('../../assets/icon/openCamera.png')}
+                                style={[{width:30,height:30}]}
+                            />
+                        </TouchableOpacity>
                     </View>
+                    
                 </View>
                 <View key={"detail section"} style={{paddingLeft: 20,paddingRight:20,marginTop:'10%',height:'80%'}}>
                     <View key={"name"} style={{marginBottom:20}}>