diff --git a/src/app/features/campaigns/campaigns.routes.ts b/src/app/features/campaigns/campaigns.routes.ts
index 5b1e3ea91..08995a0cb 100644
--- a/src/app/features/campaigns/campaigns.routes.ts
+++ b/src/app/features/campaigns/campaigns.routes.ts
@@ -74,6 +74,7 @@ export const CAMPAIGNS_ROUTES: Routes = [
   },
   {
     path: 'email-messages',
+    title: 'EMAIL_MESSAGES.TITLE',
     canActivate: [authGuard, permissionGuard],
     data: { permissions: 'READ_EMAIL_CAMPAIGN' },
     loadComponent: () =>
diff --git a/src/app/features/campaigns/email-messages/email-messages.component.test.ts b/src/app/features/campaigns/email-messages/email-messages.component.test.ts
index fb899da0a..d1edb850a 100644
--- a/src/app/features/campaigns/email-messages/email-messages.component.test.ts
+++ b/src/app/features/campaigns/email-messages/email-messages.component.test.ts
@@ -25,6 +25,7 @@ import { NotificationService } from '../../../core/services/notification.service
 import { createSpyObj } from '../../../testing/mocks';
 import { provideTranslateTesting } from '../../../testing/i18n-testing';
 import { expectLookedUp } from '../../../testing/translated-text';
+import { CAMPAIGNS_ROUTES } from '../campaigns.routes';
 import { EMAIL_TAB, EmailMessagesComponent } from './email-messages.component';
 
 describe('EmailMessagesComponent', () => {
@@ -55,4 +56,34 @@ describe('EmailMessagesComponent', () => {
 
     expectLookedUp(fixture.nativeElement, ['EMAIL_MESSAGES.CONFIGURATION_JSON']);
   });
+
+  it.each([EMAIL_TAB.messages, EMAIL_TAB.pending, EMAIL_TAB.sent, EMAIL_TAB.failed])(
+    'renders the %s list as a native table with an empty state',
+    (tab) => {
+      fixture.componentInstance.onTabChange(tab);
+      fixture.detectChanges();
+      const root: HTMLElement = fixture.nativeElement;
+
+      expect(root.querySelector('cdk-table')).toBeNull();
+      expect(root.querySelector('table[cdk-table] tr[cdk-header-row]')).not.toBeNull();
+      expect(root.querySelector('table[cdk-table] tr.no-data-row')).not.toBeNull();
+      expectLookedUp(root, ['COMMON.ID', 'COMMON.NO_DATA']);
+    },
+  );
+
+  it('translates the message headers and labels the delete action', () => {
+    fixture.componentInstance.messages.set([
+      { id: 7, to: 'a@example.org', subject: 'Hi', status: 'pending' },
+    ]);
+    fixture.detectChanges();
+    const root: HTMLElement = fixture.nativeElement;
+
+    expectLookedUp(root, ['COMMON.ID', 'COMMON.STATUS', 'COMMON.ACTIONS']);
+    expect(root.querySelector('tr[cdk-row] ion-button')?.getAttribute('aria-label')).toBeTruthy();
+  });
+
+  it('gives the route a title', () => {
+    const route = CAMPAIGNS_ROUTES.find((r) => r.path === 'email-messages');
+    expect(route?.title).toBe('EMAIL_MESSAGES.TITLE');
+  });
 });
diff --git a/src/app/features/campaigns/email-messages/email-messages.component.ts b/src/app/features/campaigns/email-messages/email-messages.component.ts
index 4a25568be..3984a0711 100644
--- a/src/app/features/campaigns/email-messages/email-messages.component.ts
+++ b/src/app/features/campaigns/email-messages/email-messages.component.ts
@@ -160,133 +160,154 @@ export type EmailTab = (typeof EMAIL_TAB)[keyof typeof EMAIL_TAB];
                 </div>
               }
 
-              <cdk-table [dataSource]="messages()" class="full-width">
+              <table cdk-table [dataSource]="messages()" class="full-width">
                 <ng-container cdkColumnDef="id">
-                  <cdk-header-cell *cdkHeaderCellDef>ID</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.id }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>{{ 'COMMON.ID' | appTranslate }}</th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.id }}</td>
                 </ng-container>
                 <ng-container cdkColumnDef="to">
