diff --git a/ui/src/app/metadata/provider/container/new-provider.component.scss b/ui/src/app/metadata/provider/container/new-provider.component.scss
deleted file mode 100644
index e3d0c671e..000000000
--- a/ui/src/app/metadata/provider/container/new-provider.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// :host {
-//     .provider-nav-option {
-//         width: 160px;
-//     }
-// }
diff --git a/ui/src/app/metadata/provider/container/provider-wizard-step.component.html b/ui/src/app/metadata/provider/container/provider-wizard-step.component.html
new file mode 100644
index 000000000..842a4a2c2
--- /dev/null
+++ b/ui/src/app/metadata/provider/container/provider-wizard-step.component.html
@@ -0,0 +1,5 @@
+<sf-form
+    [schema]="schema$ | async"
+    [model]="formModel"
+    (onChange)="changeSubject.next($event)"
+    (isValid)="onStatusChange($event)"></sf-form>
\ No newline at end of file
diff --git a/ui/src/app/metadata/provider/container/provider-wizard-step.component.ts b/ui/src/app/metadata/provider/container/provider-wizard-step.component.ts
new file mode 100644
index 000000000..b4c553f0a
--- /dev/null
+++ b/ui/src/app/metadata/provider/container/provider-wizard-step.component.ts
@@ -0,0 +1,92 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { withLatestFrom } from 'rxjs/operators';
+import { Store } from '@ngrx/store';
+
+import * as fromProvider from '../reducer';
+import * as fromWizard from '../../../wizard/reducer';
+
+import { SetDisabled, SetDefinition } from '../../../wizard/action/wizard.action';
+import { LoadSchemaRequest, UpdateStatus } from '../action/editor.action';
+import { startWith } from 'rxjs/operators';
+import { Wizard } from '../../../wizard/model';
+import { MetadataProvider } from '../../domain/model';
+import { MetadataProviderTypes, MetadataProviderWizard } from '../model';
+import { UpdateProvider } from '../action/entity.action';
+import { pick } from '../../../shared/util';
+
+@Component({
+    selector: 'provider-wizard-step',
+    templateUrl: './provider-wizard-step.component.html',
+    styleUrls: []
+})
+
+export class ProviderWizardStepComponent implements OnDestroy {
+    changeSubject = new Subject<Partial<any>>();
+    private changeEmitted$ = this.changeSubject.asObservable();
+
+    schema$: Observable<any>;
+    schema: any;
+    definition$: Observable<Wizard<MetadataProvider>>;
+    changes$: Observable<MetadataProvider>;
+    currentPage: string;
+    valid$: Observable<boolean>;
+
+    constructor(
+        private store: Store<fromProvider.ProviderState>
+    ) {
+        this.store
+            .select(fromWizard.getCurrentWizardSchema)
+            .subscribe(s => {
+                this.store.dispatch(new LoadSchemaRequest(s));
+            });
+
+        this.schema$ = this.store.select(fromProvider.getSchema);
+        this.valid$ = this.store.select(fromProvider.getEditorIsValid);
+        this.definition$ = this.store.select(fromWizard.getWizardDefinition);
+        this.changes$ = this.store.select(fromProvider.getEntityChanges);
+
+        this.valid$
+            .pipe(startWith(false))
+            .subscribe((valid) => {
+                this.store.dispatch(new SetDisabled(!valid));
+            });
+
+        this.schema$.subscribe(s => this.schema = s);
+
+        this.changeEmitted$
+            .pipe(
+                withLatestFrom(this.schema$, this.definition$),
+            )
+            .subscribe(
+                ([changes, schema, definition]) => {
+                    const type = changes.value['@type'];
+                    if (type && type !== definition.type) {
+                        const newDefinition = MetadataProviderTypes.find(def => def.type === type);
+                        if (newDefinition) {
+                            this.store.dispatch(new SetDefinition({
+                                ...MetadataProviderWizard,
+                                ...newDefinition,
+                                steps: [
+                                    ...MetadataProviderWizard.steps,
+                                    ...newDefinition.steps
+                                ]
+                            }));
+                            changes = { value: pick(Object.keys(schema.properties))(changes.value) };
+                        }
+                    }
+                    this.store.dispatch(new UpdateProvider(changes.value));
+                }
+            );
+    }
+
+    ngOnDestroy() {
+        this.changeSubject.complete();
+    }
+
+    onStatusChange(value): void {
+        const status = { [this.currentPage]: value ? 'VALID' : 'INVALID' };
+        this.store.dispatch(new UpdateStatus(status));
+    }
+}
+
diff --git a/ui/src/app/metadata/provider/container/new-provider.component.spec.ts b/ui/src/app/metadata/provider/container/provider-wizard-summary.component.html
similarity index 100%
rename from ui/src/app/metadata/provider/container/new-provider.component.spec.ts
rename to ui/src/app/metadata/provider/container/provider-wizard-summary.component.html
diff --git a/ui/src/app/metadata/provider/container/provider-wizard-summary.component.ts b/ui/src/app/metadata/provider/container/provider-wizard-summary.component.ts
new file mode 100644
index 000000000..d16ee2498
--- /dev/null
+++ b/ui/src/app/metadata/provider/container/provider-wizard-summary.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import * as fromProvider from '../reducer';
+
+@Component({
+    selector: 'provider-wizard-summary',
+    templateUrl: './provider-wizard-summary.component.html',
+    styleUrls: []
+})
+
+export class ProviderWizardSummaryComponent {
+    constructor(
+        private store: Store<fromProvider.ProviderState>
+    ) {}
+
+    save(): void {
+        console.log('Save!');
+    }
+}
+
diff --git a/ui/src/app/metadata/provider/container/provider-wizard.component.html b/ui/src/app/metadata/provider/container/provider-wizard.component.html
index 58adb7221..cbeb7c675 100644
--- a/ui/src/app/metadata/provider/container/provider-wizard.component.html
+++ b/ui/src/app/metadata/provider/container/provider-wizard.component.html
@@ -3,11 +3,7 @@
     <hr />
     <div class="row">
         <div class="col col-xl-6 col-lg-9 col-xs-12">
