diff --git a/resident-ui/src/app/app-config.service.ts b/resident-ui/src/app/app-config.service.ts
index d0b9ecbf..22e7242d 100644
--- a/resident-ui/src/app/app-config.service.ts
+++ b/resident-ui/src/app/app-config.service.ts
@@ -66,7 +66,10 @@ export class AppConfigService {
         this.appConfig["mosip.kernel.uin.length"] = responseData["mosip.kernel.uin.length"];
         this.appConfig["mosip.kernel.rid.length"] = responseData["mosip.kernel.rid.length"];   
         this.appConfig["mosip.resident.transliteration.transliterate.id"] = responseData["mosip.resident.transliteration.transliterate.id"];
-        this.appConfig["resident.contact.details.update.id"] = responseData["resident.contact.details.update.id"]
+        this.appConfig["resident.contact.details.update.id"] = responseData["resident.contact.details.update.id"];
+        this.appConfig["mosip.resident.zoom"] = responseData["mosip.resident.zoom"];
+        this.appConfig["mosip.resident.maxZoom"] = responseData["mosip.resident.maxZoom"];
+        this.appConfig["mosip.resident.minZoom"] = responseData["mosip.resident.minZoom"];
         localStorage.setItem("isDataLoaded", 'true')
       },
       (error) => {
diff --git a/resident-ui/src/app/feature/booking/center-selection/center-selection.component.html b/resident-ui/src/app/feature/booking/center-selection/center-selection.component.html
index 06eb3826..a8fe929b 100644
--- a/resident-ui/src/app/feature/booking/center-selection/center-selection.component.html
+++ b/resident-ui/src/app/feature/booking/center-selection/center-selection.component.html
@@ -59,7 +59,7 @@
                       <img alt="" class="save-icon" src="./assets/icons/iconfont/download-1.svg" />
                     </button>
                     &nbsp;
-                    <button *ngIf="REGISTRATION_CENTRES.length >0" class="show-map-btn" (click)="showAllCenters()">{{ popupMessages.centerSelection.showMapBtnLabel }}</button>
+                    <button *ngIf="REGISTRATION_CENTRES?.length >0" class="show-map-btn" (click)="showAllCenters()">{{ popupMessages.centerSelection.showMapBtnLabel }}</button>
                   </div>
                 </div>
               </form>
diff --git a/resident-ui/src/app/feature/booking/map/map.component.ts b/resident-ui/src/app/feature/booking/map/map.component.ts
index d2948359..884886dd 100644
--- a/resident-ui/src/app/feature/booking/map/map.component.ts
+++ b/resident-ui/src/app/feature/booking/map/map.component.ts
@@ -11,6 +11,7 @@ import { Icon, Style } from 'ol/style';
 
 import { fromLonLat, addCommon as addCommonProjections } from 'ol/proj';
 import { BookingService } from '../booking.service';
+import { AppConfigService } from 'src/app/app-config.service';
 
 @Component({
   selector: 'app-map',
@@ -31,13 +32,16 @@ export class MapComponent implements OnInit {
   url: string;
   centers: any;
   markers = [];
+  zoom:number = 14;
+  minZoom:number = 5;
+  maxZoom:number = 18;
 
   googleMapsUrl =
     'https://maps.google.com/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i375060738!3m9!2spl!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0';
 
   OSM_URL = 'https://tile.osm.org/{z}/{x}/{y}.png';
 
-  constructor(private service: BookingService) {}
+  constructor(private service: BookingService,private appConfigService: AppConfigService) {}
 
   ngOnInit() {
     if (this.mapProvider === 'OSM') {
@@ -61,6 +65,13 @@ export class MapComponent implements OnInit {
   }
 
   createMap() {
+    if (this.appConfigService.getConfig()["mosip.resident.zoom"] && this.appConfigService.getConfig()["mosip.resident.minZoom"] && this.appConfigService.getConfig()["mosip.resident.maxZoom"]) {
+      this.zoom = Number(this.appConfigService.getConfig()["mosip.resident.zoom"]);
+      this.minZoom = Number(this.appConfigService.getConfig()["mosip.resident.minZoom"]);
+      this.maxZoom = Number(this.appConfigService.getConfig()["mosip.resident.maxZoom"]);
+    }
+
+
     addCommonProjections();
     for (let i in this.centers) {
       this.marker = new OlFeature({
@@ -99,12 +110,11 @@ export class MapComponent implements OnInit {
     });
 
     /* View and map */
-
     this.view = new OlView({
       center: fromLonLat(this.lonLat),
-      zoom: 14,                        // Set the zoom level manually
-      maxZoom: 12,
-      minZoom: 5,
+      zoom: this.zoom,    // Set the zoom level manually
+      maxZoom: this.maxZoom,
+      minZoom: this.minZoom,
       zoomControl: false,
       scaleControl: false,
       scrollwheel: false,