diff --git a/ui/src/app/metadata/configuration/action/compare.action.ts b/ui/src/app/metadata/configuration/action/compare.action.ts
new file mode 100644
index 000000000..5bb5e2699
--- /dev/null
+++ b/ui/src/app/metadata/configuration/action/compare.action.ts
@@ -0,0 +1,47 @@
+import { Action } from '@ngrx/store';
+import { MetadataHistory } from '../model/history';
+import { MetadataVersion } from '../model/version';
+import { Metadata } from '../../domain/domain.type';
+
+export enum CompareActionTypes {
+    COMPARE_METADATA_REQUEST = '[Compare Version] Compare Version Request',
+    COMPARE_METADATA_SUCCESS = '[Compare Version] Compare Version Success',
+    COMPARE_METADATA_ERROR = '[Compare Version] Compare Version Error',
+    SET_VERSIONS = '[Compare Version] Set Versions',
+    CLEAR_VERSIONS = '[Compare Version] Clear Versions'
+}
+
+export class CompareVersionRequest implements Action {
+    readonly type = CompareActionTypes.COMPARE_METADATA_REQUEST;
+
+    constructor(public payload: MetadataVersion[]) { }
+}
+
+export class CompareVersionSuccess implements Action {
+    readonly type = CompareActionTypes.COMPARE_METADATA_SUCCESS;
+
+    constructor(public payload: MetadataHistory) { }
+}
+
+export class CompareVersionError implements Action {
+    readonly type = CompareActionTypes.COMPARE_METADATA_ERROR;
+
+    constructor(public payload: any) { }
+}
+
+export class SetMetadataVersions implements Action {
+    readonly type = CompareActionTypes.SET_VERSIONS;
+
+    constructor(public payload: Metadata[]) { }
+}
+
+export class ClearVersions implements Action {
+    readonly type = CompareActionTypes.CLEAR_VERSIONS;
+}
+
+export type CompareActionsUnion =
+    | CompareVersionRequest
+    | CompareVersionSuccess
+    | CompareVersionError
+    | SetMetadataVersions
+    | ClearVersions;
diff --git a/ui/src/app/metadata/configuration/configuration.module.ts b/ui/src/app/metadata/configuration/configuration.module.ts
index dc291952c..05fa99298 100644
--- a/ui/src/app/metadata/configuration/configuration.module.ts
+++ b/ui/src/app/metadata/configuration/configuration.module.ts
@@ -2,7 +2,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
-
+import { RouterModule } from '@angular/router';
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { I18nModule } from '../../i18n/i18n.module';
@@ -15,7 +15,6 @@ import { ConfigurationPropertyComponent } from './component/configuration-proper
 import { PrimitivePropertyComponent } from './component/primitive-property.component';
 import { ObjectPropertyComponent } from './component/object-property.component';
 import { ArrayPropertyComponent } from './component/array-property.component';
-import { RouterModule } from '@angular/router';
 import { MetadataOptionsComponent } from './container/metadata-options.component';
 import { MetadataXmlComponent } from './container/metadata-xml.component';
 import { MetadataHeaderComponent } from './component/metadata-header.component';
@@ -24,6 +23,8 @@ import { MetadataHistoryService } from './service/history.service';
 import { MetadataHistoryComponent } from './container/metadata-history.component';
 import { HistoryListComponent } from './component/history-list.component';
 import { DomainModule } from '../domain/domain.module';
