diff --git a/console/src/app/modules/action-keys/action-keys.component.html b/console/src/app/modules/action-keys/action-keys.component.html
index 609b61c395..8d127a5314 100644
--- a/console/src/app/modules/action-keys/action-keys.component.html
+++ b/console/src/app/modules/action-keys/action-keys.component.html
@@ -1,12 +1,16 @@
-<div *ngIf="type !== ActionKeysType.ORGSWITCHER && (isHandset$ | async) === false" class="action-keys-wrapper"
-  [ngSwitch]="type" [ngClass]="{'without-margin': withoutMargin, 'no-contrast-mode': doNotUseContrast}">
+<div
+  *ngIf="type !== ActionKeysType.ORGSWITCHER && (isHandset$ | async) === false"
+  class="action-keys-wrapper"
+  [ngSwitch]="type"
+  [ngClass]="{ 'without-margin': withoutMargin, 'no-contrast-mode': doNotUseContrast }"
+>
   <div *ngSwitchCase="ActionKeysType.CLEAR" class="action-keys-row">
     <div class="action-key esc">
       <div class="key-overlay"></div>
       <span>ESC</span>
     </div>
   </div>
-  <div *ngSwitchCase="ActionKeysType.ADD" class="action-keys-row" [attr.data-e2e]="'action-key-add'">
+  <div *ngSwitchCase="ActionKeysType.ADD" class="action-keys-row" data-e2e="action-key-add">
     <div class="action-key">
       <div class="key-overlay"></div>
       <span>N</span>
@@ -38,7 +42,6 @@
     <div class="action-key">
       <div class="key-overlay"></div>
       <span *ngIf="isMacLike || isIOS; else otherOS">⌘</span>
-
     </div>
     +
     <div class="action-key">
@@ -56,4 +59,4 @@
 
 <ng-template #otherOS>
   <span>crtl</span>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/console/src/app/modules/card/card.component.html b/console/src/app/modules/card/card.component.html
index d484d20090..3abfeb87ca 100644
--- a/console/src/app/modules/card/card.component.html
+++ b/console/src/app/modules/card/card.component.html
@@ -1,18 +1,17 @@
-<div class="card" [ngClass]="{'nomargin': nomargin, 'stretch': stretch, 'warn': warn}" [attr.data-e2e]="'app-card'">
-  <div *ngIf="title || description" class="header" [ngClass]="{'bottom-margin': expanded}">
+<div class="card" [ngClass]="{ nomargin: nomargin, stretch: stretch, warn: warn }" data-e2e="app-card">
+  <div *ngIf="title || description" class="header" [ngClass]="{ 'bottom-margin': expanded }">
     <div *ngIf="title" class="row">
-      <h2 class="title" [attr.data-e2e]="'app-card-title'">{{title}}</h2>
+      <h2 class="title" data-e2e="app-card-title">{{ title }}</h2>
       <span class="fill-space"></span>
       <ng-content select="[card-actions]"></ng-content>
-      <button class="button" type="button" matTooltip="Expand or collapse" mat-icon-button
-        (click)="expanded = !expanded">
+      <button class="button" type="button" matTooltip="Expand or collapse" mat-icon-button (click)="expanded = !expanded">
         <mat-icon *ngIf="!expanded">keyboard_arrow_down</mat-icon>
         <mat-icon *ngIf="expanded">keyboard_arrow_up</mat-icon>
       </button>
     </div>
-    <p *ngIf="description" class="desc cnsl-secondary-text">{{description}}</p>
+    <p *ngIf="description" class="desc cnsl-secondary-text">{{ description }}</p>
   </div>
   <div class="card-content" *ngIf="expanded" [@openClose]="animate">
     <ng-content></ng-content>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/console/src/app/modules/paginator/paginator.component.html b/console/src/app/modules/paginator/paginator.component.html
index 3206d854d3..ab29ca228e 100644
--- a/console/src/app/modules/paginator/paginator.component.html
+++ b/console/src/app/modules/paginator/paginator.component.html
@@ -3,7 +3,7 @@
     <p class="length">
       <span>{{ length }} </span>{{ 'PAGINATOR.COUNT' | translate }}
     </p>
-    <p class="ts cnsl-secondary-text" *ngIf="timestamp" [attr.data-e2e]="'timestamp'">
+    <p class="ts cnsl-secondary-text" *ngIf="timestamp" data-e2e="timestamp">
       {{ timestamp | timestampToDate | localizedDate: 'EEEE dd. MMM YYYY, HH:mm' }}
     </p>
   </div>
diff --git a/console/src/app/modules/policies/private-labeling-policy/color/color.component.html b/console/src/app/modules/policies/private-labeling-policy/color/color.component.html
index a8142eaba6..a1909de9f2 100644
--- a/console/src/app/modules/policies/private-labeling-policy/color/color.component.html
+++ b/console/src/app/modules/policies/private-labeling-policy/color/color.component.html
@@ -1,4 +1,4 @@
-<div [attr.data-e2e]="'color'">
+<div data-e2e="color">
   <p class="name cnsl-secondary-text">{{ name }}</p>
 
   <div class="wrapper">
diff --git a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
index 1a6fb38694..58ed3cb4dc 100644
--- a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
+++ b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
@@ -101,7 +101,7 @@
   <div *ngIf="previewData && data" class="lab-policy-content">
     <mat-accordion class="settings">
       <mat-expansion-panel class="expansion">
-        <mat-expansion-panel-header [attr.data-e2e]="'policy-category'">
+        <mat-expansion-panel-header data-e2e="policy-category">
           <mat-panel-title>
             <div class="panel-title">
               <i class="icon las la-image"></i>
@@ -127,7 +127,7 @@
             {{ 'POLICY.PRIVATELABELING.EMAILNOSVG' | translate }}
           </cnsl-info-section>
 
-          <div class="logo-view" [attr.data-e2e]="'image-part-logo'">
+          <div class="logo-view" data-e2e="image-part-logo">
             <span class="label cnsl-secondary-text">Logo</span>
             <div class="img-wrapper">
               <ng-container
@@ -198,7 +198,7 @@
             </div>
           </div>
 
-          <div class="logo-view" [attr.data-e2e]="'image-part-icon'">
+          <div class="logo-view" data-e2e="image-part-icon">
             <span class="label cnsl-secondary-text">Icon</span>
             <div class="img-wrapper icon">
               <ng-container
@@ -478,7 +478,7 @@
       </mat-expansion-panel>
 
       <mat-expansion-panel class="expansion">
-        <mat-expansion-panel-header class="header" [attr.data-e2e]="'policy-category'">
+        <mat-expansion-panel-header class="header" data-e2e="policy-category">
           <mat-panel-title>
             <div class="panel-title">
               <i class="icon las la-font"></i>
