diff --git a/package.json b/package.json
index 33d61b2..c3d9f9f 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "flowbite": "^1.7.0",
     "flowbite-typography": "^1.0.3",
     "shiki": "^0.14.3",
+    "swiper": "^9.0.3",
     "tailwind-scrollbar": "^3.0.4",
     "tailwindcss": "^3.2.4",
     "vite-plugin-pwa": "^0.16.4",
@@ -26,6 +27,6 @@
     "workbox-window": "^7.0.0"
   },
   "devDependencies": {
-    "daisyui": "^4.4.19"
+    "daisyui": "^4.4.20"
   }
 }
diff --git a/public/assets/faq.json b/public/assets/faq.json
new file mode 100644
index 0000000..356de69
--- /dev/null
+++ b/public/assets/faq.json
@@ -0,0 +1,55 @@
+{
+    "faqs": [
+      {
+        "questionNumber": 1,
+        "question": "What is the age range for enrollment at Holywisdom Public School?",
+        "answer": "Our preschool welcomes children aged 1 to 3 for enrollment."
+      },
+      {
+        "questionNumber": 2,
+        "question": "What makes Holywisdom's curriculum unique?",
+        "answer": "Our curriculum is designed to foster a love for learning through a child-centric approach, emphasizing creativity, social development, and a well-rounded education."
+      },
+      {
+        "questionNumber": 3,
+        "question": "How can I schedule a tour of the preschool?",
+        "answer": "You can schedule a tour by [insert contact information or directing to the online scheduling system]."
+      },
+      {
+        "questionNumber": 4,
+        "question": "What is the student-to-teacher ratio in the classrooms?",
+        "answer": "We maintain a low student-to-teacher ratio to ensure personalized attention and a supportive learning environment."
+      },
+      {
+        "questionNumber": 5,
+        "question": "Is there a specific admissions process, and how can I apply?",
+        "answer": "Our admissions process includes [outline key steps]. You can apply by [insert application details]."
+      },
+      {
+        "questionNumber": 6,
+        "question": "What is the daily schedule like for preschoolers?",
+        "answer": "The daily schedule includes a balance of structured learning, playtime, creative activities, and rest to provide a comprehensive early education experience."
+      },
+      {
+        "questionNumber": 7,
+        "question": "Are there extracurricular activities offered at Holywisdom?",
+        "answer": "Yes, we offer [list extracurricular activities] to enrich the learning experience."
+      },
+      {
+        "questionNumber": 8,
+        "question": "How does Holywisdom ensure the safety and security of the children?",
+        "answer": "We have stringent safety protocols, including [insert safety measures], to ensure the well-being of every child."
+      },
+      {
+        "questionNumber": 9,
+        "question": "What is the approach to discipline and behavior management?",
+        "answer": "Our approach focuses on positive reinforcement, communication, and teaching self-discipline in a nurturing environment."
+      },
+      {
+        "questionNumber": 10,
+        "question": "How does Holywisdom encourage parent involvement?",
+        "answer": "We encourage parent involvement through fostering a strong partnership between home and school."
+      }
+    ]
+  }
+  
\ No newline at end of file
diff --git a/public/img/faq.jpg b/public/img/faq.jpg
new file mode 100644
index 0000000..97dbdb3
Binary files /dev/null and b/public/img/faq.jpg differ
diff --git a/public/img/school1.jpg b/public/img/school1.jpg
new file mode 100644
index 0000000..4797e3c
Binary files /dev/null and b/public/img/school1.jpg differ
diff --git a/public/img/school2.jpg b/public/img/school2.jpg
new file mode 100644
index 0000000..b7a1adb
Binary files /dev/null and b/public/img/school2.jpg differ
diff --git a/public/img/school2.png b/public/img/school2.png
new file mode 100644
index 0000000..4278819
Binary files /dev/null and b/public/img/school2.png differ
diff --git a/public/img/school3.jpg b/public/img/school3.jpg
new file mode 100644
index 0000000..688ecb4
Binary files /dev/null and b/public/img/school3.jpg differ
diff --git a/public/img/school4.jpg b/public/img/school4.jpg
new file mode 100644
index 0000000..3d44e64
Binary files /dev/null and b/public/img/school4.jpg differ
diff --git a/src/components/ContactForm.astro b/src/components/ContactForm.astro
deleted file mode 100644
index 1bf973b..0000000
--- a/src/components/ContactForm.astro
+++ /dev/null
@@ -1,71 +0,0 @@
-<main>
-    <div id="contactForm" class="flex flex-col justify-center w-full">
-        <form id="formSection" action="">
-            <p class="text-2xl">Write your Qurie</p>
-            <div class="py-3">
-                <label for="name">Name:<span class=text-red-500>*</span></label>
-                <input 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 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 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 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="">
-                <input type="submit" value="Submit" class="bg-[#3084b5] text-white rounded-lg py-2.5 px-6 float-right"/>
-            </div>
-        </form>
-        <div class="flex" id="thankYouSection" style="display: none;">
-            <h1 class="text-center text-black text-4xl">Thank You</h1>
-        </div>
-    </div>
-</main>
-<script is:inline>
-    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();
-        
-        const formData = {
-          name: nameInput.value,
-          email: emailInput.value,
-          mobile: phoneInput.value,
-          message: messageInput.value
-        };
-        console.log("Form Data", formData)
-        const url = 'https://api8.siliconpin.com/items/hps_contact';
-        try {
-          const response = await fetch(url, {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(formData)
-          });
-          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>
\ No newline at end of file
diff --git a/src/components/ContactForm.vue b/src/components/ContactForm.vue
new file mode 100644
index 0000000..6ad9065
--- /dev/null
+++ b/src/components/ContactForm.vue
@@ -0,0 +1,68 @@
+<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>
+</template>
+<script>
+  export default{
+    data(){
+      return{
+        name: "",
+        phone: "",
+        email: "",
+        message: "",
+        userQurie: true,
+      }
+    },
+    methods:{
+      saveFormData(e){
+        e.preventDefault();
+        let formData = {
+          name: this.name,
+          mobile: this.phone,
+          email: this.email,
+          message: this.message
+        }
+        fetch(`https://api8.siliconpin.com/items/hps_contact`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type' : 'application/json'
+          },
+          body: JSON.stringify(formData)
+        })
+        .then(response => response.json())
+        .then(data => {
+          console.log("Saved Form Data")
+        })
+        this.userQurie = false;
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/components/FAQ.vue b/src/components/FAQ.vue
new file mode 100644
index 0000000..64fd059
--- /dev/null
+++ b/src/components/FAQ.vue
@@ -0,0 +1,92 @@
+<template>
+    <div>
+        <section class="mt-16">
+            <div class="flex flex-col lg:flex-row place-content-between gap-x-4">
+                <div class="flex flex-col w-full">
+                <h1 class="text-[#47ae6a] hero-text font-bold">Frequently Asked <span class="text-[#3084b5]">Questions</span> </h1>
+                <div class="grid h-fit" v-for="data in faqData" :key="data.questionNumber">
+                    <details>
+                        <summary> 
+                            <div class="flex inline-flex cursor-pointer">{{ data.question }}</div>
+                        </summary>
+                            <div v-html="data.answer"></div>
+                    </details>
+                </div>
+            </div>
+            <div class="flex justify-center place-items-center">
+                <img class="max-w-lg rounded-full border-2 shadow-xl" src="/img/faq.jpg" alt="">
+            </div>
+            </div>
+        </section>
+    </div>
+</template>
+<script>
+    export default{
+        data(){
+            return{
+                faqData: "",
+            }
+        },
+        mounted(){
+            fetch(`/assets/faq.json`)
+            .then(response => response.json())
+            .then(data => {
+                this.faqData = data.faqs
+                console.log(this.faqData)
+            })
+        }
+    }
+</script>
+<style>
+    .bg3 {
+  background: linear-gradient(0deg, rgb(226, 239, 255) 0%, rgba(255, 255, 255) 40%);}
+    @media screen and (min-width: 1500px) {
+  .hero-text {
+    font-size: 50px;
+    
+    
+  }
+}
+
+@media screen and (max-width: 1499px) {
+  .hero-text {
+    font-size: 40px;
+    
+  }
+}
+@media screen and (max-width: 1199px) {
+  .hero-text {
+    font-size: 30px;
+    
+  }
+}
+    .text-color-1 {
+        color: #7c4c23;
+    }
+    details {
+    font-weight: lighter;
+    border-bottom: 1px solid #d4d4d4;
+    border-color: #d4d4d4;    
+    padding: .75em .75em 0;
+    font-size: 17px;
+    width: 100%;
+	/* margin-top: 10px; */
+	/* box-shadow:0 0 8px #d4d4d4; */
+}
+
+summary {	
+    margin: -.75em -.75em 0;
+    padding: .75em;
+    
+}
+
+details[open] {
+    padding: .75em;
+	  border-bottom: 1px solid #d4d4d4;
+}
+
+details[open] summary {
+    border-bottom: 1px solid #d4d4d4;
+    margin-bottom: 10px;
+}
+</style>
diff --git a/src/components/MainHeader.astro b/src/components/MainHeader.astro
index 067ec6e..7fd235d 100644
--- a/src/components/MainHeader.astro
+++ b/src/components/MainHeader.astro
@@ -10,13 +10,18 @@
     </div>
     <ul class="nav-links">
         <li><a href="/">Home</a></li>
+        <li><a href="/curriculum">Curriculum</a></li>
         <!-- <li><a href="#">Solutions</a></li> -->
         <!-- <li><a href="#">Products</a></li> -->
         <!-- <li><a href="#">Services</a></li> -->
         <li><a href="/about">About</a></li>
         <li><a href="/contact">Contact</a></li>
-        <li><button class="login-button">Login</button></li>
-        <li><button class="join-button">Join</button></li>
+
+        <li><a href="/login">Login</a></li>
+        <li><a href="/sign-up">Signup</a></li>
+
+        <!-- <li><button class="login-button">Login</button></li>
+        <li><button class="join-button">Join</button></li> -->
     </ul>
   </nav>
 </div>
diff --git a/src/components/Slider.vue b/src/components/Slider.vue
new file mode 100644
index 0000000..097e64f
--- /dev/null
+++ b/src/components/Slider.vue
@@ -0,0 +1,83 @@
+<template>
+    <div>
+        <div class="">
+            <swiper class="max-w-2xl cursor-pointer shadow-xl rounded-2xl" draggable="false"
+                :modules="modules"
+                :slides-per-view="1"
+                :space-between="50"
+                navigation
+                pagination
+                :scrollbar="{ draggable: true }"
+                :autoplay=" { delay: 2500, disableOnInteraction: false}"
+                @swiper="onSwiper"
+                @slideChange="onSlideChange">
+                <swiper-slide> <img class=""  src="/img/school1.jpg" alt="" /></swiper-slide>
+                <swiper-slide> <img class=""  src="/img/school2.jpg" alt="" /></swiper-slide>
+                <swiper-slide> <img class=""  src="/img/school3.jpg" alt="" /></swiper-slide>
+                <swiper-slide> <img class=""  src="/img/school4.jpg" alt="" /></swiper-slide>
+            </swiper>
+        </div>
+    </div>
+</template>
+<style>
+    .slider-width {
+        width: 350px;
+    }
+  </style>
+  <script>
+     // Import Swiper Vue.js components
+      import { Swiper, SwiperSlide } from 'swiper/vue';
+      import 'swiper/css/navigation';
+      import 'swiper/css/pagination';
+      import { Navigation, Autoplay, Pagination, Scrollbar, A11y, } from 'swiper';
+  
+    // Import Swiper styles
+    import 'swiper/css';
+    // const swiper = new Swiper('.swiper', {
+    //       autoplay: {
+    //         delay: 5000,
+    //       },
+    //     });
+  
+    export default {
+      components: {
+        Swiper,
+        SwiperSlide,
+      },
+      setup() {
+        const onSwiper = (swiper) => {
+          // console.log(swiper);
+        };
+        const onSlideChange = () => {
+          // console.log('slide change');
+        };
+        
+        
+        return {
+          onSwiper,
+          onSlideChange,
+          modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],
+  
+        };
+      },
+   data() {
+     return {
+         page: null,
+         lessonplan:null,
+         isLoading: true,
+  
+     }
+  },
+   mounted: function () {
+     fetch('https://management.beanstalkedu.com/items/lesson_plan')
+         .then(response => response.json())
+         .then(data => {
+             this.lessonplan = data.data
+             // this.isLoading = false
+             // console.log(this.lessonplan)
+             // return this.page[0].id
+         })
+     },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/src/components/SliderHomepage.vue b/src/components/SliderHomepage.vue
new file mode 100644
index 0000000..097e64f
--- /dev/null
+++ b/src/components/SliderHomepage.vue
@@ -0,0 +1,83 @@
+<template>
+    <div>
+        <div class="">
+            <swiper class="max-w-2xl cursor-pointer shadow-xl rounded-2xl" draggable="false"
+                :modules="modules"
+                :slides-per-view="1"
+                :space-between="50"
+                navigation
+                pagination
+                :scrollbar="{ draggable: true }"
+                :autoplay=" { delay: 2500, disableOnInteraction: false}"
+                @swiper="onSwiper"
+                @slideChange="onSlideChange">
+                <swiper-slide> <img class=""  src="/img/school1.jpg" alt="" /></swiper-slide>
+                <swiper-slide> <img class=""  src="/img/school2.jpg" alt="" /></swiper-slide>
+                <swiper-slide> <img class=""  src="/img/school3.jpg" alt="" /></swiper-slide>
+                <swiper-slide> <img class=""  src="/img/school4.jpg" alt="" /></swiper-slide>
+            </swiper>
+        </div>
+    </div>
+</template>
+<style>
+    .slider-width {
+        width: 350px;
+    }
+  </style>
+  <script>
+     // Import Swiper Vue.js components
+      import { Swiper, SwiperSlide } from 'swiper/vue';
+      import 'swiper/css/navigation';
+      import 'swiper/css/pagination';
+      import { Navigation, Autoplay, Pagination, Scrollbar, A11y, } from 'swiper';
+  
+    // Import Swiper styles
+    import 'swiper/css';
+    // const swiper = new Swiper('.swiper', {
+    //       autoplay: {
+    //         delay: 5000,
+    //       },
+    //     });
+  
+    export default {
+      components: {
+        Swiper,
+        SwiperSlide,
+      },
+      setup() {
+        const onSwiper = (swiper) => {
+          // console.log(swiper);
+        };
+        const onSlideChange = () => {
+          // console.log('slide change');
+        };
+        
+        
+        return {
+          onSwiper,
+          onSlideChange,
+          modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],
+  
+        };
+      },
+   data() {
+     return {
+         page: null,
+         lessonplan:null,
+         isLoading: true,
+  
+     }
+  },
+   mounted: function () {
+     fetch('https://management.beanstalkedu.com/items/lesson_plan')
+         .then(response => response.json())
+         .then(data => {
+             this.lessonplan = data.data
+             // this.isLoading = false
+             // console.log(this.lessonplan)
+             // return this.page[0].id
+         })
+     },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/src/pages/about.astro b/src/pages/about.astro
index eeab8b1..e2130ec 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,5 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import ContactForm from "../components/ContactForm.vue";
 ---
 <Layout title="">
     <main>
@@ -14,7 +15,7 @@ import Layout from "../layouts/Layout.astro";
 						<h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Nurturing Young Minds at Holywisdom Preschool</h2>
 						<h3 class="text-xl text-justify pb-4">A testament to our Montessori-inspired vision, dedicated educators, and vibrant learning spaces. Your child's journey starts here!</h3>
 						<div class="flex flex-row place-content-between">
-							<a href="#" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#FFFFFF] px-4 md:px-8 p-3 bg-[#3084b5] border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</a>
+							<button onclick="formModal.showModal();" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#FFFFFF] px-4 md:px-8 p-3 bg-[#3084b5] border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</button>
 						</div>
 					</div>
 				</div>
@@ -25,6 +26,18 @@ import Layout from "../layouts/Layout.astro";
                     <p>Welcome to the digital gateway of Holywisdom Public School's newest preschool! Explore the essence of early childhood education with our online platform, offering a glimpse into the vibrant and enriching world we've created for your child. Delve into our programs, meet our dedicated educators, and virtually tour our stimulating facilities. Stay connected with our community, receive updates on upcoming events, and embark on the exciting journey of discovery and growth that awaits your little one at Holywisdom Preschool. Start the adventure now!</p>
                 </div>
             </section>
+            <section class="container mx-auto">
+                <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>
+                            <div class="">
+								<ContactForm client:visible/>
+							</div>
+                        </form>
+                    </dialog>
+                </div>
+            </section>
         </div>
     </main>
 </Layout>
diff --git a/src/pages/curriculum.astro b/src/pages/curriculum.astro
new file mode 100644
index 0000000..e224c3b
--- /dev/null
+++ b/src/pages/curriculum.astro
@@ -0,0 +1,62 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Slider from "../components/Slider.vue";
+---
+<Layout title="">
+    <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="w-full">
+						<img class="lg:max-w-3xl" src="/img/school2.png" alt="">
+					</div>
+					<div class="flex flex-col w-full">
+						<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Preschool Learning at Holywisdom</h1>
+						<h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Discovering Bright Beginnings: Holywisdom's Engaging Preschool Curriculum</h2>
+						<h3 class="text-xl text-justify pb-4">Thoughtfully structured and tiered learning resources, influenced by Maria Montessori's principles, tailored to highlight your expertise as an educator. Meticulously designed for seamless integration in both conventional classrooms and homeschooling settings.</h3>
+						<div class="flex flex-row place-content-between">
+							<button onclick="formModal.showModal();" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</button>
+							<p class="text-base xl:text-lg font-bold">Or</p>
+							<a href="#" class="text-sm xl:text-lg rounded-lg text-white shadow-2xl  px-4 md:px-8 p-3 bg-[#3084b5] te border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Let's Check</a>
+						</div>
+					</div>
+				</div>
+			</section>
+            <section class="container mx-auto px-4 pt-16">
+                <div class="">
+                    <h1 class="text-xl md:text-3xl">Curriculum</h1>
+                    <p>Welcome to Holywisdom Public School's Curriculum Page! At Holywisdom, we believe in providing a nurturing and enriching learning experience for your child. Our curriculum is designed to foster a love for learning, encourage creativity, and lay the foundation for a well-rounded education.</p>
+                    <h1 class="text-xl md:text-3xl pt-2">Our Approach</h1>
+                    <p>We follow a child-centric approach to education at Holywisdom, recognizing that each child is unique and learns at their own pace. Our experienced educators create a supportive and engaging environment where curiosity is encouraged, and every child feels valued.</p>
+                    <div class="flex flex-col xl:flex-row gap-x-4">
+                        <div>
+                            <h1 class="text-xl md:text-3xl pt-2">Key Focus Areas</h1>
+                            <h2 class="text-lg md:text-2xl"> 1. Early Literacy and Numeracy:</h2>
+                            <p class="text-base text-justify"> Introduction to letters, numbers, and basic literacy skills through interactive and play-based activities.</p>
+                            <h2 class="text-lg md:text-2xl"> 2. Social and Emotional Development:</h2>
+                            <p class="text-base text-justify"> Activities promoting teamwork, communication, and emotional well-being to develop strong social skills.</p>
+                            <h2 class="text-lg md:text-2xl"> 3. Creative Arts:</h2>
+                            <p class="text-base text-justify"> Exploration of creativity through art, music, and imaginative play, fostering self-expression and confidence.</p>
+                            <h2 class="text-lg md:text-2xl"> 4. Physical Development:</h2>
+                            <p class="text-base text-justify"> Fun and age-appropriate physical activities to enhance motor skills and promote a healthy lifestyle.</p>
+                            <h2 class="text-lg md:text-2xl"> 5. Nature and Science Exploration:</h2>
+                            <p class="text-base text-justify"> Hands-on experiences to spark curiosity about the world, introducing basic science concepts and appreciation for nature.</p>
+                        </div>
+                        <div>
+                            <Slider client:visible />
+                        </div>
+                    </div>
+                    <h1 class="text-xl md:text-3xl pt-2">Daily Schedule</h1>
+                    <p>Our daily schedule at Holywisdom is thoughtfully crafted to provide a balance of structured learning, free play, and rest. This ensures that your child receives a comprehensive and enjoyable early education experience.</p>
+                    <h1 class="text-xl md:text-3xl pt-2">Parental Involvement</h1>
+                    <p>We encourage parental involvement at Holywisdom and believe that collaboration between educators and parents is essential for a child's holistic development. Regular updates, parent-teacher conferences, and special events foster a strong partnership between home and school. Join us at Holywisdom Public School as we embark on an exciting journey of early childhood education together. If you have any questions or would like more information about our curriculum, feel free to reach out. We're here to support you and your child every step of the way</p>
+                </div>
+            </section>
+        </div>
+    </main>
+</Layout>
+<style>
+	.gradintBack {
+        background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c946e23..6e7d1b9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,8 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import ContactForm from '../components/ContactForm.astro';
+import ContactForm from '../components/ContactForm.vue';
+import SliderHomepage from '../components/SliderHomepage.vue';
+import FAQ from '../components/FAQ.vue'
 ---
 <!-- An AI powered British Preschool Curriculum -->
 <Layout title="Welcome to Astro.">
@@ -24,9 +26,14 @@ import ContactForm from '../components/ContactForm.astro';
 				</div>
 			</section>
 			<section class="container mx-auto px-4 my-10">
-                <div class="">
-                    <h1 class="text-3xl">Enter Our Preschool World!</h1>
-					<p>Welcome to the digital gateway of Holywisdom Public School's newest preschool! Explore the essence of early childhood education with our online platform, offering a glimpse into the vibrant and enriching world we've created for your child. Delve into our programs, meet our dedicated educators, and virtually tour our stimulating facilities. Stay connected with our community, receive updates on upcoming events, and embark on the exciting journey of discovery and growth that awaits your little one at Holywisdom Preschool. Start the adventure now!</p>
+                <div class="flex flex-col xl:flex-row gap-x-10">
+					<div class="flex flex-col justify-center">
+						<h1 class="text-3xl">Enter Our Preschool World!</h1>
+						<p class="text-justify text-lg">Welcome to the digital gateway of Holywisdom Public School's newest preschool! Explore the essence of early childhood education with our online platform, offering a glimpse into the vibrant and enriching world we've created for your child. Delve into our programs, meet our dedicated educators, and virtually tour our stimulating facilities. Stay connected with our community, receive updates on upcoming events, and embark on the exciting journey of discovery and growth that awaits your little one at Holywisdom Preschool. Start the adventure now!</p>
+					</div>
+					<div>
+						<SliderHomepage client:visible />
+					</div>
 				</div>
             </section>
 			<section class="container mx-auto px-4 ">
@@ -60,13 +67,16 @@ import ContactForm from '../components/ContactForm.astro';
                     <p class="text-lg">At Holywisdom Public School, we are dedicated to following the Maria Montessori method and draw inspiration from the visionary Iswar Chandra Vidyasagar. Our educational philosophy aligns with their principles, creating an environment that honors the individuality of each child and nurtures their natural development. We believe in fostering a love for learning that lasts a lifetime, embodying the ideals envisioned by Maria Montessori and Iswar Chandra Vidyasagar.</p>
                 </div>
 			</section>
+			<div class="container mx-auto px-4">
+				<FAQ client:visible />
+			</div>
 			<section class="container mx-auto">
                 <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>
                             <div class="">
-								<ContactForm />
+								<ContactForm client:visible/>
 							</div>
                         </form>
                     </dialog>
diff --git a/src/pages/login.astro b/src/pages/login.astro
new file mode 100644
index 0000000..803e224
--- /dev/null
+++ b/src/pages/login.astro
@@ -0,0 +1,24 @@
+
+<main>
+    <div class="content">
+        <section class="container mx-auto max-w-lg bg-[url(/img/hps_logo.png)] rounded-2xl">
+            <div class="flex flex-col w-full justify-center place-items-center border-[1px] border-[#0e0f0420] rounded-[20px] shadow-2xl py-10">
+                <img class="max-w-[150px] shadow-lg p-2 py-6 border-[1px] rounded-full" src="/img/hps_logo.png" alt="">
+                <form action="" class="p-6">
+                    <input v-model="name" id="name" name="name" type="text" placeholder="User ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
+                    <input v-model="name" id="name" name="name" type="password" placeholder="Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-6" required/>
+                    <button class="border-2 border-[#3084b5] text-white bg-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-4">Login</button>
+                </form>
+                <p class="">Not Registerd? <a href="/sign-up" class="text-[#FFFFFF] font-bold">Register Now</a></p>
+            </div>
+        </section>
+    </div>
+</main>
+<style>
+    .content {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/sign-up.astro b/src/pages/sign-up.astro
new file mode 100644
index 0000000..2339dbb
--- /dev/null
+++ b/src/pages/sign-up.astro
@@ -0,0 +1,29 @@
+<main>
+    <div class="content">
+        <section class="container mx-auto max-w-lg bg-[url(/img/hps_logo.png)] rounded-2xl">
+            <div class="flex flex-col w-full justify-center place-items-center border-[1px] border-[#0e0f0420] rounded-[20px] shadow-2xl py-10">
+                <img class="max-w-[150px] shadow-lg p-2 py-6 border-[1px] rounded-full" src="/img/hps_logo.png" alt="">
+                <form action="" class="p-6 space-y-4">
+                    <input v-model="name" id="name" name="name" type="text" placeholder="Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
+                    <input v-model="name" id="name" name="name" type="text" placeholder="Email ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
+                    <input v-model="name" id="name" name="name" type="text" placeholder="Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
+                    <input v-model="name" id="name" name="name" type="password" placeholder="New Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
+                    <input v-model="name" id="name" name="name" type="password" placeholder="Confirm Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
+                    <button class="border-2 border-[#3084b5] text-white bg-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-4">Register</button>
+                </form>
+                <div class="flex flex-col place-content-between float-left">
+                    <p class="">Back to <a href="/login" class="text-[#3084b5] font-bold">Login</a></p>
+                    <p class="">Continue Without <a href="/" class="text-[#3084b5] font-bold">Login</a></p>
+                </div>
+            </div>
+        </section>
+    </div>
+</main>
+<style>
+    .content {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+</style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index e4024e7..21b7ddc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2280,10 +2280,10 @@ culori@^3:
   resolved "https://registry.yarnpkg.com/culori/-/culori-3.3.0.tgz#e33530adbd124d53bd6550394397e695eaaed739"
   integrity sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==
 
-daisyui@^4.4.19:
-  version "4.4.19"
-  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-4.4.19.tgz#90187e2ce5c914e774bb174a13f446aac7f555ad"
-  integrity sha512-IjOLWwnndD4N7Ut5CDxbUsaVtbqXPeVHM92IcgxGFxpuOd3CCKW/PAXZH6JoBTHFRaN57vB9XqEhdWm5yC+bPA==
+daisyui@^4.4.20:
+  version "4.4.20"
+  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-4.4.20.tgz#3f010eb3d1fc7b4b5824524d27a07adea6e4578d"
+  integrity sha512-AR2fuFVVLHVTdbkV+XWAqjtymEoxXksrsEMkdzPQo2wANtWjSXuODUzePNade64gJ0Y2CdQtiQkaZI7fWcp13g==
   dependencies:
     css-selector-tokenizer "^0.8"
     culori "^3"
@@ -5328,6 +5328,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
+ssr-window@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 stdin-discarder@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/stdin-discarder/-/stdin-discarder-0.1.0.tgz#22b3e400393a8e28ebf53f9958f3880622efde21"
@@ -5518,6 +5523,13 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
 
+swiper@^9.0.3:
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-9.4.1.tgz#2f48bcd6ab4b4fcf4ae93eaee53980531d42fd42"
+  integrity sha512-1nT2T8EzUpZ0FagEqaN/YAhRj33F2x/lN6cyB0/xoYJDMf8KwTFT3hMOeoB8Tg4o3+P/CKqskP+WX0Df046fqA==
+  dependencies:
+    ssr-window "^4.0.2"
+
 synckit@^0.8.0, synckit@^0.8.4:
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"