diff --git a/src/components/EventForm.vue b/src/components/EventForm.vue
index b8c695e..0f510ee 100644
--- a/src/components/EventForm.vue
+++ b/src/components/EventForm.vue
@@ -47,11 +47,11 @@
         </tr>
         <tr>
           <td><label for="time">Uhrzeit:</label></td>
-          <td><input type="time" id="time" v-model="eventData.time"></td>
+          <td><input type="time" id="time">{{ formatTime(eventData.time) }}</td>
         </tr>
         <tr>
           <td><label for="endTime">Ende-Uhrzeit:</label></td>
-          <td><input type="time" id="endTime" v-model="eventData.endTime"></td>
+          <td><input type="time" id="endTime">{{ formatTime(eventData.endTime) }}</td>
         </tr>
         <tr>
           <td><label for="description">Beschreibung:</label></td>
@@ -105,6 +105,7 @@
 <script>
 import axios from 'axios';
 import Multiselect from 'vue-multiselect';
+import { formatTime } from '@/utils/strings';
 
 export default {
   name: 'EventForm',
@@ -184,6 +185,7 @@ export default {
     this.determineDateMode();
   },
   methods: {
+    formatTime,
     async saveEvent() {
       try {
         const payload = {
diff --git a/src/components/EventRender.vue b/src/components/EventRender.vue
index 3fef29b..225afb1 100644
--- a/src/components/EventRender.vue
+++ b/src/components/EventRender.vue
@@ -5,7 +5,7 @@
                 <td>
                     <div v-if="shouldDisplay('name')" class="event-name">{{ event.name }}</div>
                     <div>{{ formatDateOrDay(event.date, event.dayOfWeek) }}</div>
-                    <div v-if="shouldDisplay('time')">{{ event.time }} <span v-if="event.endTime"> - {{ event.endTime }}</span> Uhr</div>
+                    <div v-if="shouldDisplay('time')">{{ formatTime(event.time) }} <span v-if="event.endTime"> - {{ formatTime(event.endTime) }}</span> Uhr</div>
                     <div v-if="shouldDisplay('place')">{{ event.eventPlace?.name }}</div>
                     <div v-if="shouldDisplay('description')" class="description">{{ event.description }}</div>
                     <div v-if="shouldDisplay('contactPerson')">{{ event.contactPersons.map(cp => cp.name).join(', ') }}</div>
@@ -17,7 +17,7 @@
         <div v-else-if="events.length === 1" :class="events[0].alsoOnHomepage && config.id === 'home' ? 'homepage' : ''">
             <div v-if="shouldDisplay('name')" class="event-name">{{ events[0].name }}</div>
             <div>{{ formatDateOrDay(events[0].date, events[0].dayOfWeek) }}</div>
-            <div v-if="shouldDisplay('time')">{{ events[0].time }} <span v-if="events[0].endTime"> - {{ events[0].endTime }}</span> Uhr</div>
+            <div v-if="shouldDisplay('time')">{{ formatTime(events[0].time) }} <span v-if="events[0].endTime"> - {{ formatTime(events[0].endTime) }}</span> Uhr</div>
             <div v-if="shouldDisplay('place')">{{ events[0].eventPlace?.name }}</div>
             <div v-if="shouldDisplay('description')" class="description">{{ events[0].description }}</div>
             <div v-if="shouldDisplay('contactPerson')">{{ events[0].contactPersons.map(cp => cp.name).join(', ') }}</div>
@@ -29,7 +29,8 @@
 
 <script>
 import axios from '@/axios';
-import { format } from 'date-fns'; // Importiere date-fns für die Datumsformatierung
+import { format } from 'date-fns'; 
+import { formatTime } from '@/utils/strings';
 
 export default {
     name: 'EventRender',
@@ -48,6 +49,7 @@ export default {
         await this.fetchEvents();
     },
     methods: {
+        formatTime,
         async fetchEvents() {
             console.log(this.config);
             try {