diff --git a/ui/src/app/metadata/configuration/component/filter-version-list.component.html b/ui/src/app/metadata/configuration/component/filter-version-list.component.html
new file mode 100644
index 000000000..4047f7483
--- /dev/null
+++ b/ui/src/app/metadata/configuration/component/filter-version-list.component.html
@@ -0,0 +1,110 @@
+<ng-container *ngIf="filters.dates.length > 0">
+    <div class="d-flex border-bottom border-light border-2 py-2">
+        <span [ngStyle]="{'width.%': width}" *ngIf="!comparing">Order</span>
+        <span [ngStyle]="{'width.%': width}" *ngIf="comparing">Option</span>
+        <strong *ngFor="let date of filters.dates" [ngStyle]="{'width.%': width}">
+            {{ date | date:'medium' }}
+        </strong>
+    </div>
+    <ng-container *ngIf="!comparing">
+        <div class="">
+            <ng-container *ngFor="let version of filters.filters; let i = index; first as isFirst; last as isLast;"
+                class="list-group-item">
+                <div class="d-flex border-bottom border-light">
+                    <div [ngStyle]="{'width.%': width}" class="py-2">
+                        {{ i + 1 }}
+                    </div>
+                    <div *ngFor="let filter of version; let i = index; even as isEven"
+                        [ngStyle]="{'width.%': width}"
+                        class="border-primary p-2 d-flex align-items-center"
+                        [ngClass]="{'bg-lighter': isEven && selected !== filter.id, 'bg-primary-light': selected === filter.id}">
+                        <div class="w-50">
+                            <p>{{ filter.name }}</p>
+                            <p class="mb-0 text-muted">{{ filter.type }}</p>
+                        </div>
+                        <button class="btn btn-link mx-auto"
+                            *ngIf="filter.comparable"
+                            (click)="selected = (selected !== filter.id) ? filter.id : null">
+                            <i class="fa fa-lg"
+                                [ngClass]="{'fa-check-square-o': selected === filter.id, 'fa-square-o': selected !== filter.id}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">Compare</span>
+                        </button>
+                    </div>
+                </div>
+            </ng-container>
+        </div>
+        <div class="d-flex justify-content-end my-2">
+            <button class="btn btn-primary" [disabled]="!selected" (click)="compare(selected)">
+                <translate-i18n key="label.compare-selected">Compare Selected</translate-i18n>
+            </button>
+        </div>
+    </ng-container>
+    <ng-container *ngIf="comparing">
+        <div class="d-flex border-bottom border-light py-2">
+            <span class="d-block"
+                role="term"
+                [ngStyle]="{'width.%': width}">Type</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">EntityAttributesFilter</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">EntityAttributesFilter</span>
+        </div>
+        <div class="d-flex border-bottom border-light py-2">
+            <span class="d-block"
+                role="term"
+                [ngStyle]="{'width.%': width}">Name</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">Test Filter 1</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">Renamed Filter</span>
+        </div>
+        <div class="d-flex border-bottom border-light py-2">
+            <span class="d-block"
+                role="term"
+                [ngStyle]="{'width.%': width}">Target Type</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">Entity ID</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">Entity ID</span>
+        </div>
+        <div class="d-flex border-bottom border-light py-2">
+            <span class="d-block"
+                role="term"
+                [ngStyle]="{'width.%': width}">Target Value</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">http://idp.unicon.net/idp/shibboleth</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">http://idp.unicon.net/idp/shibboleth</span>
+        </div>
+        <div class="d-flex border-bottom border-light py-2">
+            <span class="d-block"
+                role="term"
+                [ngStyle]="{'width.%': width}">Enabled?</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">false</span>
+            <span class="d-block"
+                role="definition"
+                [ngStyle]="{'width.%': width}">true</span>
+        </div>
+        <div class="d-flex justify-content-end my-2">
+            <button class="btn btn-success" (click)="comparing = null">
+                <i class="fa fa-arrow-left" aria-hidden="true"></i>
+                Filter Versions
+            </button>
+        </div>
+    </ng-container>
+</ng-container>
+<div class="alert alert-info m-4" *ngIf="filters && filters.dates.length < 1">
+    <h3 translate="message.no-filters">No Filters</h3>
+    <p translate="message.no-filters-added">No filters have been added to this Metadata Provider</p>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/metadata/configuration/component/filter-version-list.component.ts b/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
new file mode 100644
index 000000000..2411aa872
--- /dev/null
+++ b/ui/src/app/metadata/configuration/component/filter-version-list.component.ts
@@ -0,0 +1,73 @@
+import { Component } from '@angular/core';
+
+const data = {
+    dates: ['2019-08-08T08:40:32.015', '2019-08-08T08:40:19.266'],
+    filters: [
+        [
+            {
+                id: '1',
+                name: 'Example Filter 1',
+                type: 'EntityAttributesFilter',
+                comparable: true
+            },
+            {
+                id: '2',
+                name: 'Example Filter 2',
+                type: 'NameIdFilter',
+                comparable: true
+            }
+        ],
+        [
+            {
+                id: '2',
+                name: 'Example Filter 2',
+                type: 'NameIdFilter',
+                comparable: true
+            },
+            {
+                id: '1',
+                name: 'Example Filter 1',
+                type: 'EntityAttributesFilter',
+                comparable: true
+            }
+        ],
+        [
+            {
+                id: '4',
+                name: 'Example Filter 4',
+                type: 'EntityAttributesFilter',
+                comparable: false
+            },
+            {
+                id: '3',
+                name: 'Example Filter 3',
+                type: 'EntityAttributesFilter',
+                comparable: false
+            }
+        ]
+    ]
+};
+
+@Component({
+    selector: 'filter-version-list',
+    templateUrl: './filter-version-list.component.html'
+})
+export class FilterVersionListComponent {
+
+    filters = data;
+    selected: string;
+    comparing: string;
+
+    constructor() {
+
+    }
+
+    compare(id: string): void {
+        this.comparing = id;
+    }
+
+    get width(): string {
+        const columns = this.filters.dates.length;
+        return `${Math.floor(100 / (columns + 1))}`;
+    }
+}
diff --git a/ui/src/app/metadata/configuration/configuration.module.ts b/ui/src/app/metadata/configuration/configuration.module.ts
index ae332ddf3..19f967fd1 100644
--- a/ui/src/app/metadata/configuration/configuration.module.ts
+++ b/ui/src/app/metadata/configuration/configuration.module.ts
@@ -44,6 +44,7 @@ import { RestoreEditComponent } from './container/restore-edit.component';
 import { RestoreEditStepComponent } from './container/restore-edit-step.component';
 
 import { IndexResolver } from './service/index-resolver.service';
