diff --git a/public/img/dailylLesson-plan.jpg b/public/img/dailylLesson-plan.jpg
new file mode 100644
index 0000000..9ab008a
Binary files /dev/null and b/public/img/dailylLesson-plan.jpg differ
diff --git a/public/img/monthly-lesson-plan.png b/public/img/monthly-lesson-plan.png
new file mode 100644
index 0000000..2541dff
Binary files /dev/null and b/public/img/monthly-lesson-plan.png differ
diff --git a/public/img/number-2.png b/public/img/number-2.png
new file mode 100644
index 0000000..942c9ce
Binary files /dev/null and b/public/img/number-2.png differ
diff --git a/public/img/uppercase-letter-g.png b/public/img/uppercase-letter-g.png
new file mode 100644
index 0000000..aa8bea5
Binary files /dev/null and b/public/img/uppercase-letter-g.png differ
diff --git a/public/img/weekly-lesson-plan.png b/public/img/weekly-lesson-plan.png
new file mode 100644
index 0000000..c91ff27
Binary files /dev/null and b/public/img/weekly-lesson-plan.png differ
diff --git a/src/components/Administrators.vue b/src/components/Administrators.vue
index eaf4a5f..817f46e 100644
--- a/src/components/Administrators.vue
+++ b/src/components/Administrators.vue
@@ -198,18 +198,18 @@
                         <form class="grid place-items-center" v-if="rOutQry">
                             <div class="flex flex-wrap mb-6 justify-center">
                                 <div class="md:w-1/2 px-3 mb-6 md:mb-0">
-                                    <input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="rOutName" type="text" placeholder="Your Name">
+                                    <input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="rOutName" type="text" placeholder="Your Name" required>
                                 </div>
                                 <div class="md:w-1/2 px-3">
-                                    <input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100" v-model="rOutPhone" type="text" placeholder="Your Phone Number">
+                                    <input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100" v-model="rOutPhone" type="text" placeholder="Your Phone Number" required>
                                 </div>
                             </div>
                             <div class="flex flex-wrap mb-6 justify-center">
                                 <div class="md:w-1/2 px-3 mb-6 md:mb-0">
-                                    <input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"  v-model="rOutEmail" type="email" placeholder="Your E-mail">
+                                    <input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"  v-model="rOutEmail" type="email" placeholder="Your E-mail" required>
                                 </div>
                                 <div class="md:w-1/2 px-3">
-                                    <input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100"  v-model="rOutAddress" type="text" placeholder="Your Address">
+                                    <input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100"  v-model="rOutAddress" type="text" placeholder="Your Address" required>
                                 </div>
                             </div>
                             <div class="flex -mt-4"><button @click="saveReachoutQry" class="bg-blue-700 text-lg p-1 text-white px-6 py-2 rounded-tl-lg rounded-br-lg mb-8">Contact Us</button></div> 
@@ -259,12 +259,12 @@
                             <h3 class="text-center text-xl lg:text-3xl p-4">You can download the case study here</h3>
                             <div class="flex flex-wrap mb-6">
                                 <div class="w-full md:w-3/3 px-3 mb-6 md:mb-0">
-                                    <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="csName" type="text" placeholder="Your Name">
+                                    <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="csName" id="fullname" type="text" placeholder="Your Name" required>
                                 </div>
                             </div>
                             <div class="flex flex-wrap mb-6">
                                 <div class="w-full md:w-3/3 px-3 mb-6 md:mb-0">
-                                    <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"  v-model="csEmail"  type="text" placeholder="Your E-mail Id">
+                                    <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"  v-model="csEmail" id="email"  type="email" placeholder="Your E-mail Id" required>
                                 </div>
                             </div>
                             <div class="flex justify-center -mt-4">
diff --git a/src/components/Educators.vue b/src/components/Educators.vue
index 995322f..cf76b59 100644
--- a/src/components/Educators.vue
+++ b/src/components/Educators.vue
@@ -20,23 +20,23 @@
                 <p class="text-color-2 font-20px pb-16 pt-4 text-justify px-4">Specifically designed lesson plans are all you require this season! Created with the best strategies to invoke the right knowledge in children, these plans constitute a successful learning through a thoroughly constructed curriculum by providing worksheets, audio books, lessons, activities, games and much more associated with each plan.                 </p>
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 place-items-start px-4 " >
                     <div class="grid background rounded-xl">
