diff --git a/app/(event)/photo-gallery/page copy.jsx b/app/(event)/photo-gallery/page copy.jsx
new file mode 100644
index 0000000..37d4d95
--- /dev/null
+++ b/app/(event)/photo-gallery/page copy.jsx	
@@ -0,0 +1,93 @@
+'use client';
+import Countdown from '@/components/elements/Countdown';
+import Layout from "@/components/layout/Layout";
+import { memoryData } from '@/utility/constant.utils';
+import Link from "next/link";
+import { useState } from 'react';
+
+export default function Memories() {
+    const years = Object.keys(memoryData).sort((a, b) => Number(b) - Number(a));
+    const [selectedYear, setSelectedYear] = useState(years[0]); // Default to latest year
+
+    return (
+        <Layout headerStyle={1} footerStyle={1}>
+            <div>
+                {/* Header Section */}
+                <div
+                    className="inner-page-header"
+                    style={{ backgroundImage: 'url(/assets/img/event/gallery/gallery-banner.webp)' }}
+                >
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-6 m-auto">
+                                <div className="heading1 text-center">
+                                    <h1>Recent Memories</h1>
+                                    <div className="space20" />
+                                    <Link href="/">
+                                        Home <i className="fa-solid fa-angle-right" /> <span>Recent Memories</span>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Memory Section */}
+                <div className="memory-inner-section-area blog-details-section sp4">
+                    <div className="container">
+                        <div className="row gx-5">
+                            {/* Left Column: Year Tabs */}
+                            <div className="col-lg-3 mb-4 mb-lg-0">
+                                <div className="blog-auhtor-details sticky-top" style={{ top: "120px" }}>
+                                    <div className="blog-categories">
+                                        <ul className="list-unstyled">
+                                            {years.map((year) => (
+                                                <li key={year}>
+                                                    <button
+                                                        onClick={() => setSelectedYear(year)}
+                                                        className={`btn w-100 mb-2 category-btn ${selectedYear === year && 'active'}`}
+                                                    >
+                                                        Years {year}
+                                                    </button>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Right Column: Gallery */}
+                            <div className="col-lg-9">
+                                {/* <div className="heading12 mb-4 border-bottom pb-2">
+                                    <h2 className="text-center">📷 Memories of {selectedYear}</h2>
+                                </div> */}
+
+                                <div className="row justify-content-start">
+                                    {memoryData[selectedYear]?.map((event, idx) => (
+                                        <div className="col-lg-4 col-md-6 mb-4" key={idx}>
+                                            <div className="memory3-boxarea">
+                                                <div className="img1">
+                                                    <img src={event.image} alt={event.title} />
+                                                </div>
+                                                <div className="content-area">
+                                                    <p>{event.date}</p>
+                                                    <div className="space12" />
+                                                    <Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>{event.title}</Link>
+                                                    <div className="plus">
+                                                        <Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>
+                                                            <i className="fa-solid fa-plus" />
+                                                        </Link>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Layout>
+    );
+}
diff --git a/app/(event)/photo-gallery/page.jsx b/app/(event)/photo-gallery/page.jsx
index 37d4d95..adad2df 100644
--- a/app/(event)/photo-gallery/page.jsx
+++ b/app/(event)/photo-gallery/page.jsx
@@ -1,13 +1,36 @@
 'use client';
-import Countdown from '@/components/elements/Countdown';
+import axios from 'axios';
 import Layout from "@/components/layout/Layout";
-import { memoryData } from '@/utility/constant.utils';
 import Link from "next/link";
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 export default function Memories() {
-    const years = Object.keys(memoryData).sort((a, b) => Number(b) - Number(a));
-    const [selectedYear, setSelectedYear] = useState(years[0]); // Default to latest year
+    
+    const [selectedYear, setSelectedYear] = useState(''); 
+    const [events, setEvents]=useState([]);
+    const [years, setYears] = useState([]);
+
+     useEffect(() => {
+        getEvents();
+    }, [])
+
+    const getEvents = async () => {
+        try {
+          const eventRes = await axios?.get('https://api.tamilculturewaterloo.org/api/events/');
+            console.log("eventRes", eventRes)
+            setEvents(eventRes?.data?.data)
+            const years = Object.keys(eventRes?.data).sort((a, b) => Number(b) - Number(a));
+             setYears(years);
+
+              // Default to latest year
+                if (years.length > 0) {
+                    setSelectedYear(years[0]);
+                }
+
+        } catch (error) {
+            console.log("error fetching data", error)
+        }
+    }
 
     return (
         <Layout headerStyle={1} footerStyle={1}>
@@ -63,7 +86,7 @@ export default function Memories() {
                                 </div> */}
 
                                 <div className="row justify-content-start">
-                                    {memoryData[selectedYear]?.map((event, idx) => (
+                                    {events[selectedYear]?.map((event, idx) => (
                                         <div className="col-lg-4 col-md-6 mb-4" key={idx}>
                                             <div className="memory3-boxarea">
                                                 <div className="img1">
diff --git a/package-lock.json b/package-lock.json
index b5df60e..12eccb3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "aos": "^2.3.4",
-        "axios": "^1.10.0",
+        "axios": "^1.11.0",
         "gsap": "^3.12.5",
         "next": "14.2.15",
         "react": "^18",
@@ -1722,13 +1722,13 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
-      "integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
+      "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
         "proxy-from-env": "^1.1.0"
       }
     },
@@ -3005,9 +3005,9 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.3.tgz",
-      "integrity": "sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
diff --git a/package.json b/package.json
index 9fad468..236ea9f 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "aos": "^2.3.4",
-    "axios": "^1.10.0",
+    "axios": "^1.11.0",
     "gsap": "^3.12.5",
     "next": "14.2.15",
     "react": "^18",