diff --git a/package-lock.json b/package-lock.json
index fd6c89e..1f91aae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
         "next": "14.2.5",
         "next-client-cookies": "^1.1.1",
         "next-sitemap": "^4.2.3",
+        "nodemailer": "^6.9.15",
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^5.2.1",
@@ -3873,6 +3874,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/nodemailer": {
+      "version": "6.9.15",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.15.tgz",
+      "integrity": "sha512-AHf04ySLC6CIfuRtRiEYtGEXgRfa6INgWGluDhnxTZhHSKvrBu7lc1VVchQ0d8nPc4cFaZoPq8vkyNoZr0TpGQ==",
+      "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",
diff --git a/package.json b/package.json
index 0fa4c9d..0902ebd 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "next": "14.2.5",
     "next-client-cookies": "^1.1.1",
     "next-sitemap": "^4.2.3",
+    "nodemailer": "^6.9.15",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.2.1",
diff --git a/src/app/api/sendEmail/route.js b/src/app/api/sendEmail/route.js
new file mode 100644
index 0000000..707cc94
--- /dev/null
+++ b/src/app/api/sendEmail/route.js
@@ -0,0 +1,56 @@
+import { NextRequest, NextResponse } from 'next/server';
+import nodemailer from 'nodemailer';
+
+export async function POST(req) {
+  try {
+    const body = await req.json();
+    const { name, email, message, contact, organisation, messageType } = body;
+    console.log(messageType);
+    
+    // Determine if it's a bug or a message
+    const typeTitle = messageType==="Message" ?  'Message from User': 'Bug Report from User';
+    const typeMessage = messageType==="Message" ? 'Message' : 'Message/Issue';
+
+    const transporter = nodemailer.createTransport({
+      service: 'gmail',
+      auth: {
+        user: process.env.EMAIL_USER,
+        pass: process.env.EMAIL_PASSWORD,
+      },
+    });
+
+    const htmlContent = `
+      <div style="background-color:#f4f4f4;padding:20px;">
+      <div style="max-width:600px;margin:auto;background-color:white;padding:20px;border-radius:10px;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);">
+          <p style="margin-top: 20px; font-size: 12px; color: #777;">
+            This message was sent via the <strong>IIITV Coding Club Website</strong>.
+          </p>
+          <h1 style="background-color:#f88474;color:white;padding:10px;border-top-left-radius:10px;border-top-right-radius:10px;">${typeTitle}</h1>
+          <p><strong>Name:</strong> ${name}</p>
+          <p><strong>Email:</strong> ${email}</p>
+          <p><strong>Contact No.:</strong> ${contact}</p>
+          <p><strong>Organisation:</strong> ${organisation}</p>
+          <div style="background-color:#f9f9f9;padding:10px;border-radius:8px;margin:10px 0;">
+            <p><strong>${typeMessage}:</strong></p>
+            <p>${message}</p>
+          </div>
+          <a href="mailto:${email}" style="display:inline-block;background-color:#f88474;color:white;padding:5px 20px;border-radius:8px;text-decoration:none;margin-top:20px;">Reply to User</a>
+        </div>
+      </div>
+    `;
+
+    const mailOptions = {
+      from: email,
+      to: 'codingclub@iiitvadodara.ac.in',
+      subject: `${typeTitle}: ${name}`,
+      html: htmlContent,
+    };
+
+    await transporter.sendMail(mailOptions);
+
+    return NextResponse.json({ success: true, message: 'Email sent successfully' });
+  } catch (error) {
+    console.error('❌ Error sending email:', error);
+    return NextResponse.json({ success: false, message: 'Failed to send email', error: error.message }, { status: 500 });
+  }
+}
diff --git a/src/app/contact_us/page.jsx b/src/app/contact_us/page.jsx
index e599f5c..42308e5 100644
--- a/src/app/contact_us/page.jsx
+++ b/src/app/contact_us/page.jsx
@@ -10,6 +10,9 @@ import "./styles.css";
 
 import { Montserrat } from "next/font/google";
 
