diff --git a/src/components/ContactForm.vue b/src/components/ContactForm.vue
index 50a534c..ed2d92d 100644
--- a/src/components/ContactForm.vue
+++ b/src/components/ContactForm.vue
@@ -1,53 +1,63 @@
 <template>
-    <div id="contactForm" class="flex flex-col justify-center w-full">
-        <form @submit="saveFormData" id="formSection" action="">
-          <div v-if="userQurie">
-            <p class="text-2xl">Write your Qurie</p>
-            <div class="py-3">
-                <label for="name">Name:<span class=text-red-500>*</span></label>
-                <input v-model="name" id="name" name="name" type="text" placeholder="Enter your Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
-            </div>
-            <div>
-                <label for="phone">Mobile:<span class=text-red-500>*</span></label>
-                <input v-model="phone" id="phone" name="phone" type="text" placeholder="Enter your Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
-            </div>
-            <div class="py-3">
-                <label for="email">E-mail ID:<span class=text-red-500>*</span></label>
-                <input v-model="email" id="email" name="email" type="text" placeholder="Enter your E-mail ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
-            </div>
-            <div>
-                <label for="message">Write your Qurie:<span class=text-red-500>*</span></label>
-                <textarea v-model="message" id="message" name="message" rows="7" placeholder="Write your Qurie" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required></textarea>
-            </div>
-            <div class="">
-                <button class="bg-[#3084b5] text-white rounded-lg py-2.5 px-6 float-right" >Submit</button>
-            </div>
-          </div>
-          <div v-else class="flex" >
-              <h1 class="text-center text-black text-4xl p-16">Thank You</h1>
-          </div>
-        </form>
-    </div>
+  <div id="contactForm" class="flex flex-col justify-center w-full">
+    <form @submit="saveFormData" id="formSection" action="">
+      <div v-if="userQuery">
+        <p class="text-2xl">Write your Query</p>
+        <div class="py-3">
+          <label for="name">Name:<span class="text-red-500">*</span></label>
+          <input v-model="name" id="name" name="name" type="text" placeholder="Enter your Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
+        </div>
+        <div>
+          <label for="phone">Mobile:<span class="text-red-500">*</span></label>
+          <input v-model="phone" id="phone" name="phone" type="text" placeholder="Enter your Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
+        </div>
+        <div class="py-3">
+          <label for="email">E-mail ID:<span class="text-red-500">*</span></label>
+          <input v-model="email" id="email" name="email" type="email" placeholder="Enter your E-mail ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
+        </div>
+        <div>
+          <label for="message">Write your Query:<span class="text-red-500">*</span></label>
+          <textarea v-model="message" id="message" name="message" rows="7" placeholder="Write your Query" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required></textarea>
+        </div>
+        <div class="">
+          <button class="bg-[#3084b5] text-white rounded-lg py-2.5 px-6 float-right">Submit</button>
+        </div>
+      </div>
+      <div v-else class="flex">
+        <h1 class="text-center text-black text-4xl p-16">Thank You</h1>
+      </div>
+    </form>
+  </div>
 </template>
+
 <script>
