diff --git a/package.json b/package.json
index b84749c..6e1c5c1 100644
--- a/package.json
+++ b/package.json
@@ -18,5 +18,8 @@
     "swiper": "^9.0.3",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.45"
+  },
+  "devDependencies": {
+    "sass": "^1.58.1"
   }
 }
diff --git a/public/img/Daily.png b/public/img/Daily.png
deleted file mode 100644
index 93ccab7..0000000
Binary files a/public/img/Daily.png and /dev/null differ
diff --git a/public/img/Monthly.png b/public/img/Monthly.png
deleted file mode 100644
index 86b47b7..0000000
Binary files a/public/img/Monthly.png and /dev/null differ
diff --git a/public/img/Weekly.png b/public/img/Weekly.png
deleted file mode 100644
index 0297b52..0000000
Binary files a/public/img/Weekly.png and /dev/null differ
diff --git a/public/img/case_study.png b/public/img/case_study.png
new file mode 100644
index 0000000..1f33738
Binary files /dev/null and b/public/img/case_study.png differ
diff --git a/public/img/daily.png b/public/img/daily.png
new file mode 100644
index 0000000..3167cd8
Binary files /dev/null and b/public/img/daily.png differ
diff --git a/public/img/marketing.png b/public/img/marketing.png
new file mode 100644
index 0000000..480ae9b
Binary files /dev/null and b/public/img/marketing.png differ
diff --git a/public/img/monthly.png b/public/img/monthly.png
new file mode 100644
index 0000000..67a5e73
Binary files /dev/null and b/public/img/monthly.png differ
diff --git a/public/img/skill-up.png b/public/img/skill-up.png
new file mode 100644
index 0000000..5832b61
Binary files /dev/null and b/public/img/skill-up.png differ
diff --git a/public/img/weekly.png b/public/img/weekly.png
new file mode 100644
index 0000000..f27f81d
Binary files /dev/null and b/public/img/weekly.png differ
diff --git a/src/components/Administrators.vue b/src/components/Administrators.vue
index a04efb0..8611cbc 100644
--- a/src/components/Administrators.vue
+++ b/src/components/Administrators.vue
@@ -5,7 +5,7 @@
                 <div class="flex flex-col px-4 w-fit justify-center">
                     <h1 class="text-blue-700 hero-text font-bold">Discover Solutions<span class="text-color-1 "> For Your Preschool</span></h1>
                     <p class="font-20px pt-8 text-justify">Make your preschool succeed through its development into an ideal educational institution. Get the best as we serve the best preschool solutions here at Teeny Beans Preschool Curriculum. Your Preschool, Our Experienced Techniques! Our effective preschool solutions will give a boost to your enrollments while guiding and supporting your establishment through the best methods.</p>
-                    <div class="pt-8"><button class="shadow-2xl text-2xl px-6 py-2 bg-blue-700 rounded-tl-full rounded-br-full text-white">Discover Now</button></div>
+                    <div class="pt-8"><button class="shadow-2xl text-lg px-6 py-2 bg-blue-700 rounded-tl-full rounded-br-full text-white">Discover Now</button></div>
                 </div>
                 <!-- <button>Discover Now</button> -->
                 <div class="flex w-fit justify-center place-items-center">
@@ -52,7 +52,7 @@
         </section>
         <section class="container mx-auto px-2 xl:px-24">
             <h1 class=" text-color-1 h1-text text-center pt-10 px-4 font-semibold">Check Out Our Marketing Blog</h1>
-            <p class="text-justify text-xl lg:text-3xl pt-2 text-color-2 px-4">Find relevant helpful articles for marketing preschool solutions below and get to know more about the same. </p>
+            <p class="text-justify text-xl lg:text-2xl pt-2 text-color-2 px-4">Find relevant helpful articles for marketing preschool solutions below and get to know more about the same. </p>
             <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-10 place-items-center">
                 <div class="grid w-fit" v-for="marketing in marketing" :key="marketing"> 
                     <img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="marketing.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+marketing.img+'?width=420&amp;height=280'" alt="" >
@@ -64,15 +64,15 @@
             </div>
             <a href="/blog">
                 <div class="flex justify-center mt-8">
-                    <button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
+                    <button class="bg-blue-700 p-2 text-lg text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
                 </div>
             </a>
         </section>
          <section class="container mx-auto px-4 my-16 xl:px-24">
             <div class="grid bg-amber-100 grid-cols-1 lg:grid-cols-2">
-                <div class="grid place-items-center "><img class="w-96 h-88 rounded-br-3xl rounded-tl-3xl p-4 md:p-0" src="/img/person4.png" alt=""/></div>
+                <div class="grid place-items-center "><img class=" rounded-br-3xl rounded-tl-3xl p-4 md:p-0" src="/img/marketing.png" alt=""/></div>
                 <div class="grid px-4 w-fit">
-                    <div class="text-blue-700 hero-text pt-16 px-4">Need Help With<br> <span class="text-color-1">Marketing Solutions</span></div>
+                    <div class="text-blue-700 hero-text pt-16 px-4 font-semibold">Need Help With<br> <span class="text-color-1">Marketing Solutions</span></div>
                     <h3 class="font-20px py-4 text-color-2 px-4">Solve all your queries of marketing solutions now. Ask us and we’ll find you a way!</h3>
                     <form class="" v-if="MarketingSolutionsQry">
                         <div class="flex flex-wrap mb-6 md:mb-0">