diff --git a/console/src/app/modules/project-roles-table/project-roles-table.component.html b/console/src/app/modules/project-roles-table/project-roles-table.component.html
index 188bb80a1b..9f51d79f40 100644
--- a/console/src/app/modules/project-roles-table/project-roles-table.component.html
+++ b/console/src/app/modules/project-roles-table/project-roles-table.component.html
@@ -1,15 +1,25 @@
-<cnsl-refresh-table [showSelectionActionButton]="showSelectionActionButton" *ngIf="projectId"
-  (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult ?? 0"
-  [emitRefreshOnPreviousRoutes]="['/projects/'+projectId+'/roles/create']" [selection]="selection"
-  [loading]="dataSource?.loading$ | async" [timestamp]="dataSource?.viewTimestamp">
-
+<cnsl-refresh-table
+  [showSelectionActionButton]="showSelectionActionButton"
+  *ngIf="projectId"
+  (refreshed)="refreshPage()"
+  [dataSize]="dataSource?.totalResult ?? 0"
+  [emitRefreshOnPreviousRoutes]="['/projects/' + projectId + '/roles/create']"
+  [selection]="selection"
+  [loading]="dataSource?.loading$ | async"
+  [timestamp]="dataSource?.viewTimestamp"
+>
   <ng-template cnslHasRole [hasRole]="['project.role.write:' + projectId, 'project.role.write']" actions>
-    <a *ngIf="actionsVisible" [disabled]="disabled" [routerLink]="[ '/projects', projectId, 'roles', 'create']"
-      color="primary" class="cnsl-action-button" mat-raised-button>
-      <mat-icon [attr.data-e2e]="'add-new-role'" class="icon">add</mat-icon>
+    <a
+      *ngIf="actionsVisible"
+      [disabled]="disabled"
+      [routerLink]="['/projects', projectId, 'roles', 'create']"
+      color="primary"
+      class="cnsl-action-button"
+      mat-raised-button
+    >
+      <mat-icon data-e2e="add-new-role" class="icon">add</mat-icon>
       <span>{{ 'ACTIONS.NEW' | translate }}</span>
-      <cnsl-action-keys (actionTriggered)="gotoRouterLink([ '/projects', projectId, 'roles', 'create'])">
-      </cnsl-action-keys>
+      <cnsl-action-keys (actionTriggered)="gotoRouterLink(['/projects', projectId, 'roles', 'create'])"> </cnsl-action-keys>
     </a>
   </ng-template>
 
@@ -17,55 +27,70 @@
     <table [dataSource]="dataSource" mat-table class="table" matSort aria-label="Elements">
       <ng-container matColumnDef="select">
         <th class="selection" mat-header-cell *matHeaderCellDef>
-          <mat-checkbox [disabled]="disabled" color="primary" (change)="$event ? masterToggle() : null"
+          <mat-checkbox
+            [disabled]="disabled"
+            color="primary"
+            (change)="$event ? masterToggle() : null"
             [checked]="selection.hasValue() && isAllSelected()"
-            [indeterminate]="selection.hasValue() && !isAllSelected()">
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+          >
           </mat-checkbox>
         </th>
         <td class="selection" mat-cell *matCellDef="let row">
-          <mat-checkbox color="primary" [disabled]="disabled" (click)="$event.stopPropagation()"
-            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+          <mat-checkbox
+            color="primary"
+            [disabled]="disabled"
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(row) : null"
+            [checked]="selection.isSelected(row)"
+          >
           </mat-checkbox>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="key">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.KEY' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.KEY' | translate }}</th>
         <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
           <div class="role-key">
-            <cnsl-project-role-chip [roleName]="role.key">{{ role.key }}
-            </cnsl-project-role-chip>
+            <cnsl-project-role-chip [roleName]="role.key">{{ role.key }}</cnsl-project-role-chip>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="displayname">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }} </th>
-        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role"> {{role.displayName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }}</th>
+        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">{{ role.displayName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="group">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.GROUP' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.GROUP' | translate }}</th>
         <td mat-cell *matCellDef="let role" class="pointer">
-          <span class="role state" [ngClass]="{'no-selection': !selectionAllowed}" *ngIf="role.group"
+          <span
+            class="role state"
+            [ngClass]="{ 'no-selection': !selectionAllowed }"
+            *ngIf="role.group"
             (click)="selectionAllowed ? selectAllOfGroup(role.group) : openDetailDialog(role)"
-            [matTooltip]="selectionAllowed ? ('PROJECT.ROLE.SELECTGROUPTOOLTIP' | translate: role) : null">{{role.group}}</span>
+            [matTooltip]="selectionAllowed ? ('PROJECT.ROLE.SELECTGROUPTOOLTIP' | translate: role) : null"
+            >{{ role.group }}</span
+          >
         </td>
       </ng-container>
 
       <ng-container matColumnDef="creationDate">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.CREATIONDATE' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CREATIONDATE' | translate }}</th>
         <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
-          <span *ngIf="role?.details?.creationDate">{{role.details.creationDate | timestampToDate |
-            localizedDate: 'dd. MMM, HH:mm' }}</span>
+          <span *ngIf="role?.details?.creationDate">{{
+            role.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
+          }}</span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="changeDate">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.CHANGEDATE' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CHANGEDATE' | translate }}</th>
         <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
-          <span *ngIf="role?.details?.changeDate">{{role.details.changeDate | timestampToDate |
-            localizedDate: 'dd. MMM, HH:mm' }}</span>
+          <span *ngIf="role?.details?.changeDate">{{
+            role.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
+          }}</span>
         </td>
       </ng-container>
 
@@ -73,9 +98,16 @@
         <th mat-header-cell *matHeaderCellDef class="role-table-actions"></th>
         <td mat-cell *matCellDef="let role" class="role-table-actions">
           <cnsl-table-actions>
-            <button actions
-              [disabled]="disabled || (['project.role.delete', 'project.role.delete:' + projectId] | hasRole | async) === false"
-              mat-icon-button color="warn" matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteRole(role)">
+            <button
+              actions
+              [disabled]="
+                disabled || (['project.role.delete', 'project.role.delete:' + projectId] | hasRole | async) === false
+              "
+              mat-icon-button
+              color="warn"
+              matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
+              (click)="deleteRole(role)"
+            >
               <i class="las la-trash"></i>
             </button>
           </cnsl-table-actions>
@@ -83,17 +115,22 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr class="highlight" mat-row *matRowDef="let role; columns: displayedColumns;">
-      </tr>
+      <tr class="highlight" mat-row *matRowDef="let role; columns: displayedColumns"></tr>
     </table>
   </div>
 
   <div *ngIf="(dataSource.loading$ | async) === false && !dataSource?.totalResult" class="no-content-row">
     <i class="las la-exclamation"></i>
