diff --git a/ui/src/app/metadata/metadata.routing.ts b/ui/src/app/metadata/metadata.routing.ts
index 4ff73f652..01e8c68e8 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,65 @@ const routes: Routes = [
                         ]
                     }
                 ]
+            },
+            {
+                path: 'provider',
+                children: [
+                    {
+                        path: 'new',
+                        component: NewProviderComponent,
+                        children: [
+                            { path: '', redirectTo: 'blank', pathMatch: 'prefix' }
+                            // ,
+                            // {
+                            //     path: 'blank',
+                            //     component: BlankProviderComponent,
+                            //     canDeactivate: []
+                            // },
+                            // {
+                            //     path: 'upload',
+                            //     component: UploadProviderComponent,
+                            //     canDeactivate: []
+                            // },
+                            // {
+                            //     path: 'copy',
+                            //     component: CopyProviderComponent,
+                            //     canDeactivate: []
+                            // }
+                        ]
+                    },
+                    {
+                        path: 'new/copy/confirm',
+                        component: ConfirmCopyComponent,
+                        canActivate: [CopyIsSetGuard]
+                    },
+                    {
+                        path: ':id',
+                        component: ResolverComponent,
+                        canActivate: [],
+                        children: [
+                            { path: 'edit', redirectTo: 'edit/2' },
+                            {
+                                path: 'edit/:index',
+                                component: EditorComponent,
+                                canDeactivate: [CanDeactivateGuard]
+                            }
+                        ]
+                    },
+                    {
+                        path: ':entityId',
+                        component: DraftComponent,
+                        canActivate: [],
+                        children: [
+                            { path: 'wizard', redirectTo: 'wizard/2' },
+                            {
+                                path: 'wizard/:index',
+                                component: WizardComponent,
+                                canDeactivate: [CanDeactivateGuard]
+                            }
+                        ]
+                    }
+                ]
             }
         ]
     },
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..62c913437
--- /dev/null
+++ b/ui/src/app/metadata/provider/container/new-provider.component.html
@@ -0,0 +1,3 @@
+<div class="container-fluid p-3" role="main">
+    Hi. I'm a new provider component page.
+</div>
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..4dee1bf02
--- /dev/null
+++ b/ui/src/app/metadata/provider/container/new-provider.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+    selector: 'new-provider-page',
+    templateUrl: './new-provider.component.html',
+    styleUrls: ['./new-provider.component.scss']
+})
+export class NewProviderComponent {
+    constructor() {}
+} /* istanbul ignore next */
diff --git a/ui/src/app/metadata/provider/container/wizard.component.ts b/ui/src/app/metadata/provider/container/wizard.component.ts
index b04453cf4..8b5ec5510 100644
--- a/ui/src/app/metadata/provider/container/wizard.component.ts
+++ b/ui/src/app/metadata/provider/container/wizard.component.ts
@@ -1,13 +1,13 @@
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
-    selector: 'wizard-page',
+    selector: 'provider-wizard-page',
     templateUrl: './wizard.component.html',
     styleUrls: ['./wizard.component.scss']
 })
 
-export class WizardComponent {
+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..9bfd64dc7 100644
--- a/ui/src/app/metadata/provider/provider.module.ts
+++ b/ui/src/app/metadata/provider/provider.module.ts
@@ -1,7 +1,12 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ProviderWizardComponent } from './container/wizard.component';
+import { NewProviderComponent } from './container/new-provider.component';
 
 @NgModule({
-    declarations: [],
+    declarations: [
+        NewProviderComponent,
+        ProviderWizardComponent
+    ],
     entryComponents: [],
     imports: [],
     exports: []
@@ -17,9 +22,9 @@ export class ProviderModule {
 
 @NgModule({
     imports: [
-        ProviderModule,
+        ProviderModule
         // StoreModule.forFeature('provider', fromResolver.reducers),
         // EffectsModule.forFeature([])
-    ],
+    ]
 })
 export class RootProviderModule { }