-                        <div class="bottombar cursor-pointer mt-4">
-                            <img class="rounded-t-2xl w-full" src="/img/plan.jpg" alt="">
-                            <h1 class="text-3xl text-blue-700 font-semibold text-center p-2">The Scholarly Plan </h1>
+                        <div class="bottombar cursor-pointer mt-4 flex flex-col place-items-center">
+                            <img class="rounded-t-2xl" src="/img/dailylLesson-plan.jpg" alt="">
+                            <h1 class="text-3xl text-blue-700 font-semibold text-center p-2">Daily Plan </h1>
                             <p class="text-white text-justify text-xl">Created with all essential subjects, escalate children’s learning and become time-efficient with this scholarly plan to assist the development aspects at this age. It includes literacy, mathematics, vocabulary, reading, understanding of the world and arts & crafts.</p>
                         </div>
                     </div>
                     <div class="grid background rounded-xl">
                         <div class="bottombar cursor-pointer mt-4">
-                            <img class=" w-full rounded-t-2xl " src="/img/plan.jpg" alt="">
-                            <h1 class="text-3xl text-blue-700 font-semibold text-center p-2">The Engaging Plan </h1>
+                            <img class=" w-fit rounded-t-2xl " src="/img/weekly-lesson-plan.png" alt="">
+                            <h1 class="text-3xl text-blue-700 font-semibold text-center p-2">Weekly Plan </h1>
                             <p class="text-white text-justify text-xl">Making studies interesting for children is what every teacher or parent needs. The engaging plan is all about fun but fruitful learning. Get access to all kinds of learning activities including games, smart worksheets, quizzes, videos and many others.</p>
                         </div>
                     </div>
                     <div class="grid background rounded-xl">
                         <div class="bottombar cursor-pointer mt-4">
-                            <img class=" w-full rounded-t-2xl" src="/img/plan.jpg" alt="">
-                            <h1 class="text-3xl text-blue-700 font-semibold text-center p-2">The Effective Plan </h1>
+                            <img class=" w-fit rounded-t-2xl" src="/img/monthly-lesson-plan.png" alt="">
+                            <h1 class="text-3xl text-blue-700 font-semibold text-center p-2">Monthly Plan </h1>
                             <p class="text-white text-xl text-justify">A combination of the scholarly and engaging plan, the most useful learning method of studying with fun learning has been adopted by the effective plan, along with adding a bunch of more concepts and activities to make children learn and grow successfully.</p>
                         </div>
                     </div>
@@ -284,9 +284,12 @@ font-family: 'Quicksand', sans-serif;
 .h1-text {
   font-size: 30px;
 }