-    <span>{{'PROJECT.ROLE.EMPTY' | translate}}</span>
+    <span>{{ 'PROJECT.ROLE.EMPTY' | translate }}</span>
   </div>
 
-  <cnsl-paginator #paginator [timestamp]="dataSource?.viewTimestamp" [length]="dataSource.totalResult" [pageSize]="50"
-    (page)="changePage()" [pageSizeOptions]="[25, 50, 100, 250]">
+  <cnsl-paginator
+    #paginator
+    [timestamp]="dataSource?.viewTimestamp"
+    [length]="dataSource.totalResult"
+    [pageSize]="50"
+    (page)="changePage()"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
   </cnsl-paginator>
-</cnsl-refresh-table>
\ No newline at end of file
+</cnsl-refresh-table>
diff --git a/console/src/app/modules/settings-grid/settings-grid.component.html b/console/src/app/modules/settings-grid/settings-grid.component.html
index a75db95114..eba9de4796 100644
--- a/console/src/app/modules/settings-grid/settings-grid.component.html
+++ b/console/src/app/modules/settings-grid/settings-grid.component.html
@@ -14,7 +14,7 @@
           : []
       "
     >
-      <div class="p-item card" @policy [attr.data-e2e]="'policy-card'">
+      <div class="p-item card" @policy data-e2e="policy-card">
         <div class="avatar {{ setting.color }}">
           <mat-icon *ngIf="setting.svgIcon" class="mat-icon" [svgIcon]="setting.svgIcon"></mat-icon>
           <i *ngIf="setting.icon" class="icon {{ setting.icon }}"></i>
diff --git a/console/src/app/modules/table-actions/table-actions.component.html b/console/src/app/modules/table-actions/table-actions.component.html
index fe4eabe7c1..5032f4dace 100644
--- a/console/src/app/modules/table-actions/table-actions.component.html
+++ b/console/src/app/modules/table-actions/table-actions.component.html
@@ -2,9 +2,14 @@
   <div class="cnsl-table-action">
     <ng-content select="[hoverActions]"></ng-content>
     <ng-content select="[actions]"></ng-content>
-    <button (click)="$event.stopPropagation()" *ngIf="hasActions" class="table-actions-trigger" mat-icon-button
+    <button
+      (click)="$event.stopPropagation()"
+      *ngIf="hasActions"
+      class="table-actions-trigger"
+      mat-icon-button
       [matMenuTriggerFor]="actions"
-      [attr.data-e2e]="'table-actions-button'">
+      data-e2e="table-actions-button"
+    >
       <mat-icon>more_horiz</mat-icon>
     </button>
 
@@ -12,4 +17,4 @@
       <ng-content select="[menuActions]"></ng-content>
     </mat-menu>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/console/src/app/modules/warn-dialog/warn-dialog.component.html b/console/src/app/modules/warn-dialog/warn-dialog.component.html
index 98f8da4853..b70d8620b2 100644
--- a/console/src/app/modules/warn-dialog/warn-dialog.component.html
+++ b/console/src/app/modules/warn-dialog/warn-dialog.component.html
@@ -10,7 +10,7 @@
   }}</cnsl-info-section>
   <cnsl-form-field *ngIf="data.confirmation && data.confirmationKey" class="formfield">
     <cnsl-label>{{ data.confirmationKey | translate: { value: data.confirmation } }}</cnsl-label>
-    <input cnslInput [(ngModel)]="confirm" [attr.e2e-data]="'confirm-dialog-input'" />
+    <input cnslInput [(ngModel)]="confirm" data-e2e="confirm-dialog-input" />
   </cnsl-form-field>
 </div>
 <div mat-dialog-actions class="action">
@@ -24,7 +24,7 @@
     mat-raised-button
     class="ok-button"
     (click)="closeDialogWithSuccess()"
-    [attr.e2e-data]="'confirm-dialog-button'"
+    data-e2e="confirm-dialog-button"
   >
     {{ data.confirmKey | translate }}
   </button>
diff --git a/console/src/app/pages/projects/apps/app-create/app-create.component.html b/console/src/app/pages/projects/apps/app-create/app-create.component.html
index 7835c60031..82bd772227 100644
--- a/console/src/app/pages/projects/apps/app-create/app-create.component.html
+++ b/console/src/app/pages/projects/apps/app-create/app-create.component.html
@@ -40,7 +40,7 @@
             [disabled]="firstFormGroup.invalid"
             color="primary"
             matStepperNext
-            [attr.data-e2e]="'continue-button-nameandtype'"
+            data-e2e="continue-button-nameandtype"
           >
             {{ 'ACTIONS.CONTINUE' | translate }}
           </button>
@@ -72,7 +72,7 @@
             color="primary"
             [disabled]="secondFormGroup.invalid"
             matStepperNext
-            [attr.data-e2e]="'continue-button-authmethod'"
+            data-e2e="continue-button-authmethod"
           >
             {{ 'ACTIONS.CONTINUE' | translate }}
           </button>
@@ -130,7 +130,7 @@
 
       <div class="app-create-actions">
         <button mat-stroked-button class="bck-button" matStepperPrevious>{{ 'ACTIONS.BACK' | translate }}</button>
-        <button mat-raised-button color="primary" matStepperNext [attr.data-e2e]="'continue-button-redirecturis'">
+        <button mat-raised-button color="primary" matStepperNext data-e2e="continue-button-redirecturis">
           {{ 'ACTIONS.CONTINUE' | translate }}
         </button>
       </div>
@@ -234,13 +234,7 @@
 
       <div class="app-create-actions">
         <button mat-stroked-button matStepperPrevious class="bck-button">{{ 'ACTIONS.BACK' | translate }}</button>
-        <button
-          mat-raised-button
-          class="create-button"
-          color="primary"
-          (click)="createApp()"
-          [attr.data-e2e]="'create-button'"
-        >
+        <button mat-raised-button class="create-button" color="primary" (click)="createApp()" data-e2e="create-button">
           {{ 'ACTIONS.CREATE' | translate }}
         </button>
       </div>
@@ -248,7 +242,7 @@
   </mat-horizontal-stepper>
 
   <div *ngIf="devmode" class="dev">
-    <form [formGroup]="form" (ngSubmit)="createApp()" [attr.data-e2e]="'create-app-wizzard-3'">
+    <form [formGroup]="form" (ngSubmit)="createApp()" data-e2e="create-app-wizzard-3">
       <div class="content">
         <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
diff --git a/console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html b/console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html
index 2fca079282..396818a197 100644
--- a/console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html
+++ b/console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html
@@ -46,7 +46,7 @@
     mat-raised-button
     class="ok-button"
     (click)="closeDialog()"
-    [attr.data-e2e]="'close-dialog'"
+    data-e2e="close-dialog"
   >
     {{ 'ACTIONS.CLOSE' | translate }}
   </button>