-            <sf-form
-                [schema]="schema$ | async"
-                [model]="formModel"
-                (onChange)="changeSubject.next($event)"
-                (isValid)="onStatusChange($event)"></sf-form>
+            <router-outlet></router-outlet>
         </div>
         <!--
         <div class="col col-xl-6 col-lg-9 col-xs-12">
diff --git a/ui/src/app/metadata/provider/container/provider-wizard.component.ts b/ui/src/app/metadata/provider/container/provider-wizard.component.ts
index 36861d3cf..095d92a23 100644
--- a/ui/src/app/metadata/provider/container/provider-wizard.component.ts
+++ b/ui/src/app/metadata/provider/container/provider-wizard.component.ts
@@ -1,34 +1,23 @@
-
 import { Component, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Subscription, Observable, Subject } from 'rxjs';
-import { distinctUntilChanged, map, withLatestFrom } from 'rxjs/operators';
+import { Observable } from 'rxjs';
 import { Store } from '@ngrx/store';
 
 import * as fromProvider from '../reducer';
 import * as fromWizard from '../../../wizard/reducer';
 
-import { SetIndex, SetDisabled, UpdateDefinition, WizardActionTypes, Next, SetDefinition } from '../../../wizard/action/wizard.action';
-import { LoadSchemaRequest, UpdateStatus } from '../action/editor.action';
+import { SetIndex, SetDisabled } from '../../../wizard/action/wizard.action';
+import { LoadSchemaRequest } from '../action/editor.action';
 import { startWith } from 'rxjs/operators';
 import { Wizard, WizardStep } from '../../../wizard/model';
 import { MetadataProvider } from '../../domain/model';
