diff --git a/app/event/page.tsx b/app/event/page.tsx
index 11b9dbf..cb4d7b6 100644
--- a/app/event/page.tsx
+++ b/app/event/page.tsx
@@ -30,7 +30,7 @@ export default function EventPage() {
           </p>
         </div>
         <div className="px-10 pb-8 md:px-24 md:pb-20">
-          <Masonry category={1} />
+          <Masonry category="event" />
         </div>
         <div className="bg-gray-500">
           <h3 className="pt-8 md:pt-20 mb-3 uppercase text-white tracking-wide text-xl lg:text-2xl">
diff --git a/app/maternity/page.tsx b/app/maternity/page.tsx
index d6ab159..51640d7 100644
--- a/app/maternity/page.tsx
+++ b/app/maternity/page.tsx
@@ -30,7 +30,7 @@ export default function MaternityPage() {
           </p>
         </div>
         <div className="px-10 pb-8 md:px-24 md:pb-20">
-          <Masonry category={2} />
+          <Masonry category="maternity" />
         </div>
         <div className="bg-gray-500">
           <h3 className="pt-8 md:pt-20 mb-3 uppercase text-white tracking-wide text-xl lg:text-2xl">
diff --git a/app/newBorn/page.tsx b/app/newBorn/page.tsx
index 9688f81..b423d34 100644
--- a/app/newBorn/page.tsx
+++ b/app/newBorn/page.tsx
@@ -29,7 +29,7 @@ export default function NewBornPage() {
           </p>
         </div>
         <div className="px-10 pb-8 md:px-24 md:pb-20">
-          <Masonry category={3} />
+          <Masonry category="newborn" />
         </div>
         <div className="bg-gray-500">
           <h3 className="pt-8 md:pt-20 mb-3 uppercase text-white tracking-wide text-xl lg:text-2xl">
diff --git a/app/wedding/page.tsx b/app/wedding/page.tsx
index 0d10382..5b99d36 100644
--- a/app/wedding/page.tsx
+++ b/app/wedding/page.tsx
@@ -31,7 +31,7 @@ export default function WeddingPage() {
           </p>
         </div>
         <div className="px-10 pb-8 md:px-24 md:pb-20">
-          <Masonry category={4} />
+          <Masonry category="wedding" />
         </div>
         <div className="bg-gray-500">
           <h3 className="pt-8 md:pt-20 mb-3 uppercase text-white tracking-wide text-xl lg:text-2xl">
diff --git a/components/masonry/Masonry.tsx b/components/masonry/Masonry.tsx
index c5c1bc9..10784ef 100644
--- a/components/masonry/Masonry.tsx
+++ b/components/masonry/Masonry.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import PhotoAlbum from "react-photo-album";
+// import PhotoAlbum from "react-photo-album";
+import Gallery from "react-photo-album";
 
 import { useState } from "react";
 import NextJsImage from "./NextJsImage";
-import photos, { photos2, photos3, photos4 } from "./photos";
+import photos, { photos3, weddingPhotos, maternityPhotos } from "./photos";
 import Lightbox from "yet-another-react-lightbox";
 import "yet-another-react-lightbox/styles.css";
 
@@ -12,7 +13,7 @@ import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
 import "yet-another-react-lightbox/plugins/thumbnails.css";
 
 type MasonryProps = {
-  category: number;
+  category: string;
 };
 
 export default function Masonry({ category }: MasonryProps) {
@@ -29,16 +30,16 @@ export default function Masonry({ category }: MasonryProps) {
     setIndex(-1);
   };
 
-  const handleCategory = (cat: number) => {
+  const handleCategory = (cat: string) => {
     switch (cat) {
-      case 1:
+      case "event":
         return photos;
-      case 2:
-        return photos2;
-      case 3:
+      case "maternity":
+        return maternityPhotos;
+      case "newborn":
         return photos3;
-      case 4:
-        return photos4;
+      case "wedding":
+        return weddingPhotos;
       default:
         break;
     }
@@ -46,7 +47,7 @@ export default function Masonry({ category }: MasonryProps) {
 
   return (
     <>
-      <PhotoAlbum
+      {/* <PhotoAlbum
         photos={handleCategory(category) as any}
         layout="rows"
         renderPhoto={NextJsImage}
@@ -60,6 +61,20 @@ export default function Masonry({ category }: MasonryProps) {
             { viewport: "(max-width: 1199px)", size: "calc(100vw - 20px)" },
           ],
         }}
+      /> */}
+
+      <Gallery
+        layout="masonry"
+        columns={(containerWidth: number) => {
+          let columns = 1;
+          if (containerWidth >= 500) columns = 2;
+          if (containerWidth >= 900) columns = 3;
+          return columns;
+        }}
+        onClick={({ index: current }) => handleLightBox(current)}
+        photos={handleCategory(category) as any}
+        spacing={32}
+        renderPhoto={NextJsImage}
       />
 
       <Lightbox
diff --git a/components/masonry/photos.ts b/components/masonry/photos.ts
index e980981..0ebea97 100644
--- a/components/masonry/photos.ts
+++ b/components/masonry/photos.ts
@@ -1,3 +1,5 @@
+"use client"
+
 export type unsplashPhoto = {
   id: string;
   width: number;
@@ -35,14 +37,6 @@ const unsplashPhotos = [
   { id: "xKhtkhc9HbQ", width: 1080, height: 1440 },
 ];
 
-const unsplashPhotos2 = [
-  { id: "Jztmx9yqjBw", width: 1080, height: 607 },
-  { id: "-heLWtuAN3c", width: 1080, height: 608 },
-  { id: "xOigCUcFdA8", width: 1080, height: 720 },
-  { id: "1azAjl8FTnU", width: 1080, height: 1549 },
-  { id: "ALrCdq-ui_Q", width: 1080, height: 720 },
-];
-
 const unsplashPhotos3 = [
   { id: "twukN12EN7c", width: 1080, height: 694 },
   { id: "9UjEyzA6pP4", width: 1080, height: 1620 },
@@ -62,9 +56,84 @@ const unsplashPhotos4 = [
   { id: "xKhtkhc9HbQ", width: 1080, height: 1440 },
 ];
 
-const photos = unsplashingPhoto(unsplashPhotos)
-export const photos2 = unsplashingPhoto(unsplashPhotos2)
-export const photos3 = unsplashingPhoto(unsplashPhotos3)
-export const photos4 = unsplashingPhoto(unsplashPhotos4)
+export const weddingPhotos = [
+  {
+    src: "/images/photos/wedding/wedding_1.png",
+    alt: "Wedding 1",
+    caption: "Wedding 1",
+    width: 900, height: 900
+  },
+  {
+    src: "/images/photos/wedding/wedding_2.png",
+    alt: "Wedding 2",
+    caption: "Wedding 2",
+    width: 1080, height: 1620
+  },
+  {
+    src: "/images/photos/wedding/wedding_3.png",
+    alt: "Wedding 3",
+    caption: "Wedding 3",
+    width: 1024, height: 1024
+  },
+  {
+    src: "/images/photos/wedding/wedding_4.png",
+    alt: "Wedding 4",
+    caption: "Wedding 4",
+    width: 1080, height: 1080
+  },
+  {
+    src: "/images/photos/wedding/wedding_5.png",
+    alt: "Wedding 5",
+    caption: "Wedding 5",
+    width: 1080, height: 1080
+  },
+];
+
+export const maternityPhotos = [
+  {
+    src: "/images/photos/maternity/maternity_1.png",
+    alt: "Maternity 1",
+    caption: "Maternity 1",
+    width: 900, height: 900
+  },
+  {
+    src: "/images/photos/maternity/maternity_2.png",
+    alt: "Maternity 2",
+    caption: "Maternity 2",
+    width: 1080, height: 1620
+  },
+  {
+    src: "/images/photos/maternity/maternity_3.png",
+    alt: "Maternity 3",
+    caption: "Maternity 3",
+    width: 1024, height: 1024
+  },
+  {
+    src: "/images/photos/maternity/maternity_4.png",
+    alt: "Maternity 4",
+    caption: "Maternity 4",
+    width: 1080, height: 1080
+  },
+  {
+    src: "/images/photos/maternity/maternity_5.png",
+    alt: "Maternity 5",
+    caption: "Maternity 5",
+    width: 1080, height: 1080
+  },
+  {
+    src: "/images/photos/maternity/maternity_6.png",
+    alt: "Maternity 6",
+    caption: "Maternity 6",
+    width: 1080, height: 1620
+  },
+];
+
+export const lightboxImages = weddingPhotos.map(({ src, alt, caption }) => ({
+  src,
+  alt,
+  caption
+}));
 
+const photos = unsplashingPhoto(unsplashPhotos);
+export const photos3 = unsplashingPhoto(unsplashPhotos3);
 export default photos;
diff --git a/package-lock.json b/package-lock.json
index 656eca3..1c49448 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "eslint": "8.26.0",
         "next": "^14.1.0",
         "next-i18next": "^13.0.3",
+        "nodemailer": "^6.9.9",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.50.1",
@@ -32,6 +33,7 @@
       },
       "devDependencies": {
         "@babel/core": "^7.20.7",
+        "@types/nodemailer": "^6.4.14",
         "autoprefixer": "^10.4.13",
         "eslint-config-next": "^14.1.0",
         "postcss": "^8.4.18",
@@ -787,6 +789,15 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
       "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg=="
     },
+    "node_modules/@types/nodemailer": {
+      "version": "6.4.14",
+      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-6.4.14.tgz",
+      "integrity": "sha512-fUWthHO9k9DSdPCSPRqcu6TWhYyxTBg382vlNIttSe9M7XfsT06y0f24KHXtbnijPGGRIcVvdKHTNikOI6qiHA==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -4135,6 +4146,14 @@
       "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
       "dev": true
     },
+    "node_modules/nodemailer": {
+      "version": "6.9.11",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.11.tgz",
+      "integrity": "sha512-UiAkgiERuG94kl/3bKfE8o10epvDnl0vokNEtZDPTq9BWzIl6EFT9336SbIT4oaTBD8NmmUTLsQyXHV82eXSWg==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/nopt": {
       "version": "7.2.1",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
diff --git a/package.json b/package.json
index 9ca3f7b..ea63e27 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "eslint": "8.26.0",
     "next": "^14.1.0",
     "next-i18next": "^13.0.3",
+    "nodemailer": "^6.9.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.50.1",
@@ -34,6 +35,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.7",
+    "@types/nodemailer": "^6.4.14",
     "autoprefixer": "^10.4.13",
     "eslint-config-next": "^14.1.0",
     "postcss": "^8.4.18",
diff --git a/public/images/photos/maternity/maternity_1.png b/public/images/photos/maternity/maternity_1.png
new file mode 100644
index 0000000..6d4f6f5
Binary files /dev/null and b/public/images/photos/maternity/maternity_1.png differ
diff --git a/public/images/photos/maternity/maternity_2.png b/public/images/photos/maternity/maternity_2.png
new file mode 100644
index 0000000..620a09d
Binary files /dev/null and b/public/images/photos/maternity/maternity_2.png differ
diff --git a/public/images/photos/maternity/maternity_3.png b/public/images/photos/maternity/maternity_3.png
new file mode 100644
index 0000000..5f5d41e
Binary files /dev/null and b/public/images/photos/maternity/maternity_3.png differ
diff --git a/public/images/photos/maternity/maternity_4.png b/public/images/photos/maternity/maternity_4.png
new file mode 100644
index 0000000..0147e46
Binary files /dev/null and b/public/images/photos/maternity/maternity_4.png differ
diff --git a/public/images/photos/maternity/maternity_5.png b/public/images/photos/maternity/maternity_5.png
new file mode 100644
index 0000000..d0af2d2
Binary files /dev/null and b/public/images/photos/maternity/maternity_5.png differ
diff --git a/public/images/photos/maternity/maternity_6.png b/public/images/photos/maternity/maternity_6.png
new file mode 100644
index 0000000..e8e6ed6
Binary files /dev/null and b/public/images/photos/maternity/maternity_6.png differ
diff --git a/public/images/photos/wedding/wedding_1.png b/public/images/photos/wedding/wedding_1.png
new file mode 100644
index 0000000..8f62caf
Binary files /dev/null and b/public/images/photos/wedding/wedding_1.png differ
diff --git a/public/images/photos/wedding/wedding_2.png b/public/images/photos/wedding/wedding_2.png
new file mode 100644
index 0000000..598b90f
Binary files /dev/null and b/public/images/photos/wedding/wedding_2.png differ
diff --git a/public/images/photos/wedding/wedding_3.png b/public/images/photos/wedding/wedding_3.png
new file mode 100644
index 0000000..4f8cf02
Binary files /dev/null and b/public/images/photos/wedding/wedding_3.png differ
diff --git a/public/images/photos/wedding/wedding_4.png b/public/images/photos/wedding/wedding_4.png
new file mode 100644
index 0000000..8b185ab
Binary files /dev/null and b/public/images/photos/wedding/wedding_4.png differ
diff --git a/public/images/photos/wedding/wedding_5.png b/public/images/photos/wedding/wedding_5.png
new file mode 100644
index 0000000..4c54d30
Binary files /dev/null and b/public/images/photos/wedding/wedding_5.png differ