diff --git a/astro.config.mjs b/astro.config.mjs
index ad34329..45afe62 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -8,7 +8,7 @@ import vue from "@astrojs/vue";
 
 // https://astro.build/config
 
-// https://astro.build/config
+import partytown from '@astrojs/partytown';
 export default defineConfig({
-  integrations: [tailwind(), vue()]
+  integrations: [tailwind(), vue(),partytown()]
 });
\ No newline at end of file
diff --git a/package.json b/package.json
index 39bb185..ee7342b 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "push:prod": "rsync -azP dist/ teenybeanspreschoolcurriculum@15.207.69.124:/home/teenybeanspreschoolcurriculum/public_html"
   },
   "dependencies": {
+    "@astrojs/partytown": "^1.0.3",
     "@astrojs/tailwind": "^2.1.3",
     "@astrojs/vue": "^1.2.2",
     "astro": "^1.7.2",
diff --git a/src/components/EducatorsLicense.vue b/src/components/EducatorsLicense.vue
index 85b5879..4109111 100644
--- a/src/components/EducatorsLicense.vue
+++ b/src/components/EducatorsLicense.vue
@@ -5,9 +5,6 @@
             <div class="flex justify-center">
                 <div class="grid ">
                     <div class="wrapper flex flex-col lg:flex-row text-lg gap-4 place-items-center">
-                        <!-- <h1 class="justify-center">Teacher Accounts</h1> -->
-                        <!-- <input class="flex w-96 slider mt-3" type="range" min="0" max="100" step="1" v-model="sliderValue">  -->
-                        <!-- <div class="flex flex-row"><span class="border-2 border-black px-1" v-text="sliderValue"></span></div> -->
                     </div>
                     <div class="grid grid-cols-2 py-3">
                         <h1 class="grid ">Student Accounts</h1>
@@ -64,37 +61,6 @@
             </div>
             <!-- <div class="flex justify-center my-16"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Subscribe Now</button></div> -->
         </section>
-        <section class="container mx-auto my-16 px-4">
-                <div class="flex flex-col lg:flex-row place-items-center justify-center xl:px-56">
-                    <div class="flex flex-col justify-center">
-                        <div class="flex flex-col justify-center bg-gray-200 text-center border-radius w-fit">
-                                <h1 class="text-3xl md:text-4xl text-center p-3 font-semibold">Write to Us</h1>
-                                <h1 class="text-xl md:text-2xl text-color-1 md:w-full text-left px-6 text-justify">Have queries regarding Hows and Whats of choosing a oerfect plan for you and your Preschool? Write to Us your Queries and we’ll get back to you ASAP<span></span></h1>
-                        </div> 
-                    </div>
-                    <div class="flex flex-col">
-                        <div class="block p-6 rounded-xl shadow-lg bg-white w-fit lg:w-96 border-2 py-14 text-lg">
-                                <div class="form-group mb-1">
-                                    <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
-                                    <input type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
-                                </div>
-                                <div class="form-group mb-1">
-                                    <label for="exampleInputEmail" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
-                                    <input type="email" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
-                                </div>
-                                <div class="flex flex-col form-control place-content-center">
-                                    <div class="text-left py-2">Your Message</div>
-                                    <textarea class="w-full textarea textarea-bordered border box text-lg focus:outline-none focus:bg-white focus:border-gray-100" ></textarea>
-                                </div>
-                                <div class="form-group form-check mb-6 pt-4">
-                                    <input type="checkbox" value="whatsapp"  class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer">
-                                    <label class="form-check-label inline-block text-gray-800" >Keep me updated on WhatsApp</label>
-                                </div>
-                                <button @click="" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Contact us</button>
-                        </div>
-                    </div>
-                </div>
-        </section>
     </div>
 </template>
 <style scoped>
diff --git a/src/components/EducatorsLicenseForm.vue b/src/components/EducatorsLicenseForm.vue
new file mode 100644
index 0000000..ee80b92
--- /dev/null
+++ b/src/components/EducatorsLicenseForm.vue
@@ -0,0 +1,105 @@
+<template>
+    <div>
+        <section class="container mx-auto my-16 px-4">
+            <div class="flex flex-col lg:flex-row place-items-center justify-center xl:px-56">
+                <div class="flex flex-col justify-center">
+                    <div class="flex flex-col justify-center bg-gray-200 text-center border-radius w-fit">
+                            <h1 class="text-3xl md:text-4xl text-center p-3 font-semibold">Write to Us</h1>
+                            <h1 class="text-xl md:text-2xl text-color-1 md:w-full text-left px-6 text-justify">Have queries regarding Hows and Whats of choosing a oerfect plan for you and your Preschool? Write to Us your Queries and we’ll get back to you ASAP<span></span></h1>
+                    </div> 
+                </div>
+                <div class="flex flex-col">
+                    <div class="block p-6 rounded-xl shadow-lg bg-white w-fit lg:w-96 border-2 py-14 text-lg">
+                            <div class="form-group mb-1">
+                                <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
+                                <input type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
+                            </div>
+                            <div class="form-group mb-1">
+                                <label for="exampleInputEmail" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
+                                <input type="email" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
+                            </div>
+                            <div class="flex flex-col form-control place-content-center">
+                                <div class="text-left py-2">Your Message</div>
+                                <textarea class="w-full textarea textarea-bordered border box text-lg focus:outline-none focus:bg-white focus:border-gray-100" ></textarea>
+                            </div>
+                            <div class="form-group form-check mb-6 pt-4">
+                                <input type="checkbox" value="whatsapp"  class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer">
+                                <label class="form-check-label inline-block text-gray-800" >Keep me updated on WhatsApp</label>
+                            </div>
+                            <button @click="" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Contact us</button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        sliderValue: 55,
+      }
+    },
+  }
+  </script>
+<style scoped>
+
+.slider {
+  -webkit-appearance: none;
+  height: 6px;
+  border-radius: 16px;
+  background: rgba(0, 0, 0, 0.3);
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+}
+
+
+
+/* .slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 2px;
+  height: 2px;
+  background: rgba(0, 102, 255, 1);
+  border-radius: 50px;
+  cursor: pointer;
+} */
+
+.slider::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    background: rgba(0, 102, 255, 1);
+    border-radius: 50px;
+    cursor: pointer;
+}
+.slider:hover::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    background: rgb(0, 102, 255, 1);
+    border-radius: 50px;
+    border-width: 6px;
+    border-color: rgba(217, 214, 214, 1);
+    cursor: pointer;
+}
+
+.border-radius{
+    border-top-left-radius: 200px;
+    height: 400px;
+}
+    .background {
+        background-color: #00CD08;
+    }
+    .text-color-1 {
+        color:  #333333;
+    }
+    .text-color-2 {
+        color: #00CD08;
+    }
+    .text-color-3 {
+        color: #00CD08;
+    }
+    
+</style>
\ No newline at end of file
diff --git a/src/components/SchoolLicense.vue b/src/components/SchoolLicense.vue
deleted file mode 100644
index 867720b..0000000
--- a/src/components/SchoolLicense.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<template>
-    <div>
-        <section class="container mx-auto px-4 xl:px-24">
-            <h1 class="text-color-3 text-5xl text-center py-16 font-bold">Teacher's License </h1>
-                <div class="flex flex-row justify-center">
-                <h1 class="justify-center">Teacher Accounts: &nbsp;</h1>
-                <input class="flex slider mt-3" type="range" min="0" max="100" step="1" v-model="sliderValue">  &nbsp;
-                    <span class="border border-black px-1 h-fit rounded-md" v-text="sliderValue"></span>
-            </div>
-            <div class="flex flex-row justify-center 2xl:gap-x-96 space-x-48 md:space-x-96 mt-8">
-                <div class="flex">Student Accounts</div>
-                <div class="flex">30</div>
-            </div>
-            <div class="flex flex-col lg:flex-row justify-center gap-4 xl:space-x-48 mt-10">
-                <div class="form-group mb-1">
-                    <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
-                    <input type="text" v-model="gtname" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
-                </div>
-                <div class="form-group mb-1">
-                    <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
-                    <input type="text" v-model="gtname" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
-                </div>
-            </div>
-            <div class="flex justify-center my-10"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Calculate Quote</button></div>
-            
-        </section>
-        <section class="container mx-auto my-16 px-4 xl:px-24">
-            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center my-4 gap-x-16 gap-y-6">
-                <div class="grid grid-rows-2 w-full h-full">
-                    <div class="grid background place-items-center rounded-lg py-8">
-                        <h1 class="text-3xl text-white ">Monthly</h1>
-                    </div>
-                    <div class="grid shadow-2xl rounded-b-lg place-items-center">
-                        <h1 class="text-4xl p-1 text-center">&#36;100</h1>
-                        <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
-                        <a href="/payment" class="py-2"><button class="shadow-2xl rounded-lg background text-white p-2 px-4 text-lg w-fit">Subscribe Now</button></a>
-                    </div>
-                </div>
-                <div class="grid grid-rows-2 w-full">
-                    <div class="grid background place-items-center rounded-lg">
-                        <h1 class="text-3xl text-white ">Bi-Yearly</h1>
-                    </div>
-                    <div class="grid shadow-2xl rounded-b-xl place-items-center">
-                        <h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;600</span>&nbsp;&nbsp;&#36;540 </h1>
-                        <span class="text-lg text-color-2">(10% Discount)</span>
-                        <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
-                        <a href="/payment" class="py-2"><button class="shadow-2xl rounded-lg background text-white p-2 px-4 text-lg w-fit">Subscribe Now</button></a>
-                    </div>
-                </div>
-                <div class="grid grid-rows-2 w-full">
-                    <div class="grid background place-items-center rounded-lg">
-                        <h1 class="text-3xl text-white h-fit">Yearly</h1>
-                    </div>
-                    <div class="grid shadow-2xl rounded-b-xl place-items-center">
-                        <h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;1200</span>&nbsp;&nbsp;&#36;1020 </h1>
-                        <span class="text-lg text-color-2">(15% Discount)</span>
-                        <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
-                        <a href="/payment" class="py-2"><button class="shadow-2xl rounded-lg background text-white p-2 px-4 text-lg w-fit">Subscribe Now</button></a>
-                    </div>
-                </div>
-            </div>
-            <!-- <div class="flex justify-center my-16"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Subscribe Now</button></div> -->
-        </section>
-        <section class="container mx-auto my-16 px-4">
-                <div class="flex flex-col lg:flex-row place-items-center justify-center xl:px-56">
-                    <div class="flex flex-col justify-center">
-                        <div class="flex flex-col justify-center bg-gray-200 text-center border-radius w-fit">
-                                <h1 class="text-3xl md:text-4xl text-center p-3 font-semibold">Write to Us</h1>
-                                <h1 class="text-xl md:text-2xl text-color-1 md:w-full text-left px-6 text-justify">Have queries regarding Hows and Whats of choosing a oerfect plan for you and your Preschool? Write to Us your Queries and we’ll get back to you ASAP<span></span></h1>
-                        </div> 
-                    </div>
-                    <div class="flex flex-col">
-                        <div class="block p-6 rounded-xl shadow-lg bg-white w-fit lg:w-96 border-2 py-14 text-lg">
-                                <div class="form-group mb-1">
-                                    <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
-                                    <input type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
-                                </div>
-                                <div class="form-group mb-1">
-                                    <label for="exampleInputEmail" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
-                                    <input type="email" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
-                                </div>
-                                <div class="flex flex-col form-control place-content-center">
-                                    <div class="text-left py-2">Your Message</div>
-                                    <textarea class="w-full textarea textarea-bordered border box text-lg focus:outline-none focus:bg-white focus:border-gray-100" ></textarea>
-                                </div>
-                                <div class="form-group form-check mb-6 pt-4">
-                                    <input type="checkbox" value="whatsapp"  class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer">
-                                    <label class="form-check-label inline-block text-gray-800" >Keep me updated on WhatsApp</label>
-                                </div>
-                                <button @click="" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Contact Us</button>
-                        </div>
-                    </div>
-                </div>
-        </section>
-    </div>
-</template>
-<style scoped>
-
-
-.slider {
-  -webkit-appearance: none;
-  height: 6px;
-  border-radius: 16px;
-  background: rgba(0, 0, 0, 0.3);
-  outline: none;
-  opacity: 0.7;
-  -webkit-transition: .2s;
-  transition: opacity .2s;
-  width: 50%;
-}
-
-
-
-/* .slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 2px;
-  height: 2px;
-  background: rgba(0, 102, 255, 1);
-  border-radius: 50px;
-  cursor: pointer;
-} */
-
-.slider::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
-    background: rgba(0, 102, 255, 1);
-    border-radius: 50px;
-    cursor: pointer;
-}
-.slider:hover::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
-    background: rgb(0, 102, 255, 1);
-    border-radius: 50px;
-    border-width: 6px;
-    border-color: rgba(217, 214, 214, 1);
-    cursor: pointer;
-}
-
-.border-radius{
-    border-top-left-radius: 200px;
-    height: 400px;
-    width: 100%;
-}
-    .background {
-        background-color: #124BBD;
-    }
-    .text-color-1 {
-        color:  #333333;
-    }
-    .text-color-2 {
-        color: #124BBD;
-    }
-    .text-color-3 {
-        color: #124BBD;
-    }
-    
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        sliderValue: 55,
-      }
-    },
-  }
-  </script>
\ No newline at end of file
diff --git a/src/components/SchoolLicenseForm.vue b/src/components/SchoolLicenseForm.vue
new file mode 100644
index 0000000..8ad22a1
--- /dev/null
+++ b/src/components/SchoolLicenseForm.vue
@@ -0,0 +1,33 @@
+<template>
+    <section class="container mx-auto my-16 px-4">
+        <div class="flex flex-col lg:flex-row place-items-center justify-center xl:px-56">
+            <div class="flex flex-col justify-center">
+                <div class="flex flex-col justify-center bg-gray-200 text-center border-radius w-fit">
+                    <h1 class="text-3xl md:text-4xl text-center p-3 font-semibold">Write to Us</h1>
+                    <h1 class="text-xl md:text-2xl text-color-1 md:w-full text-left px-6 text-justify">Have queries regarding Hows and Whats of choosing a oerfect plan for you and your Preschool? Write to Us your Queries and we’ll get back to you ASAP<span></span></h1>
+                </div> 
+            </div>
+            <div class="flex flex-col">
+                <div class="block p-6 rounded-xl shadow-lg bg-white w-fit lg:w-96 border-2 py-14 text-lg">
+                    <div class="form-group mb-1">
+                        <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
+                        <input type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
+                    </div>
+                    <div class="form-group mb-1">
+                        <label for="exampleInputEmail" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
+                        <input type="email" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
+                    </div>
+                    <div class="flex flex-col form-control place-content-center">
+                        <div class="text-left py-2">Your Message</div>
+                        <textarea class="w-full textarea textarea-bordered border box text-lg focus:outline-none focus:bg-white focus:border-gray-100" ></textarea>
+                    </div>
+                    <div class="form-group form-check mb-6 pt-4">
+                        <input type="checkbox" value="whatsapp"  class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer">
+                        <label class="form-check-label inline-block text-gray-800" >Keep me updated on WhatsApp</label>
+                    </div>
+                    <button @click="" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Contact Us</button>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
\ No newline at end of file
diff --git a/src/components/SchoolLicenseSlider.vue b/src/components/SchoolLicenseSlider.vue
new file mode 100644
index 0000000..8b6ef54
--- /dev/null
+++ b/src/components/SchoolLicenseSlider.vue
@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <section class="container mx-auto px-4 xl:px-24">
+            <h1 class="text-color-3 text-5xl text-center py-16 font-bold">Teacher's License </h1>
+                <div class="flex flex-row justify-center">
+                <h1 class="justify-center">Teacher Accounts: &nbsp;</h1>
+                <input class="flex slider mt-3" type="range" min="0" max="100" step="1" v-model="sliderValue">  &nbsp;
+                    <span class="border border-black px-1 h-fit rounded-md" v-text="sliderValue"></span>
+            </div>
+            <div class="flex flex-row justify-center 2xl:gap-x-96 space-x-48 md:space-x-96 mt-8">
+                <div class="flex">Student Accounts</div>
+                <div class="flex">30</div>
+            </div>
+            <div class="flex flex-col lg:flex-row justify-center gap-4 xl:space-x-48 mt-10">
+                <div class="form-group mb-1">
+                    <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
+                    <input type="text" v-model="gtname" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
+                </div>
+                <div class="form-group mb-1">
+                    <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
+                    <input type="text" v-model="gtname" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
+                </div>
+            </div>
+            <div class="flex justify-center my-10"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Calculate Quote</button></div>
+        </section>
+    </div>
+</template>
+<script is:inline>
+  export default {
+    data() {
+      return {
+        sliderValue: 55,
+      }
+    },
+  }
+  </script>
+  <style>
+        .slider {
+      -webkit-appearance: none;
+      height: 6px;
+      border-radius: 16px;
+      background: rgba(0, 0, 0, 0.3);
+      outline: none;
+      opacity: 0.7;
+      -webkit-transition: .2s;
+      transition: opacity .2s;
+      width: 50%;
+    }
+    
+    
+    
+    /* .slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 2px;
+      height: 2px;
+      background: rgba(0, 102, 255, 1);
+      border-radius: 50px;
+      cursor: pointer;
+    } */
+    
+    .slider::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+        background: rgba(0, 102, 255, 1);
+        border-radius: 50px;
+        cursor: pointer;
+    }
+    .slider:hover::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+        background: rgb(0, 102, 255, 1);
+        border-radius: 50px;
+        border-width: 6px;
+        border-color: rgba(217, 214, 214, 1);
+        cursor: pointer;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/educators-license.astro b/src/pages/educators-license.astro
index 540dd7f..fd5826e 100644
--- a/src/pages/educators-license.astro
+++ b/src/pages/educators-license.astro
@@ -1,11 +1,180 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Menu from "../components/Menu.astro";
-import EducatorsLicense from "../components/EducatorsLicense.vue";
+import EducatorsLicenseForm from "../components/EducatorsLicenseForm.vue";
 import Footer from "../components/Footer.vue";
