diff --git a/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.html b/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.html
index 45294102be4..02bd612f3ba 100644
--- a/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.html
@@ -22,97 +22,126 @@ <h1 class="mock-h2" translate>Mandate check</h1>
             <mat-card-content>
                 <div class="header-grid">
                     <h1 class="text-large-bold color-inherit">{{ entry.name }}</h1>
-                    <div>&nbsp;</div>
                 </div>
-                <div class="card-grid">
+                <div class="map-grid">
                     <!-- first row-->
-                    <div></div>
-                    <div class="flex-container align-left foreground-active">
-                        <div class="text-medium-bold">{{ 'present' | translate }}</div>
-                    </div>
-                    <div class="flex-container">
-                        <div>&nbsp;</div>
-                    </div>
-                    <div class="flex-container align-left text">
-                        <div class="text-medium-bold">{{ 'total' | translate }}</div>
-                    </div>
-                    <div></div>
-                    <!-- second row -->
-                    <div></div>
-                    <div class="flex-container align-left foreground-active">
-                        <div class="text-medium-bold">
-                            {{ entry.presentUserIds.length }} {{ displayPercent(entry.getPercent()) }}
+                    <div class="row-mandate">
+                        <!-- first col -->
+                        <div class="flex-container"></div>
+                        <!-- second col -->
+                        <div
+                            class="flex-container margin-auto foreground-active text-medium-bold min-width-50 align-right"
+                        >
+                            {{ 'present' | translate }}
+                        </div>
+                        <!-- third col -->
+                        <div class="flex-container center central-element padding-right"></div>
+                        <!-- fourth col -->
+                        <div class="flex-container margin-auto text text-medium-bold min-width-50">
+                            {{ 'total' | translate }}
+                        </div>
+                        <!-- fifth col -->
+                        <div class="flex-container">
+                            <div></div>
                         </div>
                     </div>
-                    <div class="center">
-                        <mat-progress-bar
-                            class="progressbar-colored bar-height"
-                            [bufferValue]="100"
-                            [mode]="'determinate'"
-                            [value]="entry.getPercent() * 100"
-                        ></mat-progress-bar>
-                    </div>
-                    <div class="flex-container align-left text">
-                        <div class="text-medium-bold">{{ entry.getTotalCount() }}</div>
+                    <div class="row-mandate">
+                        <!-- second row -->
+                        <!-- first col -->
+                        <div class="flex-container">
+                            <div></div>
+                        </div>
+                        <!-- second col -->
+                        <div
+                            class="flex-container foreground-active text-medium-bold min-width-50 align-right fit-content"
+                        >
+                            {{ displayPercent(entry.getPercent()) }} {{ entry.presentUserIds.length }}
+                        </div>
+                        <!-- third col -->
+                        <div class="center flex-container">
+                            <div class="central-element">
+                                <mat-progress-bar
+                                    class="progressbar-colored bar-height"
+                                    [bufferValue]="100"
+                                    [mode]="'determinate'"
+                                    [value]="entry.getPercent() * 100"
+                                ></mat-progress-bar>
+                            </div>
+                        </div>
+                        <!-- fourth col -->
+                        <div class="flex-container margin-auto text align-left text-medium-bold min-width-50">
+                            {{ entry.getTotalCount() }}
+                        </div>
+                        <!-- fifth col -->
+                        <div class="flex-container">
+                            <div></div>
+                        </div>
                     </div>
-                    <div></div>
                 </div>
-                <div class="header-grid">
-                    <h2 class="text-large-bold color-inherit">
-                        <button matButton (click)="toggle(entry.id, true)">
+                <!-- Gender field-->
+                <div class="header-grid stroke">
+                    <h1 class="text-large-bold color-inherit">
+                        <button class="text-medium-bold" matButton (click)="toggle(entry.id, true)">
                             {{ 'Gender' | translate }}
                         </button>
