diff --git a/ui/src/app/metadata/domain/entity/filter/entity-attributes-filter.ts b/ui/src/app/metadata/domain/entity/filter/entity-attributes-filter.ts
index 82b5ae9d6..c3b9edc98 100644
--- a/ui/src/app/metadata/domain/entity/filter/entity-attributes-filter.ts
+++ b/ui/src/app/metadata/domain/entity/filter/entity-attributes-filter.ts
@@ -73,7 +73,7 @@ export class EntityAttributesFilter implements MetadataFilter, MetadataEntity {
         return {
             attributeRelease: this.attributeRelease,
             relyingPartyOverrides: this.relyingPartyOverrides,
-            entityAttributesFilterTarget: { ...this.entityAttributesFilterTarget },
+            entityAttributesFilterTarget: this.entityAttributesFilterTarget,
             filterEnabled: this.filterEnabled,
             name: this.name,
             '@type': 'EntityAttributes'
diff --git a/ui/src/app/metadata/domain/service/filter.service.spec.ts b/ui/src/app/metadata/domain/service/filter.service.spec.ts
index 1410f6723..571940935 100644
--- a/ui/src/app/metadata/domain/service/filter.service.spec.ts
+++ b/ui/src/app/metadata/domain/service/filter.service.spec.ts
@@ -6,6 +6,8 @@ import { EntityAttributesFilter } from '../entity';
 
 describe(`Metadata Filter Service`, () => {
 
+    const provider = 'foo';
+
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [
@@ -21,53 +23,53 @@ describe(`Metadata Filter Service`, () => {
     describe('query method', () => {
         it(`should send an expected GET[] request`, async(inject([MetadataFilterService, HttpTestingController],
             (service: MetadataFilterService, backend: HttpTestingController) => {
-                service.query().subscribe();
+                service.query(provider).subscribe();
 
                 backend.expectOne((req: HttpRequest<any>) => {
-                    return req.url === `${service.base}${service.endpoint}`
+                    return req.url === `${service.base}${service.endpoint}/${provider}/Filters`
                         && req.method === 'GET';
-                }, `GET MetadataResolvers collection`);
+                }, `GET MetadataFilter collection`);
             }
         )));
     });
     describe('find method', () => {
         it(`should send an expected GET request`, async(inject([MetadataFilterService, HttpTestingController],
             (service: MetadataFilterService, backend: HttpTestingController) => {
-                const id = 'foo';
-                service.find(id).subscribe();
+                const id = 'bar';
+                service.find(provider, id).subscribe();
 
                 backend.expectOne((req: HttpRequest<any>) => {
-                    return req.url === `${service.base}${service.endpoint}/${id}`
+                    return req.url === `${service.base}${service.endpoint}/${provider}/Filters/${id}`
                         && req.method === 'GET';
-                }, `GET MetadataResolvers collection`);
+                }, `GET MetadataFilter`);
             }
         )));
     });
     describe('update method', () => {
         it(`should send an expected PUT request`, async(inject([MetadataFilterService, HttpTestingController],
             (service: MetadataFilterService, backend: HttpTestingController) => {
-                const id = 'foo';
-                const filter = new EntityAttributesFilter({ id });
-                service.update(filter).subscribe();
+                const id = 'bar';
+                const filter = new EntityAttributesFilter({ resourceId: id });
+                service.update(provider, filter).subscribe();
 
                 backend.expectOne((req: HttpRequest<any>) => {
-                    return req.url === `${service.base}${service.endpoint}/${id}`
+                    return req.url === `${service.base}${service.endpoint}/${provider}/Filters/${ id }`
                         && req.method === 'PUT';
-                }, `PUT (update) MetadataResolvers collection`);
+                }, `PUT (update) MetadataFilter`);
             }
         )));
     });
     describe('save method', () => {
         it(`should send an expected POST request`, async(inject([MetadataFilterService, HttpTestingController],
             (service: MetadataFilterService, backend: HttpTestingController) => {
-                const id = 'foo';
+                const id = 'bar';
                 const filter = new EntityAttributesFilter({ id });
-                service.save(filter).subscribe();
+                service.save(provider, filter).subscribe();
 
                 backend.expectOne((req: HttpRequest<any>) => {
-                    return req.url === `${service.base}${service.endpoint}`
+                    return req.url === `${service.base}${service.endpoint}/${provider}/Filters`
                         && req.method === 'POST';
-                }, `POST MetadataResolvers collection`);
+                }, `POST MetadataFilter`);
             }
         )));
     });
