diff --git a/ui/src/app/admin/component/enable-metadata.component.html b/ui/src/app/admin/component/enable-metadata.component.html
index 01465184f..7d3558e09 100644
--- a/ui/src/app/admin/component/enable-metadata.component.html
+++ b/ui/src/app/admin/component/enable-metadata.component.html
@@ -1,4 +1,9 @@
-<ul class="list-unstyled m-0">
+<resolvers-list
+    [entities]="resolvers$ | async"
+    (delete)="deleteResolver($event)"
+    (toggleEnabled)="toggleResolverEnabled($event)"></resolvers-list>
+
+<!--<ul class="list-unstyled m-0">
     <li *ngFor="let resolver of resolvers$ | async; index as i"
         [ngClass]="{'mt-2': i > 0}"
         aria-label="Provider Item Accordion. Press Spacebar to open">
@@ -13,4 +18,4 @@
             [allowDelete]="true">
         </resolver-item>
     </li>
-</ul>
\ No newline at end of file
+</ul>-->
\ No newline at end of file
diff --git a/ui/src/app/admin/component/enable-metadata.component.ts b/ui/src/app/admin/component/enable-metadata.component.ts
index 83ac1e059..014e0dfa3 100644
--- a/ui/src/app/admin/component/enable-metadata.component.ts
+++ b/ui/src/app/admin/component/enable-metadata.component.ts
@@ -11,39 +11,25 @@ import * as fromMetadata from '../reducer';
 import { DeleteDialogComponent } from '../../metadata/manager/component/delete-dialog.component';
 import { PreviewEntity } from '../../metadata/domain/action/entity.action';
 import { FileBackedHttpMetadataResolver } from '../../metadata/domain/entity';
-import { RemoveMetadataRequest, UpdateMetadataRequest, LoadMetadataRequest } from '../action/metadata-collection.action';
+import { RemoveMetadataRequest, UpdateMetadataRequest } from '../action/metadata-collection.action';
 
 @Component({
     selector: 'enable-metadata',
     templateUrl: './enable-metadata.component.html'
 })
 
