diff --git a/fleet_management/fleet_management/doctype/trip/trip_list.js b/fleet_management/fleet_management/doctype/trip/trip_list.js
index 7bbe802..05f0343 100644
--- a/fleet_management/fleet_management/doctype/trip/trip_list.js
+++ b/fleet_management/fleet_management/doctype/trip/trip_list.js
@@ -8,7 +8,7 @@ function loadLeafletAndInitMap(frm, callback) {
 function create_dialog_and_init_map(frm) {
     const dialog = new frappe.ui.Dialog({
         title: 'Show Route',
-        fields: [{ fieldtype: 'HTML', fieldname: 'map_html', label: 'Map', options: '<div id="map" style="width:100%;height:100%;"></div>' }],
+        fields: [{ fieldtype: 'HTML', fieldname: 'map_html', label: 'Map', options: '<div id="map" style="height:calc(80vh - 20px);"></div>' }],
         primary_action_label: 'Close',
         primary_action() {
             if (currentMap) {
@@ -16,15 +16,17 @@ function create_dialog_and_init_map(frm) {
                 currentMap = null;  // unset the reference
             }
             dialog.hide();
-        }
+        },
+        size: 'extra-large'
     });
 
     // Adjust the size of the dialog dynamically to 80% of the browser window
-    const modalContent = dialog.$wrapper.find('.modal-content');
-    modalContent.css("width", "80vw");
-    modalContent.css("height", "80vh");
-    modalContent.css("max-width", "none"); // Ensure no max-width restrictions
-    modalContent.css("margin", "auto"); // Center the modal
+    const modalDialog = dialog.$wrapper.find('.modal-content');
+    modalDialog.css({
+	"width": "85vw",
+        "max-width": "85vw",
+	"margin-left": "-25vh"
+    });
 
     // Add hide event to reload the page when the dialog is closed
     dialog.onhide = function () {
@@ -32,22 +34,13 @@ function create_dialog_and_init_map(frm) {
     };
 
     dialog.show();
-
-    // Ensure the map container expands to fit its parent after the dialog is shown
-    setTimeout(() => {
-        const mapElement = document.getElementById('map');
-        if (mapElement) {
-            mapElement.style.width = "100%";
-            mapElement.style.height = "100%";
-            init_map(frm); // Initialize the map
-        }
-    }, 500); // Add a delay to ensure the map loads correctly
+    setTimeout(() => init_map(frm), 500); // Add a delay to ensure the map loads correctly
 }
 
 var currentMap = null;
 
 function init_map(frm) {
-    //console.table(window.L);
+    console.table(window.L);
     console.log("Initializing map with MyLeaflet...");
     if (currentMap !== null) {
         currentMap.remove();  // Remove the previous map if it exists
@@ -94,7 +87,7 @@ function init_map(frm) {
         },
         callback: function (r) {
             if (r.message) {
-                //console.table(r.message);
+                console.table(r.message);
                 const data = r.message;
                 const routeCoordinates = data.map(entry => [entry.latitude, entry.longitude]);
                 const polyline = window.L.polyline(routeCoordinates, { color: 'red' }).addTo(map);