diff --git a/ui/src/app/metadata/domain/service/filter.service.ts b/ui/src/app/metadata/domain/service/filter.service.ts
index b96907eca..ac9bc8ce1 100644
--- a/ui/src/app/metadata/domain/service/filter.service.ts
+++ b/ui/src/app/metadata/domain/service/filter.service.ts
@@ -13,20 +13,20 @@ export class MetadataFilterService {
     constructor(
         private http: HttpClient
     ) { }
-    query(): Observable<MetadataFilter[]> {
-        return this.http.get<MetadataFilter[]>(`${this.base}${this.endpoint}`, {});
+    query(providerId: string): Observable<MetadataFilter[]> {
+        return this.http.get<MetadataFilter[]>(`${this.base}${this.endpoint}/${providerId}/Filters`);
     }
 
-    find(id: string): Observable<MetadataFilter> {
+    find(providerId: string, filterId: string): Observable<MetadataFilter> {
         // console.log(id);
-        return this.http.get<MetadataFilter>(`${this.base}${this.endpoint}/${id}`);
+        return this.http.get<MetadataFilter>(`${this.base}${this.endpoint}/${providerId}/Filters/${ filterId }`);
     }
 
-    update(filter: MetadataFilter): Observable<MetadataFilter> {
-        return this.http.put<MetadataFilter>(`${this.base}${this.endpoint}/${filter.id}`, filter);
+    update(providerId: string, filter: MetadataFilter): Observable<MetadataFilter> {
+        return this.http.put<MetadataFilter>(`${this.base}${this.endpoint}/${providerId}/Filters/${ filter.resourceId }`, filter);
     }
 
-    save(filter: MetadataFilter): Observable<MetadataFilter> {
-        return this.http.post<MetadataFilter>(`${this.base}${this.endpoint}`, filter);
+    save(providerId: string, filter: MetadataFilter): Observable<MetadataFilter> {
+        return this.http.post<MetadataFilter>(`${this.base}${this.endpoint}/${providerId}/Filters`, filter);
     }
 }
diff --git a/ui/src/app/metadata/filter/action/collection.action.ts b/ui/src/app/metadata/filter/action/collection.action.ts
index 9ed93aaff..f220d84bb 100644
--- a/ui/src/app/metadata/filter/action/collection.action.ts
+++ b/ui/src/app/metadata/filter/action/collection.action.ts
@@ -53,7 +53,7 @@ export class SelectFilterFail implements Action {
 export class LoadFilterRequest implements Action {
     readonly type = FilterCollectionActionTypes.LOAD_FILTER_REQUEST;
 
-    constructor() { }
+    constructor(public payload: string) { }
 }
 
 export class LoadFilterSuccess implements Action {
diff --git a/ui/src/app/metadata/filter/container/edit-filter.component.ts b/ui/src/app/metadata/filter/container/edit-filter.component.ts
index 41d10a3e9..d2921013f 100644
--- a/ui/src/app/metadata/filter/container/edit-filter.component.ts
+++ b/ui/src/app/metadata/filter/container/edit-filter.component.ts
@@ -63,12 +63,14 @@ export class EditFilterComponent implements OnInit, OnDestroy {
         private valueEmitter: ProviderValueEmitter,
         private fb: FormBuilder
     ) {
-        this.changes$ = this.store.select(fromFilter.getFilter);
+        this.changes$ = this.store.select(fromFilter.getFilterWithChanges);
         this.changes$
             .pipe(
                 distinctUntilChanged()
             )
-            .subscribe(c => this.changes = new EntityAttributesFilter(c));
+            .subscribe(c => {
+                this.changes = new EntityAttributesFilter(c);
+            });
 
         this.showMore$ = this.store.select(fromFilter.getViewingMore);
         this.selected$ = this.store.select(fromFilter.getSelected);
diff --git a/ui/src/app/metadata/filter/container/filter.component.html b/ui/src/app/metadata/filter/container/filter.component.html
index 90c6b6463..3793ba3bf 100644
--- a/ui/src/app/metadata/filter/container/filter.component.html
+++ b/ui/src/app/metadata/filter/container/filter.component.html
@@ -1 +1,3 @@
-<router-outlet></router-outlet>
\ No newline at end of file
+<ng-container *ngIf="filter$ | async">
+    <router-outlet></router-outlet>
+</ng-container>
\ No newline at end of file
diff --git a/ui/src/app/metadata/filter/effect/collection.effect.ts b/ui/src/app/metadata/filter/effect/collection.effect.ts
index 5422f2d99..788e51329 100644
--- a/ui/src/app/metadata/filter/effect/collection.effect.ts
+++ b/ui/src/app/metadata/filter/effect/collection.effect.ts
@@ -4,11 +4,12 @@ import { Store } from '@ngrx/store';
 import { Router } from '@angular/router';
 
 import { of } from 'rxjs';
-import { switchMap, map, catchError, tap } from 'rxjs/operators';
+import { switchMap, map, catchError, tap, combineLatest, skipWhile } from 'rxjs/operators';
 
 import * as actions from '../action/collection.action';
 import { FilterCollectionActionTypes } from '../action/collection.action';
 import * as fromFilter from '../reducer';
+import * as fromProvider from '../../provider/reducer';
 import { MetadataFilter } from '../../domain/model';
 import { removeNulls } from '../../../shared/util';
 import { EntityAttributesFilter } from '../../domain/entity/filter/entity-attributes-filter';
@@ -21,9 +22,11 @@ export class FilterCollectionEffects {
     @Effect()
     loadFilters$ = this.actions$.pipe(
         ofType<actions.LoadFilterRequest>(FilterCollectionActionTypes.LOAD_FILTER_REQUEST),
-        switchMap(() =>
+        map(action => action.payload),
+        skipWhile(providerId => !providerId),
+        switchMap(providerId =>
             this.filterService
-                .query()
+                .query(providerId)
                 .pipe(
                     map(filters => new actions.LoadFilterSuccess(filters)),
                     catchError(error => of(new actions.LoadFilterError(error)))
@@ -34,9 +37,10 @@ export class FilterCollectionEffects {
     selectFilterRequest$ = this.actions$.pipe(
         ofType<actions.SelectFilter>(FilterCollectionActionTypes.SELECT_FILTER),
         map(action => action.payload),
-        switchMap(id => {
+        combineLatest(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
+        switchMap(([filterId, providerId]) => {
             return this.filterService
-                .find(id)
+                .find(providerId, filterId)
                 .pipe(
                     map(p => new actions.SelectFilterSuccess(p)),
                     catchError(error => of(new actions.SelectFilterFail(error)))
@@ -55,41 +59,37 @@ export class FilterCollectionEffects {
                 relyingPartyOverrides: removeNulls(new EntityAttributesFilter(filter).relyingPartyOverrides)
             };
         }),
-        switchMap(unsaved =>
-            this.filterService
-                .save(unsaved as MetadataFilter)
+        combineLatest(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
+        switchMap(([unsaved, providerId]) => {
+            return this.filterService
+                .save(providerId, unsaved as MetadataFilter)
                 .pipe(
                     map(saved => new actions.AddFilterSuccess(saved)),
                     catchError(error => of(new actions.AddFilterFail(error)))
-                )
-        )
+                );
+        })
     );
     @Effect({ dispatch: false })
     addFilterSuccessRedirect$ = this.actions$.pipe(
         ofType<actions.AddFilterSuccess>(FilterCollectionActionTypes.ADD_FILTER_SUCCESS),
         map(action => action.payload),
-        tap(filter => this.router.navigate(['/dashboard']))
-    );
-
-    @Effect()
-    addFilterSuccessReload$ = this.actions$.pipe(
-        ofType<actions.AddFilterSuccess>(FilterCollectionActionTypes.ADD_FILTER_SUCCESS),
-        map(action => action.payload),
-        map(filter => new actions.LoadFilterRequest())
+        combineLatest(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
+        tap(([filter, provider]) => this.router.navigate(['/', 'metadata', 'provider', provider, 'filters']))
     );
 
     @Effect()
     updateFilter$ = this.actions$.pipe(
         ofType<actions.UpdateFilterRequest>(FilterCollectionActionTypes.UPDATE_FILTER_REQUEST),
         map(action => action.payload),
-        switchMap(filter => {
+        combineLatest(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
+        switchMap(([filter, providerId]) => {
             delete filter.modifiedDate;
             delete filter.createdDate;
             return this.filterService
-                .update(filter)
+                .update(providerId, filter)
                 .pipe(
                     map(p => new actions.UpdateFilterSuccess({
-                        id: p.id,
+                        id: p.resourceId,
                         changes: p
                     })),
                     catchError(err => of(new actions.UpdateFilterFail(filter)))
@@ -100,13 +100,8 @@ export class FilterCollectionEffects {
     updateFilterSuccessRedirect$ = this.actions$.pipe(
         ofType<actions.UpdateFilterSuccess>(FilterCollectionActionTypes.UPDATE_FILTER_SUCCESS),
         map(action => action.payload),
-        tap(filter => this.router.navigate(['/dashboard']))
-    );
-    @Effect()
-    updateFilterSuccessReload$ = this.actions$.pipe(
-        ofType<actions.UpdateFilterSuccess>(FilterCollectionActionTypes.UPDATE_FILTER_SUCCESS),
-        map(action => action.payload),
-        map(filter => new actions.LoadFilterRequest())
+        combineLatest(this.store.select(fromProvider.getSelectedProviderId).pipe(skipWhile(id => !id))),
+        tap(([filter, provider]) => this.router.navigate(['/', 'metadata', 'provider', provider, 'filters']))
     );
 
     constructor(
diff --git a/ui/src/app/metadata/filter/effect/filter.effect.ts b/ui/src/app/metadata/filter/effect/filter.effect.ts
index 87b5a7f1c..1698333dd 100644
--- a/ui/src/app/metadata/filter/effect/filter.effect.ts
+++ b/ui/src/app/metadata/filter/effect/filter.effect.ts
@@ -58,18 +58,19 @@ export class FilterEffects {
         )
     );
 
+    /*
     @Effect({ dispatch: false })
     saveFilterSuccess$ = this.actions$.pipe(
         ofType<AddFilterSuccess>(FilterCollectionActionTypes.ADD_FILTER_SUCCESS),
         switchMap(() => this.router.navigate(['/dashboard']))
     );
-
     @Effect()
     cancelChanges$ = this.actions$.pipe(
         ofType<CancelCreateFilter>(FilterActionTypes.CANCEL_CREATE_FILTER),
         map(() => new LoadFilterRequest()),
         tap(() => this.router.navigate(['/dashboard']))
     );
+    */
 
     constructor(
         private store: Store<fromRoot.State>,
diff --git a/ui/src/app/metadata/filter/filter.module.ts b/ui/src/app/metadata/filter/filter.module.ts
index 22a7ed992..24111a113 100644
--- a/ui/src/app/metadata/filter/filter.module.ts
+++ b/ui/src/app/metadata/filter/filter.module.ts
@@ -19,27 +19,7 @@ import { SearchIdEffects } from './effect/search.effect';
 import { FilterExistsGuard } from './guard/filter-exists.guard';
 import { DomainModule } from '../domain/domain.module';
 import { ModuleWithProviders } from '@angular/compiler/src/core';
-
-
-export const routes: Routes = [
-    {
-        path: 'new',
-        component: NewFilterComponent,
-        canActivate: []
-    },
-    {
-        path: ':id',
-        component: FilterComponent,
-        canActivate: [FilterExistsGuard],
-        children: [
-            {
-                path: 'edit',
-                component: EditFilterComponent,
-                canDeactivate: []
-            }
-        ]
-    }
-];
+import { FilterCollectionEffects } from './effect/collection.effect';
 
 @NgModule({
     declarations: [
@@ -77,9 +57,8 @@ export class FilterModule {
 @NgModule({
     imports: [
         FilterModule,
-        RouterModule.forChild(routes),
         StoreModule.forFeature('filter', reducers),
-        EffectsModule.forFeature([FilterEffects, SearchIdEffects]),
+        EffectsModule.forFeature([FilterEffects, SearchIdEffects, FilterCollectionEffects]),
     ],
 })
 export class RootFilterModule { }
diff --git a/ui/src/app/metadata/filter/reducer/collection.reducer.spec.ts b/ui/src/app/metadata/filter/reducer/collection.reducer.spec.ts
index 0a5d9f74f..abd35ab48 100644
--- a/ui/src/app/metadata/filter/reducer/collection.reducer.spec.ts
+++ b/ui/src/app/metadata/filter/reducer/collection.reducer.spec.ts
@@ -1,20 +1,19 @@
-import { reducer } from './collection.reducer';
+import { reducer, initialState as snapshot } from './collection.reducer';
 import * as fromFilter from './collection.reducer';
 import {
     FilterCollectionActionTypes,
     LoadFilterSuccess,
     UpdateFilterSuccess,
-    SelectFilter
+    SelectFilter,
+    SelectFilterSuccess,
+    AddFilterRequest,
+    UpdateFilterRequest,
+    AddFilterSuccess,
+    AddFilterFail,
+    UpdateFilterFail
 } from '../action/collection.action';
 import { EntityAttributesFilter } from '../../domain/entity/filter/entity-attributes-filter';
 
-const snapshot: fromFilter.CollectionState = {
-    ids: [],
-    entities: {},
-    selectedFilterId: null,
-    loaded: false
-};
-
 describe('Filter Reducer', () => {
     describe('undefined action', () => {
         it('should return the default state', () => {
@@ -37,8 +36,8 @@ describe('Filter Reducer', () => {
         it('should add the loaded filters to the collection', () => {
             spyOn(fromFilter.adapter, 'addAll').and.callThrough();
             const filters = [
-                new EntityAttributesFilter({ id: 'foo', createdDate: new Date().toLocaleDateString() }),
-                new EntityAttributesFilter({ id: 'bar', createdDate: new Date().toLocaleDateString() })
+                new EntityAttributesFilter({ resourceId: 'foo', createdDate: new Date().toLocaleDateString() }),
+                new EntityAttributesFilter({ resourceId: 'bar', createdDate: new Date().toLocaleDateString() })
             ];
             const action = new LoadFilterSuccess(filters);
             const result = reducer(snapshot, action);
@@ -46,12 +45,60 @@ describe('Filter Reducer', () => {
         });
     });
 
+    describe(`${FilterCollectionActionTypes.SELECT_FILTER_SUCCESS}`, () => {
+        it('should add the loaded filter to the collection', () => {
+            spyOn(fromFilter.adapter, 'addOne').and.callThrough();
+            const filter = new EntityAttributesFilter({ resourceId: 'foo', createdDate: new Date().toLocaleDateString() });
+            const action = new SelectFilterSuccess(filter);
+            const result = reducer(snapshot, action);
+            expect(fromFilter.adapter.addOne).toHaveBeenCalled();
+        });
+    });
+
+    describe(`${FilterCollectionActionTypes.ADD_FILTER}`, () => {
+        it('should set saving to true', () => {
+            const filter = new EntityAttributesFilter({ resourceId: 'foo', createdDate: new Date().toLocaleDateString() });
+            const action = new AddFilterRequest(filter);
+            expect(reducer(snapshot, action).saving).toBe(true);
+        });
+    });
+    describe(`${FilterCollectionActionTypes.UPDATE_FILTER_REQUEST}`, () => {
+        it('should set saving to true', () => {
+            const filter = new EntityAttributesFilter({ resourceId: 'foo', createdDate: new Date().toLocaleDateString() });
+            const action = new UpdateFilterRequest(filter);
+            expect(reducer(snapshot, action).saving).toBe(true);
+        });
+    });
+
+    describe(`${FilterCollectionActionTypes.ADD_FILTER_SUCCESS}`, () => {
+        it('should set saving to false', () => {
+            const filter = new EntityAttributesFilter({ resourceId: 'foo', createdDate: new Date().toLocaleDateString() });
+            const action = new AddFilterSuccess(filter);
+            expect(reducer(snapshot, action).saving).toBe(false);
+        });
+    });
+
+    describe(`${FilterCollectionActionTypes.ADD_FILTER_FAIL}`, () => {
+        it('should set saving to false', () => {
+            const action = new AddFilterFail(new Error('error'));
+            expect(reducer(snapshot, action).saving).toBe(false);
+        });
+    });
+
+    describe(`${FilterCollectionActionTypes.UPDATE_FILTER_FAIL}`, () => {
+        it('should set saving to false', () => {
+            const filter = new EntityAttributesFilter({ resourceId: 'foo', createdDate: new Date().toLocaleDateString() });
+            const action = new UpdateFilterFail(filter);
+            expect(reducer(snapshot, action).saving).toBe(false);
+        });
+    });
+
     describe(`${FilterCollectionActionTypes.UPDATE_FILTER_SUCCESS}`, () => {
-        it('should add the loaded filters to the collection', () => {
+        it('should update the filter in the collection', () => {
             spyOn(fromFilter.adapter, 'updateOne').and.callThrough();
             const update = {
                 id: 'foo',
-                changes: new EntityAttributesFilter({ id: 'foo', name: 'bar', createdDate: new Date().toLocaleDateString() }),
+                changes: new EntityAttributesFilter({ resourceId: 'foo', name: 'bar', createdDate: new Date().toLocaleDateString() }),
             };
             const action = new UpdateFilterSuccess(update);
             const result = reducer(snapshot, action);
diff --git a/ui/src/app/metadata/filter/reducer/collection.reducer.ts b/ui/src/app/metadata/filter/reducer/collection.reducer.ts
index 2eeff6ff1..e71f0947c 100644
--- a/ui/src/app/metadata/filter/reducer/collection.reducer.ts
+++ b/ui/src/app/metadata/filter/reducer/collection.reducer.ts
@@ -5,6 +5,7 @@ import { MetadataFilter } from '../../domain/model';
 export interface CollectionState extends EntityState<MetadataFilter> {
     selectedFilterId: string | null;
     loaded: boolean;
+    saving: boolean;
 }
 
 export function sortByDate(a: MetadataFilter, b: MetadataFilter): number {
@@ -18,7 +19,8 @@ export const adapter: EntityAdapter<MetadataFilter> = createEntityAdapter<Metada
 
 export const initialState: CollectionState = adapter.getInitialState({
     selectedFilterId: null,
-    loaded: false
+    loaded: false,
+    saving: false
 });
 
 export function reducer(state = initialState, action: FilterCollectionActionsUnion): CollectionState {
@@ -32,8 +34,35 @@ export function reducer(state = initialState, action: FilterCollectionActionsUni
             return s;
         }
 
+        case FilterCollectionActionTypes.SELECT_FILTER_SUCCESS: {
+            return adapter.addOne(action.payload, {
+                ...state,
+                selectedFilterId: action.payload.resourceId
+            });
+        }
+
+        case FilterCollectionActionTypes.ADD_FILTER:
+        case FilterCollectionActionTypes.UPDATE_FILTER_REQUEST: {
+            return {
+                ...state,
+                saving: true
+            };
+        }
+
         case FilterCollectionActionTypes.UPDATE_FILTER_SUCCESS: {
-            return adapter.updateOne(action.payload, state);
+            return adapter.updateOne(action.payload, {
+                ...state,
+                saving: false
+            });
+        }
+
+        case FilterCollectionActionTypes.ADD_FILTER_SUCCESS:
+        case FilterCollectionActionTypes.ADD_FILTER_FAIL:
+        case FilterCollectionActionTypes.UPDATE_FILTER_FAIL: {
+            return {
+                ...state,
+                saving: false
+            };
         }
 
         case FilterCollectionActionTypes.SELECT_FILTER: {
@@ -51,6 +80,7 @@ export function reducer(state = initialState, action: FilterCollectionActionsUni
 
 export const getSelectedFilterId = (state: CollectionState) => state.selectedFilterId;
 export const getIsLoaded = (state: CollectionState) => state.loaded;
+export const getIsSaving = (state: CollectionState) => state.saving;
 export const {
     selectIds: selectFilterIds,
     selectEntities: selectFilterEntities,
diff --git a/ui/src/app/metadata/filter/reducer/index.ts b/ui/src/app/metadata/filter/reducer/index.ts
index 5ae10da51..6724af3a7 100644
--- a/ui/src/app/metadata/filter/reducer/index.ts
+++ b/ui/src/app/metadata/filter/reducer/index.ts
@@ -50,8 +50,26 @@ export const getViewingMore = createSelector(getSearchFromState, fromSearch.getV
 */
 export const getCollectionState = createSelector(getFilterState, getCollectionFromStateFn);
 export const getAllFilters = createSelector(getCollectionState, fromCollection.selectAllFilters);
+export const getFiltersSaving = createSelector(getCollectionState, fromCollection.getIsSaving);
+
+export const notAddtlFilters = ['RequiredValidUntil', 'SignatureValidation', 'EntityRoleWhiteList'];
+
+export const getAdditionalFilters = createSelector(
+    getAllFilters,
+    filters => filters.filter(f => notAddtlFilters.indexOf(f['@type']) === -1)
+);
+
+
 export const getFilterEntities = createSelector(getCollectionState, fromCollection.selectFilterEntities);
 export const getSelectedFilterId = createSelector(getCollectionState, fromCollection.getSelectedFilterId);
 export const getSelectedFilter = createSelector(getFilterEntities, getSelectedFilterId, utils.getInCollectionFn);
 export const getFilterIds = createSelector(getCollectionState, fromCollection.selectFilterIds);
 export const getFilterCollectionIsLoaded = createSelector(getCollectionState, fromCollection.getIsLoaded);
+
+/*
+ *   Combine pieces of State
+*/
+
+export const mergeFn = (changes, filter) => ({ ...filter, ...changes });
+
+export const getFilterWithChanges = createSelector(getFilter, getSelectedFilter, mergeFn);
diff --git a/ui/src/app/metadata/manager/component/provider-item.component.html b/ui/src/app/metadata/manager/component/provider-item.component.html
index 32cfd1d21..537ca75af 100644
--- a/ui/src/app/metadata/manager/component/provider-item.component.html
+++ b/ui/src/app/metadata/manager/component/provider-item.component.html
@@ -28,7 +28,7 @@
                 </div>
             </div>
             <div class="col-2 text-right">
-                <button class="btn btn-primary btn-filter pull-left">
+                <button class="btn btn-primary btn-filter pull-left" (click)="viewFilters.emit(provider)">
                         <i class="fa fa-filter"></i>&nbsp;
                         <span class="label">Active Filters</span>&nbsp;
                         <span class="badge badge-light">{{ provider.metadataFilters.length }}</span>
diff --git a/ui/src/app/metadata/manager/component/provider-item.component.spec.ts b/ui/src/app/metadata/manager/component/provider-item.component.spec.ts
new file mode 100644
index 000000000..23ad6bc62
--- /dev/null
+++ b/ui/src/app/metadata/manager/component/provider-item.component.spec.ts
@@ -0,0 +1,69 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ProviderItemComponent } from './provider-item.component';
+import { ViewChild, Component } from '@angular/core';
+import { MetadataProvider } from '../../domain/model';
+
+@Component({
+    template: `
+        <provider-item
+            [provider]="provider"
+            [isOpen]="isOpen">
+        </provider-item>
+    `
+})
+class TestHostComponent {
+    @ViewChild(ProviderItemComponent)
+    public componentUnderTest: ProviderItemComponent;
+
+    private _provider;
+    private _open;
+
+    public set isOpen(open: boolean) {
+        this._open = open;
+    }
+
+    public get isOpen(): boolean {
+        return this._open;
+    }
+
+    public set provider(provider: MetadataProvider) {
+        this._provider = provider;
+    }
+
+    public get provider(): MetadataProvider {
+        return this._provider;
+    }
+}
+
+describe('Provider List item', () => {
+    let fixture: ComponentFixture<TestHostComponent>;
+    let instance: TestHostComponent;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [],
+            imports: [
+                NoopAnimationsModule
+            ],
+            declarations: [
+                ProviderItemComponent,
+                TestHostComponent
+            ],
+        });
+
+        fixture = TestBed.createComponent(TestHostComponent);
+        instance = fixture.componentInstance;
+
+        instance.provider = <MetadataProvider>{
+            resourceId: 'foo',
+            metadataFilters: []
+        };
+    });
+
+    it('should compile', () => {
+        fixture.detectChanges();
+
+        expect(fixture).toBeDefined();
+    });
+});
diff --git a/ui/src/app/metadata/manager/component/provider-item.component.ts b/ui/src/app/metadata/manager/component/provider-item.component.ts
index 26249d7ab..b8f676f40 100644
--- a/ui/src/app/metadata/manager/component/provider-item.component.ts
+++ b/ui/src/app/metadata/manager/component/provider-item.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
 
 import { MetadataProvider } from '../../domain/model';
 import { EntityItemComponent } from './entity-item.component';
@@ -12,4 +12,6 @@ import { EntityItemComponent } from './entity-item.component';
 
 export class ProviderItemComponent extends EntityItemComponent {
     @Input() provider: MetadataProvider;
+
+    @Output() viewFilters: EventEmitter<MetadataProvider> = new EventEmitter();
 }
diff --git a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html
index dd6319e6c..7d2eab50a 100644
--- a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html
+++ b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html
@@ -15,6 +15,7 @@
                         [provider]="provider"
                         [isOpen]="(providersOpen$ | async)[provider.resourceId]"
                         (select)="edit(provider)"
+                        (viewFilters)="gotoFilters(provider)"
                         (toggle)="toggleEntity(provider)">
                     </provider-item>
                 </li>
diff --git a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.ts b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.ts
index 54f122c7c..bc2e609c4 100644
--- a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.ts
+++ b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.ts
@@ -29,8 +29,16 @@ export class DashboardProvidersListComponent {
         this.providersOpen$ = store.select(fromDashboard.getOpenProviders);
     }
 
+    view(id: string, page: string): void {
+        this.router.navigate(['metadata', 'provider', id, page]);
+    }
+
     edit(provider: MetadataProvider): void {
-        this.router.navigate(['metadata', 'provider', provider.resourceId, 'edit']);
+        this.view(provider.resourceId, 'edit');
+    }
+
+    gotoFilters(provider: MetadataProvider): void {
+        this.view(provider.resourceId, 'filters');
     }
 
     toggleEntity(provider: MetadataProvider): void {
diff --git a/ui/src/app/metadata/manager/reducer/search.reducer.ts b/ui/src/app/metadata/manager/reducer/search.reducer.ts
index 2ab931fc0..8614cbf94 100644
--- a/ui/src/app/metadata/manager/reducer/search.reducer.ts
+++ b/ui/src/app/metadata/manager/reducer/search.reducer.ts
@@ -25,23 +25,6 @@ export function reducer(state = initialState, action: searchActions.Actions): Se
             };
         }
 
-        case searchActions.ENTITY_FILTER: {
-            return {
-                ...state,
-                kind: action.payload,
-                loading: true
-            };
-        }
-
-        case searchActions.ENTITY_SEARCH_COMPLETE: {
-            return {
-                entities: action.payload,
-                loading: false,
-                query: state.query,
-                kind: state.kind
-            };
-        }
-
         default: {
             return state;
         }
diff --git a/ui/src/app/metadata/metadata.component.spec.ts b/ui/src/app/metadata/metadata.component.spec.ts
index dffc99361..89b2fc4ac 100644
--- a/ui/src/app/metadata/metadata.component.spec.ts
+++ b/ui/src/app/metadata/metadata.component.spec.ts
@@ -50,6 +50,6 @@ describe('Metadata Root Component', () => {
 
     it('should load metadata objects', async(() => {
         expect(app).toBeTruthy();
-        expect(store.dispatch).toHaveBeenCalledTimes(4);
+        expect(store.dispatch).toHaveBeenCalledTimes(3);
     }));
 });
diff --git a/ui/src/app/metadata/metadata.component.ts b/ui/src/app/metadata/metadata.component.ts
index 62170d286..1eb87324f 100644
--- a/ui/src/app/metadata/metadata.component.ts
+++ b/ui/src/app/metadata/metadata.component.ts
@@ -19,7 +19,6 @@ export class MetadataPageComponent {
         private store: Store<fromRoot.State>
     ) {
         this.store.dispatch(new LoadResolverRequest());
-        this.store.dispatch(new LoadFilterRequest());
         this.store.dispatch(new LoadDraftRequest());
         this.store.dispatch(new LoadProviderRequest());
     }
diff --git a/ui/src/app/metadata/provider/component/provider-editor-nav.component.html b/ui/src/app/metadata/provider/component/provider-editor-nav.component.html
new file mode 100644
index 000000000..3ce1eef57
--- /dev/null
+++ b/ui/src/app/metadata/provider/component/provider-editor-nav.component.html
@@ -0,0 +1,61 @@
+<ng-container  [ngSwitch]="format">
+    <div class="dropdown" ngbDropdown #dropdown="ngbDropdown" *ngSwitchCase="formats.DROPDOWN">
+        <button
+            class="btn btn-secondary"
+            role="button"
+            aria-haspopup="true"
+            aria-expanded="false"
+            ngbDropdownToggle>
+            <i class="fa fa-fw fa-bars fa-lg" aria-hidden="true"></i>
+            <span class="d-inline-block mx-2">
+                <i18n-text [key]="currentPage$ | async"></i18n-text>
+            </span>
+        </button>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink" ngbDropdownMenu>
+            <a class="dropdown-item"
+                [routerLink]="['../', 'filters']"
+                routerLinkActive="active"
+                aria-label="Filter List"
+                role="button">
+                <i18n-text key="Filter List"></i18n-text>
+            </a>
+            <a *ngFor="let route of routes$ | async"
+                href=""
+                class="dropdown-item"
+                [routerLink]="['./', route.path]"
+                [ngClass]="{'active': (currentPage$ | async) === route.path}"
+                [attr.aria-label]="route.label"
+                role="button">
+                <i18n-text [key]="route.label"></i18n-text>
+                <valid-form-icon *ngIf="(invalidForms$ | async).indexOf(route.path) > -1" status="INVALID"></valid-form-icon>
+            </a>
+        </div>
+    </div>
+    <ng-container  *ngSwitchCase="formats.TABS">
+        <nav class="nav nav-pills flex-column" role="navigation">
+            <a *ngFor="let route of routes$ | async"
+                href=""
+                class="nav-link"
+                [ngClass]="{'active': (currentPage$ | async) === route.path}"
+                [routerLink]="['../', 'edit', route.path]"
+                role="button"
+                [attr.aria-label]="route.label">
+                <i18n-text [key]="route.label"></i18n-text>
+                <valid-form-icon
+                    *ngIf="(invalidForms$ | async).indexOf(route.path) > -1"
+                    status="INVALID">
+                </valid-form-icon>
+            </a>
+        </nav>
+        <hr />
+        <nav class="nav nav-pills flex-column" role="navigation">
+            <a class="nav-link"
+                [routerLink]="['../', 'filters']"
+                routerLinkActive="active"
+                aria-label="Filter List"
+                role="button">
+                <i18n-text key="Filter List"></i18n-text>
+            </a>
+        </nav>
+    </ng-container>
+</ng-container>
diff --git a/ui/src/app/metadata/provider/component/provider-editor-nav.component.ts b/ui/src/app/metadata/provider/component/provider-editor-nav.component.ts
new file mode 100644
index 000000000..fd244a18f
--- /dev/null
+++ b/ui/src/app/metadata/provider/component/provider-editor-nav.component.ts
@@ -0,0 +1,50 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import { Observable } from 'rxjs';
+import { skipWhile, combineLatest, map } from 'rxjs/operators';
+
+import * as fromProvider from '../reducer';
+import { WizardStep, Wizard } from '../../../wizard/model';
+import * as fromWizard from '../../../wizard/reducer';
+import { MetadataProvider } from '../../domain/model';
+
+export enum NAV_FORMATS {
+    DROPDOWN = 'NAV_DROPDOWN',
+    TABS = 'NAV_TABS'
+}
+
+@Component({
+    selector: 'provider-editor-nav',
+    templateUrl: './provider-editor-nav.component.html',
+    styleUrls: []
+})
+
+export class ProviderEditorNavComponent {
+    @Input() format: string;
+
+    @Output() onPageSelect: EventEmitter<string> = new EventEmitter();
+
+    formats = NAV_FORMATS;
+
+    currentPage$: Observable<string>;
+    index$: Observable<string>;
+    invalidForms$: Observable<string[]>;
+    routes$: Observable<{ path: string, label: string }[]>;
+
+    constructor(
+        private store: Store<fromProvider.ProviderState>
+    ) {
+        this.index$ = this.store.select(fromWizard.getWizardIndex).pipe(skipWhile(i => !i));
+        this.routes$ = this.store.select(fromWizard.getRoutes);
+        this.currentPage$ = this.store.select(fromWizard.getCurrent).pipe(
+            map(p => p ? p.id : 'filters')
+        );
+        this.invalidForms$ = this.store.select(fromProvider.getInvalidEditorForms);
+    }
+
+    gotoPage(page: string = ''): void {
+        this.onPageSelect.emit(page);
+    }
+}
+
diff --git a/ui/src/app/metadata/provider/container/provider-edit.component.html b/ui/src/app/metadata/provider/container/provider-edit.component.html
index 98c8b0f64..6f15638b7 100644
--- a/ui/src/app/metadata/provider/container/provider-edit.component.html
+++ b/ui/src/app/metadata/provider/container/provider-edit.component.html
@@ -10,31 +10,10 @@
     <div class="section-body p-4 border border-top-0 border-info">
         <div class="row">
             <div class="col-6 d-lg-none order-1">
-                <div class="dropdown" ngbDropdown #dropdown="ngbDropdown">
-                    <button
-                        class="btn btn-secondary"
-                        role="button"
-                        aria-haspopup="true"
-                        aria-expanded="false"
-                        ngbDropdownToggle>
-                        <i class="fa fa-fw fa-bars fa-lg" aria-hidden="true"></i>
-                        <span class="d-inline-block mx-2">
-                            <i18n-text [key]="(currentPage$ | async).label"></i18n-text>
-                        </span>
-                    </button>
-                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink" ngbDropdownMenu>
-                        <a *ngFor="let route of (definition$ | async).steps"
-                            href=""
-                            class="dropdown-item"
-                            [ngClass]="{'active': (editorIndex$ | async) === route.index}"
-                            (click)="setIndex($event, route.id); dropdown.close()"
-                            [attr.aria-label]="route.label"
-                            role="button">
-                            <i18n-text [key]="route.label"></i18n-text>
-                            <valid-form-icon *ngIf="(invalidForms$ | async).indexOf(route.id) > -1" status="INVALID"></valid-form-icon>
-                        </a>
-                    </div>
-                </div>
+                <provider-editor-nav
+                    [format]="formats.DROPDOWN"
+                    (onPageSelect)="setIndex($event)">
+                </provider-editor-nav>
             </div>
             <div class="col-6 col-lg-3 order-2 text-right">
                 <button class="btn btn-info"
@@ -63,21 +42,10 @@
         <hr />
         <div class="row">
             <div class="col-lg-3 d-none d-lg-block">
-                <nav class="nav nav-pills flex-column" role="navigation">
-                    <a *ngFor="let route of (definition$ | async).steps"
-                        href=""
-                        class="nav-link"
-                        [ngClass]="{'active': (index$ | async) === route.id}"
-                        (click)="setIndex($event, route.id)"
-                        role="button"
-                        [attr.aria-label]="route.label">
-                        <i18n-text [key]="route.label"></i18n-text>
-                        <valid-form-icon
-                            *ngIf="(invalidForms$ | async).indexOf(route.id) > -1"
-                            status="INVALID">
-                        </valid-form-icon>
-                    </a>
-                </nav>
+                <provider-editor-nav
+                    [format]="formats.TABS"
+                    (onPageSelect)="setIndex($event)">
+                </provider-editor-nav>
             </div>
             <div class="col-lg-6">
                 <router-outlet></router-outlet>
diff --git a/ui/src/app/metadata/provider/container/provider-edit.component.spec.ts b/ui/src/app/metadata/provider/container/provider-edit.component.spec.ts
index 096a269c7..a62734833 100644
--- a/ui/src/app/metadata/provider/container/provider-edit.component.spec.ts
+++ b/ui/src/app/metadata/provider/container/provider-edit.component.spec.ts
@@ -11,6 +11,7 @@ import * as fromWizard from '../../../wizard/reducer';
 import { SharedModule } from '../../../shared/shared.module';
 import { ActivatedRouteStub } from '../../../../testing/activated-route.stub';
 import { FileBackedHttpMetadataProviderEditor } from '../model';
+import { ProviderEditorNavComponent } from '../component/provider-editor-nav.component';
 
 @Component({
     template: `
@@ -55,7 +56,8 @@ describe('Provider Edit Component', () => {
             ],
             declarations: [
                 ProviderEditComponent,
-                TestHostComponent
+                TestHostComponent,
+                ProviderEditorNavComponent
             ],
             providers: [
                 { provide: ActivatedRoute, useValue: activatedRoute },
@@ -79,13 +81,7 @@ describe('Provider Edit Component', () => {
 
     describe('setIndex method', () => {
         it('should interrupt event default and dispatch an event', () => {
-            const ev = <any>{
-                preventDefault: jasmine.createSpy('preventDefault'),
-                stopPropagation: jasmine.createSpy('stopPropagation')
-            };
-            app.setIndex(ev, 'common');
-            expect(ev.preventDefault).toHaveBeenCalled();
-            expect(ev.stopPropagation).toHaveBeenCalled();
+            app.setIndex('common');
             expect(store.dispatch).toHaveBeenCalled();
         });
     });
diff --git a/ui/src/app/metadata/provider/container/provider-edit.component.ts b/ui/src/app/metadata/provider/container/provider-edit.component.ts
index 79f5cb2a6..07a79a7cf 100644
--- a/ui/src/app/metadata/provider/container/provider-edit.component.ts
+++ b/ui/src/app/metadata/provider/container/provider-edit.component.ts
@@ -9,9 +9,9 @@ import { ClearWizard, SetDefinition, SetIndex } from '../../../wizard/action/wiz
 import { ClearEditor, LoadSchemaRequest } from '../action/editor.action';
 import { MetadataProvider } from '../../domain/model';
 import { ClearProvider } from '../action/entity.action';
-import { MetadataProviderEditorTypes } from '../model';
-import { Wizard, WizardStep } from '../../../wizard/model';
+import { Wizard } from '../../../wizard/model';
 import { UpdateProviderRequest } from '../action/collection.action';
+import { NAV_FORMATS } from '../component/provider-editor-nav.component';
 
 @Component({
     selector: 'provider-edit',
@@ -24,8 +24,6 @@ export class ProviderEditComponent implements OnDestroy {
     provider$: Observable<MetadataProvider>;
     definition$: Observable<Wizard<MetadataProvider>>;
     index$: Observable<string>;
-    invalidForms$: Observable<string[]>;
-    currentPage$: Observable<WizardStep>;
 
     valid$: Observable<boolean>;
     isInvalid$: Observable<boolean>;
@@ -33,6 +31,8 @@ export class ProviderEditComponent implements OnDestroy {
 
     latest: MetadataProvider;
 
+    formats = NAV_FORMATS;
+
     constructor(
         private store: Store<fromProvider.ProviderState>,
         private router: Router,
@@ -46,7 +46,7 @@ export class ProviderEditComponent implements OnDestroy {
         this.status$ = this.store.select(fromProvider.getInvalidEditorForms);
 
         let startIndex$ = this.route.firstChild ?
-            this.route.firstChild.params.pipe(map(p => p.form || 'filter-list')) :
+            this.route.firstChild.params.pipe(map(p => p.form || 'filters')) :
             this.definition$.pipe(map(d => d.steps[0].id));
 
         startIndex$
@@ -54,13 +54,6 @@ export class ProviderEditComponent implements OnDestroy {
                 this.store.dispatch(new SetIndex(index));
             });
 
-        this.provider$
-            .subscribe(provider => {
-                this.store.dispatch(new SetDefinition({
-                    ...MetadataProviderEditorTypes.find(def => def.type === provider['@type'])
-                }));
-            });
-
         this.index$.subscribe(id => this.go(id));
 
         this.store
@@ -73,20 +66,13 @@ export class ProviderEditComponent implements OnDestroy {
             });
 
         this.store.select(fromProvider.getEntityChanges).subscribe(changes => this.latest = changes);
-
-        this.invalidForms$ = this.store.select(fromProvider.getInvalidEditorForms);
-        this.currentPage$ = this.index$.pipe(
-            combineLatest(this.definition$, (index, definition) => (definition.steps.find(r => r.id === index)))
-        );
     }
 
     go(id: string): void {
         this.router.navigate(['./', id], { relativeTo: this.route });
     }
 
-    setIndex($event: Event, id: string): void {
-        $event.preventDefault();
-        $event.stopPropagation();
+    setIndex(id: string): void {
         this.store.dispatch(new SetIndex(id));
     }
 
diff --git a/ui/src/app/metadata/provider/container/provider-filter-list.component.html b/ui/src/app/metadata/provider/container/provider-filter-list.component.html
index a1c8e0b1d..53e99847c 100644
--- a/ui/src/app/metadata/provider/container/provider-filter-list.component.html
+++ b/ui/src/app/metadata/provider/container/provider-filter-list.component.html
@@ -1,5 +1,96 @@
-<form>
-    <fieldset>
-        <legend>Filter list.</legend>
-    </fieldset>
-</form>
\ No newline at end of file
+<section *ngIf="provider$ | async" class="section" [attr.aria-label]="'Edit metadata provider - ' + (provider$ | async).name"
+    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">
+                    <i class="fa fa-fw fa-gears"></i> Edit Metadata Provider - {{ (provider$ | async).name }}</span>
+            </div>
+        </div>
+    </div>
+    <div class="section-body p-4 border border-top-0 border-info">
+        <div class="row">
+            <div class="col-6 d-lg-none order-1">
+                <provider-editor-nav
+                    [format]="formats.DROPDOWN">
+                </provider-editor-nav>
+            </div>
+            <div class="col-6 col-lg-12 order-2 text-right">
+                <a [routerLink]="['../', 'filter', 'new']"
+                    class="btn btn-success">
+                    <i class="fa fa-plus-circle"></i>
+                    Add Filter
+                </a>
+            </div>
+        </div>
+        <hr />
+        <div class="row">
+            <div class="col-lg-3 d-none d-lg-block">
+                <provider-editor-nav
+                    [format]="formats.TABS">
+                </provider-editor-nav>
+            </div>
+            <div class="col-lg-9">
+                <table class="table table-striped table-hover">
+                    <thead class="">
+                        <tr>
+                            <!--<th>Sorting</th>-->
+                            <th></th>
+                            <th>Filter Name</th>
+                            <th>Filter Type</th>
+                            <th>Enabled?</th>
+                            <th>Edit</th>
+                            <!--<th>Delete</th>-->
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let filter of filters$ | async; let i = index;">
+                            <!--<td class="td-sm">
+                                <button class="btn btn-link">
+                                    <i class="fa fa-arrow-circle-up fa-lg sr-hidden"></i>
+                                    <span class="sr-only">Move Up</span>
+                                </button>
+                                <button class="btn btn-link">
+                                    <i class="fa fa-arrow-circle-down fa-lg sr-hidden"></i>
+                                    <span class="sr-only">Move Down</span>
+                                </button>
+                            </td>
+                             -->
+                            <td class="td-xs">{{ i + 1 }}</td>
+                            <td class="td-lg">{{ filter.name }}</td>
+                            <td class="td-lg">{{ filter['@type'] }}</td>
+                            <td class="td-sm">
+                                <button class="btn btn-link" (click)="toggleEnabled(filter)" [disabled]="isSaving$ | async">
+                                    <i class="fa fa-lg sr-hidden "
+                                        [ngClass]="{
+                                            'fa-check-square text-success': filter.filterEnabled,
+                                            'fa-square-o text-dark': !filter.filterEnabled
+                                        }"></i>
+                                    <span class="sr-only" *ngIf="!filter.filterEnabled">Enable</span>
+                                    <span class="sr-only" *ngIf="filter.filterEnabled">Disable</span>
+                                </button>
+                                <i class="fa fa-spinner fa-pulse fa-lg fa-fw" *ngIf="isSaving$ | async"></i>
+                            </td>
+                            <td class="td-sm">
+                                <a class="btn btn-link"
+                                    [class.disabled]="isSaving$ | async"
+                                    [routerLink]="['../', 'filter', filter.resourceId, 'edit']">
+                                    <i class="fa fa-edit fa-lg sr-hidden text-info"></i>
+                                    <span class="sr-only">Edit</span>
+                                </a>
+                            </td>
+                            <!--
+                            <td class="td-sm">
+                                <button class="btn btn-link">
+                                    <i class="fa fa-trash fa-lg sr-hidden text-danger"></i>
+                                    <span class="sr-only">Delete</span>
+                                </button>
+                            </td>
+                            -->
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</section>
diff --git a/ui/src/app/metadata/provider/container/provider-filter-list.component.scss b/ui/src/app/metadata/provider/container/provider-filter-list.component.scss
new file mode 100644
index 000000000..e1a2e17b9
--- /dev/null
+++ b/ui/src/app/metadata/provider/container/provider-filter-list.component.scss
@@ -0,0 +1,17 @@
+:host {
+    .table {
+        .td-sm {
+            max-width: 100px;
+        }
+        .td-xs {
+            max-width: 20px;
+        }
+        .td-lg {
+            width: 30%;
+        }
+
+        td {
+            vertical-align: middle;
+        }
+    }
+}
\ No newline at end of file
diff --git a/ui/src/app/metadata/provider/container/provider-filter-list.component.spec.ts b/ui/src/app/metadata/provider/container/provider-filter-list.component.spec.ts
index dd8c2ef95..f24673419 100644
--- a/ui/src/app/metadata/provider/container/provider-filter-list.component.spec.ts
+++ b/ui/src/app/metadata/provider/container/provider-filter-list.component.spec.ts
@@ -6,6 +6,9 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { ProviderFilterListComponent } from './provider-filter-list.component';
 import * as fromRoot from '../reducer';
 import * as fromWizard from '../../../wizard/reducer';
+import { ProviderEditorNavComponent } from '../component/provider-editor-nav.component';
+import { I18nTextComponent } from '../../../shared/component/i18n-text.component';
+import { ValidFormIconComponent } from '../../../shared/component/valid-form-icon.component';
 
 @Component({
     template: `
@@ -36,6 +39,9 @@ describe('Provider Filter List Component', () => {
             ],
             declarations: [
                 ProviderFilterListComponent,
+                ProviderEditorNavComponent,
+                I18nTextComponent,
+                ValidFormIconComponent,
                 TestHostComponent
             ],
             providers: []
diff --git a/ui/src/app/metadata/provider/container/provider-filter-list.component.ts b/ui/src/app/metadata/provider/container/provider-filter-list.component.ts
index a35bb9fc3..25dbcb0f1 100644
--- a/ui/src/app/metadata/provider/container/provider-filter-list.component.ts
+++ b/ui/src/app/metadata/provider/container/provider-filter-list.component.ts
@@ -1,14 +1,43 @@
 import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { skipWhile } from 'rxjs/operators';
 import * as fromProvider from '../reducer';
+import * as fromFilter from '../../filter/reducer';
+import { MetadataFilter, MetadataProvider } from '../../domain/model';
+import { NAV_FORMATS } from '../component/provider-editor-nav.component';
+import { SetIndex } from '../../../wizard/action/wizard.action';
+import { UpdateFilterRequest, LoadFilterRequest } from '../../filter/action/collection.action';
 
 @Component({
     selector: 'provider-filter-list',
     templateUrl: './provider-filter-list.component.html',
-    styleUrls: []
+    styleUrls: ['./provider-filter-list.component.scss']
 })
 export class ProviderFilterListComponent {
+
+    filters$: Observable<MetadataFilter[]>;
+    provider$: Observable<MetadataProvider>;
+    isSaving$: Observable<boolean>;
+
+    formats = NAV_FORMATS;
+
     constructor(
         private store: Store<fromProvider.ProviderState>
-    ) { }
+    ) {
+        this.filters$ = this.store.select(fromFilter.getAdditionalFilters);
+        this.provider$ = this.store.select(fromProvider.getSelectedProvider).pipe(skipWhile(p => !p));
+
+        this.store.dispatch(new SetIndex('filters'));
+
+        this.provider$.subscribe(p => {
+            this.store.dispatch(new LoadFilterRequest(p.resourceId));
+        });
+
+        this.isSaving$ = this.store.select(fromFilter.getFiltersSaving);
+    }
+
+    toggleEnabled(filter: MetadataFilter): void {
+        this.store.dispatch(new UpdateFilterRequest({ ...filter, filterEnabled: !filter.filterEnabled }));
+    }
 }
diff --git a/ui/src/app/metadata/provider/container/provider-select.component.ts b/ui/src/app/metadata/provider/container/provider-select.component.ts
index dc0bcaa6b..7ae2b180c 100644
--- a/ui/src/app/metadata/provider/container/provider-select.component.ts
+++ b/ui/src/app/metadata/provider/container/provider-select.component.ts
@@ -1,11 +1,14 @@
 import { Component, OnDestroy } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Subscription, Observable } from 'rxjs';
 import { Store } from '@ngrx/store';
 
 import { ActivatedRoute } from '@angular/router';
-import { map, distinctUntilChanged } from 'rxjs/operators';
+import { map, distinctUntilChanged, skipWhile } from 'rxjs/operators';
 import { SelectProviderRequest } from '../action/collection.action';
 import * as fromProviders from '../reducer';
+import { MetadataProvider } from '../../domain/model';
+import { SetDefinition } from '../../../wizard/action/wizard.action';
+import { MetadataProviderEditorTypes } from '../model';
 
 @Component({
     selector: 'provider-select',
@@ -16,14 +19,25 @@ import * as fromProviders from '../reducer';
 export class ProviderSelectComponent implements OnDestroy {
     actionsSubscription: Subscription;
 
+    provider$: Observable<MetadataProvider>;
+
     constructor(
-        store: Store<fromProviders.State>,
-        route: ActivatedRoute
+        private store: Store<fromProviders.State>,
+        private route: ActivatedRoute
     ) {
-        this.actionsSubscription = route.params.pipe(
+        this.actionsSubscription = this.route.params.pipe(
             distinctUntilChanged(),
             map(params => new SelectProviderRequest(params.providerId))
         ).subscribe(store);
+
+        this.provider$ = this.store.select(fromProviders.getSelectedProvider).pipe(skipWhile(p => !p));
+
+        this.provider$
+            .subscribe(provider => {
+                this.store.dispatch(new SetDefinition({
+                    ...MetadataProviderEditorTypes.find(def => def.type === provider['@type'])
+                }));
+            });
     }
 
     ngOnDestroy() {
diff --git a/ui/src/app/metadata/provider/model/file-backed-http.provider.form.ts b/ui/src/app/metadata/provider/model/file-backed-http.provider.form.ts
index 8d091c463..4ac744009 100644
--- a/ui/src/app/metadata/provider/model/file-backed-http.provider.form.ts
+++ b/ui/src/app/metadata/provider/model/file-backed-http.provider.form.ts
@@ -35,7 +35,7 @@ export const FileBackedHttpMetadataProviderWizard: Wizard<FileBackedHttpMetadata
             schema: 'assets/schema/provider/filebacked-http-reloading.schema.json'
         },
         {
-            id: 'filters',
+            id: 'plugins',
             label: 'Metadata Filter Plugins',
             index: 4,
             initialValues: [
@@ -57,11 +57,6 @@ export const FileBackedHttpMetadataProviderWizard: Wizard<FileBackedHttpMetadata
 export const FileBackedHttpMetadataProviderEditor: Wizard<FileBackedHttpMetadataProvider> = {
     ...FileBackedHttpMetadataProviderWizard,
     steps: [
-        {
-            id: 'filter-list',
-            label: 'Filter List',
-            index: 0
-        },
         {
             id: 'common',
             label: 'Common Attributes',
@@ -77,7 +72,7 @@ export const FileBackedHttpMetadataProviderEditor: Wizard<FileBackedHttpMetadata
             schema: 'assets/schema/provider/filebacked-http-reloading.schema.json'
         },
         {
-            id: 'filters',
+            id: 'plugins',
             label: 'Metadata Filter Plugins',
             index: 3,
             initialValues: [
diff --git a/ui/src/app/metadata/provider/provider.module.ts b/ui/src/app/metadata/provider/provider.module.ts
index 288adf30b..afd8409c4 100644
--- a/ui/src/app/metadata/provider/provider.module.ts
+++ b/ui/src/app/metadata/provider/provider.module.ts
@@ -4,13 +4,15 @@ import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { StoreModule } from '@ngrx/store';
 
+import { EffectsModule } from '@ngrx/effects';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+
 import { ProviderWizardComponent } from './container/provider-wizard.component';
 import { ProviderWizardStepComponent } from './container/provider-wizard-step.component';
 import { ProviderWizardSummaryComponent } from './component/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';
 import { EditorEffects } from './effect/editor.effect';
 
 import { WidgetRegistry} from 'ngx-schema-form';
@@ -24,7 +26,9 @@ import { ProviderSelectComponent } from './container/provider-select.component';
 import { ProviderEditStepComponent } from './container/provider-edit-step.component';
 import { EntityEffects } from './effect/entity.effect';
 import { ProviderFilterListComponent } from './container/provider-filter-list.component';
-import { NgbDropdownModule } from '../../../../node_modules/@ng-bootstrap/ng-bootstrap';
+
+import { ProviderEditorNavComponent } from './component/provider-editor-nav.component';
+import { ProviderResolver } from './resolver/provider.resolver';
 
 @NgModule({
     declarations: [
@@ -36,7 +40,8 @@ import { NgbDropdownModule } from '../../../../node_modules/@ng-bootstrap/ng-boo
         ProviderEditStepComponent,
         ProviderSelectComponent,
         ProviderFilterListComponent,
-        SummaryPropertyComponent
+        SummaryPropertyComponent,
+        ProviderEditorNavComponent
     ],
     entryComponents: [],
     imports: [
@@ -46,6 +51,7 @@ import { NgbDropdownModule } from '../../../../node_modules/@ng-bootstrap/ng-boo
         RouterModule,
         SharedModule,
         FormModule,
+        RouterModule,
         NgbDropdownModule
     ],
     exports: []
@@ -55,7 +61,8 @@ export class ProviderModule {
         return {
             ngModule: RootProviderModule,
             providers: [
-                { provide: WidgetRegistry, useClass: CustomWidgetRegistry }
+                { provide: WidgetRegistry, useClass: CustomWidgetRegistry },
+                ProviderResolver
             ]
         };
     }
diff --git a/ui/src/app/metadata/provider/provider.routing.ts b/ui/src/app/metadata/provider/provider.routing.ts
index cf491a92f..bd32d63e6 100644
--- a/ui/src/app/metadata/provider/provider.routing.ts
+++ b/ui/src/app/metadata/provider/provider.routing.ts
@@ -7,6 +7,11 @@ import { ProviderEditComponent } from './container/provider-edit.component';
 import { ProviderEditStepComponent } from './container/provider-edit-step.component';
 import { ProviderSelectComponent } from './container/provider-select.component';
 import { ProviderFilterListComponent } from './container/provider-filter-list.component';
+import { NewFilterComponent } from '../filter/container/new-filter.component';
+import { FilterComponent } from '../filter/container/filter.component';
+import { FilterExistsGuard } from '../filter/guard/filter-exists.guard';
+import { EditFilterComponent } from '../filter/container/edit-filter.component';
+import { ProviderResolver } from './resolver/provider.resolver';
 
 export const ProviderRoutes: Routes = [
     {
@@ -36,15 +41,32 @@ export const ProviderRoutes: Routes = [
                         path: 'edit',
                         component: ProviderEditComponent,
                         children: [
-                            {
-                                path: 'filter-list',
-                                component: ProviderFilterListComponent
-                            },
+                            { path: '', redirectTo: 'common', pathMatch: 'prefix' },
                             {
                                 path: ':form',
                                 component: ProviderEditStepComponent
                             }
                         ]
+                    },
+                    {
+                        path: 'filters',
+                        component: ProviderFilterListComponent
+                    },
+                    {
+                        path: 'filter/new',
+                        component: NewFilterComponent
+                    },
+                    {
+                        path: 'filter/:id',
+                        component: FilterComponent,
+                        canActivate: [],
+                        children: [
+                            {
+                                path: 'edit',
+                                component: EditFilterComponent,
+                                canDeactivate: []
+                            }
+                        ]
                     }
                 ]
             }
diff --git a/ui/src/app/metadata/provider/reducer/index.ts b/ui/src/app/metadata/provider/reducer/index.ts
index 7655e4314..d56ba8c0a 100644
--- a/ui/src/app/metadata/provider/reducer/index.ts
+++ b/ui/src/app/metadata/provider/reducer/index.ts
@@ -95,4 +95,8 @@ export const getProviderIds = createSelector(getCollectionState, fromCollection.
 export const getProviderCollectionIsLoaded = createSelector(getCollectionState, fromCollection.getIsLoaded);
 
 export const getProviderNames = createSelector(getAllProviders, (providers: MetadataProvider[]) => providers.map(p => p.name));
+
+export const getProviderFilters = createSelector(getSelectedProvider, provider => provider.metadataFilters);
+
 export const getProviderXmlIds = createSelector(getAllProviders, (providers: MetadataProvider[]) => providers.map(p => p.xmlId));
+
diff --git a/ui/src/app/metadata/provider/resolver/provider.resolver.ts b/ui/src/app/metadata/provider/resolver/provider.resolver.ts
new file mode 100644
index 000000000..9a527b8a9
--- /dev/null
+++ b/ui/src/app/metadata/provider/resolver/provider.resolver.ts
@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRoute } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Observable, of } from 'rxjs';
+import { map, distinctUntilChanged, skipWhile } from 'rxjs/operators';
+
+import * as fromCollection from '../reducer';
+import { MetadataProviderService } from '../../domain/service/provider.service';
+import { MetadataProvider } from '../../domain/model';
+import { SelectProviderRequest } from '../action/collection.action';
+
+/**
+ * Guards are hooks into the route resolution process, providing an opportunity
+ * to inform the router's navigation process whether the route should continue
+ * to activate this route. Guards must return an of true or false.
+ */
+@Injectable()
+export class ProviderResolver implements Resolve<Observable<MetadataProvider>> {
+    constructor(
+        private store: Store<fromCollection.State>,
+        private route: ActivatedRoute
+    ) { }
+
+    resolve() {
+        this.route.params.pipe(
+            distinctUntilChanged(),
+            map(params => {
+                return new SelectProviderRequest(params.providerId);
+            })
+        ).subscribe(this.store);
+
+        return this.store.select(fromCollection.getSelectedProvider).pipe(skipWhile(id => !id));
+    }
+}
diff --git a/ui/src/app/wizard/reducer/index.spec.ts b/ui/src/app/wizard/reducer/index.spec.ts
index 9c8b246f9..4bf95f7ae 100644
--- a/ui/src/app/wizard/reducer/index.spec.ts
+++ b/ui/src/app/wizard/reducer/index.spec.ts
@@ -83,8 +83,8 @@ describe('wizard index selectors', () => {
 
     describe('getModelFn method', () => {
         it('should return the model', () => {
-            const step = FileBackedHttpMetadataProviderWizard.steps.find(s => s.id === 'filters');
-            expect(selectors.getModelFn(step)).toEqual({ metadataFilters: [] });
+            const step = FileBackedHttpMetadataProviderWizard.steps.find(s => s.id === 'common');
+            expect(selectors.getModelFn(step)).toEqual({});
         });
     });
 });
diff --git a/ui/src/app/wizard/reducer/index.ts b/ui/src/app/wizard/reducer/index.ts
index 7e3db4c01..80e69255a 100644
--- a/ui/src/app/wizard/reducer/index.ts
+++ b/ui/src/app/wizard/reducer/index.ts
@@ -65,3 +65,5 @@ export const getCurrent = createSelector(getWizardIndex, getWizardDefinition, ge
 export const getNext = createSelector(getWizardIndex, getWizardDefinition, getNextFn);
 export const getLast = createSelector(getWizardIndex, getWizardDefinition, getLastFn);
 export const getModel = createSelector(getCurrent, getModelFn);
+
+export const getRoutes = createSelector(getWizardDefinition, d => d.steps.map(step => ({ path: step.id, label: step.label })));