diff --git a/app/(tabs)/map.tsx b/app/(tabs)/map.tsx
index 899afe3..94dfae8 100644
--- a/app/(tabs)/map.tsx
+++ b/app/(tabs)/map.tsx
@@ -25,6 +25,7 @@ export default function MapScreen() {
     const [ typesSet, setTypesSet ] = useState( false );
     const [ coordinates, setCoordinates ] = useState<any>( [] );
     const [ markers, setMarkers ] = useState<any>( [] );
+    const [ activeCalloutId, setActiveCalloutId ] = useState( null );
 
     // Load session
     useEffect( () => {
@@ -38,6 +39,8 @@ export default function MapScreen() {
 
     // Load markers and types
     const loadMarkers = () => {
+        handleCloseAllCallouts();
+
         mapRef.current?.getVisibleBounds().then( (bounds) => {
             Request
                 .post( 'locations', {
@@ -70,6 +73,8 @@ export default function MapScreen() {
 
     // Enable/disable type
     const toggleSwitch = (index: any) => {
+        handleCloseAllCallouts();
+
         const newData = types.map( (item: any, key: any) =>
             key === index ? { ...item, isEnabled: !item.isEnabled } : item
         );
@@ -97,6 +102,15 @@ export default function MapScreen() {
         } );
     }
 
+    const handleCalloutPress = (id: any) => {
+        console.log('set active', id);
+        setActiveCalloutId( id );
+    };
+
+    const handleCloseAllCallouts = () => {
+        setActiveCalloutId( null );
+    };
+
     return (
         <SafeAreaView style={{ flex: 1, backgroundColor: Colors[ colorScheme ].background }}>
             <ThemedView style={styles.container}>
@@ -128,12 +142,25 @@ export default function MapScreen() {
                                     key={marker.id.toString()}
                                     id={marker.id.toString()}
                                     coordinate={marker.coordinate}
+                                    onSelected={() => handleCalloutPress( marker.id )}
                                 >
-                                    <Callout title={marker.number}>
-                                        <ThemedView style={styles.callout}>
-                                            <ThemedText>{marker.description + ' - ' + marker.street}</ThemedText>
-                                        </ThemedView>
-                                    </Callout>
+                                    <>
+                                        <View style={{ width: 50, height: 50 }}>
+                                            <Image
+                                                source={{ uri: marker.marker_image }}
+                                                style={{ width: 50, height: 50 }}
+                                                resizeMode="contain"
+                                            />
+                                        </View>
+
+                                        {/*{activeCalloutId === marker.id && (*/}
+                                        {/*    <Callout title={marker.number}>*/}
+                                        {/*        <ThemedView style={styles.callout}>*/}
+                                        {/*            <ThemedText>{marker.description + ' - ' + marker.street}</ThemedText>*/}
+                                        {/*        </ThemedView>*/}
+                                        {/*    </Callout>*/}
+                                        {/*)}*/}
+                                    </>
                                 </PointAnnotation>
                             ) )}
                         </MapView>