diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
index 86a0e77d..2c5c20fc 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
@@ -5,23 +5,23 @@
             <table class="table table-striped table-condensed">
                 <thead>
                     <tr>
-                        <th>Buchungsdatum</th>
-                        <th>Reisedatum</th>
-                        <th class="w-1/4">Reise</th>
-                        <th>Preis</th>
-                        <th>offen</th>
-                        <th>Status</th>
+                        <th class="text-left align-top">Buchungsdatum</th>
+                        <th class="text-left align-top">Reisedatum</th>
+                        <th class="text-left align-top w-1/4">Reise</th>
+                        <th class="text-center align-top">Preis</th>
+                        <th class="text-center align-top">offen</th>
+                        <th class="text-left align-top">Status</th>
                         <th></th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr v-for="event of events">
-                        <td>{{ formatBookingDate(event.dateBooking) }}</td>
-                        <td>{{ event.dateTravel | date }}</td>
-                        <td>{{ event.product }}</td>
-                        <td style="white-space: nowrap">{{ event.price }} €</td>
-                        <td style="white-space: nowrap">{{ calculateBalance(event) }}</td>
-                        <td>{{ status[event.status] }}</td>
+                        <td class="text-left align-top">{{ formatBookingDate(event.dateBooking) }}</td>
+                        <td class="text-left align-top">{{ event.dateTravel | date }}</td>
+                        <td class="text-left align-top">{{ event.product }}</td>
+                        <td class="text-right align-top whitespace-no-wrap">{{ formatCurrency(event.price) }}</td>
+                        <td class="text-right align-top whitespace-no-wrap" :class="{ 'text-red-500': hasOutstandingPayment(event) }">{{ calculateBalance(event) }}</td>
+                        <td class="text-left align-top">{{ status[event.status] }}</td>
                         <td class="flex space-x-1">
                             <a :href="getDownloadUrl(event, 'confirmation')" target="_blank" class="button button--small">
                               Bestätigung
@@ -90,15 +90,21 @@ import {mapState, mapMutations, mapGetters} from 'vuex'
                     + sessionStorage.getItem('myep-auth-token');
             },
             calculateBalance (event) {
-                if (!event.price || !event.payment) {
+                if (!event.price) {
                     return '-';
                 }
                 const balance = event.price - event.payment;
                 if (balance > 0) {
-                    return balance.toFixed(2).replace('.', ',') + ' €';
+                    return this.formatCurrency(balance);
                 }
 
                 return '-';
+            },
+            hasOutstandingPayment (event) {
+              return (event.price - event.payment) > 0;
+            },
+            formatCurrency (value) {
+              return value.toFixed(2).replace('.', ',') + ' €';
             }
         },
         computed: {
@@ -107,10 +113,3 @@ import {mapState, mapMutations, mapGetters} from 'vuex'
         }
     }
 </script>
-
-<style scoped>
-    td, th {
-        text-align: left;
-        vertical-align: top;
-    }
-</style>