@@ -84,7 +84,7 @@
                             </div>
                         </div>
                         <div class="form-control px-3">
-                            <textarea class="w-full textarea textarea-bordered border box text-lg h-40  focus:outline-none focus:bg-white focus:border-gray-100" v-model="msg" placeholder="Write the description here...."></textarea>
+                            <textarea class="p-4 w-full textarea textarea-bordered border box text-lg h-40  focus:outline-none focus:bg-white focus:border-gray-100" v-model="msg" placeholder="Write the description here...."></textarea>
                         </div>
                     </form>
                     <div v-else>
@@ -99,7 +99,7 @@
             <h1 class="text-color-1 h1-text font-semibold text-center">Admininstration Solutions For Preschool Owners and Adminstrators</h1>
             <p class="text-justify font-20px pt-2 text-color-2 text-center">Smoothen your daily preschool management process with the administration preschool solutions provided by us. Minimize the troubles and save your efforts, time and ideas for the most essential tasks, while we guide and support in fulfillment of your administrative tasks. 
                 With our professional team and brilliant ideas, your administration process becomes seamless and effective</p>
-            <div class="grid grid-cols-1 lg:grid-cols-2 text-blue-700 font-20px gap-10 mt-4 place-items-center" >
+            <div class="grid grid-cols-1 lg:grid-cols-2 text-blue-700 font-20px gap-10 mt-4 pl-10" >
                 <p class="text-left">Adminstration Technology</p>
                 <p class="text-left">Curriculum Implementation</p>
                 <p class="text-left">Employee Training</p>
@@ -113,23 +113,23 @@
         <section class="container mx-auto my-16 px-4 xl:px-24"> 
             <h1 class="text-color-1 h1-text font-semibold text-center">Technology Solution For Preschool</h1>
             <p class="text-justify font-20px pt-2 text-color-2">Escalate your playschool’s growth with the technological preschool solution that offers administration with digitization! Accuracy, effectiveness and newer ways of management comes true with our efficacious solution curated for your preschool’s needs. Find the fundamental technology solutions for your preschool below and raise your growth seamlessly. </p>
-            <div class="grid grid-cols-1 lg:grid-cols-3 text-blue-700 pt-10 font-20px place-items-center">
-                    <div class="grid grid-rows-3 md:text-left gap-10">
-                        <h1 class="">Digital Books</h1>
-                        <h1 class="">Blockchain Technology</h1>
-                        <h1 class="">Artificial Inteligence</h1>
-                    </div>
-                    <div class="grid grid-rows-2 md:text-center gap-10">
-                        <h1 class="">Multi Sensory Classrooms</h1>
-                        <h1 class="">VR and AR</h1>
-                        <h1 class="">Attendance & Progress Tracking</h1>
-                    </div>
-                    <div class="grid grid-rows-3 md:text-right gap-10">
-                        <h1 class="">Remote Learning</h1>
-                        <h1 class="">Intractive Gamification</h1>
-                        <h1 class="">Staff Management</h1>
-                    </div>
+            <div class="grid grid-cols-1 lg:grid-cols-3 text-blue-700 pt-10 font-20px justify-center">
+                <div class="grid grid-rows-3 text-start md:text-left gap-10">
+                    <h1 class="">Digital Books</h1>
+                    <h1 class="">Blockchain Technology</h1>
+                    <h1 class="">Artificial Inteligence</h1>
                 </div>
+                <div class="grid grid-rows-3 text-start md:text-center gap-10">
+                    <h1 class="">Multi Sensory Classrooms</h1>
+                    <h1 class="">VR and AR</h1>
+                    <h1 class="">Attendance & Progress Tracking</h1>
+                </div>
+                <div class="grid grid-rows-3 text-start md:text-right gap-10">
+                    <h1 class="">Remote Learning</h1>
+                    <h1 class="">Intractive Gamification</h1>
+                    <h1 class="">Staff Management</h1>
+                </div>
+            </div>
         </section>
         <section class="container mx-auto px-2 xl:px-24">
             <div class="flex text-color-1 h1-text justify-center font-semibold">Check Out Our Adminstration Blog</div>
@@ -138,33 +138,35 @@
                 <div class="grid w-fit" v-for="adminstration in adminstration" :key="adminstration"> 
                     <img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="adminstration.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+adminstration.img+'?width=420&amp;height=280'" alt="" >
                     <div class="flex bg-yellow-200 absolute mt-56 lg:mt-40 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ adminstration.date}}</div>
-                    <h1 class="text-color-1 text-3xl  pt-10 px-4">{{ adminstration.title}}</h1>
-                    <div class="font-20px text-justify text-color-2 px-4" v-html="adminstration.preview_text"></div>
+                    <h1 class="text-color-1 text-2xl  pt-4 px-4 line-clamp-2 font-semibold">{{ adminstration.meta}}</h1>
+                    <div class="font-20px text-justify text-color-2 px-4 line-clamp-4" v-html="adminstration.meta_description"></div>
                         <a  href="'/blog/' + adminstration.slug" class="text-blue-600 font-20px px-4"> Read More >> </a>
                 </div>
             </div>
             <a href="/blog">
                 <div class="flex justify-center mt-8">
-                    <button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
+                    <button class="bg-blue-700 p-2 text-lg text-white px-4 rounded-tl-lg rounded-br-lg">Read All Articles</button>
                 </div></a>
         </section>