diff --git a/console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.html b/console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.html
index 4ff326a471..6a0efe8a30 100644
--- a/console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.html
+++ b/console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.html
@@ -1,4 +1,4 @@
-<form class="redirect-uris-form" (ngSubmit)="add(redInput)" [attr.data-e2e]="'redirect-uris'">
+<form class="redirect-uris-form" (ngSubmit)="add(redInput)" data-e2e="redirect-uris">
   <cnsl-form-field class="formfield">
     <cnsl-label>{{ title }}</cnsl-label>
 
diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html b/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html
index f297673cd4..f5d043c4d4 100644
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html
@@ -12,7 +12,7 @@
 
   <div
     [routerLink]="['/projects', projectId, 'apps', app.id]"
-    [attr.data-e2e]="'app-card'"
+    data-e2e="app-card"
     class="app-wrap"
     *ngFor="let app of appsSubject | async"
     matTooltip="{{ 'ACTIONS.EDIT' | translate }}"
@@ -37,7 +37,7 @@
     <div
       class="app-wrap"
       *ngIf="!disabled"
-      [attr.data-e2e]="'app-card-add'"
+      data-e2e="app-card-add"
       [routerLink]="['/projects', projectId, 'apps', 'create']"
     >
       <cnsl-app-card class="grid-card" matRipple [type]="OIDCAppType.ADD">
diff --git a/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.html b/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.html
index 851741cd76..8e68738c85 100644
--- a/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.html
+++ b/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.html
@@ -46,7 +46,7 @@
       class="continue-button"
       [disabled]="formArray.invalid"
       type="submit"
-      [attr.data-e2e]="'save-button'"
+      data-e2e="save-button"
     >
       {{ 'ACTIONS.SAVE' | translate }}
     </button>
diff --git a/console/src/app/pages/projects/project-create/project-create.component.html b/console/src/app/pages/projects/project-create/project-create.component.html
index 16c4311fa8..2dd98dec0e 100644
--- a/console/src/app/pages/projects/project-create/project-create.component.html
+++ b/console/src/app/pages/projects/project-create/project-create.component.html
@@ -20,7 +20,7 @@
       [disabled]="!project.name"
       cdkFocusInitial
       type="submit"
-      [attr.data-e2e]="'continue-button'"
+      data-e2e="continue-button"
     >
       {{ 'ACTIONS.CONTINUE' | translate }}
     </button>
diff --git a/console/src/app/pages/projects/project-grid/project-grid.component.html b/console/src/app/pages/projects/project-grid/project-grid.component.html
index 59edac1a4d..df618192ed 100644
--- a/console/src/app/pages/projects/project-grid/project-grid.component.html
+++ b/console/src/app/pages/projects/project-grid/project-grid.component.html
@@ -47,7 +47,7 @@
       *ngFor="let item of notPinned; index as i"
       (click)="navigateToProject(type, $any(item), $event)"
       [ngClass]="{ inactive: item.state !== ProjectState.PROJECT_STATE_ACTIVE }"
-      [attr.data-e2e]="'grid-card'"
+      data-e2e="grid-card"
     >
       <div class="text-part">
         <span *ngIf="item.details && item.details.changeDate" class="top cnsl-secondary-text"
@@ -106,7 +106,7 @@
     (click)="deleteProject($event, key)"
     class="delete-button"
     mat-icon-button
-    [attr.data-e2e]="'delete-project-button'"
+    data-e2e="delete-project-button"
   >
     <i class="las la-trash"></i>
   </button>
diff --git a/console/src/app/pages/projects/project-list/project-list.component.html b/console/src/app/pages/projects/project-list/project-list.component.html
index 409603b3bd..695868c881 100644
--- a/console/src/app/pages/projects/project-list/project-list.component.html
+++ b/console/src/app/pages/projects/project-list/project-list.component.html
@@ -1,81 +1,136 @@
 <div class="projects-table-wrapper" *ngIf="projectType$ | async as type">
-  <cnsl-refresh-table [hideRefresh]="true" (refreshed)="refreshPage(type)" [dataSize]="totalResult"
-    [timestamp]="viewTimestamp" [selection]="selection" [loading]="loading$ | async">
-
-    <cnsl-filter-project actions *ngIf="!selection.hasValue()" (filterChanged)="applySearchQuery(type, $any($event))"
-      (filterOpen)="filterOpen = $event"></cnsl-filter-project>
+  <cnsl-refresh-table
+    [hideRefresh]="true"
+    (refreshed)="refreshPage(type)"
+    [dataSize]="totalResult"
+    [timestamp]="viewTimestamp"
+    [selection]="selection"
+    [loading]="loading$ | async"
+  >
+    <cnsl-filter-project
+      actions
+      *ngIf="!selection.hasValue()"
+      (filterChanged)="applySearchQuery(type, $any($event))"
+      (filterOpen)="filterOpen = $event"
+    ></cnsl-filter-project>
 
     <ng-template actions cnslHasRole [hasRole]="['project.create']">
-      <a *ngIf="type === ProjectType.PROJECTTYPE_OWNED" [routerLink]="[ '/projects', 'create']" color="primary"
-        mat-raised-button class="cnsl-action-button">
+      <a
+        *ngIf="type === ProjectType.PROJECTTYPE_OWNED"
+        [routerLink]="['/projects', 'create']"
+        color="primary"
+        mat-raised-button
+        class="cnsl-action-button"
+      >
         <mat-icon class="icon">add</mat-icon>
         <span>{{ 'ACTIONS.NEW' | translate }}</span>
-        <cnsl-action-keys (actionTriggered)="gotoRouterLink([ '/projects', 'create'])">
-        </cnsl-action-keys>
+        <cnsl-action-keys (actionTriggered)="gotoRouterLink(['/projects', 'create'])"> </cnsl-action-keys>
       </a>
     </ng-template>
     <div class="table-wrapper">
       <table class="table" mat-table [dataSource]="dataSource">
         <ng-container matColumnDef="select">
           <th class="selection" mat-header-cell *matHeaderCellDef>
-            <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+            <mat-checkbox
+              color="primary"
+              (change)="$event ? masterToggle() : null"
               [checked]="selection.hasValue() && isAllSelected()"
-              [indeterminate]="selection.hasValue() && !isAllSelected()">
+              [indeterminate]="selection.hasValue() && !isAllSelected()"
+            >
             </mat-checkbox>
           </th>
           <td class="selection" mat-cell *matCellDef="let row">