-                  <cdk-header-cell *cdkHeaderCellDef>{{
-                    'EMAIL_MESSAGES.TO' | appTranslate
-                  }}</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.to }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>
+                    {{ 'EMAIL_MESSAGES.TO' | appTranslate }}
+                  </th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.to }}</td>
                 </ng-container>
                 <ng-container cdkColumnDef="subject">
-                  <cdk-header-cell *cdkHeaderCellDef>{{
-                    'EMAIL_MESSAGES.SUBJECT' | appTranslate
-                  }}</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.subject }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>
+                    {{ 'EMAIL_MESSAGES.SUBJECT' | appTranslate }}
+                  </th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.subject }}</td>
                 </ng-container>
                 <ng-container cdkColumnDef="status">
-                  <cdk-header-cell *cdkHeaderCellDef>Status</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.status }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>{{ 'COMMON.STATUS' | appTranslate }}</th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.status }}</td>
                 </ng-container>
                 <ng-container cdkColumnDef="actions">
-                  <cdk-header-cell *cdkHeaderCellDef>Actions</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">
+                  <th cdk-header-cell *cdkHeaderCellDef>{{ 'COMMON.ACTIONS' | appTranslate }}</th>
+                  <td cdk-cell *cdkCellDef="let row">
                     <ion-button
                       fill="clear"
                       color="danger"
                       (click)="deleteMessage(row.id)"
                       [title]="'EMAIL_MESSAGES.DELETE' | appTranslate"
+                      [attr.aria-label]="'EMAIL_MESSAGES.DELETE' | appTranslate"
                     >
                       &#x1F5D1;
                     </ion-button>
-                  </cdk-cell>
+                  </td>
                 </ng-container>
-                <cdk-header-row *cdkHeaderRowDef="msgColumns"></cdk-header-row>
-                <cdk-row *cdkRowDef="let row; columns: msgColumns"></cdk-row>
-              </cdk-table>
+                <tr cdk-header-row *cdkHeaderRowDef="msgColumns"></tr>
+                <tr cdk-row *cdkRowDef="let row; columns: msgColumns"></tr>
+                <tr class="no-data-row" *cdkNoDataRow>
+                  <td [attr.colspan]="msgColumns.length">
+                    {{ 'COMMON.NO_DATA' | appTranslate }}
+                  </td>
+                </tr>
+              </table>
             </div>
           }
           @if (activeTab() === TAB.pending) {
             <div class="tab-content">
-              <cdk-table [dataSource]="pending()" class="full-width">
+              <table cdk-table [dataSource]="pending()" class="full-width">
                 <ng-container cdkColumnDef="id">
-                  <cdk-header-cell *cdkHeaderCellDef>ID</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.id }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>{{ 'COMMON.ID' | appTranslate }}</th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.id }}</td>
                 </ng-container>
                 <ng-container cdkColumnDef="to">
-                  <cdk-header-cell *cdkHeaderCellDef>{{
-                    'EMAIL_MESSAGES.TO' | appTranslate
-                  }}</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.to }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>
+                    {{ 'EMAIL_MESSAGES.TO' | appTranslate }}
+                  </th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.to }}</td>
                 </ng-container>
                 <ng-container cdkColumnDef="subject">
-                  <cdk-header-cell *cdkHeaderCellDef>{{
-                    'EMAIL_MESSAGES.SUBJECT' | appTranslate
-                  }}</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.subject }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>
+                    {{ 'EMAIL_MESSAGES.SUBJECT' | appTranslate }}
+                  </th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.subject }}</td>
                 </ng-container>
                 <ng-container cdkColumnDef="sentDate">
-                  <cdk-header-cell *cdkHeaderCellDef>{{
-                    'EMAIL_MESSAGES.SENT_DATE' | appTranslate
-                  }}</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.sentDate }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>
+                    {{ 'EMAIL_MESSAGES.SENT_DATE' | appTranslate }}
+                  </th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.sentDate }}</td>
                 </ng-container>
