diff --git a/ui/src/app/metadata-filter/action/filter.action.ts b/ui/src/app/metadata-filter/action/filter.action.ts
new file mode 100644
index 000000000..65046c903
--- /dev/null
+++ b/ui/src/app/metadata-filter/action/filter.action.ts
@@ -0,0 +1,12 @@
+import { Action } from '@ngrx/store';
+
+export const QUERY_ENTITY_IDS = '[Filter] Query Entity Ids';
+
+export class QueryEntityIds implements Action {
+    readonly type = QUERY_ENTITY_IDS;
+
+    constructor(public payload: string[]) { }
+}
+
+export type Actions =
+    | QueryEntityIds;
diff --git a/ui/src/app/metadata-filter/container/new-filter.component.html b/ui/src/app/metadata-filter/container/new-filter.component.html
new file mode 100644
index 000000000..5fb554c25
--- /dev/null
+++ b/ui/src/app/metadata-filter/container/new-filter.component.html
@@ -0,0 +1,15 @@
+<div class="container-fluid p-3" role="main">
+    <section class="section">
+        <div class="section-header bg-info p-2 text-light">
+            <div class="row justify-content-between">
+                <div class="col-md-12">
+                    <span class="display-6">
+                    <i class="fa fa-gears"></i> New Filter Page</span>
+                </div>
+            </div>
+        </div>
+        <div class="section-body p-4 border border-top-0 border-info">
+            Body
+        </div>
+    </section>
+</div>
diff --git a/ui/src/app/metadata-filter/container/new-filter.component.ts b/ui/src/app/metadata-filter/container/new-filter.component.ts
new file mode 100644
index 000000000..65be0f260
--- /dev/null
+++ b/ui/src/app/metadata-filter/container/new-filter.component.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import * as fromFilter from '../reducer';
+
+@Component({
+    selector: 'new-filter-page',
+    templateUrl: './new-filter.component.html'
+})
+export class NewFilterComponent {
+    constructor(
+        private store: Store<fromFilter.State>
+    ) {}
+
+    save(): void {}
+
+    cancel(): void {}
+}
diff --git a/ui/src/app/metadata-filter/filter.module.ts b/ui/src/app/metadata-filter/filter.module.ts
new file mode 100644
index 000000000..3e5da5f96
--- /dev/null
+++ b/ui/src/app/metadata-filter/filter.module.ts
@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+
+import { NewFilterComponent } from './container/new-filter.component';
+import { reducers } from './reducer';
+
+export const routes: Routes = [
+    {
+        path: 'new',
+        component: NewFilterComponent,
+        canActivate: []
+    }
+];
+
+@NgModule({
+    declarations: [
+        NewFilterComponent
+    ],
+    entryComponents: [],
+    imports: [
+        CommonModule,
+        RouterModule,
+        ReactiveFormsModule,
+        StoreModule.forFeature('metadata-filter', reducers),
+        EffectsModule.forFeature([]),
+        RouterModule.forChild(routes)
+    ],
+    providers: []
+})
+export class FilterModule { }
diff --git a/ui/src/app/metadata-filter/reducer/filter.reducer.ts b/ui/src/app/metadata-filter/reducer/filter.reducer.ts
new file mode 100644
index 000000000..5160096b0
--- /dev/null
+++ b/ui/src/app/metadata-filter/reducer/filter.reducer.ts
@@ -0,0 +1,20 @@
+import { createSelector, createFeatureSelector } from '@ngrx/store';
+import { MetadataProvider } from '../../metadata-provider/model/metadata-provider';
+import * as filter from '../action/filter.action';
+import * as fromRoot from '../../core/reducer';
+
+export interface FilterState {
+    entityIds: string[];
+}
+
+export const initialState: FilterState = {
+    entityIds: []
+};
+
+export function reducer(state = initialState, action: filter.Actions): FilterState {
+    switch (action.type) {
+        default: {
+            return state;
+        }
+    }
+}
diff --git a/ui/src/app/metadata-filter/reducer/index.ts b/ui/src/app/metadata-filter/reducer/index.ts
new file mode 100644
index 000000000..084b99714
--- /dev/null
+++ b/ui/src/app/metadata-filter/reducer/index.ts
@@ -0,0 +1,16 @@
+import { createSelector, createFeatureSelector } from '@ngrx/store';
+import * as fromRoot from '../../core/reducer';
+import * as fromFilter from './filter.reducer';
+
+export interface FilterState {
+    filter: fromFilter.FilterState;
+}
+
+export const reducers = {
+    filter: fromFilter.reducer
+};
+
+export interface State extends fromRoot.State {
+    'metadata-filter': FilterState;
+}
+
diff --git a/ui/src/app/routing.module.ts b/ui/src/app/routing.module.ts
index bca2b335a..79ba36f8b 100644
--- a/ui/src/app/routing.module.ts
+++ b/ui/src/app/routing.module.ts
@@ -12,6 +12,11 @@ const routes: Routes = [
         path: 'provider',
         loadChildren: './edit-provider/editor.module#EditorModule',
         canActivate: []
+    },
+    {
+        path: 'metadata-filter',
+        loadChildren: './metadata-filter/filter.module#FilterModule',
+        canActivate: []
     }
 ];