diff --git a/components/home/HomePhotoGallerySection.tsx b/components/home/HomePhotoGallerySection.tsx
index 95d0dc6..c0a7b66 100644
--- a/components/home/HomePhotoGallerySection.tsx
+++ b/components/home/HomePhotoGallerySection.tsx
@@ -1,7 +1,8 @@
 'use client';
 
+import axios from 'axios';
 import Link from 'next/link';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Lightbox from "yet-another-react-lightbox";
 import "yet-another-react-lightbox/styles.css";
 
@@ -13,31 +14,62 @@ interface GalleryImage {
 }
 
 export default function HomePhotoGallerySection() {
-    const galleryImages: GalleryImage[] = [
-        { src: "/assets/img/home/photos-gallery/christmas.webp", delay: 800, year: 2025 },
-        { src: "/assets/img/home/photos-gallery/m-g.webp", delay: 1000, year: 2025 },
-        { src: "/assets/img/home/photos-gallery/thai-pongal.webp", delay: 1000, year: 2004 },
-        { src: "/assets/img/home/photos-gallery/multicultural.webp", delay: 1000, year: 2023 },
-        { src: "/assets/img/home/photos-gallery/sports.webp", delay: 1000, year: 2024 },
-        { src: "/assets/img/home/photos-gallery/tamil-new-yr.webp", delay: 1000, year: 2022 },
-
-        { src: "/assets/img/home/photos-gallery/kw.webp", delay: 1200, year: 1989 },
-        { src: "/assets/img/home/photos-gallery/tamil-heritage.webp", delay: 800, year: 2025 },
-    ];
-
+    const [galleryImages, setGalleryImages] = useState<GalleryImage[]>([]);
+    const [years, setYears] = useState<number[]>([]);
+    const [activeYear, setActiveYear] = useState<number | null>(null);
     const [open, setOpen] = useState(false);
     const [currentIndex, setCurrentIndex] = useState(0);
-    const [activeTab, setActiveTab] = useState<'All' | number>('All');
 
-    const years = Array.from(new Set(galleryImages.map(img => img.year))).sort((a, b) => b - a);
-    const tabs: (number | 'All')[] = ['All', ...years];
+    useEffect(() => {
+        getEvents();
+    }, []);
 
-    const filteredImages = activeTab === 'All'
-        ? galleryImages
-        : galleryImages.filter(img => img.year === activeTab);
+    const getEvents = async () => {
+        try {
+            const eventRes = await axios.get(
+                'https://api.tamilculturewaterloo.org/api/events/'
+            );
+
+            const eventsData = eventRes?.data?.data || [];
+
+            // Extract images with year (flattened array)
+            const formatted = eventsData.map((img: any) => ({
+                id: img.id,
+                src: img.eventimageurl,
+                title: img?.eventtitle || '',
+                description: img?.eventdescription || '',
+                year: img?.year
+            }));
+
+            setGalleryImages(formatted);
+
+            // Unique years, sorted latest first
+            const uniqueYears:any = [...new Set(eventsData.map((event: any) => event.year))]
+
+            setYears(uniqueYears);
+
+            // Set latest year as default tab
+            if (uniqueYears.length > 0) {
+                setActiveYear(uniqueYears[0]);
+            }
+        } catch (error) {
+            console.log("Error fetching event images:", error);
+        }
+    };
+
+    console.log("activeYear", activeYear)
+    console.log("galleryImages", galleryImages)
+
+    // Filter images by active year
+    const filteredImages = galleryImages.filter((img) => img.year === activeYear)
+        
+
+        console.log("filteredImages", filteredImages)
 
     const handleImageClick = (index: number) => {
-        const actualIndex = galleryImages.findIndex(img => img.src === filteredImages[index].src);
+        const actualIndex = galleryImages.findIndex(
+            (img) => img.src === filteredImages[index].src
+        );
         setCurrentIndex(actualIndex);
         setOpen(true);
     };
@@ -51,30 +83,32 @@ export default function HomePhotoGallerySection() {
                             <div className="event2-header heading5 space-margin60">
                                 <h2 className="text-anime-style-3">Photos Gallery</h2>
 
-                                {/* Tabs */}
+                                {/* Year Tabs */}
                                 <div className="d-flex justify-content-start gap-3 mt-4 flex-wrap">
-                                    {tabs.map((tab, i) => (
+                                    {years.map((year) => (
                                         <button
-                                            key={i}
-                                            className={`btn btn-sm gallery-btn ${activeTab === tab ? 'btn-primary' : 'btn-outline-primary'}`}
-                                            onClick={() => setActiveTab(tab)}
+                                            key={year}
+                                            className={`btn btn-sm gallery-btn ${activeYear === year ? 'btn-primary' : 'btn-outline-primary'
+                                                }`}
+                                            onClick={() => setActiveYear(year)}
                                         >
-                                            {tab === 'All' ? 'All' : tab}
+                                            {year}
                                         </button>
                                     ))}
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div className='row gx-5'>
-                        <div className='col-lg-10'>
+
+                    <div className="row gx-5">
+                        <div className="col-lg-10">
                             <div className="row mt-4">
-                                {filteredImages.slice(0, 8).map((img, index) => (
+                                {filteredImages.slice(0, 8).map((img:any, index) => (
                                     <div
                                         key={index}
-                                        className="col-lg-3 col-md-6"
+                                        className="col-lg-3 col-md-6 mb-4"
                                         data-aos="zoom-in"
-                                        data-aos-duration={img.delay || 1000}
+                                        data-aos-duration={ 1000}
                                     >
                                         <div className="blog4-boxarea">
                                             <div
@@ -88,36 +122,51 @@ export default function HomePhotoGallerySection() {
                                                     loading="lazy"
                                                     style={{ width: '100%', height: 'auto' }}
                                                 />
+                                                <h3>{img?.eventtitle}</h3>
                                             </div>
                                         </div>
                                     </div>
                                 ))}
+
                                 {filteredImages.length === 0 && (
                                     <div className="col-12 text-center mt-5">
-                                        <p className="text-muted">No images found for selected year.</p>
+                                        <p className="text-muted">
+                                            No images found for {activeYear}.
+                                        </p>
                                     </div>
                                 )}
                             </div>
                         </div>
-                        <div className='col-lg-2 ad-banner'>
+
+                        <div className="col-lg-2 ad-banner">
                             <div className="memory-boxarea pl-3">
-
-                                <div className="img1" data-aos="zoom-in" data-aos-duration={1000} >
-                                    <img src="/assets/img/home/ad-banner/photo-gallery-ad.webp" alt="" className='mb-5' />
-                                    {/* <img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt=""/> */}
-
+                                <div
+                                    className="img1"
+                                    data-aos="zoom-in"
+                                    data-aos-duration={1000}
+                                >
+                                    <img
+                                        src="/assets/img/home/ad-banner/photo-gallery-ad.webp"
+                                        alt=""
+                                        className="mb-5"
+                                    />
                                 </div>
                             </div>
                         </div>
-                        <div className='col-lg-12'>
+
+                        <div className="col-lg-12">
                             <div className="space32" />
-                            <div className="btn-area1 text-center" data-aos="fade-left" data-aos-duration={1200}>
-                                <Link href="/photo-gallery" className="vl-btn3">know More</Link>
+                            <div
+                                className="btn-area1 text-center"
+                                data-aos="fade-left"
+                                data-aos-duration={1200}
+                            >
+                                <Link href="/photo-gallery" className="vl-btn3">
+                                    Know More
+                                </Link>
                             </div>
                         </div>
-
                     </div>
-
                 </div>
             </div>