From ef005b73823b6783e141345a23ce62576fbc8b0b Mon Sep 17 00:00:00 2001
From: "richard.nguyen1" <richard.nguyen2005@outlook.com>
Date: Sat, 17 Jan 2026 15:50:12 -0700
Subject: [PATCH 1/2] Made some changes, this is the branch that is not paid.

---
 .../src/app/contact/components/NonStudent.tsx |  64 +++++++++
 .../contact/components/NonStudentInput.tsx    |  19 +++
 .../contact/components/NonStudentMessage.tsx  |  29 ++++
 .../src/app/contact/components/Student.tsx    |  54 +++++++
 .../src/app/contact/components/contact.tsx    | 132 ++++++++++++++----
 5 files changed, 272 insertions(+), 26 deletions(-)
 create mode 100644 waybionic/src/app/contact/components/NonStudent.tsx
 create mode 100644 waybionic/src/app/contact/components/NonStudentInput.tsx
 create mode 100644 waybionic/src/app/contact/components/NonStudentMessage.tsx
 create mode 100644 waybionic/src/app/contact/components/Student.tsx

diff --git a/waybionic/src/app/contact/components/NonStudent.tsx b/waybionic/src/app/contact/components/NonStudent.tsx
new file mode 100644
index 0000000..cfc3968
--- /dev/null
+++ b/waybionic/src/app/contact/components/NonStudent.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import NonStudentMessage from './NonStudentMessage'
+import NonStudentInput from './NonStudentInput'
+
+const NonStudent = ({ typeOfContact, setClubInfo, setBusinessInfo, setProfessionInfo, setSponsershipInfo, setPartnershipInfo, setOtherInfo, clubInfo, businessInfo, professionInfo, sponsershipInfo, partnershipInfo, message, setMessage, otherInfo }) => {
+  const getStateValue = () => {
+    switch(typeOfContact) {
+      case "Club":
+        return clubInfo
+      case "Business":
+        return businessInfo
+      case "Industry Professional":
+        return professionInfo
+      case "Sponsorship":
+        return sponsershipInfo
+      case "Partnership":
+        return partnershipInfo
+      case "Professor":
+        return professionInfo
+      default:
+        return otherInfo
+    }
+  }
+
+  const setStateValue = (value: string) => {
+    switch(typeOfContact) {
+      case "Club":
+        setClubInfo(value)
+        break
+      case "Business":
+        setBusinessInfo(value)
+        break
+      case "Industry Professional":
+        setProfessionInfo(value)
+        break
+      case "Sponsorship":
+        setSponsershipInfo(value)
+        break
+      case "Partnership":
+        setPartnershipInfo(value)
+        break
+      case "Professor":
+        setProfessionInfo(value)
+        break
+      default:
+        setOtherInfo(value)
+    } 
+  }
+
+  if (typeOfContact && typeOfContact !== "Student") {
+    return (
+      <>
+        <div>
+          <NonStudentMessage typeOfContact={typeOfContact} />
+          <NonStudentInput getStateValue={getStateValue} setStateValue={setStateValue} />
+        </div>
+      </>
+    )
+  }
+
+  return null
+}
+
+export default NonStudent
diff --git a/waybionic/src/app/contact/components/NonStudentInput.tsx b/waybionic/src/app/contact/components/NonStudentInput.tsx
new file mode 100644
index 0000000..b2dbaaa
--- /dev/null
+++ b/waybionic/src/app/contact/components/NonStudentInput.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+const NonStudentInput = ({ getStateValue, setStateValue}) => {
+  return (
+    <>
+      <textarea
+        id="message"
+        value={getStateValue()}
+        onChange={(e) => setStateValue(e.target.value)}
+        required
+        rows={6}
+        className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+        placeholder="Type your message here..."
+      />
+    </>
+  )
+}
+
+export default NonStudentInput
diff --git a/waybionic/src/app/contact/components/NonStudentMessage.tsx b/waybionic/src/app/contact/components/NonStudentMessage.tsx
new file mode 100644
index 0000000..daaad70
--- /dev/null
+++ b/waybionic/src/app/contact/components/NonStudentMessage.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+
+type NonStudentMessageProps = {
+  typeOfContact: string;
+};
+
+const messageDictionary = {
+  "Business": "Please enter your business information and interests",
+  "Club": "Please enter your club information and interests",
+  "Industry Professional": "Please enter your profession information and interests",
+  "Professor": "Please enter your professorship information and interests",
+  "Partnership": "Please enter your partnership information and interests",
+  "Sponsorship": "Please enter your sponsorship information and interests",
+  "Other": "Please enter additional information"
+}
+
+const NonStudentMessage = ({typeOfContact} : NonStudentMessageProps) => {
+  return (
+    <>
+      <label
+        className="block text-sm font-medium text-gray-700 mb-2"
+      >
+        {messageDictionary[typeOfContact]}
+      </label>
+    </>
+  )
+}
+
+export default NonStudentMessage
diff --git a/waybionic/src/app/contact/components/Student.tsx b/waybionic/src/app/contact/components/Student.tsx
new file mode 100644
index 0000000..4112f80
--- /dev/null
+++ b/waybionic/src/app/contact/components/Student.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+
+const Student = ({yearOfStudy, setYearOfStudy, fieldOfStudy, setFieldOfStudy}) => {
+  return (
+    <>
+      <div>
+        <label
+          htmlFor="yearOfStudy"
+          className="block text-sm font-medium text-gray-700 mb-2"
+        >
+          Year Of Study
+        </label>
+        <select
+          id="yearOfStudy"
+          value={yearOfStudy}
+          onChange={(e) => (setYearOfStudy(e.target.value))}
+          required
+          className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 "
+        >
+          <option value="1st" className="text-gray-700 mb-2">1st Year</option>
+          <option value="2nd" className="text-gray-700 mb-2">2nd Year</option>
+          <option value="3rd" className="text-gray-700 mb-2">3rd Year</option>
+          <option value="+4th" className="text-gray-700 mb-2">+4th Year</option>
+        </select>
+      </div>
+      <div>
+        <label
+          htmlFor="fieldOfStudy"
+          className="block text-sm font-medium text-gray-700 mb-2"
+        >
+          Field of Study / Interest
+        </label>
+        <select
+          id="fieldOfStudy"
+          value={fieldOfStudy}
+          onChange={(e) => (setFieldOfStudy(e.target.value))}
+          required
+          className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 "
+        >
+          <option value="Electrical Engineering" className="text-gray-700 mb-2">Electrical Engineering</option>
+          <option value="Software Engineering" className="text-gray-700 mb-2">Software Engineering</option>
+          <option value="Biomedical Engineering" className="text-gray-700 mb-2">Biomedical Engineering</option>
+          <option value="Mechanical Engineering" className="text-gray-700 mb-2">Mechanical Engineering</option>
+          <option value="Computer Science" className="text-gray-700 mb-2">Computer Science</option>
+          <option value="Natural Sciences" className="text-gray-700 mb-2">Natural Sciences</option>
+          <option value="Business" className="text-gray-700 mb-2">Business</option>
+          <option value="Other" className="text-gray-700 mb-2">Other</option>
+        </select>
+      </div>
+    </>
+  )
+}
+
+export default Student
diff --git a/waybionic/src/app/contact/components/contact.tsx b/waybionic/src/app/contact/components/contact.tsx
index 8c982f1..fb9b512 100644
--- a/waybionic/src/app/contact/components/contact.tsx
+++ b/waybionic/src/app/contact/components/contact.tsx
@@ -1,31 +1,71 @@
 "use client";
 
