diff --git a/pupil-submission-page/src/assets/prediction-with-ki.png b/pupil-submission-page/src/assets/prediction-with-ki.png
new file mode 100644
index 0000000..3546581
Binary files /dev/null and b/pupil-submission-page/src/assets/prediction-with-ki.png differ
diff --git a/pupil-submission-page/src/assets/result-fail.png b/pupil-submission-page/src/assets/result-fail.png
index ad2ecee..2d94edc 100644
Binary files a/pupil-submission-page/src/assets/result-fail.png and b/pupil-submission-page/src/assets/result-fail.png differ
diff --git a/pupil-submission-page/src/assets/result-win.png b/pupil-submission-page/src/assets/result-win.png
index 6b1f49c..9ba8b3b 100644
Binary files a/pupil-submission-page/src/assets/result-win.png and b/pupil-submission-page/src/assets/result-win.png differ
diff --git a/pupil-submission-page/src/components/RenderedPrediction.vue b/pupil-submission-page/src/components/RenderedPrediction.vue
new file mode 100644
index 0000000..2138f72
--- /dev/null
+++ b/pupil-submission-page/src/components/RenderedPrediction.vue
@@ -0,0 +1,13 @@
+<template>
+    <v-row justify="center" align="center">
+        <v-col cols="4"><v-img :src="input_image.src" style="width: 100%;"/></v-col>
+        <v-col cols="4"><v-img src="@/assets/prediction-with-ki.png" style="width: 100%"/></v-col>
+        <v-col cols="4">{{prediction}}</v-col>
+    </v-row>
+</template>
+
+<script lang="ts">
+export default {
+  props: ['input_image', 'prediction']
+}
+</script>
\ No newline at end of file
diff --git a/pupil-submission-page/src/components/Stepper_2.vue b/pupil-submission-page/src/components/Stepper_2.vue
index 29af2d2..a940e11 100644
--- a/pupil-submission-page/src/components/Stepper_2.vue
+++ b/pupil-submission-page/src/components/Stepper_2.vue
@@ -4,7 +4,7 @@
     </p>
     <upload-images-for-class class_name='Vorfahrtsstra&szlig;e' :available_images='klasse_vorfahrt_strasse'/>
     <br>
-    <upload-images-for-class class_name='Vorfahrt Gew&auml;ren' :available_images='klasse_vorfahrt_gewaehren'/>
+    <upload-images-for-class class_name='Vorfahrt Gew&auml;hren' :available_images='klasse_vorfahrt_gewaehren'/>
 </template>
 
 <script lang="ts">
diff --git a/pupil-submission-page/src/components/Stepper_4.vue b/pupil-submission-page/src/components/Stepper_4.vue
index 473465f..657994c 100644
--- a/pupil-submission-page/src/components/Stepper_4.vue
+++ b/pupil-submission-page/src/components/Stepper_4.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-card class="mx-auto" max-width="500" min-height="500" image="@/assets/result-fail.png" title="Deine KI war in" theme="dark">
+    <v-card class="mx-auto" max-width="500" min-height="500" @click="show=true;" image="@/assets/result-fail.png" title="Deine KI war in" theme="dark">
         <v-card-text class="py-0">
             <v-row align="center" no-gutters>
                 <v-col class="text-h2" style="color: red;" cols="8">75 von 100</v-col>
@@ -13,65 +13,75 @@
     <br><br>
 
     <v-expansion-panels>
-        <v-expansion-panel title="Mengen-Tests">
+        <v-expansion-panel title="Quantitative Tests">
             <v-expansion-panel-text>
