diff --git a/ui/src/app/metadata/filter/container/select-filter.component.html b/ui/src/app/metadata/filter/container/select-filter.component.html
new file mode 100644
index 000000000..3793ba3bf
--- /dev/null
+++ b/ui/src/app/metadata/filter/container/select-filter.component.html
@@ -0,0 +1,3 @@
+<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/container/select-filter.component.scss b/ui/src/app/metadata/filter/container/select-filter.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/src/app/metadata/filter/container/select-filter.component.spec.ts b/ui/src/app/metadata/filter/container/select-filter.component.spec.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/src/app/metadata/filter/container/select-filter.component.ts b/ui/src/app/metadata/filter/container/select-filter.component.ts
new file mode 100644
index 000000000..97fe09d0f
--- /dev/null
+++ b/ui/src/app/metadata/filter/container/select-filter.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnDestroy } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable, Subscription } from 'rxjs';
+import { distinctUntilChanged, map } from 'rxjs/operators';
+import { Store } from '@ngrx/store';
+import { NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
+
+import { MetadataFilter } from '../../domain/model/metadata-filter';
+import { SelectFilter } from '../action/collection.action';
+import * as fromFilter from '../reducer';
+
+@Component({
+    selector: 'select-filter-page',
+    templateUrl: './select-filter.component.html',
+    styleUrls: ['./select-filter.component.scss'],
+    providers: [NgbPopoverConfig]
+})
+export class SelectFilterComponent implements OnDestroy {
+    actionsSubscription: Subscription;
+    filter$: Observable<MetadataFilter>;
+
+    constructor(
+        private store: Store<fromFilter.State>,
+        private route: ActivatedRoute
+    ) {
+        this.actionsSubscription = this.route.params.pipe(
+            distinctUntilChanged(),
+            map(params => {
+                return new SelectFilter(params.id);
+            })
+        ).subscribe(store);
+
+        this.filter$ = this.store.select(fromFilter.getSelectedFilter);
+    }
+
+    ngOnDestroy() {
+        this.actionsSubscription.unsubscribe();
+    }
+} /* istanbul ignore next */
diff --git a/ui/src/app/metadata/filter/service/filter-resolver.service.ts b/ui/src/app/metadata/filter/service/filter-resolver.service.ts
new file mode 100644
index 000000000..e6b2e76f6
--- /dev/null
+++ b/ui/src/app/metadata/filter/service/filter-resolver.service.ts
@@ -0,0 +1,7 @@
+this.provider$
+    .pipe(
+        takeUntil(this.ngUnsubscribe)
+    )
+    .subscribe(p => {
+        this.store.dispatch(new LoadFilterRequest(p.resourceId));
+    });
\ No newline at end of file