diff --git a/components/AutoPopup.js b/components/AutoPopup.js
new file mode 100644
index 0000000..a56045b
--- /dev/null
+++ b/components/AutoPopup.js
@@ -0,0 +1,233 @@
+"use client";
+import React, { useState, useRef, useEffect } from "react";
+import SimpleReactValidator from "simple-react-validator";
+import ReCAPTCHA from "react-google-recaptcha";
+import axios from "axios";
+import { useTranslation } from "next-i18next";
+
+export default function AutoPopup() {
+    const [show, setShow] = useState(false);
+
+    useEffect(() => {
+        const timer = setTimeout(() => setShow(true), 10000); // Show after 10s
+        return () => clearTimeout(timer);
+    }, []);
+
+    const { t } = useTranslation("contact");
+    const subjectOptions = t("form.subjectOptions", { returnObjects: true });
+
+    const [forms, setForms] = useState({
+        name: "",
+        email: "",
+        subject: "",
+        phone: "",
+        message: "",
+    });
+
+    const [validator] = useState(
+        new SimpleReactValidator({
+            className: "errorMessage",
+        })
+    );
+
+    const recaptchaRef = useRef(null);
+    const [recaptchaToken, setRecaptchaToken] = useState(null);
+
+    const RECAPTCHA_SITEKEY = "6Lc5wKUrAAAAAKqIviSUY2PsqLQ8Bq8CJJaHFA_f";
+
+    const changeHandler = (e) => {
+        const { name, value } = e.target;
+        setForms({ ...forms, [name]: value });
+
+        if (validator.allValid() && recaptchaToken) {
+            validator.hideMessages();
+        } else {
+            validator.showMessages();
+        }
+    };
+
+    const handleRecaptcha = (token) => {
+        setRecaptchaToken(token);
+        if (validator.allValid() && token) {
+            validator.hideMessages();
+        }
+    };
+
+    const submitHandler = async (e) => {
+        e.preventDefault();
+
+        if (validator.allValid() && recaptchaToken) {
+            validator.hideMessages();
+
+            const emailPayload = {
+                name: forms.name,
+                email: forms.email,
+                phone: forms.phone,
+                subject: forms.subject,
+                message: `Subject: ${forms.subject}\n\nMessage:\n${forms.message}`,
+                to: "info@janahanlaw.com",
+                senderName: "Janahan Law",
+                recaptchaToken: recaptchaToken,
+            };
+
+            try {
+                await axios.post("https://mailserver.metatronnest.com/send", emailPayload, {
+                    headers: { "Content-Type": "application/json" },
+                });
+
+                alert(t("form.successMessage"));
+
+                setForms({
+                    name: "",
+                    email: "",
+                    subject: "",
+                    phone: "",
+                    message: "",
+                });
+
+                validator.hideMessages();
+
+                if (recaptchaRef.current) {
+                    try {
+                        recaptchaRef.current.reset();
+                    } catch (err) { }
+                }
+                setRecaptchaToken(null);
+            } catch (err) {
+                alert(t("form.failedMessage"));
+            }
+        } else {
+            validator.showMessages();
+            setForms((prev) => ({ ...prev }));
+        }
+    };
+
+    if (!show) return null;
+
+    return (
+        <>
+
+            {/* Backdrop */}
+            <div
+                className="position-fixed top-0 start-0 w-100 h-100"
+                style={{
+                    backgroundColor: "rgba(0,0,0,0.5)", // gray transparent background
+                    zIndex: 99, // below popup but above page
+                }}
+                onClick={() => setShow(false)} // click on backdrop closes modal
+            ></div>
+
+            {/* Popup */}
+            <div
+                className="position-fixed top-50 start-50 translate-middle w-100 px-3"
+                style={{
+                    maxWidth: "600px", // limit on desktop
+                    zIndex: 10000,
+                }}
+            >
+                <div className="card shadow-lg">
+                    <div className="card-header d-flex justify-content-between align-items-center">
+                        <h5 className="mb-0">{t('contactInfo.pageTitle')}</h5>
+                        <button
+                            type="button"
+                            className="btn-close"
+                            onClick={() => setShow(false)}
+                        ></button>
+                    </div>
+                    <div className="card-body p-0">
+                        <div style={{ padding: "15px 10px 15px 20px" }}>
+                            <form onSubmit={submitHandler} className="contact-validation-active">
+                                <div className="row w-100">
+                                    <div className="col-6">
+                                        <input
+                                            value={forms.name}
+                                            type="text"
+                                            name="name"
+                                            onBlur={changeHandler}
+                                            onChange={changeHandler}
+                                            placeholder={t("form.namePlaceholder")}
+                                            className="form-control mb-2"
+                                        />
+                                        {validator.message("name", forms.name, "required|alpha_space")}
+                                    </div>
+
+                                    <div className="col-6">
+                                        <input
+                                            value={forms.email}
+                                            type="email"
+                                            name="email"
+                                            onBlur={changeHandler}
+                                            onChange={changeHandler}
+                                            placeholder={t("form.emailPlaceholder")}
+                                            className="form-control mb-2"
+                                        />
+                                        {validator.message("email", forms.email, "required|email")}
+                                    </div>
+
+                                    <div className="col-6">
+                                        <input
+                                            value={forms.phone}
+                                            type="phone"
+                                            name="phone"
+                                            onBlur={changeHandler}
+                                            onChange={changeHandler}
+                                            placeholder={t("form.phonePlaceholder")}
+                                            className="form-control mb-2"
+                                        />
+                                        {validator.message("phone", forms.phone, "required|phone")}
+                                    </div>
+
+                                    <div className="col-6">
+                                        <select
+                                            onBlur={changeHandler}
+                                            onChange={changeHandler}
+                                            value={forms.subject}
+                                            name="subject"
+                                            className="form-select mb-2"
+                                        >
+                                            <option value="">{t("form.subjectPlaceholder")}</option>
+                                            {Array.isArray(subjectOptions) &&
+                                                subjectOptions.map((opt, idx) => (
+                                                    <option key={idx}>{opt}</option>
+                                                ))}
+                                        </select>
+                                        {validator.message("subject", forms.subject, "required")}
+                                    </div>
+
+                                    <div className="col-12">
+                                        <textarea
+                                            onBlur={changeHandler}
+                                            onChange={changeHandler}
+                                            value={forms.message}
+                                            name="message"
+                                            placeholder={t("form.messagePlaceholder")}
+                                            className="form-control mb-2"
+                                        ></textarea>
+                                        {validator.message("message", forms.message, "required")}
+                                    </div>
+
+                                    <div className="col-12 mb-2">
+                                        <ReCAPTCHA
+                                            ref={recaptchaRef}
+                                            sitekey={RECAPTCHA_SITEKEY}
+                                            onChange={handleRecaptcha}
+                                        />
+                                        {!recaptchaToken && (
+                                            <div className="errorMessage">
+                                                {t("form.requiredMessages.recaptcha")}
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+
+                                <button type="submit" className="theme-btn w-100" >
+                                    {t("form.submitButton")}
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
diff --git a/components/ContactFrom/ContactForm.js b/components/ContactFrom/ContactForm.js
index a58f0f1..5cd4eaf 100644
--- a/components/ContactFrom/ContactForm.js
+++ b/components/ContactFrom/ContactForm.js
@@ -57,8 +57,8 @@ const ContactForm = () => {
         phone: forms.phone,
         subject: forms.subject,
         message: `Subject: ${forms.subject}\n\nMessage:\n${forms.message}`,
-        to: "your-receiving-email@example.com",
-        senderName: "Website Contact Form",
+        to: "info@janahanlaw.com",
+        senderName: "Janahan Law",
         recaptchaToken: recaptchaToken,
       };
 
diff --git a/components/HeaderTopbar/HeaderTopbar.js b/components/HeaderTopbar/HeaderTopbar.js
index 573512b..3a7d63e 100644
--- a/components/HeaderTopbar/HeaderTopbar.js
+++ b/components/HeaderTopbar/HeaderTopbar.js
@@ -43,7 +43,7 @@ const HeaderTopbar = () => {
             {/* 🔹 Show only Spanish switch if current lang is English */}
             {i18n.language === 'en' && (
               <div>
-                <div className="d-flex justify-content-center align-items-center gap-5 flex-wrap">
+                <div className="d-flex justify-content-center align-items-center gap-1 gap-md-5 flex-wrap">
                   <div className="text-center text-white">
                     Haz clic en el botón para cambiar el idioma a <b>Español</b>.
                   </div>
@@ -59,7 +59,7 @@ const HeaderTopbar = () => {
             {
               i18n.language === 'es' && (
                 <div>
-                  <div className="d-flex justify-content-center align-items-center gap-5 flex-wrap">
+                  <div className="d-flex justify-content-center align-items-center gap-1 gap-md-5 flex-wrap">
                     <div className="text-center text-white">
                       Haz clic en el botón para cambiar el idioma a <b>Inglés</b>.
                     </div>
@@ -77,7 +77,7 @@ const HeaderTopbar = () => {
             {/* 🔹 Show only English switch if current lang is Spanish */}
             {i18n.language === 'en' && (
               <div>
-                <div className="d-flex justify-content-center align-items-center gap-5 flex-wrap">
+                <div className="d-flex justify-content-center align-items-center gap-1 gap-md-5 flex-wrap">
                   <div className="text-center text-white">
                     Click the button to switch the language to <b>Spanish</b>.
                   </div>
@@ -92,7 +92,7 @@ const HeaderTopbar = () => {
             )}
             {i18n.language === 'es' && (
               <div>
-                <div className="d-flex justify-content-center align-items-center gap-5 flex-wrap">
+                <div className="d-flex justify-content-center align-items-center gap-1 gap-md-5 flex-wrap">
                   <div className="text-center text-white">
                     Click the button to switch the language to <b>English</b>.
                   </div>
diff --git a/pages/_app.js b/pages/_app.js
index 25d98fb..6767fbd 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -16,15 +16,17 @@ import Head from "next/head";
 
 // Import appWithTranslation from next-i18next
 import { appWithTranslation } from 'next-i18next';
+import AutoPopup from "../components/AutoPopup";
 
 function MyApp({ Component, pageProps }) {
   return (
-    <div>
+    <div className="position-relative">
       <Head>
         <title>Janahan Law - US Immigration Law</title>
       </Head>
       <Provider store={store}>
         <PersistGate loading={null} persistor={persistor}>
+          <AutoPopup /> 
           <Component {...pageProps} />
           <ToastContainer />
         </PersistGate>
diff --git a/pages/about/index.js b/pages/about/index.js
index 6d94002..42d206b 100644
--- a/pages/about/index.js
+++ b/pages/about/index.js
@@ -50,7 +50,7 @@ export default AboutPage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor', 'footer', 'innerBanner'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor', 'footer', 'innerBanner', 'contact'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }
diff --git a/pages/about/our-mission.js b/pages/about/our-mission.js
index 6453a7c..11fd0ab 100644
--- a/pages/about/our-mission.js
+++ b/pages/about/our-mission.js
@@ -26,7 +26,7 @@ export default AboutPage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'innerBanner', 'ourMission', 'footer'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'innerBanner', 'ourMission', 'footer', 'contact'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }
diff --git a/pages/about/racial-justice.js b/pages/about/racial-justice.js
index 9565b4c..d4869ff 100644
--- a/pages/about/racial-justice.js
+++ b/pages/about/racial-justice.js
@@ -26,7 +26,7 @@ export default AboutPage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'innerBanner', 'racialJustice', 'footer'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'innerBanner', 'racialJustice', 'footer', 'contact'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }
diff --git a/pages/blog/[slug].js b/pages/blog/[slug].js
index 7ac81ac..507e3b5 100644
--- a/pages/blog/[slug].js
+++ b/pages/blog/[slug].js
@@ -96,7 +96,7 @@ export async function getStaticPaths() {
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'blog', 'footer', 'innerBanner'])),
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'blog', 'footer', 'innerBanner', 'contact'])),
         },
     };
 }
diff --git a/pages/blog/index.js b/pages/blog/index.js
index 26cd4c1..6201c19 100644
--- a/pages/blog/index.js
+++ b/pages/blog/index.js
@@ -26,7 +26,7 @@ export default BlogPage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'innerBanner', 'blog', 'footer'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'innerBanner', 'blog', 'footer', 'contact'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }
diff --git a/pages/index.js b/pages/index.js
index 0c246a2..b49c0ac 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -42,7 +42,7 @@ export default HomePage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction', 'blog', 'footer', 'services'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction', 'blog', 'footer', 'services', 'contact', 'innerBanner'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }
diff --git a/pages/our-approach/index.js b/pages/our-approach/index.js
index aa24b5a..976c12d 100644
--- a/pages/our-approach/index.js
+++ b/pages/our-approach/index.js
@@ -30,7 +30,7 @@ export default OurApproach;
 export async function getStaticProps({ locale }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, ['menu',"common","ourApproach","footer", 'innerBanner'])),
+      ...(await serverSideTranslations(locale, ['menu',"common","ourApproach","footer", 'innerBanner', 'contact'])),
     },
   };
 }
