diff --git a/ui/package.json b/ui/package.json
index 42dbf41a4..98bfc9ee7 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --proxy-config proxy.conf.json",
+    "start": "ng serve --proxy-config proxy.conf.json --i18nFile=./src/locale/en.xlf --i18nFormat=xlf --locale=es --aot",
     "build": "ng build",
     "test": "ng test --code-coverage",
     "lint": "ng lint",
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 2a0ada9c8..0cbc98e1d 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -11,18 +11,42 @@
     </button>
     <div class="collapse navbar-collapse" id="navbar">
         <ul class="navbar-nav ml-auto">
+            <li class="dropdown d-flex align-items-center" ngbDropdown placement="bottom-right" #dropdown="ngbDropdown">
+                <button
+                    class="btn btn-outline-primary btn-sm"
+                    id="addNewDropdown"
+                    role="button"
+                    aria-haspopup="true"
+                    aria-expanded="false"
+                    ngbDropdownToggle>
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
+                    <ng-container i18n="@@action--add-new">Add New</ng-container>
+                </button>
+                <div ngbDropdownMenu aria-labelledby="addNewDropdown">
+                    <a class="nav-link"
+                        routerLink="/metadata-filter/new"
+                        routerLinkActive="active"
+                        aria-label="Add a new metadata filter"
+                        role="button">
+                        <i class="fa fa-cubes" aria-hidden="true"></i>
+                        <ng-container i18n="@@action--add-filter">Filter</ng-container>
+                    </a>
+                    <a class="nav-link"
+                        routerLink="/new"
+                        routerLinkActive="active"
+                        aria-label="Launch wizard to add a new provider"
+                        role="button">
+                        <i class="fa fa-cube" aria-hidden="true"></i>
+                        <ng-container i18n="@@action--add-provider">Metadata Provider</ng-container>
+                    </a>
+                </div>
+            </li>
             <li class="nav-item">
                 <a class="nav-link" routerLink="/dashboard" routerLinkActive="active" aria-label="Service provider dashboard">
                     <i class="fa fa-th" aria-hidden="true"></i>
                     <ng-container i18n="@@action--manage-providers">Manage Providers</ng-container>
                 </a>
             </li>
-            <li class="nav-item">
-                <a class="nav-link" routerLink="/new" routerLinkActive="active" aria-label="Launch wizard to add a new provider">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
-                    <ng-container i18n="@@action--add-provider">Add new provider</ng-container>
-                </a>
-            </li>
             <li>
                 <a class="nav-link" href="/logout" target="_self" aria-label="Log out of Shibboleth UI">
                     <i class="fa fa-sign-out" aria-hidden="true"></i>
diff --git a/ui/src/app/app.component.scss b/ui/src/app/app.component.scss
index e72a7d96c..769799707 100644
--- a/ui/src/app/app.component.scss
+++ b/ui/src/app/app.component.scss
@@ -1,4 +1,8 @@
 @import '../theme/palette';
 nav.navbar {
     background-color: $white;
+
+    .dropdown-menu {
+        min-width: 12rem;
+    }
 }
\ No newline at end of file
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..a96424fdb
--- /dev/null
+++ b/ui/src/app/metadata-filter/container/new-filter.component.html
@@ -0,0 +1,17 @@
+<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>
+                        <ng-container i18n="@@label--new-filter">New Filter</ng-container>
+                    </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.spec.ts b/ui/src/app/metadata-filter/container/new-filter.component.spec.ts
new file mode 100644
index 000000000..642d26b8b
--- /dev/null
+++ b/ui/src/app/metadata-filter/container/new-filter.component.spec.ts
@@ -0,0 +1,36 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { StoreModule, Store, combineReducers } from '@ngrx/store';
+import { NewFilterComponent } from './new-filter.component';
+import * as fromFilter from '../reducer';
+
+describe('New Metadata Filter Page', () => {
+    let fixture: ComponentFixture<NewFilterComponent>;
+    let store: Store<fromFilter.State>;
+    let instance: NewFilterComponent;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [],
+            imports: [
+                StoreModule.forRoot({
+                    providers: combineReducers(fromFilter.reducers),
+                }),
+                ReactiveFormsModule
+            ],
+            declarations: [NewFilterComponent],
+        });
+
+        fixture = TestBed.createComponent(NewFilterComponent);
+        instance = fixture.componentInstance;
+        store = TestBed.get(Store);
+
+        spyOn(store, 'dispatch').and.callThrough();
+    });
+
+    it('should compile', () => {
+        fixture.detectChanges();
+
+        expect(fixture).toBeDefined();
+    });
+});
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: []
     }
 ];
 
diff --git a/ui/src/locale/en.xlf b/ui/src/locale/en.xlf
index 34522397b..bdb4d759d 100644
--- a/ui/src/locale/en.xlf
+++ b/ui/src/locale/en.xlf
@@ -18,14 +18,38 @@
           <context context-type="linenumber">17</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="action--add-provider" datatype="html">
-        <source>Add new provider</source>
-        <target>Add new provider</target>
+      <trans-unit id="action--add-new" datatype="html">
+        <source>Add New</source>
+        <target>Add New</target>
         <context-group purpose="location">
           <context context-type="sourcefile">app/app.component.ts</context>
           <context context-type="linenumber">23</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="action--add-provider" datatype="html">
+        <source>Metadata Provider</source>
+        <target>Metadata Provider</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/app.component.ts</context>
+          <context context-type="linenumber">40</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="action--add-filter" datatype="html">
+        <source>Filter</source>
+        <target>Filter</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/app.component.ts</context>
+          <context context-type="linenumber">32</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="label--new-filter" datatype="html">
+        <source>New Filter</source>
+        <target>New Filter</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/metadata-filter/container/new-filter.component.ts</context>
+          <context context-type="linenumber">8</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="action--logout" datatype="html">
         <source>Logout</source>
         <target>Logout</target>
diff --git a/ui/src/locale/es.xlf b/ui/src/locale/es.xlf
index a40224066..2a9c768de 100644
--- a/ui/src/locale/es.xlf
+++ b/ui/src/locale/es.xlf
@@ -18,14 +18,38 @@
           <context context-type="linenumber">17</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="action--add-provider" datatype="html">
-        <source>Add new provider</source>
-        <target>Add new provider (es)</target>
+      <trans-unit id="action--add-new" datatype="html">
+        <source>Add New</source>
+        <target>Add New (es)</target>
         <context-group purpose="location">
           <context context-type="sourcefile">app/app.component.ts</context>
           <context context-type="linenumber">23</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="action--add-provider" datatype="html">
+        <source>Metadata Provider</source>
+        <target>Metadata Provider (es)</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/app.component.ts</context>
+          <context context-type="linenumber">40</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="action--add-filter" datatype="html">
+        <source>Filter</source>
+        <target>Filter (es)</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/app.component.ts</context>
+          <context context-type="linenumber">32</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="label--new-filter" datatype="html">
+        <source>New Filter</source>
+        <target>New Filter (es)</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/metadata-filter/container/new-filter.component.ts</context>
+          <context context-type="linenumber">8</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="action--logout" datatype="html">
         <source>Logout</source>
         <target>Logout (es)</target>