+import { MetadataComparisonComponent } from './container/metadata-comparison.component';
+import { CompareVersionEffects } from './effect/compare.effect';
 
 @NgModule({
     declarations: [
@@ -37,7 +38,8 @@ import { DomainModule } from '../domain/domain.module';
         ConfigurationComponent,
         MetadataHeaderComponent,
         MetadataHistoryComponent,
-        HistoryListComponent
+        HistoryListComponent,
+        MetadataComparisonComponent
     ],
     entryComponents: [],
     imports: [
@@ -66,7 +68,12 @@ export class MetadataConfigurationModule {
     imports: [
         MetadataConfigurationModule,
         StoreModule.forFeature('metadata-configuration', fromConfig.reducers),
-        EffectsModule.forFeature([MetadataConfigurationEffects, MetadataHistoryEffects])
+        EffectsModule.forFeature(
+            [
+                MetadataConfigurationEffects,
+                MetadataHistoryEffects,
+                CompareVersionEffects
+            ])
     ],
     providers: []
 })
diff --git a/ui/src/app/metadata/configuration/configuration.routing.ts b/ui/src/app/metadata/configuration/configuration.routing.ts
index d27b29872..0a77b0c2b 100644
--- a/ui/src/app/metadata/configuration/configuration.routing.ts
+++ b/ui/src/app/metadata/configuration/configuration.routing.ts
@@ -3,6 +3,7 @@ import { ConfigurationComponent } from './container/configuration.component';
 import { MetadataOptionsComponent } from './container/metadata-options.component';
 import { MetadataXmlComponent } from './container/metadata-xml.component';
 import { MetadataHistoryComponent } from './container/metadata-history.component';
+import { MetadataComparisonComponent } from './container/metadata-comparison.component';
 
 export const ConfigurationRoutes: Routes = [
     {
@@ -24,6 +25,10 @@ export const ConfigurationRoutes: Routes = [
             {
                 path: 'history',
                 component: MetadataHistoryComponent
+            },
+            {
+                path: 'compare',
+                component: MetadataComparisonComponent
             }
         ]
     }
diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.spec.ts b/ui/src/app/metadata/configuration/container/metadata-comparison.component.spec.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
new file mode 100644
index 000000000..ee2c64e0e
--- /dev/null
+++ b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
@@ -0,0 +1,24 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { ConfigurationState, getVersionCollection } from '../reducer';
+import { Metadata } from '../../domain/domain.type';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+    selector: 'metadata-comparison',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './metadata-comparison.component.html',
+    styleUrls: []
+})
+export class MetadataComparisonComponent {
+
+    versions$: Observable<Metadata[]>;
+
+    constructor(
+        private store: Store<ConfigurationState>,
+        private activatedRoute: ActivatedRoute
+    ) {
+        this.activatedRoute.queryParams.subscribe(versions => console.log(versions));
+    }
+}
diff --git a/ui/src/app/metadata/configuration/container/metadata-history.component.html b/ui/src/app/metadata/configuration/container/metadata-history.component.html
index 225912756..2bcc27fe5 100644
--- a/ui/src/app/metadata/configuration/container/metadata-history.component.html
+++ b/ui/src/app/metadata/configuration/container/metadata-history.component.html
@@ -1,3 +1,5 @@
 <div class="container">
-    <history-list [history]="history$ | async"></history-list>
+    <history-list
+        [history]="history$ | async"
+        (compare)="compareVersions($event)"></history-list>
 </div>
diff --git a/ui/src/app/metadata/configuration/container/metadata-history.component.ts b/ui/src/app/metadata/configuration/container/metadata-history.component.ts
index 6fb60bdb9..636385077 100644
--- a/ui/src/app/metadata/configuration/container/metadata-history.component.ts
+++ b/ui/src/app/metadata/configuration/container/metadata-history.component.ts
@@ -3,6 +3,7 @@ import { Observable } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { ConfigurationState, getVersionCollection } from '../reducer';
 import { MetadataVersion } from '../model/version';
+import { CompareVersionRequest } from '../action/compare.action';
 
 @Component({
     selector: 'metadata-history',
@@ -19,4 +20,8 @@ export class MetadataHistoryComponent {
     ) {
         this.history$ = this.store.select(getVersionCollection);
     }
+
+    compareVersions(versions: MetadataVersion[]): void {
+        this.store.dispatch(new CompareVersionRequest(versions));
+    }
 }
diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.html b/ui/src/app/metadata/configuration/container/metadata-options.component.html
index 0825b10d4..9c4dbb489 100644
--- a/ui/src/app/metadata/configuration/container/metadata-options.component.html
+++ b/ui/src/app/metadata/configuration/container/metadata-options.component.html
@@ -4,13 +4,11 @@
         [version]="version$ | async"
         [versionNumber]="versionNumber$ | async"
         [isCurrent]="isCurrent$ | async"></metadata-header>
-    <div class="px-3 my-3 d-flex justify-content-end">
-        <!--
+    <div class="px-3 my-3 d-flex justify-content-between">
         <a class="btn btn-link" routerLink="../history">
             <i class="fa fa-history sr-hidden"></i>&nbsp;
             <translate-i18n key="action.version-history">Version History</translate-i18n>
         </a>
-        -->
         <div class="btn-group">
             <a class="btn" routerLink="../options" routerLinkActive="btn-primary" translate="action.options">Options</a>
             <a class="btn" routerLink="../xml" routerLinkActive="btn-primary" translate="action.xml">XML</a>
diff --git a/ui/src/app/metadata/configuration/effect/compare.effect.ts b/ui/src/app/metadata/configuration/effect/compare.effect.ts
new file mode 100644
index 000000000..4b8b08a59
--- /dev/null
+++ b/ui/src/app/metadata/configuration/effect/compare.effect.ts
@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { switchMap, catchError, tap, withLatestFrom } from 'rxjs/operators';
+import { of } from 'rxjs';
+import { MetadataHistoryService } from '../service/history.service';
+import { CompareVersionRequest, CompareActionTypes } from '../action/compare.action';
+import { Store } from '@ngrx/store';
+import { State, getConfigurationModel } from '../reducer';
+import { ActivatedRoute, RouterState, RouterStateSnapshot } from '@angular/router';
+
+@Injectable()
+export class CompareVersionEffects {
+
+    @Effect({dispatch: false})
+    compareVersionRequest$ = this.actions$.pipe(
+        ofType<CompareVersionRequest>(CompareActionTypes.COMPARE_METADATA_REQUEST),
+        withLatestFrom(
+            this.store.select(getConfigurationModel)
+        ),
+        tap((data) => console.log(data, '@type' in data[1]))
+    );
+
+    constructor(
+        private historyService: MetadataHistoryService,
+        private store: Store<State>,
+        private actions$: Actions
+    ) { }
+}
diff --git a/ui/src/app/metadata/configuration/reducer/compare.reducer.ts b/ui/src/app/metadata/configuration/reducer/compare.reducer.ts
new file mode 100644
index 000000000..a703875af
--- /dev/null
+++ b/ui/src/app/metadata/configuration/reducer/compare.reducer.ts
@@ -0,0 +1,30 @@
+import { CompareActionTypes, CompareActionsUnion } from '../action/compare.action';
+import { Metadata } from '../../domain/domain.type';
+
+export interface State {
+    models: Metadata[];
+    loaded: Boolean;
+}
+
+export const initialState: State = {
+    models: [],
+    loaded: false
+};
+
+export function reducer(state = initialState, action: CompareActionsUnion): State {
+    switch (action.type) {
+        case CompareActionTypes.SET_VERSIONS:
+            return {
+                ...state,
+                models: action.payload,
+                loaded: true
+            };
+        case CompareActionTypes.CLEAR_VERSIONS:
+            return {
+                ...initialState
+            };
+        default: {
+            return state;
+        }
+    }
+}
diff --git a/ui/src/app/metadata/configuration/reducer/index.ts b/ui/src/app/metadata/configuration/reducer/index.ts
index 702e731f4..470442b76 100644
--- a/ui/src/app/metadata/configuration/reducer/index.ts
+++ b/ui/src/app/metadata/configuration/reducer/index.ts
@@ -3,6 +3,7 @@ import { createSelector, createFeatureSelector } from '@ngrx/store';
 import * as fromRoot from '../../../app.reducer';
 import * as fromConfiguration from './configuration.reducer';
 import * as fromHistory from './history.reducer';
+import * as fromCompare from './compare.reducer';
 import { WizardStep } from '../../../wizard/model';
 
 import * as utils from '../../domain/utility/configuration';
@@ -12,11 +13,13 @@ import { getInCollectionFn } from '../../domain/domain.util';
 export interface ConfigurationState {
     configuration: fromConfiguration.State;
     history: fromHistory.HistoryState;
+    compare: fromCompare.State;
 }
 
 export const reducers = {
     configuration: fromConfiguration.reducer,
-    history: fromHistory.reducer
+    history: fromHistory.reducer,
+    compare: fromCompare.reducer
 };
 
 export interface State extends fromRoot.State {
@@ -27,6 +30,7 @@ export const getState = createFeatureSelector<ConfigurationState>('metadata-conf
 
 export const getConfigurationStateFn = (state: ConfigurationState) => state.configuration;
 export const getHistoryStateFn = (state: ConfigurationState) => state.history;
+export const getCompareStateFn = (state: ConfigurationState) => state.compare;
 
 export const getConfigurationState = createSelector(getState, getConfigurationStateFn);
 export const getConfigurationModel = createSelector(getConfigurationState, fromConfiguration.getModel);
@@ -83,3 +87,7 @@ export const getSelectedIsCurrent = createSelector(
         return selected ? collection[0].id === selected.id : null;
     }
 );
+
+// Version Comparison
+
+export const getCompareState = createSelector(getState, getCompareStateFn);
diff --git a/ui/src/app/metadata/configuration/service/history.service.ts b/ui/src/app/metadata/configuration/service/history.service.ts
index 3125c2091..2e55db65b 100644
--- a/ui/src/app/metadata/configuration/service/history.service.ts
+++ b/ui/src/app/metadata/configuration/service/history.service.ts
@@ -6,6 +6,7 @@ import { MetadataHistory } from '../model/history';
 import { PATHS } from '../../configuration/configuration.values';
 import { MetadataVersion } from '../model/version';
 import { map } from 'rxjs/operators';
+import { Metadata } from '../../domain/domain.type';
 
 @Injectable()
 export class MetadataHistoryService {
@@ -24,4 +25,12 @@ export class MetadataHistoryService {
             }))
         );
     }
