diff --git a/src/components/Audio-books.vue b/src/components/Audio-books.vue
index bab80be..87d3698 100644
--- a/src/components/Audio-books.vue
+++ b/src/components/Audio-books.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <section class="container-fluid bg3">
+        <section class="container-fluid bg3 shadow-2xl">
             <div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
                 <div class="flex flex-col w-fit justify-center">
                     <h1 class="text-blue-700 hero-text font-bold">Audio Books<span class="text-color-1"> For Your Classroom</span></h1>
@@ -24,9 +24,8 @@
             </div>
         </section> -->
         <section>
-            <!-- <p class="container mx-auto px-6 text-color-2 text-2xl text-justify mt-4">Develop children’s listening skills, confidence, vocabulary, innovativity and much more by adding preschool audio books to their routine and witness the positive change in their personality. </p> -->
-            <!-- <p class="container mx-auto px-6 text-color-2 text-2xl text-justify mt-6">If you are looking for enchanting listening books for preschoolers, then this is the right platform, where you can find categorized best audio books for preschoolers that are the accurate components of a child’s preschool curriculum. </p> -->
-            <div class="flex flex-col md:flex-row bg3 justify-center md:justify-end lg:px-48 px-4 shadow-xl lg:gap-4"> 
+            <!-- Age Filter Triger -->
+            <!-- <div class="flex flex-col md:flex-row bg3 justify-center md:justify-end lg:px-48 px-4 shadow-xl lg:gap-4"> 
                 <div class="flex ">
                     <h1 class="pt-3 font-semibold">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3" @change="switchSelect($event)">
@@ -37,7 +36,7 @@
                         <option value="5">5-6 Year</option> 
                     </select>
                 </div> 
-            </div>
+            </div> -->
         </section>
         <section class="container-fluid pt-10">
             <p class="container mx-auto px-4 xl:px-24 font-20px text-justify pt-6">If you are looking for enchanting listening books for preschoolers, then this is the right platform, where you can find categorized best audio books for preschoolers that are the accurate components of a child’s preschool curriculum.</p>
@@ -70,7 +69,7 @@
                 <div class="flex justify-center">
                     <div class="grid place-items-center">
                         <img class="relative opacity-50 w-96" src="/img/audio-icon.png" alt=""/>
-                        <a href="/audio-books/mathematics"><button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg">View All</button></a>
+                        <a href="/audio-books/literacy"><button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg">View All</button></a>
                     </div>
                 </div>
             </div>
