diff --git a/src/components/Notice.vue b/src/components/Notice.vue
new file mode 100644
index 0000000..4ded2fd
--- /dev/null
+++ b/src/components/Notice.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="container bg-white mx-auto mt-3  p-0 text-blue-700 leading-loose">
+      <div v-if="isLoading">
+          <h2>Loading ...</h2>
+      </div>
+      <div v-else>
+          <div  v-for="(item, index) in page" >
+              <a :href="'/notice/'+item.slug"> <h3> {{item.title}}</h3> </a>
+         
+              
+          </div>
+          <!-- <div v-html="page[0].content" class="container mx-auto">
+  
+          </div> -->
+      </div>
+  </div>
+  </template>
+  
+  <script>
+  export default {
+      data() {
+          return {
+              page: null,
+              isLoading: true
+          }
+      },
+      mounted: function () {
+          fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
+          // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
+              .then(response => response.json())
+              .then(data => {
+            this.page = data.data
+          //   console.log(data)
+            this.isLoading = false
+          })
+      }
+  }
+  </script>
\ No newline at end of file
diff --git a/src/pages/notice.astro b/src/pages/notice.astro
deleted file mode 100644
index fecf50e..0000000
--- a/src/pages/notice.astro
+++ /dev/null
@@ -1,5 +0,0 @@
----
-import Notice from '../components/Notice.vue';
----
-
-<Notice  client:idle />
\ No newline at end of file