-                    </h2>
-                    <div>
-                        <button matIconButton (click)="toggle(entry.id, true)">
-                            @if (toggleGenderMap.get(entry.id)) {
-                                <mat-icon>keyboard_arrow_up</mat-icon>
-                            } @else {
-                                <mat-icon>keyboard_arrow_down</mat-icon>
-                            }
-                        </button>
-                    </div>
+                    </h1>
+                    <button matIconButton (click)="toggle(entry.id, true)">
+                        @if (toggleGenderMap.get(entry.id)) {
+                            <mat-icon>keyboard_arrow_up</mat-icon>
+                        } @else {
+                            <mat-icon>keyboard_arrow_down</mat-icon>
+                        }
+                    </button>
                 </div>
                 @if (toggleGenderMap.get(entry.id)) {
-                    <div class="card-grid">
+                    <div class="map-grid">
                         @for (gender of genders; track gender.id) {
                             @if (entry.getTotalCount(gender.id)) {
-                                <div></div>
-                                <div class="foreground-active align-left">
-                                    @if (entry.getTotalCount(gender.id)) {
-                                        <div class="text-medium">
-                                            {{ entry.genderEntryMap.get(gender.id)?.present }}
+                                <!-- LEFT EMPTY -->
+                                <div class="row">
+                                    <div class="flex-container">
+                                        <div></div>
+                                    </div>
+                                    <div class="foreground-active min-width-50 align-right cell-width">
+                                        @if (entry.getTotalCount(gender.id)) {
+                                            <!-- FIRST VAL -->
                                             {{
                                                 displayPercent(
                                                     entry.genderEntryMap.get(gender.id)?.present /
                                                         entry.presentUserIds.length
                                                 )
                                             }}
-                                        </div>
-                                    }
-                                </div>
-                                <div class="justify-center bold">
-                                    <div>{{ entry.genderEntryMap.get(gender.id)?.label | translate }}</div>
-                                </div>
-                                <div class="text align-left">
-                                    @if (entry.getTotalCount(gender.id)) {
-                                        <div class="text-medium">
+                                            {{ entry.genderEntryMap.get(gender.id)?.present }}
+                                        }
+                                    </div>
+                                    <div class="center bold margin-auto">
+                                        <!-- SECOND VAL -->
+                                        {{ entry.genderEntryMap.get(gender.id)?.label | translate }}
+                                    </div>
+                                    <div class="text text-medium margin-auto align-left">
+                                        @if (entry.getTotalCount(gender.id)) {
+                                            <!-- THIRD VAL -->
                                             {{ entry.getTotalCount(gender.id) }}
                                             {{ displayPercent(entry.getTotalCount(gender.id) / entry.getTotalCount()) }}
-                                        </div>
-                                    }
+                                        }
+                                    </div>
+                                    <!-- LEFT EMPTY -->
+                                    <div class="flex-container">
+                                        <div></div>
+                                    </div>
                                 </div>
-                                <div></div>
                             }
                         }
                     </div>
                 }
