diff --git a/components/Form/subscription.js b/components/Form/subscription.js
index aefdfb9e..bfa1aeb6 100644
--- a/components/Form/subscription.js
+++ b/components/Form/subscription.js
@@ -9,12 +9,16 @@ function Subscription() {
 					Subscribe for AACoT’24 updates!
 				</h3>
 				<a href='https://www.asyncapi.com/newsletter' target='_blank' rel="noreferrer" className='sm:w-full'>
-				<Button type='submit' className='w-full md:w-[200px] mt-8 px-10'>
-					Subscribe
-				</Button>
+					<Button
+						type='submit'
+						className='w-full md:w-[200px] mt-8 px-10'
+					>
+						Subscribe
+					</Button>
 				</a>
 			</div>
 		</div>
 	);
 }
-export default Subscription
+
+export default Subscription;
diff --git a/components/Gallery/gallery.js b/components/Gallery/gallery.js
new file mode 100644
index 00000000..4f9b493f
--- /dev/null
+++ b/components/Gallery/gallery.js
@@ -0,0 +1,55 @@
+import React from "react";
+import Image from 'next/image';
+import Link from "next/link";
+import "./gallery.module.css";
+
+function Gallery() {
+  const images = [
+    {
+     id:1,
+     src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    },
+    {
+     id:2,
+     src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    },
+    {
+     id:3,
+     src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    },
+    {
+     id:4,
+     src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    },
+    {
+     id:5,
+     src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    },
+    {
+     id:6,
+     src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    },
+  ];
+  return (
+    <div className="container mt-5">
+        <h1 className="text-white font-medium text-center text-[32px] mb-5">OUR EVENT GALLERY</h1>
+        <div className=" gallery">
+        {images.map((image, index) => {
+            return (
+                <div className="pics p-2 " key={index}>
+                    <img src={image.src} style={{width:'100%'}}></img>
+                </div>
+            )
+        })}
+        </div>
+        <div className="flex justify-center mt-5">
+          <a className="text-white text-center cursor-pointer rounded-md bg-purple-900  w-[108px] p-2 hover:scale-105 duration-200 ease-in-out">
+            Browse All
+          </a>
+        </div>
+        
+    </div>
+  );
+}
+
+export default Gallery;
diff --git a/components/Gallery/gallery.module.css b/components/Gallery/gallery.module.css
new file mode 100644
index 00000000..3336c179
--- /dev/null
+++ b/components/Gallery/gallery.module.css
@@ -0,0 +1,9 @@
+.gallery{
+    -webkit-column-count: 3;
+    -moz-column-count: 3;
+    column-count: 3;
+    -webkit-column-width: 33%;
+    -moz-column-width: 33%;
+    column-width: 33%;
+    padding: 0 12px;
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 101f0fc2..3a603b42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1237,12 +1237,12 @@
       "integrity": "sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.37",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz",
-      "integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==",
+      "version": "17.0.80",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.80.tgz",
+      "integrity": "sha512-LrgHIu2lEtIo8M7d1FcI3BdwXWoRQwMoXOZ7+dPTW0lYREjmlHl3P0U1VD0i/9tppOuv8/sam7sOjx34TxSFbA==",
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
+        "@types/scheduler": "^0.16",
         "csstype": "^3.0.2"
       }
     },
diff --git a/pages/index.js b/pages/index.js
index d772b63f..49f0ac32 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -10,12 +10,13 @@ import About from '../components/About/about';
 import TicketCards from '../components/Tickets/ticketCards';
 import Heading from '../components/Typography/heading';
 import Paragraph from '../components/Typography/paragraph';
-import Subscription from '../components/Form/subscription';
+import Subcription from '../components/Form/subscription';
 import Speaker from '../components/Speaker/speaker';
 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' });
@@ -180,8 +181,11 @@ export default function Home() {
 			<div id='sponsors' className='mt-20'>
 				<Sponsors imgs={['/img/apidays.png']} />
 			</div>
+			<div>
+				<Gallery/>
+			</div>
 			<div className='mt-5'>
-			<Subscription/>
+			<Subcription/>
 			</div>
 		</div>
 	);
diff --git a/styles/globals.css b/styles/globals.css
index 5a699738..c0c960d6 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -224,4 +224,47 @@ mix-blend-mode: lighten;
 
 .hoverEffect:hover {
   transform: scale(1.1); /* Scale the image by 10% on hover */
-}
\ No newline at end of file
+}
+
+
+
+
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+
+.pics {
+  overflow: hidden;
+  position: relative;
+}
+
+.pics img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.pics:hover img {
+  transform: scale(1.1);
+}
+
+.pics.large {
+  grid-column: span 2;
+  grid-row: span 2;
+}
+
+.text-white {
+  color: white;
+}
+
+@media (max-width: 768px) {
+.gallery {
+  padding: 20px;
+    grid-template-columns: repeat(1, 1fr);
+    grid-gap: 10px;
+}
+}
+