diff --git a/public/assets/lg.ttf b/public/assets/lg.ttf
new file mode 100644
index 0000000..213afec
Binary files /dev/null and b/public/assets/lg.ttf differ
diff --git a/public/assets/school_image/hps-image1.jpg b/public/assets/school_image/hps-image1.jpg
index 1defed0..9396cfe 100644
Binary files a/public/assets/school_image/hps-image1.jpg and b/public/assets/school_image/hps-image1.jpg differ
diff --git a/public/assets/school_image/hps-image10.jpg b/public/assets/school_image/hps-image10.jpg
index a308834..0bb4baf 100644
Binary files a/public/assets/school_image/hps-image10.jpg and b/public/assets/school_image/hps-image10.jpg differ
diff --git a/public/assets/school_image/hps-image11.jpg b/public/assets/school_image/hps-image11.jpg
index 30b59a9..51d5f40 100644
Binary files a/public/assets/school_image/hps-image11.jpg and b/public/assets/school_image/hps-image11.jpg differ
diff --git a/public/assets/school_image/hps-image13.jpg b/public/assets/school_image/hps-image13.jpg
index dd8e12d..6da2f0b 100644
Binary files a/public/assets/school_image/hps-image13.jpg and b/public/assets/school_image/hps-image13.jpg differ
diff --git a/public/assets/school_image/hps-image14.jpg b/public/assets/school_image/hps-image14.jpg
index 302b355..242a24b 100644
Binary files a/public/assets/school_image/hps-image14.jpg and b/public/assets/school_image/hps-image14.jpg differ
diff --git a/public/assets/school_image/hps-image15.jpg b/public/assets/school_image/hps-image15.jpg
deleted file mode 100644
index 896e2a0..0000000
Binary files a/public/assets/school_image/hps-image15.jpg and /dev/null differ
diff --git a/public/assets/school_image/hps-image16.jpg b/public/assets/school_image/hps-image16.jpg
index abcd3a7..895ede8 100644
Binary files a/public/assets/school_image/hps-image16.jpg and b/public/assets/school_image/hps-image16.jpg differ
diff --git a/public/assets/school_image/hps-image17.jpg b/public/assets/school_image/hps-image17.jpg
index a192ccc..c970396 100644
Binary files a/public/assets/school_image/hps-image17.jpg and b/public/assets/school_image/hps-image17.jpg differ
diff --git a/public/assets/school_image/hps-image18.jpg b/public/assets/school_image/hps-image18.jpg
index be9217e..8f9d4e5 100644
Binary files a/public/assets/school_image/hps-image18.jpg and b/public/assets/school_image/hps-image18.jpg differ
diff --git a/public/assets/school_image/hps-image19.jpg b/public/assets/school_image/hps-image19.jpg
index 5a1cc97..23de2dd 100644
Binary files a/public/assets/school_image/hps-image19.jpg and b/public/assets/school_image/hps-image19.jpg differ
diff --git a/public/assets/school_image/hps-image2.jpg b/public/assets/school_image/hps-image2.jpg
index 247b40a..5285878 100644
Binary files a/public/assets/school_image/hps-image2.jpg and b/public/assets/school_image/hps-image2.jpg differ
diff --git a/public/assets/school_image/hps-image20.jpg b/public/assets/school_image/hps-image20.jpg
index a1744f1..3083b29 100644
Binary files a/public/assets/school_image/hps-image20.jpg and b/public/assets/school_image/hps-image20.jpg differ
diff --git a/public/assets/school_image/hps-image21.jpg b/public/assets/school_image/hps-image21.jpg
index 4f24531..18418bf 100644
Binary files a/public/assets/school_image/hps-image21.jpg and b/public/assets/school_image/hps-image21.jpg differ
diff --git a/public/assets/school_image/hps-image22.jpg b/public/assets/school_image/hps-image22.jpg
index 751f2cc..e9f5808 100644
Binary files a/public/assets/school_image/hps-image22.jpg and b/public/assets/school_image/hps-image22.jpg differ
diff --git a/public/assets/school_image/hps-image23.jpg b/public/assets/school_image/hps-image23.jpg
index 41b883d..5420fc6 100644
Binary files a/public/assets/school_image/hps-image23.jpg and b/public/assets/school_image/hps-image23.jpg differ
diff --git a/public/assets/school_image/hps-image24.jpg b/public/assets/school_image/hps-image24.jpg
index 9c2e0bc..f741181 100644
Binary files a/public/assets/school_image/hps-image24.jpg and b/public/assets/school_image/hps-image24.jpg differ
diff --git a/public/assets/school_image/hps-image25.jpg b/public/assets/school_image/hps-image25.jpg
index bfe2694..0b89e71 100644
Binary files a/public/assets/school_image/hps-image25.jpg and b/public/assets/school_image/hps-image25.jpg differ
diff --git a/public/assets/school_image/hps-image26.jpg b/public/assets/school_image/hps-image26.jpg
index 681d78e..35966b1 100644
Binary files a/public/assets/school_image/hps-image26.jpg and b/public/assets/school_image/hps-image26.jpg differ
diff --git a/public/assets/school_image/hps-image27.jpg b/public/assets/school_image/hps-image27.jpg
index ed00da6..e052d34 100644
Binary files a/public/assets/school_image/hps-image27.jpg and b/public/assets/school_image/hps-image27.jpg differ
diff --git a/public/assets/school_image/hps-image28.jpg b/public/assets/school_image/hps-image28.jpg
index fb33eb0..441adc7 100644
Binary files a/public/assets/school_image/hps-image28.jpg and b/public/assets/school_image/hps-image28.jpg differ
diff --git a/public/assets/school_image/hps-image29.jpg b/public/assets/school_image/hps-image29.jpg
index 05c4d29..acef6ce 100644
Binary files a/public/assets/school_image/hps-image29.jpg and b/public/assets/school_image/hps-image29.jpg differ
diff --git a/public/assets/school_image/hps-image3.jpg b/public/assets/school_image/hps-image3.jpg
index 9476a15..7100b96 100644
Binary files a/public/assets/school_image/hps-image3.jpg and b/public/assets/school_image/hps-image3.jpg differ
diff --git a/public/assets/school_image/hps-image30.jpg b/public/assets/school_image/hps-image30.jpg
index 0a820d0..c45c3ca 100644
Binary files a/public/assets/school_image/hps-image30.jpg and b/public/assets/school_image/hps-image30.jpg differ
diff --git a/public/assets/school_image/hps-image31.jpg b/public/assets/school_image/hps-image31.jpg
index c98cf49..c57d467 100644
Binary files a/public/assets/school_image/hps-image31.jpg and b/public/assets/school_image/hps-image31.jpg differ
diff --git a/public/assets/school_image/hps-image4.jpg b/public/assets/school_image/hps-image4.jpg
index bc75d44..7fb93dd 100644
Binary files a/public/assets/school_image/hps-image4.jpg and b/public/assets/school_image/hps-image4.jpg differ
diff --git a/public/assets/school_image/hps-image5.jpg b/public/assets/school_image/hps-image5.jpg
index 48f7e4f..0fe9d4c 100644
Binary files a/public/assets/school_image/hps-image5.jpg and b/public/assets/school_image/hps-image5.jpg differ
diff --git a/public/assets/school_image/hps-image6.jpg b/public/assets/school_image/hps-image6.jpg
index 0e38d49..00e19ef 100644
Binary files a/public/assets/school_image/hps-image6.jpg and b/public/assets/school_image/hps-image6.jpg differ
diff --git a/public/assets/school_image/hps-image7.jpg b/public/assets/school_image/hps-image7.jpg
index 4e42856..ecdf6b4 100644
Binary files a/public/assets/school_image/hps-image7.jpg and b/public/assets/school_image/hps-image7.jpg differ
diff --git a/public/assets/school_image/hps-image8.jpg b/public/assets/school_image/hps-image8.jpg
index a7c8270..25c34b8 100644
Binary files a/public/assets/school_image/hps-image8.jpg and b/public/assets/school_image/hps-image8.jpg differ
diff --git a/public/assets/school_image/hps-image9.jpg b/public/assets/school_image/hps-image9.jpg
index d239578..760b923 100644
Binary files a/public/assets/school_image/hps-image9.jpg and b/public/assets/school_image/hps-image9.jpg differ
diff --git a/src/components/MainHeader.astro b/src/components/MainHeader.astro
index 47c7548..d9c69d0 100644
--- a/src/components/MainHeader.astro
+++ b/src/components/MainHeader.astro
@@ -16,6 +16,7 @@
         <!-- <li><a href="#">Services</a></li> -->
         <li><a href="/about">About</a></li>
         <li><a href="/overview">Overview</a></li>
