diff --git a/components/Gallery/gallery.js b/components/Gallery/gallery.js
new file mode 100644
index 00000000..3554837c
--- /dev/null
+++ b/components/Gallery/gallery.js
@@ -0,0 +1,52 @@
+import Heading from '../Typography/heading';
+import Button from '../Buttons/button';
+import Image from 'next/image';
+
+const imageUrls = [
+	
+    "/img/gallery/1.webp",
+    "/img/gallery/2.webp",
+    "/img/gallery/3.webp",
+
+    "/img/gallery/4.webp",
+    "/img/gallery/5.webp",
+    "/img/gallery/6.webp",
+
+    "/img/gallery/7.webp",
+    "/img/gallery/8.webp",
+    "/img/gallery/9.webp",
+
+    "/img/gallery/10.webp",
+    "/img/gallery/11.webp",
+    "/img/gallery/12.webp",
+    
+];
+
+export function Gallery(){
+    return(
+        <div className='flex flex-col items-center pb-24' >
+            <div>
+                <div className='text-lg capitalize sm:text-sm text-white font-semi-bold border-b-2 border-blue-400 mb-1'>gallery</div>
+            </div>
+            <Heading typeStyle='heading-md' className='capitalize text-gradient text-center lg:mt-10'>
+                our event gallery
+            </Heading>
+            <div className="w-full overflow-x-auto columns-4 sm:columns-2 space-y-5 lg:w-full justify-center my-4 p-4">
+                {imageUrls.map((url, index) => (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                        key={index}
+                        src={url}
+                        fill
+                        alt={`Gallery Image ${index + 1}`}
+                        className="rounded-xl max-w-full h-auto"
+                        placeholder='blur'
+                    />
+                ))}
+            </div>
+            <Button type='button' onClick={()=>{}} className='w-[200px] my-4 px-10'>
+                Browse
+            </Button>
+        </div>
+    )
+}			
diff --git a/pages/index.js b/pages/index.js
index 78c8de64..d2ee4baa 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -16,6 +16,7 @@ import speakers from '../config/speakers.json';
 import Link from 'next/link';
 import Button from '../components/Buttons/button';
 import Dropdown from '../components/Dropdown/dropdown';
+import { Gallery } from '../components/Gallery/gallery';
 
 export default function Home() {
 	const isTablet = useMediaQuery({ maxWidth: '1118px' });
@@ -52,7 +53,7 @@ export default function Home() {
 			<div className='flex items-center flex-col justify-center'>
 			<div
 			id='speakers'
-			className='relative flex flex-col items-center justify-center'
+			className='relative flex flex-col items-center justify-center mt-12'
 			>
 				<div className='text-center'>
 					<div className='flex items-center justify-center'>
@@ -164,6 +165,9 @@ export default function Home() {
 						</div>
 					</div>
 				</div>
+			<div id='gallery'>
+				<Gallery />
+			</div>
 			<div id='tickets' className='flex items-center'>
 				<div className='text-lg sm:text-sm text-white font-semi-bold border-b-2 border-blue-400 mb-1'>Tickets</div>
 			</div>
@@ -183,6 +187,7 @@ export default function Home() {
 					}
 				})}
 			</div>
+
 			</div>
 			</div>
 		</div>
diff --git a/public/img/gallery/1.webp b/public/img/gallery/1.webp
new file mode 100644
index 00000000..5ee03447
Binary files /dev/null and b/public/img/gallery/1.webp differ
diff --git a/public/img/gallery/10.webp b/public/img/gallery/10.webp
new file mode 100644
index 00000000..0d47a780
Binary files /dev/null and b/public/img/gallery/10.webp differ
diff --git a/public/img/gallery/11.webp b/public/img/gallery/11.webp
new file mode 100644
index 00000000..160198e1
Binary files /dev/null and b/public/img/gallery/11.webp differ
diff --git a/public/img/gallery/12.webp b/public/img/gallery/12.webp
new file mode 100644
index 00000000..07de6d55
Binary files /dev/null and b/public/img/gallery/12.webp differ
diff --git a/public/img/gallery/2.webp b/public/img/gallery/2.webp
new file mode 100644
index 00000000..d5abc12b
Binary files /dev/null and b/public/img/gallery/2.webp differ
diff --git a/public/img/gallery/3.webp b/public/img/gallery/3.webp
new file mode 100644
index 00000000..c26e1497
Binary files /dev/null and b/public/img/gallery/3.webp differ
diff --git a/public/img/gallery/4.webp b/public/img/gallery/4.webp
new file mode 100644
index 00000000..2a275939
Binary files /dev/null and b/public/img/gallery/4.webp differ
diff --git a/public/img/gallery/5.webp b/public/img/gallery/5.webp
new file mode 100644
index 00000000..baaefabf
Binary files /dev/null and b/public/img/gallery/5.webp differ
diff --git a/public/img/gallery/6.webp b/public/img/gallery/6.webp
new file mode 100644
index 00000000..66fd1783
Binary files /dev/null and b/public/img/gallery/6.webp differ
diff --git a/public/img/gallery/7.webp b/public/img/gallery/7.webp
new file mode 100644
index 00000000..6b1d345d
Binary files /dev/null and b/public/img/gallery/7.webp differ
diff --git a/public/img/gallery/8.webp b/public/img/gallery/8.webp
new file mode 100644
index 00000000..cf169628
Binary files /dev/null and b/public/img/gallery/8.webp differ
diff --git a/public/img/gallery/9.webp b/public/img/gallery/9.webp
new file mode 100644
index 00000000..60abcba1
Binary files /dev/null and b/public/img/gallery/9.webp differ