diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/on-the-day/host-hearing-list/host-hearing-table/host-hearing-table.component.html b/VideoWeb/VideoWeb/ClientApp/src/app/on-the-day/host-hearing-list/host-hearing-table/host-hearing-table.component.html
index e363664ca5..b37bac7d68 100644
--- a/VideoWeb/VideoWeb/ClientApp/src/app/on-the-day/host-hearing-list/host-hearing-table/host-hearing-table.component.html
+++ b/VideoWeb/VideoWeb/ClientApp/src/app/on-the-day/host-hearing-list/host-hearing-table/host-hearing-table.component.html
@@ -1,135 +1,156 @@
 <div class="govuk-grid-row">
-    <div class="govuk-grid-column-full table-container">
-        <table [attr.aria-label]="'judge-hearing-table.description' | translate" class="govuk-table">
-            <thead class="govuk-table__head">
-                <tr class="govuk-table__row">
-                    <th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.time' | translate }}</th>
-                    <th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.judge' | translate }}</th>
-                    <th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.hearing' | translate }}</th>
-                    <th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.attendees' | translate }}</th>
-                    <th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.conference-status-heading' | translate }}</th>
-                </tr>
-            </thead>
-            <tbody class="govuk-table__body">
-                <tr *ngFor="let hearing of hearings" id="judges-list-{{ hearing.id }}" class="govuk-table__row">
-                    <!-- Time -->
-                    <td class="govuk-table__cell">
-                        <p id="scheduled-datetime-{{ hearing.id }}" class="govuk-!-margin-0 govuk-!-padding-0">
-                            {{ hearing.scheduledStartTime | date: 'HH:mm' }} -
-                            {{ hearing.scheduledEndTime | date: 'HH:mm' }}
-                        </p>
-                    </td>
+  <div class="govuk-grid-column-full table-container">
+    <table [attr.aria-label]="'judge-hearing-table.description' | translate" class="govuk-table">
+      <thead class="govuk-table__head">
+        <tr class="govuk-table__row">
+          <th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.time' | translate }}</th>
+          <th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.judge' | translate }}</th>
+          <th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.hearing' | translate }}</th>
+          <th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.attendees' | translate }}</th>
+          <th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.conference-status-heading' | translate }}</th>
+        </tr>
+      </thead>
+      <tbody class="govuk-table__body">
+        <tr *ngFor="let hearing of hearings" id="judges-list-{{ hearing.id }}" class="govuk-table__row">
+          <!-- Time -->
+          <td class="govuk-table__cell">
+            <p id="scheduled-datetime-{{ hearing.id }}" class="govuk-!-margin-0 govuk-!-padding-0">
+              {{ hearing.scheduledStartTime | date: 'HH:mm' }} -
+              {{ hearing.scheduledEndTime | date: 'HH:mm' }}
+            </p>
+          </td>
 
-                    <!-- Judge-->
-                    <td class="govuk-table__cell">
-                        <p id="judge-{{ hearing.id }}" class="govuk-!-margin-0 govuk-!-padding-0">{{
-                            hearing.judge?.displayName }}</p>
-                    </td>
+          <!-- Judge-->
+          <td class="govuk-table__cell">
+            <p id="judge-{{ hearing.id }}" class="govuk-!-margin-0 govuk-!-padding-0">{{ hearing.judge?.displayName }}</p>
+          </td>
 
-                    <!-- Hearing -->
-                    <td class="govuk-table__cell">
-                        <p id="case-name-{{ hearing.id }}"
-                            class="govuk-!-margin-0 govuk-!-padding-0 govuk-!-font-weight-bold">
-                            <app-truncatable-text [text]="hearing.caseName" [maxLimit]="15" [hideShowMore]="true"></app-truncatable-text>
-                        </p>
-                        <p id="case-type-{{ hearing.id }}" class="govuk-!-margin-0">
-                            {{ 'case-type.' + stringToTranslateId(hearing.caseType) | translate }}
-                        </p>
-                        <p class="govuk-!-margin-0 govuk-!-padding-0">
-                            {{ 'judge-hearing-table.case-number' | translate }}<span id="case-number-{{ hearing.id }}"
-                                class="govuk-!-font-weight-bold"><app-truncatable-text [text]="hearing.caseNumber" [maxLimit]="15" [hideShowMore]="true"></app-truncatable-text></span>
-                        </p>
-                    </td>
+          <!-- Hearing -->
+          <td class="govuk-table__cell">
+            <p id="case-name-{{ hearing.id }}" class="govuk-!-margin-0 govuk-!-padding-0 govuk-!-font-weight-bold">
+              <app-truncatable-text [text]="hearing.caseName" [maxLimit]="15" [hideShowMore]="true"></app-truncatable-text>
+            </p>
+            <p id="case-type-{{ hearing.id }}" class="govuk-!-margin-0">
+              {{ 'case-type.' + stringToTranslateId(hearing.caseType) | translate }}
+            </p>
+            <p class="govuk-!-margin-0 govuk-!-padding-0">
+              {{ 'judge-hearing-table.case-number' | translate
+              }}<span id="case-number-{{ hearing.id }}" class="govuk-!-font-weight-bold"
+                ><app-truncatable-text [text]="hearing.caseNumber" [maxLimit]="15" [hideShowMore]="true"></app-truncatable-text
+              ></span>
+            </p>
+          </td>
 