-                <cdk-header-row *cdkHeaderRowDef="queueColumns"></cdk-header-row>
-                <cdk-row *cdkRowDef="let row; columns: queueColumns"></cdk-row>
-              </cdk-table>
+                <tr cdk-header-row *cdkHeaderRowDef="queueColumns"></tr>
+                <tr cdk-row *cdkRowDef="let row; columns: queueColumns"></tr>
+                <tr class="no-data-row" *cdkNoDataRow>
+                  <td [attr.colspan]="queueColumns.length">
+                    {{ 'COMMON.NO_DATA' | appTranslate }}
+                  </td>
+                </tr>
+              </table>
             </div>
           }
           @if (activeTab() === TAB.sent) {
             <div class="tab-content">
-              <cdk-table [dataSource]="sent()" class="full-width">
+              <table cdk-table [dataSource]="sent()" class="full-width">
                 <ng-container cdkColumnDef="id">
-                  <cdk-header-cell *cdkHeaderCellDef>ID</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.id }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>{{ 'COMMON.ID' | appTranslate }}</th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.id }}</td>
                 </ng-container>
                 <ng-container cdkColumnDef="to">
-                  <cdk-header-cell *cdkHeaderCellDef>{{
-                    'EMAIL_MESSAGES.TO' | appTranslate
-                  }}</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.to }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>
+                    {{ 'EMAIL_MESSAGES.TO' | appTranslate }}
+                  </th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.to }}</td>
                 </ng-container>
                 <ng-container cdkColumnDef="subject">
-                  <cdk-header-cell *cdkHeaderCellDef>{{
-                    'EMAIL_MESSAGES.SUBJECT' | appTranslate
-                  }}</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.subject }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>
+                    {{ 'EMAIL_MESSAGES.SUBJECT' | appTranslate }}
+                  </th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.subject }}</td>
                 </ng-container>
                 <ng-container cdkColumnDef="sentDate">
-                  <cdk-header-cell *cdkHeaderCellDef>{{
-                    'EMAIL_MESSAGES.SENT_DATE' | appTranslate
-                  }}</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.sentDate }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>
+                    {{ 'EMAIL_MESSAGES.SENT_DATE' | appTranslate }}
+                  </th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.sentDate }}</td>
                 </ng-container>
-                <cdk-header-row *cdkHeaderRowDef="queueColumns"></cdk-header-row>
-                <cdk-row *cdkRowDef="let row; columns: queueColumns"></cdk-row>
-              </cdk-table>
+                <tr cdk-header-row *cdkHeaderRowDef="queueColumns"></tr>
+                <tr cdk-row *cdkRowDef="let row; columns: queueColumns"></tr>
+                <tr class="no-data-row" *cdkNoDataRow>
+                  <td [attr.colspan]="queueColumns.length">
+                    {{ 'COMMON.NO_DATA' | appTranslate }}
+                  </td>
+                </tr>
+              </table>
             </div>
           }
           @if (activeTab() === TAB.failed) {
             <div class="tab-content">
-              <cdk-table [dataSource]="failed()" class="full-width">
+              <table cdk-table [dataSource]="failed()" class="full-width">
                 <ng-container cdkColumnDef="id">
-                  <cdk-header-cell *cdkHeaderCellDef>ID</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.id }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>{{ 'COMMON.ID' | appTranslate }}</th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.id }}</td>
                 </ng-container>
                 <ng-container cdkColumnDef="to">
-                  <cdk-header-cell *cdkHeaderCellDef>{{
-                    'EMAIL_MESSAGES.TO' | appTranslate
-                  }}</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.to }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>
+                    {{ 'EMAIL_MESSAGES.TO' | appTranslate }}
+                  </th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.to }}</td>
                 </ng-container>
                 <ng-container cdkColumnDef="subject">
-                  <cdk-header-cell *cdkHeaderCellDef>{{
-                    'EMAIL_MESSAGES.SUBJECT' | appTranslate
-                  }}</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.subject }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>
+                    {{ 'EMAIL_MESSAGES.SUBJECT' | appTranslate }}
+                  </th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.subject }}</td>
                 </ng-container>
                 <ng-container cdkColumnDef="sentDate">
-                  <cdk-header-cell *cdkHeaderCellDef>{{
-                    'EMAIL_MESSAGES.SENT_DATE' | appTranslate
-                  }}</cdk-header-cell>
-                  <cdk-cell *cdkCellDef="let row">{{ row.sentDate }}</cdk-cell>
+                  <th cdk-header-cell *cdkHeaderCellDef>
+                    {{ 'EMAIL_MESSAGES.SENT_DATE' | appTranslate }}
+                  </th>
+                  <td cdk-cell *cdkCellDef="let row">{{ row.sentDate }}</td>
                 </ng-container>