-export class EnableMetadataComponent implements OnInit {
-    resolvers$: Observable<FileBackedHttpMetadataResolver[]>;
-    loading$: Observable<boolean>;
-
-    total$: Observable<number>;
-    page = 1;
-    limit = 8;
-
-    entitiesOpen$: Observable<{ [key: string]: boolean }>;
+export class EnableMetadataComponent {
+    resolvers$: Observable<FileBackedHttpMetadataResolver[]> = this.store
+        .select(fromMetadata.getMetadataCollection)
+        .pipe(
+            map(resolvers => resolvers.map(r => new FileBackedHttpMetadataResolver(r)))
+        );
 
     constructor(
         private store: Store<fromDashboard.DashboardState>,
         private router: Router,
         private modalService: NgbModal
-    ) {
-        this.resolvers$ = this.store
-            .select(fromMetadata.getMetadataCollection)
-            .pipe(
-                map(resolvers => resolvers.map(r => new FileBackedHttpMetadataResolver(r)))
-            );
-        this.loading$ = this.store.select(fromDashboard.getSearchLoading);
-
-        this.total$ = this.resolvers$.pipe(map(list => list.length));
-    }
-
-    ngOnInit(): void {}
+    ) {}
 
     edit(entity: MetadataEntity): void {
         this.router.navigate(['metadata', 'resolver', entity.getId(), 'edit']);
@@ -53,8 +39,8 @@ export class EnableMetadataComponent implements OnInit {
         this.store.dispatch(new PreviewEntity({ id: entity.getId(), entity }));
     }
 
-    toggleResolverEnabled(entity: MetadataResolver, enabled: boolean): void {
-        let update = { ...entity, serviceEnabled: enabled };
+    toggleResolverEnabled(entity: MetadataResolver): void {
+        let update = { ...entity, serviceEnabled: !entity.serviceEnabled };
         this.store.dispatch(new UpdateMetadataRequest(update));
     }
 
diff --git a/ui/src/app/metadata/manager/component/entity-item.component.spec.ts b/ui/src/app/metadata/manager/component/entity-item.component.spec.ts
deleted file mode 100644
index 66ac9eacc..000000000
--- a/ui/src/app/metadata/manager/component/entity-item.component.spec.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { EntityItemComponent } from './entity-item.component';
-import { FileBackedHttpMetadataResolver } from '../../domain/entity';
-import { MockI18nModule } from '../../../../testing/i18n.stub';
-
-describe('Resolver List item', () => {
-    let fixture: ComponentFixture<EntityItemComponent>;
-    let instance: EntityItemComponent;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            providers: [],
-            imports: [
-                NoopAnimationsModule,
-                MockI18nModule
-            ],
-            declarations: [EntityItemComponent],
-        });
-
-        fixture = TestBed.createComponent(EntityItemComponent);
-        instance = fixture.componentInstance;
-    });
-
-    it('should compile', () => {
-        fixture.detectChanges();
-
-        expect(fixture).toBeDefined();
-    });
-});
diff --git a/ui/src/app/metadata/manager/component/entity-item.component.ts b/ui/src/app/metadata/manager/component/entity-item.component.ts
deleted file mode 100644
index 274b6ddf1..000000000
--- a/ui/src/app/metadata/manager/component/entity-item.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
-
-import { MetadataEntity } from '../../domain/model';
-import { MetadataTypes } from '../../domain/domain.type';
-
-@Component({
-    selector: 'entity-item',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    template: '',
-    styleUrls: []
-})
-export class EntityItemComponent {
-    types = MetadataTypes;
-    @Input() isOpen: boolean;
-    @Input() allowDelete: boolean;
-    @Input() showAdminFunctions: boolean;
-    @Output() toggleEnabled = new EventEmitter();
-    @Output() select = new EventEmitter();
-    @Output() toggle = new EventEmitter();
-    @Output() preview = new EventEmitter();
-    @Output() delete = new EventEmitter();
-    @Output() history = new EventEmitter();
-}
diff --git a/ui/src/app/metadata/manager/component/provider-item.component.html b/ui/src/app/metadata/manager/component/provider-item.component.html
deleted file mode 100644
index a4270ce3d..000000000
--- a/ui/src/app/metadata/manager/component/provider-item.component.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<!-- TODO -->
-<div class="card">
-    <div class="card-header" (click)="toggle.emit(provider)" (keydown.space)="toggle.emit(provider)" tabindex="0">
-        <div class="d-flex">
-            <div class="reorder-card">
-                <p class="text-center text-primary font-weight-bold">{{ index }}</p>
-                <button
-                    class="btn btn-link"
-                    (click)="changeOrderDown.emit(provider); $event.stopPropagation();"
-                    [disabled]="last"
-                    aria-label="Decrease reorder by 1">
-                    <i class="fa text-info fa-lg fa-chevron-circle-down" aria-hidden="true"></i>
-                </button>
-                <button
-                    class="btn btn-link pull-right"
-                    (click)="changeOrderUp.emit(provider); $event.stopPropagation();"
-                    [disabled]="first"
-                    aria-label="Increase reorder by 1">
-                    <i class="fa text-info fa-lg fa-chevron-circle-up" aria-hidden="true"></i>
-                </button>
-            </div>
-            <div class="flex-grow-1">
-                <div class="w-10 pr-3 pull-left">
-                    <i class="fa fa-fw fa-3x text-primary" [class.fa-caret-right]="!isOpen" [class.fa-caret-down]="isOpen"></i>
-                    &nbsp;
-                    <span class="label-icon sr-hidden">
-                        <i class="fa fa-fw fa-3x text-info fa-cubes"></i>
-                    </span>
-                </div>
-                <div class="px-2">
-                    {{ provider.name }}
-                    <i class="fa fa-fw" [ngClass]="{
-                        'fa-check-circle text-success': provider.enabled,
-                        'fa-times-circle text-danger': !provider.enabled
-                    }"></i>
-                    <small class="d-block">{{ provider['@type'] }}</small>
-                </div>
-            </div>
-            <div>
-                <button class="btn btn-primary btn-filter pull-left" (click)="viewFilters.emit(provider)" *ngIf="hasFilters(provider)">
-                    <i class="fa fa-filter"></i>&nbsp;
-                    <span class="label" translate="action.manage-filters">Manage Filters</span>
-                </button>
-                <button class="btn btn-link pull-right" (click)="select.emit(provider)" aria-label="Edit selected service provider">
-                    <i class="fa fa-fw fa-edit fa-2x"></i>
-                </button>
-            </div>
-        </div>
-    </div>
-    <div class="collapse" [ngClass]="{'show': isOpen}">
-        <div class="card-body" tabindex="0">
-            <div class="row">
-                <div class="col-10">
-                    <div class="row">
-                        <div class="col text-right font-weight-bold" translate="label.metadata-provider-name">
-                            Metadata Provider Name:
-                        </div>
-                        <div class="col">{{ provider.name }}</div>
-                        <div class="col text-right font-weight-bold" translate="label.created-date">
-                            Created Date:
-                        </div>
-                        <div class="col">{{ provider.createdDate | customDate }}</div>
-                    </div>
-                    <div class="row">
-                        <div class="col text-right font-weight-bold" translate="label.metadata-provider-type">
-                            Metadata Provider Type:
-                        </div>
-                        <div class="col">{{ provider['@type'] }}</div>
-                        <div class="col text-right font-weight-bold" translate="label.metadata-provider-status">
-                            Metadata Provider Status:
-                        </div>
-                        <div class="col">
-                            <i class="fa fa-fw" [ngClass]="{
-                                'fa-check-circle text-success': provider.enabled,
-                                'fa-times-circle text-danger': !provider.enabled
-                            }"></i>
-                            <span *ngIf="provider.enabled" translate="value.enabled">Enabled</span>
-                            <span *ngIf="!provider.enabled" translate="value.disabled">Disabled</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-
diff --git a/ui/src/app/metadata/manager/component/provider-item.component.scss b/ui/src/app/metadata/manager/component/provider-item.component.scss
deleted file mode 100644
index 2ab451b75..000000000
--- a/ui/src/app/metadata/manager/component/provider-item.component.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-@import '../../../../theme/palette';
-
-.card {
-    background-color: rgba($light-grey, 0.5);
-    &:focus {
-        outline: -webkit-focus-ring-color auto 5px;
-    }
-    .btn-link {
-        &:focus {
-            outline: -webkit-focus-ring-color auto 5px;
-        }
-    }
-
-    .label-icon {
-        display: inline-block;
-        min-width: 64px;
-        text-align: center;
-    }
-
-    .reorder-card {
-        width: 65px;
-        margin-left: 20px;
-        background-color: $white;
-        border: 1px solid $gray-400;
-        border-radius: 4px;
-
-        p {
-            margin-bottom: 0;
-            padding-top: 3px;
-            font-size: 1.40rem;
-            line-height: 1;
-        }
-
-        .btn {
-            padding: 2px 5px;
-        }
-    }
-
-    .btn-filter {
-        .label {
-            font-size: .90rem;
-        }
-    }
-}
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
deleted file mode 100644
index 37145c6c2..000000000
--- a/ui/src/app/metadata/manager/component/provider-item.component.spec.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-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';
-import { MockI18nModule } from '../../../../testing/i18n.stub';
-import { CustomDatePipe } from '../../../shared/pipe/date.pipe';
-
-@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,
-                MockI18nModule
-            ],
-            declarations: [
-                ProviderItemComponent,
-                TestHostComponent,
-                CustomDatePipe
-            ],
-        });
-
-        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
deleted file mode 100644
index 514c5b9fe..000000000
--- a/ui/src/app/metadata/manager/component/provider-item.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
-
-import { MetadataProvider } from '../../domain/model';
-import { EntityItemComponent } from './entity-item.component';
-import { FilterableProviders } from '../../provider/model';
-
-@Component({
-    selector: 'provider-item',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    templateUrl: './provider-item.component.html',
-    styleUrls: ['./provider-item.component.scss']
-})
-
-export class ProviderItemComponent extends EntityItemComponent {
-    @Input() provider: MetadataProvider;
-    @Input() index: number;
-    @Input() first: boolean;
-    @Input() last: boolean;
-
-    @Output() viewFilters: EventEmitter<MetadataProvider> = new EventEmitter();
-
-    @Output() changeOrderUp: EventEmitter<MetadataProvider> = new EventEmitter();
-    @Output() changeOrderDown: EventEmitter<MetadataProvider> = new EventEmitter();
-
-    hasFilters(provider: MetadataProvider): boolean {
-        return FilterableProviders.indexOf(provider['@type']) > -1;
-    }
-}
diff --git a/ui/src/app/metadata/manager/component/resolver-item.component.html b/ui/src/app/metadata/manager/component/resolver-item.component.html
deleted file mode 100644
index 915a51906..000000000
--- a/ui/src/app/metadata/manager/component/resolver-item.component.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<div class="card">
-    <div class="card-header" (click)="toggle.emit(entity)" (keydown.space)="toggle.emit(entity)" tabindex="0">
-        <div class="row">
-            <div class="col-8 clearfix">
-                <div class="w-10 pr-3 pull-left">
-                    <i class="fa fa-fw fa-3x text-primary" [class.fa-caret-right]="!isOpen" [class.fa-caret-down]="isOpen"></i>
-                    &nbsp;
-                    <span class="label-icon sr-hidden" [ngSwitch]="entity.kind">
-                        <i class="fa fa-fw fa-3x text-info fa-cubes" *ngSwitchCase="types.FILTER"></i>
-                        <i class="fa fa-fw fa-3x text-info fa-cube" *ngSwitchCase="types.RESOLVER"></i>
-                        <i class="fa fa-fw fa-3x text-info fa-" *ngSwitchDefault></i>
-                    </span>
-                </div>
-                <div>
-                    {{ entity.name }}
-                    <i *ngIf="!entity.isDraft()" class="fa fa-fw" [ngClass]="{
-                        'fa-check-circle text-success': entity.enabled,
-                        'fa-times-circle text-danger': !entity.enabled
-                    }"></i>
-                    <span *ngIf="entity.isDraft()" class="badge badge-warning" translate="message.incomplete-form" aria-label="Warning Badge: Incomplete Form">Incomplete Form</span>
-                    <small class="d-block">{{ entity.getDisplayId() }}</small>
-                </div>
-            </div>
-            <div class="col-4 text-right">
-                <button *ngIf="showAdminFunctions"
-                    [class.btn-success]="entity.enabled"
-                    [class.btn-danger]="!entity.enabled"
-                    class="btn text-capitalize"
-                    (click)="toggleEnabled.emit(entity); $event.stopPropagation()"
-                    aria-label="Enable this service provider">
-                    <translate-i18n *ngIf="entity.enabled" key="label.disable">Disable</translate-i18n>
-                    <translate-i18n *ngIf="!entity.enabled" key="label.enable">Enable</translate-i18n>
-                    <i class="fa fa-fw fa-check-square-o fa-lg" *ngIf="entity.enabled"></i>
-                    <i class="fa fa-fw fa-square-o fa-lg" *ngIf="!entity.enabled"></i>
-                </button>
-                <button class="btn btn-link"
-                    (click)="preview.emit(entity); $event.stopPropagation()"
-                    *ngIf="!entity.isDraft()"
-                    aria-label="Review the XML of the selected service provider">
-                    <i class="fa fa-fw fa-eye fa-2x"></i>
-                </button>
-                <!--
-                <button class="btn btn-link"
-                    (click)="history.emit(entity); $event.stopPropagation()"
-                    aria-label="Review the version history of selected provider">
-                    <i class="fa fa-fw fa-2x fa-history"></i>
-                </button>
-                -->
-                <button class="btn btn-link"
-                    (click)="select.emit(entity); $event.stopPropagation()"
-                    aria-label="Edit selected service provider">
-                    <i class="fa fa-fw fa-edit fa-2x"></i>
-                </button>
-            </div>
-        </div>
-    </div>
-    <div class="collapse" [ngClass]="{'show': isOpen}">
-        <div class="card-body" tabindex="0">
-            <div class="row">
-                <div class="col-10">
-                    <div class="row">
-                        <div class="col text-right font-weight-bold" translate="label.service-provider">
-                            Metadata Source Name:
-                        </div>
-                        <div class="col">{{ entity.name }}</div>
-                        <div class="col text-right font-weight-bold" translate="label.created-date">Created Date:</div>
-                        <div class="col" *ngIf="!entity.isDraft()">{{ entity.getCreationDate() | customDate }}</div>
-                        <div class="col" *ngIf="entity.isDraft()"> &mdash; </div>
-                    </div>
-                    <div class="row">
-                        <div class="col text-right font-weight-bold" translate="label.service-entity-id">
-                            Metadata Source Entity ID:
-                        </div>
-                        <div class="col">{{ entity.getDisplayId() }}</div>
-                        <div class="col text-right font-weight-bold" translate="label.service-provider-status">
-                            Metadata Source Status:
-                        </div>
-                        <div class="col" *ngIf="!entity.isDraft()">
-                            <i class="fa fa-fw" [ngClass]="{
-                                'fa-check-circle text-success': entity.enabled,
-                                'fa-times-circle text-danger': !entity.enabled
-                            }"></i>
-                            <span *ngIf="entity.enabled" translate="value.enabled">Enabled</span>
-                            <span *ngIf="!entity.enabled" translate="value.disabled">Disabled</span>
-                        </div>
-                        <div class="col" *ngIf="entity.isDraft()">
-                            <span class="badge badge-warning" translate="message.incomplete-form">Incomplete Form</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-2">
-                    <button *ngIf="allowDelete"
-                        class="btn btn-link pull-right"
-                        (click)="delete.emit(entity)"
-                        aria-label="Delete selected service provider">
-                        <i class="fa fa-fw fa-trash fa-2x text-danger"></i>
-                    </button>
-                </div>
-            </div>
-        
-        </div>
-    </div>
-</div>
diff --git a/ui/src/app/metadata/manager/component/resolver-item.component.scss b/ui/src/app/metadata/manager/component/resolver-item.component.scss
deleted file mode 100644
index eb762129a..000000000
--- a/ui/src/app/metadata/manager/component/resolver-item.component.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@import '../../../../theme/palette';
-
-.card {
-    background-color: rgba($light-grey, 0.5);
-    &:focus {
-        outline: -webkit-focus-ring-color auto 5px;
-    }
-    .btn-link {
-        &:focus {
-            outline: -webkit-focus-ring-color auto 5px;
-        }
-    }
-
-    .label-icon {
-        display: inline-block;
-        min-width: 64px;
-        text-align: center;
-    }
-}
diff --git a/ui/src/app/metadata/manager/component/resolver-item.component.spec.ts b/ui/src/app/metadata/manager/component/resolver-item.component.spec.ts
deleted file mode 100644
index b0fa44046..000000000
--- a/ui/src/app/metadata/manager/component/resolver-item.component.spec.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { EntityItemComponent } from './entity-item.component';
-import { FileBackedHttpMetadataResolver } from '../../domain/entity';
-import { ResolverItemComponent } from './resolver-item.component';
-import { MockI18nModule } from '../../../../testing/i18n.stub';
-import { CustomDatePipe } from '../../../shared/pipe/date.pipe';
-
-describe('Resolver List item', () => {
-    let fixture: ComponentFixture<ResolverItemComponent>;
-    let instance: ResolverItemComponent;
-
-    let resolver = new FileBackedHttpMetadataResolver({ entityId: 'foo', serviceProviderName: 'bar' });
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            providers: [],
-            imports: [
-                NoopAnimationsModule,
-                MockI18nModule
-            ],
-            declarations: [
-                ResolverItemComponent,
-                CustomDatePipe
-            ],
-        });
-
-        fixture = TestBed.createComponent(ResolverItemComponent);
-        instance = fixture.componentInstance;
-        instance.entity = resolver;
-    });
-
-    it('should compile', () => {
-        fixture.detectChanges();
-
-        expect(fixture).toBeDefined();
-    });
-});
diff --git a/ui/src/app/metadata/manager/component/resolver-item.component.ts b/ui/src/app/metadata/manager/component/resolver-item.component.ts
deleted file mode 100644
index 06705fb61..000000000
--- a/ui/src/app/metadata/manager/component/resolver-item.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, ChangeDetectionStrategy, Input, AfterContentInit, Output } from '@angular/core';
-
-import { MetadataEntity, MetadataResolver } from '../../domain/model';
-import { EntityItemComponent } from './entity-item.component';
-import { EventEmitter } from 'events';
-
-@Component({
-    selector: 'resolver-item',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    templateUrl: './resolver-item.component.html',
-    styleUrls: ['./resolver-item.component.scss']
-})
-export class ResolverItemComponent extends EntityItemComponent {
-    @Input() entity: MetadataEntity;
-}
diff --git a/ui/src/app/metadata/manager/component/resolvers-list.component.html b/ui/src/app/metadata/manager/component/resolvers-list.component.html
new file mode 100644
index 000000000..de54eebae
--- /dev/null
+++ b/ui/src/app/metadata/manager/component/resolvers-list.component.html
@@ -0,0 +1,55 @@
+<div class="table-responsive mt-3" *ngIf="entities">
+    <table class="table table-striped w-100 table-hover">
+        <thead>
+            <th translate="label.title">Title</th>
+            <th class="w-40" translate="label.entity-id">Entity ID</th>
+            <th class="w-15" translate="label.author">Author</th>
+            <th class="w-15" translate="label.creation-date">Created Date</th>
+            <th class="text-right w-15" translate="label.enabled">Enabled</th>
+        </thead>
+        <tbody infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="scroll.emit()">
+            <tr *ngFor="let resolver of entities; index as i">
+                <td *ngIf="!resolver.isDraft()">
+                    <a [routerLink]="['/', 'metadata', 'resolver', resolver.getId(), 'configuration', 'options']">{{ resolver.name }}</a>
+                </td>
+                <td *ngIf="resolver.isDraft()">
+                    <a [routerLink]="['/', 'metadata', 'resolver', 'new', 'blank', 'common']"
+                        [queryParams]="{'id': resolver.getId()}">{{ resolver.name }}</a>
+                </td>
+                <td>{{ resolver.getDisplayId() }}</td>
+                <td>{{ resolver.createdBy }}</td>
+                <td>{{ resolver.getCreationDate() ? (resolver.getCreationDate() | customDate) : '&mdash;' }}</td>
+                <td class="text-right">
+                    <span *ngIf="resolver.isDraft()">
+                        <button class="btn btn-outline btn-sm btn-danger" (click)="delete.emit(resolver)">
+                            <span class="sr-only">Delete</span>
+                            <i class="fa fa-trash"></i>
+                        </button>
+                        &nbsp;
+                        <span class="badge badge-warning" aria-label="Warning Badge: Incomplete Form"
+                            translate="message.incomplete-form">
+                            Incomplete Form
+                        </span>
+                    </span>
+                    <ng-container *ngIf="!!toggleEnabled.observers.length">
+                        <button
+                            class="btn btn-success btn-sm"
+                            (click)="toggleEnabled.emit(resolver); $event.stopPropagation()"
+                            aria-label="Enable this service provider">
+                            <translate-i18n *ngIf="resolver.enabled" key="label.disable">Disable</translate-i18n>
+                            <translate-i18n *ngIf="!resolver.enabled" key="label.enable">Enable</translate-i18n>
+                            <i class="fa fa-fw fa-check fa-lg" *ngIf="!resolver.enabled"></i>
+                        </button>
+                    </ng-container>
+                    <ng-container *ngIf="!toggleEnabled.observers.length">
+                        <span class="badge" *ngIf="!resolver.isDraft()" [class.badge-danger]="!resolver.enabled"
+                            [class.badge-success]="resolver.enabled">
+                            <span *ngIf="resolver.enabled" translate="value.enabled">Enabled</span>
+                            <span *ngIf="!resolver.enabled" translate="value.disabled">Disabled</span>
+                        </span>
+                    </ng-container>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/metadata/manager/component/resolvers-list.component.spec.ts b/ui/src/app/metadata/manager/component/resolvers-list.component.spec.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/src/app/metadata/manager/component/resolvers-list.component.ts b/ui/src/app/metadata/manager/component/resolvers-list.component.ts
new file mode 100644
index 000000000..dffee7c93
--- /dev/null
+++ b/ui/src/app/metadata/manager/component/resolvers-list.component.ts
@@ -0,0 +1,18 @@
+import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
+
+import { MetadataEntity } from '../../domain/model';
+
+@Component({
+    selector: 'resolvers-list',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './resolvers-list.component.html',
+    styleUrls: []
+})
+export class ResolversListComponent {
+    @Input() entities: MetadataEntity[];
+
+    @Output() scroll: EventEmitter<null> = new EventEmitter();
+    @Output() delete: EventEmitter<MetadataEntity> = new EventEmitter();
+
+    @Output() toggleEnabled: EventEmitter<MetadataEntity> = new EventEmitter();
+}
diff --git a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.spec.ts b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.spec.ts
index b70132eba..9722eb24f 100644
--- a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.spec.ts
+++ b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.spec.ts
@@ -11,7 +11,6 @@ import { RouterStub } from '../../../../testing/router.stub';
 import { NgbModalStub } from '../../../../testing/modal.stub';
 import { DashboardProvidersListComponent } from './dashboard-providers-list.component';
 import { MetadataProvider } from '../../domain/model';