+
+const response = await fetch('http://ip-api.com/json');
+const data = await response.json();
+const country = data.country;
 ---
 <Layout title="">
     <Menu/>
-    <EducatorsLicense client:visible/>
+    <main>
+        <div>
+            <section class="container mx-auto px-4 xl:px-24">
+                <h1 class="text-color-3 text-5xl text-center py-16 font-semibold">Educator's License</h1>
+                <div class="flex justify-center">
+                    <div class="grid ">
+                        <div class="wrapper flex flex-col lg:flex-row text-lg gap-4 place-items-center">
+                        </div>
+                        <div class="grid grid-cols-2 py-3">
+                            <h1 class="grid ">Student Accounts</h1>
+                            <div class="grid place-items-end"><strong class="">(30)</strong></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-col lg:flex-row justify-center gap-4 px-4">
+                    <div class="form-group mb-1">
+                        <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
+                        <input type="text" v-model="gtname" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
+                    </div>
+                    <div class="form-group mb-1">
+                        <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
+                        <input type="text" v-model="gtname" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
+                    </div>
+                </div>
+                <div class="flex justify-center my-10"><button class="background text-white py-3 px-4 text-lg rounded-tl-xl rounded-br-xl">Calculate Quote</button></div>
+            </section>
+            <section class="container mx-auto px-4 xl:px-24 my-16">
+                <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center my-4 gap-6">
+                    <div class="grid grid-rows-2 w-full h-full">
+                        <div class="grid background place-items-center rounded-lg py-8">
+                            <h1 class="text-3xl text-white ">Monthly</h1>
+                        </div>
+                        <div class="grid shadow-2xl rounded-b-xl place-items-center">
+                            {country=="India" ?
+                                <div class="flex flex-col justify-center place-items-center">
+                                    <p class="text-4xl font-bold">&#8377; 100</p>
+                                    <p>(inclusive of all costs)</p>
+                                    <a style=" width: 135px; border-radius: 8px; background-color: #00CD08; text-align: center; font-weight: 800; padding: 11px 0px; color: white; font-size: 18px; display: inline-block; text-decoration: none; " href='https://pmny.in/DJx35l8vrQAH' > Pay Now </a>
+                                    <span class="py-4"></span>
+                                </div>
+                                :
+                                <div>
+                                    <h1 class="text-4xl p-1 text-center">&#36;100</h1>
+                                    <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
+                                    <button style="background-color:#00CD08;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em;cursor:pointer"id="checkout-button-price_1MUNBLSJqIKN8UICnyrOswxg"role="link" type="button"> Checkout</button>
+                                    <span class="py-4"></span>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                    <div class="grid grid-rows-2 w-full">
+                        <div class="grid background place-items-center rounded-lg">
+                            <h1 class="text-3xl text-white ">Bi-Yearly</h1>
+                        </div>
+                        <div class="grid shadow-2xl rounded-b-xl place-items-center">
+                            {country=="India" ?
+                                <div class="flex flex-col justify-center place-items-center">
+                                    <p class="text-4xl font-bold">&#8377; 540</p>
+                                    <p>(inclusive of all costs)</p>
+                                    <a style=" width: 135px; border-radius: 8px; background-color: #00CD08; text-align: center; font-weight: 800; padding: 11px 0px; color: white; font-size: 18px; display: inline-block; text-decoration: none; " href='https://pmny.in/DJx35l8vrQAH' > Pay Now </a>
+                                    <span class="py-4"></span>
+                                </div>
+                                :
+                                <div class="flex flex-col justify-center place-items-center">
+                                    <h1 class="text-4xl p-1">
+                                        <span class="line-through text-slate-400">&#36;600</span>&nbsp;&nbsp;&#36;540 
+                                    </h1>
+                                    <span class="text-lg text-color-2">(10% Discount)</span>
+                                    <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
+                                    <button style="background-color:#00CD08;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em;cursor:pointer"id="checkout-button-price_1MUNBLSJqIKN8UICnyrOswxg"role="link" type="button"> Checkout</button>
+                                    <span class="py-4"></span>
+                                </div>  
+                            }
+                        </div>
+                    </div>
+                    <div class="grid grid-rows-2 w-full">
+                        <div class="grid background place-items-center rounded-lg">
+                            <h1 class="text-3xl text-white ">Yearly</h1>
+                        </div>
+                        <div class="grid shadow-2xl rounded-b-xl place-items-center">
+                            {country=="India" ? 
+                                <div class="flex flex-col justify-center place-items-center">
+                                    <p class="text-4xl font-bold">&#8377; 1020</p>
+                                    <p>(inclusive of all costs)</p>
+                                    <a style=" width: 135px; border-radius: 8px; background-color: #00CD08; text-align: center; font-weight: 800; padding: 11px 0px; color: white; font-size: 18px; display: inline-block; text-decoration: none; " href='https://pmny.in/DJx35l8vrQAH' > Pay Now </a>
+                                    <span class="py-4"></span>
+                                </div>
+                                :
+                                <div class="flex flex-col justify-center place-items-center">
+                                    <h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;1200</span>&nbsp;&nbsp;&#36;1020 </h1>
+                                    <span class="text-lg text-color-2">(15% Discount)</span>
+                                    <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
+                                    <button style="background-color:#00CD08;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em;cursor:pointer"id="checkout-button-price_1MUNBLSJqIKN8UICnyrOswxg"role="link" type="button"> Checkout</button>
+                                    <span class="py-4"></span>
+                                </div>
+                            } 
+                        </div>
+                    </div>
+                </div>
+                <!-- <div class="flex justify-center my-16"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Subscribe Now</button></div> -->
+            </section>
+        </div>
+    </main>
+    <EducatorsLicenseForm client:visible/>
     <Footer client:visible/>
-</Layout>
\ No newline at end of file
+</Layout>
+
+<style scoped>
+
+
+    .slider {
+      -webkit-appearance: none;
+      height: 6px;
+      border-radius: 16px;
+      background: rgba(0, 0, 0, 0.3);
+      outline: none;
+      opacity: 0.7;
+      -webkit-transition: .2s;
+      transition: opacity .2s;
+    }
+    
+    
+    
+    /* .slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 2px;
+      height: 2px;
+      background: rgba(0, 102, 255, 1);
+      border-radius: 50px;
+      cursor: pointer;
+    } */
+    
+    .slider::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+        background: rgba(0, 102, 255, 1);
+        border-radius: 50px;
+        cursor: pointer;
+    }
+    .slider:hover::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+        background: rgb(0, 102, 255, 1);
+        border-radius: 50px;
+        border-width: 6px;
+        border-color: rgba(217, 214, 214, 1);
+        cursor: pointer;
+    }
+    
+    .border-radius{
+        border-top-left-radius: 200px;
+        height: 400px;
+    }
+        .background {
+            background-color: #00CD08;
+        }
+        .text-color-1 {
+            color:  #333333;
+        }
+        .text-color-2 {
+            color: #00CD08;
+        }
+        .text-color-3 {
+            color: #00CD08;
+        }
+        
+    </style>
\ No newline at end of file
diff --git a/src/pages/school-license.astro b/src/pages/school-license.astro
index 24ea40f..4e74b70 100644
--- a/src/pages/school-license.astro
+++ b/src/pages/school-license.astro
@@ -1,11 +1,200 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Menu from "../components/Menu.astro";
-import SchoolLicense from "../components/SchoolLicense.vue";
+import SchoolLicenseSlider from "../components/SchoolLicenseSlider.vue";
+import SchoolLicenseForm from "../components/SchoolLicenseForm.vue";
 import Footer from "../components/Footer.vue";
