diff --git a/package.json b/package.json
index d47bdb45..d383175b 100644
--- a/package.json
+++ b/package.json
@@ -31,10 +31,12 @@
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.6.2",
     "react-hook-form": "^7.48.2",
+    "react-photo-album": "^2.3.0",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.11.2",
     "react-simple-wysiwyg": "^2.2.5",
     "tailwind-scrollbar-hide": "^1.1.7",
+    "yet-another-react-lightbox": "^3.15.6",
     "yup": "^1.3.2"
   },
   "devDependencies": {
diff --git a/src/APP/components/Footer2.jsx b/src/APP/components/Footer2.jsx
index 51d53dd4..3303855c 100644
--- a/src/APP/components/Footer2.jsx
+++ b/src/APP/components/Footer2.jsx
@@ -7,6 +7,8 @@ import {
   twitter,
   spotify,
   youtube,
+  instagram,
+  facebook,
 } from "../../assets/images/socials";
 
 function Footer2() {
@@ -16,8 +18,8 @@ function Footer2() {
   return (
     <footer className="bg-[#252533] text-white ">
       <div className="md:p-12 py-8 px-4 relative max-w-[1440px] mx-auto">
-        <div className="flex lg:flex-row flex-col md:gap-16 gap-8 ">
-          <div className="flex-3 flex flex-col lg:items-center items-start">
+        <div className="flex lg:flex-row flex-col md:gap-16 gap-8">
+          <div className="flex-3 flex flex-col sm:items-start items-center">
             {/* logo */}
             <img
               src={logo}
@@ -26,38 +28,55 @@ function Footer2() {
             />
 
             {/* socials */}
-            <div className="flex items-center md:gap-5 gap-3 py-4">
-              <a
-                href="https://x.com/SpaceYaTech"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <img src={twitter} alt="twitter" className="w-7 h-7" />
-              </a>
-
-              <a
-                href="https://linkedin.com/company/spaceyatech"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <img src={linkedin} alt="linkedin" className="w-7 h-7" />
-              </a>
-
-              <a
-                href="https://www.youtube.com/@spaceyatech"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <img src={youtube} alt="youtube" className="w-7 h-7" />
-              </a>
-
-              <a
-                href="https://open.spotify.com/show/4nUYzhacDAw1v9ClqPY89n"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <img src={spotify} alt="spotify" className="w-7 h-7" />
-              </a>
+            <div className="flex flex-col items-center">
+              <div className="flex items-center md:gap-5 gap-3 py-4">
+                <a
+                  href="https://www.facebook.com/spaceyatech"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <img src={facebook} alt="facebook" className="w-7 h-7" />
+                </a>
+                <a
+                  href="https://www.instagram.com/spaceyatech/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <img src={instagram} alt="instagram" className="w-7 h-7" />
+                </a>
+                <a
+                  href="https://x.com/SpaceYaTech"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <img src={twitter} alt="twitter" className="w-7 h-7" />
+                </a>
+
+                <a
+                  href="https://linkedin.com/company/spaceyatech"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <img src={linkedin} alt="linkedin" className="w-7 h-7" />
+                </a>
+              </div>
+              <div className="flex items-center md:gap-5 gap-3">
+                <a
+                  href="https://www.youtube.com/@spaceyatech"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <img src={youtube} alt="youtube" className="w-7 h-7" />
+                </a>
+
+                <a
+                  href="https://open.spotify.com/show/4nUYzhacDAw1v9ClqPY89n"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <img src={spotify} alt="spotify" className="w-7 h-7" />
+                </a>
+              </div>
             </div>
           </div>
 
@@ -103,6 +122,11 @@ function Footer2() {
                     Mentorship
                   </a>
                 </li>
+                <li>
+                  <a href="/gallery" className="hover:underline text-white">
+                    Gallery
+                  </a>
+                </li>
               </ul>
             </div>
 
diff --git a/src/APP/index.js b/src/APP/index.js
index a8fbc6a9..b51edd7e 100644
--- a/src/APP/index.js
+++ b/src/APP/index.js
@@ -21,6 +21,7 @@ import Error403 from "./pages/errorPages/Error403";
 import Error404 from "./pages/errorPages/Error404";
 import Error500 from "./pages/errorPages/Error500";
 import ProductDisplay from "./pages/shop/pages/ProductDisplay";
+import GalleryPage from "./pages/gallery/GalleryPage";
 
 export {
   LandingPage,
@@ -46,4 +47,5 @@ export {
   Error404,
   Error500,
   ProductDisplay,
+  GalleryPage,
 };
diff --git a/src/APP/pages/aboutUs/sections/PartnerCTA.jsx b/src/APP/pages/aboutUs/sections/PartnerCTA.jsx
index ee020a17..2142f422 100644
--- a/src/APP/pages/aboutUs/sections/PartnerCTA.jsx
+++ b/src/APP/pages/aboutUs/sections/PartnerCTA.jsx
@@ -56,7 +56,6 @@ function PartnerCTA() {
           <p>
             <a
               href="/src/assets/reports/spaceyatech-internship-program.pdf"
-              download="SpaceYaTech_Internship_Program_2023.pdf"
               target="_blank"
               rel="noopener noreferrer"
               className="text-primary text-sm sm:text-base"
diff --git a/src/APP/pages/community/sections/gallerySection/GallerySection.jsx b/src/APP/pages/community/sections/gallerySection/GallerySection.jsx
index 3456c6a2..0e57158b 100644
--- a/src/APP/pages/community/sections/gallerySection/GallerySection.jsx
+++ b/src/APP/pages/community/sections/gallerySection/GallerySection.jsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/prop-types */
-
+import React from "react";
+import { Link } from "react-router-dom";
 import {
   galleryimage1,
   galleryimage2,
@@ -84,26 +85,27 @@ function GallerySection() {
         </div>
       </div>
       <div className="flex items-center justify-center gap-2 mt-8">
-        <a
-          href="https://photos.google.com/share/AF1QipMS-aFHdarbFZVIYs7kOFkWL5Cit3EEXG2CbwU0K0wq-8Fw93Akn-IxfAdYSKYb2g?pli=1&key=d2wwd1VtUHdhN29INDVmb1YxN0xtNHpaV2t6LUtB"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-lg text-primary text-center font-normal hover:underline"
+        <Link
+          to="/gallery"
+          // "https://photos.google.com/share/AF1QipMS-aFHdarbFZVIYs7kOFkWL5Cit3EEXG2CbwU0K0wq-8Fw93Akn-IxfAdYSKYb2g?pli=1&key=d2wwd1VtUHdhN29INDVmb1YxN0xtNHpaV2t6LUtB"
+          // target="_blank"
+          // rel="noopener noreferrer"
+          className="text-lg text-primary text-center flex items-center gap-2 font-normal hover:underline"
         >
           View More{" "}
-        </a>
-        <svg
-          width="16"
-          height="14"
-          viewBox="0 0 16 14"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M15.3172 7.44254L9.69219 13.0675C9.57491 13.1848 9.41585 13.2507 9.25 13.2507C9.08415 13.2507 8.92509 13.1848 8.80781 13.0675C8.69054 12.9503 8.62465 12.7912 8.62465 12.6253C8.62465 12.4595 8.69054 12.3004 8.80781 12.1832L13.3664 7.62535H1.125C0.95924 7.62535 0.800269 7.5595 0.683058 7.44229C0.565848 7.32508 0.5 7.16611 0.5 7.00035C0.5 6.83459 0.565848 6.67562 0.683058 6.55841C0.800269 6.4412 0.95924 6.37535 1.125 6.37535H13.3664L8.80781 1.81753C8.69054 1.70026 8.62465 1.5412 8.62465 1.37535C8.62465 1.2095 8.69054 1.05044 8.80781 0.93316C8.92509 0.815885 9.08415 0.75 9.25 0.75C9.41585 0.75 9.57491 0.815885 9.69219 0.93316L15.3172 6.55816C15.3753 6.61621 15.4214 6.68514 15.4529 6.76101C15.4843 6.83688 15.5005 6.91821 15.5005 7.00035C15.5005 7.08248 15.4843 7.16381 15.4529 7.23969C15.4214 7.31556 15.3753 7.38449 15.3172 7.44254Z"
-            fill="#009975"
-          />
-        </svg>
+          <svg
+            width="16"
+            height="14"
+            viewBox="0 0 16 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M15.3172 7.44254L9.69219 13.0675C9.57491 13.1848 9.41585 13.2507 9.25 13.2507C9.08415 13.2507 8.92509 13.1848 8.80781 13.0675C8.69054 12.9503 8.62465 12.7912 8.62465 12.6253C8.62465 12.4595 8.69054 12.3004 8.80781 12.1832L13.3664 7.62535H1.125C0.95924 7.62535 0.800269 7.5595 0.683058 7.44229C0.565848 7.32508 0.5 7.16611 0.5 7.00035C0.5 6.83459 0.565848 6.67562 0.683058 6.55841C0.800269 6.4412 0.95924 6.37535 1.125 6.37535H13.3664L8.80781 1.81753C8.69054 1.70026 8.62465 1.5412 8.62465 1.37535C8.62465 1.2095 8.69054 1.05044 8.80781 0.93316C8.92509 0.815885 9.08415 0.75 9.25 0.75C9.41585 0.75 9.57491 0.815885 9.69219 0.93316L15.3172 6.55816C15.3753 6.61621 15.4214 6.68514 15.4529 6.76101C15.4843 6.83688 15.5005 6.91821 15.5005 7.00035C15.5005 7.08248 15.4843 7.16381 15.4529 7.23969C15.4214 7.31556 15.3753 7.38449 15.3172 7.44254Z"
+              fill="#009975"
+            />
+          </svg>
+        </Link>
       </div>
     </div>
   );
diff --git a/src/APP/pages/gallery/GalleryPage.jsx b/src/APP/pages/gallery/GalleryPage.jsx
new file mode 100644
index 00000000..63bbeea6
--- /dev/null
+++ b/src/APP/pages/gallery/GalleryPage.jsx
@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+
+import photosData from "./data";
+import ImageCard from "./sections/ImageCard";
+import processPhotos from "../../../utilities/processPhotos";
+
+function GalleryPage() {
+  const [isActive, setIsActive] = useState(false);
+
+  const photos = processPhotos(photosData);
+
+  return (
+    <main className="max-w-[1440px] mx-auto flex flex-col gap-8 ">
+      <div className="flex flex-col gap-2 pt-2 px-5 md:px-10">
+        <Link
+          to="/community"
+          className="flex items-center gap-1 text-sm font-medium"
+          onMouseEnter={() => setIsActive(true)}
+          onMouseLeave={() => setIsActive(false)}
+        >
+          {isActive ? (
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2.68281 10.4425L8.30781 16.0675C8.42509 16.1848 8.58415 16.2507 8.75 16.2507C8.91585 16.2507 9.07491 16.1848 9.19219 16.0675C9.30946 15.9503 9.37535 15.7912 9.37535 15.6253C9.37535 15.4595 9.30946 15.3004 9.19219 15.1832L4.63359 10.6253H16.875C17.0408 10.6253 17.1997 10.5595 17.3169 10.4423C17.4342 10.3251 17.5 10.1661 17.5 10.0003C17.5 9.83459 17.4342 9.67562 17.3169 9.55841C17.1997 9.4412 17.0408 9.37535 16.875 9.37535H4.63359L9.19219 4.81753C9.30946 4.70026 9.37535 4.5412 9.37535 4.37535C9.37535 4.2095 9.30946 4.05044 9.19219 3.93316C9.07491 3.81588 8.91585 3.75 8.75 3.75C8.58415 3.75 8.42509 3.81588 8.30781 3.93316L2.68281 9.55816C2.6247 9.61621 2.5786 9.68514 2.54715 9.76101C2.5157 9.83688 2.49951 9.91821 2.49951 10.0003C2.49951 10.0825 2.5157 10.1638 2.54715 10.2397C2.5786 10.3156 2.6247 10.3845 2.68281 10.4425Z"
+                fill="#009975"
+              />
+            </svg>
+          ) : (
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2.68281 10.4425L8.30781 16.0675C8.42509 16.1848 8.58415 16.2507 8.75 16.2507C8.91585 16.2507 9.07491 16.1848 9.19219 16.0675C9.30946 15.9503 9.37535 15.7912 9.37535 15.6253C9.37535 15.4595 9.30946 15.3004 9.19219 15.1832L4.63359 10.6253H16.875C17.0408 10.6253 17.1997 10.5595 17.3169 10.4423C17.4342 10.3251 17.5 10.1661 17.5 10.0003C17.5 9.83459 17.4342 9.67562 17.3169 9.55841C17.1997 9.4412 17.0408 9.37535 16.875 9.37535H4.63359L9.19219 4.81753C9.30946 4.70026 9.37535 4.5412 9.37535 4.37535C9.37535 4.2095 9.30946 4.05044 9.19219 3.93316C9.07491 3.81588 8.91585 3.75 8.75 3.75C8.58415 3.75 8.42509 3.81588 8.30781 3.93316L2.68281 9.55816C2.6247 9.61621 2.5786 9.68514 2.54715 9.76101C2.5157 9.83688 2.49951 9.91821 2.49951 10.0003C2.49951 10.0825 2.5157 10.1638 2.54715 10.2397C2.5786 10.3156 2.6247 10.3845 2.68281 10.4425Z"
+                fill="#323433"
+              />
+            </svg>
+          )}
+
+          <span
+            className={`${
+              isActive ? "text-[#009975]" : "text-black"
+            } text-base`}
+          >
+            BACK
+          </span>
+        </Link>
+
+        <div className="flex flex-col gap-3 items-center text-center mt-5 md:items-start md:text-left max-w-4xl">
+          <h3 className="text-3xl font-normal">SpaceYaTech Gallery</h3>
+
+          <p className="text-base font-normal text-[#323433]">
+            SpaceYaTech is a fast growing tech community born out of a need for
+            a space for young techies to find communities to help them
+            accelerate in their careers. The community targets all sectors in
+            the tech industry and provides online communities to network, learn
+            and grow for techies at all stages in their career.
+          </p>
+        </div>
+      </div>
+
+      {/* <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-0 grid-flow-dense">
+        {photosData.map((photo) => (
+          <ImageCard key={photo.id} photo={photo} />
+        ))}
+      </div> */}
+
+      <div className="overflow-y-auto h-full">
+        <ImageCard photos={photos} />
+      </div>
+    </main>
+  );
+}
+
+export default GalleryPage;
diff --git a/src/APP/pages/gallery/data.js b/src/APP/pages/gallery/data.js
new file mode 100644
index 00000000..b1031bbb
--- /dev/null
+++ b/src/APP/pages/gallery/data.js
@@ -0,0 +1,239 @@
+const photosData = [
+  {
+    id: 1,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV85T37FaDQSvXN_A2bzscnLDsT-TPW3_YfUNOGehQug_0uAOWsBFhSh-WWnAZGRD14dGgMaWYWegNUrDoJTU2c4Qff1H0a5uswRr34OzeadOJXzkhhTouSimkGzZjppa-8MDJiAfJ76XBAOaBi9qp8Dq=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1303,
+    height: 560,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 2,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV86B1RokBcefoXvm6apr9QgDg3xKY_gAn5VWlXH1cE1mXoguGukO-yz07HNMICP5Jj2uYqcxr2glT12wZQulj7mBfYPirY8HHwBTfG6tUaDNDgehcYPkDXMAK66eufsF3Ov6JTbo_SNGR64BLcVLiHYv=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1240,
+    height: 940,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 3,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV87POpzD2JQecFa8tI0LOUFNCMWfTXP_QyuF4zVqa24xyv5oLDtBggT_9YgWHjpxI8rHH7_QPmSsJltnm02sYEx7um1kP83CjdBIJQ9UoFDxyO39mRvAuryqhIPp9hgxYWFm4Op4xhFsNGIRquJAcO33=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1440,
+    height: 1220,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 4,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV86ruasiYYt5XpoNCqgWIBIX5tWxpMadDJCLSY5l0rzqfbSH-e1QebvBvfj7r-snKk9htxAjkHyweWfAlys5oP3vTfFDP8Ksceiw985XAhKEABHSf3fuQLWoq52Hf7Lex7RoGm7cew4q9yxL-e8d1uEy=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1480,
+    height: 1100,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+
+  {
+    id: 5,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV86M02jcJePIcBgC1UE1iuagaYIYK4zJR5fSuY0aW2k40f01iXjT3mT9YkqFje5YO_7dTSNJ3nFJiIU_XQ1GpS4QgR0jX1nlb4rssJSDFTmUpDgj0mEt9CGnok9_U4hR4P2gSzg5E1mo4kRAqxDzi7ac=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1203,
+    height: 260,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 6,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV8416CJz7pYJvXAh8I1flaXDAYhQ0KpaFdQGx0l-R8gf5E-_wn2Ere_lLdVAT9e5unuA6ab_gUF-0oiW5fiHqK8Dc6YWpTzHO0pJ_L1rkFqcY--me9Cu_WDQbL3YYVEnVPiu8Zrc2pNhSryFifFzf4pW=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1303,
+    height: 869,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 7,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV87ClpVurGHzeYOZ_o_vPr67WNXQGBqAdcXpWBDthGlesGHjUlMXiDAeEIKwrhHSqH0F2dkj3CN3YQ1RVMz7Vl6OUcoax7vy4ttGkD-99bTxdgj1iRXFQUhpuqSvU06qf9NQwVZIklCaMAgS6wIGQepO=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1303,
+    height: 869,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 8,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV85g5Wrz5_f0CQfFm0CBQZRNiUN_pheMK7FDI0eQvTBSQ1Vd8kxd1z3n3W63M9aQ58r1eh-xYt76Y0CTKPoPyc4qe1WYohdP6eb_vSbrOxKQEH9uMQSH9wP6m4AGonvv-Ol6vaVI026aS29QRIj3nCVF=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1303,
+    height: 869,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 9,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV87jIfmr9Ic2Q8qfWhFGCjakWkgChn71vLFheO1mRk5uXzsglTPHZ36K-LvhR47exjdb7V53DVvPt_nkPWQbQuN8fTTQG35HUAr2d3dXH6tl6WgqTQ15uSN3FdrOtSIqyWuiJBowj39753BoVPFBpk7O=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1303,
+    height: 869,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 10,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV85xssZHOgPtfsdksjArgXMP6NDPxC3fgqsS3SnerHyTUiWZiiiCvIJvEAA2gzrM-3Utsf5exhiFAk4XSnlIV1atXB7Mqiqbg0SOjQmUyaoVJryaG549chSzhrZ6pfMHj2x-cK77c3qdGTOyhaFhkZvb=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1280,
+    height: 864,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 11,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV84cAA69Z4Hb0Paa9pEGfvRsiogi1UgPKoOzWcN2mofcfbkYIhx7bvmpoC9ox-2Cqn3zwTfAEu7fl8zIAWnuDtwsy10wQbCIsoNQEqRZWDsCLaVh4wffZpPUBBzmjimgHVlBGq3W_F4Y-BuatE9Ff5RP=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1208,
+    height: 870,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 12,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV86tqYk_1GD2kbTRSKzJuqPCth0Z-DoCp9c-3RurvHq4dKznep4x8IjFWoe_r2S5CALLkeQaQAhs6XtUARQR5Nf9KOz-QIwGBEIR6RD0UhousBvkK8rMnEurn9lEuFtK1zGB_kLDvSGUrX9f23H2sofG=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1603,
+    height: 780,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 13,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV86Q6-j-it6IAbQFTzeSzk1acqyl2fM-SM2opyzhaJakAgo-odEifVgmwr0nMfq2v8fhL1GK454Bb8o6yPD-HOQ7ucZsbO5OTXatcQfgOiGirzqPA_Te8u9AJEs-efTSQIh8vXN4aSQ97CTFp76nT6Vv=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1140,
+    height: 840,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 14,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV87V9AST5GeBCI-eHkG5eGXEwa_ft7vJTlLNwmL7VZWGlywmquvSwU46JXU5cxR5_C27IWAiaKn4drNVUXHFUQd4px88S7WxOwr0K9dsSzU0dunfQ1ZvlpENbkdtGYFfMbUTyan0JNr78ZdNNCdyvDG9=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1303,
+    height: 720,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 15,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV86sf8HrLwsLczItEES_GaOtE90RQKLH1HE2LmDW73Z1cfGRU8KITOVR1xfBdLtDc-wFc4C1My5-K_YVX1pXN4txOlPctMF9D3vAkK1MwBNbCdSKdwDvLNNBCDOBeiRvvKCE6-sTWVJyNKuvX3hkyyJs=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1303,
+    height: 652,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 16,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV85LYmVtaBpHZCc0o0EeFFc8Gk2ICusZF-CnQIX7lGEIuBqHpEfFbY2qFqHZqBeR-SEPzLEalTnP8hD6vScDCyCzZI95lmHtYayEI1g0X-IuM8k1o-m2-cvYLvkH8dv9u6BVhufL-ZFhtmeG8_83doEr=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1303,
+    height: 450,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 17,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV84p033km8rrlP5TTcwereWv7q53kbQQU4xUoXSCUHVGl4d_Ha71KkRJ_2vxHfSsSIOevEXnnqEnSZrHdvkV7xfQ7SMJlTJYp-t6r3AT81FUkkqfqJIJun1UKp2f1GXk-_-CyAeg7sUsstc_xYo0KOZE=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1303,
+    height: 350,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 18,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV87y7F035CPvfDNfl0yMD4gpSa0RSJgBs8XZVu7n2TDa7NcUjJxD50r99ZBt8bHkroPuoULdpForWhVn38HwP2UIlN_bwapty-7PJ_OfRxWFq9B4z5ZMRfPMf4rzM3IhgJugsLHq_HTzyUOrBxbV63B3=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1640,
+    height: 780,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 19,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV850WT8FXDmnhCmp6YXWodWld3P5pXh4BaDzMMOfTNH3yKOee7UsIudu71yacBXrmw_uwliPZEh6crNm7LyKdRD3-0ssLrXHSGukUS_igD2i2Ml2fEXHFW1XHiL4cxLm1LLFistqjX41fVQaEAdkFt5F=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 900,
+    height: 540,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 20,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV84lA0xQDSObyvAq7SoOdHa-cvGTZ4BK8s_U_26qjXaRDf6uw23Yjvf1fwubZgsq6cBD8PkpOxd2JgLsKFSQ7s_ft6i4T25HPDuIbJ0y0RXvP8whaXv8TvFJsO17uJR-U6EjWl451Vj9kR947C3Mj57a=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1308,
+    height: 764,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 21,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV85rXYkttzLvpF1WVpCym5MTl4dfBtVdWlSZ6Bq2tt1kksYg_sKTVJF_ltEK6R1m7HwcZI62c6DAWVPoiSbpFoQPc1UtpmIyNwnZ-VIZ6U5Kht2Ma3YJTegkTBTp9WSrCRXsSAfcyv1rWM3A2BdY9qAP=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1804,
+    height: 964,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 22,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV86iqgxDFzy0dpRpyTkgutLqQ83BWOqlXk9H5HYS6TGEZOimU7RDS63SlW4DYX8IuWquXbWoT6wdKTHiYGEWD3VL4k_sHKenG1Dgap60UxCR7YbQd3raxpH9MJSODHOkTiLd_FHPjQjifvbXU3TpLt3l=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1604,
+    height: 874,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 23,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV84PNbT4NiZV_h49lDnT-8rjlghNYFtnZ6oYQpgA4k6FbZsUAEXJiigQ7HrgCI2tpPeg4Yg9pHNmb2vwxJG40nFCMW1Em6paIHqkPrNcnZ3nVVqRdwDsl_oJqcUJPp1e9cUnxtxx2-OCaNQqIulfb00E=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1080,
+    height: 720,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 24,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV85AXn-w2evhSLYLCHMle5adi5atPbXmCqIrdvUYceQ3E7pnKjOZ5qcuoEhRiXZKed6U3mr0A9QC6H0skhtQrPkq_dxi-h4OTMdBqfHfynrD8OGS0yCktFm365kw2PWrmJD8qNcu3sdIPia4hL-7ccPy=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1204,
+    height: 640,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 25,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV84HMZUMWYDFM7Vmuo1FTXv4HoeD6WNxnjHm8LvmvG6w088Nk7aWY6IAttvQivX0aHy5WAP4Ef20e-P4ee_DF5cfVnkSFK5IQosflgtz17ETndmqPepClX3uiMDBrIqSV0r-vVBIcmAfFjtg-y9xgs59=w580-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1480,
+    height: 869,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+  {
+    id: 26,
+    src: "https://lh3.googleusercontent.com/pw/ABLVV86SCGS66SJSmsdyBRVK6Z4yDKS73QBYf1NwBMvfm6kHSFLY5nbGz4IAVFg6LWqMDyTCOsyIQmxrJBbutRlioRJniZyK5aIbq4Smrn3KZFOwmuXN6TVCg6A74IOwNwC5v48yqqAIZwLSONTD4-hDwqej=w1303-h869-s-no-gm?authuser=0",
+    alt: "image",
+    width: 1503,
+    height: 840,
+    date: "15th, April 2023",
+    event: "#DevOpsNairobi",
+  },
+];
+
+export default photosData;
diff --git a/src/APP/pages/gallery/sections/ImageCard.jsx b/src/APP/pages/gallery/sections/ImageCard.jsx
new file mode 100644
index 00000000..3e78a4fb
--- /dev/null
+++ b/src/APP/pages/gallery/sections/ImageCard.jsx
@@ -0,0 +1,58 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable prettier/prettier */
+/* eslint-disable linebreak-style */
+/* eslint-disable import/no-unresolved */
+import React, { useState } from "react";
+
+import PhotoAlbum from "react-photo-album";
+
+import Lightbox from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+
+// import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
+// import Slideshow from "yet-another-react-lightbox/plugins/slideshow";
+import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
+import Zoom from "yet-another-react-lightbox/plugins/zoom";
+import "yet-another-react-lightbox/plugins/thumbnails.css";
+
+function ImageCard({ photos }) {
+  const [index, setIndex] = useState(-1);
+  return (
+    <div>
+      <PhotoAlbum
+        photos={photos}
+        layout="masonry"
+        spacing={0}
+        onClick={({ index }) => setIndex(index)}
+        // targetRowHeight={450}
+        renderPhoto={({ wrapperStyle, renderDefaultPhoto }) => (
+          <div style={wrapperStyle} className="relative">
+            {renderDefaultPhoto({ wrapped: true })}
+
+            {/* <div className="absolute top-0 right-0 w-full h-full flex opacity-0 transition-all duration-500 ease-linear hover:opacity-100">
+              <div className="bg-transparent w-1/2 h-full" />
+              <div className="bg-[#00664E] text-white w-1/2 h-full flex items-center justify-center flex-col gap-2">
+                <span className="text-xs font-normal">Jan 12, 2023</span>
+
+                <div className="w-1/5 h-[2px] bg-white rounded-sm" />
+
+                <h4 className="text-lg font-medium text-center">SYT Meetup</h4>
+              </div>
+            </div> */}
+          </div>
+        )}
+      />
+
+      <Lightbox
+        slides={photos}
+        open={index >= 0}
+        index={index}
+        close={() => setIndex(-1)}
+        // enable optional lightbox plugins
+        plugins={[Thumbnails, Zoom]}
+      />
+    </div>
+  );
+}
+
+export default ImageCard;
diff --git a/src/APP/pages/gallery/sections/ImageCardss.jsx b/src/APP/pages/gallery/sections/ImageCardss.jsx
new file mode 100644
index 00000000..d3746e86
--- /dev/null
+++ b/src/APP/pages/gallery/sections/ImageCardss.jsx
@@ -0,0 +1,28 @@
+// import React from "react";
+
+// function ImageCard({ photo }) {
+//   const { width, src, alt, date, event, height } = photo;
+//   return (
+//     <div className={`relative border w-[${width}px]`}>
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="aspect-video object-cover"
+//         loading="lazy"
+//       />
+
+//       <div className="absolute top-0 right-0 w-full h-full flex opacity-0 transition-all duration-500 ease-linear hover:opacity-100">
+//         <div className="bg-transparent w-1/2 h-full" />
+//         <div className="bg-[#00664E] text-white w-1/2 h-full flex items-center justify-center flex-col gap-2">
+//           <span className="text-xs font-normal">{date}</span>
+
+//           <div className="w-1/5 h-[2px] bg-white rounded-sm" />
+
+//           <h4 className="text-lg font-medium text-center">{event}</h4>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// }
+
+// export default ImageCard;
diff --git a/src/router/index.jsx b/src/router/index.jsx
index 9f862d5a..8fd7a267 100644
--- a/src/router/index.jsx
+++ b/src/router/index.jsx
@@ -24,6 +24,7 @@ import {
   Error404,
   Error400,
   Error403,
+  GalleryPage,
 } from "../APP";
 // import {
 //   AllChaptersPage,
@@ -62,6 +63,10 @@ const router = createBrowserRouter([
         path: "/community",
         element: <CommunityPage />,
       },
+      {
+        path: "/Gallery",
+        element: <GalleryPage />,
+      },
       {
         path: "/blogs",
         element: <Blogs />,
diff --git a/src/utilities/processPhotos.jsx b/src/utilities/processPhotos.jsx
new file mode 100644
index 00000000..d82da84c
--- /dev/null
+++ b/src/utilities/processPhotos.jsx
@@ -0,0 +1,32 @@
+const breakpoints = [3840, 2400, 1080, 640, 384, 256, 128, 96, 64, 48];
+
+const processPhotos = (photoArr) =>
+  photoArr.map((photo) => {
+    const width = breakpoints[0];
+    const height = (photo.height / photo.width) * width;
+    const { alt } = photo;
+    const { date } = photo;
+    const { event } = photo;
+
+    return {
+      key: photo.id,
+      src: photo.src,
+      alt,
+      width,
+      height,
+      date,
+      event,
+      srcSet: breakpoints.map((breakpoint) => {
+        const height = Math.round((photo.height / photo.width) * breakpoint);
+        return {
+          id: photo.id,
+          src: photo.src,
+          alt,
+          width: breakpoint,
+          height,
+        };
+      }),
+    };
+  });
+
+export default processPhotos;