-import { ProviderItemComponent } from '../component/provider-item.component';
 import { MockI18nModule } from '../../../../testing/i18n.stub';
 import { CustomDatePipe } from '../../../shared/pipe/date.pipe';
 import { of } from 'rxjs';
@@ -53,7 +52,6 @@ describe('Dashboard Providers List Page', () => {
             declarations: [
                 DashboardProvidersListComponent,
                 ProviderSearchComponent,
-                ProviderItemComponent,
                 DeleteDialogComponent,
                 CustomDatePipe
             ],
diff --git a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.html b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.html
index 6023d63a5..526e5f96e 100644
--- a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.html
+++ b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.html
@@ -10,55 +10,10 @@
                 [searching]="loading$ | async"
                 (search)="search($event)">
             </provider-search>
-            <div class="table-responsive mt-3" *ngIf="limited$ | async">
-                <table class="table table-striped w-100 table-hover">
-                    <thead>
-                        <th translate="label.title">Title</th>
-                        <th class="w-40" translate="label.entity-id">Entity ID</th>
-                        <th class="w-15" translate="label.author">Author</th>
-                        <th class="w-15" translate="label.creation-date">Created Date</th>
-                        <th class="text-right w-15" translate="label.enabled">Enabled</th>
-                    </thead>
-                    <tbody infiniteScroll
-                            [infiniteScrollDistance]="2"
-                            [infiniteScrollThrottle]="50"
-                            (scrolled)="onScroll($event)">
-                        <tr *ngFor="let resolver of limited$ | async; index as i">
-                            <td *ngIf="!resolver.isDraft()">
-                                <a [routerLink]="['/', 'metadata', 'resolver', resolver.getId(), 'configuration', 'options']">{{ resolver.name }}</a>
-                            </td>
-                            <td *ngIf="resolver.isDraft()">
-                                <a [routerLink]="['/', 'metadata', 'resolver', 'new', 'blank', 'common']"
-                                    [queryParams]="{'id': resolver.getId()}">{{ resolver.name }}</a>
-                            </td>
-                            <td>{{ resolver.getDisplayId() }}</td>
-                            <td>{{ resolver.createdBy }}</td>
-                            <td>{{ resolver.getCreationDate() ? (resolver.getCreationDate() | customDate) : '&mdash;' }}</td>
-                            <td class="text-right">
-                                <span *ngIf="resolver.isDraft()">
-                                    <button class="btn btn-outline btn-sm btn-danger" (click)="deleteResolver(resolver)">
-                                        <span class="sr-only">Delete</span>
-                                        <i class="fa fa-trash"></i>
-                                    </button>
-                                    &nbsp;
-                                    <span class="badge badge-warning"
-                                        aria-label="Warning Badge: Incomplete Form"
-                                        translate="message.incomplete-form">
-                                        Incomplete Form
-                                    </span>
-                                </span>
-                                <span class="badge"
-                                    *ngIf="!resolver.isDraft()"
-                                    [class.badge-danger]="!resolver.enabled"
-                                    [class.badge-success]="resolver.enabled">
-                                    <span *ngIf="resolver.enabled" translate="value.enabled">Enabled</span>
-                                    <span *ngIf="!resolver.enabled" translate="value.disabled">Enabled</span>
-                                </span>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+            <resolvers-list
+                [entities]="limited$ | async"
+                (delete)="deleteResolver($event)"
+                (scroll)="onScroll()"></resolvers-list>
         </div>
     </div>
 </section>
diff --git a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.spec.ts b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.spec.ts
index 0bbaa7f59..977c7ee4e 100644
--- a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.spec.ts
+++ b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.spec.ts
@@ -3,6 +3,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { Router, RouterModule } from '@angular/router';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreModule, Store, combineReducers } from '@ngrx/store';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { NgbPaginationModule, NgbModal, NgbModalModule, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import * as fromDashboard from '../reducer';
 import { ProviderSearchComponent } from '../component/provider-search.component';
@@ -13,7 +14,7 @@ import { FileBackedHttpMetadataResolver } from '../../domain/entity';
 import { DashboardResolversListComponent } from './dashboard-resolvers-list.component';
 import { MockI18nModule } from '../../../../testing/i18n.stub';
 import { CustomDatePipe } from '../../../shared/pipe/date.pipe';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { MockModule } from '../../../../testing/mock-module.stub';
 
 
 describe('Dashboard Resolvers List Page', () => {
@@ -51,7 +52,8 @@ describe('Dashboard Resolvers List Page', () => {
                 NgbModalModule,
                 MockI18nModule,
                 InfiniteScrollModule,
-                RouterModule
+                RouterModule,
+                MockModule
             ],
             declarations: [
                 DashboardResolversListComponent,
@@ -114,7 +116,7 @@ describe('Dashboard Resolvers List Page', () => {
     describe('onScroll method', () => {
         it('should call the loadMore method', () => {
             spyOn(instance, 'loadMore');
-            instance.onScroll(new Event('scrolled'));
+            instance.onScroll();
             expect(instance.loadMore).toHaveBeenCalledWith(instance.page + 1);
         });
     });
diff --git a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.ts b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.ts
index 3e298d14d..861b26848 100644
--- a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.ts
+++ b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.ts
@@ -69,7 +69,7 @@ export class DashboardResolversListComponent implements OnInit {
         this.page = 1;
     }
 
-    onScroll(event: Event): void {
+    onScroll(): void {
         this.loadMore(this.page + 1);
     }
 
diff --git a/ui/src/app/metadata/manager/manager.module.ts b/ui/src/app/metadata/manager/manager.module.ts
index fc30e8ea6..9f00d9842 100644
--- a/ui/src/app/metadata/manager/manager.module.ts
+++ b/ui/src/app/metadata/manager/manager.module.ts
@@ -1,6 +1,6 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
-import { RouterModule, Routes } from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NgbPaginationModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
@@ -9,9 +9,6 @@ import { EffectsModule } from '@ngrx/effects';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 import { ManagerComponent } from './container/manager.component';
-import { EntityItemComponent } from './component/entity-item.component';
-import { ProviderItemComponent } from './component/provider-item.component';
-import { ResolverItemComponent } from './component/resolver-item.component';
 import { ProviderSearchComponent } from './component/provider-search.component';
 import { DashboardResolversListComponent } from './container/dashboard-resolvers-list.component';
 import { DashboardProvidersListComponent } from './container/dashboard-providers-list.component';
@@ -21,17 +18,16 @@ import { DeleteDialogComponent } from './component/delete-dialog.component';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { SharedModule } from '../../shared/shared.module';
 import { I18nModule } from '../../i18n/i18n.module';
+import { ResolversListComponent } from './component/resolvers-list.component';
 
 @NgModule({
     declarations: [
         ManagerComponent,
-        EntityItemComponent,
-        ResolverItemComponent,
-        ProviderItemComponent,
         ProviderSearchComponent,
         DeleteDialogComponent,
         DashboardResolversListComponent,
-        DashboardProvidersListComponent
+        DashboardProvidersListComponent,
+        ResolversListComponent
     ],
     entryComponents: [
         DeleteDialogComponent
@@ -49,7 +45,7 @@ import { I18nModule } from '../../i18n/i18n.module';
         InfiniteScrollModule
     ],
     exports: [
-        ResolverItemComponent
+        ResolversListComponent
     ]
 })
 export class ManagerModule {
diff --git a/ui/src/testing/mock-module.stub.ts b/ui/src/testing/mock-module.stub.ts
new file mode 100644
index 000000000..d311e90b6
--- /dev/null
+++ b/ui/src/testing/mock-module.stub.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { MockResolversListComponent } from './resolvers-list.component.stub';
+
+export const DECLARATIONS = [
+    MockResolversListComponent
+];
+
+@NgModule({
+    declarations: DECLARATIONS,
+    entryComponents: DECLARATIONS,
+    imports: [],
+    exports: DECLARATIONS,
+    providers: []
+})
+export class MockModule {}
diff --git a/ui/src/testing/resolvers-list.component.stub.ts b/ui/src/testing/resolvers-list.component.stub.ts
new file mode 100644
index 000000000..9912b0c2b
--- /dev/null
+++ b/ui/src/testing/resolvers-list.component.stub.ts
@@ -0,0 +1,18 @@
+import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
+
+import { MetadataEntity } from '../app/metadata/domain/model';
+
+@Component({
+    selector: 'resolvers-list',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `<div></div>`,
+    styleUrls: []
+})
+export class MockResolversListComponent {
+    @Input() entities: MetadataEntity[];
+
+    @Output() scroll: EventEmitter<null> = new EventEmitter();
+    @Output() delete: EventEmitter<MetadataEntity> = new EventEmitter();
+
+    @Output() toggleEnabled: EventEmitter<MetadataEntity> = new EventEmitter();
+}