diff --git a/src/components/ModalIndex copy 2.vue b/src/components/ModalIndex copy 2.vue
new file mode 100644
index 0000000..ab58ca8
--- /dev/null
+++ b/src/components/ModalIndex copy 2.vue	
@@ -0,0 +1,138 @@
+
+<template>
+<section class="container mx-auto xl:px-24"> 
+    <div class="flex md:justify-center justify-center hero-text font-bold mt-8 text-color-1 py-14">Discover our solutions</div>
+    <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 text-center ">
+        <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+            <img draggable="false" src="/img/plan.png" alt="">
+            <h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
+            <p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
+            <button  @click="showAbModal('abModal')" class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button>
+        </div>
+        <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+            <img draggable="false" src="/img/report.png" alt="">
+            <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 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="">
+            <h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
+            <p class="  font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
+            <a target="_blank" href="/themes"><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>
+    <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2  mt-12">
+        <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+            <img draggable="false" src="/img/popular.png" alt="">
+            <h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas</h1>
+            <p class="   font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
+            <a target="_blank" href="/celebrationstories#submitCelebration"><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/event.png" alt="">
+            <h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
+            <p class="   font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
+            <a target="_blank" href="/videos"><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 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="grid place-items-center pb-8 px-6 w-fit h-fit">
+                        <img draggable="false" src="/img/plan.png" alt="">
+                        <h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
+                        <p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</section>
+</template>
+
+<!-- <template>
+    <div>
+      <div @click="showAbModal('abModal')"> Show Modal</div>
+        <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>
+                  Modal text    Modal text    Modal text<br>  Modal text    Modal text    Modal text 
+                </div>
+            </div>
+        </div>
+    </div>
+  </template> -->
+  
+  <script>
+  
+  export default {
+  
+    data() {
+        return {
+          abModal:false,
+            abID:''
+  
+        }
+    },
+    methods: {
+        showAbModal(abID){
+            this.abModal=true
+            this.abID=abID
+        },
+        hideAbModal(){
+            this.abModal=false
+        //     // this.abID=abID
+        },
+        doNothing(){
+          // alert();
+        }
+   
+    },
+        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: 80%;
+    margin: 0 auto;
+  }
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/components/ModalIndex.vue b/src/components/ModalIndex.vue
new file mode 100644
index 0000000..ab58ca8
--- /dev/null
+++ b/src/components/ModalIndex.vue
@@ -0,0 +1,138 @@
+
+<template>
+<section class="container mx-auto xl:px-24"> 
+    <div class="flex md:justify-center justify-center hero-text font-bold mt-8 text-color-1 py-14">Discover our solutions</div>
+    <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 text-center ">
+        <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+            <img draggable="false" src="/img/plan.png" alt="">
+            <h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
+            <p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
+            <button  @click="showAbModal('abModal')" class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button>
+        </div>
+        <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+            <img draggable="false" src="/img/report.png" alt="">
+            <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 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="">
+            <h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
+            <p class="  font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
+            <a target="_blank" href="/themes"><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>
+    <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2  mt-12">
+        <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+            <img draggable="false" src="/img/popular.png" alt="">
+            <h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas</h1>
+            <p class="   font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
+            <a target="_blank" href="/celebrationstories#submitCelebration"><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/event.png" alt="">
+            <h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
+            <p class="   font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
+            <a target="_blank" href="/videos"><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 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="grid place-items-center pb-8 px-6 w-fit h-fit">
+                        <img draggable="false" src="/img/plan.png" alt="">
+                        <h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
+                        <p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</section>
+</template>
+
+<!-- <template>
+    <div>
+      <div @click="showAbModal('abModal')"> Show Modal</div>
+        <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>
+                  Modal text    Modal text    Modal text<br>  Modal text    Modal text    Modal text 
+                </div>
+            </div>
+        </div>
+    </div>
+  </template> -->
+  
+  <script>
+  
+  export default {
+  
+    data() {
+        return {
+          abModal:false,
+            abID:''
+  
+        }
+    },
+    methods: {
+        showAbModal(abID){
+            this.abModal=true
+            this.abID=abID
+        },
+        hideAbModal(){
+            this.abModal=false
+        //     // this.abID=abID
+        },
+        doNothing(){
+          // alert();
+        }
+   
+    },
+        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: 80%;
+    margin: 0 auto;
+  }
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/components/ModalIndexEventIdeas.vue b/src/components/ModalIndexEventIdeas.vue
new file mode 100644
index 0000000..e073d93
--- /dev/null
+++ b/src/components/ModalIndexEventIdeas.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+      <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+          <img draggable="false" src="/img/popular.png" alt="">
+          <h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas</h1>
+          <p class="font-20px text-justify text-color-2 line-clamp-3 xl:px-24">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
+          <span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span>
+          <a class="pt-2" href="/worksheets"><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 v-if="abModal" id="ytModal" class="flex justify-center abModal">
+          <div class="modal-content" @click="doNothing()">
+              <span  @click="hideAbModal" class="close">&times;</span>
+              <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+                  <img draggable="false" src="/img/popular.png" alt="">
+                  <h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas</h1>
+                  <p class="text-xl text-justify text-color-2 w-64">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<!-- <template>
+    <div>
+      <div @click="showAbModal('abModal')"> Show Modal</div>
+        <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>
+                  Modal text    Modal text    Modal text<br>  Modal text    Modal text    Modal text 
+                </div>
+            </div>
+        </div>
+    </div>
+  </template> -->
+  
+  <script>
+  export default {
+  
+    data() {
+        return {
+          abModal:false,
+            abID:''
+  
+        }
+    },
+    methods: {
+        showAbModal(abID){
+            this.abModal=true
+            this.abID=abID
+        },
+        hideAbModal(){
+            this.abModal=false
+        //     // this.abID=abID
+        },
+        doNothing(){
+          // alert();
+        }
+   
+    },
+        mounted: function () {
+          //   this.getVideos()
+        }   
+  }
+  </script>
+  
+  <style scoped>
+  .line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;  
+  overflow: hidden;
+  }
+  .abModal {
+  /* display: none;  */
+  position: fixed;
+  width: 80%;
+  z-index: 999991;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  padding-left: 10px;
+  padding-right: 10px;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+  }
+  .modal-content{
+    background-color: rgb(255, 255, 255);
+    padding: 20px;
+    border: 1px solid #888;
+    width: fit-content;
+    height: fit-content;
+    margin: 0 auto;
+    border-radius: 16px;
+    border-width: 5px;
+    border-color: rgb(40, 99, 226);
+  }
+  .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/components/ModalIndexLesson.vue b/src/components/ModalIndexLesson.vue
new file mode 100644
index 0000000..2c5cb01
--- /dev/null
+++ b/src/components/ModalIndexLesson.vue
@@ -0,0 +1,120 @@
+<template>
+  <div>
+      <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+          <img draggable="false" src="/img/report.png" alt="">
+          <h1 class="text-3xl text-color-1 font-semibold py-2">Lesson Plans</h1>
+          <p class="font-20px text-justify text-color-2 line-clamp-3">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>
+          <span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span>
+          <a class="pt-2" 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 v-if="abModal" id="ytModal" class="flex justify-center abModal">
+          <div class="modal-content" @click="doNothing()">
+              <span  @click="hideAbModal" class="close">&times;</span>
+              <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+                  <img draggable="false" src="/img/report.png" alt="">
+                  <h1 class="text-3xl text-color-1 font-semibold py-2">Lesson Plans</h1>
+                  <p class="text-xl text-justify text-color-2 w-64">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>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<!-- <template>
+    <div>
+      <div @click="showAbModal('abModal')"> Show Modal</div>
+        <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>
+                  Modal text    Modal text    Modal text<br>  Modal text    Modal text    Modal text 
+                </div>
+            </div>
+        </div>
+    </div>
+  </template> -->
+  
+  <script>
+  
+  export default {
+  
+    data() {
+        return {
+          abModal:false,
+            abID:''
+  
+        }
+    },
+    methods: {
+        showAbModal(abID){
+            this.abModal=true
+            this.abID=abID
+        },
+        hideAbModal(){
+            this.abModal=false
+        //     // this.abID=abID
+        },
+        doNothing(){
+          // alert();
+        }
+   
+    },
+        mounted: function () {
+          //   this.getVideos()
+        }   
+  }
+  </script>
+  
+  <style scoped>
+  .line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;  
+  overflow: hidden;
+  }
+  .abModal {
+  /* display: none;  */
+  position: fixed;
+  width: 80%;
+  z-index: 999991;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  padding-left: 10px;
+  padding-right: 10px;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+  }
+  .modal-content{
+    background-color: rgb(255, 255, 255);
+    padding: 20px;
+    border: 1px solid #888;
+    width: fit-content;
+    height: fit-content;
+    margin: 0 auto;
+    border-radius: 16px;
+    border-width: 5px;
+    border-color: rgb(40, 99, 226);
+  }
+  .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/components/ModalIndexThemes.vue b/src/components/ModalIndexThemes.vue
new file mode 100644
index 0000000..46d25e6
--- /dev/null
+++ b/src/components/ModalIndexThemes.vue
@@ -0,0 +1,120 @@
+<template>
+  <div>
+      <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+          <img draggable="false" src="/img/classroom.png" alt="">
+          <h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
+          <p class="font-20px text-justify text-color-2 line-clamp-3">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
+          <span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span>
+          <a class="pt-2" href="/themes"><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 v-if="abModal" id="ytModal" class="flex justify-center abModal">
+          <div class="modal-content" @click="doNothing()">
+              <span  @click="hideAbModal" class="close">&times;</span>
+              <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+                  <img draggable="false" src="/img/classroom.png" alt="">
+                  <h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
+                  <p class="text-xl text-justify text-color-2 w-64">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<!-- <template>
+    <div>
+      <div @click="showAbModal('abModal')"> Show Modal</div>
+        <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>
+                  Modal text    Modal text    Modal text<br>  Modal text    Modal text    Modal text 
+                </div>
+            </div>
+        </div>
+    </div>
+  </template> -->
+  
+  <script>
+  
+  export default {
+  
+    data() {
+        return {
+          abModal:false,
+            abID:''
+  
+        }
+    },
+    methods: {
+        showAbModal(abID){
+            this.abModal=true
+            this.abID=abID
+        },
+        hideAbModal(){
+            this.abModal=false
+        //     // this.abID=abID
+        },
+        doNothing(){
+          // alert();
+        }
+   
+    },
+        mounted: function () {
+          //   this.getVideos()
+        }   
+  }
+  </script>
+  
+  <style scoped>
+  .line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;  
+  overflow: hidden;
+  }
+  .abModal {
+  /* display: none;  */
+  position: fixed;
+  width: 80%;
+  z-index: 999991;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  padding-left: 10px;
+  padding-right: 10px;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+  }
+  .modal-content{
+    background-color: rgb(255, 255, 255);
+    padding: 20px;
+    border: 1px solid #888;
+    width: fit-content;
+    height: fit-content;
+    margin: 0 auto;
+    border-radius: 16px;
+    border-width: 5px;
+    border-color: rgb(40, 99, 226);
+  }
+  .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/components/ModalIndexVideos.vue b/src/components/ModalIndexVideos.vue
new file mode 100644
index 0000000..1315b61
--- /dev/null
+++ b/src/components/ModalIndexVideos.vue
@@ -0,0 +1,120 @@
+<template>
+  <div>
+      <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+          <img draggable="false" src="/img/event.png" alt="">
+          <h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
+          <p class="font-20px text-justify text-color-2 line-clamp-3 xl:px-24">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
+          <span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span>
+          <a class="pt-2" href="/videos"><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 v-if="abModal" id="ytModal" class="flex justify-center abModal">
+          <div class="modal-content" @click="doNothing()">
+              <span  @click="hideAbModal" class="close">&times;</span>
+              <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+                  <img draggable="false" src="/img/event.png" alt="">
+                  <h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
+                  <p class="text-xl text-justify text-color-2 w-64">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<!-- <template>
+    <div>
+      <div @click="showAbModal('abModal')"> Show Modal</div>
+        <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>
+                  Modal text    Modal text    Modal text<br>  Modal text    Modal text    Modal text 
+                </div>
+            </div>
+        </div>
+    </div>
+  </template> -->
+  
+  <script>
+  
+  export default {
+  
+    data() {
+        return {
+          abModal:false,
+            abID:''
+  
+        }
+    },
+    methods: {
+        showAbModal(abID){
+            this.abModal=true
+            this.abID=abID
+        },
+        hideAbModal(){
+            this.abModal=false
+        //     // this.abID=abID
+        },
+        doNothing(){
+          // alert();
+        }
+   
+    },
+        mounted: function () {
+          //   this.getVideos()
+        }   
+  }
+  </script>
+  
+  <style scoped>
+  .line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;  
+  overflow: hidden;
+  }
+  .abModal {
+  /* display: none;  */
+  position: fixed;
+  width: 80%;
+  z-index: 999991;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  padding-left: 10px;
+  padding-right: 10px;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+  }
+  .modal-content{
+    background-color: rgb(255, 255, 255);
+    padding: 20px;
+    border: 1px solid #888;
+    width: fit-content;
+    height: fit-content;
+    margin: 0 auto;
+    border-radius: 16px;
+    border-width: 5px;
+    border-color: rgb(40, 99, 226);
+  }
+  .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/components/ModalIndexWorksheet.vue b/src/components/ModalIndexWorksheet.vue
new file mode 100644
index 0000000..62b8788
--- /dev/null
+++ b/src/components/ModalIndexWorksheet.vue
@@ -0,0 +1,120 @@
+<template>
+  <div>
+      <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+          <img draggable="false" src="/img/plan.png" alt="">
+          <h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
+          <p class="font-20px text-justify text-color-2 line-clamp-3">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
+          <span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span>
+          <a class="pt-2" href="/worksheets"><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 v-if="abModal" id="ytModal" class="flex justify-center abModal">
+          <div class="modal-content" @click="doNothing()">
+              <span  @click="hideAbModal" class="close">&times;</span>
+              <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+                  <img draggable="false" src="/img/plan.png" alt="">
+                  <h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
+                  <p class="text-xl text-justify text-color-2 w-64">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<!-- <template>
+    <div>
+      <div @click="showAbModal('abModal')"> Show Modal</div>
+        <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>
+                  Modal text    Modal text    Modal text<br>  Modal text    Modal text    Modal text 
+                </div>
+            </div>
+        </div>
+    </div>
+  </template> -->
+  
+  <script>
+  
+  export default {
+  
+    data() {
+        return {
+          abModal:false,
+            abID:''
+  
+        }
+    },
+    methods: {
+        showAbModal(abID){
+            this.abModal=true
+            this.abID=abID
+        },
+        hideAbModal(){
+            this.abModal=false
+        //     // this.abID=abID
+        },
+        doNothing(){
+          // alert();
+        }
+   
+    },
+        mounted: function () {
+          //   this.getVideos()
+        }   
+  }
+  </script>
+  
+  <style scoped>
+  .line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;  
+  overflow: hidden;
+  }
+  .abModal {
+  /* display: none;  */
+  position: fixed;
+  width: 80%;
+  z-index: 999991;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  padding-left: 10px;
+  padding-right: 10px;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+  }
+  .modal-content{
+    background-color: rgb(255, 255, 255);
+    padding: 20px;
+    border: 1px solid #888;
+    width: fit-content;
+    height: fit-content;
+    margin: 0 auto;
+    border-radius: 16px;
+    border-width: 5px;
+    border-color: rgb(40, 99, 226);
+  }
+  .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/pages/index.astro b/src/pages/index.astro
index b783895..b90ee41 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,6 +4,11 @@ import Menu from "../components/Menu.astro";
 import SliderLessonplan from "../components/SliderLessonplan.vue";
 import HeroButton from "../components/HeroButton.vue";
 import Roundchart from "../components/Roundchart.vue";
