diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
index b8795788f..effbefb0a 100644
--- a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
+++ b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
@@ -28,16 +28,28 @@ <h2 class="mb-4" [ngSwitch]="type$ | async">
     
     <div class="numbered-header d-flex justify-content-start bg-light align-items-center py-1">
         <h2 class="title h4 m-0 flex-grow-1">
-            <span class="text ml-2" translate="label.metadata-filters">Metadata Filters</span>
+            <span class="text ml-2" translate="label.metadata-filter">Metadata Filter</span>
         </h2>
     </div>
-    <ng-container>
+    <ng-container *ngIf="!(filterCompare$ | async)">
         <filter-version-list
             class="d-block p-2"
             [filters]="filters$ | async"
             (compare)="compareFilters($event)">
         </filter-version-list>
     </ng-container>
+    <ng-container *ngIf="(filterCompare$ | async)">
+        <br />
+        <metadata-configuration
+            [configuration]="filterCompare$ | async"
+            [editable]="false"></metadata-configuration>
+        <div class="d-flex justify-content-end my-2">
+            <button class="btn btn-success" (click)="resetCompareFilters()">
+                <i class="fa fa-arrow-left" aria-hidden="true"></i>&nbsp;
+                <translate-i18n key="label.filter-versions">Filter Versions</translate-i18n>
+            </button>
+        </div>
+    </ng-container>
     
 </div>
 <div *ngIf="loading$ | async" class="d-flex justify-content-center">
diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
index ba10aa145..e8a905b0d 100644
--- a/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
+++ b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
@@ -7,7 +7,7 @@ import { ConfigurationState, getComparisonConfigurationCount } from '../reducer'
 import { CompareVersionRequest, ClearVersions, ViewChanged } from '../action/compare.action';
 import { MetadataConfiguration, FilterConfiguration } from '../model/metadata-configuration';
 import * as fromReducer from '../reducer';
-import { CompareFilterVersions } from '../action/filter.action';
+import { CompareFilterVersions, ClearFilterComparison } from '../action/filter.action';
 import { FilterComparison } from '../model/compare';
 
 @Component({
@@ -47,16 +47,19 @@ export class MetadataComparisonComponent implements OnDestroy {
             withLatestFrom(this.limited$),
             map(([compare, limit]) => new ViewChanged(!limit))
         ).subscribe(this.store);
-
-        this.filterCompare$.subscribe(console.log);
     }
 
     compareFilters (comparison: FilterComparison) {
         this.store.dispatch(new CompareFilterVersions(comparison));
     }
 
+    resetCompareFilters () {
+        this.store.dispatch(new ClearFilterComparison());
+    }
+
     ngOnDestroy(): void {
         this.sub.unsubscribe();
         this.store.dispatch(new ClearVersions());
+        this.resetCompareFilters();
     }
 }