diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..d0411a8
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+NEXT_PUBLIC_FORMSUBMIT_KEY=your-email-or-random-string
diff --git a/app/components/contact-us/business-form.tsx b/app/components/contact-us/business-form.tsx
index 67aced6..521817c 100644
--- a/app/components/contact-us/business-form.tsx
+++ b/app/components/contact-us/business-form.tsx
@@ -1,4 +1,13 @@
+"use client"
+import { useState } from "react"
+
 export default function BusinessForm() {
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+    const [phoneNumber, setPhoneNumber] = useState("");
+    const [category, setCategory] = useState("");
+    const [message, setMessage] = useState("");
+
     return (
         <div className="w-full flex flex-col gap-y-4">
             <div>
@@ -9,18 +18,18 @@ export default function BusinessForm() {
                 <div className="grid grid-cols-2 gap-x-8 gap-y-6">
                     <div className="col-span-2">
                         <label htmlFor="name" className="text-md sm:text-lg">Name</label>
-                        <input type="text" id="name" name="name" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
                     </div>
                     <div className="col-span-2">
                         <label htmlFor="email" className="text-md sm:text-lg">Email</label>
-                        <input type="text" id="email" name="email" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="text" id="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
                     </div>
                     <div className="col-span-2">
                         <label htmlFor="phone-number" className="text-md sm:text-lg">Phone Number</label>
-                        <input type="text" id="phone-number" name="phone-number" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="text" id="phone-number" name="phone-number" value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
                     </div>
                     <div className="col-span-2">
                         <label htmlFor="category" className="text-md sm:text-lg">Category</label>
@@ -31,8 +40,14 @@ export default function BusinessForm() {
                     </div>
                     <div className="col-span-2">
                     <label htmlFor="proposal" className="text-md sm:text-lg">Corporate Proposal (PDF)</label>
-                        <input type="file" id="proposal" name="proposal" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="file" id="proposal" name="proposal" value={category} onChange={(e) => setCategory(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                    </div>
+                    <div className="col-span-2">
+                        <label htmlFor="message" className="text-md sm:text-lg">Message</label>
+                        <div>
+                            <textarea name="message" id="message" value={message} onChange={(e) => setMessage(e.target.value)} className="resize-none block w-full rounded-md h-40 border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-xs sm:text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 focus:outline-none"></textarea>
+                        </div>
                     </div>
                 </div>
                 <div className="mt-10">
diff --git a/app/components/contact-us/general-form.tsx b/app/components/contact-us/general-form.tsx
index 4daf669..16700c9 100644
--- a/app/components/contact-us/general-form.tsx
+++ b/app/components/contact-us/general-form.tsx
@@ -1,31 +1,48 @@
+"use client"
+import { useState } from "react"
+
 export default function GeneralForm() {
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+    const [phoneNumber, setPhoneNumber] = useState("");
+    const [category, setCategory] = useState("");
+    const [message, setMessage] = useState("");
+
+    const formSubmitKey = process.env.NEXT_PUBLIC_FORMSUBMIT_KEY;
+
     return (
         <div className="w-full flex flex-col gap-y-4">
             <div>
                 <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold">Contact Us</h2>
                 <p className="text-md sm:text-lg my-4">Feel free to reach out through the form below!</p>
             </div>
-            <form action="#" className="w-full">
+            <form action={`https://formsubmit.co/${formSubmitKey}`} method="POST" className="w-full">
                 <div className="grid grid-cols-2 gap-x-8 gap-y-6">
                     <div className="col-span-2">
                         <label htmlFor="name" className="text-md sm:text-lg">Name</label>
-                        <input type="text" id="name" name="name" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 focus:outline-none"/>
                     </div>
                     <div className="col-span-2">
                         <label htmlFor="email" className="text-md sm:text-lg">Email</label>
-                        <input type="text" id="email" name="email" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="text" id="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 focus:outline-none"/>
                     </div>
                     <div className="col-span-2">
                         <label htmlFor="phone-number" className="text-md sm:text-lg">Phone Number</label>
-                        <input type="text" id="phone-number" name="phone-number" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="text" id="phone-number" name="phone-number" value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 focus:outline-none"/>
                     </div>
                     <div className="col-span-2">
                         <label htmlFor="category" className="text-md sm:text-lg">Category</label>
-                        <input type="text" id="category" name="category" required
-                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+                        <input type="text" id="category" name="category" value={category} onChange={(e) => setCategory(e.target.value)} required
+                               className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 focus:outline-none"/>
+                    </div>
+                    <div className="col-span-2">
+                        <label htmlFor="message" className="text-md sm:text-lg">Message</label>
+                        <div>
+                            <textarea name="message" id="message" value={message} onChange={(e) => setMessage(e.target.value)} className="resize-none block w-full rounded-md h-40 border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-xs sm:text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 focus:outline-none"></textarea>
+                        </div>
                     </div>
                 </div>
                 <div className="mt-10">
diff --git a/app/contact-us/page.tsx b/app/contact-us/page.tsx
index f3e28e5..1b7ad5b 100644
--- a/app/contact-us/page.tsx
+++ b/app/contact-us/page.tsx
@@ -5,21 +5,21 @@ import GeneralForm from "@/app/components/contact-us/general-form";
 export default function ContactPage() {
     return (
         <div className="items-center bg-teal-950 space-y-20 px-4 md:px-12 lg:px-16 pb-12">
-            <div className="grid grid-cols-2 text-white py-10">
-                <div className="place-self-center mx-auto my-auto">
+            <div className="sm:grid sm:grid-cols-2 text-white py-10">
+                <div className="sm:place-self-center mx-auto my-auto">
                     <GeneralForm/>
                 </div>
-                <div className="place-self-center">
+                <div className="sm:place-self-center hidden sm:block">
                     <Image src={'/images/logo/nuansa_logo.png'} alt={'logo'} width={0} height={0} sizes="100vw"
                            style={{ width: '12rem', height: 'auto' }}/>
                 </div>
             </div>
-            <div className="grid grid-cols-2 bg-amber-50 rounded-md text-black bottom-8 py-10">
-                <div className="place-self-center">
+            <div className="sm:grid sm:grid-cols-2 bg-amber-50 rounded-md text-black bottom-8 p-10">
+                <div className="sm:place-self-center hidden sm:block">
                     <Image src={'/images/logo/nuansa_logo.png'} alt={'logo'} width={0} height={0} sizes="100vw"
                            style={{width: '12rem', height: 'auto'}}/>
                 </div>
-                <div className="place-self-center">
+                <div className="sm:place-self-center">
                     <BusinessForm/>
                 </div>
             </div>
diff --git a/package-lock.json b/package-lock.json
index 53cd9ba..ea3f2a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8295,13 +8295,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/symbol-tree": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/swiper": {
       "version": "11.1.14",
       "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.14.tgz",
@@ -8321,6 +8314,13 @@
         "node": ">= 4.7.0"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",