+        <li><a href="/gallery">Gallery</a></li>
         <li><a href="/admission">Admission</a></li>
         <li><a href="/contact">Contact</a></li>
 
diff --git a/src/components/SliderHomepage.vue b/src/components/SliderHomepage.vue
index 097e64f..a533962 100644
--- a/src/components/SliderHomepage.vue
+++ b/src/components/SliderHomepage.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="">
-            <swiper class="max-w-2xl cursor-pointer shadow-xl rounded-2xl" draggable="false"
+            <swiper  class="max-w-2xl cursor-pointer shadow-xl rounded-2xl" draggable="false"
                 :modules="modules"
                 :slides-per-view="1"
                 :space-between="50"
@@ -11,6 +11,8 @@
                 :autoplay=" { delay: 2500, disableOnInteraction: false}"
                 @swiper="onSwiper"
                 @slideChange="onSlideChange">
+                
+                <swiper-slide v-for="(item, index) in img3DResInter" :key="index"> <img class="aspect-video"  :src="item.image_src" alt="" /></swiper-slide>
                 <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>
@@ -65,6 +67,7 @@
          page: null,
          lessonplan:null,
          isLoading: true,
+         img3DResInter: [{ image_src: "/assets/school_image/hps-image1.jpg" },{ image_src: "/assets/school_image/hps-image2.jpg" },{ image_src: "/assets/school_image/hps-image3.jpg" },{ image_src: "/assets/school_image/hps-image4.jpg" },{ image_src: "/assets/school_image/hps-image5.jpg" },{ image_src: "/assets/school_image/hps-image6.jpg" },{ image_src: "/assets/school_image/hps-image7.jpg" },{ image_src: "/assets/school_image/hps-image8.jpg" },{ image_src: "/assets/school_image/hps-image9.jpg" },{ image_src: "/assets/school_image/hps-image10.jpg" },{ image_src: "/assets/school_image/hps-image11.jpg" },{ image_src: "/assets/school_image/hps-image12.jpg" },{ image_src: "/assets/school_image/hps-image13.jpg" },{ image_src: "/assets/school_image/hps-image14.jpg" },{ image_src: "/assets/school_image/hps-image16.jpg" },{ image_src: "/assets/school_image/hps-image17.jpg" },{ image_src: "/assets/school_image/hps-image18.jpg" },{ image_src: "/assets/school_image/hps-image19.jpg" },{ image_src: "/assets/school_image/hps-image20.jpg" },{ image_src: "/assets/school_image/hps-image21.jpg" },{ image_src: "/assets/school_image/hps-image22.jpg" },{ image_src: "/assets/school_image/hps-image23.jpg" },{ image_src: "/assets/school_image/hps-image24.jpg" },{ image_src: "/assets/school_image/hps-image25.jpg" },{ image_src: "/assets/school_image/hps-image26.jpg" },{ image_src: "/assets/school_image/hps-image27.jpg" },{ image_src: "/assets/school_image/hps-image28.jpg" },{ image_src: "/assets/school_image/hps-image29.jpg" },{ image_src: "/assets/school_image/hps-image30.jpg" },{ image_src: "/assets/school_image/hps-image31.jpg" }]
   
      }
   },
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 0c529e7..626f497 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -10,9 +10,9 @@ import Layout from "../layouts/Layout.astro";
 						<img class="lg:max-w-2xl" src="/img/rec_girl.png" alt="">
 					</div>
 					<div class="flex flex-col w-full">