-                <v-card title="Teste deine KI anhand tausender Beispiele, um die Genauigkeit zu messen" flat>
-                    <v-container class="ml-4 mr-4">
-                        <v-img src="@/assets/teachable_machine_screenshot_3.png" aspect-ratio="5">
-                            <template v-slot:placeholder>
-                                <v-row class="fill-height ma-0" align="center" justify="center">
-                                    <v-progress-circular indeterminate color="white"></v-progress-circular>
+                Hier etwas text (eine ganz einfache Darstellung eine Konfusion Matrix, mit guten Bildern, etc.)...
+
+                <v-row>
+                    <v-col cols="6">
+                        <v-card class="mx-auto" @click="show=true;" style="width: 100%" image="@/assets/result-win.png" title="Deine KI hat " theme="dark">
+                            <v-card-text class="py-0">
+                                <v-row align="center" no-gutters>
+                                    <v-col class="text-h2" style="color: red;" cols="8">91</v-col>
+                                </v-row>
+                                <br>
+                                "Vorfahrt gew&auml;hren" Schilder korrekt erkannt.
+                            </v-card-text>
+                        </v-card>
+                    </v-col>
+
+                    <v-col cols="6">
+                        <v-card class="mx-auto" @click="show=true;" style="width: 100%" image="@/assets/result-win.png" title="Deine KI hat " theme="dark">
+                            <v-card-text class="py-0">
+                                <v-row align="center" no-gutters>
+                                    <v-col class="text-h2" style="color: red;" cols="8">23</v-col>
                                 </v-row>
-                            </template>
-                        </v-img>
-                        <p> <br> </p>
-                        <ul>
-                            <li class="text-left">Um deine KI so oft testen zu lassen, kannst du sie hier
-                                hochladen.</li>
-                            <li class="text-left">Stelle sicher, dass du dein Model im richtigen Format
-                                exportierst.</li>
-                            <li class="text-left">Dafür musst du auf „Modell exportieren“ klicken und dann auf
-                                „Tensorflow“.</li>
-                            <li class="text-left"> Die Zipdatei lädst du herunter und im nächsten Schritt dann
-                                hier hoch.</li>
-                        </ul>
+                                <br>
+                                "Vorfahrt gew&auml;hren" Schilder f&auml;lschlich als Vorfahrtsstra&szlig;e erkannt.
+                            </v-card-text>
+                        </v-card>
+                    </v-col>
+                </v-row>
 
-                        <File />
+                <v-row>
+<v-col cols="6">
+                        <v-card class="mx-auto" @click="show=true;" style="width: 100%" image="@/assets/result-win.png" title="Deine KI hat " theme="dark">
+                            <v-card-text class="py-0">
+                                <v-row align="center" no-gutters>
+                                    <v-col class="text-h2" style="color: red;" cols="8">32</v-col>
+                                </v-row>
+                                <br>
+                                "Vorfahrt gew&auml;hren" Schilder f&auml;lschlich als Vorfahrtsstra&szlig;e erkannt.
+                            </v-card-text>
+                        </v-card>
+                    </v-col>
+
+                    <v-col cols="6">
+                        <v-card class="mx-auto" @click="show=true;" style="width: 100%" image="@/assets/result-win.png" title="Deine KI hat " theme="dark">
+                            <v-card-text class="py-0">
+                                <v-row align="center" no-gutters>
+                                    <v-col class="text-h2" style="color: red;" cols="8">87</v-col>
+                                </v-row>
+                                <br>
+                                "Vorfahrt gew&auml;hren" Schilder korrekt erkannt.
+                            </v-card-text>
+                        </v-card>
+                    </v-col>
+                </v-row>
 
-                    </v-container>
-                </v-card>
+                Vergleiche deine KI doch mal mit anderen:
+                <v-data-table :items="items"/>
             </v-expansion-panel-text>
         </v-expansion-panel>
 
-        <v-expansion-panel title="Qualititative-Tests">
+        <v-expansion-panel title="Qualititative Tests">
             <v-expansion-panel-text>
