diff --git a/ui/src/app/metadata/configuration/action/configuration.action.ts b/ui/src/app/metadata/configuration/action/configuration.action.ts
index 78e834eea..8a12d47c8 100644
--- a/ui/src/app/metadata/configuration/action/configuration.action.ts
+++ b/ui/src/app/metadata/configuration/action/configuration.action.ts
@@ -12,10 +12,11 @@ export enum ConfigurationActionTypes {
     LOAD_XML_SUCCESS = '[Metadata Configuration] Load XML Success',
     LOAD_XML_ERROR = '[Metadata Configuration] Load XML Error',
 
-    SET_METADATA = '[Metadata Configuration] Set Metadata Model',
+    SET_METADATA = '[Metadata Configuration] Set Metadata Attributes',
     SET_DEFINITION = '[Metadata Configuration] Set Metadata Definition',
     SET_SCHEMA = '[Metadata Configuration] Set Metadata Schema',
     SET_XML = '[Metadata Configuration] Set Metadata Xml',
+    SET_METADATA_MODEL = '[Metadata Configuration] Set Metadata Model',
 
     DOWNLOAD_XML = '[Metadata Configuration] Download Metadata Xml',
 
@@ -61,7 +62,13 @@ export class LoadXmlError implements Action {
 export class SetMetadata implements Action {
     readonly type = ConfigurationActionTypes.SET_METADATA;
 
-    constructor(public payload: { id: string, type: string }) { }
+    constructor(public payload: { id: string, type: string, version?: string }) { }
+}
+
+export class SetMetadataModel implements Action {
+    readonly type = ConfigurationActionTypes.SET_METADATA_MODEL;
+
+    constructor(public payload: Metadata) { }
 }
 
 export class SetDefinition implements Action {
diff --git a/ui/src/app/metadata/configuration/action/restore.action.ts b/ui/src/app/metadata/configuration/action/restore.action.ts
new file mode 100644
index 000000000..48861c35e
--- /dev/null
+++ b/ui/src/app/metadata/configuration/action/restore.action.ts
@@ -0,0 +1,36 @@
+import { Action } from '@ngrx/store';
+import { Metadata } from '../../domain/domain.type';
+
+export enum RestoreActionTypes {
+    SELECT_VERSION_SUCCESS = '[Restore Version] Select Version Success',
+    SELECT_VERSION_ERROR = '[Restore Version] Select Version Error',
+    SELECT_VERSION_REQUEST = '[Restore Version] Select Version Request',
+    CLEAR_VERSION = '[Restore Version] Clear Versions'
+}
+
+export class SelectVersionRestoreRequest implements Action {
+    readonly type = RestoreActionTypes.SELECT_VERSION_REQUEST;
+
+    constructor(public payload: { type: string, id: string, version: string }) { }
+}
+
+export class SelectVersionRestoreSuccess implements Action {
+    readonly type = RestoreActionTypes.SELECT_VERSION_SUCCESS;
+
+    constructor(public payload: Metadata) { }
+}
+export class SelectVersionRestoreError implements Action {
+    readonly type = RestoreActionTypes.SELECT_VERSION_ERROR;
+
+    constructor(public payload: any) { }
+}
+
+export class ClearVersionRestore implements Action {
+    readonly type = RestoreActionTypes.CLEAR_VERSION;
+}
+
+export type RestoreActionsUnion =
+    | SelectVersionRestoreRequest
+    | SelectVersionRestoreError
+    | SelectVersionRestoreSuccess
+    | ClearVersionRestore;
diff --git a/ui/src/app/metadata/configuration/component/history-list.component.html b/ui/src/app/metadata/configuration/component/history-list.component.html
index db658f453..ff4599b91 100644
--- a/ui/src/app/metadata/configuration/component/history-list.component.html
+++ b/ui/src/app/metadata/configuration/component/history-list.component.html
@@ -5,7 +5,6 @@
             <th scope="col">
                 <span class="sr-only" translate="label.select-version">Select Version</span>
             </th>
-            <th scope="col" translate="label.version">Version</th>
             <th scope="col" translate="label.save-date">Save Date</th>
             <th scope="col" translate="label.changed-by">Changed By</th>
             <th scope="col" translate="label.actions">Actions</th>
@@ -21,12 +20,19 @@
                     </label>
                 </div>
             </td>
-            <td *ngIf="i === 0"><translate-i18n key="label.current">Current</translate-i18n> (v{{ history.length - i }})</td>
-            <td *ngIf="i > 0">v{{ history.length - (i) }}</td>
-            <td>{{ version.date | date:DATE_FORMAT }}</td>
+            <td>
+                <a [routerLink]="['../', 'options']" [queryParams]="{'version': version.id}">
+                    <ng-container>
+                        {{ version.date | date:DATE_FORMAT }}&nbsp;
+                        <ng-container *ngIf="i === 0">
+                            (<translate-i18n key="label.current">Current</translate-i18n>)
+                        </ng-container>
+                    </ng-container>
+                </a>
+            </td>
             <td>{{ version.creator }}</td>
             <td>
-                <button class="btn btn-link" (click)="restore.emit(version)">
+                <button class="btn btn-text btn-link" (click)="restore.emit(version)"  *ngIf="i > 0">
                     <i class="fa fa-undo"></i>&nbsp;
                     <translate-i18n key="label.restore">Restore</translate-i18n>
                 </button>
diff --git a/ui/src/app/metadata/configuration/component/history-list.component.spec.ts b/ui/src/app/metadata/configuration/component/history-list.component.spec.ts
index 3c191c300..35fcbe68d 100644
--- a/ui/src/app/metadata/configuration/component/history-list.component.spec.ts
+++ b/ui/src/app/metadata/configuration/component/history-list.component.spec.ts
@@ -4,6 +4,7 @@ import { MockI18nModule } from '../../../../testing/i18n.stub';
 import { HistoryListComponent } from './history-list.component';
 import { MetadataHistory } from '../model/history';
 import { MetadataVersion } from '../model/version';
+import { RouterTestingModule } from '@angular/router/testing';
 
 export const TestData = {
     versions: [
@@ -37,7 +38,8 @@ describe('Metadata History List Component', () => {
         TestBed.configureTestingModule({
             providers: [],
             imports: [
-                MockI18nModule
+                MockI18nModule,
+                RouterTestingModule
             ],
             declarations: [
                 HistoryListComponent,
diff --git a/ui/src/app/metadata/configuration/configuration.module.ts b/ui/src/app/metadata/configuration/configuration.module.ts
index fa395529b..c55e24051 100644
--- a/ui/src/app/metadata/configuration/configuration.module.ts
+++ b/ui/src/app/metadata/configuration/configuration.module.ts
@@ -30,6 +30,8 @@ import { FilterConfigurationListComponent } from './component/filter-configurati
 import { FilterConfigurationListItemComponent } from './component/filter-configuration-list-item.component';
 import { SharedModule } from '../../shared/shared.module';
 import { FilterTargetPropertyComponent } from './component/filter-target-property.component';
+import { RestoreComponent } from './container/restore.component';
+import { RestoreVersionEffects } from './effect/restore.effect';
 
 @NgModule({
     declarations: [
@@ -47,7 +49,8 @@ import { FilterTargetPropertyComponent } from './component/filter-target-propert
         MetadataComparisonComponent,
         FilterConfigurationListComponent,
         FilterConfigurationListItemComponent,
-        FilterTargetPropertyComponent
+        FilterTargetPropertyComponent,
+        RestoreComponent
     ],
     entryComponents: [],
     imports: [
@@ -82,7 +85,8 @@ export class MetadataConfigurationModule {
             [
                 MetadataConfigurationEffects,
                 MetadataHistoryEffects,
-                CompareVersionEffects
+                CompareVersionEffects,
+                RestoreVersionEffects
             ])
     ],
     providers: []
diff --git a/ui/src/app/metadata/configuration/configuration.routing.ts b/ui/src/app/metadata/configuration/configuration.routing.ts
index 0a77b0c2b..dc3f5df99 100644
--- a/ui/src/app/metadata/configuration/configuration.routing.ts
+++ b/ui/src/app/metadata/configuration/configuration.routing.ts
@@ -4,6 +4,7 @@ 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';
+import { RestoreComponent } from './container/restore.component';
 
 export const ConfigurationRoutes: Routes = [
     {
@@ -29,6 +30,10 @@ export const ConfigurationRoutes: Routes = [
             {
                 path: 'compare',
                 component: MetadataComparisonComponent
+            },
+            {
+                path: 'restore',
+                component: RestoreComponent
             }
         ]
     }
diff --git a/ui/src/app/metadata/configuration/container/configuration.component.html b/ui/src/app/metadata/configuration/container/configuration.component.html
index 53f8fa697..89d017139 100644
--- a/ui/src/app/metadata/configuration/container/configuration.component.html
+++ b/ui/src/app/metadata/configuration/container/configuration.component.html
@@ -13,11 +13,6 @@
                     </li>
                 </ol>
             </nav>
-            <h2 class="mb-4" [ngSwitch]="type$ | async">
-                <ng-container *ngSwitchCase="'resolver'" translate="label.source">Source</ng-container>
-                <ng-container *ngSwitchDefault translate="label.provider">Provider</ng-container>
-                Configuration
-            </h2>
             <ng-container *ngIf="name$ | async">
                 <router-outlet></router-outlet>
             </ng-container>
diff --git a/ui/src/app/metadata/configuration/container/configuration.component.ts b/ui/src/app/metadata/configuration/container/configuration.component.ts
index 4c06d7f9d..d8c0234c6 100644
--- a/ui/src/app/metadata/configuration/container/configuration.component.ts
+++ b/ui/src/app/metadata/configuration/container/configuration.component.ts
@@ -2,14 +2,13 @@ import { Component, ChangeDetectionStrategy, OnDestroy, HostListener } from '@an
 import { ActivatedRoute, Router, Scroll, Event } from '@angular/router';
 import { takeUntil, map, withLatestFrom, filter, timeout, delay } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
-import { Observable, Subject, interval } from 'rxjs';
+import { Observable, Subject, interval, combineLatest } from 'rxjs';
 
 import * as fromConfiguration from '../reducer';
 
 import { ClearConfiguration, SetMetadata } from '../action/configuration.action';
 import { LoadHistoryRequest, ClearHistory, SelectVersion } from '../action/history.action';
 import * as fromReducer from '../reducer';
-import { ViewportScroller } from '@angular/common';
 
 @Component({
     selector: 'configuration-page',
@@ -27,9 +26,17 @@ export class ConfigurationComponent implements OnDestroy {
         private store: Store<fromConfiguration.ConfigurationState>,
         private routerState: ActivatedRoute
     ) {
-        this.routerState.params.pipe(
+
+        combineLatest(
+            this.routerState.params,
+            this.routerState.queryParams
+        ).pipe(
             takeUntil(this.ngUnsubscribe),
-            map(params => new SetMetadata({id: params.id, type: params.type}))
+            map(([{ id, type }, { version }]) => new SetMetadata({
+                id,
+                type,
+                version
+            }))
         ).subscribe(store);
 
         this.routerState.params.pipe(
@@ -38,20 +45,14 @@ export class ConfigurationComponent implements OnDestroy {
         ).subscribe(store);
 
         this.store.select(fromReducer.getVersionCollection).pipe(
+            filter(collection => collection && collection.length > 0),
             takeUntil(this.ngUnsubscribe),
             withLatestFrom(
                 this.routerState.queryParams
             ),
-            map(([collection, params]) => {
-                if (collection && collection.length) {
-                    return params.version || collection[0].id;
-                }
-                return null;
-            })
+            map(([collection, params]) => params.version || collection && collection.length ? collection[0].id : null)
         ).subscribe(version => {
-            if (version) {
-                this.store.dispatch(new SelectVersion(version));
-            }
+            this.store.dispatch(new SelectVersion(version));
         });
 
         this.name$ = this.store.select(fromReducer.getConfigurationModelName);
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 d5b533716..7117b7bf6 100644
--- a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
+++ b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
@@ -1,3 +1,9 @@
+<h2 class="mb-4" [ngSwitch]="type$ | async">
+    Compare
+    <ng-container *ngSwitchCase="'resolver'" translate="label.source">Source</ng-container>
+    <ng-container *ngSwitchDefault translate="label.provider">Provider</ng-container>
+    Configuration
+</h2>
 <div class="" [ngClass]="{
     'container-fluid': (numVersions$ | async) > 2,
     'container': (numVersions$ | async) <= 2
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 92019297d..cec29c2a6 100644
--- a/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
+++ b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
@@ -4,9 +4,9 @@ import { Store } from '@ngrx/store';
 import { ActivatedRoute } from '@angular/router';
 import { map } from 'rxjs/operators';
 import { ConfigurationState, getVersionConfigurations, getVersionConfigurationCount } from '../reducer';
-import { Metadata } from '../../domain/domain.type';
 import { CompareVersionRequest } from '../action/compare.action';
 import { MetadataConfiguration } from '../model/metadata-configuration';
+import * as fromReducer from '../reducer';
 
 @Component({
     selector: 'metadata-comparison',
@@ -18,6 +18,7 @@ export class MetadataComparisonComponent {
 
     versions$: Observable<MetadataConfiguration>;
     numVersions$: Observable<number>;
+    type$: Observable<string>;
 
     constructor(
         private store: Store<ConfigurationState>,
@@ -30,5 +31,6 @@ export class MetadataComparisonComponent {
 
         this.versions$ = this.store.select(getVersionConfigurations);
         this.numVersions$ = this.store.select(getVersionConfigurationCount);
+        this.type$ = this.store.select(fromReducer.getConfigurationModelType);
     }
 }
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 2bcc27fe5..5291b4907 100644
--- a/ui/src/app/metadata/configuration/container/metadata-history.component.html
+++ b/ui/src/app/metadata/configuration/container/metadata-history.component.html
@@ -1,5 +1,9 @@
+<h2 class="mb-4">
+    Version History
+</h2>
 <div class="container">
     <history-list
         [history]="history$ | async"
-        (compare)="compareVersions($event)"></history-list>
+        (compare)="compareVersions($event)"
+        (restore)="restoreVersion($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 c49e0c70f..17f2c3caa 100644
--- a/ui/src/app/metadata/configuration/container/metadata-history.component.ts
+++ b/ui/src/app/metadata/configuration/container/metadata-history.component.ts
@@ -44,4 +44,13 @@ export class MetadataHistoryComponent {
             }
         );
     }
+
+    restoreVersion(version: MetadataVersion): void {
+        this.router.navigate(
+            [ '../', 'restore' ],
+            {
+                relativeTo: this.route
+            }
+        );
+    }
 }
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 972e0e4da..ebed36bf3 100644
--- a/ui/src/app/metadata/configuration/container/metadata-options.component.html
+++ b/ui/src/app/metadata/configuration/container/metadata-options.component.html
@@ -1,3 +1,8 @@
+<h2 class="mb-4" [ngSwitch]="type$ | async">
+    <ng-container *ngSwitchCase="'resolver'" translate="label.source">Source</ng-container>
+    <ng-container *ngSwitchDefault translate="label.provider">Provider</ng-container>
+    Configuration
+</h2>
 <div class="container" id="header">
     <metadata-header
         [isEnabled]="isEnabled$ | async"
diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.ts b/ui/src/app/metadata/configuration/container/metadata-options.component.ts
index a19875a54..ddd4f0df6 100644
--- a/ui/src/app/metadata/configuration/container/metadata-options.component.ts
+++ b/ui/src/app/metadata/configuration/container/metadata-options.component.ts
@@ -2,9 +2,9 @@ import { Store } from '@ngrx/store';
 import { Component, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { Router, Event, Scroll } from '@angular/router';
+import { Router } from '@angular/router';
 import { ViewportScroller } from '@angular/common';
-import { takeUntil, filter, delay } from 'rxjs/operators';
+import { takeUntil, filter } from 'rxjs/operators';
 
 import {
     ConfigurationState,
@@ -15,7 +15,8 @@ import {
     getConfigurationModelEnabled,
     getConfigurationHasXml,
     getConfigurationModel,
-    getConfigurationDefinition
+    getConfigurationDefinition,
+    getConfigurationModelType
 } from '../reducer';
 import { MetadataConfiguration } from '../model/metadata-configuration';
 import { MetadataVersion } from '../model/version';
@@ -32,7 +33,6 @@ import {
 import { Metadata } from '../../domain/domain.type';
 import { DeleteFilterComponent } from '../../provider/component/delete-filter.component';
 import { Wizard } from '../../../wizard/model';
-import { PreviewEntity } from '../../domain/action/entity.action';
 
 @Component({
     selector: 'metadata-options-page',
@@ -53,6 +53,7 @@ export class MetadataOptionsComponent implements OnDestroy {
     filters$: Observable<unknown[]>;
     model$: Observable<Metadata>;
     definition: Wizard<any>;
+    type$: Observable<string>;
     id: string;
     kind: string;
 
@@ -73,6 +74,7 @@ export class MetadataOptionsComponent implements OnDestroy {
         this.isCurrent$ = this.store.select(getSelectedIsCurrent);
         this.hasXml$ = this.store.select(getConfigurationHasXml);
         this.filters$ = this.store.select(getAdditionalFilters);
+        this.type$ = this.store.select(getConfigurationModelType);
 
         this.model$
             .pipe(
diff --git a/ui/src/app/metadata/configuration/container/metadata-xml.component.html b/ui/src/app/metadata/configuration/container/metadata-xml.component.html
index 613dc7699..7c3d533cc 100644
--- a/ui/src/app/metadata/configuration/container/metadata-xml.component.html
+++ b/ui/src/app/metadata/configuration/container/metadata-xml.component.html
@@ -1,3 +1,8 @@
+<h2 class="mb-4" [ngSwitch]="type$ | async">
+    <ng-container *ngSwitchCase="'resolver'" translate="label.source">Source</ng-container>
+    <ng-container *ngSwitchDefault translate="label.provider">Provider</ng-container>
+    Configuration
+</h2>
 <div class="container-fluid">
     <div class="px-3 my-3 d-flex justify-content-end">
         <div class="btn-group">
diff --git a/ui/src/app/metadata/configuration/container/metadata-xml.component.spec.ts b/ui/src/app/metadata/configuration/container/metadata-xml.component.spec.ts
index 6f7e052e3..c9129dfaa 100644
--- a/ui/src/app/metadata/configuration/container/metadata-xml.component.spec.ts
+++ b/ui/src/app/metadata/configuration/container/metadata-xml.component.spec.ts
@@ -54,6 +54,6 @@ describe('Metadata Xml Page Component', () => {
 
     it('should load metadata objects', async(() => {
         expect(app).toBeTruthy();
-        expect(store.select).toHaveBeenCalledTimes(2);
+        expect(store.select).toHaveBeenCalledTimes(3);
     }));
 });
diff --git a/ui/src/app/metadata/configuration/container/metadata-xml.component.ts b/ui/src/app/metadata/configuration/container/metadata-xml.component.ts
index 1a56906a0..b49a06184 100644
--- a/ui/src/app/metadata/configuration/container/metadata-xml.component.ts
+++ b/ui/src/app/metadata/configuration/container/metadata-xml.component.ts
@@ -1,6 +1,6 @@
 import { Store } from '@ngrx/store';
 import { Component } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
+import { Observable } from 'rxjs';
 
 import * as fromConfiguration from '../reducer';
 import { Metadata } from '../../domain/domain.type';
@@ -17,12 +17,14 @@ export class MetadataXmlComponent {
     entity$: Observable<Metadata>;
     xml: string;
     xml$: Observable<string>;
+    type$: Observable<string>;
 
     constructor(
         private store: Store<fromConfiguration.ConfigurationState>
     ) {
         this.xml$ = this.store.select(fromConfiguration.getConfigurationXml);
         this.entity$ = this.store.select(fromConfiguration.getConfigurationModel);
+        this.type$ = this.store.select(fromConfiguration.getConfigurationModelType);
     }
 
     preview(): void {
diff --git a/ui/src/app/metadata/configuration/container/restore.component.html b/ui/src/app/metadata/configuration/container/restore.component.html
new file mode 100644
index 000000000..c842aa47d
--- /dev/null
+++ b/ui/src/app/metadata/configuration/container/restore.component.html
@@ -0,0 +1,12 @@
+<h2 class="mb-4">
+    Restore Version
+</h2>
+<div class="d-flex justify-content-center align-items-center">
+    <div class="card m-4 w-50">
+        <div class="card-body">
+            <h3 class="card-title">Create new version from {{ date | date:DATE_FORMAT }} settings</h3>
+            <p>Restoring this version will copy the configuration from the selected version and create a new version from these settings. You can then edit the configuration before saving the new version.</p>
+            <a href="#" class="btn btn-light">Cancel</a>&nbsp;<a href="#" class="btn btn-primary">Restore</a>
+        </div>
+    </div>
+</div>
diff --git a/ui/src/app/metadata/configuration/container/restore.component.ts b/ui/src/app/metadata/configuration/container/restore.component.ts
new file mode 100644
index 000000000..53f3573ec
--- /dev/null
+++ b/ui/src/app/metadata/configuration/container/restore.component.ts
@@ -0,0 +1,31 @@
+import { Component, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
+import { ActivatedRoute, } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Subject } from 'rxjs';
+
+import * as fromConfiguration from '../reducer';
+import { CONFIG_DATE_FORMAT } from '../configuration.values';
+
+@Component({
+    selector: 'restore-component',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './restore.component.html',
+    styleUrls: []
+})
+export class RestoreComponent implements OnDestroy {
+    private ngUnsubscribe: Subject<void> = new Subject<void>();
+
+    DATE_FORMAT = CONFIG_DATE_FORMAT;
+
+    date = new Date();
+
+    constructor(
+        private store: Store<fromConfiguration.ConfigurationState>,
+        private routerState: ActivatedRoute
+    ) {}
+
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+}
diff --git a/ui/src/app/metadata/configuration/effect/configuration.effect.ts b/ui/src/app/metadata/configuration/effect/configuration.effect.ts
index 89abcb6ba..924d61919 100644
--- a/ui/src/app/metadata/configuration/effect/configuration.effect.ts
+++ b/ui/src/app/metadata/configuration/effect/configuration.effect.ts
@@ -20,18 +20,20 @@ import {
     DownloadXml
 } from '../action/configuration.action';
 import { ResolverService } from '../../domain/service/resolver.service';
-import { EntityIdService } from '../../domain/service/entity-id.service';
 import { State } from '../reducer/configuration.reducer';
 import { getConfigurationModel, getConfigurationXml } from '../reducer';
-import { MetadataResolver } from '../../domain/model';
+import { MetadataResolver, MetadataProvider } from '../../domain/model';
 import {
-    SelectProviderRequest, SelectProviderSuccess, ProviderCollectionActionTypes
+    SelectProviderSuccess,
+    ProviderCollectionActionTypes
 } from '../../provider/action/collection.action';
 import {
-    SelectResolver,
     SelectResolverSuccess,
     ResolverCollectionActionTypes
 } from '../../resolver/action/collection.action';
+import { MetadataHistoryService } from '../service/history.service';
+import { Metadata } from '../../domain/domain.type';
+import { SelectVersion } from '../action/history.action';
 
 @Injectable()
 export class MetadataConfigurationEffects {
@@ -40,12 +42,22 @@ export class MetadataConfigurationEffects {
     loadMetadata$ = this.actions$.pipe(
         ofType<SetMetadata>(ConfigurationActionTypes.SET_METADATA),
         map(action => action.payload),
-        map(payload => {
-            const action = (payload.type === 'resolver') ?
-                new SelectResolver(payload.id) :
-                new SelectProviderRequest(payload.id);
-            return action;
-        })
+        switchMap(payload =>
+            this.historyService.getVersion(payload.id, payload.type, payload.version).pipe(
+                map((response: Metadata) =>
+                    (payload.type === 'resolver') ?
+                        new SelectResolverSuccess(response as MetadataResolver) :
+                        new SelectProviderSuccess(response as MetadataProvider)
+                )
+            )
+        )
+    );
+
+    @Effect()
+    setMetadataVersion$ = this.actions$.pipe(
+        ofType<SetMetadata>(ConfigurationActionTypes.SET_METADATA),
+        map(action => action.payload),
+        map(({version}) => new SelectVersion(version))
     );
 
     @Effect()
@@ -119,7 +131,7 @@ export class MetadataConfigurationEffects {
         private configService: MetadataConfigurationService,
         private actions$: Actions,
         private resolverService: ResolverService,
-        private entityService: EntityIdService,
+        private historyService: MetadataHistoryService,
         private store: Store<State>
     ) { }
 }
diff --git a/ui/src/app/metadata/configuration/effect/restore.effect.ts b/ui/src/app/metadata/configuration/effect/restore.effect.ts
new file mode 100644
index 000000000..b7f928f88
--- /dev/null
+++ b/ui/src/app/metadata/configuration/effect/restore.effect.ts
@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { Actions, Effect, ofType } from '@ngrx/effects';
+import { map, catchError, switchMap } from 'rxjs/operators';
+
+import {
+    RestoreActionTypes,
+    SelectVersionRestoreRequest,
+    SelectVersionRestoreError,
+    SelectVersionRestoreSuccess
+} from '../action/restore.action';
+import { MetadataHistoryService } from '../service/history.service';
+import { of } from 'rxjs';
+
+
+@Injectable()
+export class RestoreVersionEffects {
+
+    @Effect()
+    restoreVersionFromId$ = this.actions$.pipe(
+        ofType<SelectVersionRestoreRequest>(RestoreActionTypes.SELECT_VERSION_REQUEST),
+        map(action => action.payload),
+        switchMap(({ type, id, version }) => {
+            return this.historyService.getVersion(id, version, type).pipe(
+                map(v => new SelectVersionRestoreSuccess(v)),
+                catchError(err => of(new SelectVersionRestoreError(err)))
+            );
+        })
+    );
+
+    constructor(
+        private historyService: MetadataHistoryService,
+        private actions$: Actions
+    ) { }
+}
diff --git a/ui/src/app/metadata/configuration/reducer/index.ts b/ui/src/app/metadata/configuration/reducer/index.ts
index dfd81dfb6..76140bfca 100644
--- a/ui/src/app/metadata/configuration/reducer/index.ts
+++ b/ui/src/app/metadata/configuration/reducer/index.ts
@@ -4,6 +4,7 @@ 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 * as fromRestore from './restore.reducer';
 import { WizardStep } from '../../../wizard/model';
 
 import * as utils from '../../domain/utility/configuration';
@@ -14,19 +15,19 @@ import { Metadata } from '../../domain/domain.type';
 
 import * as fromResolver from '../../resolver/reducer';
 import * as fromProvider from '../../provider/reducer';
-import { provider } from '../../../../testing/provider.stub';
-import { resolver } from '../../../../testing/resolver.stub';
 
 export interface ConfigurationState {
     configuration: fromConfiguration.State;
     history: fromHistory.HistoryState;
     compare: fromCompare.State;
+    restore: fromRestore.State;
 }
 
 export const reducers = {
     configuration: fromConfiguration.reducer,
     history: fromHistory.reducer,
-    compare: fromCompare.reducer
+    compare: fromCompare.reducer,
+    restore: fromRestore.reducer
 };
 
 export interface State extends fromRoot.State {
@@ -38,18 +39,12 @@ 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 getConfigurationModelFn = (kind, provider, resolver) => (kind === 'provider') ? provider : resolver;
+export const getRestoreStateFn = (state: ConfigurationState) => state.restore;
 
 export const getConfigurationState = createSelector(getState, getConfigurationStateFn);
 export const getConfigurationModelKind = createSelector(getConfigurationState, fromConfiguration.getModelKind);
 export const getConfigurationModelId = createSelector(getConfigurationState, fromConfiguration.getModelId);
-export const getConfigurationModel = createSelector(
-    getConfigurationModelKind,
-    fromProvider.getSelectedProvider,
-    fromResolver.getSelectedResolver,
-    getConfigurationModelFn
-);
-export const getConfigurationModelList = createSelector(getConfigurationModel, (model) => [model]);
+
 export const getConfigurationDefinition = createSelector(getConfigurationState, fromConfiguration.getDefinition);
 export const getConfigurationSchema = createSelector(getConfigurationState, fromConfiguration.getSchema);
 export const getConfigurationXml = createSelector(getConfigurationState, fromConfiguration.getXml);
@@ -107,12 +102,7 @@ export const getConfigurationSectionsFn = (models, definition, schema): Metadata
         });
     };
 
-export const getConfigurationSections = createSelector(
-    getConfigurationModelList,
-    getConfigurationDefinition,
-    getConfigurationSchema,
-    getConfigurationSectionsFn
-);
+
 
 export const getConfigurationModelEnabledFn =
     (config: Metadata) => config ? ('serviceEnabled' in config) ? config.serviceEnabled : config.enabled : false;
@@ -123,12 +113,6 @@ export const getConfigurationModelNameFn =
 export const getConfigurationModelTypeFn =
     (config: Metadata) => config ? ('@type' in config) ? config['@type'] : 'resolver' : null;
 
-export const getConfigurationModelEnabled = createSelector(getConfigurationModel, getConfigurationModelEnabledFn);
-export const getConfigurationModelName = createSelector(getConfigurationModel, getConfigurationModelNameFn);
-export const getConfigurationModelType = createSelector(getConfigurationModel, getConfigurationModelTypeFn);
-
-export const getConfigurationHasXml = createSelector(getConfigurationXml, xml => !!xml);
-export const getConfigurationFilters = createSelector(getConfigurationModel, model => model.metadataFilters);
 // Version History
 
 export const getHistoryState = createSelector(getState, getHistoryStateFn);
@@ -165,3 +149,37 @@ export const getVersionConfigurations = createSelector(
 );
 
 export const getVersionConfigurationCount = createSelector(getVersionConfigurations, (config) => config ? config.dates.length : 0);
+
+// Version Restoration
+
+export const getRestoreState = createSelector(getState, getRestoreStateFn);
+export const getRestoreModel = createSelector(getRestoreState, fromRestore.getVersionModel);
+
+// Mixed states
+
+export const getConfigurationModelFn = (kind, version, provider, resolver) => {
+    return (kind === 'provider') ? provider : resolver;
+};
+
+export const getConfigurationModel = createSelector(
+    getConfigurationModelKind,
+    getSelectedVersionId,
+    fromProvider.getSelectedProvider,
+    fromResolver.getSelectedResolver,
+    getConfigurationModelFn
+);
+export const getConfigurationModelList = createSelector(getConfigurationModel, (model) => [model]);
+
+export const getConfigurationSections = createSelector(
+    getConfigurationModelList,
+    getConfigurationDefinition,
+    getConfigurationSchema,
+    getConfigurationSectionsFn
+);
+
+export const getConfigurationModelEnabled = createSelector(getConfigurationModel, getConfigurationModelEnabledFn);
+export const getConfigurationModelName = createSelector(getConfigurationModel, getConfigurationModelNameFn);
+export const getConfigurationModelType = createSelector(getConfigurationModel, getConfigurationModelTypeFn);
+
+export const getConfigurationHasXml = createSelector(getConfigurationXml, xml => !!xml);
+export const getConfigurationFilters = createSelector(getConfigurationModel, model => model.metadataFilters);
diff --git a/ui/src/app/metadata/configuration/reducer/restore.reducer.spec.ts b/ui/src/app/metadata/configuration/reducer/restore.reducer.spec.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/src/app/metadata/configuration/reducer/restore.reducer.ts b/ui/src/app/metadata/configuration/reducer/restore.reducer.ts
new file mode 100644
index 000000000..16bac9afb
--- /dev/null
+++ b/ui/src/app/metadata/configuration/reducer/restore.reducer.ts
@@ -0,0 +1,46 @@
+import { RestoreActionTypes, RestoreActionsUnion } from '../action/restore.action';
+import { Metadata } from '../../domain/domain.type';
+
+export interface State {
+    model: Metadata;
+    selectedVersionId: string;
+    selectedVersionType: string;
+    selectedMetadataId: string;
+    loaded: Boolean;
+}
+
+export const initialState: State = {
+    model: null,
+    selectedVersionId: null,
+    selectedMetadataId: null,
+    selectedVersionType: null,
+    loaded: false
+};
+
+export function reducer(state = initialState, action: RestoreActionsUnion): State {
+    switch (action.type) {
+        case RestoreActionTypes.SELECT_VERSION_REQUEST:
+            return {
+                ...state,
+                selectedMetadataId: action.payload.id,
+                selectedVersionId: action.payload.version,
+                selectedVersionType: action.payload.type
+            };
+        case RestoreActionTypes.SELECT_VERSION_SUCCESS:
+            return {
+                ...state,
+                model: action.payload,
+                loaded: true
+            };
+        case RestoreActionTypes.CLEAR_VERSION:
+            return {
+                ...initialState
+            };
+        default: {
+            return state;
+        }
+    }
+}
+
+export const getVersionModel = (state: State) => state.model;
+export const getVersionModelLoaded = (state: State) => state.loaded;
diff --git a/ui/src/app/metadata/configuration/service/history.service.ts b/ui/src/app/metadata/configuration/service/history.service.ts
index 8dbcf9029..700e88e6a 100644
--- a/ui/src/app/metadata/configuration/service/history.service.ts
+++ b/ui/src/app/metadata/configuration/service/history.service.ts
@@ -32,7 +32,11 @@ export class MetadataHistoryService {
         ));
     }
 
-    getVersion(resourceId: string, type: string, versionId: string): Observable<Metadata> {
-        return this.http.get<Metadata>(`/${this.base}/${PATHS[type]}/${resourceId}/${this.path}/${versionId}`);
+    getVersion(resourceId: string, type: string, versionId?: string): Observable<Metadata> {
+        const api = versionId ?
+            `/${this.base}/${PATHS[type]}/${resourceId}/${this.path}/${versionId}`
+            :
+            `/${this.base}/${PATHS[type]}/${resourceId}`;
+        return this.http.get<Metadata>(api);
     }
 }
diff --git a/ui/src/app/metadata/provider/reducer/collection.reducer.ts b/ui/src/app/metadata/provider/reducer/collection.reducer.ts
index 031f915c8..cecd944b0 100644
--- a/ui/src/app/metadata/provider/reducer/collection.reducer.ts
+++ b/ui/src/app/metadata/provider/reducer/collection.reducer.ts
@@ -21,7 +21,7 @@ export const initialState: CollectionState = adapter.getInitialState({
 export function reducer(state = initialState, action: ProviderCollectionActionsUnion): CollectionState {
     switch (action.type) {
         case ProviderCollectionActionTypes.SELECT_PROVIDER_SUCCESS: {
-            return adapter.addOne(action.payload, {
+            return adapter.upsertOne(action.payload, {
                 ...state,
                 selectedProviderId: action.payload.resourceId
             });
diff --git a/ui/src/app/metadata/resolver/reducer/collection.reducer.ts b/ui/src/app/metadata/resolver/reducer/collection.reducer.ts
index 925255d96..93118aec3 100644
--- a/ui/src/app/metadata/resolver/reducer/collection.reducer.ts
+++ b/ui/src/app/metadata/resolver/reducer/collection.reducer.ts
@@ -33,7 +33,7 @@ export function reducer(state = initialState, action: ResolverCollectionActionsU
         }
 
         case ResolverCollectionActionTypes.SELECT_SUCCESS: {
-            return adapter.addOne(action.payload, {
+            return adapter.upsertOne(action.payload, {
                 ...state,
                 selectedResolverId: action.payload.id,
             });
diff --git a/ui/src/index.html b/ui/src/index.html
index abfb4b5bc..112e25f7b 100644
--- a/ui/src/index.html
+++ b/ui/src/index.html
@@ -10,6 +10,6 @@
   <link rel="icon" type="image/png" sizes="96x96" href="assets/favicon-96x96.png">
 </head>
 <body>
-  <app-root></app-root>
+  <app-root class="d-flex flex-column justify-content-between"></app-root>
 </body>
 </html>
diff --git a/ui/src/styles.scss b/ui/src/styles.scss
index e63d38251..bec6ffcc3 100644
--- a/ui/src/styles.scss
+++ b/ui/src/styles.scss
@@ -14,6 +14,14 @@ body {
     padding-top: 56px;
 }
 
+app-root {
+    min-height: calc(100vh - 56px);
+}
+
+.pad-content {
+    height: 100%;
+}
+
 .section {
     .section-body {
         background: $white;