-						<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Get in Touch with Holywisdom Preschool!</h1>
-						<h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Contact us for a brighter start at Holywisdom Preschool!</h2>
-						<h3 class="text-xl text-justify pb-4">Drop us a line at Holywisdom Preschool – your gateway to educational excellence!</h3>
+						<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Get in Touch with Holywisdom Public School!</h1>
+						<h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Contact us for a brighter start at Holywisdom Public School!</h2>
+						<h3 class="text-xl text-justify pb-4">Drop us a line at Holywisdom Public School – your gateway to educational excellence!</h3>
 						<!-- <div class="flex flex-row place-content-between">
 							<a href="#" 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</a>
 						</div> -->
@@ -21,8 +21,8 @@ import Layout from "../layouts/Layout.astro";
 			</section>
             <section class="container mx-auto px-4 my-10">
                 <div class="">
-                    <h1 class="text-2xl">Reach Out to Holywisdom Preschool</h1>
-                    <p class="">Contacting Holywisdom Preschool is your first step toward a seamless connection with our dedicated team. Whether you have inquiries about our programs, enrollment details, or simply want to learn more about our unique approach to early childhood education, we're here to help. Your child's journey with us begins with a conversation. Reach out through the provided contact information, and let's embark on the path of educational discovery together. We look forward to hearing from you and welcoming your family into the Holywisdom community.</p>
+                    <h1 class="text-2xl">Reach Out to Holywisdom Public School</h1>
+                    <p class="">Contacting Holywisdom Public School is your first step toward a seamless connection with our dedicated team. Whether you have inquiries about our programs, enrollment details, or simply want to learn more about our unique approach to early childhood education, we're here to help. Your child's journey with us begins with a conversation. Reach out through the provided contact information, and let's embark on the path of educational discovery together. We look forward to hearing from you and welcoming your family into the Holywisdom community.</p>
                 </div>
             </section>
             <section class="container mx-auto px-4 my-16">