-                <div class="header-grid">
-                    <h2 class="text-large-bold color-inherit">
-                        <button matButton (click)="toggle(entry.id)">
-                            {{ 'Participants' | translate }}
-                        </button>
-                    </h2>
+                <div class="header-grid stroke">
+                    <h1 class="text-large-bold color-inherit">
+                        <div class="row">
+                            <button class="text-medium-bold" matButton (click)="toggle(entry.id)">
+                                {{ 'Participants' | translate }}
+                            </button>
+                        </div>
+                    </h1>
                     <div>
                         <button matIconButton (click)="toggle(entry.id)">
                             @if (toggleMap.get(entry.id)) {
@@ -125,22 +154,33 @@ <h2 class="text-large-bold color-inherit">
                 </div>
                 @if (toggleMap.get(entry.id)) {
                     <div class="footer-grid">
-                        <div>
-                            <div class="bold margin-left-medium small-margin-top text foreground-active">
-                                {{ 'Present' | translate }}
+                        <!-- Empty cell -->
+                        <div class="flex-container"><div></div></div>
+                        <!-- central cell -->
+                        <div class="participants-cell">
+                            <div class="present">
+                                <div class="bold small-margin-top text foreground-active">
+                                    {{ 'Present' | translate }}
+                                </div>
+                                @for (userId of entry.presentUserIds; track userId) {
+                                    <div class="text foreground-active">
+                                        {{ getName(userId) }}
+                                    </div>
+                                }
                             </div>
-                            @for (userId of entry.presentUserIds; track userId) {
-                                <div class="margin-left-large text foreground-active">{{ getName(userId) }}</div>
-                            }
-                        </div>
-                        <div>
-                            <div class="bold margin-left-medium small-margin-top text">
-                                {{ 'Absent' | translate }}
+                            <div class="absent">
+                                <div class="bold small-margin-top text">
+                                    {{ 'Absent' | translate }}
+                                </div>
+                                @for (userId of entry.absentUserIds; track userId) {
+                                    <div class="color-black">
+                                        {{ getName(userId) }}
+                                    </div>
+                                }
                             </div>
-                            @for (userId of entry.absentUserIds; track userId) {
-                                <div class="margin-left-large color-black">{{ getName(userId) }}</div>
-                            }
                         </div>
+                        <!-- Empty cell -->
+                        <div class="flex-container"><div></div></div>
                     </div>
                 }
             </mat-card-content>
diff --git a/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.scss b/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.scss
index abad4b3e0b5..bc1d62ffcd0 100644
--- a/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.scss
+++ b/client/src/app/site/pages/meetings/pages/participants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.scss
@@ -1,5 +1,6 @@
 @use 'src/assets/styles/tables.scss';
 @use '@angular/material' as mat;
+@use 'src/assets/styles/media-queries.scss';
 
 .bar-height {
     @include mat.progress-bar-overrides(
@@ -23,16 +24,25 @@
     align-items: start;
 }
 
+.align-right {
+    align-items: end;
+}
+
 .groups-grid {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: 20px;
+
+    mat-form-field {
+        min-width: 25%;
+    }
 }
 
 .border-grid {
     display: grid;
     grid-template-columns: 15% 70% 15%;
+
     @media (max-width: 700px) {
         grid-template-columns: 0px 100% 0px;
         border-width: 0px;
@@ -41,29 +51,129 @@
 
 .header-grid {
     display: grid;
-    grid-template-columns: 95% 5%;
+    grid-template-columns: 92% 8%;
+    max-width: inherit;
+    margin-top: 50px;
+
+    & h2 {
+        margin-top: 0;
+        margin-bottom: 0;
+        align-self: center;
+    }
+
+    @include media-queries.set-breakpoint-lower(xs) {
+        grid-template-columns: 84% 8%;
+    }
+}
+
+mat-card {
+    max-width: 100vw;
+    display: inline-flex;
+    scrollbar-width: none;
+}
+
+mat-progress-bar {
+    width: 100%;
+    min-width: 0;
+    margin-right: 3em;
+    border-radius: 10px;
+    --mdc-linear-progress-active-indicator-height: 1.5em;
+    --mdc-linear-progress-track-height: 1.5em;
+
+    .mdc-linear-progress__bar-inner {
+        border-top-right-radius: 50% 10px;
+        border-bottom-right-radius: 50% 10px;
+    }
+
+    @include media-queries.set-breakpoint-lower(430px) {
+        max-width: 20%;
+        min-width: 0;
+        padding: 0;
+    }
 }
 
-.card-grid {
+.map-grid {
+    max-width: inherit;
     display: grid;
-    grid-template-columns: 1fr 70px 1fr 55px 1fr;
-    grid-column-gap: 10px;
-    @media (max-width: 700px) {
-        grid-template-columns: 1fr 70px 1fr 55px 1fr;
-        grid-column-gap: 5px;
+
+    .row,
+    .row-mandate {
+        max-width: inherit;
+        display: grid;
+        white-space: nowrap;
+        grid-template-columns: 8fr 5fr 50fr 5fr 8fr;
+
+        & div {
+            width: 100%;
+        }
+
+        .central-element {
+            max-width: 90%;
+            align-self: center;
+        }
+    }
+
+    .row {
+        padding: 1em 0em 1em 0em;
+    }
+
+    .cell-width {
+        width: fit-content;
+        text-align: end;
     }
-    @media (min-width: 1500px) {
-        grid-template-columns: 1fr 70px 200px 55px 1fr;
-        grid-column-gap: 10px;
+
+    .row:nth-child(odd) {
+        background-color: #fafafa;
     }
 }
 
 .footer-grid {
     display: grid;
-    grid-template-columns: 50% 50%;
-    grid-gap: 20px;
+    max-width: inherit;
+    width: inherit;
+    grid-template-columns: 8fr 60fr 8fr;
+    gap: 0em;
+
+    .participants-cell {
+        width: inherit;
+        display: grid;
+        grid-template-columns: 50% 25%;
+        gap: 20%;
+
+        div {
+            width: inherit;
+            overflow-wrap: break-word;
+            min-width: 0;
+        }
+
+        .present {
+            margin-left: 8%;
+        }
+
+        .absent {
+            width: calc(100% + 10px);
+            margin-right: -4%;
+        }
+    }
+
     @media (max-width: 700px) {
-        grid-template-columns: repeat(auto-fit, 250px);
+        .participants-cell {
+            display: flex;
+            flex-direction: column;
+            gap: 0%;
+
+            div {
+                overflow-wrap: anywhere;
+            }
+
+            .present {
+                margin-left: 0px;
+            }
+
+            .absent {
+                margin-left: 0px;
+            }
+        }
     }
 }
 
@@ -90,19 +200,24 @@
 
 .margin-left-large {
     margin-left: 140px;
+
     @media (max-width: 700px) {
         margin-left: 70px;
     }
 }
 
 .margin-left-medium {
-    margin-left: 70px;
+    margin-left: 115px;
 }
 
 .margin-bottom-20 {
     margin-bottom: 20px;
 }
 
+.margin-auto {
+    margin: auto;
+}
+
 button {
     border-radius: 0%;
 }
@@ -128,3 +243,23 @@ button {
 .text-medium {
     font-size: 14px;
 }
+
+.min-width-98 {
+    min-width: 98px;
+}
+
+.min-width-50 {
+    min-width: 50px;
+}
+
+.padding-right {
+    padding-right: 1em;
+}
+
+.stroke {
+    border-top: 1px solid #bbb8b8;
+}
+
+.fit-content {
+    width: fit-content;
+}