diff --git a/frontend/UploaderApp/src/UploaderApp.vue b/frontend/UploaderApp/src/UploaderApp.vue
index 8d85686..5e82c6d 100644
--- a/frontend/UploaderApp/src/UploaderApp.vue
+++ b/frontend/UploaderApp/src/UploaderApp.vue
@@ -269,7 +269,7 @@ export default {
 
 <style>
 #uapp {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: Nunito Sans, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
diff --git a/frontend/UploaderApp/src/components/DonationInstructions.vue b/frontend/UploaderApp/src/components/DonationInstructions.vue
index 4ee51a0..75626e2 100644
--- a/frontend/UploaderApp/src/components/DonationInstructions.vue
+++ b/frontend/UploaderApp/src/components/DonationInstructions.vue
@@ -1,33 +1,34 @@
 <template>
-  <div :id="'carousel-' + componentId" class="carousel carousel-dark slide" data-bs-interval="false" data-bs-ride="carousel">
+  <div :id="'carousel-' + componentId" class="carousel carousel-dark slide" data-bs-interval="false" data-bs-ride="carousel" data-bs-wrap="false" >
+
     <div class="carousel-inner">
       <div
           v-for="(i, index) in instructions"
           :key="index"
           class="carousel-item"
-          :class="{ 'active': index === 0 }"
+          :class="{ 'active': index === currentStep }"
           v-html="i.text">
       </div>
     </div>
-    <button class="carousel-control-prev" type="button" :data-bs-target="'#carousel-' + componentId" data-bs-slide="prev">
-      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-      <span class="visually-hidden">Previous</span>
-    </button>
-    <button class="carousel-control-next" type="button" :data-bs-target="'#carousel-' + componentId" data-bs-slide="next">
-      <span class="carousel-control-next-icon" aria-hidden="true"></span>
-      <span class="visually-hidden">Next</span>
-    </button>
-    <div class="carousel-indicators">
-      <button
-          v-for="(i, index) in instructions"
-          :key="index"
+
+    <div class="d-flex justify-content-between align-items-center slide-area">
+      <div>
+        <button class="slide-control-arrow" type="button" :data-bs-target="'#carousel-' + componentId" @click="stepDown">‹</button>
+      </div>
+      <div v-for="(i, index) in instructions" :key="index">
+        <button
           type="button"
           :data-bs-target="'#carousel-' + componentId"
-          :data-bs-slide-to="index"
           :aria-label="'Step ' + index"
-          :class="{ 'active': index === 0 }"
-          :aria-current="index === 0"
-      ></button>
+          :class="{ 'active active-item': index === currentStep }"
+          :aria-current="index === currentStep"
+          class="step-indicator d-hide"
+          @click="currentStep = index"
+      >•</button>
+      </div>
+      <div>
+        <button class="slide-control-arrow" type="button" :data-bs-target="'#carousel-' + componentId" @click="stepUp">›</button>
+      </div>
     </div>
   </div>
 </template>
@@ -40,9 +41,22 @@ export default {
     componentId: Number
   },
   data() {
-    return {}
+    return {
+      currentStep: 0,
+    }
   },
-  methods: {}
+  methods: {
+    stepDown() {
+      if (this.currentStep > 0) {
+        this.currentStep -= 1;
+      }
+    },
+    stepUp() {
+      if (this.currentStep < (this.instructions.length - 1)) {
+        this.currentStep += 1;
+      }
+    }
+  }
 }
 </script>
 
@@ -76,4 +90,30 @@ export default {
   position: static;
   padding-top: 20px;
 }
