diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 2a0ada9c8..c4d8ef6d0 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -11,18 +11,28 @@
     </button>
     <div class="collapse navbar-collapse" id="navbar">
         <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown" ngbDropdown placement="bottom-right">
+                <button class="nav-link btn btn-primary" id="addNewDropdown" ngbDropdownToggle>
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
+                    Add New
+                </button>
+                <div ngbDropdownMenu aria-labelledby="addNewDropdown">
+                    <a class="nav-link" routerLink="/metadata-filter/new" routerLinkActive="active" aria-label="Add a new metadata filter">
+                        <i class="fa fa-cubes" aria-hidden="true"></i>
+                        <ng-container i18n="@@action--add-provider">Filter</ng-container>
+                    </a>
+                    <a class="nav-link" routerLink="/new" routerLinkActive="active" aria-label="Launch wizard to add a new provider">
+                        <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/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();
+    });
+});