+
+    find(resourceId: string, versions: MetadataVersion, type: string): Observable<Metadata[]> {
+        return of([]);
+    }
+
+    getVersion(resourceId: string, type: string): Observable<Metadata> {
+        return of();
+    }
 }
diff --git a/ui/src/app/schema-form/widget/array/array.component.html b/ui/src/app/schema-form/widget/array/array.component.html
index 253fa2af4..620efd944 100644
--- a/ui/src/app/schema-form/widget/array/array.component.html
+++ b/ui/src/app/schema-form/widget/array/array.component.html
@@ -12,7 +12,7 @@
         <span class="text-right" *ngIf="schema.description">
             <info-icon [description]="schema.description | translate"></info-icon>
         </span>
-        <small class="form-text text-danger px-2" *ngIf="hasErrors">
+        <small class="form-text text-danger px-2" *ngIf="hasErrors$ | async">
             <ng-container *ngFor="let error of errors$ | async; let first=first;">
                 <ng-container *ngIf="!first">, </ng-container>
                 <translate-i18n [key]="messages[error.code]">{{ error.message }}</translate-i18n>
diff --git a/ui/src/app/schema-form/widget/array/array.component.ts b/ui/src/app/schema-form/widget/array/array.component.ts
index 698500fca..44f5a90a8 100644
--- a/ui/src/app/schema-form/widget/array/array.component.ts
+++ b/ui/src/app/schema-form/widget/array/array.component.ts
@@ -18,9 +18,9 @@ export interface FormError {
     selector: 'array-component',
     templateUrl: `./array.component.html`
 })
