diff --git a/web/src/app/administration/components/access-items-management/access-items-management.component.ts b/web/src/app/administration/components/access-items-management/access-items-management.component.ts
index fffdcd057..cc4f2f5c9 100644
--- a/web/src/app/administration/components/access-items-management/access-items-management.component.ts
+++ b/web/src/app/administration/components/access-items-management/access-items-management.component.ts
@@ -127,12 +127,12 @@ export class AccessItemsManagementComponent implements OnInit {
   filterAccessItems() {
     if (this.accessItemsForm.value.accessIdFilter) {
       this.accessItems = this.accessItems.filter((value) =>
-        value.accessName.toLowerCase().includes(this.accessItemsForm.value.accessIdFilter)
+        value.accessName.toLowerCase().includes(this.accessItemsForm.value.accessIdFilter.toLowerCase())
       );
     }
     if (this.accessItemsForm.value.workbasketKeyFilter) {
       this.accessItems = this.accessItems.filter((value) =>
-        value.workbasketKey.toLowerCase().includes(this.accessItemsForm.value.workbasketKeyFilter)
+        value.workbasketKey.toLowerCase().includes(this.accessItemsForm.value.workbasketKeyFilter.toLowerCase())
       );
     }
   }
diff --git a/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.ts b/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.ts
index 070f538b9..9818f9648 100644
--- a/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.ts
+++ b/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.ts
@@ -169,7 +169,6 @@ export class WorkbasketAccessItemsComponent implements OnInit, OnChanges, OnDest
   }
 
   ngOnChanges(changes?: SimpleChanges) {
-    console.log('change');
     if (changes.action) {
       this.setBadge();
     }
diff --git a/web/src/app/history/services/task-history-query/task-history-query.service.ts b/web/src/app/history/services/task-history-query/task-history-query.service.ts
index d4cef9de2..ffc8aa885 100644
--- a/web/src/app/history/services/task-history-query/task-history-query.service.ts
+++ b/web/src/app/history/services/task-history-query/task-history-query.service.ts
@@ -3,7 +3,7 @@ import { TaskHistoryEventResourceData } from 'app/shared/models/task-history-eve
 import { QueryParameters } from 'app/shared/models/query-parameters';
 import { TaskanaQueryParameters } from 'app/shared/util/query-parameters';
 import { Sorting, TaskHistoryQuerySortParameter } from 'app/shared/models/sorting';
-import { Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { StartupService } from '../../../shared/services/startup/startup.service';
 import { TaskHistoryQueryFilterParameter } from '../../../shared/models/task-history-query-filter-parameter';
diff --git a/web/src/app/history/task-history-query/task-history-query.component.html b/web/src/app/history/task-history-query/task-history-query.component.html
index 883462c3d..e8ed260fe 100644
--- a/web/src/app/history/task-history-query/task-history-query.component.html
+++ b/web/src/app/history/task-history-query/task-history-query.component.html
@@ -1,139 +1,139 @@
-<div class="example-container mat-elevation-z8">
-  <div class="example-table-container">
-    <table mat-table [dataSource]="data" class="example-table"
-           matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
+<div class="task-history-query">
+  <table mat-table [dataSource]="data"
+         matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
 
-      <ng-container matColumnDef="parentBusinessProcessId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Parent BPI</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).parentBusinessProcessId}}</td>
-      </ng-container>
+    <ng-container matColumnDef="parentBusinessProcessId">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Parent BPI</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).parentBusinessProcessId}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="businessProcessId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>BPI</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).businessProcessId}}</td>
-      </ng-container>
+    <ng-container matColumnDef="businessProcessId">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>BPI</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).businessProcessId}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="taskId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Task Id</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).taskId}}</td>
-      </ng-container>
+    <ng-container matColumnDef="taskId">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Task Id</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).taskId}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="eventType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Event type</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).eventType}}</td>
-      </ng-container>
+    <ng-container matColumnDef="eventType">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Event type</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).eventType}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="created">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Created</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).created}}</td>
-      </ng-container>
+    <ng-container matColumnDef="created">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Created</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).created}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="userId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>User Id</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).userId}}</td>
-      </ng-container>
+    <ng-container matColumnDef="userId">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>User Id</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).userId}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="domain">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Domain</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).domain}}</td>
-      </ng-container>
+    <ng-container matColumnDef="domain">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Domain</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).domain}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="workbasketKey">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Workbasket key</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).workbasketKey}}</td>
-      </ng-container>
+    <ng-container matColumnDef="workbasketKey">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Workbasket key</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).workbasketKey}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="porCompany">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj company</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porCompany}}</td>
-      </ng-container>
+    <ng-container matColumnDef="porCompany">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj company</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porCompany}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="porSystem">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj system</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porSystem}}</td>
-      </ng-container>
+    <ng-container matColumnDef="porSystem">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj system</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porSystem}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="porInstance">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj instance</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porInstance}}</td>
-      </ng-container>
+    <ng-container matColumnDef="porInstance">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj instance</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porInstance}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="porType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj type</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porType}}</td>
-      </ng-container>
+    <ng-container matColumnDef="porType">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj type</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porType}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="porValue">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj value</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porValue}}</td>
-      </ng-container>
+    <ng-container matColumnDef="porValue">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj value</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porValue}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="taskClassificationKey">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Classification key</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).taskClassificationKey}}</td>
-      </ng-container>
+    <ng-container matColumnDef="taskClassificationKey">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Classification key</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).taskClassificationKey}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="taskClassificationCategory">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Classification category</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).taskClassificationCategory}}</td>
-      </ng-container>
+    <ng-container matColumnDef="taskClassificationCategory">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Classification category</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).taskClassificationCategory}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="attachmentClassificationKey">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Attachment Classification Key</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).attachmentClassificationKey}}</td>
-      </ng-container>
+    <ng-container matColumnDef="attachmentClassificationKey">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Attachment Classification Key</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).attachmentClassificationKey}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="custom1">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 1</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom1}}</td>
-      </ng-container>
+    <ng-container matColumnDef="custom1">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 1</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom1}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="custom2">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 2</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom2}}</td>
-      </ng-container>
+    <ng-container matColumnDef="custom2">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 2</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom2}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="custom3">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 3</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom3}}</td>
-      </ng-container>
+    <ng-container matColumnDef="custom3">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 3</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom3}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="custom4">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 4</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom4}}</td>
-      </ng-container>
+    <ng-container matColumnDef="custom4">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 4</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom4}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="oldData">
-        <th mat-header-cell *matHeaderCellDef>Old data</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).oldData}}</td>
-      </ng-container>
+    <ng-container matColumnDef="oldData">
+      <th mat-header-cell *matHeaderCellDef>Old data</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).oldData}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="newData">
-        <th mat-header-cell *matHeaderCellDef>New data</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).newData}}</td>
-      </ng-container>
+    <ng-container matColumnDef="newData">
+      <th mat-header-cell *matHeaderCellDef>New data</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).newData}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="comment">
-        <th mat-header-cell *matHeaderCellDef>Comment</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).comment}}</td>
-      </ng-container>
+    <ng-container matColumnDef="comment">
+      <th mat-header-cell *matHeaderCellDef>Comment</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).comment}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="oldValue">
-        <th mat-header-cell *matHeaderCellDef>Old value</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).oldValue}}</td>
-      </ng-container>
+    <ng-container matColumnDef="oldValue">
+      <th mat-header-cell *matHeaderCellDef>Old value</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).oldValue}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="newValue">
-        <th mat-header-cell *matHeaderCellDef>New value</th>
-        <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).newValue}}</td>
-      </ng-container>
+    <ng-container matColumnDef="newValue">
+      <th mat-header-cell *matHeaderCellDef>New value</th>
+      <td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).newValue}}</td>
+    </ng-container>
 
 
 
