diff --git a/src/components/Educators.vue b/src/components/Educators.vue
index a2941ac..af53793 100644
--- a/src/components/Educators.vue
+++ b/src/components/Educators.vue
@@ -94,11 +94,11 @@
                     <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 class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/audio-books"><img class="drop-shadow-2xl" 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="drop-shadow-2xl" 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="drop-shadow-2xl" 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="drop-shadow-2xl" 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="drop-shadow-2xl" 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>
@@ -134,44 +134,50 @@
                 </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 ">
-                    <div class="grid"></div>
-                    <div class="grid py-10 px-4">
-                        <h1 class="hero-text text-blue-700" style="font-family:Quicksand">Skill Up with Us & <br>
+                <div class="grid grid-cols-1 xl:grid-cols-2 bg-yellow-100 place-items-center">
+                    <div class="grid">
+                        <img class="p-16" src="/img/skill-up.png" alt="">
+                    </div>
+                    <div class="grid py-10 px-4 h-fit">
+                        <h1 class="hero-text text-blue-700 leading-tight font-semibold" style="font-family:Quicksand">Skill Up with Us & <br>
                             <span class="text-color-1">to Be a superhero at your Preschool</span></h1>
-                        <h1 class="text-xl md:text-2xl text-color-2 pt-6">Get skilled with us @ Atheneum with a Global network of Professional is UK, USA,<br> <span>Middle East, Africa and Asia</span></h1>
-                        <div class="flex py-4"><button class="text-white bg-blue-700 p-2 text-2xl rounded-tl-lg rounded-br-lg" style="font-family:Quicksand">Know More</button></div>
+                        <h1 class="text-xl md:text-2xl text-color-2 pt-2">Get skilled with us @ Atheneum with a Global network of Professional is UK, USA,<br> <span>Middle East, Africa and Asia</span></h1>
+                        <div class="flex py-4"><a target="_blank" href="https://atheneumglobal.education/"><button class="text-white bg-blue-700 py-2 px-4 text-2xl rounded-tl-lg rounded-br-lg h-fit" style="font-family:Quicksand">Know More</button></a></div>
                     </div>
                 </div>
             </section>
             <section class="container mx-auto xl:px-24">
                 <div class="flex justify-center text-color-1 font-bold hero-text py-16 px-4">Download Report Card Format</div>
                 <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 place-items-center text-center gap-y-16 gap-x-8 px-4 " >
-                    <div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card1.png" alt=""><h1 class="absolute inset-4 text-blue-700"> Years 2-3</h1>
-                        <button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-2xl">Download</button>
+                    <div class="grid h-80 w-72 bg-yellow-100 relative">
+                        <img class="" src="/img/report-card1.png" alt="">
+                        <h1 class="absolute inset-4 text-blue-700 text-3xl font-bold bg-gray-50 h-fit opacity-70">Years 2-3</h1>
+                        <a href="/img/report-card1.png" download><button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg">Download</button></a>
                     </div>
-                    <div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card2.png" alt=""><h1 class="absolute inset-4 text-blue-700"> Years 3-4</h1>
-                        <button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-2xl">Download</button>
+                    <div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card2.png" alt="">
+                        <h1 class="absolute inset-4 text-blue-700 text-3xl font-bold bg-gray-50 h-fit opacity-70"> Years 3-4</h1>
+                        <a href="/img/report-card2.png" download><button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg">Download</button></a>
                     </div>
-                    <div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card3.png" alt=""><h1 class="absolute inset-4 text-blue-700"> Years 4-5</h1>
-                        <button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-2xl">Download</button>
+                    <div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card3.png" alt="">
+                        <h1 class="absolute inset-4 text-blue-700 text-3xl font-bold bg-gray-50 h-fit opacity-70"> Years 4-5</h1>
+                        <a href="/img/report-card3.png" download><button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg">Download</button></a>
                     </div>