-        <section  class="container mx-auto xl:px-24">
-                <div class="grid md:grid-cols-2 place-items-end bg-yellow-100 mt-16 p-6">
-                    <div class="grid"></div>
-                    <div class="grid hero-text text-blue-700 pt-16">Skill Up Your Staff & <span class="text-color-1"> Be a Superhero at your Preschool</span>
-                        <p class=" font-20px py-2 text-color-2 pr-6 ">Skill up with us @ Atheneum with a Global network of Professionals is UK, USA, Middle East, Africa and Asia</p>
+        <section  class="container mx-auto xl:px-24 px-4">
+                <div class="grid md:grid-cols-2 place-items-end bg-yellow-100 mt-16 p-6 gap-x-16">
+                    <div class="grid">
+                        <img class="md:p-14" src="/img/skill-up.png" alt="">
+                    </div>
+                    <div class="grid hero-text text-blue-700 pt-16 leading-tight font-semibold">Skill Up Your Staff & <span class="text-color-1"> Be a Superhero at your Preschool</span>
+                        <p class=" font-20px py-2 text-color-2 pr-6 font-normal">Skill up with us @ Atheneum with a Global network of Professionals is UK, USA, Middle East, Africa and Asia</p>
                         <div class="flex justify-start mt-2 pb-20">
-                            <button class="bg-blue-700 p-1 text-2xl text-white px-6 py-2 rounded-tl-lg rounded-br-lg mt-2 ">Know More</button>
+                            <button class="bg-blue-700 p-1 text-lg font-normal text-white px-6 py-2 rounded-tl-lg rounded-br-lg mt-2 ">Know More</button>
                         </div>
                     </div>
                 </div>
         </section>
         <section  class="container mx-auto px-4 xl:px-24">
             <div class="grid md:grid-cols-2 place-items-between pt-20">
-                <div class="grid justify-start h1-text text-color-1">Latest Trends In Preschool Education 
-                    <p class="text-justify font-20px pt-2 text-color-2">Find what’s happening in your preschool’s era and do not be left behind in this competition. Get to know all trending facts of the preschool industry with us and gain professional support to compete successfully and stand out. </p>
+                <div class="grid justify-start h1-text text-color-1 font-semibold">Latest Trends In Preschool Education 
+                    <p class="text-justify font-20px pt-2 text-color-2 font-normal">Find what’s happening in your preschool’s era and do not be left behind in this competition. Get to know all trending facts of the preschool industry with us and gain professional support to compete successfully and stand out. </p>
                 </div>
-                <div class="grid md:justify-evenly justify-start md:ml-72 px-6"><button class="shadow-2xl text-2xl bg-blue-700 p-1 text-white px-6 py-2 h-fit rounded-tl-lg rounded-br-lg mt-2">Read All </button></div>
+                <div class="grid md:justify-evenly justify-start md:ml-72 px-6"><a href="/whatsnew" class="shadow-2xl text-lg bg-blue-700 p-1 text-white px-6 py-2 h-fit rounded-tl-lg rounded-br-lg mt-2">Read All </a></div>
             </div>
             <div class="container mx-auto">
                 <!-- <carousel :items-to-show="2.5">
@@ -192,7 +194,7 @@
         <section class="container mx-auto xl:px-24">
             <div class="grid md:grid-cols-2 grid-cols-1 bg-yellow-100 place-items-center my-16">
                 <div class="grid place-items-center px-4">
-                    <div class="text-color-1 hero-text pt-6">Reach Out to Us</div>
+                    <div class="text-color-1 hero-text pt-6 font-semibold">Reach Out to Us</div>
                         <h3 class="text-justify font-20px text-color-2 my-4 px-4">We will be happy to assist you with any question regarding administering and managing your Preschool. Contact us for answers to all of your questions</h3>
                         <form class="grid place-items-center" v-if="rOutQry">
                             <div class="flex flex-wrap mb-6 justify-center">
@@ -211,7 +213,7 @@
                                     <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">
                                 </div>
                             </div>
-                            <div class="flex -mt-4"><button @click="saveReachoutQry" class="bg-blue-700 text-2xl p-1 text-white px-6 py-2 rounded-tl-lg rounded-br-lg mb-8">Contact Us</button></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> 
                         </form>
                         <div v-else> <h2 class="text-color-2">Get back to you soon!</h2> </div>
                     </div>
@@ -221,10 +223,10 @@
         </section>
         <section class="container mx-auto px-4 xl:px-24">
             <div class="grid md:grid-cols-2 place-items-between ">
-                <div class="grid justify-start h1-text text-color-1 ">Trending Themes for Preschools in 2023
-                    <p class="font-20px pt-2 text-color-2 text-justify">Know how to make a better atmosphere and aura in your classroom with the trending themes for your preschool to bring in excitement and entertainment together with learning. </p>
+                <div class="grid justify-start h1-text text-color-1 font-semibold">Trending Themes for Preschools in 2023
+                    <p class="font-20px pt-2 text-color-2 text-justify font-normal">Know how to make a better atmosphere and aura in your classroom with the trending themes for your preschool to bring in excitement and entertainment together with learning. </p>
                 </div>