-                    <!-- Participant -->
-                    <td class="govuk-table__cell">
-                        <div *ngIf="!hearing.isClosed()">
-                            <!-- Participant count -->
-                            <span *ngIf="hearing.panelMembers.length > 0">
-                                <p class="govuk-!-margin-0 govuk-!-padding-0">
-                                    <span id="panel-member-count-{{ hearing.id }}">
-                                        {{ hearing.panelMembers.length }} {{( hearing.panelMembers.length > 1 ?
-                                        'judge-hearing-table.panel-members' : 'judge-hearing-table.panel-member') | translate }}
-                                    </span>
-                                </p>
-                            </span>
-                            <span *ngIf="hearing.wingers.length > 0">
-                                <p class="govuk-!-margin-0 govuk-!-padding-0">
-                                    <span id="winger-count-{{ hearing.id }}">
-                                        {{ hearing.wingers.length }} {{( hearing.wingers.length > 1 ?
-                                        'judge-hearing-table.wingers' : 'judge-hearing-table.winger') | translate }}
-                                    </span>
-                                </p>
-                            </span>
-                            <span *ngIf="hearing.staffMembers.length > 0">
-                                <p class="govuk-!-margin-0 govuk-!-padding-0">
-                                    <span id="staff-member-count-{{ hearing.id }}">
-                                        {{ hearing.staffMembers.length }} {{( hearing.staffMembers.length > 1 ? 
-                                        'judge-hearing-table.staff-members' : 'judge-hearing-table.staff-member') | translate }}
-                                    </span>
-                                </p>
-                            </span>
-                            <span *ngIf="hearing.nonJudicialParticipantsExcludingObservers.length > 0">
-                                <p class="govuk-!-margin-0 govuk-!-padding-0">
-                                    <span id="participant-count-{{ hearing.id }}">
-                                        {{ hearing.nonJudicialParticipantsExcludingObservers.length }} {{(
-                                        hearing.nonJudicialParticipantsExcludingObservers.length > 1 ?
-                                        'judge-hearing-table.participants' : 'judge-hearing-table.participant') | translate }}
-                                    </span>
-                                </p>
-                            </span>
-                            <div *ngIf="hearing.numberOfEndpoints > 0">
-                                <span id="endpoints-count-{{ hearing.id }}">
-                                    {{ hearing.numberOfEndpoints }} {{( hearing.numberOfEndpoints > 1 ?
-                                    'judge-hearing-table.video-access-points' : 'judge-hearing-table.video-access-point') | translate }}
-                                </span>
-                            </div>
-                            <span *ngIf="hearing.observers.length > 0">
-                                <p class="govuk-!-margin-0 govuk-!-padding-0">
-                                    <span id="observer-count-{{ hearing.id }}">
-                                        {{ hearing.observers.length }} {{( hearing.observers.length > 1 ?
-                                        'judge-hearing-table.observers' : 'judge-hearing-table.observer') | translate }}
-                                    </span>
-                                </p>
-                            </span>
-                        </div>
+          <!-- Participant -->
+          <td class="govuk-table__cell">
+            <div *ngIf="!hearing.isClosed()">
+              <!-- Participant count -->
+              <span *ngIf="hearing.panelMembers.length > 0">
+                <p class="govuk-!-margin-0 govuk-!-padding-0">
+                  <span id="panel-member-count-{{ hearing.id }}">
+                    {{ hearing.panelMembers.length }}
+                    {{
+                      (hearing.panelMembers.length > 1 ? 'judge-hearing-table.panel-members' : 'judge-hearing-table.panel-member')
+                        | translate
+                    }}
+                  </span>
+                </p>
+              </span>
+              <span *ngIf="hearing.wingers.length > 0">
+                <p class="govuk-!-margin-0 govuk-!-padding-0">
+                  <span id="winger-count-{{ hearing.id }}">
+                    {{ hearing.wingers.length }}
+                    {{ (hearing.wingers.length > 1 ? 'judge-hearing-table.wingers' : 'judge-hearing-table.winger') | translate }}
+                  </span>
+                </p>
+              </span>
+              <span *ngIf="hearing.staffMembers.length > 0">
+                <p class="govuk-!-margin-0 govuk-!-padding-0">
+                  <span id="staff-member-count-{{ hearing.id }}">
+                    {{ hearing.staffMembers.length }}
+                    {{
+                      (hearing.staffMembers.length > 1 ? 'judge-hearing-table.staff-members' : 'judge-hearing-table.staff-member')
+                        | translate
+                    }}
+                  </span>
+                </p>
+              </span>
+              <span *ngIf="hearing.nonJudicialParticipantsExcludingObservers.length > 0">
+                <p class="govuk-!-margin-0 govuk-!-padding-0">
+                  <span id="participant-count-{{ hearing.id }}">
+                    {{ hearing.nonJudicialParticipantsExcludingObservers.length }}
+                    {{
+                      (hearing.nonJudicialParticipantsExcludingObservers.length > 1
+                        ? 'judge-hearing-table.participants'
+                        : 'judge-hearing-table.participant'
+                      ) | translate
+                    }}
+                  </span>
+                </p>
+              </span>
+              <div *ngIf="hearing.numberOfEndpoints > 0">
+                <span id="endpoints-count-{{ hearing.id }}">
+                  {{ hearing.numberOfEndpoints }}
+                  {{
+                    (hearing.numberOfEndpoints > 1 ? 'judge-hearing-table.video-access-points' : 'judge-hearing-table.video-access-point')
+                      | translate
+                  }}
+                </span>
+              </div>
+              <span *ngIf="hearing.observers.length > 0">
+                <p class="govuk-!-margin-0 govuk-!-padding-0">
+                  <span id="observer-count-{{ hearing.id }}">
+                    {{ hearing.observers.length }}
+                    {{ (hearing.observers.length > 1 ? 'judge-hearing-table.observers' : 'judge-hearing-table.observer') | translate }}
+                  </span>
+                </p>
+              </span>
+            </div>
 