-                <cdk-header-row *cdkHeaderRowDef="queueColumns"></cdk-header-row>
-                <cdk-row *cdkRowDef="let row; columns: queueColumns"></cdk-row>
-              </cdk-table>
+                <tr cdk-header-row *cdkHeaderRowDef="queueColumns"></tr>
+                <tr cdk-row *cdkRowDef="let row; columns: queueColumns"></tr>
+                <tr class="no-data-row" *cdkNoDataRow>
+                  <td [attr.colspan]="queueColumns.length">
+                    {{ 'COMMON.NO_DATA' | appTranslate }}
+                  </td>
+                </tr>
+              </table>
             </div>
           }
           @if (activeTab() === TAB.configuration) {
@@ -322,6 +343,10 @@ export type EmailTab = (typeof EMAIL_TAB)[keyof typeof EMAIL_TAB];
         flex-direction: column;
         gap: 16px;
       }
+      .no-data-row td {
+        text-align: center;
+        color: var(--text-muted);
+      }
       .full-width {
         width: 100%;
       }
diff --git a/src/app/features/spm/survey-responses/survey-responses.component.ts b/src/app/features/spm/survey-responses/survey-responses.component.ts
index 038e33aed..9310c5bec 100644
--- a/src/app/features/spm/survey-responses/survey-responses.component.ts
+++ b/src/app/features/spm/survey-responses/survey-responses.component.ts
@@ -108,25 +108,25 @@ interface SurveyResponse {
         <!-- Step 2: Responses table -->
         @if (responses().length > 0) {
           <h3>{{ 'SURVEY_RESPONSES.RESPONSES' | appTranslate }}</h3>
-          <cdk-table [dataSource]="responses()" class="full-width">
+          <table cdk-table [dataSource]="responses()" class="full-width">
             <ng-container cdkColumnDef="id">
-              <cdk-header-cell *cdkHeaderCellDef>ID</cdk-header-cell>
-              <cdk-cell *cdkCellDef="let row">{{ row.id ?? row.entryId }}</cdk-cell>
+              <th cdk-header-cell *cdkHeaderCellDef>ID</th>
+              <td cdk-cell *cdkCellDef="let row">{{ row.id ?? row.entryId }}</td>
             </ng-container>
 
             <ng-container cdkColumnDef="score">
-              <cdk-header-cell *cdkHeaderCellDef>Score</cdk-header-cell>
-              <cdk-cell *cdkCellDef="let row">{{ row.score }}</cdk-cell>
+              <th cdk-header-cell *cdkHeaderCellDef>Score</th>
+              <td cdk-cell *cdkCellDef="let row">{{ row.score }}</td>
             </ng-container>
 
             <ng-container cdkColumnDef="date">
-              <cdk-header-cell *cdkHeaderCellDef>Date</cdk-header-cell>
-              <cdk-cell *cdkCellDef="let row">{{ row.date }}</cdk-cell>
+              <th cdk-header-cell *cdkHeaderCellDef>Date</th>
+              <td cdk-cell *cdkCellDef="let row">{{ row.date }}</td>
             </ng-container>
 
             <ng-container cdkColumnDef="actions">
-              <cdk-header-cell *cdkHeaderCellDef>Actions</cdk-header-cell>
-              <cdk-cell *cdkCellDef="let row">
+              <th cdk-header-cell *cdkHeaderCellDef>Actions</th>
+              <td cdk-cell *cdkCellDef="let row">
                 <ion-button
                   fill="clear"
                   color="danger"
@@ -135,12 +135,12 @@ interface SurveyResponse {
                 >
                   &#x1F5D1;
                 </ion-button>
-              </cdk-cell>
+              </td>
             </ng-container>
 
-            <cdk-header-row *cdkHeaderRowDef="displayedColumns"></cdk-header-row>
-            <cdk-row *cdkRowDef="let row; columns: displayedColumns"></cdk-row>
-          </cdk-table>
+            <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
+            <tr cdk-row *cdkRowDef="let row; columns: displayedColumns"></tr>
+          </table>
         }
 
         <hr class="divider" />