-export class CustomArrayComponent extends ArrayWidget implements AfterViewInit, OnDestroy {
+export class CustomArrayComponent extends ArrayWidget implements AfterViewInit {
     errors$: Observable<FormError[]>;
-    hasErrors: boolean;
+    hasErrors$: Observable<boolean>;
     hasErrorSub: Subscription;
 
     messages = {
@@ -29,18 +29,15 @@ export class CustomArrayComponent extends ArrayWidget implements AfterViewInit,
 
     ngAfterViewInit(): void {
         this.errors$ = this.formProperty.errorsChanges.pipe(
-            map(errors => errors ? errors.filter(err => err.code !== 'UNRESOLVABLE_REFERENCE').reduce((coll, err) => {
-                coll[err.code] = err;
-                return coll;
-            }, {}) : {}),
+            map(errors => errors ?
+                errors.filter(err => err.code !== 'UNRESOLVABLE_REFERENCE').reduce((coll, err) => {
+                    coll[err.code] = err;
+                    return coll;
+                }, {}) : {}),
             map(collection => Object.values(collection))
         );
 
-        this.hasErrorSub = this.errors$.subscribe(e => this.hasErrors = !!e.length);
-    }
-
-    ngOnDestroy(): void {
-        this.hasErrorSub.unsubscribe();
+        this.hasErrors$ = this.errors$.pipe(map(errors => !!errors.length));
     }
 
     removeItem(index: number, item: FormProperty = null): void {
diff --git a/ui/src/app/schema-form/widget/array/inline-obj-list.component.html b/ui/src/app/schema-form/widget/array/inline-obj-list.component.html
index 876ea01f7..59149b0c1 100644
--- a/ui/src/app/schema-form/widget/array/inline-obj-list.component.html
+++ b/ui/src/app/schema-form/widget/array/inline-obj-list.component.html
@@ -12,7 +12,7 @@
         <span class="text-right" *ngIf="schema.description">
             <info-icon [description]="schema.description | translate"></info-icon>
         </span>
-        <small class="form-text text-danger px-2" *ngIf="hasErrors">
+        <small class="form-text text-danger px-2" *ngIf="hasErrors$ | async">
             <ng-container *ngFor="let error of errors$ | async; let first=first;">
                 <ng-container *ngIf="!first">, </ng-container>
                 <translate-i18n [key]="messages[error.code]">{{ error.message }}</translate-i18n>