+
+const response = await fetch('http://ip-api.com/json');
+const data = await response.json();
+const country = data.country;
 ---
 <Layout title="">
     <Menu/>
-    <SchoolLicense client:visible/>
+    <SchoolLicenseSlider client:visible/>
+    <main>
+        <div>
+            <!-- <h1>{data.country}</h1> -->
+            <section class="container mx-auto my-16 px-4 xl:px-24">
+                <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center justify-center my-4 gap-x-16 gap-y-6">
+                    <div class="grid grid-rows-2 w-full h-fit">
+                        <div class="grid background place-items-center rounded-lg py-8">
+                            <h1 class="text-3xl text-white h-fit font-bold">Monthly</h1>
+                        </div>
+                        <div class="grid shadow-2xl rounded-b-lg place-items-center">
+                            {country=="India" ?
+                                <div class="flex flex-col justify-center place-items-center">
+                                    <p class="text-4xl font-bold">&#8377; 100</p>
+                                    <p>(inclusive of all costs)</p>
+                                    <a style=" width: 135px; border-radius: 8px; background-color: #124BBD; text-align: center; font-weight: 800; padding: 11px 0px; color: white; font-size: 18px; display: inline-block; text-decoration: none; " href='https://pmny.in/DJx35l8vrQAH' > Pay Now </a>
+                                    <span class="py-4"></span>
+                                </div>
+                                :
+                                <div>
+                                    <h1 class="text-4xl p-1 text-center">&#36;100</h1>
+                                    <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
+                                    <button style="background-color:#124BBD;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em;cursor:pointer"id="checkout-button-price_1MUNBLSJqIKN8UICnyrOswxg"role="link" type="button"> Checkout</button>
+                                    <span class="py-4"></span>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                    <div class="grid grid-rows-2 w-full h-fit">
+                        <div class="grid background place-items-center rounded-lg">
+                            <h1 class="text-3xl text-white font-bold">Bi-Yearly</h1>
+                        </div>
+                        <div class="grid shadow-2xl rounded-b-xl place-items-center">
+                            {country=="India" ?
+                                <div class="flex flex-col justify-center place-items-center">
+                                    <p class="text-4xl font-bold">&#8377; 540</p>
+                                    <p>(inclusive of all costs)</p>
+                                    <a style=" width: 135px; border-radius: 8px; background-color: #124BBD; text-align: center; font-weight: 800; padding: 11px 0px; color: white; font-size: 18px; display: inline-block; text-decoration: none; " href='https://pmny.in/DJx35l8vrQAH' > Pay Now </a>
+                                    <span class="py-4"></span>
+                                </div>
+                                :
+                                <div class="flex flex-col justify-center place-items-center">
+                                    <h1 class="text-4xl p-1">
+                                        <span class="line-through text-slate-400">&#36;600</span>&nbsp;&nbsp;&#36;540 
+                                    </h1>
+                                    <span class="text-lg text-color-2">(10% Discount)</span>
+                                    <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
+                                    <button style="background-color:#124BBD;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em;cursor:pointer"id="checkout-button-price_1MUNBLSJqIKN8UICnyrOswxg"role="link" type="button"> Checkout</button>
+                                    <span class="py-4"></span>
+                                </div>  
+                            }                            
+                        </div>
+                    </div>
+                    <div class="grid grid-rows-2 w-full">
+                        <div class="grid background place-items-center rounded-lg">
+                            <h1 class="text-3xl text-white font-bold">Yearly</h1>
+                        </div>
+                        <div class="grid shadow-2xl rounded-b-xl place-items-center">
+                            {country=="India" ? 
+                                <div class="flex flex-col justify-center place-items-center">
+                                    <p class="text-4xl font-bold">&#8377; 1020</p>
+                                    <p>(inclusive of all costs)</p>
+                                    <a style=" width: 135px; border-radius: 8px; background-color: #124BBD; text-align: center; font-weight: 800; padding: 11px 0px; color: white; font-size: 18px; display: inline-block; text-decoration: none; " href='https://pmny.in/DJx35l8vrQAH' > Pay Now </a>
+                                    <span class="py-4"></span>
+                                </div>
+                                :
+                                <div class="flex flex-col justify-center place-items-center">
+                                    <h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;1200</span>&nbsp;&nbsp;&#36;1020 </h1>
+                                    <span class="text-lg text-color-2">(15% Discount)</span>
+                                    <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
+                                    <button style="background-color:#124BBD;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em;cursor:pointer"id="checkout-button-price_1MUNBLSJqIKN8UICnyrOswxg"role="link" type="button"> Checkout</button>
+                                    <span class="py-4"></span>
+                                </div>
+                            }                            
+                        </div>
+                    </div>
+                </div>
+                <div id="error-message"></div>
+
+                <!-- <div class="flex justify-center my-16"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Pay Now</button></div> -->
+            </section>
+        </div>
+    </main>
+    <SchoolLicenseForm client:visible/>
     <Footer client:visible/>
-</Layout>
\ No newline at end of file
+</Layout>
+
+<script  is:inline src="https://js.stripe.com/v3"></script>
+<script is:inline>
+(function() {
+var stripe =
+Stripe('pk_live_51Jp9QPSJqIKN8UICMumatjNFXJzcfLKv8BVLTiGsvlMGBQrrquId2zeMbqnk5wr4YVYr6ZUvZ9vpo3N9Li98cEDL00x4eazfLT');
+var checkoutButton = document.getElementById('checkout-button-price_1MUNBLSJqIKN8UICnyrOswxg');
+checkoutButton.addEventListener('click', function () {
+/*
+* When the customer clicks on the button, redirect
+* them to Checkout.
+*/
+stripe.redirectToCheckout({
+lineItems: [{price: 'price_1MUNBLSJqIKN8UICnyrOswxg', quantity: 1}],
+mode: 'payment',
+/*
+* Do not rely on the redirect to the successUrl for fulfilling
+* purchases, customers may not always reach the success_url after
+* a successful payment.
+* Instead use one of the strategies described in
+* https://stripe.com/docs/payments/checkout/fulfill-orders
+*/
+successUrl: 'https://teenybeanspreschoolcurriculum.com/',
+cancelUrl: 'https://teenybeanspreschoolcurriculum.com/',
+})
+.then(function (result) {
+if (result.error) {
+/*
+* If `redirectToCheckout` fails due to a browser or network
+* error, display the localized error message to your customer.
+*/
+var displayError = document.getElementById('error-message');
+displayError.textContent = result.error.message;
+}
+});
+});
+})();
+</script>
+<style scoped>
+
+
+    .slider {
+      -webkit-appearance: none;
+      height: 6px;
+      border-radius: 16px;
+      background: rgba(0, 0, 0, 0.3);
+      outline: none;
+      opacity: 0.7;
+      -webkit-transition: .2s;
+      transition: opacity .2s;
+      width: 50%;
+    }
+    
+    
+    
+    /* .slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 2px;
+      height: 2px;
+      background: rgba(0, 102, 255, 1);
+      border-radius: 50px;
+      cursor: pointer;
+    } */
+    
+    .slider::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+        background: rgba(0, 102, 255, 1);
+        border-radius: 50px;
+        cursor: pointer;
+    }
+    .slider:hover::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+        background: rgb(0, 102, 255, 1);
+        border-radius: 50px;
+        border-width: 6px;
+        border-color: rgba(217, 214, 214, 1);
+        cursor: pointer;
+    }
+    
+    .border-radius{
+        border-top-left-radius: 200px;
+        height: 400px;
+        width: 100%;
+    }
+        .background {
+            background-color: #124BBD;
+        }
+        .text-color-1 {
+            color:  #333333;
+        }
+        .text-color-2 {
+            color: #124BBD;
+        }
+        .text-color-3 {
+            color: #124BBD;
+        }
+        
+    </style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 63d4848..7d00a04 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -83,6 +83,14 @@
     uvu "^0.5.0"
     vfile-message "^3.0.0"
 
+"@astrojs/partytown@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@astrojs/partytown/-/partytown-1.0.3.tgz#87747ed4e9d262a73898ce65628234c2542321c5"
+  integrity sha512-u2/pG9owRipICz/PksLUUqUat98sm0/YODvv3/IKKJ0JCwF7+0olbMvyyvoj7kJooIXh0XowcOjEs5vhCYFo5g==
+  dependencies:
+    "@builder.io/partytown" "^0.7.4"
+    mrmime "^1.0.0"
+
 "@astrojs/prism@^1.0.0":
   version "1.0.2"
   resolved "https://registry.npmjs.org/@astrojs/prism/-/prism-1.0.2.tgz"
@@ -396,6 +404,11 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@builder.io/partytown@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@builder.io/partytown/-/partytown-0.7.5.tgz#f501e3db37a5ac659f21ba0c2e61b278e58b64b9"
+  integrity sha512-Zbr2Eo0AQ4yzmQr/36/h+6LKjmdVBB3Q5cGzO6rtlIKB/IOpbQVUZW+XAnhpJmJr9sIF97OZjgbhG9k7Sjn4yw==
+
 "@emmetio/abbreviation@^2.2.3":
   version "2.2.3"
   resolved "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.2.3.tgz"