diff --git a/.gitignore b/.gitignore
index 55175ef..56f72c6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
diff --git a/app/api/contact/route.js b/app/api/contact/route.js
new file mode 100644
index 0000000..8b34c11
--- /dev/null
+++ b/app/api/contact/route.js
@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from 'next/server';
+import nodemailer from 'nodemailer';
+
+export async function POST(request) {
+        require('dotenv').config()
+
+        let body = await request.formData();
+        let visitorname = body.get('visitorname');
+        let email = body.get('email');
+        let message = body.get('message');
+
+        const transporter = nodemailer.createTransport({
+          port: 465,
+          host: "smtp.gmail.com",
+          auth: {
+            user: process.env.MY_EMAIL,
+            pass: process.env.MY_PASSWORD,
+          },
+          secure: true,
+        })
+        const mailData = {
+          from: email,
+          to: 'misterjulius17@gmail.com',
+          subject: `Message From ${visitorname}`,
+          text: message + " | Sent from: " + email,
+          html: `<div>${message}</div><p>Sent from:
+          ${email}</p>`
+        }
+        transporter.sendMail(mailData, function (err, info) {
+          if(err)
+            console.log(err)
+          else
+            console.log(info)
+        })
+        return NextResponse.json({message: 'all good'})
+      }
diff --git a/app/api/newsletter/route.js b/app/api/newsletter/route.js
new file mode 100644
index 0000000..eb52218
--- /dev/null
+++ b/app/api/newsletter/route.js
@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from 'next/server';
+import nodemailer from 'nodemailer';
+
+export async function POST(request) {
+        require('dotenv').config()
+
+        let body = await request.formData();
+        let email = body.get('email');
+
+        const transporter = nodemailer.createTransport({
+          port: 465,
+          host: "smtp.gmail.com",
+          auth: {
+            user: process.env.MY_EMAIL,
+            pass: process.env.MY_PASSWORD,
+          },
+          secure: true,
+        })
+        const mailData = {
+          from: email,
+          to: 'misterjulius17@gmail.com',
+          subject: `Newsletter Request From ${email}`,
+          text: "Hello PyCon Uganda, kindly add me: " + email,
+          html: `<p>Hello PyCon Uganda, kindly add me: 
+          ${email}</p>`
+        }
+        transporter.sendMail(mailData, function (err, info) {
+          if(err)
+            console.log(err)
+          else
+            console.log(info)
+        })
+        return NextResponse.json({message: 'all good'})
+      }
diff --git a/app/api/sponsor/route.js b/app/api/sponsor/route.js
new file mode 100644
index 0000000..e5f2a3c
--- /dev/null
+++ b/app/api/sponsor/route.js
@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from 'next/server';
+import nodemailer from 'nodemailer';
+
+export async function POST(request) {
+        require('dotenv').config()
+
+        let body = await request.formData();
+        let visitorname = body.get('visitorname');
+        let email = body.get('email');
+        let message = body.get('message');
+
+        const transporter = nodemailer.createTransport({
+          port: 465,
+          host: "smtp.gmail.com",
+          auth: {
+            user: process.env.MY_EMAIL,
+            pass: process.env.MY_PASSWORD,
+          },
+          secure: true,
+        })
+        const mailData = {
+          from: email,
+          to: 'misterjulius17@gmail.com',
+          subject: `Sponsorship Request From ${visitorname}`,
+          text: message + " | Sent from: " + email,
+          html: `<div>${message}</div><p>Sent from:
+          ${email}</p>`
+        }
+        transporter.sendMail(mailData, function (err, info) {
+          if(err)
+            console.log(err)
+          else
+            console.log(info)
+        })
+        return NextResponse.json({message: 'all good'})
+      }
diff --git a/app/contact/page.jsx b/app/contact/page.jsx
index 75e10b5..78f6b0a 100644
--- a/app/contact/page.jsx
+++ b/app/contact/page.jsx
@@ -1,6 +1,42 @@
-import { PYCONUG_EMAIL } from "@/utils/constants";
+'use client';
+
+import { useState } from "react";
+import FormData from 'form-data';
 
 export default function ContactPage() {
+  const form = new FormData();
+  const [formData, setFormData] = useState(form);
+  const [successMessage, setSuccessMessage] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const handleFormSubmit = async (event) => {
+    event.preventDefault();
+
+    formData.append('visitorname', event.target.visitorname.value);
+    formData.append('email', event.target.email.value);
+    formData.append('message',event.target.message.value);
+
+    // Display formData in console (for debugging)
+    //console.log([...formData]);
+
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        body: formData,
+      });
+      if (response.ok) {
+        setSuccessMessage('Your message has been received, we shall reach out soon!');
+        setErrorMessage('');
+      } else {
+        setErrorMessage('Something went wrong, please try again');
+        setSuccessMessage('');
+      }
+    } catch (err) {
+      setErrorMessage('An error occurred while submitting the form');
+      setSuccessMessage('');
+    }
+  };
+
   return (
     <>
       <section className="flex bg-cyan-900 text-zinc-300">
@@ -11,7 +47,7 @@ export default function ContactPage() {
             </h1>
             <p className="mt-4 sm:text-xl text-justify mx-5">
               Interested in sponsoring or have a question? We would love to hear
-              from you.
+              from you
             </p>
           </div>
         </div>
@@ -20,21 +56,20 @@ export default function ContactPage() {
         <div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
           
           <form
-            action={`mailto:${PYCONUG_EMAIL}`}
-            method="post"
-            encType="multipart/form-data"
+            onSubmit={handleFormSubmit}
             className="space-y-8"
           >
             <div>
               <label
-                htmlFor="name"
+                htmlFor="visitorname"
                 className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
-                Your Name
+                Name
               </label>
               <input
                 type="text"
-                id="name"
+                id="visitorname"
+                name="visitorname"
                 className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
                 required
               />
@@ -49,6 +84,7 @@ export default function ContactPage() {
               <input
                 type="email"
                 id="email"
+                name="name"
                 className="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
                 required
               />
@@ -63,13 +99,14 @@ export default function ContactPage() {
               <textarea
                 id="message"
                 rows="6"
+                name="message"
                 className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                placeholder="Make your interest known..."
+                placeholder="Send us a message..."
               ></textarea>
             </div>
             <button
               type="submit"
-              className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-primary-700 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+              className="hover:bg-pyconug-lightBlue border-2 hover:text-white border-pyconug-lightBlue py-2 px-10 m-2  rounded-3xl"
             >
               Send message
             </button>
diff --git a/app/sponsors/page.jsx b/app/sponsors/page.jsx
index ffa0c3e..0592132 100644
--- a/app/sponsors/page.jsx
+++ b/app/sponsors/page.jsx
@@ -1,6 +1,41 @@
-import { PYCONUG_EMAIL } from "@/utils/constants";
+'use client';
+
+import { useState } from "react";
+import FormData from 'form-data';
 
 export default function SponsorsPage() {
+  const form = new FormData();
+  const [formData, setFormData] = useState(form);
+  const [successMessage, setSuccessMessage] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const handleFormSubmit = async (event) => {
+    event.preventDefault();
+
+    formData.append('visitorname', event.target.visitorname.value);
+    formData.append('email', event.target.email.value);
+    formData.append('message',event.target.message.value);
+
+    // Display formData in console (for debugging)
+    //console.log([...formData]);
+
+    try {
+      const response = await fetch('/api/sponsor', {
+        method: 'POST',
+        body: formData,
+      });
+      if (response.ok) {
+        setSuccessMessage('Thank you for showing interest to Sponsor PyCon Uganda 2023!');
+        setErrorMessage('');
+      } else {
+        setErrorMessage('Something went wrong, please try again');
+        setSuccessMessage('');
+      }
+    } catch (err) {
+      setErrorMessage('An error occurred while submitting the form');
+      setSuccessMessage('');
+    }
+  };
   return (
     <>
       <section className="flex bg-cyan-900 text-zinc-300">
@@ -507,22 +542,25 @@ export default function SponsorsPage() {
           <p className="mb-8 lg:mb-16 font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">
             Interested in sponsoring? We would love to hear from you.
           </p>
+
+          {successMessage && <p style={{ color: 'green' }}>{successMessage}</p>}
+          {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+          
           <form
-            action={`mailto:${PYCONUG_EMAIL}`}
-            method="post"
-            encType="multipart/form-data"
+            onSubmit={handleFormSubmit}
             className="space-y-8"
           >
             <div>
               <label
-                htmlFor="name"
+                htmlFor="visitorname"
                 className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
-                Your Name
+                Name or Company or Organization
               </label>
               <input
                 type="text"
-                id="name"
+                id="visitorname"
+                name="visitorname"
                 className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
                 required
               />
@@ -537,6 +575,7 @@ export default function SponsorsPage() {
               <input
                 type="email"
                 id="email"
+                name="name"
                 className="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
                 required
               />
@@ -551,13 +590,14 @@ export default function SponsorsPage() {
               <textarea
                 id="message"
                 rows="6"
+                name="message"
                 className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                 placeholder="Make your interest known..."
               ></textarea>
             </div>
             <button
               type="submit"
-              className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-primary-700 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+              className="hover:bg-pyconug-lightBlue border-2 hover:text-white border-pyconug-lightBlue py-2 px-10 m-2  rounded-3xl"
             >
               Send message
             </button>
diff --git a/components/home/sections/contact.js b/components/home/sections/contact.js
index d6d85bb..cfb4e0a 100644
--- a/components/home/sections/contact.js
+++ b/components/home/sections/contact.js
@@ -1,6 +1,42 @@
+'use client';
+
+import { useState } from "react";
+import FormData from 'form-data';
 import { PYCONUG_EMAIL } from "@/utils/constants";
 
 export default function Contact() {
+  const form = new FormData();
+  const [formData, setFormData] = useState(form);
+  const [successMessage, setSuccessMessage] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const handleFormSubmit = async (event) => {
+    event.preventDefault();
+
+    formData.append('visitorname', event.target.visitorname.value);
+    formData.append('email', event.target.email.value);
+    formData.append('message',event.target.message.value);
+
+    // Display formData in console (for debugging)
+    //console.log([...formData]);
+
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        body: formData,
+      });
+      if (response.ok) {
+        setSuccessMessage('Your message has been received, we shall reach out soon');
+        setErrorMessage('');
+      } else {
+        setErrorMessage('Something went wrong, please try again');
+        setSuccessMessage('');
+      }
+    } catch (err) {
+      setErrorMessage('An error occurred while submitting the form');
+      setSuccessMessage('');
+    }
+  };
   return (
     <section>
       <div className="mx-auto max-w-screen-xl px-4 py-16 lg:block lg:h-85 lg:items-center">
@@ -36,22 +72,25 @@ export default function Contact() {
           <p className="mb-8 lg:mb-16 font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">
             Reach out to us in case of queries.
           </p>
+
+        {successMessage && <p style={{ color: 'green' }}>{successMessage}</p>}
+        {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+
           <form
-            action={`mailto:${PYCONUG_EMAIL}`}
-            method="post"
-            encType="multipart/form-data"
+            onSubmit={handleFormSubmit}
             className="space-y-8"
           >
             <div>
               <label
-                htmlFor="name"
+                htmlFor="visitorname"
                 className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
-                Your Name
+                Name
               </label>
               <input
                 type="text"
-                id="name"
+                id="visitorname"
+                name="visitorname"
                 className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
                 required
               />
@@ -66,6 +105,7 @@ export default function Contact() {
               <input
                 type="email"
                 id="email"
+                name="name"
                 className="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
                 required
               />
@@ -80,8 +120,9 @@ export default function Contact() {
               <textarea
                 id="message"
                 rows="6"
+                name="message"
                 className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                placeholder="Leave your comment..."
+                placeholder="Send us a message..."
               ></textarea>
             </div>
             <button
diff --git a/components/home/sections/newsletter.js b/components/home/sections/newsletter.js
index 2ee1c01..40ae11b 100644
--- a/components/home/sections/newsletter.js
+++ b/components/home/sections/newsletter.js
@@ -1,13 +1,39 @@
 "use client";
 
 import { useState } from "react";
+import FormData from 'form-data';
 
 export default function Newsletter() {
-  const [email, setEmail] = useState("");
+  const formData = new URLSearchParams();
+  const [successMessage, setSuccessMessage] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
-  function HandleSubmit(e) {
-    window.location.href = `mailto:pycon-uganda+subscribe@googlegroups.com?subject=Subscribe%20to%20PyCon%20Uganda%20Newsletter`;
-  }
+  const handleFormSubmit = async (event) => {
+    event.preventDefault();
+
+    formData.append('email', event.target.email.value);
+
+    try {
+      const response = await fetch('/api/newsletter', {
+        method: 'POST',
+        body: formData.toString(),
+      });
+      if (response.ok) {
+        setSuccessMessage('Congrats Pythonista, You are now ready to receive all updates!');
+        setErrorMessage('');
+      } else {
+        setErrorMessage('Something went wrong, please try again');
+        console.log(response);
+        setSuccessMessage('');
+      }
+    } catch (err) {
+      setErrorMessage('An error occurred while submitting the form');
+      setSuccessMessage('');
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   return (
     <section>
@@ -20,22 +46,25 @@ export default function Newsletter() {
             <p className="text-base p-0 mb-4 font-medium">
               Please subscribe to receive updates.
             </p>
-            <form onSubmit={HandleSubmit}>
+
+            {successMessage && <p style={{ color: 'green' }}>{successMessage}</p>}
+            {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+
+            <form onSubmit={handleFormSubmit}>
               <div className="justify-center">
                 <div className="col-span-10 block md:flex">
                   <input
-                    type="text"
+                    type="email"
+                    id="email"
+                    name="email"
                     className="border rounded-3xl py-2 px-10 m-2 border-pyconug-lightBlue"
                     placeholder="Enter your Email"
-                    onChange={(e) => {
-                      setEmail(e.target.value);
-                    }}
                   />
                   <button
-                    type="submit"
+                    type="submit" disabled={isLoading}
                     className="hover:bg-pyconug-lightBlue border-2 hover:text-white border-pyconug-lightBlue py-2 px-10 m-2  rounded-3xl"
                   >
-                    Subscribe
+                    {isLoading ? 'Subscribing...' : 'Subscribe'}
                   </button>
                 </div>
               </div>
diff --git a/package-lock.json b/package-lock.json
index 81acfc9..a0b39a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,12 @@
       "version": "0.1.0",
       "dependencies": {
         "@headlessui/react": "^1.7.15",
+        "dotenv": "^16.3.1",
         "eslint": "8.35.0",
         "eslint-config-next": "13.2.1",
+        "form-data": "^4.0.0",
         "next": "13.2.1",
+        "nodemailer": "^6.9.4",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "swiper": "^10.0.4",
@@ -1148,6 +1151,11 @@
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
       "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.13",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
@@ -1560,6 +1568,17 @@
       "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -1740,6 +1759,14 @@
       "integrity": "sha512-+uO4+qr7msjNNWKYPHqN/3+Dx3NFkmIzayk2L1MyZQlvgZb/J1A0fo410dpKrN2SnqFjt8n4JL8fDJE0wIgjFQ==",
       "dev": true
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/denque": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
@@ -1820,6 +1847,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
+      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/motdotla/dotenv?sponsor=1"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.313",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.313.tgz",
@@ -2593,6 +2631,19 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -3679,6 +3730,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
@@ -3947,6 +4017,14 @@
         "url": "https://github.com/sponsors/antelle"
       }
     },
+    "node_modules/nodemailer": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.4.tgz",
+      "integrity": "sha512-CXjQvrQZV4+6X5wP6ZIgdehJamI63MFoYFGGPtHudWym9qaEHDNdPzaj5bfMCvxG1vhAileSWW90q7nL0N36mA==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -6377,6 +6455,11 @@
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
       "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag=="
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "autoprefixer": {
       "version": "10.4.13",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
@@ -6656,6 +6739,14 @@
       "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
       "dev": true
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -6792,6 +6883,11 @@
       "integrity": "sha512-+uO4+qr7msjNNWKYPHqN/3+Dx3NFkmIzayk2L1MyZQlvgZb/J1A0fo410dpKrN2SnqFjt8n4JL8fDJE0wIgjFQ==",
       "dev": true
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "denque": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
@@ -6854,6 +6950,11 @@
         "esutils": "^2.0.2"
       }
     },
+    "dotenv": {
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
+      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ=="
+    },
     "electron-to-chromium": {
       "version": "1.4.313",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.313.tgz",
@@ -7438,6 +7539,16 @@
         "is-callable": "^1.1.3"
       }
     },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
     "fraction.js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -8207,6 +8318,19 @@
         "picomatch": "^2.3.1"
       }
     },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
     "mimic-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
@@ -8377,6 +8501,11 @@
       "integrity": "sha512-LN4fydt9TqhZhThkZIVQnF9cwjU3qmUH9h78Mx/K7d3VvfRqqwthLwJEUOEL0QPZ0XQmNN7be5Ggit5+4dq3Bw==",
       "dev": true
     },
+    "nodemailer": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.4.tgz",
+      "integrity": "sha512-CXjQvrQZV4+6X5wP6ZIgdehJamI63MFoYFGGPtHudWym9qaEHDNdPzaj5bfMCvxG1vhAileSWW90q7nL0N36mA=="
+    },
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
diff --git a/package.json b/package.json
index afeef9e..a473a41 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,12 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.15",
+    "dotenv": "^16.3.1",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.1",
+    "form-data": "^4.0.0",
     "next": "13.2.1",
+    "nodemailer": "^6.9.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "swiper": "^10.0.4",