-import { MetadataProviderTypes, MetadataProviderWizard } from '../model';
-import { UpdateProvider } from '../action/entity.action';
-import { pick } from '../../../shared/util';
 
 @Component({
-    selector: 'provider-wizard-page',
+    selector: 'provider-wizard',
     templateUrl: './provider-wizard.component.html',
-    styleUrls: ['./provider-wizard.component.scss']
+    styleUrls: []
 })
 
-export class ProviderWizardComponent implements OnDestroy {
-    actionsSubscription: Subscription;
-
-    changeSubject = new Subject<Partial<any>>();
-    private changeEmitted$ = this.changeSubject.asObservable();
-
+export class ProviderWizardComponent {
     schema$: Observable<any>;
     schema: any;
     definition$: Observable<Wizard<MetadataProvider>>;
@@ -49,10 +38,7 @@ export class ProviderWizardComponent implements OnDestroy {
             .subscribe(s => {
                 this.store.dispatch(new LoadSchemaRequest(s));
             });
-
-        this.schema$ = this.store.select(fromProvider.getSchema);
         this.valid$ = this.store.select(fromProvider.getEditorIsValid);
-        this.definition$ = this.store.select(fromWizard.getWizardDefinition);
         this.changes$ = this.store.select(fromProvider.getEntityChanges);
         this.store.select(fromWizard.getNext).subscribe(n => this.nextStep = n);
         this.store.select(fromWizard.getPrevious).subscribe(p => this.previousStep = p);
@@ -62,38 +48,6 @@ export class ProviderWizardComponent implements OnDestroy {
             .subscribe((valid) => {
                 this.store.dispatch(new SetDisabled(!valid));
             });
-
-        this.schema$.subscribe(s => this.schema = s);
-
-        this.changeEmitted$
-            .pipe(
-                withLatestFrom(this.schema$, this.definition$),
-            )
-            .subscribe(
-                ([changes, schema, definition]) => {
-                    const type = changes.value['@type'];
-                    if (type && type !== definition.type) {
-                        const newDefinition = MetadataProviderTypes.find(def => def.type === type);
-                        if (newDefinition) {
-                            this.store.dispatch(new SetDefinition({
-                                ...MetadataProviderWizard,
-                                ...newDefinition,
-                                steps: [
-                                    ...MetadataProviderWizard.steps,
-                                    ...newDefinition.steps
-                                ]
-                            }));
-                            changes = { value: pick(Object.keys(schema.properties))(changes.value) };
-                        }
-                    }
-                    this.store.dispatch(new UpdateProvider(changes.value));
-                }
-            );
-    }
-
-    ngOnDestroy() {
-        this.actionsSubscription.unsubscribe();
-        this.changeSubject.complete();
     }
 
     next(): void {
@@ -109,10 +63,5 @@ export class ProviderWizardComponent implements OnDestroy {
     save(): void {
         console.log('Save!');
     }
-
-    onStatusChange(value): void {
-        const status = { [this.currentPage]: value ? 'VALID' : 'INVALID' };
-        this.store.dispatch(new UpdateStatus(status));
-    }
 }
 
diff --git a/ui/src/app/metadata/provider/container/new-provider.component.html b/ui/src/app/metadata/provider/container/provider.component.html
similarity index 100%
rename from ui/src/app/metadata/provider/container/new-provider.component.html
rename to ui/src/app/metadata/provider/container/provider.component.html
diff --git a/ui/src/app/metadata/provider/container/provider-wizard.component.scss b/ui/src/app/metadata/provider/container/provider.component.spec.ts
similarity index 100%
rename from ui/src/app/metadata/provider/container/provider-wizard.component.scss
rename to ui/src/app/metadata/provider/container/provider.component.spec.ts
diff --git a/ui/src/app/metadata/provider/container/new-provider.component.ts b/ui/src/app/metadata/provider/container/provider.component.ts
similarity index 81%
rename from ui/src/app/metadata/provider/container/new-provider.component.ts
rename to ui/src/app/metadata/provider/container/provider.component.ts
index d7581c566..c2955ca7a 100644
--- a/ui/src/app/metadata/provider/container/new-provider.component.ts
+++ b/ui/src/app/metadata/provider/container/provider.component.ts
@@ -11,11 +11,11 @@ import { SetDefinition, SetIndex } from '../../../wizard/action/wizard.action';
 import { MetadataProviderWizard } from '../model';
 
 @Component({
-    selector: 'new-provider-page',
-    templateUrl: './new-provider.component.html',
-    styleUrls: ['./new-provider.component.scss']
+    selector: 'provider-page',
+    templateUrl: './provider.component.html',
+    styleUrls: []
 })
-export class NewProviderComponent {
+export class ProviderComponent {
     types = MetadataProviderTypes;
 
     constructor(
diff --git a/ui/src/app/metadata/provider/provider.module.ts b/ui/src/app/metadata/provider/provider.module.ts
index 5379d9c94..25faea83a 100644
--- a/ui/src/app/metadata/provider/provider.module.ts
+++ b/ui/src/app/metadata/provider/provider.module.ts
@@ -5,7 +5,9 @@ import { RouterModule } from '@angular/router';
 import { StoreModule } from '@ngrx/store';
 
 import { ProviderWizardComponent } from './container/provider-wizard.component';
-import { NewProviderComponent } from './container/new-provider.component';
+import { ProviderWizardStepComponent } from './container/provider-wizard-step.component';
+import { ProviderWizardSummaryComponent } from './container/provider-wizard-summary.component';
+import { ProviderComponent } from './container/provider.component';
 import { WizardModule } from '../../wizard/wizard.module';
 import * as fromProvider from './reducer';
 import { EffectsModule } from '@ngrx/effects';
@@ -19,8 +21,10 @@ import { CustomWidgetRegistry } from '../../schema-form/registry';
 
 @NgModule({
     declarations: [
-        NewProviderComponent,
-        ProviderWizardComponent
+        ProviderComponent,
+        ProviderWizardComponent,
+        ProviderWizardStepComponent,
+        ProviderWizardSummaryComponent
     ],
     entryComponents: [],
     imports: [
diff --git a/ui/src/app/metadata/provider/provider.routing.ts b/ui/src/app/metadata/provider/provider.routing.ts
index ad783dc6a..15a20ae14 100644
--- a/ui/src/app/metadata/provider/provider.routing.ts
+++ b/ui/src/app/metadata/provider/provider.routing.ts
@@ -1,12 +1,14 @@
 import { Routes } from '@angular/router';
 
-import { NewProviderComponent } from './container/new-provider.component';
+import { ProviderComponent } from './container/provider.component';
 import { ProviderWizardComponent } from './container/provider-wizard.component';
+import { ProviderWizardSummaryComponent } from './container/provider-wizard-summary.component';
+import { ProviderWizardStepComponent } from './container/provider-wizard-step.component';
 
 export const ProviderRoutes: Routes = [
     {
         path: 'provider',
-        component: NewProviderComponent,
+        component: ProviderComponent,
         children: [
             {
                 path: 'wizard',
@@ -14,9 +16,20 @@ export const ProviderRoutes: Routes = [
                 pathMatch: 'prefix'
             },
             {
-                path: 'wizard/new',
+                path: 'wizard',
                 component: ProviderWizardComponent,
-                canActivate: []
+                canActivate: [],
+                children: [
+                    {
+                        path: 'new',
+                        component: ProviderWizardStepComponent
+                    },
+                    {
+                        path: 'summary',
+                        component: ProviderWizardSummaryComponent,
+                        canActivate: []
+                    }
+                ]
             }
         ]
     }