diff --git a/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.html b/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.html
index 36278454a..316095fb9 100644
--- a/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.html
+++ b/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.html
@@ -88,80 +88,80 @@ <h1>ArcGIS Configuration</h1>
         <mat-card-subtitle>MAGE Field to ArcGIS Attribute mappings.</mat-card-subtitle>
       </mat-card-header>
       <mat-card-content>
-        <form [formGroup]="attributesForm">
+        <form [formGroup]="attributesForm" (ngSubmit)="onSubmit()">
           <div class="edit-attributes-form">
             <div class="observation-id-field">
-              <mat-form-field [style.width.%]="90" appearance="fill">
+              <mat-form-field appearance="fill">
                 <mat-label>Observation Id Field</mat-label>
                 <input type="text" matInput formControlName="observationIdField" />
                 <mat-hint>The ArcGIS layer text field attribute name to store the MAGE observation id</mat-hint>
               </mat-form-field>
             </div>
             <div class="id-separator-field">
-              <mat-form-field [style.width.%]="90" appearance="fill">
+              <mat-form-field appearance="fill">
                 <mat-label>Id Separator</mat-label>
                 <input type="text" matInput formControlName="idSeparator" />
                 <mat-hint>When event id field is not configured, the separator combining observation ids and event ids in the observation id field</mat-hint>
               </mat-form-field>
             </div>
             <div class="event-id-field">
-              <mat-form-field [style.width.%]="90" appearance="fill">
+              <mat-form-field appearance="fill">
                 <mat-label>Event Id Field</mat-label>
                 <input type="text" matInput formControlName="eventIdField" />
                 <mat-hint>The ArcGIS layer integer field attribute name to store the MAGE event id</mat-hint>
               </mat-form-field>
             </div>
             <div class="last-edited-date-field">
-              <mat-form-field [style.width.%]="90" appearance="fill">
+              <mat-form-field appearance="fill">
                 <mat-label>Last Edited Date Field</mat-label>
                 <input type="text" matInput formControlName="lastEditedDateField" />
                 <mat-hint>The last edited date field attribute name on the ArcGIS layer</mat-hint>
               </mat-form-field>
             </div>
             <div class="event-name-field">
-              <mat-form-field [style.width.%]="90" appearance="fill">
+              <mat-form-field appearance="fill">
                 <mat-label>Event Name Field</mat-label>
                 <input type="text" matInput formControlName="eventNameField" />
                 <mat-hint>The ArcGIS layer text field attribute name to store the MAGE event name</mat-hint>
               </mat-form-field>
             </div>
             <div class="user-id-field">
-              <mat-form-field [style.width.%]="90" appearance="fill">
+              <mat-form-field appearance="fill">
                 <mat-label>User Id Field</mat-label>
                 <input type="text" matInput formControlName="userIdField" />
                 <mat-hint>The ArcGIS layer text field attribute name to store the MAGE user id</mat-hint>
               </mat-form-field>
             </div>
             <div class="username-field">
-              <mat-form-field [style.width.%]="90" appearance="fill">
+              <mat-form-field appearance="fill">
                 <mat-label>Username Field</mat-label>
                 <input type="text" matInput formControlName="usernameField" />
                 <mat-hint>The ArcGIS layer text field attribute name to store the MAGE username</mat-hint>
               </mat-form-field>
             </div>
             <div class="user-display-name-field">
-              <mat-form-field [style.width.%]="90" appearance="fill">
+              <mat-form-field appearance="fill">
                 <mat-label>User Display Name Field</mat-label>
                 <input type="text" matInput formControlName="userDisplayNameField" />
                 <mat-hint>The ArcGIS layer text field attribute name to store the MAGE user display name</mat-hint>
               </mat-form-field>
             </div>
             <div class="device-id-field">
-              <mat-form-field [style.width.%]="90" appearance="fill">
+              <mat-form-field appearance="fill">
                 <mat-label>Device Id Field</mat-label>
                 <input type="text" matInput formControlName="deviceIdField" />
                 <mat-hint>The ArcGIS layer text field attribute name to store the MAGE device id</mat-hint>
               </mat-form-field>
             </div>
             <div class="created-at-field">
-              <mat-form-field [style.width.%]="90" appearance="fill">
+              <mat-form-field appearance="fill">
                 <mat-label>Created At Field</mat-label>
                 <input type="text" matInput formControlName="createdAtField" />
                 <mat-hint>The ArcGIS layer date time field attribute name to store the MAGE created at date</mat-hint>
               </mat-form-field>
             </div>
             <div class="last-modified-field">