+.step-indicator {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: darkgray;
+}
+.active-item {
+  color: #545454;
+}
+.slide-control-arrow {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: darkgray;
+  font-weight: bold;
+}
+.slide-area {
+  margin-left: 33%;
+  margin-right: 33%;
+  background-color: #f5f5f5;
+  border-radius: 50px;
+  height: 20px;
+  margin-bottom: 25px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
 </style>
diff --git a/frontend/UploaderApp/src/components/FileUploader.vue b/frontend/UploaderApp/src/components/FileUploader.vue
index 8c3d760..8fb4c3a 100644
--- a/frontend/UploaderApp/src/components/FileUploader.vue
+++ b/frontend/UploaderApp/src/components/FileUploader.vue
@@ -162,30 +162,41 @@
                     </div>
                     <div class="data-donation-container pb-3 pt-3 fs-09">
                       <div :id="'donation-container-'+bp.id.toString()" class="ul-data-container ul-data-condensed bg-white">
-                        <table :id="'ul-result-' + bp.id.toString()" class="table table-sm">
-                          <thead>
-                          <tr>
-                            <th v-for="value in blueprintData[bp.id.toString()].extracted_fields.values()" :key="value">{{ value }}</th>
-                          </tr>
-                          </thead>
-                          <tbody>
-                          <tr v-for="row in blueprintData[bp.id.toString()].extracted_data.slice(blueprintData[bp.id.toString()].fb_pos_lower, blueprintData[bp.id.toString()].fb_pos_upper)" :key="row">
-                            <template v-for="key in blueprintData[bp.id.toString()].extracted_fields.keys()" :key="key">
-                              <td v-if="key in row" :key="row">{{ row[key] }}</td>
-                              <td v-else>–</td>
-                            </template>
-                          </tr>
-
-                          </tbody>
-                        </table>
-                        <div class="pb-2">
-                          <a class="btn btn-secondary btn-sm me-2" v-if="blueprintData[bp.id.toString()].fb_pos_lower > 14" v-on:click="updateFbPos(bp.id.toString(), 'down')" >Vorherige Seite</a>
-                          <a class="btn btn-secondary btn-sm" v-if="blueprintData[bp.id.toString()].fb_pos_upper < blueprintData[bp.id.toString()].extracted_data.length" v-on:click="updateFbPos(bp.id.toString(), 'up')" >Nächste Seite</a>
+                        <div class="data-donation-table">
+                          <table :id="'ul-result-' + bp.id.toString()" class="table table-sm">
+                            <thead>
+                            <tr>
+                              <th v-for="value in blueprintData[bp.id.toString()].extracted_fields.values()" :key="value">{{ value }}</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <tr v-for="row in blueprintData[bp.id.toString()].extracted_data.slice(blueprintData[bp.id.toString()].fb_pos_lower, blueprintData[bp.id.toString()].fb_pos_upper)" :key="row">
+                              <template v-for="key in blueprintData[bp.id.toString()].extracted_fields.keys()" :key="key">
+                                <td v-if="key in row" :key="row">{{ row[key] }}</td>
+                                <td v-else>–</td>
+                              </template>
+                            </tr>
+
+                            </tbody>
+                          </table>
                         </div>
+                        <div class="data-table-navigation">
+                          <div class="pb-2">
+                            <a class="btn btn-secondary btn-sm me-2" v-if="blueprintData[bp.id.toString()].fb_pos_lower > 14" v-on:click="updateFbPos(bp.id.toString(), 'down')" >{{ $t('previous-page') }}</a>
+                            <span class="btn-secondary btn-sm me-2 btn-light text-muted user-select-none btn-muted" v-if="blueprintData[bp.id.toString()].fb_pos_lower <= 14">{{ $t('previous-page') }}</span>
+                            <a class="btn btn-secondary btn-sm" v-if="blueprintData[bp.id.toString()].fb_pos_upper < blueprintData[bp.id.toString()].extracted_data.length" v-on:click="updateFbPos(bp.id.toString(), 'up')" >{{ $t('next-page') }}</a>
+                            <span class="btn-secondary btn-sm btn-light text-muted user-select-none btn-muted" v-if="blueprintData[bp.id.toString()].fb_pos_upper >= blueprintData[bp.id.toString()].extracted_data.length">{{ $t('next-page') }}</span>
+                          </div>
+
+                          <div class="pb-3">
+                            <p class="pb-3">
+                              {{ $t('extraction-disclaimer', { lower: blueprintData[bp.id.toString()].fb_pos_lower + 1, upper: blueprintData[bp.id.toString()].fb_pos_upper, total: blueprintData[bp.id.toString()].extracted_data.length }) }}
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                      <div>
 
-                        <p class="pb-3">
-                          {{ $t('extraction-disclaimer', { lower: blueprintData[bp.id.toString()].fb_pos_lower + 1, upper: blueprintData[bp.id.toString()].fb_pos_upper, total: blueprintData[bp.id.toString()].extracted_data.length }) }}
-                        </p>
                       </div>
                       <div :id="'expansion-control-'+bp.id.toString()" class="ul-data-expansion-control control-condensed"><a class="text-decoration-none fw-bold" :id="'collapse-toggle-'+bp.id.toString()" v-on:click="showHideData(bp.id.toString())"><span :id="'donation-container-'+ bp.id.toString() + '-toggle-label'">{{ $t('show-extracted-data') }}</span></a></div>
                     </div>
@@ -990,6 +1001,7 @@ export default {
   z-index: 1;
   background-color: white !important;
   box-shadow: 0px 1px black;
+  min-width: 200px;
 }
 .ul-data-expansion-control {
   text-align: center;
@@ -1042,15 +1054,20 @@ export default {
 }
 .ul-data-container table {
   background: #e3e3e31c;
-  table-layout: fixed;
-  max-width: 1000px;
-  width: 1000px;
+  table-layout: auto;
+  min-width: 100%;
 }
 .ul-data-container table td {
   max-width: 33%;
   word-break: break-all;
 }
-.btn-secondary:hover {
+.data-donation-table {
+  width: 100%;
+  overflow-x: scroll;
+  margin-bottom: 15px;
+  display: block;
+}
+.btn-secondary:not(.btn-muted):hover {
   color: white !important;
 }
 </style>
diff --git a/frontend/UploaderApp/src/translations/file_uploader.json b/frontend/UploaderApp/src/translations/file_uploader.json
index 7a72607..c2b5b36 100644
--- a/frontend/UploaderApp/src/translations/file_uploader.json
+++ b/frontend/UploaderApp/src/translations/file_uploader.json
@@ -8,7 +8,7 @@
     "upload-success": "Upload was successful",
     "upload-failed": "Upload failed",
     "choose-different-file": "select a different file",
-    "choose-file": "Select file",
+    "choose-file": "Select File",
     "file-is-being-uploaded": "file is being uploaded",
     "extracted-files": "Extracted files",
     "upload-success-short": "Successfully Uploaded",
@@ -18,7 +18,7 @@
     "donation-question": "Do you agree to donate and submit the data listed above?",
     "donation-agree": "Yes, I agree to submit these data",
     "donation-disagree": "No, I do not want to submit these data",
-    "extracted-data-intro": "The following data have been extracted and will be transmitted to the researchers with your consent",
+    "extracted-data-intro": "The following data have been extracted and will be submitted to the researchers with your consent",
     "file": "file",
     "error-multiple-files": "More than one file uploaded, but only one is expected.",
     "error-not-zip": "A zip-file is expected but another file type was uploaded.",
@@ -42,8 +42,10 @@
     "ul-partial-modal-body": "<p>Only parts of the data could be uploaded successfully.</p><p>In the 'Data Donation' section you will find more information on which file a problem occurred. This information may help you to identify and fix the problem.</p><p>If not, you can inspect the uploaded data, indicate whether you want to donate the data or not, and continue.</p>",
     "ul-nothing-extracted-modal-title": "Upload Successful but No Data Extracted",
     "ul-nothing-extracted-modal-body": "<p>The data was successfully uploaded but no data were extracted. It is possible, that your data file did not contain any information relevant to this research project.</p><p>If you think you chose the wrong file, you can try the upload again. Otherwise, you can continue by clicking on 'submit data'.</p>",
-    "extracted-data": "The following data were extracted:",
-    "extraction-disclaimer": "The rows {lower} to {upper} from a total of {total} extracted data entries are displayed."
+    "extracted-data": "If you consent to the donation, the following data will be submitted:",
+    "extraction-disclaimer": "The rows {lower} to {upper} from a total of {total} extracted data entries are displayed.",
+    "previous-page": "previous page",
+    "next-page": "next page"
   },
   "de": {
     "instructions": "Instruktionen",
@@ -79,7 +81,7 @@
     "extraction-failed": "Es konnten nicht alle erwarteten Dateien ausgelesen werden.",
     "partial-upload-status": "Nur teilweise hochgeladen",
     "partial-upload-message": "Der Zip-Container wurde erfolgreich hochgeladen, aber es wurden nicht alle Daten erfolgreich extrahiert (siehe unten)",
-    "data-extraction-intro": "Die folgenden Informationen werden aus dem ausgewählten File ausgelesen",
+    "data-extraction-intro": "Die folgenden Informationen werden aus der ausgewählten Datei ausgelesen",
     "ul-success-modal-title": "Upload abgeschlossen",
     "ul-success-modal-body": "Alle Daten wurden erfolgreich hochgeladen. Bitte schauen Sie sich die hochgeladenen Daten an und geben Sie jeweils an, ob Sie die Daten spenden möchten oder nicht.",
     "ul-failed-modal-title": "Es ist ein Fehler aufgetreten",
@@ -88,7 +90,9 @@
     "ul-partial-modal-body": "<p>Es konnte nur ein Teil der Daten erfolgreich hochgeladen werden.</p><p>Im Bereich 'Datenspende' finden Sie weitere Informationen dazu, bei welchen Daten ein Problem aufgetreten ist. Gegebenenfalls helfen Ihnen diese Informationen das Problem zu identifizieren und zu beheben.</p><p>Falls nicht, können Sie sich die erfolgreich hochgeladenen Daten anschauen und entscheiden, ob Sie diese Daten spenden möchten oder nicht.</p>",
     "ul-nothing-extracted-modal-title": "Upload erfolgreich, jedoch wurden keine Daten ausgelesen",
     "ul-nothing-extracted-modal-body": "<p>Die Daten wurden erfolgreich verarbeitet, aber es wurden keine Daten extrahiert. Es ist möglich, dass Ihre Datei keine für dieses Forschungsprojekt relevanten Informationen enthält.</p><p>Wenn Sie denken, dass Sie die falsche Datei ausgewählt haben, können Sie den Upload erneut versuchen.</p><p>Andernfalls können Sie fortfahren, indem Sie auf 'Daten übermitteln' klicken.</p>",
-    "extracted-data": "Die folgenden Daten wurden ausgelesen:",
-    "extraction-disclaimer": "Es werden die Zeilen {lower} bis {upper} von insgesamt {total} ausgelesenen Einträgen angezeigt."
+    "extracted-data": "Wenn Sie der Datenspende zustimmen, werden die folgenden Daten übermittelt:",
+    "extraction-disclaimer": "Es werden die Zeilen {lower} bis {upper} von insgesamt {total} ausgelesenen Einträgen angezeigt.",
+    "previous-page": "vorherige Seite",
+    "next-page": "nächste Seite"
   }
 }