-            <mat-checkbox color="primary" (click)="$event.stopPropagation()"
-              (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+            <mat-checkbox
+              color="primary"
+              (click)="$event.stopPropagation()"
+              (change)="$event ? selection.toggle(row) : null"
+              [checked]="selection.isSelected(row)"
+            >
             </mat-checkbox>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
-          <td class="pointer"
-            [routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]"
-            mat-cell *matCellDef="let project">
-            <span *ngIf="project.name">{{project.name}}</span>
-            <span *ngIf="project.projectName">{{project.projectName}}</span>
+          <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.NAME' | translate }}</th>
+          <td
+            class="pointer"
+            [routerLink]="
+              type === ProjectType.PROJECTTYPE_OWNED
+                ? ['/projects', project.id]
+                : ['/granted-projects', project.projectId, 'grant', project.grantId]
+            "
+            mat-cell
+            *matCellDef="let project"
+          >
+            <span *ngIf="project.name">{{ project.name }}</span>
+            <span *ngIf="project.projectName">{{ project.projectName }}</span>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="projectOwnerName">
-          <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.RESOURCEOWNER' | translate }} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.RESOURCEOWNER' | translate }}</th>
           <td class="pointer" mat-cell *matCellDef="let project">
-            {{project.projectOwnerName}} </td>
+            {{ project.projectOwnerName }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="state">
-          <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
-          <td class="pointer"
-            [routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]"
-            mat-cell *matCellDef="let project">
-            <span class="state"
-              [ngClass]="{'active': project.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': project.state === ProjectState.PROJECT_STATE_INACTIVE}"
-              *ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span>
+          <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.STATE' | translate }}</th>
+          <td
+            class="pointer"
+            [routerLink]="
+              type === ProjectType.PROJECTTYPE_OWNED
+                ? ['/projects', project.id]
+                : ['/granted-projects', project.projectId, 'grant', project.grantId]
+            "
+            mat-cell
+            *matCellDef="let project"
+          >
+            <span
+              class="state"
+              [ngClass]="{
+                active: project.state === ProjectState.PROJECT_STATE_ACTIVE,
+                inactive: project.state === ProjectState.PROJECT_STATE_INACTIVE
+              }"
+              *ngIf="project.state"
+              >{{ 'PROJECT.STATE.' + project.state | translate }}</span
+            >
           </td>
         </ng-container>
 
-
         <ng-container matColumnDef="creationDate">
