diff --git a/src/components/MapBuilder.tsx b/src/components/MapBuilder.tsx
index 6b4cfe9..e52e00d 100644
--- a/src/components/MapBuilder.tsx
+++ b/src/components/MapBuilder.tsx
@@ -19,15 +19,13 @@ import {
 import SingleSelectComplete from './SingleSelectAutoComplete';
 import { ConfigSaveUploadButtons } from './ConfigSaveUploadButtons';
 
-
-
 export function MapBuilder() {
   const cgpvContext = useContext(CGPVContext);
 
   if (!cgpvContext) {
     throw new Error('CGPVContent must be used within a CGPVProvider');
   }
-
+ 
   const { mapId } = cgpvContext;
   const { configJson, handleApplyStateToConfigFile, handleConfigFileChange, handleConfigJsonChange, configFilePath, mapWidth, mapHeight, setMapWidth, setMapHeight } = cgpvContext;
 
@@ -36,22 +34,17 @@ export function MapBuilder() {
   const [isEn, setEn] = useState<boolean>(true);
 
 
-  const _updateConfigProperty = (property: string, value: any) => {
+  const _updateConfigProperty = (property: string, value: any) => {   
     const newConfig = { ...modifiedConfigJson };
     if (value === undefined) {
       _.unset(newConfig, property);
     } else {
-      _.set(newConfig, property, value);
+      _.set(newConfig, property, value); 
     }
     setModifiedConfigJson(newConfig);
     setIsModified(true);
-
   }
 
-  const getProperty = (property: string, defaultValue = undefined) => {
-    return _.get(configJson, property) ?? defaultValue;
-  };
-
   const updateProperty = (property: string, value: any) => {
     _updateConfigProperty(property, value);
   };
@@ -78,26 +71,32 @@ export function MapBuilder() {
     handleConfigJsonChange(modifiedConfigJson);
     setIsModified(false);
   }
+
+  const getProperty = (property: string, defaultValue?: any) => {
+    return _.get(configJson, property) ?? defaultValue;
+  };
   
   return(
     <Box sx={{ display: 'flex', flexDirection: 'column' }}>
 
+       
+
       <ConfigSaveUploadButtons />
 
       <Divider sx={{ my: 2 }} />
+      
+      <Button variant="contained" color="primary" size="small" onClick={handleApplyStateToConfigFile}>
+        Apply State to Config File
+      </Button>
 
+      <Divider sx={{ my: 2 }} />
+      
       <Button onClick={handleApplyConfigChanges}
         disabled={!isModified}
         variant="contained" color="primary" size="small">
         Apply Config Changes
       </Button>
-
-      <Divider sx={{ my: 2 }} />
-      
-      <Button variant="contained" color="primary" size="small" onClick={handleApplyStateToConfigFile}>
-        Apply State to Config File
-      </Button>
-
+    
       <FormControl component="fieldset" sx={{ mt: 4, gap: 3 }}>
 
         <SingleSelectComplete
@@ -106,6 +105,8 @@ export function MapBuilder() {
           applyGrouping={true}
           onChange={(value) => handleConfigFileChange(value)}
           label="Select Configuration File" placeholder="" />
+        
+        <Divider sx={{ my: 1 }} >Map configuration</Divider>
 
         <FormGroup aria-label="position">
           <FormLabel component="legend">Map Size</FormLabel>
@@ -133,64 +134,62 @@ export function MapBuilder() {
             </FormControl>
           </Box>
         </FormGroup>
-
-         <SingleSelectComplete
+        
+        <SingleSelectComplete
           options={languageOptions}
-          defaultValue={(isEn) ? 'English' : 'French'}
+          defaultValue={(isEn) ? 'en' : 'fr'}
           onChange={(event) => { 
            (isEn) ? cgpv.api.maps[mapId].setLanguage('fr') : cgpv.api.maps[mapId].setLanguage('en');
            setEn(!isEn);
           }}
-        label="Change Language" placeholder="" />
+          label="Map Language" placeholder="" />
 
         <SingleSelectComplete
           options={themeOptions}
-          defaultValue={getProperty('theme')}
+          defaultValue={getProperty('theme','geo.ca')}
           onChange={(value) => updateProperty('theme', value)}
           label="Display Theme" placeholder="" />
 
         <SingleSelectComplete
           options={mapInteractionOptions}
-          defaultValue={getProperty('map.interaction')}
+          defaultValue={getProperty('map.interaction','dynamic')}
           onChange={(value) => updateProperty('map.interaction', value)}
           label="Map Interaction" placeholder="" />
         
+        <Divider sx={{ my: 1 }}>Base map</Divider>
+
         <SingleSelectComplete
           options={basemapOptions}
-          defaultValue={getProperty('map.basemapOptions.basemapId')}
+          defaultValue={getProperty('map.basemapOptions.basemapId','transport')}  
           onChange={(value) => updateProperty('map.basemapOptions.basemapId', value)}
           label="Base Map" placeholder="" />
         
         <SingleSelectComplete
           options={basemapShading}
           defaultValue={Boolean(getProperty('map.basemapOptions.shaded')) ? 'true':'false' }
-          onChange={(value) => {
-            updateProperty('map.basemapOptions.shaded', JSON.parse(value)); 
-            console.log("value of unshaded=",value,"boolean=", JSON.parse(value));
-          }}
+          onChange={(value) => { updateProperty('map.basemapOptions.shaded', JSON.parse(value))}}
           label="Base Map Shaded" placeholder="" />
         
          <SingleSelectComplete
           options={basemapLabelling}
           defaultValue={Boolean(getProperty('map.basemapOptions.labeled')) ? 'true':'false' }
           onChange={(value) => updateProperty('map.basemapOptions.labeled', JSON.parse(value))}
-          label="Base Map Labeled" placeholder="" />
-        
+            label="Base Map Labeled" placeholder="" />
+          
         <FormGroup aria-label="position">
-          <FormLabel component="legend">Zoom Levels</FormLabel>
-
-          <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2 }}>
+            <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2 }}>
             <FormControl>
               <SingleSelectComplete
-                options={zoomOptions}
-                defaultValue={getProperty('map.viewSettings.minZoom')}
+              options={zoomOptions}
+                defaultValue={getProperty('map.viewSettings.minZoom', 0)}
                 onChange={(value) => updateProperty('map.viewSettings.minZoom', value)}
                 label="Min Zoom" placeholder="" />
             </FormControl>
+
             <FormControl>
               <SingleSelectComplete
                 options={zoomOptions}
-                defaultValue={getProperty('map.viewSettings.maxZoom')}
+                defaultValue={getProperty('map.viewSettings.maxZoom', 50)}
                 onChange={(value) => updateProperty('map.viewSettings.maxZoom', value)}
                 label="Max Zoom" placeholder="" />
             </FormControl>
@@ -200,15 +199,17 @@ export function MapBuilder() {
         <FormGroup aria-label="map projection">
           <SingleSelectComplete
             options={mapProjectionOptions}
-            defaultValue={getProperty('map.viewSettings.projection')}
+            defaultValue={ getProperty('map.viewSettings.projection',3978)}
             onChange={(value) => updateProperty('map.viewSettings.projection', value)}
             label="Map Projection" placeholder="" />
         </FormGroup>
+      
+        <Divider sx={{ my: 1 }} >Map components</Divider>
 
         <FormGroup aria-label="Components">
           <FormLabel component="legend">Components</FormLabel>
           <PillsAutoComplete
-            defaultValue={getProperty('components')}
+            defaultValue={ getProperty('components', ['north-arrow', 'overview-map'])}
             onChange={(value) => updateArrayProperty('components', value)}
             options={componentsOptions}
             label="Components Options"
@@ -219,9 +220,9 @@ export function MapBuilder() {
         <FormGroup aria-label="Navigation Bar Options">
           <FormLabel component="legend">Navigation Bar</FormLabel>
           <PillsAutoComplete
-            defaultValue={getProperty('navBar')}
             onChange={(value) => updateArrayProperty('navBar', value)}
-            options={navBarOptions}
+            defaultValue={((getProperty('navBar') !== undefined) && (Array.from(getProperty('navBar')!).length) === 0) ? ['zoom'] : getProperty('navBar', ['zoom', 'home', 'basemap-select', 'fullscreen'])} 
+            options = { navBarOptions }
             label="Options" placeholder="" />
         </FormGroup>
 
@@ -246,7 +247,7 @@ export function MapBuilder() {
             />
           </FormLabel>
           <PillsAutoComplete
-            defaultValue={getProperty('appBar.tabs.core')}
+            defaultValue={getProperty('appBar.tabs.core',["geolocator"])}
             onChange={(value) => updateArrayProperty('appBar.tabs.core', value)}
             options={appBarOptions} label="App-bar Options" placeholder="" />
         </FormGroup>
diff --git a/src/constants.ts b/src/constants.ts
index 755d573..06eecff 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -160,4 +160,4 @@ export const corePackagesOptions: ListOptionType[] = [
   { title: 'Swiper', value: 'swiper' }
 ];
 
-export const zoomOptions: ListOptionType[] = _.range(0, 51).map((value) => ({ title: value.toString(), value }));
+export const zoomOptions: ListOptionType[] =   _.range(0, 51).map((value) => ({ title: value.toString().padStart(2), value }));
\ No newline at end of file
diff --git a/src/providers/cgpvContextProvider/cgpvHook.ts b/src/providers/cgpvContextProvider/cgpvHook.ts
index cf0ca47..17da421 100644
--- a/src/providers/cgpvContextProvider/cgpvHook.ts
+++ b/src/providers/cgpvContextProvider/cgpvHook.ts
@@ -267,7 +267,7 @@ export function useCgpvHook(): ICgpvHook {
       const str = json.replaceAll(`'`, `"`);
       JSON.parse(str);
       cgpv.api.config.createMapConfig(str, 'en');
-    } catch (e: any) { 
+    } catch (e: any) {
       return cgpv.api.utilities.core.escapeRegExp(e.message);
     }
     return null;