diff --git a/src/core/components/MapInfoTwoMarker.jsx b/src/core/components/MapInfoTwoMarker.jsx
index daac893..5034cb7 100644
--- a/src/core/components/MapInfoTwoMarker.jsx
+++ b/src/core/components/MapInfoTwoMarker.jsx
@@ -23,8 +23,8 @@ const createCustomIcon = (size, iconUrl, labelText, color) => {
                     </div>
                     <div style="width: 5px; height: 20px; background: ${color}; margin: auto;border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;"></div>
                   </div>`,
-            iconSize: [100, 50], // Adjust icon size to fit your content
-            iconAnchor: [50, 25], // Adjust to position the marker correctly
+            iconSize: [50, 50],
+            iconAnchor: [25, 50],
         });
     }
     return L.icon({
@@ -111,6 +111,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
                             setStartPosition({ lat: center.lat, lng: center.lng });
                             setIsStartLocked(true);
                             setStartIconColor("#1CAC66");
+                            map.panBy([25, 25])
                         }
                     },
                 }}
@@ -182,6 +183,13 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
                                     setEndPosition({ lat: center.lat, lng: center.lng });
                                     setIsEndLocked(true);
                                     setEndIconColor("#D13131");
+                                    map.fitBounds(
+                                        [
+                                            startPosition,
+                                            map.getCenter(),
+                                        ],
+                                        { paddingTopLeft: [16, 16], paddingBottomRight: [16, 16] }
+                                    );
                                 }
                             },
                         }}