-                        <div *ngIf="hearing.isClosed() && hearing.isExpired()">
-                            <span class="govuk-caption-m">{{
-                                'judge-hearing-table.judicial-consultation-room-is-now-closed' | translate }}</span>
-                        </div>
+            <div *ngIf="hearing.isClosed() && hearing.isExpired()">
+              <span class="govuk-caption-m">{{ 'judge-hearing-table.judicial-consultation-room-is-now-closed' | translate }}</span>
+            </div>
 
-                        <div *ngIf="hearing.isClosed() && !hearing.isExpired()">
-                            <a class="govuk-link" href="javascript:void(0)" (click)="signIntoConference(hearing)">{{
-                                'judge-hearing-table.judicial-consultation-room-open-until' | translate }}{{
-                                hearing.retrieveExpiryTime() | date: 'HH:mm' }}</a>
-                        </div>
-                    </td>
+            <div *ngIf="hearing.isClosed() && !hearing.isExpired()">
+              <a class="govuk-link" href="javascript:void(0)" (click)="signIntoConference(hearing)"
+                >{{ 'judge-hearing-table.judicial-consultation-room-open-until' | translate
+                }}{{ hearing.retrieveExpiryTime() | date: 'HH:mm' }}</a
+              >
+            </div>
+          </td>
 