+import axios from "axios";
+import Alert from "@/components/ui/alert";
+
 const montserratFont = Montserrat({
   weight: ["100", "200", "400", "600"],
   subsets: ["latin"],
@@ -19,7 +22,18 @@ export default function Page() {
   const [messageOrBugDropdown, setMessageOrBugDropdown] = useState(false);
   const [messageOrBug, setMessageOrBug] = useState("Message");
 
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    contact: '',
+    organisation: '',
+    messageType: 'Message', // Initialize with 'Message' by default
+    message: '',
+  });
+
+
   const [formSubmitted, setFormSubmitted] = useState(false);
+  const [status, setStatus] = useState('');
 
   const linkedInLink = "https://www.linkedin.com/company/iiitvcc/";
   const twitterLink = "https://x.com/iiitvcc";
@@ -30,6 +44,41 @@ export default function Page() {
   function handleDropDownClick() {
     setMessageOrBugDropdown((prev) => !prev);
   }
+
+  const handleChange = (e) => {
+    const { id, value } = e.target;
+
+    setFormData({
+      ...formData,
+      [id]: value,
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      setStatus("Sending");
+      const response = await axios.post('/api/sendEmail', formData, {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (response.data.success) {
+        setStatus('Email sent successfully!');
+        setFormSubmitted(true);
+      } else {
+        setStatus('Failed to send email.');
+        console.error("Email sending failed");
+      }
+    } catch (error) {
+      setStatus('Error occurred while sending email.');
+      console.error("Error sending email: ", error);
+    }
+  };
+
+
   return (
     <div className="w-full flex flex-col justify-center items-center">
       <div
@@ -62,153 +111,168 @@ export default function Page() {
         <div className="col-span-1 hidden md:flex m-0 p-0 flex justify-center items-end">
           <ManSittingAtTableSvg />
         </div>
-        {formSubmitted ? (
+        {formSubmitted ?
           <div className="col-span-1 w-full flex flex-col mx-3 md:mx-0 md:col-span-3  mt-40 items-center">
             <SuccessIcon />
             <p className=" md:text-2xl text-foreground mt-5">
               Message Send <span className="text-primary">Succesfully...</span>
             </p>
           </div>
-        ) : (
-          <div className="col-span-1 mx-3 md:mx-0 md:col-span-3 mt-5">
-            <div className={`${montserratFont.className} relative`}>
-              <form
-                id="contact_form"
-                className="grid grid-cols-2 gap-x-5 gap-y-2"
-                onSubmit={(event) => {
-                  event.preventDefault();
-                  setFormSubmitted(true);
-                }}
-              >
-                <div className="col-span-2 md:col-span-1">
-                  <Label htmlFor="name" className="text-foreground">
-                    Name
-                  </Label>
-                  <Input
-                    id="name"
-                    type="text"
-                    placeholder="Your name"
-                    required
-                    className="rounded-[8px] border border-input bg-background px-4 py-6 text-foreground placeholder-muted-foreground focus:z-10 focus:border-primary focus:outline-none sm:text-sm"
-                  />
-                </div>
-                <div className="col-span-2 md:col-span-1">
-                  <Label htmlFor="email" className="text-foreground">
-                    Email
-                  </Label>
-                  <Input
-                    id="email"
-                    type="email"
-                    placeholder="Email"
-                    required
-                    className="rounded-[8px] border border-input bg-background px-4 py-6 text-foreground placeholder-muted-foreground focus:z-10 focus:border-primary focus:outline-none sm:text-sm"
-                  />
-                </div>
-                <div className="col-span-2 md:col-span-1">
-                  <Label htmlFor="contact" className="text-foreground">
-                    Contact No.
-                  </Label>
-                  <Input
-                    id="contact"
-                    type="tel"
-                    placeholder="Contact No."
-                    required
-                    className="rounded-[8px] border border-input bg-background px-4 py-6 text-foreground placeholder-muted-foreground focus:z-10 focus:border-primary focus:outline-none sm:text-sm"
-                  />
-                </div>
-                <div className="col-span-2 md:col-span-1">
-                  <Label htmlFor="organisation" className="text-foreground">
-                    Organisation
-                  </Label>
-                  <Input
-                    id="organisation"
-                    type="text"
-                    placeholder="Organisation Name"
-                    required
-                    className="rounded-[8px] border border-input bg-background px-4 py-6 text-foreground placeholder-muted-foreground focus:z-10 focus:border-primary focus:outline-none sm:text-sm"
-                  />
-                </div>
-                <div className="col-span-2 mt-5">
-                  <Label htmlFor="message_or_bug" className="text-foreground">
-                    Send a Message or report a bug
-                  </Label>
-                  <div>
-                    <div
-                      className="flex justify-between cursor-pointer rounded-[8px] border border-input bg-background px-4 py-4 text-foreground placeholder-muted-foreground focus:z-10 focus:border-primary focus:outline-none sm:text-sm"
-                      onClick={handleDropDownClick}
-                    >
-                      <p id="message_or_bug" className="font-semibold">
-                        {messageOrBug}
-                      </p>
-                      <svg
-                        className={`${messageOrBugDropdown ? "scale-[-1]" : null} -mr-1 h-5 w-5  text-gray-400 cursor-pointer transition-all ease-in-out duration-500`}
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        tabIndex="-1"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
+          : (status === "Sending" ? <div className="col-span-1 mx-3 md:mx-0 md:col-span-3 mt-5 items-center justify-center content-center"> <p className=" md:text-3xl text-center text-primary mt-5">Sending...</p></div>:
+            (<div className="col-span-1 mx-3 md:mx-0 md:col-span-3 mt-5">
+                <div className={`${montserratFont.className} relative`}>
+                  <form
+                    id="contact_form"
+                    className="grid grid-cols-2 gap-x-5 gap-y-2"
+                    onSubmit={handleSubmit}
+                  >
+                    <div className="col-span-2 md:col-span-1">
+                      <Label htmlFor="name" className="text-foreground">
+                        Name
+                      </Label>
+                      <Input
+                        id="name"
+                        type="text"
+                        placeholder="Your name"
+                        required
+                        value={formData.name}
+                        onChange={handleChange}
+                        className="rounded-[8px] border border-input bg-background px-4 py-6 text-foreground placeholder-muted-foreground focus:z-10 focus:border-primary focus:outline-none sm:text-sm"
+                      />
+                    </div>
+                    <div className="col-span-2 md:col-span-1">
+                      <Label htmlFor="email" className="text-foreground">
+                        Email
+                      </Label>
+                      <Input
+                        id="email"
+                        type="email"
+                        placeholder="Email"
+                        required
+                        onChange={handleChange}
+                        value={formData.email}
+                        className="rounded-[8px] border border-input bg-background px-4 py-6 text-foreground placeholder-muted-foreground focus:z-10 focus:border-primary focus:outline-none sm:text-sm"
+                      />
                     </div>
-                    <div
-                      className={`${messageOrBugDropdown ? null : "hidden"} absolute right-0 z-10 mt-1 bg-secondary focus:border-primary w-56 origin-top-right rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
-                      role="menu"
-                      aria-orientation="vertical"
-                      aria-labelledby="menu-button"
-                    >
-                      <div className="py-1" role="none">
-                        <p
-                          href="#"
-                          className="block px-4 py-2 text-sm w-full cursor-pointer"
-                          role="menuitem"
-                          tabIndex="-1"
-                          id="menu-item-0"
-                          onClick={() => {
-                            setMessageOrBug("Message");
-                            setMessageOrBugDropdown(false);
-                          }}
+                    <div className="col-span-2 md:col-span-1">
+                      <Label htmlFor="contact" className="text-foreground">
+                        Contact No.
+                      </Label>
+                      <Input
+                        id="contact"
+                        type="tel"
+                        placeholder="Contact No."
+                        required
+                        onChange={handleChange}
+                        value={formData.contact}
+                        className="rounded-[8px] border border-input bg-background px-4 py-6 text-foreground placeholder-muted-foreground focus:z-10 focus:border-primary focus:outline-none sm:text-sm"
+                      />
+                    </div>
+                    <div className="col-span-2 md:col-span-1">
+                      <Label htmlFor="organisation" className="text-foreground">
+                        Organisation
+                      </Label>
+                      <Input
+                        id="organisation"
+                        type="text"
+                        placeholder="Organisation Name"
+                        required
+                        onChange={handleChange}
+                        value={formData.organisation}
+                        className="rounded-[8px] border border-input bg-background px-4 py-6 text-foreground placeholder-muted-foreground focus:z-10 focus:border-primary focus:outline-none sm:text-sm"
+                      />
+                    </div>
+                    <div className="col-span-2 mt-5">
+                      <Label htmlFor="message_or_bug" className="text-foreground">
+                        Send a Message or report a bug
+                      </Label>
+                      <div>
+                        <div
+                          className="flex justify-between cursor-pointer rounded-[8px] border border-input bg-background px-4 py-4 text-foreground placeholder-muted-foreground focus:z-10 focus:border-primary focus:outline-none sm:text-sm"
+                          onClick={handleDropDownClick}
                         >
-                          Message
-                        </p>
-                        <hr className="text-muted-foreground mx-3" />
-                        <p
-                          className="block px-4 py-2 text-sm w-full cursor-pointer"
-                          role="menuitem"
-                          tabIndex="-1"
-                          id="menu-item-1"
-                          onClick={() => {
-                            setMessageOrBug("Report a Bug");
-                            setMessageOrBugDropdown(false);
-                          }}
+                          <p id="message_or_bug" className="font-semibold">
+                            {messageOrBug}
+                          </p>
+                          <svg
+                            className={`${messageOrBugDropdown ? "scale-[-1]" : null} -mr-1 h-5 w-5  text-gray-400 cursor-pointer transition-all ease-in-out duration-500`}
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            aria-hidden="true"
+                            tabIndex="-1"
+                          >
+                            <path
+                              fillRule="evenodd"
+                              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+                              clipRule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          className={`${messageOrBugDropdown ? null : "hidden"} absolute right-0 z-10 mt-1 bg-secondary focus:border-primary w-56 origin-top-right rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
+                          role="menu"
+                          aria-orientation="vertical"
+                          aria-labelledby="menu-button"
                         >
-                          Report a Bug
-                        </p>
+                          <div className="py-1" role="none">
+                            <p
+                              href="#"
+                              className="block px-4 py-2 text-sm w-full cursor-pointer"
+                              role="menuitem"
+                              tabIndex="-1"
+                              id="menu-item-0"
+                              onClick={() => {
+                                setMessageOrBug("Message");
+                                setMessageOrBugDropdown(false);
+                                setFormData({
+                                  ...formData,
+                                  messageType: "Message",
+                                });
+                              }}
+                            >
+                              Message
+                            </p>
+                            <hr className="text-muted-foreground mx-3" />
+                            <p
+                              className="block px-4 py-2 text-sm w-full cursor-pointer"
+                              role="menuitem"
+                              tabIndex="-1"
+                              id="menu-item-1"
+                              onClick={() => {
+                                setMessageOrBug("Report a Bug");
+                                setMessageOrBugDropdown(false);
+                                setFormData({
+                                  ...formData,
+                                  messageType: "Report a Bug",
+                                });
+                              }}
+                            >
+                              Report a Bug
+                            </p>
+                          </div>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </div>
-                <div className="col-span-2 mt-5">
-                  <textarea
-                    id="message"
-                    type="text"
-                    placeholder="How can we help?"
-                    required
-                    className="w-full rounded-[8px] border border-input bg-background px-4 py-4 text-foreground placeholder-muted-foreground focus:z-10 focus:border-primary focus:outline-none sm:text-sm h-64"
-                  />
+                    <div className="col-span-2 mt-5">
+                      <textarea
+                        id="message"
+                        type="text"
+                        placeholder="How can we help?"
+                        required
+                        onChange={handleChange}
+                        value={formData.message}
+                        className="w-full rounded-[8px] border border-input bg-background px-4 py-4 text-foreground placeholder-muted-foreground focus:z-10 focus:border-primary focus:outline-none sm:text-sm h-64"
+                      />
+                    </div>
+                  </form>
                 </div>
-              </form>
-            </div>
-          </div>
-        )}
+              </div>
+            ))}
         <div className="hidden md:flex col-span-1 flex justify-center items-end">
           <ManWithLaptopSvg />
         </div>
       </div>
-      {formSubmitted ? null : (
+      {formSubmitted ? null : (status=== "Sending" ? null : (
         <button form="contact_form" type="submit">
           <div
             className={`${montserratFont.className} m-2 text-xl rounded-full py-2 px-5 bg-primary text-background`}
@@ -216,7 +280,7 @@ export default function Page() {
             Send Your Message
           </div>
         </button>
-      )}
+      ))}
       <div
         className={`${montserratFont.className} mt-24 text-2xl sm:text-3xl md:text-4xl text-center`}
       >
@@ -337,6 +401,8 @@ export default function Page() {
           ></iframe>
         </div>
       </div>
+      {status==='Failed to send email.'?<Alert status={response.data.status} message={response.data.error}/>:null}
+      {status==='Error occurred while sending email.'?<Alert status={500} message={'Error occurred while sending email.'}/>:null}
     </div>
   );
 }