diff --git a/plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.html b/plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.html
index 61ae84c21..0e09f4862 100644
--- a/plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.html
+++ b/plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.html
@@ -1,45 +1,50 @@
-<div class="arc-event">
-  <mat-card appearance="outlined">
-    <mat-card-header>
-      <mat-card-title>
-        Events 
-      </mat-card-title>
+<div>
+    <mat-card appearance="outlined">
+      <mat-card-title>Events</mat-card-title>
       <mat-card-subtitle>Change the ArcGIS layers each MAGE event sends its observations to.</mat-card-subtitle>
-    </mat-card-header>
     <mat-card-content>
-  <section class="arc-event-sync">
-    <div class="arcEvents" *ngIf="!model.events.length">
-      <div class="arcEvent">
-        There are no events synchronizing to ArcGIS layers.
-      </div>
-    </div>
-    <div class="arcEvents" *ngFor="let event of model.events">
-      <ng-container>
-        <div class="arcEvent">
-          <div class="arcEvent__value">
-            <a href="/#/admin/events/{{event.id}}" target="_blank">{{event.name}}</a>
-          </div>
-          <div class="arcEvent__edit">
-            <button class="edit-button" mat-icon-button (click)="onEditEvent(event)"><mat-icon class="edit-icon" [inline]="true">edit</mat-icon></button>
-          </div>
-        </div>
-        <div class="featureLayers" *ngIf="!event.layers.length">
-          <div class="featureLayer_value">
-            This event is not synchronizing to any ArcGIS layers.
-          </div>
+      <section class="arc-event-sync">
+        <div *ngIf="!model.events.length">
+          There are no events synchronizing to ArcGIS layers.
+          <mat-divider></mat-divider>
         </div>
-        <div class="featureLayers" *ngFor="let featureLayer of event.layers">
-          <div class="featureLayer__value">
-            {{layerDisplay(featureLayer)}}
-          </div>
-        </div>
-      </ng-container>
-    </div>
-  </section>
-</mat-card-content>
-</mat-card>
 
-<ng-template #editEventDialog let-data>
+        <mat-list>
+          <ng-container *ngFor="let event of model.events; let last = last">
+            <mat-list-item class="arcEvent">
+              <div class="arcEvent__info">
+                <div>
+                  {{ event.name }}
+                </div>
+                <div *ngIf="event.layers.length; else noLayers">
+                  <div>
+                    <ng-container *ngFor="let featureLayer of event.layers; let i = index">
+                      {{ layerDisplay(featureLayer) }}<span *ngIf="i < event.layers.length - 1">, </span>
+                    </ng-container>
+                  </div>
+                </div>
+                
+                <ng-template #noLayers>
+                  <div>This event is not synchronizing to any ArcGIS layers.</div>
+                </ng-template>
+              </div>
+              <div class="arcEvent__icons">
+                <a mat-icon-button color="primary" href="/#/admin/events/{{event.id}}" target="_blank">
+                  <mat-icon>open_in_new</mat-icon>
+                </a>
+                <button mat-icon-button color="primary" (click)="onEditEvent(event)">
+                  <mat-icon>edit</mat-icon>
+                </button>
+              </div>
+            </mat-list-item>
+            <mat-divider *ngIf="!last"></mat-divider>
+          </ng-container>
+        </mat-list>        
+      </section>
+    </mat-card-content>
+  </mat-card>
+
+  <ng-template #editEventDialog let-data>
   <h2 matDialogTitle>ArcGIS layers that MAGE event named {{currentEditingEvent.name}} is synchronizing</h2>
   <mat-dialog-content>
     <div class="arc-layers" *ngFor="let arcLayer of layers">