diff --git a/src/pages/curriculum.astro b/src/pages/curriculum.astro
index e292ab0..ae99fda 100644
--- a/src/pages/curriculum.astro
+++ b/src/pages/curriculum.astro
@@ -251,7 +251,7 @@ let inSportsData = [
                         {outSportsData.map((data) => (
                             <div class="drop-shadow-2xl flex flex-col justify-center place-items-center items-center hover:bg-[#3084b530] p-2 rounded-lg duration-[1s] cursor-pointer">
                                 <img class="" src={data.image} alt="" />
-                                <h2 class="pt-3">{data.name}</h2>
+                                <h2 class="pt-3 text-center">{data.name}</h2>
                             </div>
                         ))}
                     </div>
@@ -260,7 +260,7 @@ let inSportsData = [
                         {inSportsData.map((data) => (
                             <div class="drop-shadow-2xl flex flex-col justify-center place-items-center items-center hover:bg-[#3084b530] p-2 rounded-lg duration-[1s] cursor-pointer">
                                 <img class="" src={data.image} alt="" />
-                                <h2 class="pt-3">{data.name}</h2>
+                                <h2 class="pt-3 ">{data.name}</h2>
                             </div>
                         ))}
                     </div>                    
diff --git a/src/pages/form.astro b/src/pages/form.astro
new file mode 100644
index 0000000..854d4b5
--- /dev/null
+++ b/src/pages/form.astro
@@ -0,0 +1,40 @@
+<div>
+    <input type="text" name="name" id="name" style="border: 1px solid #000"><br>
+    <input type="text" name="mobile" id="mobile" style="border: 1px solid #000"><br>
+    <input type="text" name="email" id="email" style="border: 1px solid #000"><br>
+    <textarea name="message" id="message" style="border: 1px solid #000"></textarea><br>
+    <button onclick="saveForm(event)" type="submit" style="border: 1px solid #000">Submit</button>
+</div>
+
+<script is:inline>
+    function saveForm(event){
+        event.preventDefault();
+        let userName = document.getElementById('name').value;
+        let userMobile = document.getElementById('mobile').value;
+        let userEmail = document.getElementById('email').value;
+        let userMessage = document.getElementById('message').value;
+
+        let userData = {
+            name : userName,
+            mobile: userMobile,
+            email: userEmail,
+            message: userMessage 
+        }
+
+
+        fetch(`https://game-du.teachertrainingkolkata.in/items/contact`, {
+            method: 'POST',
+            headers:{
+                'Content-Type' : 'application/json'
+            },
+            body: JSON.stringify(userData)
+        })
+        .then(response => response.json())
+        .then(data => {
+            console.log(data)
+        })
+        .then(error => {
+            console.error(error)
+        })
+    }
+</script>
\ No newline at end of file
diff --git a/src/pages/gallery.astro b/src/pages/gallery.astro
index e42cf10..eb770e4 100644
--- a/src/pages/gallery.astro
+++ b/src/pages/gallery.astro
@@ -1,53 +1,53 @@
 ---
 import Layout from "../layouts/Layout.astro";
-const img3DResInter = [{ image_src: "/assets/school_image/hps-image1.jpg" },{ image_src: "/assets/school_image/hps-image2.jpg" },{ image_src: "/assets/school_image/hps-image3.jpg" },{ image_src: "/assets/school_image/hps-image4.jpg" },{ image_src: "/assets/school_image/hps-image5.jpg" },{ image_src: "/assets/school_image/hps-image6.jpg" },{ image_src: "/assets/school_image/hps-image7.jpg" },{ image_src: "/assets/school_image/hps-image8.jpg" },{ image_src: "/assets/school_image/hps-image9.jpg" },{ image_src: "/assets/school_image/hps-image10.jpg" },{ image_src: "/assets/school_image/hps-image11.jpg" },{ image_src: "/assets/school_image/hps-image12.jpg" },{ image_src: "/assets/school_image/hps-image13.jpg" },{ image_src: "/assets/school_image/hps-image14.jpg" },{ image_src: "/assets/school_image/hps-image15.jpg" },{ image_src: "/assets/school_image/hps-image16.jpg" },{ image_src: "/assets/school_image/hps-image17.jpg" },{ image_src: "/assets/school_image/hps-image18.jpg" },{ image_src: "/assets/school_image/hps-image19.jpg" },{ image_src: "/assets/school_image/hps-image20.jpg" },{ image_src: "/assets/school_image/hps-image21.jpg" },{ image_src: "/assets/school_image/hps-image22.jpg" },{ image_src: "/assets/school_image/hps-image23.jpg" },{ image_src: "/assets/school_image/hps-image24.jpg" },{ image_src: "/assets/school_image/hps-image25.jpg" },{ image_src: "/assets/school_image/hps-image26.jpg" },{ image_src: "/assets/school_image/hps-image27.jpg" },{ image_src: "/assets/school_image/hps-image28.jpg" },{ image_src: "/assets/school_image/hps-image29.jpg" },{ image_src: "/assets/school_image/hps-image30.jpg" },{ image_src: "/assets/school_image/hps-image31.jpg" }];
+const img3DResInter = [{ image_src: "/assets/school_image/hps-image1.jpg" },{ image_src: "/assets/school_image/hps-image2.jpg" },{ image_src: "/assets/school_image/hps-image3.jpg" },{ image_src: "/assets/school_image/hps-image4.jpg" },{ image_src: "/assets/school_image/hps-image5.jpg" },{ image_src: "/assets/school_image/hps-image6.jpg" },{ image_src: "/assets/school_image/hps-image7.jpg" },{ image_src: "/assets/school_image/hps-image8.jpg" },{ image_src: "/assets/school_image/hps-image9.jpg" },{ image_src: "/assets/school_image/hps-image10.jpg" },{ image_src: "/assets/school_image/hps-image11.jpg" },{ image_src: "/assets/school_image/hps-image12.jpg" },{ image_src: "/assets/school_image/hps-image13.jpg" },{ image_src: "/assets/school_image/hps-image14.jpg" },{ image_src: "/assets/school_image/hps-image16.jpg" },{ image_src: "/assets/school_image/hps-image17.jpg" },{ image_src: "/assets/school_image/hps-image18.jpg" },{ image_src: "/assets/school_image/hps-image19.jpg" },{ image_src: "/assets/school_image/hps-image20.jpg" },{ image_src: "/assets/school_image/hps-image21.jpg" },{ image_src: "/assets/school_image/hps-image22.jpg" },{ image_src: "/assets/school_image/hps-image23.jpg" },{ image_src: "/assets/school_image/hps-image24.jpg" },{ image_src: "/assets/school_image/hps-image25.jpg" },{ image_src: "/assets/school_image/hps-image26.jpg" },{ image_src: "/assets/school_image/hps-image27.jpg" },{ image_src: "/assets/school_image/hps-image28.jpg" },{ image_src: "/assets/school_image/hps-image29.jpg" },{ image_src: "/assets/school_image/hps-image30.jpg" },{ image_src: "/assets/school_image/hps-image31.jpg" }];
 
 ---
+
 <Layout title="">
     <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 lg:flex-row  place-items-center">
                 <div class="w-full">
-                    <img class="lg:max-w-2xl" src="/img/rec_girl.png" alt="">
+                    <img class="lg:max-w-2xl aspect-video" src="/assets/school_image/hps-image8.jpg" alt="">
                 </div>
                 <div class="flex flex-col w-full">
                     <h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Holy Wisdom Paublic School Gallery!</h1>
+                    <!-- <h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Contact us for a brighter start at Holywisdom Preschool!</h2> -->
+                    <!-- <h3 class="text-xl text-justify pb-4">Drop us a line at Holywisdom Preschool – your gateway to educational excellence!</h3> -->
+                    <!-- <div class="flex flex-row place-content-between">
+                        <a href="#" 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</a>
+                    </div> -->
                 </div>
             </div>
         </section>
-        <section class="container mx-auto px-4">
+        <section class="container mx-auto px-4 mt-8">
             <div class="demo-gallery">
-                <ul id="lightgallery4" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
-                    {img3DResInter.map((data: { image_src: string | undefined }) => (
-                        <li
-                            class="w-full md:w-[300px]"
-                            data-responsive={`${data.image_src} 375, ${data.image_src} 480, ${data.image_src} 800`}
-                            data-src={data.image_src}
-                            data-sub-html=" "
-                        >
-                            <a href="">
-                                <div class="w-full md:w-[400px] h-[400px]">
-                                    <img class="img-responsive" src={data.image_src} alt="School Image" />
+                <ul id="lightgallery4">
+                    {img3DResInter.map((data) => (
+                        <li class="w-full md:w-[300px] aspect-video" data-responsive={`${data.image_src} 375, ${data.image_src} 480, ${data.image_src} 800`} data-src={data.image_src} data-sub-html=" " >
+                            <a href="#">
+                                <div class="w-full md:w-[400px] aspect-video">
+                                    <img class="img-responsive aspect-video" src={data.image_src} alt="Gallery item" />
                                 </div>
                                 <div class="demo-gallery-poster">
-                                    <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png" alt="Zoom Icon" />
+                                    <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png" alt="Zoom icon" />
                                 </div>
                             </a>
                         </li>
                     ))}
                 </ul>
-            </div>
+              </div>
+              
         </section>
     </div>
 </Layout>
-
 <script is:inline src="/assets/lightgallery.min.js"></script>
 <link rel="stylesheet" href="/assets/lightgallery.min.css">
 
 <script is:inline>
-  lightGallery(document.getElementById('lightgallery4'));
+  lightGallery(document.getElementById('lightgallery4'))
 </script>
-
 <style>
 .gradintBack {
     background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
@@ -56,51 +56,130 @@ const img3DResInter = [{ image_src: "/assets/school_image/hps-image1.jpg" },{ im
     margin-bottom: 0;
     padding-left: 15px;
     padding-right: 15px;
-}
-.demo-gallery > ul > li {
+    }
+
+    .demo-gallery > ul > li {
     margin-bottom: 15px;
     display: inline-block;
     list-style: outside none none;
-}
-.demo-gallery > ul > li a {
+    }
+
+    .demo-gallery > ul > li a {
     border: 3px solid #FFF;
     border-radius: 3px;
     display: block;
     overflow: hidden;
     position: relative;
     background-color: #fff;
-}
-.demo-gallery > ul > li a > img {
-    transition: transform 0.15s ease;
+    }
+
+    .demo-gallery > ul > li a > img {
+    -webkit-transition: -webkit-transform 0.15s ease 0s;
+    -moz-transition: -moz-transform 0.15s ease 0s;
+    -o-transition: -o-transform 0.15s ease 0s;
+    transition: transform 0.15s ease 0s;
+    -webkit-transform: scale3d(1, 1, 1);
     transform: scale3d(1, 1, 1);
     height: 100%;
     width: 100%;
-}
-.demo-gallery > ul > li a:hover > img {
+    }
+
+    .demo-gallery > ul > li a:hover > img {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
     transform: scale3d(1.1, 1.1, 1.1);
-}
-.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
+    }
+
+    .demo-gallery > ul > li a:hover .demo-gallery-poster > img {
     opacity: 1;
-}
-.demo-gallery > ul > li a .demo-gallery-poster {
+    }
+
+    .demo-gallery > ul > li a .demo-gallery-poster {
     background-color: rgba(0, 0, 0, 0.1);
     bottom: 0;
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
-    transition: background-color 0.15s ease;
-}
-.demo-gallery > ul > li a .demo-gallery-poster > img {
+    -webkit-transition: background-color 0.15s ease 0s;
+    -o-transition: background-color 0.15s ease 0s;
+    transition: background-color 0.15s ease 0s;
+    }
+
+    .demo-gallery > ul > li a .demo-gallery-poster > img {
     left: 50%;
     margin-left: -10px;
     margin-top: -10px;
     opacity: 0;
     position: absolute;
     top: 50%;
-    transition: opacity 0.3s ease;
-}
-.demo-gallery > ul > li a:hover .demo-gallery-poster {
+    -webkit-transition: opacity 0.3s ease 0s;
+    -o-transition: opacity 0.3s ease 0s;
+    transition: opacity 0.3s ease 0s;
+    }
+
+    .demo-gallery > ul > li a:hover .demo-gallery-poster {
     background-color: rgba(0, 0, 0, 0.5);
-}
-</style>
+    }
+
+    .demo-gallery .justified-gallery > a > img {
+    -webkit-transition: -webkit-transform 0.15s ease 0s;
+    -moz-transition: -moz-transform 0.15s ease 0s;
+    -o-transition: -o-transform 0.15s ease 0s;
+    transition: transform 0.15s ease 0s;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+    height: 100%;
+    width: 100%;
+    }
+
+    .demo-gallery .justified-gallery > a:hover > img {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+    }
+
+    .demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
+    opacity: 1;
+    }
+
+    .demo-gallery .justified-gallery > a .demo-gallery-poster {
+    background-color: rgba(0, 0, 0, 0.1);
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    -webkit-transition: background-color 0.15s ease 0s;
+    -o-transition: background-color 0.15s ease 0s;
+    transition: background-color 0.15s ease 0s;
+    }
+
+    .demo-gallery .justified-gallery > a .demo-gallery-poster > img {
+    left: 50%;
+    margin-left: -10px;
+    margin-top: -10px;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    -webkit-transition: opacity 0.3s ease 0s;
+    -o-transition: opacity 0.3s ease 0s;
+    transition: opacity 0.3s ease 0s;
+
+
+    }
+
+    .demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
+    background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    .demo-gallery .video .demo-gallery-poster img {
+    height: 48px;
+    margin-left: -24px;
+    margin-top: -24px;
+    opacity: 0.8;
+    width: 48px;
+    }
+
+    .demo-gallery.dark > ul > li a {
+    border: 3px solid #04070a;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/login.astro b/src/pages/login.astro
index 803e224..a334891 100644
--- a/src/pages/login.astro
+++ b/src/pages/login.astro
@@ -5,15 +5,37 @@
             <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>
+                    <input id="email" name="email" type="text" placeholder="User ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
+                    <input id="password" name="password" 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 onclick="myFunction(event)" 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>
+<script is:inline>
+    function myFunction(event){
+        event.preventDefault();
+        let emailId = document.getElementById('email').value;
+        let password = document.getElementById('password').value;
+        let userData = {
+            email : emailId,
+            password : password
+        }
+        fetch(`https://game-du.teachertrainingkolkata.in/auth/login`, {
+            method: 'POST',
+            headers: {
+                'Content-Type' : 'application/json'
+            },
+            body: JSON.stringify(userData)
+        })
+        .then(res => res.json())
+        .then(data => {
+            console.log(data)
+        })
+    }
+</script>
 <style>
     .content {
         position: absolute;
diff --git a/src/pages/sign-up.astro b/src/pages/sign-up.astro
index 2339dbb..29adaca 100644
--- a/src/pages/sign-up.astro
+++ b/src/pages/sign-up.astro
@@ -2,23 +2,64 @@
     <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>
+                <img class="max-w-[150px] shadow-lg p-2 py-6 border-[1px] rounded-full" src="/img/hps_logo.png" alt="Logo">
+                <form action="" class="p-6 space-y-4" onsubmit="signUp(event)">
+                    <input 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 id="email" name="email" type="email" placeholder="Email ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
+                    <input id="mobile" name="mobile" type="text" placeholder="Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
+                    <input id="password" name="password" type="password" placeholder="New Password" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
+                    <input id="con_password" name="con_password" type="password" placeholder="Confirm Password" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
+                    <button type="submit" 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 class="flex flex-col">
+                    <p>Back to <a href="/login" class="text-[#3084b5] font-bold">Login</a></p>
+                    <p><a href="/" class="text-[#3084b5] font-bold">Continue</a> Without Login</p>
                 </div>
             </div>
         </section>
     </div>
 </main>
+
+<script is:inline>
+    function signUp(event) {
+        event.preventDefault(); // Prevent form submission
+        let password = document.getElementById('password').value;
+        let conPassword = document.getElementById('con_password').value;
+
+        if (password !== conPassword) {
+            alert('Passwords do not match. Please try again.');
+            return;
+        }
+
+        let userName = document.getElementById('name').value;
+        let userEmail = document.getElementById('email').value;
+        let userMobile = document.getElementById('mobile').value;
+
+        let userSignData = {
+            name: userName,
+            email: userEmail,
+            mobile: userMobile,
+            password: password
+        };
+        console.log(userSignData)
+
+        fetch('https://game-du.teachertrainingkolkata.in/users', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(userSignData)
+        })
+        .then(res => res.json())
+        .then(data => {
+            console.log(data)
+        })
+        .catch(error => {
+            console.error('Error:', error);
+        });
+    }
+</script>
+
 <style>
     .content {
         position: absolute;
@@ -26,4 +67,4 @@
         left: 50%;
         transform: translate(-50%, -50%);
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/test.astro b/src/pages/test.astro
new file mode 100644
index 0000000..9b68d33
--- /dev/null
+++ b/src/pages/test.astro
@@ -0,0 +1,20 @@
+<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
+    <div class="h-[200px] text-center bg-[#f59e0b]">
+        Grid - 1
+    </div>
+    <div class="h-[200px] text-center bg-[#84cc16]">
+        Grid - 2
+    </div>
+    <div class="h-[200px] text-center bg-[#84cc16]">
+        Grid - 3
+    </div>
+    <div class="h-[200px] text-center bg-[#4f46e5]">
+        Grid - 4
+    </div>
+    <div class="h-[200px] text-center bg-[#db2777]">
+        Grid - 5
+    </div>
+    <div class="h-[200px] text-center bg-[#b91c1c]">
+        Grid - 6
+    </div>
+</div>