-                <div class="grid md:justify-evenly justify-start md:ml-72"><button class="shadow-2xl bg-blue-700 p-1 text-xl text-white px-6 py-2 rounded-tl-lg rounded-br-lg mt-2 h-fit">Read All </button></div>
+                <div class="grid md:justify-evenly justify-start md:ml-72"><a href="/themes" class="shadow-2xl bg-blue-700 p-1 text-lg text-white px-6 py-2 rounded-tl-lg rounded-br-lg mt-2 h-fit">Explore Themes</a></div>
             </div>
                 <!-- <carousel :items-to-show="2.5">
                     <slide v-for="slide in 10" :key="slide">
@@ -253,7 +255,7 @@
             <div class="container mx-auto xl:px-24">
                 <div class="grid bg-gray-100 grid-cols-1 md:grid-cols-2 my-16 gap-y-8">
                     <div class="grid place-items-center">
-                        <div class="grid text-color-1 h1-text pt-6">Case Study</div>
+                        <div class="grid text-color-1 h1-text pt-6 font-semibold">Case Study</div>
                         <div class="w-full max-w-lg" v-if="csQry">
                             <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">
@@ -267,7 +269,7 @@
                                 </div>
                             </div>
                             <div class="flex justify-center -mt-4">
-                            <button class="bg-blue-700 p-1 text-white px-6 py-2 rounded-tl-lg rounded-br-lg mb-8 text-xl" @click="saveCsQry" >Download Now</button></div>
+                            <button class="bg-blue-700 p-1 text-white px-6 py-2 rounded-tl-lg rounded-br-lg mb-8 text-lg" @click="saveCsQry" >Download Now</button></div>
                         </div>
                         <div v-else>
                             Thank you!
@@ -275,11 +277,12 @@
                          
                     </div>
                     <div class="grid place-items-center">
-                        <div class="grid  bg-gray-300 ml-0 w-72 h-96 -rotate-12 rounded-tl-3xl rounded-br-3xl shadow-2xl"></div>
+                        <div class="grid ml-0 w-72 h-96 -rotate-12 rounded-tl-3xl rounded-br-3xl shadow-2xl">
+                            <img src="/img/case_study.png" alt="">
+                        </div>
                     </div>
                 </div>
             </div>
-            <div class="text-color-1 text-3xl text-center py-24">Check Out Our Resources For Your Preschool</div>
         </section>
         <section class="container mx-auto py-20 px-4 xl:px-24">
             <div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
