diff --git a/src/app/events/[eventID]/page.tsx b/src/app/events/[eventID]/page.tsx
new file mode 100644
index 0000000..4248d7a
--- /dev/null
+++ b/src/app/events/[eventID]/page.tsx
@@ -0,0 +1,175 @@
+'use client';
+
+import React from 'react';
+import { usePathname } from 'next/navigation';
+import Logo from '@/components/misc/logo';
+import { ThemePicker } from '@/components/misc/theme-picker';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { useGetApiEventEventID } from '@/generated/api/event/event';
+import { useGetApiUserMe } from '@/generated/api/user/user';
+import { RedirectButton } from '@/components/buttons/redirect-button';
+import { useSession } from 'next-auth/react';
+import ParticipantListEntry from '@/components/custom-ui/participant-list-entry';
+
+export default function ShowEvent() {
+  const session = useSession();
+  const pathname = usePathname();
+
+  // Extract eventId from URL like /events/[eventId]
+  const eventId = pathname.split('/').pop() || '';
+
+  // Fetch event data
+  const { data: eventData, isLoading, error } = useGetApiEventEventID(eventId);
+  const { data: userData, isLoading: userLoading } = useGetApiUserMe();
+
+  if (isLoading || userLoading) {
+    return (
+      <div className='flex justify-center items-center h-screen'>
+        Loading...
+      </div>
+    );
+  }
+  if (error || !eventData?.data?.event) {
+    return (
+      <div className='flex justify-center items-center h-screen'>
+        Error loading event.
+      </div>
+    );
+  }
+
+  const event = eventData.data.event;
+  const organiserName = userData?.data.user?.name || 'Unknown User';
+
+  // Format dates & times for display
+  const formatDate = (isoString?: string) => {
+    if (!isoString) return '-';
+    return new Date(isoString).toLocaleDateString();
+  };
+  const formatTime = (isoString?: string) => {
+    if (!isoString) return '-';
+    return new Date(isoString).toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <div className='flex flex-col items-center justify-center h-screen'>
+      <div className='absolute top-4 right-4'>
+        <ThemePicker />
+      </div>
+      <Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] max-h-[90vh] overflow-auto'>
+        <CardHeader className='p-0 m-0 gap-0' />
+
+        <CardContent>
+          <div className='flex flex-col gap-5 w-full'>
+            <div className='grid grid-row-start:auto gap-4 sm:gap-8'>
+              <div className='h-full mt-0 ml-2 mb-16 flex items-center justify-between max-sm:grid max-sm:grid-row-start:auto max-sm:mb-6 max-sm:mt-10 max-sm:ml-0'>
+                <div className='w-[100px] max-sm:w-full max-sm:flex max-sm:justify-center'>
+                  <Logo colorType='monochrome' logoType='submark' width={50} />
+                </div>
+                <div className='items-center ml-auto mr-auto max-sm:mb-6 max-sm:w-full max-sm:flex max-sm:justify-center'>
+                  <h1 className='text-center'>
+                    {event.title || 'Untitled Event'}
+                  </h1>
+                </div>
+                <div className='w-0 sm:w-[100px]'></div>
+              </div>
+              <div className='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
+                <div>
+                  <Label className='text-[var(--color-neutral-300)] mb-2'>
+                    start Time
+                  </Label>
+                  <Label size='large'>
+                    {event.start_time
+                      ? `${formatDate(event.start_time)} ${formatTime(event.start_time)}`
+                      : '-'}
+                  </Label>
+                </div>
+                <div>
+                  <Label className='text-[var(--color-neutral-300)] mb-2'>
+                    end Time
+                  </Label>
+                  <Label size='large'>
+                    {event.end_time
+                      ? `${formatDate(event.end_time)} ${formatTime(event.end_time)}`
+                      : '-'}
+                  </Label>
+                </div>
+                <div className='w-54'>
+                  <Label className='text-[var(--color-neutral-300)] mb-2'>
+                    Location
+                  </Label>
+                  <Label size='large'>{event.location || '-'}</Label>
+                </div>
+                <div className='flex flex-col gap-4'>
+                  <div className='flex flex-row gap-2'>
+                    <Label className='w-[70px] text-[var(--color-neutral-300)]'>
+                      created:
+                    </Label>
+                    <Label>
+                      {event.created_at ? formatDate(event.created_at) : '-'}
+                    </Label>
+                  </div>
+                  <div className='flex flex-row gap-2'>
+                    <Label className='w-[70px] text-[var(--color-neutral-300)]'>
+                      updated:
+                    </Label>
+                    <Label>
+                      {event.updated_at ? formatDate(event.updated_at) : '-'}
+                    </Label>
+                  </div>
+                </div>
+              </div>
+              <div className='h-full w-full grid grid-cols-2 gap-4 max-sm:grid-cols-1'>
+                <div className='h-full w-full grid grid-flow-row gap-4 sm:gap-8'>
+                  <div className='h-full w-full'>
+                    <div className='flex flex-row gap-2'>
+                      <Label className='text-[var(--color-neutral-300)]'>
+                        Organiser:
+                      </Label>
+                      <Label size='large'>{organiserName}</Label>
+                    </div>
+                  </div>
+                  <div className='h-full w-full'>
+                    <Label className='text-[var(--color-neutral-300)] mb-2'>
+                      Description
+                    </Label>
+                    <Label size='large'>{event.description || '-'}</Label>
+                  </div>
+                </div>
+                <div className='h-full w-full mt-2'>
+                  <Label className='text-[var(--color-neutral-300)] mb-2'>
+                    Participants
+                  </Label>{' '}
+                  <div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2  sm:overflow-y-auto sm:mb-0'>
+                    {event.participants?.map((user) => (
+                      <ParticipantListEntry
+                        key={user.user.id}
+                        participant={user.user.name}
+                        imageSrc={user.user.image}
+                      ></ParticipantListEntry>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              <div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
+                <div className='w-[20%] grid max-sm:w-full'>
+                  {session.data?.user?.id === event.organizer.id ? (
+                    <RedirectButton
+                      redirectUrl={`/events/edit/${eventId}`}
+                      buttonText='edit'
+                      className='w-full'
+                    />
+                  ) : null}
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}