+import ModalIndexWorksheet from "../components/ModalIndexWorksheet.vue";
+import ModalIndexLesson from "../components/ModalIndexLesson.vue";
+import ModalIndexThemes from "../components/ModalIndexThemes.vue";
+import ModalIndexEventIdeas from "../components/ModalIndexEventIdeas.vue";
+import ModalIndexVideos from "../components/ModalIndexVideos.vue";
 
 const faqResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/FAQ?filter[slug][_eq]=home&filter[property][_eq]=teenybeans_curriculum');
 const faqRespJson = await faqResp.json();
@@ -35,48 +40,29 @@ import Footer from "../components/Footer.vue";
             <div class="container-fluid mt-10">
                 <div class="container mx-auto px-4 xl:px-24 font-20px  text-justify">Our play school curriculum, Your progress. Teeny Beans Preschool Curriculum brings to you a well-organized and thoroughly laid British EYFS curriculum enriched with the finest subjects to assist children in their holistic development. A curriculum that makes every child prepared to understand the world.</div>
             </div>
-            <section class="container mx-auto xl:px-24">
+            <div class="container mx-auto xl:px-24"> 
                 <div class="flex md:justify-center justify-center hero-text font-bold mt-8 text-color-1 py-14">Discover our solutions</div>
-                <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 text-center ">
-                    <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
-                        <img draggable="false" src="/img/plan.png" alt="">
-                        <h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
-                        <p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
-                        <!-- <a href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
-                        <a target="_blank" href="/worksheets"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
+                    <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 text-center">
+                      <div class="grid place-items-center">
+                        <ModalIndexWorksheet client:visible />
+                      </div>
+                      <div class="grid place-items-center">
+                        <ModalIndexLesson client:visible />
+                      </div>
+                      <div class="grid place-items-center">
+                        <ModalIndexThemes client:visible />
+                      </div>
                     </div>
