diff --git a/src/components/ErorPage.vue b/src/components/ErorPage.vue
new file mode 100644
index 0000000..0036747
--- /dev/null
+++ b/src/components/ErorPage.vue
@@ -0,0 +1,139 @@
+<template>
+    <div>
+        <div class="container-fluid z-0 " style="background: linear-gradient(360deg, rgba(18, 75, 189, 0.08) 0%, rgba(18, 75, 189, 0) 100%);">
+          <div class="astronaut flex place-items-center justify-center pt-8">
+              <img src="https://images.vexels.com/media/users/3/152639/isolated/preview/506b575739e90613428cdb399175e2c8-space-astronaut-cartoon-by-vexels.png" alt="" class="src">
+          </div>
+            <div class="flex justify-center place-items-center">
+                  <div class="text-color-1 text-4xl pb-28 font-bold star"> <p class="text-center">ERROR: 404 - Page Not Found</p> </div>
+            </div>
+        </div>
+        <section class="container mx-auto">
+            <h1 class="text-4xl text-color-1 font-semibold text-center p-6">Curriculum Blog</h1>
+        <div class="p-5">
+            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
+                
+                <div v-for="(item, index) in tbBlog"  class="shadow-md rounded p-2 m-2">
+                    <figure class=" p-4 ">
+                    <img class="w-full" 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-12 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ item.date}}</div>
+                    <div class="pt-6 space-y-4">
+                        <blockquote>
+                        <p class="text-3xl font-medium text-color-1 line-clamp-1 line-clamp-2">{{ item.meta }}</p>
+                        </blockquote>
+                        <figcaption class="font-medium">
+                        <!-- <div class="text-color-2 text-justify line-clamp-3">{{ item.preview_text }}</div> -->
+                        <div class="text-color-2 line-clamp-3 text-xl line-clamp-4 text-justify" v-html="item.meta_description"></div>
+                        <div class="text-slate-700 p-2 shadow-md rounded text-center">
+                            <a :href="'/blog/' + item.slug" class="text-blue-600 "> Read More >> </a>
+                        </div>
+                        </figcaption>
+                    </div>
+                    </figure>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    </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;
+}
+
+.astronaut img{
+  width:200px;
+  /* position:absolute; */
+  top:55%;
+  animation:astronautFly 4s infinite linear;
+}
+@keyframes astronautFly{
+  0%{
+    left:-100px;
+  }
+  25%{
+    top:20%;
+    transform:rotate(60deg);
+  }
+  50%{
+    transform:rotate(45deg);
+    top:55%;
+  }
+  75%{
+    top:60%;
+    transform:rotate(-30deg);
+  }
+  100%{
+    left:110%;
+    transform:rotate(30deg);
+  }
+}
+@keyframes starTwinkle{
+  0%{
+     background:rgba(255,255,255,0.4);
+  }
+  25%{
+    background:rgba(255,255,255,0.8);
+  }
+  50%{
+   background:rgba(255,255,255,1);
+  }
+  75%{
+    background:rgba(255,255,255,0.8);
+  }
+  100%{
+    background:rgba(255,255,255,0.4);
+  }
+}
+        .text-color-1 {
+            color: #7C4C23;
+        }
+        .text-color-2 {
+            color: #333333;
+        }
+    </style>
+    
+    <script>
+    export default {
+        setup(){
+        // const route = useRoute();
+    },
+      data() {
+        return {
+          isLoading: true,
+          tbBlog: {},
+          tbBlog_curriculum: {},
+        }
+      },
+      mounted: function () {
+        this.getItemByCategory()
+        // console.log(this.smProducts)
+        // console.log(this.$route.query.cat)
+        // console.log(this.fruits)
+      },
+      methods: {
+        getItemByCategory() {
+          fetch('https://management.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[category][_eq]=curriculum&limit=3&sort=sort,-date_created&filter[property][_eq]=teenybeans_curriculum')
+            .then(response => response.json())
+            .then(data => {
+              this.tbBlog = data.data
+              // console.log(data)
+              this.tbBlog_curriculum = data.data.filter(item => { if (item.category == "curriculum") return item });
+              
+              this.isLoading = false
+            })
+          
+        }
+      }
+    }
+    </script>
\ No newline at end of file
diff --git a/src/pages/404.astro b/src/pages/404.astro
new file mode 100644
index 0000000..98013d8
--- /dev/null
+++ b/src/pages/404.astro
@@ -0,0 +1,11 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Menu from "../components/Menu.astro";
+import ErorPage from "../components/ErorPage.vue";
+import Footer from "../components/Footer.vue";
+---
+<Layout title="">
+    <Menu />
+    <ErorPage client:visible/>
+    <Footer client:visible/>
+</Layout>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 141cd83..41cf577 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -371,7 +371,7 @@ import Footer from "../components/Footer.vue";
         /* # The Rotating Marker # */
         details summary::-webkit-details-marker { display: none; }
           summary::before {
-            font-family: "Hiragino Mincho ProN", "Open Sans", sans-serif;
+            /* font-family: "Hiragino Mincho ProN", "Open Sans", sans-serif; */
             content: "▶";
             position: absolute;
             /* top: 1rem; */