diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index fd55283..410c847 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import Image from 'next/image';
-import { getArtworks, getEvents, Artwork, Event } from '@/lib/directus';
+import { getArtworks, getEvents, getAssetUrl, Artwork, Event } from '@/lib/directus';
 import { ArtworkCard } from '@/components/artwork-card';
 import { WisdomWordsCarousel } from '@/components/wisdom-words-carousel';
 
@@ -332,20 +332,35 @@ export default async function HomePage() {
           <div className="space-y-8">
             {upcomingEvents.length > 0 ? (
               upcomingEvents.map((event, index) => (
-                <div key={event.id} className={index < upcomingEvents.length - 1 ? 'border-b border-gray-200 pb-8' : 'pb-8'}>
-                  <p className="text-sm text-gray-500 uppercase tracking-wider mb-2">
-                    {formatEventDate(event.start_date, event.end_date)}
-                  </p>
-                  <h3 className="font-serif text-xl text-[#222]">{event.title}</h3>
-                  {event.location && (
-                    <p className="mt-1 text-sm text-gray-500">{event.location}</p>
+                <div key={event.id} className={`flex gap-6 ${index < upcomingEvents.length - 1 ? 'border-b border-gray-200 pb-8' : 'pb-8'}`}>
+                  {/* Event Thumbnail */}
+                  {event.image && (
+                    <Link href="/events" className="flex-shrink-0 w-32 h-32 md:w-40 md:h-40 relative bg-gray-100 overflow-hidden group">
+                      <Image
+                        src={getAssetUrl(event.image, { width: 320, quality: 80, format: 'webp' })}
+                        alt={event.title}
+                        fill
+                        className="object-cover transition-transform duration-300 group-hover:scale-105"
+                        sizes="(max-width: 768px) 128px, 160px"
+                      />
+                    </Link>
                   )}
-                  {event.description && (
-                    <p className="mt-2 text-gray-600 line-clamp-2">{event.description}</p>
-                  )}
-                  <Link href="/events" className="mt-3 inline-block text-sm text-[#222] underline underline-offset-4 hover:no-underline">
-                    Learn More
-                  </Link>
+                  {/* Event Details */}
+                  <div className="flex-1">
+                    <p className="text-sm text-gray-500 uppercase tracking-wider mb-2">
+                      {formatEventDate(event.start_date, event.end_date)}
+                    </p>
+                    <h3 className="font-serif text-xl text-[#222]">{event.title}</h3>
+                    {event.location && (
+                      <p className="mt-1 text-sm text-gray-500">{event.location}</p>
+                    )}
+                    {event.description && (
+                      <p className="mt-2 text-gray-600 line-clamp-2">{event.description}</p>
+                    )}
+                    <Link href="/events" className="mt-3 inline-block text-sm text-[#222] underline underline-offset-4 hover:no-underline">
+                      Learn More
+                    </Link>
+                  </div>
                 </div>
               ))
             ) : (