@@ -462,6 +465,18 @@ export default {
 </script>
 
 <style>
+    .line-clamp-4 {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;  
+  overflow: hidden;
+}
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;  
+  overflow: hidden;
+}
 details {
     font-weight: lighter;
     border-bottom: 1px solid #d4d4d4;
diff --git a/src/components/Educators.vue b/src/components/Educators.vue
index 1c6d79e..a2941ac 100644
--- a/src/components/Educators.vue
+++ b/src/components/Educators.vue
@@ -7,7 +7,7 @@
                         <span class="text-blue-700 h2 font-semibold body">Acquiring Resources Smoothly!</span>
                         <p class="font-20px  text-justify pt-8">Teaching children with the right knowledge becomes easy with our PSA curriculum, where you get access to countless resources for teaching your kids at home, school or both. Plan continuous lessons that are curated professionally for the stimulating development needs. With the right lesson plan, you supply the accurate knowledge to the little ones.</p>
                         <div class="grid md:text-base place-items-center py-2 w-fit pt-8"> 
-                            <div class="rounded-tl-full rounded-br-full bg-blue-700 text-white text-2xl font-semibold pr-8 pl-8 p-3 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"> <a href="/educators#getintouch"><button>Reach Us</button></a></div>
+                            <div class="rounded-tl-full rounded-br-full bg-blue-700 text-white text-base font-semibold px-6 py-2 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"> <a href="/educators#getintouch"><button>Reach Us</button></a></div>
                         </div>
                     </div>
                     <div class="flex w-fit justify-center place-items-center">
@@ -45,18 +45,18 @@
             <section class="container mx-auto px-4 xl:px-24">
                 <div class="flex justify-center hero-text text-color-1 font-semibold mt-20 py-4 text-center">Make your Ideal Lesson Plan</div>
                 <p class="font-20px text-color-2 text-justify">Create a plan yourself through customization and choose the resources you need to educate children correctly. There are plenty of options to choose from and create! We allow you to personify plans according to time. </p>
-                <div class="grid grid-cols-1 md:grid-cols-3  place-items-center mt-16">
-                    <abbr class="" title="Create a plan for daily basis sum up with multiple subjects and activities essential for the growth needs as per the children’s understanding power."><a href="/dailyplan"><img src="/img/Daily.png" alt=""></a></abbr>
-                    <abbr class="" title="Design a plan for a weekly basis and come up with innovative ways to teach every week with new concepts."><a href="/weeklyplan"><img src="/img/Weekly.png" alt=""></a></abbr>
-                    <abbr class="" title="Customize a plan based on a month’s time and do not limit the knowledge of your children."><a href="/monthlyplan"><img src="/img/Monthly.png" alt=""></a></abbr>
+                <div class="grid grid-cols-1 md:grid-cols-3  place-items-center">
+                    <abbr class="" title="Create a plan for daily basis sum up with multiple subjects and activities essential for the growth needs as per the children’s understanding power."><a href="/lesson-plan/dailyplan"><img class="w-72 drop-shadow-xl" src="/img/daily.png" alt=""></a></abbr>
+                    <abbr class="" title="Design a plan for a weekly basis and come up with innovative ways to teach every week with new concepts."><a href="/lesson-plan/weeklyplan"><img class="w-72 drop-shadow-xl" src="/img/weekly.png" alt=""></a></abbr>
+                    <abbr class="" title="Customize a plan based on a month’s time and do not limit the knowledge of your children."><a href="/lesson-plan/monthlyplan"><img class="w-72 drop-shadow-xl" src="/img/monthly.png" alt=""></a></abbr>
                 </div>
             </section>
             <section class="container mx-auto xl:px-24 mt-32">
                 <div class="flex flex-col lg:flex-row place-items-center justify-center">
                     <div class="flex flex-col justify-center ">
                         <div class="bg-yellow-100 text-center border-radius px-16">
-                            <p class="hero-text text-center p-3 text-blue-700 pt-32" style="font-family:Quicksand">Get in Touch</p>
-                            <p class="text-2xl md:text-3xl text-color-1 lg:text-justify">Facing doubts while planning <br/> your preschool curriculum? Let us <br/>help you with the process and make<br/> things easier and effective!</p>
+                            <p class="hero-text text-center p-3 text-blue-700 pt-32 font-semibold" style="font-family:Quicksand">Get in Touch</p>
+                            <p class="text-2xl text-color-1 lg:text-justify font-semibold">Facing doubts while planning <br/> your preschool curriculum? Let us <br/>help you with the process and make<br/> things easier and effective!</p>
                         </div> 
                     </div>
                     <div class="flex flex-col" id="getintouch">
@@ -89,29 +89,28 @@
                     </div>
                 </div>
             </section>
-            <section class="container mx-auto xl:px-24 px-4">
-                <div class="flex text-color-1 hero-text justify-center pt-8 p-4">Resources For Your Classroom</div>
-                <p class="text-xl lg:text-3xl text-justify ">Access to all necessary resources and establish a strong foundation of toddlers while engaging them and teaching every accurate concept. </p>
-                <div class="grid grid-cols-1 md:grid-cols-5 mt-16 gap-8 place-items-center">
-                    <div class=""> <a href="/celebrationstories#submitCelebration">
-                    <img draggable="false" src="/img/event-ideas1.png" alt="">                  </a></div>
-                    <div class=""><a href="#"><img src="/img/games1.png" alt="">                </a></div>
-                    <div class=""><a href="/worksheets"><img src="/img/worksheets1.png" alt=""> </a></div>
-                    <div class=""><a href="#"><img src="/img/activities1.png" alt="">           </a></div>
-                    <div class=""><a href="#"><img src="/img/more1.png" alt="">                 </a></div>
-                </div>
-                <div class="flex justify-center md:mt-20 mt-8">
-                    <button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg">Discover All Resources</button>
-                </div>
-            </section>
+            <section class="container mx-auto px-4 xl:px-24">
+                    <div class="flex flex-rows-2 justify-center font-semibold hero-text mt-16 text-color-1 py-4 px-4">Resources To Choose From</div>
+                    <h2 class="text-justify text-2xl  ">Access to all necessary resources and establish a strong foundation of toddlers while engaging them and teaching every accurate concept.</h2>
+                    <div class="grid place-items-center w-auto ">
+                        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-5 gap-x-8 place-items-center">
+                            <div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/audio-books"><img class="" draggable="false" src="/img/audiobook.png" alt="Audio-Books">Audio Books</a></div>
+                            <div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/worksheets"><img class="" draggable="false" src="/img/workshet.png" alt="Worksheets">Worksheets</a></div>
+                            <div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/videos"><img class="" draggable="false" src="/img/videos.png" alt="Videos">Videos</a></div>
+                            <div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/occassion"><img class="" draggable="false" src="/img/occasions.png" alt="Occassion">Occassion</a></div>
+                            <div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/themes"><img class="" draggable="false" src="/img/theme.png" alt="Themes">Themes</a></div>
+                        </div>
+                    </div>
+                    <div class="flex justify-center mt-16"><a href="/lesson-plan/dailyplan" class="bg-blue-700 text-white px-4 py-2 text-base rounded-br-lg rounded-tl-lg shadow-xl">View Plans</a></div>
+                </section>
             <section class="container mx-auto pt-20 xl:px-24">
-                <div class="flex text-color-1 hero-text justify-center ">Curriculum Blogs</div>
-                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-10 place-items-center">
-                    <div class="grid w-fit" v-for="(item, index) in tbBlog"> 
+                <div class="flex text-color-1 hero-text justify-center font-semibold">Curriculum Blogs</div>
+                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-10 justify-center">
+                    <div class="grid w-fit h-fit" v-for="(item, index) in tbBlog"> 
                         <img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="item.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+item.img+'?width=420&amp;height=280'" alt="" >
                         <div class="flex bg-yellow-200 absolute mt-48 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ item.date}}</div>
-                        <h1 class="text-color-1 text-2xl font-semibold pt-10 px-4">{{ item.meta}}</h1>
-                        <div class="text-lg text-justify font-light w-96 text-color-2 px-4 line-clamp-4" v-html="item.meta_description"></div>
+                        <h1 class="text-color-1 text-2xl font-semibold pt-4 px-4 line-clamp-2 w-fit">{{ item.meta}}</h1>
+                        <div class="text-lg text-justify font-light w-fit text-color-2 px-4 line-clamp-4" v-html="item.meta_description"></div>
                             <!-- <a class=" text-blue-800" href="">Read More>></a> -->
                             <a :href="'/blog/' + item.slug" class="text-blue-600 px-4"> Read More >> </a>
                     </div>
@@ -128,11 +127,11 @@
                         <a class=" text-blue-800" href="">Read More>></a>
                     </div> -->
                 </div>
-            <a href="/blog">
-                <div class="flex justify-center mt-8">
-                    <button class="bg-blue-700 p-2 text-2xl text-white px-4 rounded-tl-lg rounded-br-lg" style="font-family:Quicksand">Read All Articles</button>
-                </div>
-            </a>
+                <a href="/blog">
+                    <div class="flex justify-center mt-8">
+                        <button class="bg-blue-700 p-2 text-base text-white px-4 rounded-tl-lg rounded-br-lg" style="font-family:Quicksand">Read All Articles</button>
+                    </div>
+                </a>
             </section>
             <section class="container mx-auto mt-16 xl:px-24">
                 <div class="grid grid-cols-1  xl:grid-cols-2 bg-yellow-100 ">
@@ -234,6 +233,18 @@
     </div>
 </template>
 <style>
+    .line-clamp-4 {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;  
+  overflow: hidden;
+}
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;  
+  overflow: hidden;
+}
 details {
     font-weight: lighter;
     border-bottom: 1px solid #d4d4d4;
diff --git a/src/components/Modal.astro b/src/components/Modal.astro
new file mode 100644
index 0000000..a2eb1f5
--- /dev/null
+++ b/src/components/Modal.astro
@@ -0,0 +1,28 @@
+---
+const {id, open} = Astro.props;
+---
+<style lang="scss">
+dialog {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  &::backdrop {
+    position: fixed;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    background: rgba(255, 0, 0, 0.1);
+  }
+}
+</style>
+
+<button onclick={`window.${id}.showModal()`}>{open}</button>
+
+<dialog id='{id}'>
+  <slot name="main" />
+  <form method="dialog">
+    <slot name="close" />
+  </form>
+</dialog>
\ No newline at end of file
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
deleted file mode 100644
index ea141db..0000000
--- a/src/components/Modal.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-   <h2>Animated Modal with Header and Footer</h2>
-
-<!-- Trigger/Open The Modal -->
-<button id="myBtn">Open Modal</button>
-
-<!-- The Modal -->
-<div id="myModal" class="modal">
-
-  <!-- Modal content -->
-  <div class="modal-content">
-    <div class="modal-header">
-      <span class="close">&times;</span>
-      <h2>Modal Header</h2>
-    </div>
-    <div class="modal-body">
-      <p>Some text in the Modal Body</p>
-      <p>Some other text...</p>
-    </div>
-    <div class="modal-footer">
-      <h3>Modal Footer</h3>
-    </div>
-  </div>
-
-</div>
-</template>
-<script>
-// Get the modal
-var modal = document.getElementById("myModal");
-
-// Get the button that opens the modal
-var btn = document.getElementById("myBtn");
-
-// 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 {
-  position: relative;
-  background-color: #fefefe;
-  margin: auto;
-  padding: 0;
-  border: 1px solid #888;
-  width: 80%;
-  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-  -webkit-animation-name: animatetop;
-  -webkit-animation-duration: 0.4s;
-  animation-name: animatetop;
-  animation-duration: 0.4s
-}
-
-/* Add Animation */
-@-webkit-keyframes animatetop {
-  from {top:-300px; opacity:0} 
-  to {top:0; opacity:1}
-}
-
-@keyframes animatetop {
-  from {top:-300px; opacity:0}
-  to {top:0; opacity:1}
-}
-
-/* The Close Button */
-.close {
-  color: white;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.modal-header {
-  padding: 2px 16px;
-  background-color: #5cb85c;
-  color: white;
-}
-
-.modal-body {padding: 2px 16px;}
-
-.modal-footer {
-  padding: 2px 16px;
-  background-color: #5cb85c;
-  color: white;
-}
-</style>
-
diff --git a/src/components/Worksheets-literacy.vue b/src/components/Worksheets-literacy.vue
index ca3b91b..9c40039 100644
--- a/src/components/Worksheets-literacy.vue
+++ b/src/components/Worksheets-literacy.vue
@@ -5,13 +5,13 @@
             <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">Worksheet 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">
                 <div class="flex">
-                    <h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
-                    <select class="select max-w-xs bg3">
-                        <option>Select your Age</option>
-                        <option>2-3 Year</option>
-                        <option>3-4 Year</option>
-                        <option>4-5 Year</option>
-                        <option>5-6 Year</option> 
+                    <h1 class="  font-semibold py-4">Age:&nbsp;</h1>
+                    <select class="select max-w-xs bg3" @change="switchSelect($event)">
+                        <option value="2">Select Age</option>
+                        <option value="2">2-3 Year</option>
+                        <option value="3">3-4 Year</option>
+                        <option value="4">4-5 Year</option>
+                        <option value="5">5-6 Year</option> 
                     </select>
                 </div> 
                 <!-- <div class="flex ">
@@ -27,7 +27,7 @@
             </div>
         </section>
         <section class="container mx-auto pt-10 px-4 xl:px-24">
-            <span class="h1-text text-color-1">All Worksheet</span>
+            <span class="h1-text text-color-1 font-semibold">All Worksheet</span>
             <p class=" text-lg text-color-2 text-base md:text-2xl text-justify">Practice every component of English literacy including letters, vowels, consonants and much more with the Literacy worksheet for preschoolers that keep a child’s ability to grasp mastery over literacy as the center of attention. Each worksheet contains suitable practice to promote learning and understanding. </p>
             <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center pt-10 my-10">
                 <div v-for="worksheet in wsLiteracy" :key="wsLiteracy.id" class="grid">
@@ -36,7 +36,7 @@
                             <img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
                         </div>
                         <h1 class="text-center pt-8 w-fit">{{worksheet.title}}</h1>
-                        <a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.file+'?download'" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</a>
+                        <!-- <a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.file+'?download'" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</a> -->
                     </div>
                 </div>
                 
@@ -44,11 +44,11 @@
         </section>
         <section class="container mx-auto pt-10 px-4 xl:px-24 mb-16">
             <a href="/premium">
-                <div class="flex prime-bg p-10 relative">
+                <div class="flex prime-bg p-16 relative">
                     <h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
                     <div class="flex justify-center absolute inset-0 place-items-center">
                         <button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
-                    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 mb-32 gap-10 place-items-center opacity-20">
+                    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 mb-32 gap-10 place-items-center opacity-20 w-full">
                         <div v-for="worksheet in wsfLiteracy" :key="wsfLiteracy.id" 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">
@@ -107,7 +107,7 @@
 </style>
 <script>
 export default {
-    setup(){
+    setup(){ 
         // const route = useRoute();
 
     },
@@ -124,19 +124,30 @@ export default {
 
         } 
     },
-    mounted: function () {
-        fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=literacy')
+    methods: {
+        switchSelect(event) {
+            // alert(event.target.value)
+            this.getWorksheets(event.target.value)
+        // this.selected = event.target.value;
+        },
+        getWorksheets(age=2){
+            fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=literacy')
             .then(resp => resp.json())
             .then(worksheets => {
                 this.wsLiteracy=worksheets.data.reverse().slice(0, 4)
                 // console.log(this.wsLiteracy)
             })
-            fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=literacy')
+            fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=literacy')
             .then(resp => resp.json())
             .then(worksheets => {
-                this.wsfLiteracy=worksheets.data.reverse().slice(5, 12)
+                this.wsfLiteracy=worksheets.data.reverse().slice(4, 16)
                 // console.log(this.wsfLiteracy)
-            })
+            }) 
+        }
+    },
+    mounted: function () {
+        this.getWorksheets()
+        
        
         }
     }