-                    <div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card4.png" alt=""><h1 class="absolute inset-4 text-blue-700"> Years 5-6</h1>
-                        <button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-2xl">Download</button>
+                    <div class="grid h-80 w-72 bg-yellow-100 relative"><img class="" src="/img/report-card4.png" alt="">
+                        <h1 class="absolute inset-4 text-blue-700 text-3xl font-bold bg-gray-50 h-fit opacity-70"> Years 5-6</h1>
+                        <a href="/img/report-card4.png" download><button class="bg-blue-700 p-1 absolute left-20 top-44 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mt-32 h-9 text-lg">Download</button></a>
                     </div>
                 </div>
             </section>
             <section id="EYFSCurriculum" class="container mx-auto pt-16 xl:px-24">
                 <h1 class="text-color-1 hero-text font-bold text-center">EYFS Curriculum & Its Impact</h1>
                 <div class="grid grid-cols-1 lg:grid-cols-2 place-items-center px-6 py-10">
-                    <div class="grid">
+                    <div class="grid h-fit">
                         <div class="text-justify text-color-2">
                             <p class="py-8 font-20px">The Early Years Foundation Stage (EYFS) curriculum sets standards for the learning, development, and care children birth to 5-years-old. It`s the first stage of a child`s education. it ends when child enters Key Stage One (KS1).</p>
-                            <img src="/img/legends.png" alt="" class="p-8"> 
+                            <img src="/img/legends.png" alt="" class=""> 
                         </div>
                     </div>
                     <div class="grid ">
-                        
                         <div class="flex relative justify-center text-xs ">
                             <div class="grid">
                                 <div class="flex relative justify-center text-xs">
@@ -209,7 +215,7 @@
                         <h1 class="text-lg md:text-2xl lg:text-4xl" >New Interventions in Preschool Education</h1>
                         <h1 class="text-sm lg:text-2xl" >Check Out what new interventions are going to be implemented <br> in Preschool education system</h1>
                         <div class="md:py-2">
-                            <button class="text-blue-700 bg-white text-center w-fit p-1 px-2 lg:text-2xl rounded-tl-xl rounded-br-xl" >Discover Now</button>
+                            <a target="_blank" href="/whats-new"><button class="text-blue-700 bg-white text-center w-fit py-1 px-4 lg:text-lg rounded-tl-xl rounded-br-xl" >Discover Now</button></a>
                         </div>
                     </div>
                 </div>
diff --git a/src/components/Homepage.vue b/src/components/Homepage.vue
index 6ae2164..5d77048 100644
--- a/src/components/Homepage.vue
+++ b/src/components/Homepage.vue
@@ -1,5 +1,5 @@
     <template>
-        <div class="">
+        <div class="" style="font-family: 'Quicksand', sans-serif;">
             <div>
                 <!-- This Event is Round The Corner  -->
                 <section class="bg3 shadow-2xl container-fluid h-fit">
diff --git a/src/components/Menu.astro b/src/components/Menu.astro
index ed37730..830d2b4 100644
--- a/src/components/Menu.astro
+++ b/src/components/Menu.astro
@@ -20,7 +20,7 @@
                     <a href="/lesson-plan/dailyplan">Lesson Plan</a>
                 </div>
             </div> 
-            <a href="/occassion">Occassion</a>
+            <a href="/occasion">Occasion</a>
             <a href="/themes">Themes</a>
             <a href="/blog">Blog</a>
         </div>
@@ -54,9 +54,6 @@
     </div>
 </div>
 </main>
