diff --git a/backend/sportsmatch/src/main/java/com/sportsmatch/dtos/EventDTO.java b/backend/sportsmatch/src/main/java/com/sportsmatch/dtos/EventDTO.java
index 7309ddb0..0c07c554 100644
--- a/backend/sportsmatch/src/main/java/com/sportsmatch/dtos/EventDTO.java
+++ b/backend/sportsmatch/src/main/java/com/sportsmatch/dtos/EventDTO.java
@@ -1,5 +1,6 @@
 package com.sportsmatch.dtos;
 
+import com.fasterxml.jackson.annotation.JsonFormat;
 import jakarta.validation.constraints.NotBlank;
 import jakarta.validation.constraints.NotNull;
 import lombok.*;
@@ -16,8 +17,10 @@ public class EventDTO {
   private Long id;
 
   @NotNull
+  @JsonFormat(pattern = "dd-MM-yyyy HH:mm")
   private LocalDateTime dateStart;
   @NotNull
+  @JsonFormat(pattern = "dd-MM-yyyy HH:mm")
   private LocalDateTime dateEnd;
   @NotNull
   private Integer minElo;
diff --git a/frontend/sportsmatch-app/src/components/SportEvent.test.tsx b/frontend/sportsmatch-app/src/components/SportEvent.test.tsx
index cc2db07a..39239d16 100644
--- a/frontend/sportsmatch-app/src/components/SportEvent.test.tsx
+++ b/frontend/sportsmatch-app/src/components/SportEvent.test.tsx
@@ -7,8 +7,8 @@ describe('SportEvent', async () => {
     id: 1,
     maxElo: 2000,
     minElo: 1800,
-    dateEnd: [2024, 9, 20, 17, 0],
-    dateStart: [2024, 9, 20, 15, 0],
+    dateEnd: '27-01-2024 17:00',
+    dateStart: '26-01-2024 15:00',
     placeDTO: {
       name: 'Test Location',
       address: 'address',
@@ -20,35 +20,16 @@ describe('SportEvent', async () => {
     player1Name: 'Player One',
     player2Name: 'Player Two',
   }
-
-  const formatDate = (dateArray: string) => {
-    const [year, month, day, hours, minutes] = dateArray
-    const formattedDate = `${day.toString().padStart(2, '0')}-${month
-      .toString()
-      .padStart(
-        2,
-        '0',
-      )}-${year} ${hours}:${minutes.toString().padStart(2, '0')}`
-    return formattedDate
-  }
-
   it('renders the component with correct data', () => {
     render(<SportEvent event={mockEvent} />)
 
-    // Convert dateStart and dateEnd arrays to formatted strings
-    const formattedDateStart = formatDate(mockEvent.dateStart)
-    const formattedDateEnd = formatDate(mockEvent.dateEnd)
-
-    console.log('formattedDateStart:', formattedDateStart)
-    console.log('formattedDateEnd:', formattedDateEnd)
-
     // Assert that the rendered component contains the expected data
     expect(screen.getByText(`Test Location`)).toBeInTheDocument()
     expect(
       screen.getByText(`${mockEvent.minElo} - ${mockEvent.maxElo}`),
     ).toBeInTheDocument()
-    expect(screen.getByText(formattedDateStart)).toBeInTheDocument()
-    expect(screen.getByText(formattedDateEnd)).toBeInTheDocument()
+    expect(screen.getByText(`${mockEvent.dateStart}`)).toBeInTheDocument()
+    expect(screen.getByText(`${mockEvent.dateEnd}`)).toBeInTheDocument()
     expect(screen.getByText(mockEvent.title)).toBeInTheDocument()
 
     // Check for the presence of react-icons
diff --git a/frontend/sportsmatch-app/src/components/SportEvent.tsx b/frontend/sportsmatch-app/src/components/SportEvent.tsx
index 3f8059b7..36a787ce 100644
--- a/frontend/sportsmatch-app/src/components/SportEvent.tsx
+++ b/frontend/sportsmatch-app/src/components/SportEvent.tsx
@@ -2,14 +2,6 @@ import { EventDTO } from '../generated/api'
 import '../styles/SportEvent.css'
 import { LuMapPin, LuMedal, LuCalendarCheck, LuCalendarX } from 'react-icons/lu'
 
-const formatDate = (dateArray: string) => {
-  const [year, month, day, hours, minutes] = dateArray
-  const formattedDate = `${day.toString().padStart(2, '0')}-${month
-    .toString()
-    .padStart(2, '0')}-${year} ${hours}:${minutes.toString().padStart(2, '0')}`
-  return formattedDate
-}
-
 function SportEvent({ event }: { event: EventDTO }) {
   return (
     <>
@@ -26,11 +18,11 @@ function SportEvent({ event }: { event: EventDTO }) {
                 </li>
                 <li data-testid="luCalendarCheck">
                   <LuCalendarCheck />
-                  {formatDate(event.dateStart)}
+                  {event.dateStart}
                 </li>
                 <li data-testid="luCalendarX">
                   <LuCalendarX />
-                  {formatDate(event.dateEnd)}
+                  {event.dateEnd}
                 </li>
               </ul>
             </div>