diff --git a/src/components/Worksheets-mathematics.vue b/src/components/Worksheets-mathematics.vue
index d9cdfe7..60aaab7 100644
--- a/src/components/Worksheets-mathematics.vue
+++ b/src/components/Worksheets-mathematics.vue
@@ -5,13 +5,13 @@
             <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">Worksheet 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">
                 <div class="flex">
-                    <h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
-                    <select class="select max-w-xs bg3">
-                        <option>Select your Age</option>
-                        <option>2-3 Year</option>
-                        <option>3-4 Year</option>
-                        <option>4-5 Year</option>
-                        <option>5-6 Year</option> 
+                    <h1 class="  font-semibold py-4">Age:&nbsp;</h1>
+                    <select class="select max-w-xs bg3" @change="switchSelect($event)">
+                        <option value="2">Select Age</option>
+                        <option value="2">2-3 Year</option>
+                        <option value="3">3-4 Year</option>
+                        <option value="4">4-5 Year</option>
+                        <option value="5">5-6 Year</option> 
                     </select>
                 </div> 
                 <!-- <div class="flex ">
@@ -27,7 +27,7 @@
             </div>
         </section>
         <section class="container mx-auto pt-10 px-4 xl:px-24">
-            <span class="h1-text text-color-1">All Worksheet</span>
+            <span class="h1-text text-color-1 font-semibold">All Worksheet</span>
             <p class="font-20px text-color-2 text-justify">Gaining smooth apprehension over mathematics becomes easier with the accurate Mathematics worksheet for playgroup. Equip children with pre-maths skills at an early stage of their life and transcend them with the correct knowledge of numbers, number names, addition, etc. through Teeny Beans’ worksheet for preschoolers. </p>
             <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center pt-10 my-10">
                 <div v-for="worksheet in wsmath" :key="wsmath.id" class="grid">
