diff --git a/src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.html b/src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.html
index 4dc7e9140d..4b743138c5 100644
--- a/src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.html
+++ b/src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.html
@@ -6,14 +6,27 @@
       mode="determinate"
       [value]="(currentIndex / children.length) * 100"
     ></mat-progress-bar>
-    <div class="progress-label" [style.visibility]="currentIndex < children.length ? 'visible' : 'hidden'">
-      {{ currentIndex+1 }} / {{ children.length }}
+
+    <div fxLayout="row" class="progress-nav">
+      <button mat-icon-button (click)="goToFirst()" [disabled]="isFirst" class="button-skip" fxFlex="40px">
+        <fa-icon icon="angle-double-left"></fa-icon>
+      </button>
+      <button mat-icon-button (click)="goToPrevious()" [disabled]="isFirst" class="button-skip" fxFlex="40px">
+        <fa-icon icon="angle-left"></fa-icon>
+      </button>
+      <div class="progress-label" [style.visibility]="currentIndex < children.length ? 'visible' : 'hidden'" fxFlex="grow">
+        {{ currentIndex+1 }} / {{ children.length }}
+      </div>
+      <button mat-icon-button (click)="goToNext()" [disabled]="isFinished" class="button-skip" fxFlex="40px">
+        <fa-icon icon="angle-right"></fa-icon>
+      </button>
+      <button mat-icon-button (click)="goToLast()" [disabled]="isFinished" class="button-skip" fxFlex="40px">
+        <fa-icon icon="angle-double-right"></fa-icon>
+      </button>
     </div>
   </div>
-  <div class="navbar-wrapper margin-bottom-small">
-    <button mat-icon-button class="button-aligned-left" (click)="goToPrevious()" [disabled]="isFirst">
-      <fa-icon icon="chevron-left"></fa-icon>
-    </button>
+
+  <div class="child-block-container">
     <app-child-block
       class="child-block"
       *ngIf="!isFinished"
@@ -22,10 +35,8 @@
       [tooltipDisabled]="true">
     </app-child-block>
     <div class="placeholder" *ngIf="isFinished"></div>
-    <button class="button-aligned-right" mat-icon-button (click)="goToNext()" [disabled]="isFinished">
-      <fa-icon icon="chevron-right"></fa-icon>
-    </button>
   </div>
+
   <div *ngIf="!isFinished && currentAttendance" class="tab-wrapper">
     <app-roll-call-tab
       (swiperight)="goToPrevious()"
diff --git a/src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.scss b/src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.scss
index b77a1f8554..bf2fab0007 100644
--- a/src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.scss
+++ b/src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.scss
@@ -1,3 +1,5 @@
+@import "../../../../../styles";
+
 .group-select-option {
   width: 100%;
   cursor: pointer;
@@ -37,18 +39,29 @@
 }
 
 .progress-label {
-  align-self: flex-end;
+  display: flex;
+  place-content: center;
 }
 
 .attendance-progress-bar {
   display: flex;
   flex-direction: column;
+  margin-top: $standard-margin-small;
+  margin-bottom: $standard-margin-small;
+}
+
+.progress-nav {
+  margin-top: -4px;
 }
 
 .child-block {
   flex-grow: 1;
   display: flex;
-  place-content: center;
+  place-content: flex-start;
+}
+
+.child-block-container {
+  margin: $standard-margin-small;
 }
 
 .finished-screen-button {
@@ -88,18 +101,8 @@
 // with the content
 // `text-align: left` would work as well, but not with the ripples
 
-.button-aligned-left {
-  // Position the button relative to it's parent
-  position: relative;
-  // This is the amount the button has to be shifted to be left-aligned
-  left: -15px;
-}
-
-.button-aligned-right {
-  // Position the button relative to it's parent
-  position: relative;
-  // This is the amount the button has to be shifted to be right-aligned
-  right: -15px;
+.button-skip {
+  margin-top: -10px;
 }
 
 .full-width {
diff --git a/src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.ts b/src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.ts
index 797475b750..bac3a52035 100644
--- a/src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.ts
+++ b/src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.ts
@@ -187,6 +187,15 @@ export class RollCallComponent implements OnChanges {
     }
   }
 
+  goToFirst() {
+    this.goToParticipantWithIndex(0);
+  }
+
+  goToLast() {
+    // jump directly to completed state, i.e. beyond last participant index
+    this.goToParticipantWithIndex(this.children.length);
+  }
+
   get isFirst(): boolean {
     return this.currentIndex === 0;
   }