-  export default{
-    data(){
-      return{
+  export default {
+    data() {
+      return {
         name: "",
         phone: "",
         email: "",
         message: "",
-        userQurie: true,
-        domain: 'sample.com',
-        owner: 'Holly Wisdom Public School',
-        referrer: 'Holly Wisdom Public School',
-      }
+        userQuery: true,
+        domain: '',
+        owner: 'Holy Wisdom Public School',
+        referrer: '',
+      };
     },
-    methods:{
-      saveFormData(e){
+    
+    mounted() {
+      // Assign window-dependent values in mounted hook
+      if (typeof window !== 'undefined') {
+          this.domain = window.location.origin;
+          this.referrer = document.referrer;
+        }
+      },
+    
+    methods: {
+      saveFormData(e) {
         e.preventDefault();
         let formData = {
-          data:{
+          data: {
             name: this.name,
             phone: this.phone,
             email: this.email,
@@ -56,22 +66,33 @@
           owner: this.owner,
           domain: this.domain,
           referrer: this.referrer
-        }
-        console.log(formData);
-        fetch(`http://api.siliconpin.com/v3/contact-form-processor/`,
-        {
+        };
+        // console.log(formData);
+        fetch(`https://api.siliconpin.com/v3/contact-form-processor/`, {
           method: 'POST',
           headers: {
-            'Content-Type' : 'application/json'
+            'Content-Type': 'application/json'
           },
           body: JSON.stringify(formData)
         })
         .then(response => response.json())
         .then(resData => {
-          // console.log("Saved Form resData", resData)
+          console.log("Saved Form resData", resData.success);
+          if(resData.success === true){
+            this.userQuery = false;
+          }
+          this.clearForm();
         })
-        this.userQurie = false;
+        .catch(error => {
+          console.error("Error:", error);
+        });
+      },
+      clearForm() {
+        this.name = "";
+        this.phone = "";
+        this.email = "";
+        this.message = "";
       }
     }
-  }
-</script>
\ No newline at end of file
+  };
+</script>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index f2ad201..af3c3f9 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -64,7 +64,6 @@ import Layout from "../layouts/Layout.astro";
     </main>
 </Layout>
 <script is:inline>
-
   document.getElementById('formSection').addEventListener('submit', function(event) {
       event.preventDefault();
 
@@ -75,12 +74,12 @@ import Layout from "../layouts/Layout.astro";
               email: document.getElementById('email').value,
               message: document.getElementById('message').value
           },
-          owner: 'owner_value',
-          domain: 'domain_value',
+          owner: 'Holy Wisdom Public School',
+          domain: window.location.origin,
           referrer: document.referrer   
       };
 
-      fetch('http://192.168.0.166:2053/v3/contact-form-processor/', {
+      fetch('https://api.siliconpin.com/v3/contact-form-processor/', {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json'
@@ -90,96 +89,25 @@ import Layout from "../layouts/Layout.astro";
       .then(response => response.json())
       .then(data => {
           if (data.success) {
-              console.log('Data submitted successfully');
+            //   console.log('Data submitted successfully');
+              if(data.success === true){
+                document.getElementById('formSection').style.display = 'none';
+                document.getElementById('thankYouSection').style.display = 'block';
+              }
+              console.log(data.success)
           } else {
-              console.log('Error: ' + data.message);
+            //   console.log('Error: ' + data.message);
           }
       })
       .catch(error => {
-          console.error('Error:', error);
-          console.log('An error occurred while submitting the form');
+        //   console.error('Error:', error);
+        //   console.log('An error occurred while submitting the form');
       });
   });
 
-
-
-    // document.addEventListener('DOMContentLoaded', function () {
-    //   const contactForm = document.getElementById('contactForm');
-    //   const formSection = document.getElementById('formSection');
-    //   const thankYouSection = document.getElementById('thankYouSection');
-    //   const nameInput = document.getElementById('name');
-    //   const emailInput = document.getElementById('email');
-    //   const phoneInput = document.getElementById('phone');
-    //   const messageInput = document.getElementById('message');
-
-    //   contactForm.addEventListener('submit', async function (event) {
-    //     event.preventDefault();
-    //     let data = {
-    //       data:{
-    //         name: nameInput.value,
-    //         phone: phoneInput.value,
-    //         email: emailInput.value,
-    //         message: messageInput.value
-    //       },
-    //       owner: "Holly Wisdom Public School",
-    //       domain: window.location.origin,
-    //       referrer: "Holly Wisdom Public School"
-    //     }
-    //     console.log("Form Data", data)
-    //     const url = 'https://api.siliconpin.com/v3/contact-form-processor/';
-    //     try {
-    //       const response = await fetch(url, {
-    //         method: 'POST',
-    //         headers: {
-    //           'Content-Type': 'application/json'
-    //         },
-    //         body: JSON.stringify(data)
-    //       });
-    //       if (response.ok) {
-    //         console.log('Form data submitted successfully');
-    //         formSection.style.display = 'none';
-    //         thankYouSection.style.display = 'block';
-    //       } else {
-    //         console.error('Failed to submit form data');
-    //       }
-    //     } catch (error) {
-    //       console.error('An error occurred:', error);
-    //     }
-    //   });
-    // });
 </script>
 <style>
     .gradintBack {
         background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
     }
 </style>
-
-<!-- function submitForm(){
-  const formData = {
-    data: {
-            name: document.getElementById('name').value,
-            email: document.getElementById('email').value,
-            phone: document.getElementById('phone').value
-        },
-        owner: document.getElementById('owner').value,
-        domain: document.getElementById('domain').value,
-        referrer: document.getElementById('referrer').value
-  };
-  fetch(`http://192.168.0.166:2053/v3/contact-form/`, {
-    method: 'POST',
-    headers: {
-      'Content-Type' : 'application/json',
-    },
-    body: JSON.stringify(formData)
-  })
-  .then(response => {
-    if(response.ok){
-      console.log('Form submitted succesfully!');
-    }else{
-      console.log('Form submitted faild!');
-    }
-  })
-  .then(error => {
-    console.error('an error occoured', error);
-  })
-} -->
\ No newline at end of file
diff --git a/src/pages/curriculum.astro b/src/pages/curriculum.astro
index fee1741..40b9e7e 100644
--- a/src/pages/curriculum.astro
+++ b/src/pages/curriculum.astro
@@ -154,7 +154,7 @@ let inSportsData = [
     <main>
         <div>
             <section class="container-fluid gradintBack">
-                <div class="container mx-auto px-4 flex flex-col-reverse lg:flex-row place-items-center">
+                <div class="container mx-auto px-4 flex flex-col-reverse xl:flex-row place-items-center gap-y-4">
                     <div class="w-full">
                         <img class="lg:max-w-3xl" src="/img/school2.png" alt="" />
                     </div>
@@ -318,10 +318,10 @@ let inSportsData = [
                 <div>
                     <dialog id="formModal" class="max-w-2xl rounded-xl">
                         <form method="dialog" class="">
-							<button class="text-3xl text-red-500 bg-[#3084b550] hover:bg-[#3084b580] px-4 py-2 rounded-full float-right">&#10008;</button>
+							            <button type="submit" class="text-3xl text-red-500 bg-[#3084b550] hover:bg-[#3084b580] px-4 py-2 rounded-full float-right">&#10008;</button>
                             <div class="">
-								<ContactForm client:visible/>
-							</div>
+                              <ContactForm client:visible />
+                            </div>
                         </form>
                     </dialog>
                 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ddb4e53..4138608 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,11 +11,10 @@ import FAQ from "../components/FAQ.vue";
 		<div class="pb-16">
 			<section class="container-fluid gradintBack">
 				<div
-					class="container mx-auto px-4 flex flex-col-reverse lg:flex-row place-items-center"
+					class="container mx-auto px-4 flex flex-col-reverse xl:flex-row place-items-center gap-y-4"
 				>
 					<div class="w-full">
-						<!-- <img class="lg:max-w-2xl" src="/img/image.png" alt=""> -->
-						<img class="lg:max-w-2xl" src="public/img/school-image-4.png" alt=""
+						<img class="w-full xl:max-w-2xl" src="public/img/school-image-4.png" alt=""
 						/>
 					</div>
 					<div class="flex flex-col w-full">