@@ -232,19 +231,19 @@ export default {
         // this.selected = event.target.value;
         },
         getAudio(age=2){
-            fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[age][_eq]='+age+'&filter[category][_eq]=literacy')
+            fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=literacy')
             .then(resp => resp.json())
             .then(worksheets => {
                 this.abliteracy=worksheets.data.reverse().slice(0, 3)
                 // console.log(this.abliteracy)
             })
-            fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[age][_eq]='+age+'&filter[category][_eq]=mathematics')
+            fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=mathematics')
             .then(resp => resp.json())
             .then(worksheets => {
                 this.abmath=worksheets.data.reverse().slice(0, 3)
                 // console.log(this.abmath)
             })
-            fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[age][_eq]='+age+'&filter[category][_eq]=world')
+            fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=world')
             .then(resp => resp.json())
             .then(worksheets => {
                 this.abworld=worksheets.data.reverse().slice(0, 3)
diff --git a/src/components/Audio-literacy.vue b/src/components/Audio-literacy.vue
index 93234d7..c3b869b 100644
--- a/src/components/Audio-literacy.vue
+++ b/src/components/Audio-literacy.vue
@@ -1,9 +1,10 @@
 <template>
     <div>
                                                 <!-- Hero Section -->
-        <section class="container-fluid">
+        <section class="container-fluid shadow-2xl">
             <div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Audio Books for <span class="text-color-1">Literacy</span></div>
-            <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
+            <!-- Age Filter Triger -->
+            <!-- <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
                 <div class="flex">
                     <h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3">
@@ -14,17 +15,7 @@
                         <option>5-6 Year</option> 
                     </select>
                 </div> 
-                <!-- <div class="flex ">
-                    <h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
-                    <select class="select max-w-xs">
-                        <option>Select your Category</option>
-                        <option>3-4 Year</option>
-                        <option>4-5 Year</option>
-                        <option>5-6 Year</option>
-                        <option>6-7 Year</option>
-                    </select>
-                </div>  -->
-            </div>
+            </div> -->
         </section>
         <section class="container mx-auto pt-10 px-6 xl:px-24">
             <span class="h1-text text-color-1">All Audio Books</span>
diff --git a/src/components/Audio-mathematics.vue b/src/components/Audio-mathematics.vue
index a11ec56..5d5fd8e 100644
--- a/src/components/Audio-mathematics.vue
+++ b/src/components/Audio-mathematics.vue
@@ -1,9 +1,10 @@
 <template>
     <div>
                                                 <!-- Hero Section -->
-        <section class="container-fluid">
+        <section class="container-fluid shadow-2xl">
             <div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Audio Books for <span class="text-color-1">Mathematics</span></div>
-            <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
+            <!-- Age Filter Triger -->
+            <!-- <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
                 <div class="flex">
                     <h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3">
@@ -14,17 +15,7 @@
                         <option>5-6 Year</option> 
                     </select>
                 </div> 
-                <!-- <div class="flex ">
-                    <h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
-                    <select class="select max-w-xs">
-                        <option>Select your Category</option>
-                        <option>3-4 Year</option>
-                        <option>4-5 Year</option>
-                        <option>5-6 Year</option>
-                        <option>6-7 Year</option>
-                    </select>
-                </div>  -->
-            </div>
+            </div> -->
         </section>
         <section class="container mx-auto pt-10 px-6 xl:px-24">
             <span class="h1-text text-color-1">All Audio Books</span>
diff --git a/src/components/Audio-worlds.vue b/src/components/Audio-worlds.vue
index e0e2005..f4d7da4 100644
--- a/src/components/Audio-worlds.vue
+++ b/src/components/Audio-worlds.vue
@@ -1,9 +1,10 @@
 <template>
     <div>
                                                 <!-- Hero Section -->
-        <section class="container-fluid">
+        <section class="container-fluid shadow-2xl">
             <div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Audio Books for <span class="text-color-1">Understanding the Worlds</span></div>
-            <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
+            <!-- Age Filter Triger -->
+            <!-- <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
                 <div class="flex">
                     <h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3">
@@ -14,17 +15,7 @@
                         <option>5-6 Year</option> 
                     </select>
                 </div> 
-                <!-- <div class="flex ">
-                    <h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
-                    <select class="select max-w-xs">
-                        <option>Select your Category</option>
-                        <option>3-4 Year</option>
-                        <option>4-5 Year</option>
-                        <option>5-6 Year</option>
-                        <option>6-7 Year</option>
-                    </select>
-                </div>  -->
-            </div>
+            </div> -->
         </section>
         <section class="container mx-auto pt-10 px-6 xl:px-24">
             <span class="h1-text text-color-1">All Audio Books</span>
diff --git a/src/components/Homepage.vue b/src/components/Homepage.vue
index 4ea90b1..4b60683 100644
--- a/src/components/Homepage.vue
+++ b/src/components/Homepage.vue
@@ -45,19 +45,19 @@
                     </div>
                 </section> -->
                 <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="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>
+                            <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>
                             <!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
                             <router-link to="/worksheets"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
                         </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">Popular Curriculum</h1>
-                            <p class="  font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">The EYFS British kindergarten curriculum has been adopted by multiple preschools throughout the country. The curriculum not only acknowledges theoretical subjects, yet also provides practical knowledge of daily life to preschoolers.</p>
+                            <p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">The EYFS British kindergarten curriculum has been adopted by multiple preschools throughout the country. The curriculum not only acknowledges theoretical subjects, yet also provides practical knowledge of daily life to preschoolers.</p>
                             <!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
                             <router-link to="/#EYFSCurriculum"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
                         </div>
@@ -97,13 +97,13 @@
                     <div class="flex flex-rows-2 justify-center font-semibold hero-text mt-8 text-color-1 py-10 px-4">Resources To Choose From</div>
                     <div class="grid grid-rows-1 md:grid-rows-2 place-items-center m-8 w-auto">
                         <div class="grid grid-cols-1 md:grid-cols-3 gap-4 place-items-between">
-                            <div class="grid"><router-link to="/audiobooks"><img draggable="false" src="/img/Audiobooks.png" alt=""></router-link></div>
-                            <div class="grid"><router-link to="/worksheets"><img draggable="false" src="/img/Worksheet.png" alt=""></router-link></div>
-                            <div class="grid"><router-link to="/videos"><img draggable="false" src="/img/Videos.png" alt=""></router-link></div> 
+                            <div class="grid"><a href="/audio-books"><img draggable="false" src="/img/Audiobooks.png" alt=""></a></div>
+                            <div class="grid"><a href="/worksheets"><img draggable="false" src="/img/Worksheet.png" alt=""></a></div>
+                            <div class="grid"><a href="/videos"><img draggable="false" src="/img/Videos.png" alt=""></a></div> 
                         </div>
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-4 place-items-between">
-                            <div class="grid"><router-link to="/themes"><img draggable="false" src="/img/Event-ideas.jpg" alt=""></router-link></div>
-                            <div class="grid"><router-link to=""><img draggable="false" src="/img/Reference-Links.png" alt=""></router-link></div>
+                            <div class="grid"><a href="/themes"><img draggable="false" src="/img/Event-ideas.jpg" alt=""></a></div>
+                            <div class="grid"><a href=""><img draggable="false" src="/img/Reference-Links.png" alt=""></a></div>
                         </div>
                     </div>
                 </section>
@@ -112,34 +112,21 @@
                         <div class="grid row-span-1 h-fit px-4">
                             <h1 class="text-color-1 font-semibold py-3 hero-text">Trending Lesson Plans</h1>
                             <h1 class="text-xl md:text-3xl text-color-2 pb-4">Discover today`s popular lesson <br> plans specially curated for your classroom.</h1>
-                            <div><router-link to="/dailyplan" class="text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl">Check Out Now</router-link></div>
+                            <div><a href="/dailyplan" class="text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl">Check Out Now</a></div>
                         </div>
-                        <div class="grid row-span-2 place-items-center lg:place-items-end w-fit">
-                            <swiper class="w-min"
+                        <div class="grid row-span-2 place-items-center lg:place-items-end cursor-pointer">
+                            <swiper class="w-96"
                                 :modules="modules"
                                 :slides-per-view="1"
                                 :space-between="0"
                                 navigation
-                                
+                                :autoplay=" { delay: 25000, disableOnInteraction: false}"
                                 @swiper="onSwiper"
-                                @slideChange="onSlideChange"
-                                >
+                                @slideChange="onSlideChange">
                                 <swiper-slide v-for="lesson in lessonplan" :key="lesson.id"> 
                                     <img lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
                                 </swiper-slide>      
-                                </swiper>
-                            <!-- <vueper-slides
-                                class="no-shadow w-96 px-14 md:px-0" arrows-outside
-                                :visible-slides="1"
-                                :bullets="false"
-                                slide-multiple
-                                :gap="1"
-                                :slide-ratio="3/3"
-                                :touchable="true"
-                                :dragging-distance="200"
-                                :breakpoints="{ 800: { visibleSlides: 1, } }">
-                                <vueper-slide v-for="lesson in lessonplan" :key="lesson.id" :image="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" />
-                            </vueper-slides> -->
+                            </swiper>
                         </div>
                     </div>
                 </section>
@@ -149,7 +136,7 @@
                             <p class="text-color-1 hero-text font-bold mt-20">Discover Our Preschool Solutions</p>
                             <router-link to="/worksheets"><button class="bg-blue-700 rounded-tl-lg rounded-br-lg text-white text-2xl px-6 py-2">Discover All</button></router-link>
                         </div>
-                            <div class="grid place-items-center md:place-items-end"><img src="/img/rectangle1.png" alt=""></div>
+                        <div class="grid place-items-center md:place-items-end"><img src="/img/rectangle1.png" alt=""></div>
                     </div>
                 </section>
                 <!-- <section class="container mx-auto">
@@ -184,7 +171,32 @@
                         <div class="grid ">
                             <img src="/img/legends.png" alt="" class="p-8"> 
                             <div class="flex relative justify-center text-xs ">
-                                <Roundchart/>
+                                <div class="grid">
+                                    <div class="flex relative justify-center text-xs">
+                                        <img class="" src="/img/frame1.png" alt="">
+                                        <p class="literacy absolute ml-24 -mt-10 md:-mt-0 md:ml-28 cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
+                                            Literacy</abbr>
+                                        </p>
+                                        <p class="comunication absolute -mt-8 md:mt-12 ml-48 md:ml-72 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
+                                            Comunication <br>& Language</abbr>
+                                        </p>
+                                        <p class="mathematics absolute ml-48 md:ml-72 -mt-32 md:-mt-0  text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
+                                            Mathematics</abbr>
+                                        </p>
+                                        <p class="world absolute -mt-36 ml-12 md:-mt-4 lg:ml-20 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
+                                            Understanding <br> the World </abbr>
+                                        </p>
+                                        <p class="physical absolute -mt-24 md:mt-4 -ml-40 md:-ml-56 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
+                                            Physical <br> Development </abbr>
+                                        </p>
+                                        <p class="expressive absolute -mt-16 md:mt-4 -ml-48 md:-ml-80 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
+                                            Expressive Arts<br> & Desgine </abbr>
+                                        </p>
+                                        <p class="preschool absolute -ml-28 md:-ml-40 -mt-4 md:mt-4 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
+                                            Preschool, Social <br>& Emotional <br>Development</abbr>
+                                        </p>
+                                    </div>
+                                </div>
                             </div>
                             <h1 class="h1-text font-bold text-color-2 pl-8">Discover in Preschool Education</h1>
                             <p class="text-xl md:text-3xl text-color-2 pl-8">Mentions are going to implemented Preschool Education System</p>
@@ -251,84 +263,107 @@
                         <div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div> 
                     </div>
                 </section>
+                <div>
             </div>
         </div>
-    </template>
-<script>
-   // Import Swiper Vue.js components
-   import { Swiper, SwiperSlide } from 'swiper/vue';
-    import 'swiper/css/navigation';
-    import 'swiper/css/pagination';
-    import { Navigation,Autoplay, Pagination, Scrollbar, A11y } from 'swiper';
-  
-    // Import Swiper styles
-    import 'swiper/css';
-    // const swiper = new Swiper('.swiper', {
-    //       autoplay: {
-    //         delay: 5000,
-    //       },
-    //     });
-    
-    export default {
-        components: {
-        Swiper,
-        SwiperSlide,
-      },
-      setup() {
-        const onSwiper = (swiper) => {
-          // console.log(swiper);
-        };
-        const onSlideChange = () => {
-          // console.log('slide change');
-        };
-        
-        
-        return {
-          onSwiper,
-          onSlideChange,
-          modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],
+    </div>
+</template>
+ <script>
+ // Import Swiper Vue.js components
+ import { Swiper, SwiperSlide } from 'swiper/vue';
+ import 'swiper/css/navigation';
+ import 'swiper/css/pagination';
+ import { Navigation,Autoplay, Pagination, Scrollbar, A11y } from 'swiper';
 
-        };
-      },
-    
-        data() {
-            return {
-                page: null,
-                faqHome: null,
-                themes:null,
-                lessonplan:null,
-                stories: null,
-                ideas: null,
-                worksheets: null,
-                videos: null,
-                youtube: null,
-                audio: null,
-                isLoading: true,
-    
-            }
-        },
-        mounted: function () {
-            fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily')
-                .then(response => response.json())
-                .then(data => {
-                    this.lessonplan = data.data
-                    // this.isLoading = false
-                    // console.log(this.page[0].id)
-                    // return this.page[0].id
-                }),
-                fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=home')
-                .then(resp => resp.json())
-                .then(data => {
-                    this.faqHome=data.data
-                    // console.log(this.faqHome)
-                })
-            },
-                
-        }
-    
-    </script>
+ // Import Swiper styles
+ import 'swiper/css';
+ // const swiper = new Swiper('.swiper', {
+ //       autoplay: {
+ //         delay: 5000,
+ //       },
+ //     });
+ import { computed, defineComponent, ref } from "vue";
 
-<style scoped>
+ export default {
+   components: {
+     Swiper,
+     SwiperSlide,
+   },
+   setup() {
+     const onSwiper = (swiper) => {
+       // console.log(swiper);
+     };
+     const onSlideChange = () => {
+       // console.log('slide change');
+     };
+     
+     
+     return {
+       onSwiper,
+       onSlideChange,
+       modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],
+
+     };
+   },
+   data() {
+     return {
+         page: null,
+         faqHome: null,
+         themes:null,
+         lessonplan:null,
+         stories: null,
+         ideas: null,
+         worksheets: null,
+         videos: null,
+         youtube: null,
+         audio: null,
+         isLoading: true,
+
+     }
+ },
+   mounted: function () {
+     fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily')
+         .then(response => response.json())
+         .then(data => {
+             this.lessonplan = data.data
+             // this.isLoading = false
+             // console.log(this.lessonplan)
+             // return this.page[0].id
+         })
+         fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=home')
+         .then(resp => resp.json())
+         .then(data => {
+             this.faqHome=data.data
+             // console.log(this.faqHome)
+         })
+     },
+     name: "ExpandableBlockContent",
+  props: {
+    content: { type: String },
+  },
+  setup() {
+    const isExpanded = ref(true);
+    const toggleCtaLabel = computed(() =>
+      isExpanded.value ? "Read Less >" : "Read More >"
+    );
+    return {
+      isExpanded,
+      toggleCtaLabel,
+    };
+  },
+ };
+</script>
+
+<style >
+.block-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.block-content__button {
+  color: #1d4ed8;
+  text-decoration: underline;
+}
     .position {
         position: relative;
         width: 100%;
@@ -382,32 +417,30 @@
       }
     }
     .literacy {
-        transform: rotate(24deg);
-        /* left: 24px; */
-        top: 120px;
-        /* align-items: center; */
+        top: 110px;
+        transform: rotate(25deg);
     }
     .comunication {
-        transform: rotate(80deg);
-        /* left: 360px; */
-        top: 170px;
-    }
-    .mathematics {
-        transform: rotate(-50deg);
-        top: 373px;
-    }
-    .world {
-        transform: rotate(-10deg);
-        top: 420px;
-    }
-    .physical {
-        transform: rotate(44deg);
-        top: 340px;
-    }
-    .expressive {
-        transform: rotate(-90deg);
-        top: 225px;
-    }
+    transform: rotate(80deg);
+    /* left: 360px; */
+    top: 170px;
+}
+.mathematics {
+    transform: rotate(-50deg);
+    top: 373px;
+}
+.world {
+    transform: rotate(-10deg);
+    top: 420px;
+}
+.physical {
+    transform: rotate(44deg);
+    top: 340px;
+}
+.expressive {
+    transform: rotate(-90deg);
+    top: 225px;
+}
     .preschool {
         transform: rotate(-35deg);
         top: 95px;
diff --git a/src/components/Readmore.vue b/src/components/Readmore.vue
new file mode 100644
index 0000000..d080f83
--- /dev/null
+++ b/src/components/Readmore.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="block-content">
+    <transition
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+      mode="out-in"
+    >
+      <p v-if="!isExpanded" class="block-content__preview" >The EYFS British kindergarten curriculum has been adopted by multiple preschools throughout the country. The curriculum not only acknowledges theoretical subjects, yet</p>
+      <p
+        v-else
+        :class="{
+          'block-content__paragraph': true,
+          'block-content__paragraph--is-expanded': isExpanded,
+        }"
+      
+      >also provides practical knowledge of daily life to preschoolers.</p>
+    </transition>
+    <button
+      type="button"
+      class="block-content__button"
+      aria-label="Toggle button"
+      @click="isExpanded = !isExpanded"
+    >
+      {{ toggleCtaLabel }}
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, toRefs } from "vue";
+export default defineComponent({
+  name: "ExpandableBlockContent",
+  props: {
+    content: { type: String },
+    visibleLines: { type: Number, default: 4 },
+  },
+  setup(props) {
+    const { visibleLines } = toRefs(props);
+    // Collapsed state
+    // Assuming that default line-height is 24px
+    const LINE_HEIGHT = 24;
+    const maxHeightCollapsed = computed(() => LINE_HEIGHT * visibleLines.value);
+    // Animation hooks
+    const onBeforeEnter = (el: Element) => {
+      const htmlEl = el as HTMLElement;
+      htmlEl.style.height = maxHeightCollapsed.value + "px";
+    };
+    const onEnter = (el: Element) => {
+      const htmlEl = el as HTMLElement;
+      htmlEl.style.height = el.scrollHeight + "px";
+    };
+    const onAfterEnter = (el: Element) => {
+      const htmlEl = el as HTMLElement;
+      htmlEl.style.overflow = "hidden";
+    };
+    const onBeforeLeave = (el: Element) => {
+      const htmlEl = el as HTMLElement;
+      htmlEl.style.height = `${el.scrollHeight}px`;
+      htmlEl.style.overflow = "hidden";
+    };
+    const onLeave = (el: Element) => {
+      const htmlEl = el as HTMLElement;
+      htmlEl.style.height = maxHeightCollapsed.value + "px";
+      htmlEl.style.overflow = "hidden";
+    };
+    // Expanded state
+    const isExpanded = ref(false);
+    const toggleCtaLabel = computed(() =>
+      isExpanded.value ? "Read less" : "Read more"
+    );
+    return {
+      isExpanded,
+      toggleCtaLabel,
+      onBeforeEnter,
+      onEnter,
+      onAfterEnter,
+      onBeforeLeave,
+      onLeave,
+    };
+  },
+});
+</script>
\ No newline at end of file
diff --git a/src/components/TestSwiper.vue b/src/components/TestSwiper.vue
index a095847..df45ac2 100644
--- a/src/components/TestSwiper.vue
+++ b/src/components/TestSwiper.vue
@@ -9,15 +9,9 @@
     @slideChange="onSlideChange"
     >
       <swiper-slide v-for="lesson in lessonplan" :key="lesson.id"> 
-      <img lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
-      </swiper-slide>
-      <!-- <swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
-      <swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
-      <swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
-      <swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
-      <swiper-slide><img src="/img/13.png" alt=""></swiper-slide> -->
-      
-        </swiper>
+        <img lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
+      </swiper-slide>      
+      </swiper>
   </template>
   <script>
     // Import Swiper Vue.js components
diff --git a/src/components/Themes.vue b/src/components/Themes.vue
index a01608a..1758b2b 100644
--- a/src/components/Themes.vue
+++ b/src/components/Themes.vue
@@ -160,7 +160,7 @@
                     </label>
                     <!-- <label :for="aud.file" class="btn">{{aud.id}} -</label> -->
 
-                    <input type="checkbox" :id="aud.file" class="modal-toggle" />
+                    <input type="" :id="aud.file" class="modal-toggle" />
                     <label :for="aud.file" class="modal cursor-pointer">
                         <label class="modal-box relative" for="">
                             <audio controls>
diff --git a/src/components/Video-literacy.vue b/src/components/Video-literacy.vue
index 8ca35a9..608e4a1 100644
--- a/src/components/Video-literacy.vue
+++ b/src/components/Video-literacy.vue
@@ -1,9 +1,10 @@
 <template>
     <div>
                                                 <!-- Hero Section -->
-        <section class="container-fluid">
+        <section class="container-fluid shadow-2xl">
             <div class="bg3 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Videos for <span class="text-color-1">Literacy</span></div>
-            <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-72 px-4 pt-5 shadow-xl lg:gap-4">
+            <!-- Age Filter Triger -->
+            <!-- <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-72 px-4 pt-5 shadow-xl lg:gap-4">
                 <div class="flex">
                     <h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3">
@@ -14,17 +15,7 @@
                         <option>5-6 Year</option> 
                     </select>
                 </div> 
-                <!-- <div class="flex ">
-                    <h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
-                    <select class="select max-w-xs">
-                        <option>Select your Category</option>
-                        <option>3-4 Year</option>
-                        <option>4-5 Year</option>
-                        <option>5-6 Year</option>
-                        <option>6-7 Year</option>
-                    </select>
-                </div>  -->
-            </div>
+            </div> -->
         </section>
         <section class="container mx-auto pt-10 px-8 xl:px-24">
             <span class="h1-text text-color-1">All Videos</span>
diff --git a/src/components/Video-mathematics.vue b/src/components/Video-mathematics.vue
index 89f516c..5226e4c 100644
--- a/src/components/Video-mathematics.vue
+++ b/src/components/Video-mathematics.vue
@@ -1,9 +1,10 @@
 <template>
     <div>
                                                 <!-- Hero Section -->
-        <section class="container-fluid">
+        <section class="container-fluid shadow-2xl">
             <div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Videos for <span class="text-color-1">Mathematics</span></div>
-            <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
+            <!-- Age Filter Triger -->
+            <!-- <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
                 <div class="flex">
                     <h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3">
@@ -14,17 +15,7 @@
                         <option>5-6 Year</option> 
                     </select>
                 </div> 
-                <!-- <div class="flex ">
-                    <h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
-                    <select class="select max-w-xs">
-                        <option>Select your Category</option>
-                        <option>3-4 Year</option>
-                        <option>4-5 Year</option>
-                        <option>5-6 Year</option>
-                        <option>6-7 Year</option>
-                    </select>
-                </div>  -->
-            </div>
+            </div> -->
         </section>
         <section class="container mx-auto pt-10 px-6 xl:px-24">
             <span class="h1-text text-color-1">All Videos</span>
diff --git a/src/components/Video-world.vue b/src/components/Video-world.vue
index 9e54733..c39b85d 100644
--- a/src/components/Video-world.vue
+++ b/src/components/Video-world.vue
@@ -1,9 +1,10 @@
 <template>
     <div>
                                                 <!-- Hero Section -->
-        <section class="container-fluid">
+        <section class="container-fluid shadow-2xl">
             <div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Videos for <span class="text-color-1">Understanding the Worlds</span></div>
-            <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
+            <!-- Age Filter Triger -->
+            <!-- <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
                 <div class="flex">
                     <h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3">
@@ -14,17 +15,7 @@
                         <option>5-6 Year</option> 
                     </select>
                 </div> 
-                <!-- <div class="flex ">
-                    <h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
-                    <select class="select max-w-xs">
-                        <option>Select your Category</option>
-                        <option>3-4 Year</option>
-                        <option>4-5 Year</option>
-                        <option>5-6 Year</option>
-                        <option>6-7 Year</option>
-                    </select>
-                </div>  -->
-            </div>
+            </div> -->
         </section>
         <section class="container mx-auto pt-10 px-6 xl:px-24">
             <span class="h1-text text-color-1">All Videos</span>
diff --git a/src/components/Videos.vue b/src/components/Videos.vue
index 4fb4595..fc02fcf 100644
--- a/src/components/Videos.vue
+++ b/src/components/Videos.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <section class="container-fluid bg3">
+        <section class="container-fluid bg3 shadow-2xl">
             <div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
                 <div class="flex flex-col w-fit justify-center">
                     <h1 class="text-blue-700 hero-text font-bold">Videos<span class="text-color-1"> For Your Classroom</span></h1>
@@ -31,9 +31,8 @@
             </div>
         </section> -->
         <section>
-            <!-- <p class="container mx-auto px-6 text-color-2 font-20px text-justify mt-4">It’s time to bring out the best among your toddlers with a blend of visual and audio effects! Present them a world filled with magnificent effects and make them learn enthusiastically with preschool learning videos filled with rhyming sounds, attractive effects, graphic images and cartoons, etc. </p> -->
-            <!-- <p class="container mx-auto px-6 text-color-2 font-20px text-justify mt-4">Make learning exciting with Teeny Beans Preschool Curriculum’s videos for preschoolers that will provide the right learning and understanding to the little ones. These educational videos for preschoolers constitute every fundamental topic. </p> -->
-            <div class="flex flex-col bg3 md:flex-row justify-center md:justify-end lg:px-48 px-4 shadow-xl lg:gap-4">
+            <!-- Age Filter Triger -->
+            <!-- <div class="flex flex-col bg3 md:flex-row justify-center md:justify-end lg:px-48 px-4 shadow-xl lg:gap-4">
                 <div class="flex ">
                     <h1 class="pt-3 font-semibold">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3" @change="switchSelect($event)">
@@ -44,7 +43,7 @@
                         <option value="5">5-6 Year</option>  
                     </select>
                 </div> 
-            </div>
+            </div> -->
         </section>
         <section class="container-fluid pt-10">
             <p class="font-20px text-justify pt-6 container mx-auto px-4 xl:px-24">Make learning exciting with Teeny Beans Preschool Curriculum’s videos for preschoolers that will provide the right learning and understanding to the little ones. These educational videos for preschoolers constitute every fundamental topic.</p>
@@ -209,33 +208,33 @@ export default {
         }
     },
     methods: {
-        // showYtModal(ytID){
-        //     this.ytModal=true
-        //     this.ytID=ytID
-        // },
-        // hideYtModal(){
-        //     this.ytModal=false
+        showYtModal(ytID){
+            this.ytModal=true
+            this.ytID=ytID
+        },
+        hideYtModal(){
+            this.ytModal=false
         //     // this.ytID=ytID
-        // },
+        },
         switchSelect(event) {
             // alert(event.target.value)
             this.getVideos(event.target.value)
         // this.selected = event.target.value;
         },
         getVideos(age=2){
-            fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[age][_eq]='+age+'&filter[category][_eq]=literacy')
+            fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[category][_eq]=literacy')
             .then(resp => resp.json())
             .then(videobooks => {
                 this.vbliteracy=videobooks.data.reverse().slice(0, 3)
                 console.log(this.vbliteracy)
             })
-            fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[age][_eq]='+age+'&filter[category][_eq]=mathematics')
+            fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[category][_eq]=mathematics')
             .then(resp => resp.json())
             .then(videobooks => {
                 this.vbmath=videobooks.data.reverse().slice(0, 3)
                 // console.log(this.vbmath)
             })
-            fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[age][_eq]='+age+'&filter[category][_eq]=world')
+            fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[category][_eq]=world')
             .then(resp => resp.json())
             .then(videobooks => {
                 this.vbworld=videobooks.data.reverse().slice(0, 3)
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 485608e..324c4a3 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,13 +1,13 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import Header from '../components/Header.astro';
+// import Header from '../components/Header.astro';
 import Homepage from '../components/Homepage.vue';
 import Faq from '../components/Faq.vue';
 import Roundchart from '../components/Roundchart.vue';
 import Footer from '../components/Footer.vue';
 ---
 <Layout title="Welcome to Astro.">
-	<Header />
+	<!-- <Header /> -->
 	<Homepage />
 	<Faq />
 	<Roundchart/>
diff --git a/src/pages/audio.astro b/src/pages/audio.astro
index 5b60f12..39fcc77 100644
--- a/src/pages/audio.astro
+++ b/src/pages/audio.astro
@@ -1,7 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Audio from "../components/Audio.vue";
+// import Audio from "../components/Audio.vue";
 ---
 <Layout title="Audio Books">
-    <Audio client:visible/>
+    <!-- <Audio client:visible/> -->
 </Layout>
\ No newline at end of file
diff --git a/src/pages/blog/[id].astro b/src/pages/blog/[id].astro
new file mode 100644
index 0000000..b28397c
--- /dev/null
+++ b/src/pages/blog/[id].astro
@@ -0,0 +1,19 @@
+---
+const response = await fetch('https://curriculum-app-api.beanstalkedu.com/items/blog/1');
+const data = await response.json();
+const blog = data.data;
+console.log(blog)
+
+export function getStaticPaths() {
+  return [
+    { params: { id: '1' } },
+    { params: { id: '2' } },
+    { params: { id: '3' } }
+  ];
+}
+
+const { id } = Astro.params;
+---
+<h1>{id}</h1>
+<h1>{id}</h1>
+{blog}
\ No newline at end of file
diff --git a/src/pages/blog/a.astro b/src/pages/blog/a.astro
new file mode 100644
index 0000000..b94a8b5
--- /dev/null
+++ b/src/pages/blog/a.astro
@@ -0,0 +1,24 @@
+---
+// const response = await fetch('https://curriculum-app-api.beanstalkedu.com/items/blog/1');
+// const data = await response.json();
+const response = await fetch('https://randomuser.me/api/');
+const data = await response.json();
+const randomUser = data.results[0];
+console.log(randomUser) // dont see a console log on browser
+// const randomUser = data.results[0];
+
+export function getStaticPaths() {
+  return [
+    { params: { id: '1' } },
+    { params: { id: '2' } },
+    { params: { id: '3' } }
+  ];
+}
+
+const { id } = Astro.params;
+---
+<h1>{id}</h1>
+<h1>{id}</h1>
+
+<h1>User</h1>
+<h2>{randomUser.name.first} {randomUser.name.last}</h2>
\ No newline at end of file
diff --git a/src/pages/blog.astro b/src/pages/blog/index.astro
similarity index 61%
rename from src/pages/blog.astro
rename to src/pages/blog/index.astro
index 9192a0e..a892470 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog/index.astro
@@ -1,8 +1,8 @@
 ---
-import Layout from "../layouts/Layout.astro";
-import Menu from "../components/Menu.astro";
-import Blog from "../components/Blog.vue";
-import Footer from "../components/Footer.vue";
+import Layout from "../../layouts/Layout.astro";
+import Menu from "../../components/Menu.astro";
+import Blog from "../../components/Blog.vue";
+import Footer from "../../components/Footer.vue";
 ---
 
 <Layout  title="Welcome to Astro.">
diff --git a/src/pages/read.astro b/src/pages/read.astro
new file mode 100644
index 0000000..61a30ad
--- /dev/null
+++ b/src/pages/read.astro
@@ -0,0 +1,75 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Readmore from "../components/Readmore.vue";
+---
+<Layout title="">
+    <Readmore client:visible/>
+</Layout>
+<!-- <main>
+    <h1>Hello world</h1>
+<p class="text">
+    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis
+    veritatis animi aliquam laboriosam velit, esse, blanditiis aspernatur sint
+    est magnam debitis delectus in fuga fugiat repellat dignissimos ipsum
+    necessitatibus corrupti veniam reprehenderit,<span class="dots"> ...</span>
+    <span class="moreText">
+        assumenda sapiente expedita labore atque! Sint velit cumque minus
+        pariatur quisquam, beatae ab quo impedit eaque soluta vel laboriosam
+        itaque similique iste ex aut in nihil dolorem consequuntur possimus
+        eligendi eos optio ipsam! Sint ullam voluptate obcaecati asperiores eos
+        vero sed iusto magnam ad, vel repellat quidem? Omnis fugit accusantium,
+        illo quos eos odio consectetur et nemo excepturi deleniti dolorum
+        adipisci dolores delectus possimus libero, sed iusto dolorem? Lorem
+        ipsum dolor sit amet consectetur adipisicing elit. Reiciendis neque
+        distinctio modi dicta ut aperiam molestiae quos incidunt dolore iure
+        officia! Blanditiis sint delectus quam quae nulla.</span
+    >
+</p>
+<button class="read-more-btn">Read More</button>
+</main>
+
+
+<script is:inline>
+const readMoreBtn = document.querySelector(".read-more-btn");
+const text = document.querySelector(".text");
+readMoreBtn.addEventListener("click", (e) => {
+    text.classList.toggle("show-more");
+    if (readMoreBtn.innerText === "Read More") {
+        readMoreBtn.innerText = "Read Less";
+    } else {
+        readMoreBtn.innerText = "Read More";
+    }
+});
+
+</script>
+<style>
+body {
+    font-family: "Montserrat";
+    text-align: justify;
+    max-width: 800px;
+    margin: 0 auto;
+    background-color: rgb(18, 23, 27);
+    color: aliceblue;
+}
+.text {
+    font-size: 24px;
+}
+.moreText {
+    display: none;
+}
+.read-more-btn {
+    padding: 15px 60px;
+    background-color: rgb(149, 170, 197);
+    color: rgb(53, 49, 49);
+    border: none;
+    outline: none;
+    font-size: 20px;
+    cursor: pointer;
+}
+.text.show-more .moreText {
+    display: inline;
+}
+.text.show-more .dots {
+    display: none;
+}
+</style> -->
\ No newline at end of file