diff --git a/components/Gallery/gallery.js b/components/Gallery/gallery.js
new file mode 100644
index 00000000..6b2a38b6
--- /dev/null
+++ b/components/Gallery/gallery.js
@@ -0,0 +1,63 @@
+import LightGallery from 'lightgallery/react';
+import Heading from '../Typography/heading'
+// import styles
+import 'lightgallery/css/lightgallery.css';
+import 'lightgallery/css/lg-zoom.css';
+import 'lightgallery/css/lg-thumbnail.css';
+import 'lightgallery/css/lg-autoplay.css';
+import 'lightgallery/css/lg-fullscreen.css';
+import 'lightgallery/css/lg-share.css';
+import 'lightgallery/css/lg-rotate.css';
+
+
+// import plugins if you need
+import lgThumbnail from 'lightgallery/plugins/thumbnail';
+import lgZoom from 'lightgallery/plugins/zoom';
+import lgAutoplay from 'lightgallery/plugins/autoplay'
+import lgFullscreen from 'lightgallery/plugins/fullscreen';
+import lgShare from 'lightgallery/plugins/share';
+import lgRotate from 'lightgallery/plugins/rotate';
+import Button from '../Buttons/button';
+
+const images = [
+    { src: "/img/1.jpeg", alt: "1" },
+    { src: "/img/2.jpeg", alt: "2" },
+    { src: "/img/3.jpeg", alt: "3" },
+    { src: "/img/4.jpeg", alt: "4", },
+    { src: "/img/5.jpeg", alt: "5", },
+    { src: "/img/6.jpeg", alt: "6", },
+   
+]
+
+function Gallery() {
+    const onInit = () => {
+        console.log('lightGallery has been initialized');
+    };
+    return (
+        <div className="mt-20 mb-24">
+            <Heading typeStyle='heading-md' className='text-gradient text-center lg:mt-10'>
+					Our Past Event Gallery
+			</Heading>
+            <LightGallery
+                onInit={onInit}
+                speed={500}
+                plugins={[lgThumbnail, lgZoom, lgAutoplay, lgFullscreen, lgRotate, lgShare]}
+            >
+
+                {images.map((image, index) => {
+                    return (
+                        <a href={image.src} key={index}>
+                            <img alt={image.alt} src={image.src} 
+                            className="max-w-full block p-5 border-2 border-transparent rounded-lg transition-transform hover:filter hover:opacity-90 hover:scale-101" />
+                        </a>
+                    )
+                })}
+            </LightGallery>
+            <a className='flex justify-center items-center'>
+            <Button overlay={true} className='w-[200px] border' >Browse all</Button>
+            </a>
+        </div>
+    );
+}
+
+export default Gallery
diff --git a/package-lock.json b/package-lock.json
index a227c0b4..7b2d25a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "axios": "^1.6.0",
         "d3": "^7.8.5",
+        "lightgallery": "^2.7.2",
         "next": "^12.0.0",
         "react": "^17.0.2",
         "react-confetti": "^6.1.0",
@@ -3698,12 +3699,6 @@
         "jiti": "bin/jiti.js"
       }
     },
-    "node_modules/jquery": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-      "peer": true
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3830,6 +3825,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightgallery": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/lightgallery/-/lightgallery-2.7.2.tgz",
+      "integrity": "sha512-Ewdcg9UPDqV0HGZeD7wNE4uYejwH2u0fMo5VAr6GHzlPYlhItJvjhLTR0cL0V1HjhMsH39PAom9iv69ewitLWw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -4754,20 +4757,6 @@
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.5.1.tgz",
       "integrity": "sha512-LNHI/Ll1UqBTGhrR6vMhtVZmX4kjYdCJUjIM6Ydp7/oJ5w1C0MKrzELuUAmMlU0eKwBGx6PaO0TRZ/KDXAFTBg=="
     },
-    "node_modules/react-youtube-embed/node_modules/react": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/react-youtube-embed/node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -5688,20 +5677,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
-      "dev": true,
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index a7dc0577..813a7c0f 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "axios": "^1.6.0",
     "d3": "^7.8.5",
+    "lightgallery": "^2.7.2",
     "next": "^12.0.0",
     "react": "^17.0.2",
     "react-confetti": "^6.1.0",
diff --git a/pages/index.js b/pages/index.js
index be4cdc2a..5d6f1968 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -10,6 +10,7 @@ import About from '../components/About/about';
 import TicketCards from '../components/Cards/ticketCards';
 import Heading from '../components/Typography/heading';
 import Paragraph from '../components/Typography/paragraph';
+import Gallery from '../components/Gallery/gallery'
 
 export default function Home() {
 	return (
@@ -46,6 +47,9 @@ export default function Home() {
 			<div id='sponsors' className='mt-20'>
 				<Sponsors imgs={['/img/apidays.png']} />
 			</div>
+			<div id='gallery' className='mt-20'>
+				<Gallery />
+			</div>
 		</div>
 	);
 }
diff --git a/public/img/1.jpeg b/public/img/1.jpeg
new file mode 100644
index 00000000..ebe424e3
Binary files /dev/null and b/public/img/1.jpeg differ
diff --git a/public/img/2.jpeg b/public/img/2.jpeg
new file mode 100644
index 00000000..8bd00950
Binary files /dev/null and b/public/img/2.jpeg differ
diff --git a/public/img/3.jpeg b/public/img/3.jpeg
new file mode 100644
index 00000000..db989acd
Binary files /dev/null and b/public/img/3.jpeg differ
diff --git a/public/img/4.jpeg b/public/img/4.jpeg
new file mode 100644
index 00000000..008451b8
Binary files /dev/null and b/public/img/4.jpeg differ
diff --git a/public/img/5.jpeg b/public/img/5.jpeg
new file mode 100644
index 00000000..145ba67f
Binary files /dev/null and b/public/img/5.jpeg differ
diff --git a/public/img/6.jpeg b/public/img/6.jpeg
new file mode 100644
index 00000000..7023ecd3
Binary files /dev/null and b/public/img/6.jpeg differ
diff --git a/styles/globals.css b/styles/globals.css
index 6d1d8e73..5dbfa16a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -207,4 +207,9 @@ mix-blend-mode: lighten;
 
 .hoverEffect:hover {
   transform: scale(1.1); /* Scale the image by 10% on hover */
+}
+
+.lg-react-element {
+  column-count: 3;
+  column-gap: 10px;
 }
\ No newline at end of file