-                <v-container fluid class="ml-4 mr-4">
-                    <v-row align="center" justify="center">
-                        <v-col cols="12" md="6">
-                            <ul>
-                                <li class="text-left">Zum Schluss müssen die EntwicklerInnen das Modell
-                                    natürlich noch überprüfen. Hat es funktioniert? – Kann die KI die Klassen
-                                    jetzt zuverlässig unterscheiden?</li>
-                                <li class="text-left">Dafür kannst du weitere Bilder hochladen, welche das
-                                    Modell jetzt auf die Probe stellen – hält das Auto an und gewährt Vorfahrt,
-                                    oder kommt es zu einem Unfall, weil sich die KI nicht 100% sicher war?</li>
-                                <li class="text-left">Gehe dafür auf Datei und lade weitere Bilder, welche zu
-                                    Testzwecken dienen, hoch.</li>
-                                <li class="text-left">Spiele ein wenig mit den Einstellungen unter „erweitert“
-                                    herum – was fällt auf? Kann das Modell verbessert werden?</li>
-                            </ul>
-                        </v-col>
-                        <v-col cols="12" md="6">
-                            <v-img src="@/assets/teachable_machine_screenshot_2.png" aspect-ratio="1.3">
-                                <template v-slot:placeholder>
-                                    <v-row class="fill-height ma-0" align="center" justify="center">
-                                        <v-progress-circular indeterminate color="white"></v-progress-circular>
-                                    </v-row>
-                                </template>
-                            </v-img>
-                        </v-col>
-                    </v-row>
-                </v-container>
+            Bitte lade hier deine Testbilder hoch, mit denen du deine KI Qualitativ austesten moechtest.
+            <upload-images-for-class class_name='Testbilder' :available_images='test_bilder'/>
+
+            <div v-for="test_bild in test_bilder">
+            <rendered-prediction :input_image="test_bild" prediction="Vorfahrtsstra&szlig;e erkannt (64%)"/>
+            </div>
             </v-expansion-panel-text>
         </v-expansion-panel>
 
@@ -84,8 +94,39 @@
         </v-expansion-panel>
 
     </v-expansion-panels>
+
+    <v-dialog v-model="show" width="90%" height="90%">
+    <v-card>
+        <div v-for="f in selected_images">
+            <rendered-prediction :input_image="f" prediction="Vorfahrtsstra&szlig;e erkannt (64%)"/>
+        </div>
+    </v-card>
+    </v-dialog>
 </template>
 
-<script lang="ts" setup>
-import File from "./UploadFile.vue"
+<script lang="ts">
+import UploadImagesForClass from '@/components/UploadImagesForClass.vue'
+import RenderedPrediction from '@/components/RenderedPrediction.vue'
+import someImage from '@/assets/result-fail.png'
+
+export default {
+  components: {UploadImagesForClass, RenderedPrediction},
+  data: () => ({
+    items: [
+        {'Name': "Geheime KI", 'Korrekt': '78 von 100'},
+        {'Name': "Dagobert Duck", 'Korrekt': '76 von 100'},
+        {'Name': "Deine KI", 'Korrekt': '75 von 100'},
+        {'Name': "Maik's KI", 'Korrekt': '56 von 100'},
+        {'Name': "Luisa's KI", 'Korrekt': '34 von 100'}
+    ],
+    show: false,
+    test_bilder: [],
+    selected_images: [
+        {'src': someImage},
+        {'src': someImage},
+        {'src': someImage},
+        {'src': someImage},
+    ]
+  })
+}
 </script>
diff --git a/pupil-submission-page/src/components/UploadImagesForClass.vue b/pupil-submission-page/src/components/UploadImagesForClass.vue
index e5e8a82..5eb6b0b 100644
--- a/pupil-submission-page/src/components/UploadImagesForClass.vue
+++ b/pupil-submission-page/src/components/UploadImagesForClass.vue
@@ -6,7 +6,7 @@
         <template v-slot:text>
             
         <v-row><v-col cols="6"> 
-        <v-file-input accept="image/png, image/jpeg, image/bmp" placeholder="Bitte f&uuml;ge deine Bildbeispiele f&uuml;r die Klasse {{class_name}} hinzu:" multiple label="Bitte f&uuml;ge deine Bildbeispiele f&uuml;r die Klasse {{class_name}} hinzu:" v-model="to_upload" @change="update_files" block/>
+        <v-file-input accept="image/png, image/jpeg, image/bmp" placeholder="Bitte f&uuml;ge deine Bildbeispiele f&uuml;r die Klasse {{class_name}} hinzu:" multiple :label="'Bitte f&uuml;ge deine Bildbeispiele f&uuml;r die Klasse ' + class_name + ' hinzu:'" v-model="to_upload" @change="update_files" block/>
         </v-col></v-row>
             <v-virtual-scroll height="150" :items="image_rows">
                 <template v-slot:default="{ item }">