-    .bottombar {
+.image {
+    height: 300px;
+}    
+.bottombar {
   font-size: large;
-  /* width: 42px; */
+  width: fit-content;
   overflow: hidden;
   white-space: nowrap;
   /* position: fixed; */
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 7c71f0d..10a9ccb 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -5,11 +5,11 @@
                 <div class="grid grid-rows-1 bg-slider opacity-75 place-items-center">
                     <div class="flex bg-slider text-white text-center text-lg w-max pl-14 pr-14 p-3">
                         <a href="/worksheets">&#60&nbsp; Preschool Worksheets &nbsp;|</a>
-                        <a href="/themes">&nbsp; Preschool Event Ideas &nbsp;|</a>
+                        <a href="/audio-books">&nbsp; Preschool Audio Books &nbsp;|</a>
                         <a href="/videos">&nbsp; Preschool Videos &nbsp;|</a>
                         <a href="/occassion">&nbsp; Preschool Occasions &nbsp;|</a>
-                        <a href="/themes">&nbsp; Preschool Monthly Themes &nbsp;|</a>
-                        <a href="/themes">&nbsp; Preschool Celebration Ideas &nbsp; &#62</a>
+                        <a href="/themes">&nbsp; Preschool Themes &nbsp;|</a>
+                        <a href="/occassion">&nbsp; Preschool Celebration Ideas &nbsp; &#62</a>
                     </div>
                 </div>
             </div>
@@ -29,12 +29,12 @@
                     <a class="py-2" href="/faq">FAQs</a>
                 </div>
                 <div class="grid ml-4 h-fit">
-                    <a class="py-2" href="/celebrationstories#submitCelebration">Event Ideas</a>
                     <a class="py-2" href="/worksheets" >Worksheets</a> 
                     <a class="py-2" href="/videos">Videos</a>
                     <a class="py-2" href="/audio-books">Audiobooks</a>
                     <a class="py-2" href="/premium">Pricing Plans</a>
                     <a class="py-2" href="/whats-new">What's New</a>
+                    <a class="py-2" href="/blog">Blog</a>
                 </div>
             </div>
             <div class="grid grid-cols-1 mt-4 ml-4 font-bold text-sm h-fit "><h1 style="color: #414141"> Get in touch with Us</h1>
diff --git a/src/components/Menu.astro b/src/components/Menu.astro
index b257c3d..7cc0be7 100644
--- a/src/components/Menu.astro
+++ b/src/components/Menu.astro
@@ -10,7 +10,7 @@
             <a href="/educators">Educators</a>
             <a href="/administrators">Administrators</a>
             <div class="dropdownDesktop">
-                <button class="dropbtnDesktop" style="font-family: quicksand;">Recources <span class="">v</span>
+                <button class="dropbtnDesktop" style="font-family: quicksand;">Recources <span class="text-xs">∇</span>
                 <i class="fa fa-caret-downDesktop"></i>
                 </button>
                 <div class="dropdown-contentDesktop">
diff --git a/src/components/TestModal.astro b/src/components/TestModal.astro
new file mode 100644
index 0000000..b467038
--- /dev/null
+++ b/src/components/TestModal.astro
@@ -0,0 +1,7 @@
+---
+const {var1} = Astro.props;
+---
+<div>
+    <h2>cffdfd </h2>
+    {var1}
+</div>
\ No newline at end of file
diff --git a/src/components/ThemesVideos.astro b/src/components/ThemesVideos.astro
new file mode 100644
index 0000000..acfd830
--- /dev/null
+++ b/src/components/ThemesVideos.astro
@@ -0,0 +1,251 @@
+---
+const {var1} = Astro.props;
+---
+<template>
+
+<section class="container mx-auto py-6 px-4 xl:px-24">  
+    <div class="h1-text  text-blue-700 font-semibold py-4">Videos</div>
+    <h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{{page[0].videos_text}}</h1>
+    <div v-if="videos" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+        <div v-for="vdo in videos.slice(0, 3)" :key="videos.id" class="p-4">
+            <div @click="showYtModal(vdo.youtube_id)">
+                <div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
+                    <div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
+                    <img class="absolute top-16 left-24 -rotate-6 w-16" src="/img/svg/play.svg" alt="" />
+                    </div>
+                </div>
+                <div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
+            </div>
+            
+            <!-- <label :for="vdo.videos_file" >
+                <div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
+                    <div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
+                        <img v-else src="/img/image_not_available.png" alt="" />
+                    <img class="absolute top-20 left-28 -rotate-6 w-24" src="/img/svg/play.svg" alt="" />
+                    </div>
+                </div>
+                <div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
+            </label>
+            <input type="checkbox" :id="vdo.videos_file" class="modal-toggle" />
+            <label :for="vdo.videos_file" class="modal cursor-pointer">
+                <label class="modal-box relative" for="">
+                    <iframe width="340" 
+                    src="https://www.youtube.com/embed/tgbNymZ7vqY">
+                    </iframe>
+                </label>
+            </label> -->
+        </div>
+        <a href="/plan">
+        <div v-for="vdo in videos.slice(3, 4)" :key="videos.id" class="p-4">
+            <div class="flex bg-gray-200 -rotate-6  gap-8">
+                <div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-lg rounded-br-lg" />
+                    <div class="absolute top-16 left-20">
+                        <h3 class="text-center inline-block px-4 py-2.5 bg-amber-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-amber-400 hover:shadow-lg focus:bg-amber-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">+ Subscribe </h3>
+                        <h3 class="-ml-2"> &nbsp;To download <br> more resources</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-6 text-center text-lg opacity-0">...</div>
+        </div></a>
+    </div>
+</section>
+        <div @click="hideYtModal" v-if="ytModal" id="ytModal" class="flex justify-center ytModal">
+            <div class="modal-content">
+            <span  @click="hideYtModal" class="close">&times;</span>
+            <div style="width: 100%;">
+                <iframe width="380" height="320" 
+                :src="'https://www.youtube.com/embed/'+ytID">
+                </iframe>
+            </div>
+            </div>
+        </div>
+</template>
+<script>
+
+
+export default {
+    setup(){
+    // const route = useRoute();
+},
+methods: { 
+        showYtModal(ytID){
+            this.ytModal=true
+            this.ytID=ytID
+        },
+        hideYtModal(){
+            this.ytModal=false
+            // this.ytID=ytID
+        }    
+    },
+    data() {
+        return {
+            page: null,
+            faqOccassion: null,
+            occassionblog: null,
+            themes:null,
+            allOccassion:null,
+            stories: null,
+            ideas: null,
+            worksheets: null,
+            videos: null,
+            youtube: null,
+            audio: null,
+            isLoading: true,
+            ytModal:false,
+            ytID:''
+
+        }
+    },
+    mounted: function () {
+        fetch('https://management.beanstalkedu.com/items/themes?filter[status][_eq]=published')
+            .then(response => response.json())
+            .then(data => {
+                this.page = data.data
+                this.isLoading = false
+                // console.log(this.page[0].id)
+                return this.page[0].id
+            })
+            .then((themesID) => {
+                fetch('https://management.beanstalkedu.com/items/theme_videos?filter[theme_key][_in]='+ themesID)
+                .then(resp => resp.json())
+                    .then(videos => {
+                        this.videos=videos.data.reverse().slice(0, 4)
+                        // console.log(this.videos)
+                    })
+                    return themesID
+            })
+            
+      
+            
+    }
+}
+</script>
+<style scopped>
+.font-20px {
+    font-size: 20px;
+}
+@media screen and (min-width: 1500px) {
+  .hero-text {
+    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: 801px) {
+  .h1-text {
+    font-size: 40px;
+    
+    
+  } 
+}
+
+@media screen and (min-width: 1500px) {
+  .h2-text {
+    font-size: 30px;
+  } 
+}
+@media screen and (max-width: 1499px) {
+  .h2-text {
+    font-size: 24px;
+  }
+}
+@media screen and (max-width: 1199px) {
+  .h2-text {
+    font-size: 20px;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .h1-text {
+    font-size: 30px;
+    
+  }
+}
+
+
+.load-wraper{
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: rgb(211,211,211);
+  z-index: 44;
+  overflow: hidden;
+  border-radius: 5px;
+}
+.activity{
+  position: absolute;
+  left: -45%;
+  height: 100%;
+  width: 45%;
+  background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
+  background-image: -moz-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
+  background-image: -webkit-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
+  animation: loading 1s infinite;
+  z-index: 45;
+}
+
+@keyframes loading {
+  0%{
+    left: -45%;
+  }
+  100%{
+    left: 100%;
+  }
+}
+.text-color-1 {
+    color: #7C4C23;
+}
+
+.text-color-2 {
+    color: #333333;
+}
+.box{
+        width: 380px;
+        height: 220px;
+    }
+    .box1 {
+        width: 500px;
+        height: 220px;
+    }
+    input[type="file"] {
+    display: none;
+}
+.custom-file-upload {
+    border: 1px solid #ccc;
+    display: inline-block;
+    padding: 6px 12px;
+    cursor: pointer;
+}
+.ytModal {
+  /* 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);
+}
+.bg3 {
+  background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
+
+
+
+</style>
\ No newline at end of file
diff --git a/src/components/ThemesVideos.vue b/src/components/ThemesVideos.vue
index 23ab7ed..0dfab0c 100644
--- a/src/components/ThemesVideos.vue
+++ b/src/components/ThemesVideos.vue
@@ -1,51 +1,51 @@
 <template>
 
 <section class="container mx-auto py-6 px-4 xl:px-24">  
-            <div class="h1-text  text-blue-700 font-semibold py-4">Videos</div>
-            <h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{{page[0].videos_text}}</h1>
-            <div v-if="videos" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
-                <div v-for="vdo in videos.slice(0, 3)" :key="videos.id" class="p-4">
-                    <div @click="showYtModal(vdo.youtube_id)">
-                        <div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
-                            <div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
-                            <img class="absolute top-16 left-24 -rotate-6 w-16" src="/img/svg/play.svg" alt="" />
-                            </div>
-                        </div>
-                        <div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
+    <div class="h1-text  text-blue-700 font-semibold py-4">Videos</div>
+    <h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{{page[0].videos_text}}</h1>
+    <div v-if="videos" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+        <div v-for="vdo in videos.slice(0, 3)" :key="videos.id" class="p-4">
+            <div @click="showYtModal(vdo.youtube_id)">
+                <div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
+                    <div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
+                    <img class="absolute top-16 left-24 -rotate-6 w-16" src="/img/svg/play.svg" alt="" />
                     </div>
-                    
-                    <!-- <label :for="vdo.videos_file" >
-                        <div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
-                            <div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
-                                <img v-else src="/img/image_not_available.png" alt="" />
-                            <img class="absolute top-20 left-28 -rotate-6 w-24" src="/img/svg/play.svg" alt="" />
-                            </div>
-                        </div>
-                        <div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
-                    </label>
-                    <input type="checkbox" :id="vdo.videos_file" class="modal-toggle" />
-                    <label :for="vdo.videos_file" class="modal cursor-pointer">
-                        <label class="modal-box relative" for="">
-                            <iframe width="340" 
-                            src="https://www.youtube.com/embed/tgbNymZ7vqY">
-                            </iframe>
-                        </label>
-                    </label> -->
                 </div>
-                <a href="/plan">
-                <div v-for="vdo in videos.slice(3, 4)" :key="videos.id" class="p-4">
-                    <div class="flex bg-gray-200 -rotate-6  gap-8">
-                        <div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-lg rounded-br-lg" />
-                            <div class="absolute top-16 left-20">
-                                <h3 class="text-center inline-block px-4 py-2.5 bg-amber-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-amber-400 hover:shadow-lg focus:bg-amber-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">+ Subscribe </h3>
-                                <h3 class="-ml-2"> &nbsp;To download <br> more resources</h3>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mt-6 text-center text-lg opacity-0">...</div>
-                </div></a>
+                <div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
             </div>
-        </section>
+            
+            <!-- <label :for="vdo.videos_file" >
+                <div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
+                    <div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
+                        <img v-else src="/img/image_not_available.png" alt="" />
+                    <img class="absolute top-20 left-28 -rotate-6 w-24" src="/img/svg/play.svg" alt="" />
+                    </div>
+                </div>
+                <div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
+            </label>
+            <input type="checkbox" :id="vdo.videos_file" class="modal-toggle" />
+            <label :for="vdo.videos_file" class="modal cursor-pointer">
+                <label class="modal-box relative" for="">
+                    <iframe width="340" 
+                    src="https://www.youtube.com/embed/tgbNymZ7vqY">
+                    </iframe>
+                </label>
+            </label> -->
+        </div>
+        <a href="/plan">
+        <div v-for="vdo in videos.slice(3, 4)" :key="videos.id" class="p-4">
+            <div class="flex bg-gray-200 -rotate-6  gap-8">
+                <div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-lg rounded-br-lg" />
+                    <div class="absolute top-16 left-20">
+                        <h3 class="text-center inline-block px-4 py-2.5 bg-amber-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-amber-400 hover:shadow-lg focus:bg-amber-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">+ Subscribe </h3>
+                        <h3 class="-ml-2"> &nbsp;To download <br> more resources</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-6 text-center text-lg opacity-0">...</div>
+        </div></a>
+    </div>
+</section>
         <div @click="hideYtModal" v-if="ytModal" id="ytModal" class="flex justify-center ytModal">
             <div class="modal-content">
             <span  @click="hideYtModal" class="close">&times;</span>
diff --git a/src/components/Worksheets.vue b/src/components/Worksheets.vue
index f8d9062..ef64ba1 100644
--- a/src/components/Worksheets.vue
+++ b/src/components/Worksheets.vue
@@ -52,7 +52,7 @@
         <section class="container-fluid pt-10">
             <p class="font-20px text-justify pt-6 container mx-auto px-4 xl:px-24">A mixture of uniqueness, innovativity, attractiveness and comprehension of each topic through a blend of letters, numbers, shapes, colors, sounds, words, etc., these worksheet for playgroup will bring out the best in your classroom! Find the appropriate worksheet for every subject inclusive of all significant topics and establish the right educational foundation among children.</p>
         </section>
-        <div class="my-24"></div>
+        <div class="my-6"></div>
                                                             <!-- Literacy section -->
         <section class="container mx-auto pt-10 px-4 xl:px-24">
             <span class="h1-text text-blue-700 font-semibold">Literacy</span>
@@ -70,7 +70,7 @@
                 <div class="grid">
                     <div  class="grid place-items-center">
                         <div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
-                            <img class="w-56 h-72 rotate-6 relative" src="/img/rectangle1.png" alt=""/>
+                            <img class="w-56 h-72 rotate-6 relative" src="/img/uppercase-letter-g.png" alt=""/>
                         </div>
                         <h1 class="text-center pt-8 w-fit font-20px opacity-0">Click for View All</h1>
                         <a href="/worksheets/literacy" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8">View All</a>
@@ -103,7 +103,7 @@
                 <div class="grid">
                     <div  class="grid place-items-center">
                         <div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
-                            <img class="w-56 h-72 rotate-6 relative" src="/img/rectangle1.png" alt=""/>
+                            <img class="w-56 h-72 rotate-6 relative" src="/img/number-2.png" alt=""/>
                         </div>
                         <h1 class="text-center pt-8 w-fit font-20px opacity-0">Click for View All</h1>
                         <a href="/worksheets/mathematics" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8">View All</a>
diff --git a/src/pages/input-test.astro b/src/pages/input-test.astro
new file mode 100644
index 0000000..1ba71e2
--- /dev/null
+++ b/src/pages/input-test.astro
@@ -0,0 +1,5 @@
+<main>
+    <div>
+        <input type="text" id="first_name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="John" required>
+    </div>
+</main>
\ No newline at end of file
diff --git a/src/pages/modalt.astro b/src/pages/modalt.astro
index bbb2d89..b8b8946 100644
--- a/src/pages/modalt.astro
+++ b/src/pages/modalt.astro
@@ -11,7 +11,7 @@ const videoRespData = videoRespJson.data.reverse();
     <div class="h1-text  text-blue-700 font-semibold py-4">Videos</div>
     <!-- <h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{data[0].videos_text}</h1> -->
     <div v-if="videos" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
-        {videoRespData.map((data: { video_thumb: string | undefined; videos_title: string | undefined; celebration_ideas_body_text: string | undefined; title: string | undefined; }) =>
+        {videoRespData.map((data: { video_thumb: string | undefined; videos_title: string | undefined; youtube_id: string | undefined; title: string | undefined; }) =>
             <div class="p-4">
                 <div onclick="document.getElementById('id01').style.display='block'">
                     <div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
diff --git a/src/pages/modaltestinx.astro b/src/pages/modaltestinx.astro
new file mode 100644
index 0000000..5e7efde
--- /dev/null
+++ b/src/pages/modaltestinx.astro
@@ -0,0 +1,106 @@
+---
+const videoResp = await fetch('https://management.beanstalkedu.com/items/theme_videos?filter[theme_key][_in]=3');
+const videoRespJson = await videoResp.json();
+const videoRespData = videoRespJson.data.reverse();
+---
+
+<main>
+    <div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+        {videoRespData.map((data: { video_thumb: string | undefined; videos_title: string | undefined; youtube_id: string | undefined; title: string | undefined; }) =>
+            <div class="p-4">
+                    <div id="data.youtube_id" class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
+                        <div class="flex rotate-6 relative"><img src={'https://management.beanstalkedu.com/assets/'+data.video_thumb} alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
+                        <img class="absolute top-16 left-24 -rotate-6 w-16" src="/img/svg/play.svg" alt="" />
+                        </div>
+                    </div>
+                    <div class="mt-6 text-center text-xl text-color-2">{data.videos_title}</div>
+            </div>
+            <div id="myModal" class="modal">
+                <div class="modal-content">
+                    <span class="close">&times;</span>
+                    <div style="width: 100%;">
+                        <iframe width="380" height="320" 
+                            src={'https://www.youtube.com/embed/'+data.youtube_id}>
+                        </iframe>
+                    </div>
+                </div>
+            </div>
+                    
+        )}
+        
+    </div>
+<!-- Trigger/Open The Modal -->
+<!-- <button id="myBtn">Open Modal</button> -->
+
+<!-- The Modal -->
+
+</main>
+<script is:inline>
+    // Get the modal
+    var modal = document.getElementById("myModal");
+    
+    // Get the button that opens the modal
+    var btn = document.getElementById("data.youtube_id");
+    
+    // Get the <span> element that closes the modal
+    var span = document.getElementsByClassName("close")[0];
+    
+    // When the user clicks the button, open the modal 
+    btn.onclick = function() {
+      modal.style.display = "block";
+    }
+    
+    // When the user clicks on <span> (x), close the modal
+    span.onclick = function() {
+      modal.style.display = "none";
+    }
+    
+    // When the user clicks anywhere outside of the modal, close it
+    window.onclick = function(event) {
+      if (event.target == modal) {
+        modal.style.display = "none";
+      }
+    }
+    </script>
+    <style>
+        body {font-family: Arial, Helvetica, sans-serif;}
+        
+        /* The Modal (background) */
+        .modal {
+          display: none; /* Hidden by default */
+          position: fixed; /* Stay in place */
+          z-index: 1; /* Sit on top */
+          padding-top: 100px; /* Location of the box */
+          left: 0;
+          top: 0;
+          width: 100%; /* Full width */
+          height: 100%; /* Full height */
+          overflow: auto; /* Enable scroll if needed */
+          background-color: rgb(0,0,0); /* Fallback color */
+          background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+        }
+        
+        /* Modal Content */
+        .modal-content {
+          background-color: #fefefe;
+          margin: auto;
+          padding: 20px;
+          border: 1px solid #888;
+          width: 80%;
+        }
+        
+        /* The Close Button */
+        .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/pages/page-404.astro b/src/pages/page-404.astro
new file mode 100644
index 0000000..a4f247f
--- /dev/null
+++ b/src/pages/page-404.astro
@@ -0,0 +1,59 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Menu from "../components/Menu.astro";
+import Footer from "../components/Footer.vue";
+---
+<Layout title="">
+    <Menu />
+    <main>
+        <div class="body">
+            <section class="container-fluid">
+                <div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
+                    <div class="flex flex-col">
+                        <p class="hero-text font-bold text-blue-700">Page Not Found</p>
+                        <p class="h1-text font-bold">Sorry, the page you asked for couldn’t be found.</p>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+    <Footer client:visible/>
+</Layout>
+
+<style>
+    @media screen and (min-width: 1500px) {
+  .hero-text {
+    font-size: 96px;    
+  }
+}
+
+@media screen and (max-width: 1499px) {
+  .hero-text {
+    font-size: 60px;
+    
+  }
+}
+@media screen and (max-width: 1199px) {
+  .hero-text {
+    font-size: 40px;
+    
+  }
+}
+@media screen and (min-width: 801px) {
+  .h1-text {
+    font-size: 40px;
+    
+    
+  } 
+}
+
+@media screen and (max-width: 800px) {
+  .h1-text {
+    font-size: 25px;
+    
+  }
+}
+.bg3 {
+  background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/test-modal.astro b/src/pages/test-modal.astro
index 21b9e14..a40a620 100644
--- a/src/pages/test-modal.astro
+++ b/src/pages/test-modal.astro
@@ -1,8 +1,10 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import AudioBookModal from '../components/AudioBookModal.vue';
+import TestModal from '../components/TestModal.astro';
 ---
 <Layout title="">
+    <TestModal var1="oeeee"/>
     <AudioBookModal client:visible/>
 </Layout>
 
diff --git a/src/pages/themes/[id].astro b/src/pages/themes/[id].astro
index 07ff843..566981a 100644
--- a/src/pages/themes/[id].astro
+++ b/src/pages/themes/[id].astro
@@ -124,7 +124,7 @@ import Footer from "../../components/Footer.vue";
                     </a>
                 </div>
             </section>
-            <ThemesVideos client:visible/>
+            <ThemesVideos themeId={thisThemesID} client:visible/>
             <ThemesAudioBook client:visible/>
             <!-- <section class="container mx-auto pt-16 xl:px-24 px-4">
               <h1 class="h1-text text-blue-700 font-semibold">Celebretion stories</h1>