diff --git a/pages/services/[slug].js b/pages/services/[slug].js
index b6ab3a0..12fd531 100644
--- a/pages/services/[slug].js
+++ b/pages/services/[slug].js
@@ -117,7 +117,7 @@ export async function getStaticProps({ params, locale }) {
   return {
     props: {
       service,
-      ...(await serverSideTranslations(locale, ["common", "menu", "services", , 'footer'])),
+      ...(await serverSideTranslations(locale, ["common", "menu", "services", , 'footer', 'contact'])),
     },
   };
 }
diff --git a/pages/services/index.js b/pages/services/index.js
index bc92cdc..5b6f277 100644
--- a/pages/services/index.js
+++ b/pages/services/index.js
@@ -31,7 +31,7 @@ export default Services;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'services', 'footer'])), // Add 'home', 'footer', etc.
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'services', 'footer', 'contact'])), // Add 'home', 'footer', etc.
         },
     };
 }
diff --git a/public/locales/en/contact.json b/public/locales/en/contact.json
index ce08902..c9e64f4 100644
--- a/public/locales/en/contact.json
+++ b/public/locales/en/contact.json
@@ -5,7 +5,8 @@
     "callTitle": "Call Now",
     "phone": "+1 (305) 330-7413",
     "questionTitle": "Have Any Question?",
