diff --git a/src/components/event/EventDetailModal.tsx b/src/components/event/EventDetailModal.tsx
index 46c7398..0549e42 100644
--- a/src/components/event/EventDetailModal.tsx
+++ b/src/components/event/EventDetailModal.tsx
@@ -138,112 +138,112 @@ export function EventDetailModal({
           </div>
 
           {/* Content - Scrollable */}
-          <div className="px-6 py-6 space-y-6 overflow-y-auto flex-1">
-            {/* Event Details */}
-            <div className="space-y-4">
-              <div className="flex items-start">
-                <svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                  />
-                </svg>
-                <div>
-                  <p className="text-sm font-medium text-gray-900">Date & Time</p>
-                  <p className="text-sm text-gray-600 mt-1">
-                    {formatEventDate(event.scheduledDate)} at {formatEventTime(event.scheduledDate)}
-                  </p>
-                </div>
-              </div>
-
-              <div className="flex items-start">
-                <svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-                <div>
-                  <p className="text-sm font-medium text-gray-900">Duration</p>
-                  <p className="text-sm text-gray-600 mt-1">{formatDuration(event.duration)}</p>
-                </div>
-              </div>
-
-              <div className="flex items-start">
-                <svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-                  />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                </svg>
-                <div>
-                  <p className="text-sm font-medium text-gray-900">Location</p>
-                  <p className="text-sm text-gray-600 mt-1">{event.locationName}</p>
-                  <p className="text-xs text-gray-500 mt-1">
-                    {event.latitude.toFixed(6)}, {event.longitude.toFixed(6)}
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            {/* Description */}
-            <div>
-              <h3 className="text-sm font-medium text-gray-900 mb-2">Description</h3>
-              <p className="text-sm text-gray-600 whitespace-pre-wrap">{event.description}</p>
-            </div>
-
-            {/* Completed Event Info */}
-            {event.status === 'completed' && event.litterCollected !== undefined && (
-              <div className="bg-green-50 border border-green-200 rounded-lg p-4">
-                <div className="flex items-center">
-                  <svg className="h-6 w-6 text-green-600 mr-3" fill="currentColor" viewBox="0 0 20 20">
+          <div className="overflow-y-auto flex-1">
+            <div className="px-6 py-6 space-y-6">
+              {/* Event Details */}
+              <div className="space-y-4">
+                <div className="flex items-start">
+                  <svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path
-                      fillRule="evenodd"
-                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                      clipRule="evenodd"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                     />
                   </svg>
                   <div>
-                    <p className="text-sm font-medium text-green-900">Event Completed</p>
-                    <p className="text-sm text-green-700 mt-1">
-                      {event.litterCollected} kg of litter collected
+                    <p className="text-sm font-medium text-gray-900">Date & Time</p>
+                    <p className="text-sm text-gray-600 mt-1">
+                      {formatEventDate(event.scheduledDate)} at {formatEventTime(event.scheduledDate)}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-start">
+                  <svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                  <div>
+                    <p className="text-sm font-medium text-gray-900">Duration</p>
+                    <p className="text-sm text-gray-600 mt-1">{formatDuration(event.duration)}</p>
+                  </div>
+                </div>
+
+                <div className="flex items-start">
+                  <svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+                    />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                  <div>
+                    <p className="text-sm font-medium text-gray-900">Location</p>
+                    <p className="text-sm text-gray-600 mt-1">{event.locationName}</p>
+                    <p className="text-xs text-gray-500 mt-1">
+                      {event.latitude.toFixed(6)}, {event.longitude.toFixed(6)}
                     </p>
                   </div>
                 </div>
               </div>
-            )}
 
-            {/* Map */}
-            <div>
-              <h3 className="text-sm font-medium text-gray-900 mb-2">Event Location</h3>
-              <div className="border border-gray-300 rounded-lg overflow-hidden">
-                <div ref={mapRef} className="w-full h-64" />
-              </div>
-            </div>
-
-            {/* Photos (if completed) */}
-            {event.status === 'completed' && event.photos && event.photos.length > 0 && (
+              {/* Description */}
               <div>
-                <h3 className="text-sm font-medium text-gray-900 mb-2">Event Photos</h3>
-                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-                  {event.photos.map((photo, index) => (
-                    <img
-                      key={index}
-                      src={photo}
-                      alt={`Event photo ${index + 1}`}
-                      className="w-full h-32 object-cover rounded-lg"
-                    />
-                  ))}
+                <h3 className="text-sm font-medium text-gray-900 mb-2">Description</h3>
+                <p className="text-sm text-gray-600 whitespace-pre-wrap">{event.description}</p>
+              </div>
+
+              {/* Completed Event Info */}
+              {event.status === 'completed' && event.litterCollected !== undefined && (
+                <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+                  <div className="flex items-center">
+                    <svg className="h-6 w-6 text-green-600 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                      <path
+                        fillRule="evenodd"
+                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <div>
+                      <p className="text-sm font-medium text-green-900">Event Completed</p>
+                      <p className="text-sm text-green-700 mt-1">{event.litterCollected} kg of litter collected</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Photos (if completed) */}
+              {event.status === 'completed' && event.photos && event.photos.length > 0 && (
+                <div>
+                  <h3 className="text-sm font-medium text-gray-900 mb-2">Event Photos</h3>
+                  <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                    {event.photos.map((photo, index) => (
+                      <img
+                        key={index}
+                        src={photo}
+                        alt={`Event photo ${index + 1}`}
+                        className="w-full h-32 object-cover rounded-lg"
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Map - Moved to bottom */}
+              <div>
+                <h3 className="text-sm font-medium text-gray-900 mb-2">Event Location Map</h3>
+                <div className="border border-gray-300 rounded-lg overflow-hidden">
+                  <div ref={mapRef} className="w-full h-64" />
                 </div>
               </div>
-            )}
+            </div>
           </div>
 
           {/* Completion Form for Organizers */}