-          <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
-          <td class="pointer"
-            [routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]"
-            mat-cell *matCellDef="let project">
-            <span *ngIf="project.details.creationDate">{{project.details.creationDate | timestampToDate |
-              localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
+          <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.CREATIONDATE' | translate }}</th>
+          <td
+            class="pointer"
+            [routerLink]="
+              type === ProjectType.PROJECTTYPE_OWNED
+                ? ['/projects', project.id]
+                : ['/granted-projects', project.projectId, 'grant', project.grantId]
+            "
+            mat-cell
+            *matCellDef="let project"
+          >
+            <span *ngIf="project.details.creationDate">{{
+              project.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
+            }}</span>
           </td>
         </ng-container>
 
-
         <ng-container matColumnDef="changeDate">
-          <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
-          <td class="pointer"
-            [routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]"
-            mat-cell *matCellDef="let project">
-            <span *ngIf="project.details.changeDate">{{project.details.changeDate | timestampToDate |
-              localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
+          <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.CHANGEDATE' | translate }}</th>
+          <td
+            class="pointer"
+            [routerLink]="
+              type === ProjectType.PROJECTTYPE_OWNED
+                ? ['/projects', project.id]
+                : ['/granted-projects', project.projectId, 'grant', project.grantId]
+            "
+            mat-cell
+            *matCellDef="let project"
+          >
+            <span *ngIf="project.details.changeDate">{{
+              project.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
+            }}</span>
           </td>
         </ng-container>
 
@@ -83,9 +138,15 @@
           <th mat-header-cell *matHeaderCellDef></th>
           <td mat-cell *matCellDef="let project">
             <cnsl-table-actions>
-              <button actions *ngIf="project.id !== zitadelProjectId" color="warn" mat-icon-button
-                matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteProject(project.id, project.name)"
-                [attr.data-e2e]="'delete-project-button'">
+              <button
+                actions
+                *ngIf="project.id !== zitadelProjectId"
+                color="warn"
+                mat-icon-button
+                matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
+                (click)="deleteProject(project.id, project.name)"
+                data-e2e="delete-project-button"
+              >
                 <i class="las la-trash"></i>
               </button>
             </cnsl-table-actions>
@@ -93,15 +154,21 @@
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
     </div>
 
     <div *ngIf="(loading$ | async) === false && !dataSource?.data?.length" class="no-content-row">
       <i class="las la-exclamation"></i>
-      <span>{{'PROJECT.TABLE.EMPTY' | translate}}</span>
+      <span>{{ 'PROJECT.TABLE.EMPTY' | translate }}</span>
     </div>
-    <cnsl-paginator class="paginator" [timestamp]="viewTimestamp" [length]="totalResult" [pageSize]="20"
-      [pageSizeOptions]="[10, 20, 50, 100]" (page)="changePage(type)"></cnsl-paginator>
+    <cnsl-paginator
+      class="paginator"
+      [timestamp]="viewTimestamp"
+      [length]="totalResult"
+      [pageSize]="20"
+      [pageSizeOptions]="[10, 20, 50, 100]"
+      (page)="changePage(type)"
+    ></cnsl-paginator>
   </cnsl-refresh-table>
-</div>
\ No newline at end of file
+</div>
diff --git a/console/src/app/pages/projects/projects.component.html b/console/src/app/pages/projects/projects.component.html
index 9d62108cb3..af78f0cc0c 100644
--- a/console/src/app/pages/projects/projects.component.html
+++ b/console/src/app/pages/projects/projects.component.html
@@ -25,7 +25,7 @@
       </div>
 
       <span class="fill-space"></span>
-      <button class="grid-btn" (click)="grid = !grid" mat-icon-button [attr.data-e2e]="'toggle-grid'">
+      <button class="grid-btn" (click)="grid = !grid" mat-icon-button data-e2e="toggle-grid">
         <i *ngIf="grid" class="show list view las la-th-list"></i>
         <i *ngIf="!grid" class="las la-border-all"></i>
       </button>
diff --git a/console/src/app/pages/users/user-create-machine/user-create-machine.component.html b/console/src/app/pages/users/user-create-machine/user-create-machine.component.html
index 46a29181fd..d2ae668c77 100644
--- a/console/src/app/pages/users/user-create-machine/user-create-machine.component.html
+++ b/console/src/app/pages/users/user-create-machine/user-create-machine.component.html
@@ -32,13 +32,7 @@
         </cnsl-form-field>
       </div>
       <div class="machine-btn-container">
-        <button
-          color="primary"
-          [attr.data-e2e]="'create-button'"
-          [disabled]="userForm.invalid"
-          type="submit"
-          mat-raised-button
-        >
+        <button color="primary" data-e2e="create-button" [disabled]="userForm.invalid" type="submit" mat-raised-button>
           {{ 'ACTIONS.CREATE' | translate }}
         </button>
       </div>
diff --git a/console/src/app/pages/users/user-create/user-create.component.html b/console/src/app/pages/users/user-create/user-create.component.html
index 7887ef49b3..fbb5245572 100644
--- a/console/src/app/pages/users/user-create/user-create.component.html
+++ b/console/src/app/pages/users/user-create/user-create.component.html
@@ -149,7 +149,7 @@
       </div>
       <div class="user-create-btn-container">
         <button
-          [attr.data-e2e]="'create-button'"
+          data-e2e="create-button"
           color="primary"
           [disabled]="userForm.invalid || (this.usePassword && this.pwdForm.invalid)"
           type="submit"
diff --git a/console/src/app/pages/users/user-list/user-table/user-table.component.html b/console/src/app/pages/users/user-list/user-table/user-table.component.html
index 72bbf9af4f..0a9ad7a412 100644
--- a/console/src/app/pages/users/user-list/user-table/user-table.component.html
+++ b/console/src/app/pages/users/user-list/user-table/user-table.component.html
@@ -13,13 +13,13 @@
       label="{{ 'USER.TABLE.TYPES.HUMAN' | translate }}"
       (clicked)="setType(Type.TYPE_HUMAN)"
       [active]="type === Type.TYPE_HUMAN"
-      [attr.data-e2e]="'list-humans'"
+      data-e2e="list-humans"
     ></cnsl-nav-toggle>
     <cnsl-nav-toggle
       label="{{ 'USER.TABLE.TYPES.MACHINE' | translate }}"
       (clicked)="setType(Type.TYPE_MACHINE)"
       [active]="type === Type.TYPE_MACHINE"
-      [attr.data-e2e]="'list-machines'"
+      data-e2e="list-machines"
     ></cnsl-nav-toggle>
   </div>
 
@@ -58,7 +58,7 @@
       mat-raised-button
       [disabled]="!canWrite"
       class="cnsl-action-button"
-      [attr.data-e2e]="'create-user-button'"
+      data-e2e="create-user-button"
     >
       <mat-icon class="icon">add</mat-icon>
       <span>{{ 'ACTIONS.NEW' | translate }}</span>
@@ -197,7 +197,7 @@
               color="warn"
               (click)="deleteUser(user)"
               [disabled]="!canWrite || !canDelete"
-              [attr.e2e-data]="!canWrite || !canDelete ? 'disabled-delete-button' : 'enabled-delete-button'"
+              [attr.data-e2e]="!canWrite || !canDelete ? 'disabled-delete-button' : 'enabled-delete-button'"
               mat-icon-button
             >
               <i class="las la-trash"></i>
diff --git a/e2e/cypress/e2e/humans/humans.cy.ts b/e2e/cypress/e2e/humans/humans.cy.ts
index f7fdd14f2a..47fa33b879 100644
--- a/e2e/cypress/e2e/humans/humans.cy.ts
+++ b/e2e/cypress/e2e/humans/humans.cy.ts
@@ -1,57 +1,68 @@
-import { apiAuth } from '../../support/api/apiauth';
-import { ensureHumanUserExists, ensureUserDoesntExist } from '../../support/api/users';
-import { loginname } from '../../support/login/users';
+import { apiAuth } from "../../support/api/apiauth";
+import {
+  ensureHumanUserExists,
+  ensureUserDoesntExist,
+} from "../../support/api/users";
+import { loginname } from "../../support/login/users";
 
-describe.skip('humans', () => {
+describe.skip("humans", () => {
   const humansPath = `/ui/console/users?type=human`;
-  const testHumanUserNameAdd = 'e2ehumanusernameadd';
-  const testHumanUserNameRemove = 'e2ehumanusernameremove';
+  const testHumanUserNameAdd = "e2ehumanusernameadd";
+  const testHumanUserNameRemove = "e2ehumanusernameremove";
 
-  describe('add', () => {
+  describe("add", () => {
     before(`ensure it doesn't exist already`, () => {
       apiAuth().then((apiCallProperties) => {
-        ensureUserDoesntExist(apiCallProperties, testHumanUserNameAdd).then(()=>{
-          cy.visit(humansPath);
-        });
+        ensureUserDoesntExist(apiCallProperties, testHumanUserNameAdd).then(
+          () => {
+            cy.visit(humansPath);
+          }
+        );
       });
     });
 
-    it('should add a user', () => {
-      cy.get('[data-e2e="action-key-add"]').parents('[data-e2e="create-user-button"]').click();
-      cy.url().should('contain', 'users/create');
-      cy.get('[formcontrolname="email"]').type(loginname('e2ehuman'));
+    it("should add a user", () => {
+      cy.get('[data-e2e="action-key-add"]')
+        .parents('[data-e2e="create-user-button"]')
+        .click();
+      cy.url().should("contain", "users/create");
+      cy.get('[formcontrolname="email"]').type(loginname("e2ehuman"));
       //force needed due to the prefilled username prefix
-      cy.get('[formcontrolname="userName"]').type(testHumanUserNameAdd, { force: true });
-      cy.get('[formcontrolname="firstName"]').type('e2ehumanfirstname');
-      cy.get('[formcontrolname="lastName"]').type('e2ehumanlastname');
-      cy.get('[formcontrolname="phone"]').type('+41 123456789');
+      cy.get('[formcontrolname="userName"]').type(testHumanUserNameAdd, {
+        force: true,
+      });
+      cy.get('[formcontrolname="firstName"]').type("e2ehumanfirstname");
+      cy.get('[formcontrolname="lastName"]').type("e2ehumanlastname");
+      cy.get('[formcontrolname="phone"]').type("+41 123456789");
       cy.get('[data-e2e="create-button"]').click();
-      cy.get('.data-e2e-success');
+      cy.get(".data-e2e-success");
       cy.wait(200);
-      cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+      cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
     });
   });
 
-  describe('remove', () => {
-    before('ensure it exists', () => {
+  describe("remove", () => {
+    before("ensure it exists", () => {
       apiAuth().then((api) => {
-        ensureHumanUserExists(api, testHumanUserNameRemove).then(()=>{
+        ensureHumanUserExists(api, testHumanUserNameRemove).then(() => {
           cy.visit(humansPath);
         });
       });
     });
 
-    it('should delete a human user', () => {
-      cy.contains('tr', testHumanUserNameRemove)
+    it("should delete a human user", () => {
+      cy.contains("tr", testHumanUserNameRemove)
         // doesn't work, need to force click.
         // .trigger('mouseover')
-        .find('[e2e-data="enabled-delete-button"]')
-        .click({force: true});
-      cy.get('[e2e-data="confirm-dialog-input"]').click().type(loginname(testHumanUserNameRemove, Cypress.env('org')));
-      cy.get('[e2e-data="confirm-dialog-button"]').click();
-      cy.get('.data-e2e-success');
+        .find('[data-e2e="enabled-delete-button"]')
+        .click({ force: true });
+      cy.get('[data-e2e="confirm-dialog-input"]')
+        .click()
+        .type(loginname(testHumanUserNameRemove, Cypress.env("org")));
+      cy.get('[data-e2e="confirm-dialog-button"]').click();
+      cy.get(".data-e2e-success");
       cy.wait(200);
-      cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+      cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
     });
   });
-});
\ No newline at end of file
+});
diff --git a/e2e/cypress/e2e/machines/machines.cy.ts b/e2e/cypress/e2e/machines/machines.cy.ts
index 6bccb64e70..632bcf7cb2 100644
--- a/e2e/cypress/e2e/machines/machines.cy.ts
+++ b/e2e/cypress/e2e/machines/machines.cy.ts
@@ -1,55 +1,66 @@
-import { apiAuth } from '../../support/api/apiauth';
-import { ensureMachineUserExists, ensureUserDoesntExist } from '../../support/api/users';
-import { loginname } from '../../support/login/users';
+import { apiAuth } from "../../support/api/apiauth";
+import {
+  ensureMachineUserExists,
+  ensureUserDoesntExist,
+} from "../../support/api/users";
+import { loginname } from "../../support/login/users";
 
-describe.skip('machines', () => {
+describe.skip("machines", () => {
   const machinesPath = `/ui/console/users?type=machine`;
-  const testMachineUserNameAdd = 'e2emachineusernameadd';
-  const testMachineUserNameRemove = 'e2emachineusernameremove';
+  const testMachineUserNameAdd = "e2emachineusernameadd";
+  const testMachineUserNameRemove = "e2emachineusernameremove";
 
-  describe('add', () => {
+  describe("add", () => {
     before(`ensure it doesn't exist already`, () => {
       apiAuth().then((apiCallProperties) => {
-        ensureUserDoesntExist(apiCallProperties, testMachineUserNameAdd).then(()=>{
-          cy.visit(machinesPath);
-        });
+        ensureUserDoesntExist(apiCallProperties, testMachineUserNameAdd).then(
+          () => {
+            cy.visit(machinesPath);
+          }
+        );
       });
     });
 
-    it('should add a machine', () => {
-      cy.get('[data-e2e="action-key-add"]').parents('[data-e2e="create-user-button"]').click();
-      cy.url().should('contain', 'users/create-machine');
+    it("should add a machine", () => {
+      cy.get('[data-e2e="action-key-add"]')
+        .parents('[data-e2e="create-user-button"]')
+        .click();
+      cy.url().should("contain", "users/create-machine");
       //force needed due to the prefilled username prefix
-      cy.get('[formcontrolname="userName"]').type(testMachineUserNameAdd, { force: true });
-      cy.get('[formcontrolname="name"]').type('e2emachinename');
-      cy.get('[formcontrolname="description"]').type('e2emachinedescription');
+      cy.get('[formcontrolname="userName"]').type(testMachineUserNameAdd, {
+        force: true,
+      });
+      cy.get('[formcontrolname="name"]').type("e2emachinename");
+      cy.get('[formcontrolname="description"]').type("e2emachinedescription");
       cy.get('[data-e2e="create-button"]').click();
-      cy.get('.data-e2e-success');
+      cy.get(".data-e2e-success");
       cy.wait(200);
-      cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+      cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
     });
   });
 
-  describe('remove', () => {
-    before('ensure it exists', () => {
+  describe("remove", () => {
+    before("ensure it exists", () => {
       apiAuth().then((api) => {
-        ensureMachineUserExists(api, testMachineUserNameRemove).then(()=>{
+        ensureMachineUserExists(api, testMachineUserNameRemove).then(() => {
           cy.visit(machinesPath);
         });
       });
     });
 
-    it('should delete a machine', () => {
-      cy.contains('tr', testMachineUserNameRemove, { timeout: 1000 })
+    it("should delete a machine", () => {
+      cy.contains("tr", testMachineUserNameRemove, { timeout: 1000 })
         // doesn't work, need to force click.
         // .trigger('mouseover')
-        .find('[e2e-data="enabled-delete-button"]')
-        .click({force: true});
-      cy.get('[e2e-data="confirm-dialog-input"]').click().type(loginname(testMachineUserNameRemove, Cypress.env('org')));
-      cy.get('[e2e-data="confirm-dialog-button"]').click();
-      cy.get('.data-e2e-success');
+        .find('[data-e2e="enabled-delete-button"]')
+        .click({ force: true });
+      cy.get('[data-e2e="confirm-dialog-input"]')
+        .click()
+        .type(loginname(testMachineUserNameRemove, Cypress.env("org")));
+      cy.get('[data-e2e="confirm-dialog-button"]').click();
+      cy.get(".data-e2e-success");
       cy.wait(200);
-      cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+      cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
     });
   });
 });
diff --git a/e2e/cypress/e2e/projects/projects.cy.ts b/e2e/cypress/e2e/projects/projects.cy.ts
index c21f4b1b84..e9806badac 100644
--- a/e2e/cypress/e2e/projects/projects.cy.ts
+++ b/e2e/cypress/e2e/projects/projects.cy.ts
@@ -1,12 +1,15 @@
-import { apiAuth } from '../../support/api/apiauth';
-import { ensureProjectDoesntExist, ensureProjectExists } from '../../support/api/projects';
+import { apiAuth } from "../../support/api/apiauth";
+import {
+  ensureProjectDoesntExist,
+  ensureProjectExists,
+} from "../../support/api/projects";
 
-describe('projects', () => {
-  const testProjectNameCreate = 'e2eprojectcreate';
-  const testProjectNameDeleteList = 'e2eprojectdeletelist';
-  const testProjectNameDeleteGrid = 'e2eprojectdeletegrid';
+describe("projects", () => {
+  const testProjectNameCreate = "e2eprojectcreate";
+  const testProjectNameDeleteList = "e2eprojectdeletelist";
+  const testProjectNameDeleteGrid = "e2eprojectdeletegrid";
 
-  describe('add project', () => {
+  describe("add project", () => {
     beforeEach(`ensure it doesn't exist already`, () => {
       apiAuth().then((api) => {
         ensureProjectDoesntExist(api, testProjectNameCreate);
@@ -14,57 +17,61 @@ describe('projects', () => {
       cy.visit(`/ui/console/projects`);
     });
 
-    it('should add a project', () => {
-      cy.get('.add-project-button').click({ force: true });
-      cy.get('input').type(testProjectNameCreate);
+    it("should add a project", () => {
+      cy.get(".add-project-button").click({ force: true });
+      cy.get("input").type(testProjectNameCreate);
       cy.get('[data-e2e="continue-button"]').click();
-      cy.get('.data-e2e-success');
+      cy.get(".data-e2e-success");
       cy.wait(200);
-      cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+      cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
     });
   });
 
-  describe.skip('remove project', () => {
-    describe('list view', () => {
-      beforeEach('ensure it exists', () => {
+  describe.skip("remove project", () => {
+    describe("list view", () => {
+      beforeEach("ensure it exists", () => {
         apiAuth().then((api) => {
           ensureProjectExists(api, testProjectNameDeleteList);
         });
         cy.visit(`/ui/console/projects`);
       });
 
-      it('removes the project', () => {
-        cy.get('[data-e2e=toggle-grid]').click();
-        cy.get('[data-e2e=timestamp]');
-        cy.contains('tr', testProjectNameDeleteList, { timeout: 1000 })
-          .find('[data-e2e=delete-project-button]')
-          .click({force: true});
-        cy.get('[e2e-data="confirm-dialog-input"]').type(testProjectNameDeleteList);
-        cy.get('[e2e-data="confirm-dialog-button"]').click();
-        cy.get('.data-e2e-success');
+      it("removes the project", () => {
+        cy.get('[data-e2e="toggle-grid"]').click();
+        cy.get('[data-e2e="timestamp"]');
+        cy.contains("tr", testProjectNameDeleteList, { timeout: 1000 })
+          .find('[data-e2e="delete-project-button"]')
+          .click({ force: true });
+        cy.get('[data-e2e="confirm-dialog-input"]').type(
+          testProjectNameDeleteList
+        );
+        cy.get('[data-e2e="confirm-dialog-button"]').click();
+        cy.get(".data-e2e-success");
         cy.wait(200);
-        cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+        cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
       });
     });
 
-    describe('grid view', () => {
-      beforeEach('ensure it exists', () => {
+    describe("grid view", () => {
+      beforeEach("ensure it exists", () => {
         apiAuth().then((api) => {
           ensureProjectExists(api, testProjectNameDeleteGrid);
         });
         cy.visit(`/ui/console/projects`);
       });
 
-      it('removes the project', () => {
-        cy.contains('[data-e2e=grid-card]', testProjectNameDeleteGrid)
-          .find('[data-e2e=delete-project-button]')
-          .trigger('mouseover')
+      it("removes the project", () => {
+        cy.contains('[data-e2e="grid-card"]', testProjectNameDeleteGrid)
+          .find('[data-e2e="delete-project-button"]')
+          .trigger("mouseover")
           .click();
-        cy.get('[e2e-data="confirm-dialog-input"]').type(testProjectNameDeleteGrid);
-        cy.get('[e2e-data="confirm-dialog-button"]').click();
-        cy.get('.data-e2e-success');
+        cy.get('[data-e2e="confirm-dialog-input"]').type(
+          testProjectNameDeleteGrid
+        );
+        cy.get('[data-e2e="confirm-dialog-button"]').click();
+        cy.get(".data-e2e-success");
         cy.wait(200);
-        cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+        cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
       });
     });
   });
diff --git a/e2e/cypress/e2e/settings/login-policy.cy.ts b/e2e/cypress/e2e/settings/login-policy.cy.ts
index 327476d715..b04a8c06b8 100644
--- a/e2e/cypress/e2e/settings/login-policy.cy.ts
+++ b/e2e/cypress/e2e/settings/login-policy.cy.ts
@@ -14,7 +14,7 @@ describe("login policy", ()=> {
                 login(user)
                 cy.visit(orgPath)
                 // TODO: Why force?
-                cy.contains('[data-e2e=policy-card]', 'Login Policy').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e
+                cy.contains('[data-e2e="policy-card"]', 'Login Policy').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e
                 apiAuth().then(api => {
                     ensureHumanUserExists(api, User.LoginPolicyUser)
                 })
diff --git a/e2e/cypress/e2e/settings/password-complexity.cy.ts b/e2e/cypress/e2e/settings/password-complexity.cy.ts
index 48e95ec87c..5518aa7d5a 100644
--- a/e2e/cypress/e2e/settings/password-complexity.cy.ts
+++ b/e2e/cypress/e2e/settings/password-complexity.cy.ts
@@ -13,7 +13,7 @@ describe("password complexity", ()=> {
                 login(user)
                 cy.visit(orgPath)
                 // TODO: Why force?
-                cy.contains('[data-e2e=policy-card]', 'Password Complexity').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e
+                cy.contains('[data-e2e="policy-card"]', 'Password Complexity').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e
             })
 
             // TODO: fix saving password complexity policy bug
diff --git a/e2e/cypress/e2e/settings/private-labeling.cy.ts b/e2e/cypress/e2e/settings/private-labeling.cy.ts
index 4fdcd922fa..8094e39e10 100644
--- a/e2e/cypress/e2e/settings/private-labeling.cy.ts
+++ b/e2e/cypress/e2e/settings/private-labeling.cy.ts
@@ -13,7 +13,7 @@ describe('private labeling', () => {
         login(user);
         cy.visit(orgPath);
         // TODO: Why force?
-        cy.contains('[data-e2e=policy-card]', 'Private Labeling').contains('button', 'Modify').click({ force: true }); // TODO: select data-e2e
+        cy.contains('[data-e2e="policy-card"]', 'Private Labeling').contains('button', 'Modify').click({ force: true }); // TODO: select data-e2e
       });
 
       customize('white', user);
@@ -32,12 +32,12 @@ function customize(theme: string, user: User) {
 
     describe.skip('logo', () => {
       beforeEach('expand logo category', () => {
-        cy.contains('[data-e2e=policy-category]', 'Logo').click(); // TODO: select data-e2e
+        cy.contains('[data-e2e="policy-category"]', 'Logo').click(); // TODO: select data-e2e
         cy.fixture('logo.png').as('logo');
       });
 
       it('should update a logo', () => {
-        cy.get('[data-e2e=image-part-logo]')
+        cy.get('[data-e2e="image-part-logo"]')
           .find('input')
           .then(function (el) {
             const blob = Cypress.Blob.base64StringToBlob(this.logo, 'image/png');
@@ -56,10 +56,10 @@ function customize(theme: string, user: User) {
     it('should update an icon');
     it('should delete an icon');
     it.skip('should update the background color', () => {
-      cy.contains('[data-e2e=color]', 'Background Color').find('button').click(); // TODO: select data-e2e
+      cy.contains('[data-e2e="color"]', 'Background Color').find('button').click(); // TODO: select data-e2e
       cy.get('color-editable-input').find('input').clear().type('#ae44dc');
-      cy.get('[data-e2e=save-colors-button]').click();
-      cy.get('[data-e2e=header-user-avatar]').click();
+      cy.get('[data-e2e="save-colors-button"]').click();
+      cy.get('[data-e2e="header-user-avatar"]').click();
       cy.contains('Logout All Users').click(); // TODO: select data-e2e
       login(User.LoginPolicyUser, undefined, true, null, () => {
         cy.pause();