diff --git a/eform-client/src/app/plugins/modules/backend-configuration-pn/components/reports/report-table/report-table.component.html b/eform-client/src/app/plugins/modules/backend-configuration-pn/components/reports/report-table/report-table.component.html
index 131941fb3..20fd988d7 100644
--- a/eform-client/src/app/plugins/modules/backend-configuration-pn/components/reports/report-table/report-table.component.html
+++ b/eform-client/src/app/plugins/modules/backend-configuration-pn/components/reports/report-table/report-table.component.html
@@ -1,6 +1,9 @@
 <mtx-grid
   [data]="items"
   [columns]="mergedTableHeaders"
+  [cellTemplate]="{
+    actions: actionsTpl
+  }"
   [showPaginator]="false"
   [pageOnFront]="false"
   [rowStriped]="true"
@@ -8,3 +11,39 @@
   [showColumnMenuButton]="false"
 >
 </mtx-grid>
+
+<ng-template #actionsTpl let-row let-i="index">
+  <div class="report-actions" id="action-items-{{i}}">
+    <button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+
+    <mat-menu #menu="matMenu">
+      <button
+        mat-menu-item
+        *ngIf="row.imagesCount !== 0"
+        id="viewImagesBtn-{{i}}"
+        (click)="onClickViewPicture(row.microtingSdkCaseId)"
+      >
+        <mat-icon>image</mat-icon>
+        <span>{{ 'View images' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        id="editCaseBtn-{{i}}"
+        (click)="onClickEditCase(row.microtingSdkCaseId, row.eFormId, row.id)"
+      >
+        <mat-icon>edit</mat-icon>
+        <span>{{ 'Edit' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        id="deleteCaseBtn-{{i}}"
+        (click)="onShowDeletePlanningCaseModal(row)"
+      >
+        <mat-icon color="warn">delete</mat-icon>
+        <span>{{ 'Delete' | translate }}</span>
+      </button>
+    </mat-menu>
+  </div>
+</ng-template>
diff --git a/eform-client/src/app/plugins/modules/backend-configuration-pn/components/reports/report-table/report-table.component.ts b/eform-client/src/app/plugins/modules/backend-configuration-pn/components/reports/report-table/report-table.component.ts
index 28f218290..1aad37fdd 100644
--- a/eform-client/src/app/plugins/modules/backend-configuration-pn/components/reports/report-table/report-table.component.ts
+++ b/eform-client/src/app/plugins/modules/backend-configuration-pn/components/reports/report-table/report-table.component.ts
@@ -54,29 +54,8 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
     {
       header: this.translateService.stream('Actions'),
       field: 'actions',
-      type: 'button',
-      buttons: [
-        {
-          tooltip: this.translateService.stream('View images'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onClickViewPicture(record.microtingSdkCaseId),
-          icon: 'image',
-          iif: (record: ReportEformItemModel) => record.imagesCount !== 0,
-        },
-        {
-          tooltip: this.translateService.stream('Edit'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onClickEditCase(record.microtingSdkCaseId, record.eFormId, record.id),
-          icon: 'edit',
-        },
-        {
-          tooltip: this.translateService.stream('Delete'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onShowDeletePlanningCaseModal(record),
-          color: 'warn',
-          icon: 'delete',
-        }
-      ]
+      width: '160px',
+      pinned: 'right',
     },
   ];
   adminTableHeaders: MtxGridColumn[] = [
@@ -96,29 +75,8 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
     {
       header: this.translateService.stream('Actions'),
       field: 'actions',
-      type: 'button',
-      buttons: [
-        {
-          tooltip: this.translateService.stream('View images'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onClickViewPicture(record.microtingSdkCaseId),
-          icon: 'image',
-          iif: (record: ReportEformItemModel) => record.imagesCount !== 0,
-        },
-        {
-          tooltip: this.translateService.stream('Edit'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onClickEditCase(record.microtingSdkCaseId, record.eFormId, record.id),
-          icon: 'edit',
-        },
-        {
-          tooltip: this.translateService.stream('Delete'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onShowDeletePlanningCaseModal(record),
-          color: 'warn',
-          icon: 'delete',
-        }
-      ]
+      width: '160px',
+      pinned: 'right',
     },
   ];
   mergedTableHeaders: MtxGridColumn[] = [];
@@ -169,12 +127,8 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
         };
       });
       if (this.isAdmin) {
-        this.adminTableHeaders.find(x => x.field === 'actions').class = ((record: ReportEformItemModel, _) =>
-          record ? `id-${record.id}` : '');//microtingSdkCaseId${record.microtingSdkCaseId}-eFormId${record.eFormId}-
         this.mergedTableHeaders = [...this.adminTableHeaders, ...itemHeaders];
       } else {
-        this.tableHeaders.find(x => x.field === 'actions').class = ((record: ReportEformItemModel, _) =>
-          record ? `id-${record.id}` : '');//microtingSdkCaseId${record.microtingSdkCaseId}-eFormId${record.eFormId}-
         this.mergedTableHeaders = [...this.tableHeaders, ...itemHeaders];
       }
     }
diff --git a/eform-client/src/app/plugins/modules/backend-configuration-pn/modules/reports/components/report-table/report-table.component.html b/eform-client/src/app/plugins/modules/backend-configuration-pn/modules/reports/components/report-table/report-table.component.html
index 131941fb3..20fd988d7 100644
--- a/eform-client/src/app/plugins/modules/backend-configuration-pn/modules/reports/components/report-table/report-table.component.html
+++ b/eform-client/src/app/plugins/modules/backend-configuration-pn/modules/reports/components/report-table/report-table.component.html
@@ -1,6 +1,9 @@
 <mtx-grid
   [data]="items"
   [columns]="mergedTableHeaders"
+  [cellTemplate]="{
+    actions: actionsTpl
+  }"
   [showPaginator]="false"
   [pageOnFront]="false"
   [rowStriped]="true"
@@ -8,3 +11,39 @@
   [showColumnMenuButton]="false"
 >
 </mtx-grid>
+
+<ng-template #actionsTpl let-row let-i="index">
+  <div class="report-actions" id="action-items-{{i}}">
+    <button id="actionMenu" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+
+    <mat-menu #menu="matMenu">
+      <button
+        mat-menu-item
+        *ngIf="row.imagesCount !== 0"
+        id="viewImagesBtn-{{i}}"
+        (click)="onClickViewPicture(row.microtingSdkCaseId)"
+      >
+        <mat-icon>image</mat-icon>
+        <span>{{ 'View images' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        id="editCaseBtn-{{i}}"
+        (click)="onClickEditCase(row.microtingSdkCaseId, row.eFormId, row.id)"
+      >
+        <mat-icon>edit</mat-icon>
+        <span>{{ 'Edit' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        id="deleteCaseBtn-{{i}}"
+        (click)="onShowDeletePlanningCaseModal(row)"
+      >
+        <mat-icon color="warn">delete</mat-icon>
+        <span>{{ 'Delete' | translate }}</span>
+      </button>
+    </mat-menu>
+  </div>
+</ng-template>
diff --git a/eform-client/src/app/plugins/modules/backend-configuration-pn/modules/reports/components/report-table/report-table.component.ts b/eform-client/src/app/plugins/modules/backend-configuration-pn/modules/reports/components/report-table/report-table.component.ts
index 74103e81b..0e5d63a1e 100644
--- a/eform-client/src/app/plugins/modules/backend-configuration-pn/modules/reports/components/report-table/report-table.component.ts
+++ b/eform-client/src/app/plugins/modules/backend-configuration-pn/modules/reports/components/report-table/report-table.component.ts
@@ -49,29 +49,8 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
     {
       header: this.translateService.stream('Actions'),
       field: 'actions',
-      type: 'button',
-      buttons: [
-        {
-          tooltip: this.translateService.stream('View images'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onClickViewPicture(record.microtingSdkCaseId),
-          icon: 'image',
-          iif: (record: ReportEformItemModel) => record.imagesCount !== 0,
-        },
-        {
-          tooltip: this.translateService.stream('Edit'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onClickEditCase(record.microtingSdkCaseId, record.eFormId, record.id),
-          icon: 'edit',
-        },
-        {
-          tooltip: this.translateService.stream('Delete'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onShowDeletePlanningCaseModal(record),
-          color: 'warn',
-          icon: 'delete',
-        }
-      ]
+      width: '160px',
+      pinned: 'right',
     },
     {header: this.translateService.stream('Employee no'), field: 'employeeNo'},
   ];
@@ -87,29 +66,8 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
     {
       header: this.translateService.stream('Actions'),
       field: 'actions',
-      type: 'button',
-      buttons: [
-        {
-          tooltip: this.translateService.stream('View images'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onClickViewPicture(record.microtingSdkCaseId),
-          icon: 'image',
-          iif: (record: ReportEformItemModel) => record.imagesCount !== 0,
-        },
-        {
-          tooltip: this.translateService.stream('Edit'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onClickEditCase(record.microtingSdkCaseId, record.eFormId, record.id),
-          icon: 'edit',
-        },
-        {
-          tooltip: this.translateService.stream('Delete'),
-          type: 'icon',
-          click: (record: ReportEformItemModel) => this.onShowDeletePlanningCaseModal(record),
-          color: 'warn',
-          icon: 'delete',
-        }
-      ]
+      width: '160px',
+      pinned: 'right',
     },
     {header: this.translateService.stream('Employee no'), field: 'employeeNo'},
   ];
@@ -161,9 +119,6 @@ export class ReportTableComponent implements OnInit, OnChanges, OnDestroy {
       let isAdmin = false;
       this.selectAuthIsAdmin$.subscribe((selectAuthIsAdmin$) => isAdmin = selectAuthIsAdmin$);
       const tableHeaders = [...(isAdmin ? [...this.adminTableHeaders] : [...this.tableHeaders])];
-      const index = tableHeaders
-        .findIndex(x => x.field === 'actions');
-      tableHeaders[index].width = this.items.filter(x => x.imagesCount > 0).length > 0 ? '160px' : '110px';
 
       this.mergedTableHeaders = [
         ...tableHeaders,