-      <tr mat-header-row *matHeaderRowDef="getDisplayColumns()"></tr>
-      <tr mat-row *matRowDef="let row; columns: getDisplayColumns()"></tr>
-    </table>
+    <tr mat-header-row *matHeaderRowDef="getDisplayColumns()"></tr>
+    <tr mat-row *matRowDef="let row; columns: getDisplayColumns()"></tr>
+  </table>
 
+  <div class="task-history-query__pagination-wrapper">
     <taskana-shared-pagination [numberOfItems]="data.length"
                                [page]="pageInformation"></taskana-shared-pagination>
   </div>
diff --git a/web/src/app/history/task-history-query/task-history-query.component.scss b/web/src/app/history/task-history-query/task-history-query.component.scss
index 974e40175..7abdb3390 100644
--- a/web/src/app/history/task-history-query/task-history-query.component.scss
+++ b/web/src/app/history/task-history-query/task-history-query.component.scss
@@ -1,12 +1,13 @@
-.example-loading-shade {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 56px;
-  right: 0;
-  background: rgba(0, 0, 0, 0.15);
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.task-history-query {
+  height: calc(100vh - 56px);
+  width: auto;
+  overflow-x: scroll;
+  overflow-y: auto;
+
+  &__pagination-wrapper {
+    position: absolute;
+    bottom: 16px;
+    width: 100%;
+  }
 }
+