-                    <!-- Conference Status -->
-                    <td class="govuk-table__cell">
-                        <div *ngIf="!hearing.isClosed() && hearing.isReadyToStart()">
-                            <button id="start-hearing-btn-{{ hearing.id }}"
-                                class="govuk-button govuk-!-margin-top-3 govuk-!-margin-bottom-3"
-                                data-module="govuk-button" type="button" (click)="signIntoConference(hearing)"
-                                [attr.aria-label]="('judge-hearing-table.select' | translate) + ' ' + ('judge-hearing-table.hearing' | translate) + ': ' + hearing.caseName">
-                                {{ 'judge-hearing-table.select' | translate }}
-                            </button>
-                        </div>
-                        <div *ngIf="!hearing.isClosed() && !hearing.isReadyToStart()">{{
-                            'judge-hearing-table.not-ready-to-start' | translate }}</div>
-                        <div *ngIf="showConferenceStatus(hearing)" class="govuk-!-margin-top-3 govuk-!-margin-bottom-3">
-                            <span id="hearing-status-{{ hearing.id }}"
-                                class="govuk-!-padding-top-1 govuk-!-padding-bottom-1 govuk-!-padding-right-2 govuk-!-padding-left-2 govuk-tag"
-                                [ngClass]="{
+          <!-- Conference Status -->
+          <td class="govuk-table__cell">
+            <div *ngIf="!hearing.isClosed() && hearing.isReadyToStart()">
+              <button
+                id="start-hearing-btn-{{ hearing.id }}"
+                class="govuk-button govuk-!-margin-top-3 govuk-!-margin-bottom-3"
+                data-module="govuk-button"
+                type="button"
+                (click)="signIntoConference(hearing)"
+                [attr.aria-label]="
+                  ('judge-hearing-table.select' | translate) + ' ' + ('judge-hearing-table.hearing' | translate) + ': ' + hearing.caseNumber
+                "
+              >
+                {{ 'judge-hearing-table.select' | translate }}
+              </button>
+            </div>
+            <div *ngIf="!hearing.isClosed() && !hearing.isReadyToStart()">{{ 'judge-hearing-table.not-ready-to-start' | translate }}</div>
+            <div *ngIf="showConferenceStatus(hearing)" class="govuk-!-margin-top-3 govuk-!-margin-bottom-3">
+              <span
+                id="hearing-status-{{ hearing.id }}"
+                class="govuk-!-padding-top-1 govuk-!-padding-bottom-1 govuk-!-padding-right-2 govuk-!-padding-left-2 govuk-tag"
+                [ngClass]="{
                   'govuk-tag--grey': hearing.isClosed(),
                   'govuk-tag': hearing.isPaused() || hearing.isInSession(),
                   'govuk-tag--red': hearing.isSuspended()
-                }">{{ 'conference-status.' + stringToTranslateId(hearing.status) | translate }}</span>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
+                }"
+                >{{ 'conference-status.' + stringToTranslateId(hearing.status) | translate }}</span
+              >
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </div>
diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/on-the-day/participant-hearings/hearing-list-table.component.html b/VideoWeb/VideoWeb/ClientApp/src/app/on-the-day/participant-hearings/hearing-list-table.component.html
index 0228d80974..b37235611b 100644
--- a/VideoWeb/VideoWeb/ClientApp/src/app/on-the-day/participant-hearings/hearing-list-table.component.html
+++ b/VideoWeb/VideoWeb/ClientApp/src/app/on-the-day/participant-hearings/hearing-list-table.component.html
@@ -22,7 +22,9 @@
         </p>
         <p id="participant-case-number-{{ conference.id }}" class="govuk-!-margin-0 govuk-!-padding-0">
           {{ 'hearing-list-table.case-number' | translate }}:
-          <strong><app-truncatable-text [text]="conference.case_number" [maxLimit]="15" [hideShowMore]="true"></app-truncatable-text></strong>
+          <strong
+            ><app-truncatable-text [text]="conference.case_number" [maxLimit]="15" [hideShowMore]="true"></app-truncatable-text
+          ></strong>
         </p>
       </td>
       <td class="govuk-table__cell">
@@ -33,16 +35,16 @@
           type="button"
           *ngIf="canStartHearing(conference)"
           (click)="signIntoConference(conference)"
-          [attr.aria-label]="('hearing-list-table.button.sign-into-hearing' | translate) + ' ' + conference.case_name"
+          [attr.aria-label]="('hearing-list-table.button.sign-into-hearing' | translate) + ' ' + conference.case_number"
         >
-        {{ 'hearing-list-table.button.sign-into-hearing' | translate }}
+          {{ 'hearing-list-table.button.sign-into-hearing' | translate }}
         </button>
         <span *ngIf="!canStartHearing(conference)">
           <p id="participant-sign-in-date-{{ conference.id }}" class="govuk-!-margin-0 govuk-!-padding-0">
-            {{ 'hearing-list-table.sign-in' | translate:{ date: getSignInDate(conference)} }}
+            {{ 'hearing-list-table.sign-in' | translate: { date: getSignInDate(conference) } }}
           </p>
           <p id="participant-sign-in-time-{{ conference.id }}" class="govuk-!-margin-0 govuk-!-padding-0">
-            {{ 'hearing-list-table.from' | translate:{ time: getSignInTime(conference) | date: 'HH:mm' } }}
+            {{ 'hearing-list-table.from' | translate: { time: getSignInTime(conference) | date: 'HH:mm' } }}
           </p>
         </span>
       </td>