-                    <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
-                        <img draggable="false" src="/img/report.png" alt="">
-                        <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="/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="">
-                        <h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
-                        <p class="  font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
-                        <!-- <a target="_blank" href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
-                        <a target="_blank" href="/themes"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
+                    <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 text-center">
+                      <div class="grid place-items-center">
+                        <ModalIndexEventIdeas client:visible />
+                      </div>
+                      <div class="grid place-items-center">
+                        <ModalIndexVideos client:visible />
+                      </div>
                     </div>
                 </div>
-                <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2  mt-12">
-                    <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
-                        <img draggable="false" src="/img/popular.png" alt="">
-                        <h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas</h1>
-                        <p class="   font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
-                        <!-- <a target="_blank" href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
-                        <a target="_blank" href="/celebrationstories#submitCelebration"><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/event.png" alt="">
-                        <h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
-                        <p class="   font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
-                        <!-- <a target="_blank" href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
-                        <a target="_blank" href="/videos"><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>
-            </section>
+            </div>
             <section class="container mx-auto xl:px-24">
                 <div class="mt-10 px-4 font-20px pb-20 px-6">
                     <p class="text-justify text-color-2">Enrich every learning experience with your preschool’s best performance through the right  preschool curriculumsolutions that Teeny Beans provide. Embellish your early education institution and provide a higher standing to your play school.</p>