-              <mat-form-field [style.width.%]="90" appearance="fill">
+              <mat-form-field appearance="fill">
                 <mat-label>Last Modified Field</mat-label>
                 <input type="text" matInput formControlName="lastModifiedField" />
                 <mat-hint>The ArcGIS layer date time field attribute name to store the MAGE last modified date (may be the
@@ -169,7 +169,7 @@ <h1>ArcGIS Configuration</h1>
               </mat-form-field>
             </div>
             <div class="geometry-type-field">
-              <mat-form-field [style.width.%]="90" appearance="fill">
+              <mat-form-field appearance="fill">
                 <mat-label>Geometry Type Field</mat-label>
                 <input type="text" matInput formControlName="geometryType" />
                 <mat-hint>The ArcGIS layer text field attribute name to store the Esri geometry type</mat-hint>
@@ -177,7 +177,7 @@ <h1>ArcGIS Configuration</h1>
             </div>
             <div class="button-group">
               <button mat-raised-button color="primary" type="submit" [disabled]="attributesForm.invalid">Save</button>
-              <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
+              <button mat-button type="button" (click)="onCancel()">Cancel</button>
             </div>
           </div>
         </form>
diff --git a/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.scss b/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.scss
index 995bcb62f..0cd37aa01 100644
--- a/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.scss
+++ b/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.scss
@@ -181,9 +181,9 @@ section {
 }
 
 
-mat-form-field {
+.mat-form-field {
   width: 100%;
-  margin-bottom: 16px;
+  margin-bottom: 32px;
 }
 
 mat-card {
diff --git a/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.ts b/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.ts
index 253fe1e82..c66602f0d 100644
--- a/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.ts
+++ b/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.ts
@@ -72,59 +72,74 @@ export class ArcAdminComponent implements OnInit {
     this.config = config;
     this.configChangedNotifier.next();
   }
-
-  //map attribute form to fields 
+// Visually blank but has underlying value in editConfig
   ngOnInit(): void {
     this.attributesForm = this.fb.group({
-      observationIdField: [this.editConfig.observationIdField],
-      idSeparator: [this.editConfig.idSeparator],
-      eventIdField: [this.editConfig.eventIdField],
-      lastEditedDateField: [this.editConfig.lastEditedDateField],
-      eventNameField: [this.editConfig.eventNameField],
-      userIdField: [this.editConfig.userIdField],
-      usernameField: [this.editConfig.usernameField],
-      userDisplayNameField: [this.editConfig.userDisplayNameField],
-      deviceIdField: [this.editConfig.deviceIdField],
-      createdAtField: [this.editConfig.createdAtField],
-      lastModifiedField: [this.editConfig.lastModifiedField],
-      geometryType: [this.editConfig.geometryType]
+      observationIdField: [''], 
+      idSeparator: [''],
+      eventIdField: [''],
+      lastEditedDateField: [''],
+      eventNameField: [''],
+      userIdField: [''],
+      usernameField: [''],
+      userDisplayNameField: [''],
+      deviceIdField: [''],
+      createdAtField: [''],
+      lastModifiedField: [''],
+      geometryType: ['']
     });
   }
   
-  //save attributes form
+  //Save attributes form. If left blank, assign default value
   onSubmit(): void {
+    console.log('submitting form...');
+
     if (this.attributesForm.valid) {
       const formValue = this.attributesForm.value;
-  
       this.editConfig = {
         ...this.editConfig,
-        observationIdField: formValue.observationIdField,
-        idSeparator: formValue.idSeparator,
-        eventIdField: formValue.eventIdField,
-        lastEditedDateField: formValue.lastEditedDateField,
-        eventNameField: formValue.eventNameField,
-        userIdField: formValue.userIdField,
-        usernameField: formValue.usernameField,
-        userDisplayNameField: formValue.userDisplayNameField,
-        deviceIdField: formValue.deviceIdField,
-        createdAtField: formValue.createdAtField,
-        lastModifiedField: formValue.lastModifiedField,
-        geometryType: formValue.geometryType
-      };
+        observationIdField: formValue.observationIdField || this.editConfig.observationIdField,
+        idSeparator: formValue.idSeparator || this.editConfig.idSeparator,
+        eventIdField: formValue.eventIdField || this.editConfig.eventIdField,
+        lastEditedDateField: formValue.lastEditedDateField || this.editConfig.lastEditedDateField,
+        eventNameField: formValue.eventNameField || this.editConfig.eventNameField,
+        userIdField: formValue.userIdField || this.editConfig.userIdField,
+        usernameField: formValue.usernameField || this.editConfig.usernameField,
+        userDisplayNameField: formValue.userDisplayNameField || this.editConfig.userDisplayNameField,
+        deviceIdField: formValue.deviceIdField || this.editConfig.deviceIdField,
+        createdAtField: formValue.createdAtField || this.editConfig.createdAtField,
+        lastModifiedField: formValue.lastModifiedField || this.editConfig.lastModifiedField,
+        geometryType: formValue.geometryType || this.editConfig.geometryType
+  };
   
       console.log('Form Submitted:', this.editConfig);
+      console.log('formValue: ', formValue);
 
       this.editConfig = this.copyConfig();
       }
+      else{
+        console.log('Form is invalid, please correct the errors.')
+      }
     }
   
-  //when edit attributes is canceled, preserve initial data
+  //when edit attributes is canceled, display and empty form but preserved data in editConfig
   onCancel(): void {
     this.attributesForm.reset({
-      ...this.editConfig
+      observationIdField: '',  
+      idSeparator: '',
+      eventIdField: '',
+      lastEditedDateField: '',
+      eventNameField: '',
+      userIdField: '',
+      usernameField: '',
+      userDisplayNameField: '',
+      deviceIdField: '',
+      createdAtField: '',
+      lastModifiedField: '',
+      geometryType: ''
     });
-
     console.log('Canceled edit');
+    console.log('Current data: ', this.editConfig)
 
   }
   handleEventResults(x: MageEvent[]) {