-    "questionDesc": "We’re here to help with all your U.S. immigration and legal needs — contact Janahan Law for trusted guidance today."
+    "questionDesc": "We’re here to help with all your U.S. immigration and legal needs — contact Janahan Law for trusted guidance today.",
+    "pageTitle": "Contact Us"
   },
   "form": {
     "namePlaceholder": "Your Name",
@@ -32,4 +33,4 @@
       "recaptcha": "Please complete the ReCAPTCHA"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/public/locales/es/contact.json b/public/locales/es/contact.json
index 564bd7f..6eb405a 100644
--- a/public/locales/es/contact.json
+++ b/public/locales/es/contact.json
@@ -5,7 +5,8 @@
     "callTitle": "Llama ahora",
     "phone": "+1 (305) 330-7413",
     "questionTitle": "¿Tienes alguna pregunta?",
-    "questionDesc": "Estamos aquí para ayudarte con todas tus necesidades legales y de inmigración en EE. UU. — contacta a Janahan Law para obtener orientación confiable hoy."
+    "questionDesc": "Estamos aquí para ayudarte con todas tus necesidades legales y de inmigración en EE. UU. — contacta a Janahan Law para obtener orientación confiable hoy.",
+    "pageTitle": "Contáctenos"
   },
   "form": {
     "namePlaceholder": "Tu Nombre",
@@ -32,4 +33,4 @@
       "recaptcha": "Por favor completa el ReCAPTCHA"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/styles/sass/layout/_header.scss b/styles/sass/layout/_header.scss
index e50b2fe..1b4c88c 100644
--- a/styles/sass/layout/_header.scss
+++ b/styles/sass/layout/_header.scss
@@ -8,6 +8,7 @@
 .topbar {
 	padding: 20px 0;
 	border-bottom: 1px solid #D9D9D9;
+	background-color: white;
 
 	.contact-info-wrap {
 		display: flex;
@@ -961,6 +962,8 @@
 
 
 .wpo-site-header {
+	background-color: white;
+
 	.navigation {
 		background-color: transparent;
 		margin-bottom: 0;
diff --git a/styles/sass/page/_contact.scss b/styles/sass/page/_contact.scss
index 0bc8308..d8e5d6c 100644
--- a/styles/sass/page/_contact.scss
+++ b/styles/sass/page/_contact.scss
@@ -227,4 +227,118 @@
 	h2.hidden {
 		display: none;
 	}
+}
+
+.form-field {
+	margin-bottom: 30px;
+}
+
+.errorMessage {
+	color: red;
+	font-size: 14px;
+	margin-top: 5px;
+}
+
+form input,
+form select,
+form textarea {
+	background: transparent;
+	width: 100%;
+	height: 50px;
+	border: 1px solid transparent;
+	border-radius: 0px;
+	box-shadow: none !important;
+	padding-left: 25px;
+	border: 1px solid #ebebeb;
+	color: #a9a9a9;
+
+	@include media-query(991px) {
+		height: 45px;
+	}
+
+	&:focus {
+		border-color: $theme-primary-color;
+		background: transparent;
+	}
+}
+
+form textarea {
+	height: 180px;
+	padding-top: 15px;
+}
+
+form {
+	margin: 0;
+	overflow: hidden;
+
+	@include placeholder-style(#9d9c9c, 15px, normal);
+
+	select {
+		display: inline-block;
+		color: #a9a9a9;
+		cursor: pointer;
+		opacity: 1;
+		padding: 6px 25px;
+		font-size: 15px;
+		font-size: calc-rem-value(15);
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		-o-appearance: none;
+		appearance: none;
+		-moz-appearance: none;
+		background: transparent url(/images/select-icon2.png) no-repeat calc(100% - 15px) center;
+		position: relative;
+
+		&:focus {
+			background: transparent url(/images/select-icon2.png) no-repeat calc(100% - 15px) center;
+		}
+	}
+
+	.submit-area {
+		text-align: center;
+		width: 100%;
+		margin-bottom: 10px;
+		margin-left: 0;
+
+		@include media-query(767px) {
+			margin-bottom: 0;
+		}
+
+		.theme-btn {
+			border-radius: 0px;
+			font-family: $base-font;
+			font-size: 16px;
+
+			&:after {
+				border-radius: 0px;
+			}
+		}
+	}
+}
+
+form>div {
+	margin: 0 15px 25px;
+
+	@include media-query(600px) {
+		width: calc(100% - 25px);
+	}
+}
+
+form .fullwidth {
+	width: calc(100% - 25px);
+	float: none;
+	clear: both;
+}
+
+form>div>div {
+	margin-bottom: 7px;
+}
+
+.popup-form {
+	position: absolute;
+	top: "20%  !important;";
+	right: "35%  !important;";
+	z-index: 10000 !important;
+	width: "600px  !important;";
+	max-width: "100%  !important;";
 }
\ No newline at end of file