diff --git a/public/img/header-worksheet.png b/public/img/header-worksheet.png
deleted file mode 100755
index 8b728c4..0000000
Binary files a/public/img/header-worksheet.png and /dev/null differ
diff --git a/public/img/homepage.jpg b/public/img/homepage.jpg
deleted file mode 100755
index ae57118..0000000
Binary files a/public/img/homepage.jpg and /dev/null differ
diff --git a/public/tb-logo.ico b/public/tb-logo.ico
new file mode 100644
index 0000000..2c4e50a
Binary files /dev/null and b/public/tb-logo.ico differ
diff --git a/src/components/Educators.vue b/src/components/Educators.vue
index af53793..c229ff1 100644
--- a/src/components/Educators.vue
+++ b/src/components/Educators.vue
@@ -279,9 +279,6 @@ details[open] summary {
 .body {
 font-family: 'Quicksand', sans-serif;
 }
-.h2 {
-    font-size: 40px;
-}
 .bg3 {
   background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
 .h1-text {
@@ -462,22 +459,36 @@ font-family: 'Quicksand', sans-serif;
 
 @media screen and (min-width: 1500px) {
   .hero-text {
-    font-size: 50px;
-    
-    
+    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;
-    
+  }
+}
+
+
+@media screen and (min-width: 1500px) {
+  .h2 {
+    font-size: 40px;    
+  }
+}
+
+@media screen and (max-width: 1499px) {
+  .h2 {
+    font-size: 30px;
+  }
+}
+@media screen and (max-width: 1199px) {
+  .h2 {
+    font-size: 25px;
   }
 }
 </style>
@@ -552,7 +563,7 @@ export default {
         .then(resp => resp.json())
         .then(data => {
         this.faqEducators=data.data
-        console.log(this.faqEducators)
+        // console.log(this.faqEducators)
     })
       
     }
diff --git a/src/components/HeroButton.vue b/src/components/HeroButton.vue
new file mode 100644
index 0000000..a53f2a7
--- /dev/null
+++ b/src/components/HeroButton.vue
@@ -0,0 +1,143 @@
+<template>
+    <div>
+        <div class="grid grid-cols-7 place-items-center pt-6 w-fit p-4"> 
+        <div @click="showAbModal('abModal')" class="rounded-tl-full text-sm xl:text-lg rounded-br-full col-span-3 shadow-2xl text-blue-700 px-4 md:px-8 p-3 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"> <button>Speak with Us</button></div>
+        <div class="grid text-base xl:text-lg col-span-1 font-bold text-color-2">OR</div> 
+        <div class="rounded-tl-full text-sm xl:text-lg rounded-br-full col-span-3 text-white shadow-2xl  px-4 md:px-8 p-3 bg-blue-700 te border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><a href="/themes"><button>Check Out Event</button></a></div>   
+    </div>
+        <!-- <div @click="showAbModal('abModal')"> Show Modal</div> -->
+                  <!-- Modal -->
+      <div v-if="abModal" id="ytModal" class="flex justify-center abModal">
+          <div class="modal-content" @click="doNothing()">
+              <span  @click="hideAbModal" class="close">&times;</span>
+              <div>
+                <div class="block p-6  shadow-lg bg-white border-2  2xl:w-96 text-xl" style="background-color: #f5f6d7;">
+        <p class="text-blue-700 text-3xl font-semibold p-1">Get in Touch</p>
+        <div v-if="BlogQry">
+            <div class="form-group mb-1">
+                <label  for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
+                <input v-model="indexname" 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 v-model="indexemail" 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="form-group mb-1">
+                <label  for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Your Phone Number</label>
+                <input v-model="indexnumber" 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="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Write your Description....</label>
+                <textarea v-model="indexdescription" 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"></textarea>
+            </div>
+            <div class="flex justify-end pt-2">
+                <button @click="saveBlogQry" class="px-2  py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded-tl-xl rounded-br-xl 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">Send</button>
+            </div>
+        </div>
+        <div v-else>
+            <h1 class="text-center p-16 py-32 text-3xl text-color-1">Thank You</h1>
+        </div>
+    </div>
+              </div>
+          </div>
+      </div>
+    </div>
+    
+</template>
+<script>
+
+export default {
+
+  data() {
+      return {
+            abModal:false,
+            abID:'',
+            indexname: null,
+            indexemail: null,
+            indexnumber: null,
+            BlogQry: true,
+            indexdescription:null,
+
+      }
+  },
+  methods: {
+      showAbModal(abID){
+          this.abModal=true
+          this.abID=abID
+      },
+      hideAbModal(){
+          this.abModal=false
+      //     // this.abID=abID
+      },
+      doNothing(){
+        // alert();
+      },
+      saveBlogQry(){
+        let formData = new FormData();
+        formData.append('Name', this.indexname);
+        formData.append('Email', this.indexemail);
+        formData.append('Phone', this.indexnumber);
+        formData.append('Message', this.indexdescription);
+        formData.append('formName', 'index-get-in-touch');
+        fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/', 
+            {
+                method: 'POST',
+                body: formData,
+            }
+        )
+        .then(response => response.json())
+        .then(data => {
+            // console.log(data)
+        });
+        // formData=""
+        this.BlogQry=false
+    }
+ 
+  },
+      mounted: function () {
+        //   this.getVideos()
+      }   
+}
+</script>
+<style scoped>
+
+.abModal {
+/* display: none;  */
+position: fixed;
+width: 80%;
+z-index: 999991;
+padding-top: 100px;
+left: 0;
+top: 0;
+width: 100%;
+height: 100%;
+overflow: auto;
+background-color: rgb(0,0,0);
+background-color: rgba(0,0,0,0.4);
+}
+.modal-content{
+  /* background-color: aliceblue; */
+  padding: 20px;
+  /* border: 1px solid #888; */
+  width: fit-content;
+  margin: 0 auto;
+}
+.close {
+  color: rgb(40, 99, 226);
+  float: right;
+  font-size: 28px;
+  padding: 10px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: rgb(40, 99, 226);
+  text-decoration: none;
+  padding: 10px;
+  cursor: pointer;
+  font-size: 28px;
+  background-color: rgb(237, 240, 239);
+  border-radius: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 169052b..7e02985 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -12,7 +12,7 @@ const { title } = Astro.props;
 		<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml/ico" href="/favicon-teeny-beans.ico" />
+		<link rel="icon" type="image/svg+xml/ico" href="/tb-logo.ico" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 		
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 96bd2bb..3ecce2b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,6 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 import Menu from "../components/Menu.astro";
 import SliderLessonplan from "../components/SliderLessonplan.vue";
+import HeroButton from "../components/HeroButton.vue";
 import Roundchart from "../components/Roundchart.vue";
 
 const faqResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/FAQ?filter[slug][_eq]=home&filter[property][_eq]=teenybeans_curriculum');
@@ -19,11 +20,12 @@ import Footer from "../components/Footer.vue";
                         <h1 class="text-color-1 hero-text font-bold w-12/12 px-4">Tech-First Preschool Curriculum</h1>
                         <h2 class="h2-text font-bold w-fit px-4">Start Planning Your Classroom Curriculum now</h2>
                         <p class="font-20px text-justify pt-8 px-4">Want your preschool curriculum to bring out the most learned and accomplished children? What is the delay then? With the right classroom curriculum, raise the elegance of teaching and set new levels for your competitors.</p>
-                        <div class="grid grid-cols-7 place-items-center pt-6 w-fit p-4"> 
-                            <div class="rounded-tl-full text-sm xl:text-base rounded-br-full col-span-3 shadow-2xl text-blue-700 px-4 md:px-8 p-3 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"> <a href="/educators#getintouch"><button>Speak with Us</button></a></div>
-                            <div class="grid text-lg col-span-1 font-bold text-color-2">OR</div> 
-                            <div class="rounded-tl-full text-sm xl:text-base rounded-br-full col-span-3 text-white shadow-2xl  px-4 md:px-8 p-3 bg-blue-700 te border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><a href="/themes"><button>Check Out Event</button></a></div>   
-                        </div>
+                        <!-- <div class="grid grid-cols-7 place-items-center pt-6 w-fit p-4"> 
+                            <div class="rounded-tl-full text-sm xl:text-lg rounded-br-full col-span-3 shadow-2xl text-blue-700 px-4 md:px-8 p-3 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"> <a href="/educators#getintouch"><button>Speak with Us</button></a></div>
+                            <div class="grid text-base xl:text-lg col-span-1 font-bold text-color-2">OR</div> 
+                            <div class="rounded-tl-full text-sm xl:text-lg rounded-br-full col-span-3 text-white shadow-2xl  px-4 md:px-8 p-3 bg-blue-700 te border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><a href="/themes"><button>Check Out Event</button></a></div>   
+                        </div> -->
+                        <HeroButton client:visible/>
                     </div>
                     <div class="flex w-full justify-end place-items-end">
                         <img class="h-fit " src="/img/homepage1c.png" alt="">
@@ -48,7 +50,7 @@ import Footer from "../components/Footer.vue";
                         <h1 class="text-3xl text-color-1 font-semibold py-2">Lesson Plans</h1>
                         <p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Teach toddlers significant lessons which are necessary for their holistic development. Our preschool curriculum is instilled with essential lesson plans necessary for early childhood education.</p>
                         <!-- <a href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
-                        <a target="_blank" href="/#EYFSCurriculum"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
+                        <a target="_blank" href="/lesson-plan/dailyplan"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
                     </div>
                     <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
                         <img draggable="false" src="/img/classroom.png" alt="">
@@ -226,14 +228,13 @@ import Footer from "../components/Footer.vue";
                     <div class="grid h-fit ">
                         <h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
                         {faqRespData.map((data: { title: string | undefined; youtube_thumbnail: string | undefined; about_the_video: string | undefined; }) => 
-                        <details>
+                            <details>
                                 <summary> 
                                     <div class="flex inline-flex cursor-pointer" v-if="faqHome"> &nbsp; { data.title }</div>
                                 </summary>
                                     <div  set:html="data.content"></div>
                             </details>
                         )}    
-                        
                     </div>
                     <div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div> 
                 </div>
diff --git a/src/pages/occasion/index.astro b/src/pages/occasion/index.astro
index e38f180..94669fd 100644
--- a/src/pages/occasion/index.astro
+++ b/src/pages/occasion/index.astro
@@ -52,7 +52,7 @@ import Footer from "../../components/Footer.vue";
                 <img class="w-fit h-fit" src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.data[0].occassion} alt={occassion[0].occassion_text }>
             </div> 
         </div>
-    </section>  <!-- hero section Ends      ???set:html="data.meta_description" -->
+    </section>  <!-- hero section Ends" -->
     <section class="container mx-auto px-2 xl:px-24 pt-24">
         <h1 class=" text-blue-700 h1-text px-4 font-semibold">Check Out Our Occasion Blog</h1>
         <p class="text-justify text-xl lg:text-3xl pt-2 text-color-2 px-4">Find relevant helpful articles for marketing preschool solutions below and get to know more about the same. </p>
diff --git a/src/pages/themes/[id].astro b/src/pages/themes/[id].astro
index 64ca9fe..ed0757b 100644
--- a/src/pages/themes/[id].astro
+++ b/src/pages/themes/[id].astro
@@ -40,7 +40,7 @@ const ytvResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/t
 const ytvRespJson = await ytvResp.json();
 const ytvRespData = ytvRespJson.data.reverse();
 
-const allthemesResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/themes?filter[status][_eq]=draft&limit=3');
+const allthemesResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/themes?limit=3&filter[id][_neq]=' + thisThemesID);
 const allthemesRespJson = await allthemesResp.json();
 const allthemesRespData = allthemesRespJson.data;