diff --git a/src/app/[locale]/(default)/events/[id]/loading.tsx b/src/app/[locale]/(default)/events/[id]/loading.tsx
index e254555..8a229c4 100644
--- a/src/app/[locale]/(default)/events/[id]/loading.tsx
+++ b/src/app/[locale]/(default)/events/[id]/loading.tsx
@@ -17,8 +17,8 @@ export default function EventDetailsLoading() {
           <Skeleton className='h-6 w-32 rounded-lg' />
         </div>
         <Separator />
-        <div className='flex justify-between'>
-          <Skeleton className='h-36 w-3/5 rounded-lg' />
+        <div className='flex flex-col-reverse items-center gap-6 md:flex-row md:justify-between'>
+          <Skeleton className='h-36 w-full max-w-prose rounded-lg md:flex-1' />
           <Skeleton className='h-48 w-48 rounded-full' />
         </div>
       </div>
diff --git a/src/app/[locale]/(default)/events/[id]/page.tsx b/src/app/[locale]/(default)/events/[id]/page.tsx
index f71b563..dcffa36 100644
--- a/src/app/[locale]/(default)/events/[id]/page.tsx
+++ b/src/app/[locale]/(default)/events/[id]/page.tsx
@@ -59,7 +59,7 @@ export default async function EventDetailsPage({
           {event.location}
         </div>
         <Separator />
-        <div className='flex justify-between'>
+        <div className='flex flex-col-reverse items-center gap-6 md:flex-row md:justify-between'>
           <div className='max-w-prose'>
             <p>{event.description}</p>
           </div>