diff --git a/ui/src/app/metadata/metadata.module.ts b/ui/src/app/metadata/metadata.module.ts
index c0f3e3657..259620bf1 100644
--- a/ui/src/app/metadata/metadata.module.ts
+++ b/ui/src/app/metadata/metadata.module.ts
@@ -7,6 +7,7 @@ import { DomainModule } from './domain/domain.module';
 import { MetadataPageComponent } from './metadata.component';
 import { ManagerModule } from './manager/manager.module';
 import { MetadataRoutingModule } from './metadata.routing';
+import { ProviderModule } from './provider/provider.module';
 
 
 @NgModule({
@@ -15,6 +16,7 @@ import { MetadataRoutingModule } from './metadata.routing';
         FilterModule.forRoot(),
         DomainModule.forRoot(),
         ManagerModule.forRoot(),
+        ProviderModule.forRoot(),
         MetadataRoutingModule
     ],
     providers: [],
diff --git a/ui/src/app/metadata/metadata.routing.ts b/ui/src/app/metadata/metadata.routing.ts
index 4ff73f652..d7e4d4b1a 100644
--- a/ui/src/app/metadata/metadata.routing.ts
+++ b/ui/src/app/metadata/metadata.routing.ts
@@ -14,6 +14,8 @@ import { EditorComponent } from './resolver/container/editor.component';
 import { CanDeactivateGuard } from '../core/service/can-deactivate.guard';
 import { DraftComponent } from './resolver/container/draft.component';
 import { WizardComponent } from './resolver/container/wizard.component';
+import { NewProviderComponent } from './provider/container/new-provider.component';
+import { ProviderWizardComponent } from './provider/container/wizard.component';
 
 const routes: Routes = [
     {
@@ -78,6 +80,15 @@ const routes: Routes = [
                         ]
                     }
                 ]
+            },
+            {
+                path: 'provider',
+                children: [
+                    {
+                        path: 'new',
+                        component: NewProviderComponent
+                    }
+                ]
             }
         ]
     },
diff --git a/ui/src/app/metadata/provider/container/new-provider.component.html b/ui/src/app/metadata/provider/container/new-provider.component.html
new file mode 100644
index 000000000..0e15a2650
--- /dev/null
+++ b/ui/src/app/metadata/provider/container/new-provider.component.html
@@ -0,0 +1,40 @@
+<div class="container-fluid p-3" role="main">
+    <section class="section" aria-label="Add a new metadata source - how are you adding the metadata information?" tabindex="0">
+        <div class="section-header bg-info p-2 text-white">
+            <div class="row justify-content-between">
+                <div class="col-md-12">
+                    <span class="display-6" i18n="@@label--add-a-new-metadata-resolver">Add a new metadata provider</span>
+                </div>
+            </div>
+        </div>
+        <div class="section-body p-4 border border-top-0 border-info">
+            <div class="row">
+                <div class="col col-xl-6 col-lg-9 col-xs-12">
+                    <form [formGroup]="form" role="form">
+                        <ul class="nav nav-wizard m-3">
+                            <li class="nav-item">
+                                <h3 class="tag tag-primary">
+                                    <span class="index">1</span>
+                                    <ng-container i18n="@@label--name-and-entityid">1. Name and EntityId</ng-container>
+                                </h3>
+                            </li>
+                            <li class="nav-item">
+                                <button class="nav-link next btn clearfix" (click)="next()" [disabled]="form.invalid" aria-label="Next: Step 2, Common Attributes"
+                                    role="button">
+                                    <span class="label pull-left">
+                                        2.
+                                        <ng-container i18n="@@label--common-attributes">Common Attributes</ng-container>
+                                    </span>
+                                    <span class="direction pull-right">
+                                        <i class="fa fa-fw fa-arrow-circle-right d-block fa-2x"></i>
+                                        <ng-container i18n="@@action--next">Next</ng-container>
+                                    </span>
+                                </button>
+                            </li>
+                        </ul>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/metadata/provider/container/new-provider.component.scss b/ui/src/app/metadata/provider/container/new-provider.component.scss
new file mode 100644
index 000000000..e3d0c671e
--- /dev/null
+++ b/ui/src/app/metadata/provider/container/new-provider.component.scss
@@ -0,0 +1,5 @@
+// :host {
+//     .provider-nav-option {
+//         width: 160px;
+//     }
+// }
diff --git a/ui/src/app/metadata/provider/container/new-provider.component.spec.ts b/ui/src/app/metadata/provider/container/new-provider.component.spec.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/src/app/metadata/provider/container/new-provider.component.ts b/ui/src/app/metadata/provider/container/new-provider.component.ts
new file mode 100644
index 000000000..e5023ac07
--- /dev/null
+++ b/ui/src/app/metadata/provider/container/new-provider.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { FormGroup, Validators, FormBuilder } from '@angular/forms';
+
+@Component({
+    selector: 'new-provider-page',
+    templateUrl: './new-provider.component.html',
+    styleUrls: ['./new-provider.component.scss']
+})
+export class NewProviderComponent {
+    form: FormGroup = this.fb.group({
+        name: ['', [Validators.required]],
+        '@type': ['', [Validators.required]]
+    });
+
+    constructor(
+        private fb: FormBuilder
+    ) {}
+
+    next(): void {}
+}
diff --git a/ui/src/app/metadata/provider/container/wizard.component.html b/ui/src/app/metadata/provider/container/wizard.component.html
new file mode 100644
index 000000000..a2dfdb02b
--- /dev/null
+++ b/ui/src/app/metadata/provider/container/wizard.component.html
@@ -0,0 +1,3 @@
+<div class="container-fluid p-3" role="main">
+    Hi. I'm the metadata provider wizard.
+</div>
diff --git a/ui/src/app/metadata/provider/container/wizard.component.scss b/ui/src/app/metadata/provider/container/wizard.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/src/app/metadata/provider/container/wizard.component.ts b/ui/src/app/metadata/provider/container/wizard.component.ts
new file mode 100644
index 000000000..8b5ec5510
--- /dev/null
+++ b/ui/src/app/metadata/provider/container/wizard.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+    selector: 'provider-wizard-page',
+    templateUrl: './wizard.component.html',
+    styleUrls: ['./wizard.component.scss']
+})
+
+export class ProviderWizardComponent {
+
+}
+
diff --git a/ui/src/app/metadata/provider/provider.module.ts b/ui/src/app/metadata/provider/provider.module.ts
index 891d34a7c..aa31612dc 100644
--- a/ui/src/app/metadata/provider/provider.module.ts
+++ b/ui/src/app/metadata/provider/provider.module.ts
@@ -1,9 +1,19 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ProviderWizardComponent } from './container/wizard.component';
+import { NewProviderComponent } from './container/new-provider.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
-    declarations: [],
+    declarations: [
+        NewProviderComponent,
+        ProviderWizardComponent
+    ],
     entryComponents: [],
-    imports: [],
+    imports: [
+        ReactiveFormsModule,
+        CommonModule
+    ],
     exports: []
 })
 export class ProviderModule {
@@ -17,9 +27,9 @@ export class ProviderModule {
 
 @NgModule({
     imports: [
-        ProviderModule,
+        ProviderModule
         // StoreModule.forFeature('provider', fromResolver.reducers),
         // EffectsModule.forFeature([])
-    ],
+    ]
 })
 export class RootProviderModule { }