+import { Yesteryear } from "next/font/google";
 import { useState } from "react";
+import Student from "./Student";
+import NonStudent from "./NonStudent";
 
 export default function Contact() {
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
+  const [typeOfContact, setTypeOfContact] = useState("Student");
+  const [yearOfStudy, setYearOfStudy] = useState("1st");
+  const [fieldOfStudy, setFieldOfStudy] = useState("Electrical Engineering");
+  const [clubInfo, setClubInfo] = useState("");
+  const [businessInfo, setBusinessInfo] = useState("");
+  const [professionInfo, setProfessionInfo] = useState("");
+  const [sponsershipInfo, setSponsershipInfo] = useState("");
+  const [partnershipInfo, setPartnershipInfo] = useState("");
+  const [otherInfo, setOtherInfo] = useState("");
   const [subject, setSubject] = useState("");
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState("");
   const [status, setStatus] = useState("");
 
-
   const link: string =
-  "https://docs.google.com/forms/d/e/1FAIpQLSfh3q89PTxHesr0P7nelygxXIYYP24kRp_27Yb5mSbyxfiJCQ/viewform?usp=header";
+    "https://docs.google.com/forms/d/e/1FAIpQLSfh3q89PTxHesr0P7nelygxXIYYP24kRp_27Yb5mSbyxfiJCQ/viewform?usp=header";
 
-const hiring: boolean = true;
+  const hiring: boolean = true;
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 
-    const fullName = `${firstName} ${lastName}`.trim();
+    const fullInfo = `${firstName} ${lastName} - ${typeOfContact}${typeOfContact === "Student" ? (` - ${yearOfStudy} Year - ${fieldOfStudy} (Field Of Study / Field of Interest)`) : ``}`;
 
+    let messageDirect;
 
+    switch(typeOfContact) {
+      case "Business":
+        messageDirect = businessInfo;
+        break;
+      case "Club":
+        messageDirect = clubInfo;
+        break;
+      case "Industry Professional":
+        messageDirect = professionInfo;
+        break;
+      case "Professor":
+        messageDirect = professionInfo;
+        break;
+      case "Partnership":
+        messageDirect = partnershipInfo;
+        break;
+      case "Sponsorship":
+        messageDirect = sponsershipInfo;
+        break;
+      case "Other":
+        messageDirect = otherInfo;
+        break;
+      case "Student":
+      default:
+        messageDirect = message;
+        break;
+    }
+    
     const mailtoLink = `mailto:waybionics@gmail.com?subject=${encodeURIComponent(
-      subject || "Contact Form Submission"
-    )}&body=${encodeURIComponent(message)}%0D%0A%0D%0AFrom: ${encodeURIComponent(
-      fullName
+      (`${subject} - ${fullInfo}`) || "Contact Form Submission"
+    )}&body=${encodeURIComponent(messageDirect)}%0D%0A%0D%0AFrom: ${encodeURIComponent(
+      fullInfo
     )} (${encodeURIComponent(email)})`;
 
     window.location.href = mailtoLink;
@@ -36,11 +76,20 @@ const hiring: boolean = true;
     setEmail("");
     setMessage("");
     setStatus("Message opened in your default email client!");
+    setTypeOfContact("Student");
+    setYearOfStudy("1st");
+    setFieldOfStudy("Electrical Engineering");
+    setClubInfo("");
+    setBusinessInfo("");
+    setProfessionInfo("");
+    setSponsershipInfo("");
+    setPartnershipInfo("");
+    setOtherInfo("");
   };
 
   return (
     <section
-        className="relative w-full flex items-center justify-center overflow-hidden bg-no-repeat bg-cover bg-top py-16 -mt-90 sm:-mt-110 md:-mt-100 lg:-mt-100 xl:-mt-50"
+      className="relative w-full flex items-center justify-center overflow-hidden bg-no-repeat bg-cover bg-top py-16 -mt-90 sm:-mt-110 md:-mt-100 lg:-mt-100 xl:-mt-50"
 
       style={{
         backgroundImage: "url('/images/contact_middle_bg.PNG')",
@@ -90,21 +139,31 @@ const hiring: boolean = true;
                 </div>
                 <div>
                   <label
-                    htmlFor="subject"
+                    htmlFor="typeOfContact"
                     className="block text-sm font-medium text-gray-700 mb-2"
                   >
-                    Subject
+                    Type Of Contact
                   </label>
-                  <input
-                    type="text"
-                    id="subject"
-                    value={subject}
-                    onChange={(e) => setSubject(e.target.value)}
+                  <select
+                    id="typeOfContact"
+                    value={typeOfContact}
+                    onChange={(e) => (setTypeOfContact(e.target.value))}
                     required
-                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    placeholder="Subject of email"
-                  />
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 "
+                  >
+                    <option value="Student" className="text-gray-700 mb-2">Student</option>
+                    <option value="Club" className="text-gray-700 mb-2">Club</option>
+                    <option value="Business" className="text-gray-700 mb-2">Business</option>
+                    <option value="Industry Professional" className="text-gray-700 mb-2">Industry Professional</option>
+                    <option value="Professor" className="text-gray-700 mb-2">Professor</option>
+                    <option value="Partnership" className="text-gray-700 mb-2">Partnership</option>
+                    <option value="Sponsorship" className="text-gray-700 mb-2">Sponsorship</option>
+                    <option value="Other" className="text-gray-700 mb-2">Other</option>
+                  </select>
                 </div>
+
+                {typeOfContact === "Student" ? (<Student yearOfStudy={yearOfStudy} setYearOfStudy={setYearOfStudy} fieldOfStudy={fieldOfStudy} setFieldOfStudy={setFieldOfStudy} />) : (<></>)}
+
                 <div>
                   <label
                     htmlFor="email"
@@ -122,23 +181,44 @@ const hiring: boolean = true;
                     placeholder="your.email@example.com"
                   />
                 </div>
+
                 <div>
                   <label
-                    htmlFor="message"
+                    htmlFor="subject"
                     className="block text-sm font-medium text-gray-700 mb-2"
                   >
-                    Message
+                    Subject
                   </label>
-                  <textarea
-                    id="message"
-                    value={message}
-                    onChange={(e) => setMessage(e.target.value)}
+                  <input
+                    type="text"
+                    id="subject"
+                    value={subject}
+                    onChange={(e) => setSubject(e.target.value)}
                     required
-                    rows={6}
                     className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    placeholder="Type your message here..."
+                    placeholder="Subject of email"
                   />
                 </div>
+                {typeOfContact === "Student" ? (
+                  <div>
+                    <label
+                      htmlFor="message"
+                      className="block text-sm font-medium text-gray-700 mb-2"
+                    >
+                      Please leave your student message
+                    </label>
+                    <textarea
+                      id="message"
+                      value={message}
+                      onChange={(e) => setMessage(e.target.value)}
+                      required
+                      rows={6}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                      placeholder="Type your message here..."
+                    />
+                  </div>
+                ) : <></>}
+                {(typeOfContact !== "Student" && typeOfContact) ? (<NonStudent typeOfContact={typeOfContact} setClubInfo={setClubInfo} setBusinessInfo={setBusinessInfo} setProfessionInfo={setProfessionInfo} setSponsershipInfo={setSponsershipInfo} setPartnershipInfo={setPartnershipInfo} clubInfo={clubInfo} businessInfo={businessInfo} professionInfo={professionInfo} sponsershipInfo={sponsershipInfo} partnershipInfo={partnershipInfo} otherInfo={otherInfo} message={message} setMessage={setMessage} setOtherInfo={setOtherInfo} />) : (<></>)}
                 <button
                   type="submit"
                   style={{ backgroundColor: "var(--color-pink)" }}

From ed8903f28d1c41dfca329a0f5c6a84977b27220b Mon Sep 17 00:00:00 2001
From: "richard.nguyen1" <richard.nguyen2005@outlook.com>
Date: Sat, 17 Jan 2026 23:36:32 -0700
Subject: [PATCH 2/2] Sends email auto

---
 waybionic/package-lock.json                   |  62 +++-
 waybionic/package.json                        |   3 +
 .../src/app/contact/components/NonStudent.tsx |   1 +
 .../src/app/contact/components/contact.tsx    | 334 ++++++++++--------
 waybionic/src/app/page.tsx                    |   2 +-
 5 files changed, 250 insertions(+), 152 deletions(-)

diff --git a/waybionic/package-lock.json b/waybionic/package-lock.json
index 3e0ae6c..b3eac12 100644
--- a/waybionic/package-lock.json
+++ b/waybionic/package-lock.json
@@ -8,9 +8,12 @@
       "name": "waybionic",
       "version": "0.1.0",
       "dependencies": {
+        "@emailjs/browser": "^4.4.1",
+        "emailjs": "^5.0.0",
         "next": "^15.4.10",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-hot-toast": "^2.6.0",
         "react-responsive-carousel": "^3.2.23"
       },
       "devDependencies": {
@@ -35,6 +38,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@emailjs/browser": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.4.1.tgz",
+      "integrity": "sha512-DGSlP9sPvyFba3to2A50kDtZ+pXVp/0rhmqs2LmbMS3I5J8FSOgLwzY2Xb4qfKlOVHh29EAutLYwe5yuEZmEFg==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.7.1.tgz",
@@ -958,8 +970,8 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/detect-libc": {
       "version": "2.1.2",
@@ -971,6 +983,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/emailjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/emailjs/-/emailjs-5.0.0.tgz",
+      "integrity": "sha512-J7gxswcLGRZQM+HQBgll0DJuEMFiJIa7UzgK3GsjlytyRS4X2z7K1brQLlezEs3ul+jqvYYoCTqPAgWrVZf0mw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
@@ -985,6 +1014,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.18",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.18.tgz",
+      "integrity": "sha512-2vFqsaDVIT9Gz7N6kAL++pLpp41l3PfDuusHcjnGLfR6+huZkl6ziX+zgVC3ZxpqWhzH6pyDdGrCeDhMIvwaxw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -1447,6 +1485,23 @@
         "node": ">= 6"
       }
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.6.0.tgz",
+      "integrity": "sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.1.3",
+        "goober": "^2.1.16"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -1587,8 +1642,9 @@
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/waybionic/package.json b/waybionic/package.json
index 42acacf..0ed9ee4 100644
--- a/waybionic/package.json
+++ b/waybionic/package.json
@@ -9,9 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.4.1",
+    "emailjs": "^5.0.0",
     "next": "^15.4.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hot-toast": "^2.6.0",
     "react-responsive-carousel": "^3.2.23"
   },
   "devDependencies": {
diff --git a/waybionic/src/app/contact/components/NonStudent.tsx b/waybionic/src/app/contact/components/NonStudent.tsx
index cfc3968..04ee703 100644
--- a/waybionic/src/app/contact/components/NonStudent.tsx
+++ b/waybionic/src/app/contact/components/NonStudent.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import NonStudentMessage from './NonStudentMessage'
 import NonStudentInput from './NonStudentInput'
+import emailjs from "@emailjs/browser";
 
 const NonStudent = ({ typeOfContact, setClubInfo, setBusinessInfo, setProfessionInfo, setSponsershipInfo, setPartnershipInfo, setOtherInfo, clubInfo, businessInfo, professionInfo, sponsershipInfo, partnershipInfo, message, setMessage, otherInfo }) => {
   const getStateValue = () => {
diff --git a/waybionic/src/app/contact/components/contact.tsx b/waybionic/src/app/contact/components/contact.tsx
index fb9b512..e8bab54 100644
--- a/waybionic/src/app/contact/components/contact.tsx
+++ b/waybionic/src/app/contact/components/contact.tsx
@@ -1,11 +1,18 @@
 "use client";
 
 import { Yesteryear } from "next/font/google";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import emailjs from "@emailjs/browser";
 import Student from "./Student";
 import NonStudent from "./NonStudent";
+import toast, { Toaster } from 'react-hot-toast';
+
+const serviceIDEmail = process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID;
+const templateIDEmail = process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID;
+const publicKeyEmail = process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY;
 
 export default function Contact() {
+
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
   const [typeOfContact, setTypeOfContact] = useState("Student");
@@ -27,14 +34,15 @@ export default function Contact() {
 
   const hiring: boolean = true;
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
+
     e.preventDefault();
 
     const fullInfo = `${firstName} ${lastName} - ${typeOfContact}${typeOfContact === "Student" ? (` - ${yearOfStudy} Year - ${fieldOfStudy} (Field Of Study / Field of Interest)`) : ``}`;
 
     let messageDirect;
 
-    switch(typeOfContact) {
+    switch (typeOfContact) {
       case "Business":
         messageDirect = businessInfo;
         break;
@@ -61,21 +69,47 @@ export default function Contact() {
         messageDirect = message;
         break;
     }
-    
-    const mailtoLink = `mailto:waybionics@gmail.com?subject=${encodeURIComponent(
-      (`${subject} - ${fullInfo}`) || "Contact Form Submission"
-    )}&body=${encodeURIComponent(messageDirect)}%0D%0A%0D%0AFrom: ${encodeURIComponent(
-      fullInfo
-    )} (${encodeURIComponent(email)})`;
 
-    window.location.href = mailtoLink;
+    try {
+
+      console.log("about to send", { serviceIDEmail, templateIDEmail });
+
+      await emailjs.send(
+        serviceIDEmail,
+        templateIDEmail,
+        {
+          email,
+          firstName,
+          lastName,
+          fullInfo,
+          messageDirect,
+          subject
+        },
+        publicKeyEmail
+      );
+
+      setStatus("Email sent successfully!");
+      toast.success("Message sent successfully!");
+      console.log("pass");
+    } catch (error) {
+
+      console.log("fail");
+      toast.error("Error sending message!");
+      setStatus("Auto email failed to send successfully - opening application...");
+      const mailtoLink = `mailto:waybionics@gmail.com?subject=${encodeURIComponent(
+        (`${subject} - ${fullInfo}`) || "Contact Form Submission"
+      )}&body=${encodeURIComponent(messageDirect)}%0D%0A%0D%0AFrom: ${encodeURIComponent(
+        fullInfo
+      )} (${encodeURIComponent(email)})`;
+
+      window.location.href = mailtoLink;
+    }
 
     setFirstName("");
     setLastName("");
     setSubject("");
     setEmail("");
     setMessage("");
-    setStatus("Message opened in your default email client!");
     setTypeOfContact("Student");
     setYearOfStudy("1st");
     setFieldOfStudy("Electrical Engineering");
@@ -88,152 +122,156 @@ export default function Contact() {
   };
 
   return (
-    <section
-      className="relative w-full flex items-center justify-center overflow-hidden bg-no-repeat bg-cover bg-top py-16 -mt-90 sm:-mt-110 md:-mt-100 lg:-mt-100 xl:-mt-50"
-
-      style={{
-        backgroundImage: "url('/images/contact_middle_bg.PNG')",
-        backgroundSize: "cover",
-        backgroundPosition: "center"
-      }}
-      id="contact"
-    >
-      <div className="min-h-screen flex flex-col w-full">
-        <main className="flex-1 container mx-auto px-4 py-16" style={{ marginTop: '-60px' }}>
-          <div className="max-w-2xl mx-auto">
-            <div className="bg-white rounded-lg shadow-lg p-8">
-              <form onSubmit={handleSubmit} className="space-y-6">
-                <div>
-                  <label
-                    htmlFor="firstName"
-                    className="block text-sm font-medium text-gray-700 mb-2"
-                  >
-                    First Name
-                  </label>
-                  <input
-                    type="text"
-                    id="firstName"
-                    value={firstName}
-                    onChange={(e) => setFirstName(e.target.value)}
-                    required
-                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    placeholder="First Name"
-                  />
-                </div>
-                <div>
-                  <label
-                    htmlFor="lastName"
-                    className="block text-sm font-medium text-gray-700 mb-2"
-                  >
-                    Last Name
-                  </label>
-                  <input
-                    type="text"
-                    id="lastName"
-                    value={lastName}
-                    onChange={(e) => setLastName(e.target.value)}
-                    required
-                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    placeholder="Last Name"
-                  />
-                </div>
-                <div>
-                  <label
-                    htmlFor="typeOfContact"
-                    className="block text-sm font-medium text-gray-700 mb-2"
-                  >
-                    Type Of Contact
-                  </label>
-                  <select
-                    id="typeOfContact"
-                    value={typeOfContact}
-                    onChange={(e) => (setTypeOfContact(e.target.value))}
-                    required
-                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 "
-                  >
-                    <option value="Student" className="text-gray-700 mb-2">Student</option>
-                    <option value="Club" className="text-gray-700 mb-2">Club</option>
-                    <option value="Business" className="text-gray-700 mb-2">Business</option>
-                    <option value="Industry Professional" className="text-gray-700 mb-2">Industry Professional</option>
-                    <option value="Professor" className="text-gray-700 mb-2">Professor</option>
-                    <option value="Partnership" className="text-gray-700 mb-2">Partnership</option>
-                    <option value="Sponsorship" className="text-gray-700 mb-2">Sponsorship</option>
-                    <option value="Other" className="text-gray-700 mb-2">Other</option>
-                  </select>
-                </div>
-
-                {typeOfContact === "Student" ? (<Student yearOfStudy={yearOfStudy} setYearOfStudy={setYearOfStudy} fieldOfStudy={fieldOfStudy} setFieldOfStudy={setFieldOfStudy} />) : (<></>)}
-
-                <div>
-                  <label
-                    htmlFor="email"
-                    className="block text-sm font-medium text-gray-700 mb-2"
-                  >
-                    Your Email
-                  </label>
-                  <input
-                    type="email"
-                    id="email"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    required
-                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    placeholder="your.email@example.com"
-                  />
-                </div>
-
-                <div>
-                  <label
-                    htmlFor="subject"
-                    className="block text-sm font-medium text-gray-700 mb-2"
-                  >
-                    Subject
-                  </label>
-                  <input
-                    type="text"
-                    id="subject"
-                    value={subject}
-                    onChange={(e) => setSubject(e.target.value)}
-                    required
-                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    placeholder="Subject of email"
-                  />
-                </div>
-                {typeOfContact === "Student" ? (
+    <>
+      <Toaster position="top-center" />
+      <section
+        className="relative w-full flex items-center justify-center overflow-hidden bg-no-repeat bg-cover bg-top py-16 -mt-90 sm:-mt-110 md:-mt-100 lg:-mt-100 xl:-mt-50"
+
+        style={{
+          backgroundImage: "url('/images/contact_middle_bg.PNG')",
+          backgroundSize: "cover",
+          backgroundPosition: "center"
+        }}
+        id="contact"
+      >
+        <div className="min-h-screen flex flex-col w-full">
+          <main className="flex-1 container mx-auto px-4 py-16" style={{ marginTop: '-60px' }}>
+            <div className="max-w-2xl mx-auto">
+              <div className="bg-white rounded-lg shadow-lg p-8">
+                <form onSubmit={handleSubmit} className="space-y-6">
+                  <div>
+                    <label
+                      htmlFor="firstName"
+                      className="block text-sm font-medium text-gray-700 mb-2"
+                    >
+                      First Name
+                    </label>
+                    <input
+                      type="text"
+                      id="firstName"
+                      value={firstName}
+                      onChange={(e) => setFirstName(e.target.value)}
+                      required
+                      className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                      placeholder="First Name"
+                    />
+                  </div>
+                  <div>
+                    <label
+                      htmlFor="lastName"
+                      className="block text-sm font-medium text-gray-700 mb-2"
+                    >
+                      Last Name
+                    </label>
+                    <input
+                      type="text"
+                      id="lastName"
+                      value={lastName}
+                      onChange={(e) => setLastName(e.target.value)}
+                      required
+                      className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                      placeholder="Last Name"
+                    />
+                  </div>
+                  <div>
+                    <label
+                      htmlFor="typeOfContact"
+                      className="block text-sm font-medium text-gray-700 mb-2"
+                    >
+                      Type Of Contact
+                    </label>
+                    <select
+                      id="typeOfContact"
+                      value={typeOfContact}
+                      onChange={(e) => (setTypeOfContact(e.target.value))}
+                      required
+                      className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 "
+                    >
+                      <option value="Student" className="text-gray-700 mb-2">Student</option>
+                      <option value="Club" className="text-gray-700 mb-2">Club</option>
+                      <option value="Business" className="text-gray-700 mb-2">Business</option>
+                      <option value="Industry Professional" className="text-gray-700 mb-2">Industry Professional</option>
+                      <option value="Professor" className="text-gray-700 mb-2">Professor</option>
+                      <option value="Partnership" className="text-gray-700 mb-2">Partnership</option>
+                      <option value="Sponsorship" className="text-gray-700 mb-2">Sponsorship</option>
+                      <option value="Other" className="text-gray-700 mb-2">Other</option>
+                    </select>
+                  </div>
+
+                  {typeOfContact === "Student" ? (<Student yearOfStudy={yearOfStudy} setYearOfStudy={setYearOfStudy} fieldOfStudy={fieldOfStudy} setFieldOfStudy={setFieldOfStudy} />) : (<></>)}
+
+                  <div>
+                    <label
+                      htmlFor="email"
+                      className="block text-sm font-medium text-gray-700 mb-2"
+                    >
+                      Your Email
+                    </label>
+                    <input
+                      type="email"
+                      id="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      required
+                      className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                      placeholder="your.email@example.com"
+                    />
+                  </div>
+
                   <div>
                     <label
-                      htmlFor="message"
+                      htmlFor="subject"
                       className="block text-sm font-medium text-gray-700 mb-2"
                     >
-                      Please leave your student message
+                      Subject
                     </label>
-                    <textarea
-                      id="message"
-                      value={message}
-                      onChange={(e) => setMessage(e.target.value)}
+                    <input
+                      type="text"
+                      id="subject"
+                      value={subject}
+                      onChange={(e) => setSubject(e.target.value)}
                       required
-                      rows={6}
                       className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                      placeholder="Type your message here..."
+                      placeholder="Subject of email"
                     />
                   </div>
-                ) : <></>}
-                {(typeOfContact !== "Student" && typeOfContact) ? (<NonStudent typeOfContact={typeOfContact} setClubInfo={setClubInfo} setBusinessInfo={setBusinessInfo} setProfessionInfo={setProfessionInfo} setSponsershipInfo={setSponsershipInfo} setPartnershipInfo={setPartnershipInfo} clubInfo={clubInfo} businessInfo={businessInfo} professionInfo={professionInfo} sponsershipInfo={sponsershipInfo} partnershipInfo={partnershipInfo} otherInfo={otherInfo} message={message} setMessage={setMessage} setOtherInfo={setOtherInfo} />) : (<></>)}
-                <button
-                  type="submit"
-                  style={{ backgroundColor: "var(--color-pink)" }}
-                  className="w-full text-white py-3 px-6 rounded-md hover:opacity-90 transition-colors"
-                >
-                  Send Message
-                </button>
-                {status && (
-                  <p className="text-green-600 text-center mt-4">{status}</p>
-                )}
-              </form>
+                  {typeOfContact === "Student" ? (
+                    <div>
+                      <label
+                        htmlFor="message"
+                        className="block text-sm font-medium text-gray-700 mb-2"
+                      >
+                        Please leave your student message
+                      </label>
+                      <textarea
+                        id="message"
+                        value={message}
+                        onChange={(e) => setMessage(e.target.value)}
+                        required
+                        rows={6}
+                        className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                        placeholder="Type your message here..."
+                      />
+                    </div>
+                  ) : <></>}
+                  {(typeOfContact !== "Student" && typeOfContact) ? (<NonStudent typeOfContact={typeOfContact} setClubInfo={setClubInfo} setBusinessInfo={setBusinessInfo} setProfessionInfo={setProfessionInfo} setSponsershipInfo={setSponsershipInfo} setPartnershipInfo={setPartnershipInfo} clubInfo={clubInfo} businessInfo={businessInfo} professionInfo={professionInfo} sponsershipInfo={sponsershipInfo} partnershipInfo={partnershipInfo} otherInfo={otherInfo} message={message} setMessage={setMessage} setOtherInfo={setOtherInfo} />) : (<></>)}
+
+                  <button
+                    type="submit"
+                    style={{ backgroundColor: "var(--color-pink)" }}
+                    className="w-full text-white py-3 px-6 rounded-md hover:opacity-90 transition-colors cursor-pointer"
+                  >
+                    Send Message
+                  </button>
+                  {status && (
+                    <p className="text-green-600 text-center mt-4">{status}</p>
+                  )}
+                </form>
+              </div>
             </div>
-          </div>
-        </main>
-      </div>
-    </section>
+          </main>
+        </div>
+      </section>
+    </>
   );
 }
diff --git a/waybionic/src/app/page.tsx b/waybionic/src/app/page.tsx
index 764c15e..added78 100644
--- a/waybionic/src/app/page.tsx
+++ b/waybionic/src/app/page.tsx
@@ -1,5 +1,5 @@
 import Hero from "./components/Hero";
-import Mission from "./components/Mission";
+import Mission from "./components/Mission"
 
 export default function Home() {
   return (