-
-
-
 <script is:inline>
 function openMobileMenu() {
 var element = document.getElementById("mobileMenu");
diff --git a/src/components/Premium.vue b/src/components/Premium.vue
index a18f227..87eb17f 100644
--- a/src/components/Premium.vue
+++ b/src/components/Premium.vue
@@ -8,7 +8,7 @@
             <p class="font-20px text-color-2">Check out our plans and what work's for you the best</p>
           </div>
           <div class="flex w-fit justify-center place-items-center">
-            <img class="w-fit h-fit  rounded-3xl py-4 cursor-none" src="/img/price1.png" alt="">
+            <img class="w-fit h-fit  rounded-3xl cursor-none" src="/img/price1.png" alt="">
           </div> 
         </div>
     </section>
@@ -78,7 +78,7 @@
                 <div class="flex flex-col lg:flex-row place-items-center justify-center">
                     <div class="flex flex-col justify-center md:px-28 lg:px-0">
                         <div class="bg-gray-100 text-center border-radius px-20 lg:px-20">
-                            <h1 class="text-3xl md:text-4xl text-center pt-32 p-3 text-blue-700">Talk to Us ></h1>
+                            <h1 class="text-3xl md:text-4xl text-center pt-32 p-3 text-blue-700 font-semibold">Talk to Us ></h1>
                                 <h1 class="text-xl lg:text-2xl  lg:w-96">If you want to know which plan works for you the best, write to us and we’ll get back to you with best advice</h1>
                             </div> 
                         <!-- <img class="h-auto" src="/img/get-in-touch.png" alt="" > -->
@@ -104,7 +104,7 @@
                                 <div class="form-group form-check mb-6"><input v-model="flag" type="checkbox" value="whatsapp"  class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer">
                                     <label  class="form-check-label inline-block text-gray-800" >Keep me updated on WhatsApp</label>
                                 </div>
-                                <button @click="saveContactForm" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Contact us</button>
+                                <button @click="saveContactForm" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Contact Us</button>
                             </div>
                             <div v-else>
                                 <h2 class="text-center py-40 text-4xl">Thank You!</h2>
@@ -256,13 +256,13 @@ padding:0;}
         width: 100%;
 	}
     .box1 {
-    width: 100%;
+    width: 90%;
     height: 550px;
     /* padding: 25px; */
     border: 1px solid #FFA25F;
 }
 .box2 {
-  width: 100%;
+  width: 90%;
   height: 550px;
   /* padding: 25px; */
   border: 1px solid #9B00FA;
diff --git a/src/pages/occasion/index.astro b/src/pages/occasion/index.astro
new file mode 100644
index 0000000..50e5c60
--- /dev/null
+++ b/src/pages/occasion/index.astro
@@ -0,0 +1,58 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Menu from "../../components/Menu.astro";
+
+const response = await fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion?filter[status][_eq]=published');
+const data = await response.json();
+const occassion = data.data;
+
+const thisOccasionID = data.data[0].id;
+
+const csResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/occassion_celebration_stories?filter[occassion_key][_in]=' + thisOccasionID);
+const csRespJson = await csResp.json();
+const csRespData = csRespJson.data.reverse().slice(0, 4);
+
+import Footer from "../../components/Footer.vue";
+---
+<Layout title="TeenyBeans Occassion">
+    <Menu/>
+    <!-- hero section -->
+    <section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
+        <div class="flex flex-col xl:flex-row container mx-auto px-3 xl:px-24">
+            <div class="flex flex-col w-full justify-center">
+                <div >
+                    <h1 class="text-blue-700 hero-text font-bold">Occasion Based Resources <br> <span class="text-color-1" >{occassion[0].occasson_title}</span></h1>
+                    <div class="flex h2-text text-color-1 font-semibold pt-8">{occassion[0].occassion_text }</div>
+                    <div class="flex text-justify font-20px text-color-2 pt-4">{occassion[0].occassion_details }</div> 
+                </div>
+            </div>
+            <div class="flex w-fit justify-center place-items-center">
+                <img class="w-fit h-fit" src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.data[0].occassion} alt={occassion[0].occassion_text }>
+            </div> 
+        </div>
+    </section>  <!-- hero section Ends -->
+
+    <!-- Celebration Stories   -->
+    <section class="container mx-auto pt-16 xl:px-24 px-4">
+        <h1 class="h1-text text-blue-700 font-semibold">Celebretion stories</h1>
+        <h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{occassion[0].celebretion_stories_text}</h1>
+        <div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pb-32 px-4">
+            {csRespData.map((data) => 
+                
+                <div class="flex bg-gray-200 rotate-6  gap-8 ">
+                    <div class="flex -rotate-6 relative"><img src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.img} alt="" class="rounded-tl-lg rounded-br-lg" />
+                        <div class="flex absolute bg-white p-2 rounded-md m-4 justify-center text-sm md:text-xl">{data.title}</div>
+                        <p class="absolute inset-x-0 bottom-6 text-blue-100 text-justify p-3 font-semibold rounded-br-lg line-clamp-3">{data.text}</p>
+                        <span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-white text-justify p-3 "><a href="" class="text-blue-700 hover:font-extrabold"> <br> Read Full Storry &#62;&#62; </a></span>
+                    </div>
+                </div>
+                )}
+            
+        </div>
+    </section>
+
+
+    <h2>{thisOccasionID}</h2>
+    <Footer/>
+    <main></main>
+</Layout>
\ No newline at end of file
diff --git a/src/pages/occassion.astro b/src/pages/occassion-.astro
similarity index 100%
rename from src/pages/occassion.astro
rename to src/pages/occassion-.astro