diff --git a/resources/js/Components/aemtlis/Abwaschen.vue b/resources/js/Components/aemtlis/Abwaschen.vue
index f8e0d70..74f3764 100644
--- a/resources/js/Components/aemtlis/Abwaschen.vue
+++ b/resources/js/Components/aemtlis/Abwaschen.vue
@@ -12,22 +12,23 @@ function animate() {
 </script>
 
 <template>
-    <div class="m-4 relativ flex gap-4 lg:flex-col min-w-screen">
-        <div class="ml-4 lg:mb-4 bg flex-1 opacity-0 p-2 woosh">
-            <div v-if="group.name" class="flex-grow-1">
-                <p class="font-bold">{{ group.name }}</p>
+    <div class="flex lg:flex-col-reverse gap-4">
+        <Geschirr_Sauber
+            class="h-20 w-20 lg:h-40 lg:w-40 self-center"
+        />
+        <div class="bg flex items-center flex-1 opacity-0 p-2 woosh">
+            <div v-if="group.name">
+                <p class="font-bold text-lg lg:text-2xl lg:mb-3">{{ group.name }}</p>
                 <p
-                    class="text-center"
                     v-for="participant in group.participants"
+                    v-bind:key="participant.id"
                 >
                     {{ participant.name }}
                 </p>
             </div>
-            <div v-else class="font-bold flex-grow-1">{{ group }}</div>
+            <div v-else class="font-bold flex-grow-1 text-center text-lg lg:text-2xl">{{ group }}</div>
         </div>
-        <Geschirr_Sauber
-            class="h-32 w-32 lg:h-40 sm:order-first lg:order-1 lg:w-40 lg:mx-auto"
-        />
+
     </div>
 </template>
 
diff --git a/resources/js/Components/aemtlis/Joker.vue b/resources/js/Components/aemtlis/Joker.vue
index 3d40a2a..97c4ff6 100644
--- a/resources/js/Components/aemtlis/Joker.vue
+++ b/resources/js/Components/aemtlis/Joker.vue
@@ -8,20 +8,19 @@ const props = defineProps({
 </script>
 
 <template>
-    <div class="m-4 relative flex lg:block min-w-screen">
-        <Joker class="lg:mx-auto h-32 w-32 self-center lg:h-40 lg:w-40" />
-        <div class="ml-4 lg:mb-4 bg flex-1 opacity-0 p-2 woosh">
-            <div v-if="group.name" class="flex-grow-1">
-                <p class="font-bold">{{ group.name }}</p>
+    <div class="flex lg:flex-col gap-4">
+        <Joker class="h-20 w-20 lg:h-40 lg:w-40 self-center" />
+        <div class="bg flex-col flex-1 opacity-0 p-2 woosh">
+            <div v-if="group.name" class="text-center">
+                <p class="font-bold text-lg lg:text-2xl lg:mb-2">{{ group.name }}</p>
                 <p
-                    class="text-center"
                     v-for="participant in group.participants"
                     v-bind:key="participant.id"
                 >
                     {{ participant.name }}
                 </p>
             </div>
-            <div v-else class="font-bold flex-grow-1">{{ group }}</div>
+            <div v-else class="font-bold flex-grow-1 text-lg lg:text-2xl">{{ group }}</div>
         </div>
     </div>
 </template>
diff --git a/resources/js/Components/aemtlis/Putzen.vue b/resources/js/Components/aemtlis/Putzen.vue
index 1d65e94..7489037 100644
--- a/resources/js/Components/aemtlis/Putzen.vue
+++ b/resources/js/Components/aemtlis/Putzen.vue
@@ -7,22 +7,22 @@ const props = defineProps({
 </script>
 
 <template>
-    <div class="m-4 relativ flex gap-4 lg:flex-col min-w-screen">
-        <div class="ml-4 lg:mb-4 bg flex-1 opacity-0 p-2 woosh">
-            <div v-if="group.name" class="flex-grow-1">
-                <p class="font-bold">{{ group.name }}</p>
+    <div class="flex lg:flex-col-reverse gap-4">
+        <Putzen
+            class="h-20 w-20 lg:h-40 lg:w-40 self-center"
+        />
+        <div class="bg flex-1 opacity-0 p-2 woosh">
+            <div v-if="group.name" class="text-center">
+                <p class="font-bold text-lg lg:text-2xl lg:mb-2">{{ group.name }}</p>
                 <p
-                    class="text-center"
                     v-for="participant in group.participants"
+                    v-bind:key="participant.id"
                 >
                     {{ participant.name }}
                 </p>
             </div>
-            <div v-else class="font-bold flex-grow-1">{{ group }}</div>
+            <div v-else class="font-bold flex-grow-1 text-lg lg:text-2xl">{{ group }}</div>
         </div>
-        <Putzen
-            class="h-32 w-32 lg:h-40 sm:order-first lg:order-1 lg:w-40 lg:mx-auto"
-        />
     </div>
 </template>
 
diff --git a/resources/js/Components/aemtlis/Tischen.vue b/resources/js/Components/aemtlis/Tischen.vue
index 833e718..e15562d 100644
--- a/resources/js/Components/aemtlis/Tischen.vue
+++ b/resources/js/Components/aemtlis/Tischen.vue
@@ -7,22 +7,22 @@ const props = defineProps({
 </script>
 
 <template>
-    <div class="m-4 relativ flex gap-4 lg:flex-col min-w-screen">
-        <div class="ml-4 lg:mb-4 bg flex-1 opacity-0 p-2 woosh">
-            <div v-if="group.name" class="flex-grow-1">
-                <p class="font-bold">{{ group.name }}</p>
+    <div class="flex lg:flex-col-reverse gap-4">
+        <Tischen
+            class="h-20 w-20 lg:h-40 lg:w-40 self-center"
+        />
+        <div class="bg flex-col flex-1 opacity-0 p-2 woosh">
+            <div v-if="group.name" class="text-center">
+                <p class="font-bold text-lg lg:text-2xl lg:mb-2">{{ group.name }}</p>
                 <p
-                    class="text-center"
                     v-for="participant in group.participants"
+                    v-bind:key="participant.id"
                 >
                     {{ participant.name }}
                 </p>
             </div>
-            <div v-else class="font-bold flex-grow-1">{{ group }}</div>
+            <div v-else class="font-bold flex-grow-1 text-lg lg:text-2xl">{{ group }}</div>
         </div>
-        <Tischen
-            class="h-32 w-32 lg:h-40 sm:order-first lg:order-1 lg:w-40 lg:mx-auto"
-        />
     </div>
 </template>
 
diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue
index e0d87d8..3cf32d8 100644
--- a/resources/js/Pages/Welcome.vue
+++ b/resources/js/Pages/Welcome.vue
@@ -32,17 +32,17 @@ const joker3_group = props.joker_3.group ?? "keine Gruppe zugeteilt";
 
     <div
         id="scrollbar"
-        class="bg h-screen top-0 left-0 bottom-0 overflow-auto lg:overflow-x-scroll lg:overflow-y-hidden"
+        class="bg"
     >
         <div
-            class="lg:h-screen lg:min-w-max min-w-max grid grid-cols-1 lg:grid-cols-3 grid-rows-6 lg:grid-rows-2 gap-4 p-8"
+            class="min-h-screen flex flex-col lg:grid grid-cols-1 lg:grid-cols-3 grid-rows-6 lg:grid-rows-2 gap-4 p-4 lg:p-8"
         >
-            <Joker :group="joker1_group" :id="1" />
-            <Joker :group="joker2_group" :id="2" />
-            <Joker :group="joker3_group" :id="3" />
-            <Putzen class="self-end" :group="putzen_group" />
-            <Abwaschen class="self-end" :group="abwaschen_group" />
-            <Tischen class="self-end" :group="tischen_group" />
+            <Joker class="lg:self-start" :group="joker1_group" :id="1" />
+            <Joker class="lg:self-start" :group="joker2_group" :id="2" />
+            <Joker class="lg:self-start" :group="joker3_group" :id="3" />
+            <Putzen class="lg:self-end" :group="putzen_group" />
+            <Abwaschen class="lg:self-end" :group="abwaschen_group" />
+            <Tischen class="lg:self-end" :group="tischen_group" />
         </div>
     </div>
 </template>