diff --git a/plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.scss b/plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.scss
index 3f476dc3e..af96399be 100644
--- a/plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.scss
+++ b/plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.scss
@@ -1,69 +1,8 @@
-.arc-layer-form {
-    display: flex;
-    flex-direction: column;
-    min-width: 950px;
+.arcEvent__info {
+    flex-grow: 1;
 }
 
-section {
-    >* {
-        margin-inline-start: 1em;
-    }
-
-    header {
-        margin-inline-start: 0;
-
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-            margin-block-end: 0;
-        }
-
-        .subheading {
-            margin-block-start: 0;
-            opacity: 0.5;
-        }
-
-        margin-block-end: 2em;
-    }
-
-    margin-block-start: 2em;
-    margin-block-end: 2em;
-}
-
-.arcEvent {
-    margin-block-start: 1em;
-    display: grid;
-    grid-template-columns: 4fr 1fr;
-    max-width: max-content;
-    margin-bottom: 20px;
-}
-
-.arcEvent__value {
-    grid-column-start: 1;
-}
-
-.arcEvent__edit {
-    grid-column-start: 2;
-    text-align: end;
-}
-
-.featureLayers {
-    display: grid;
-    opacity: 0.5;
-    font-size: 0.9em;
-}
-
-.edit-icon {
-    vertical-align: middle;
-}
-
-.edit-button {
-    opacity: 0.5;
-    font-size: inherit;
-    height: inherit;
-    line-height: inherit;
-    width: inherit;
+.mat-divider {
+    margin-top: 12px;
+    margin-bottom: 12px;
 }
\ No newline at end of file
diff --git a/plugins/arcgis/web-app/projects/showcase/src/app/arc.service.mock.ts b/plugins/arcgis/web-app/projects/showcase/src/app/arc.service.mock.ts
index a908a8ac5..f4b582b96 100644
--- a/plugins/arcgis/web-app/projects/showcase/src/app/arc.service.mock.ts
+++ b/plugins/arcgis/web-app/projects/showcase/src/app/arc.service.mock.ts
@@ -3,31 +3,65 @@ import { Injectable } from '@angular/core'
 import { ArcServiceInterface, FeatureLayer, ValidationRequest } from "../../../main/src/lib/arc.service";
 import { ArcGISPluginConfig, defaultArcGISPluginConfig } from '../../../main/src/lib/ArcGISPluginConfig';
 import { MageEvent } from "../../../main/src/lib/arc.service";
-import { FeatureServiceConfig } from "projects/main/src/lib/ArcGISConfig";
 
-export const mockArcGISEventResult = Object.freeze<MageEvent>({
+export const mockArcGISEventResult1 = Object.freeze<MageEvent>({
   id: 0,
-  name: 'test event result name',
+  name: 'test event result name 1',
   forms: [{
     id: 1,
-    name: 'test form result name',
+    name: 'test form result name 1',
     fields: [{
-      title: 'test field'
+      title: 'test field 1'
     }]
   }]
-})
+});
+
+export const mockArcGISEventResult2 = Object.freeze<MageEvent>({
+  id: 1,
+  name: 'test event result name 2',
+  forms: [{
+    id: 2,
+    name: 'test form result name 2',
+    fields: [{
+      title: 'test field 2'
+    }]
+  }]
+});
+
+export const mockArcGISEventResult3 = Object.freeze<MageEvent>({
+  id: 2,
+  name: 'test event result name 3',
+  forms: [{
+    id: 3,
+    name: 'test form result name 3',
+    fields: [{
+      title: 'test field 3'
+    }]
+  }]
+});
 
 @Injectable({
   providedIn: 'root'
 })
+
 export class MockArcService implements ArcServiceInterface {
   fetchFeatureServiceLayers(featureServiceUrl: string): Observable<FeatureLayer[]> {
-    return of([{
-      id: 0,
-      name: 'mock_arcgis_layer',
-      geometryType: 'point'
-    }])
+    return of([
+      {
+        id: 1,
+        name: 'Layer 1',
+        geometryType: 'esriGeometryPoint',
+        events: ['test event result name 1', 'test event result name 2']
+      },
+      {
+        id: 2,
+        name: 'Layer 2',
+        geometryType: 'esriGeometryPolygon',
+        events: ['test event result name 2']
+      }
+    ]);
   }
+
   fetchArcConfig(): Observable<ArcGISPluginConfig> {
     return of({
       enabled: true,
@@ -36,21 +70,21 @@ export class MockArcService implements ArcServiceInterface {
       startupIntervalSeconds: 1,
       updateIntervalSeconds: 1,
       batchSize: 100,
-      featureServices: [{
-        url: 'https://arcgis.mock.com/1',
-        authenticated: false,
-        layers: [{
-          layer: 'Mock ArcGIS Layer 1'
-        },{
-          layer: 'Mock ArcGIS Layer 2'
-        }]
-      },{
-        url: 'https://arcgis.mock.com/2',
-        authenticated: true,
-        layers: [{
-          layer: 'Mock ArcGIS Layer 1'
-        }]
-      }],
+      featureServices: [
+        {
+          url: 'https://mock.service.com/FeatureServer/0',
+          layers: [
+            {
+              layer: 'Layer 1',
+              events: ['test event result name 1', 'test event result name 2']
+            },
+            {
+              layer: 'Layer 2',
+              events: ['test event result name 2']
+            }
+          ]
+        }
+      ],
       attachmentModifiedTolerance: 5000,
       textFieldLength: 100,
       textAreaFieldLength: 256,
@@ -91,36 +125,32 @@ export class MockArcService implements ArcServiceInterface {
   fetchArcLayers(featureUrl: string) {
     return of({
       layers: [
-          {
-            id: 0, 
-            name: 'mage_sync', 
-            geometryType: 'esriGeometryPoint'
-          },
-        ]
-      }
-    )
+        {
+          id: 0,
+          name: 'mage_sync',
+          geometryType: 'esriGeometryPoint'
+        },
+      ]
+    }
+   )
   }
 
   fetchEvents() {
-    return of([mockArcGISEventResult])
+    return of([mockArcGISEventResult1, mockArcGISEventResult2, mockArcGISEventResult3]);
   }
 
   fetchPopulatedEvents() {
-    return of([mockArcGISEventResult])
+    return of([mockArcGISEventResult1, mockArcGISEventResult2, mockArcGISEventResult3]);
   }
 
   putArcConfig(config: ArcGISPluginConfig) {}
 
   removeUserTrack(userTrackId: string): Observable<ArcGISPluginConfig> {
-    return of(
-      defaultArcGISPluginConfig
-    )
+    return of(defaultArcGISPluginConfig);
   }
 
   removeOperation(operationId: string): Observable<ArcGISPluginConfig> {
-    return of(
-      defaultArcGISPluginConfig
-    )
+    return of(defaultArcGISPluginConfig);
   }
 
   validateFeatureService(request: ValidationRequest): Observable<FeatureServiceConfig> {