@@ -44,7 +44,7 @@
         </section>
         <section class="container mx-auto pt-10 px-4 xl:px-24 mb-16">
             <a href="/premium">
-                <div class="flex prime-bg p-10 relative">
+                <div class="flex prime-bg p-16 relative">
                     <h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
                     <div class="flex justify-center absolute inset-0 place-items-center">
                         <button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
@@ -128,19 +128,30 @@ export default {
 
         }
     },
-    mounted: function () {
-        fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=mathematics')
+    methods: {
+        switchSelect(event) {
+            // alert(event.target.value)
+            this.getWorksheets(event.target.value)
+        // this.selected = event.target.value;
+        },
+        getWorksheets(age=2){
+            fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=mathematics')
             .then(resp => resp.json())
             .then(worksheets => {
                 this.wsmath=worksheets.data.reverse().slice(0, 4)
-                // console.log(this.wsmath)
+                // console.log(this.wsLiteracy)
             })
-            fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=mathematics')
+            fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=mathematics')
             .then(resp => resp.json())
             .then(worksheets => {
-                this.wsfmath=worksheets.data.reverse().slice(5, 12)
-                // console.log(this.wsfmath)
-            })
+                this.wsfmath=worksheets.data.reverse().slice(4, 16)
+                // console.log(this.wsfLiteracy)
+            }) 
+        }
+    },
+    mounted: function () {
+        this.getWorksheets()
+        
        
         }
     }