+import { FilterVersionListComponent } from './component/filter-version-list.component';
 
 @NgModule({
     declarations: [
@@ -67,7 +68,8 @@ import { IndexResolver } from './service/index-resolver.service';
         VersionOptionsComponent,
         MetadataEditorComponent,
         RestoreEditComponent,
-        RestoreEditStepComponent
+        RestoreEditStepComponent,
+        FilterVersionListComponent
     ],
     entryComponents: [],
     imports: [
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 5c93f5ec7..fd990d79e 100644
--- a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
+++ b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
@@ -25,6 +25,7 @@ <h2 class="mb-4" [ngSwitch]="type$ | async">
     <metadata-configuration
         [configuration]="versions$ | async"
         [editable]="false"></metadata-configuration>
+    <filter-version-list class="d-block p-2"></filter-version-list>
 </div>
 <div *ngIf="loading$ | async" class="d-flex justify-content-center">
     <i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i>
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 06f821633..78fc1bcf6 100644
--- a/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
+++ b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
@@ -8,6 +8,7 @@ import { CompareVersionRequest, ClearVersions, ViewChanged } from '../action/com
 import { MetadataConfiguration } from '../model/metadata-configuration';
 import * as fromReducer from '../reducer';
 
+
 @Component({
     selector: 'metadata-comparison',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -25,6 +26,7 @@ export class MetadataComparisonComponent implements OnDestroy {
     limited$: Observable<boolean> = this.store.select(fromReducer.getViewChangedOnly);
     sub: Subscription;
 
+
     constructor(
         private store: Store<ConfigurationState>,
         private activatedRoute: ActivatedRoute
@@ -39,8 +41,6 @@ export class MetadataComparisonComponent implements OnDestroy {
         this.numVersions$ = this.store.select(getComparisonConfigurationCount);
         this.type$ = this.store.select(fromReducer.getConfigurationModelType);
 
-        this.versions$.subscribe(console.log);
-
         this.sub = this.limiter.pipe(
             withLatestFrom(this.limited$),
             map(([compare, limit]) => new ViewChanged(!limit))
diff --git a/ui/src/theme/utility.scss b/ui/src/theme/utility.scss
index 0f8bea642..4fc7539cc 100644
--- a/ui/src/theme/utility.scss
+++ b/ui/src/theme/utility.scss
@@ -6,6 +6,10 @@
     background: #FAFAFA !important;
 }
 
+.bg-primary-light {
+    background: lighten($brand-primary, 75%);
+}
+
 .w-15 {
     width: 15%;
 }