diff --git a/src/components/Worksheets-world.vue b/src/components/Worksheets-world.vue
index 275369f..1e63689 100644
--- a/src/components/Worksheets-world.vue
+++ b/src/components/Worksheets-world.vue
@@ -5,15 +5,15 @@
             <div class="bg3 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Understanding the World</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">
                 <div class="flex">
-                    <h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
-                    <select class="select max-w-xs bg3">
-                        <option>Select your Age</option>
-                        <option>2-3 Year</option>
-                        <option>3-4 Year</option>
-                        <option>4-5 Year</option>
-                        <option>5-6 Year</option> 
+                    <h1 class="  font-semibold py-4">Age:&nbsp;</h1>
+                    <select class="select max-w-xs bg3" @change="switchSelect($event)">
+                        <option value="2">Select Age</option>
+                        <option value="2">2-3 Year</option>
+                        <option value="3">3-4 Year</option>
+                        <option value="4">4-5 Year</option>
+                        <option value="5">5-6 Year</option> 
                     </select>
-                </div> 
+                </div>  
                 <!-- <div class="flex ">
                     <h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
                     <select class="select max-w-xs">
@@ -27,7 +27,7 @@
             </div>
         </section>
         <section class="container mx-auto pt-10 px-4 xl:px-24">
-            <span class="h1-text text-color-1">All Worksheet</span>
+            <span class="h1-text text-color-1 font-semibold">All Worksheet</span>
             <p class="font-20px text-color-2 pt-6 text-justify">In the era of increasing competition, it becomes more essential for every child to be equipped with general understanding of his/her surroundings, which is the why, our worksheet for preschoolers aim at every topic including this to enhance IQ of every child and providing an absolute overview and comprehension of topics like family, senses, body, myself and others. </p>
             <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center my-10 pt-10">
                 <div v-for="worksheet in wsWorld" :key="wsWorld.id" class="grid">
@@ -44,7 +44,7 @@
         </section>
         <section class="container mx-auto pt-10 px-4 xl:px-24 mb-16">
             <a href="/premium">
-                <div class="flex prime-bg p-10 relative">
+                <div class="flex prime-bg p-16 relative">
                     <h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
                     <div class="flex justify-center absolute inset-0 place-items-center">
                         <button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
@@ -126,19 +126,30 @@ export default {
 
         }
     },
-    mounted: function () {
-        fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=world')
+    methods: {
+        switchSelect(event) {
+            // alert(event.target.value)
+            this.getWorksheets(event.target.value)
+        // this.selected = event.target.value;
+        },
+        getWorksheets(age=2){
+            fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=world')
             .then(resp => resp.json())
             .then(worksheets => {
                 this.wsWorld=worksheets.data.reverse().slice(0, 4)
-                // console.log(this.wsWorld)
+                // console.log(this.wsLiteracy)
             })
-            fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=world')
+            fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=world')
             .then(resp => resp.json())
             .then(worksheets => {
-                this.wsfWorld=worksheets.data.reverse().slice(5, 12)
-                // console.log(this.wsfWorld)
-            })
+                this.wsfWorld=worksheets.data.reverse().slice(4, 16)
+                // console.log(this.wsfLiteracy)
+            }) 
+        }
+    },
+    mounted: function () {
+        this.getWorksheets()
+        
        
         }
     }
diff --git a/src/pages/modal.astro b/src/pages/modal.astro
index 87e42c0..7b9b0a4 100644
--- a/src/pages/modal.astro
+++ b/src/pages/modal.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Modal from "../components/Modal.vue";
+import Modal from "../components/Modal.astro";
 ---
 <Layout title="">
   <Modal client:visible/>
diff --git a/src/pages/test-modal.astro b/src/pages/test-modal.astro
new file mode 100644
index 0000000..c61e13a
--- /dev/null
+++ b/src/pages/test-modal.astro
@@ -0,0 +1,12 @@
+---
+// Component Imports
+import Modal from '../components/Modal.astro';
+---
+
+<Modal id="dialog" open="Open modal">
+    <main slot="main">
+        <p>Some extra content you would like here</p>
+        <hr />
+    </main>
+    <button slot="close">Close modal</button>
+</Modal>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 30227d1..d6582b3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1092,7 +1092,7 @@ character-reference-invalid@^2.0.0:
   resolved "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz"
   integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
 
-chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -1910,6 +1910,11 @@ ieee754@^1.2.1:
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
+immutable@^4.0.0:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.2.4.tgz#83260d50889526b4b531a5e293709a77f7c55a2a"
+  integrity sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==
+
 import-meta-resolve@^2.1.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-2.2.0.tgz"
@@ -3243,6 +3248,15 @@ sass-formatter@^0.7.5:
   dependencies:
     suf-log "^2.5.3"
 
+sass@^1.58.1:
+  version "1.58.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.58.1.tgz#17ab0390076a50578ed0733f1cc45429e03405f6"
+  integrity sha512-bnINi6nPXbP1XNRaranMFEBZWUfdW/AF16Ql5+ypRxfTvCRTTKrLsMIakyDcayUt2t/RZotmL4kgJwNH5xO+bg==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 section-matter@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz"
@@ -3327,7 +3341,7 @@ slash@^4.0.0:
   resolved "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==