diff --git a/index.html b/index.html
index 8388c4b..7424a4f 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
+    <title>湖南大学望麓社区莫相思姐姐的日记贴</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index abb2380..f37bff7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,4 +22,8 @@ body {
   margin: 0;
   padding: 0;
 }
+
+#app {
+  padding: 1em;
+}
 </style>
diff --git a/src/components/PostList.vue b/src/components/PostList.vue
index 892bc18..6cce8aa 100644
--- a/src/components/PostList.vue
+++ b/src/components/PostList.vue
@@ -1,5 +1,13 @@
 <template>
   <div class="post-list">
+    <div key="top" class="post-item">
+      <div class="ribbon">
+        <a href="#">置顶</a>
+      </div>
+      <h3>Read Me</h3>
+      <small>{{ currentTime }}</small>
+      <p>此项目用来展示<a href="https://wlzb.net/community/forum.php?mod=viewthread&tid=174403&extra=&page=1">望麓自卑BBS</a>莫相思的日记贴。<br> 如本项目侵犯到您的利益，请联系本人删除，谢谢(#^.^#)。<br>dugulingping#outlook.com</p>
+    </div>
     <div v-for="post in posts" :key="post.id" class="post-item">
       <h3>{{ post.author }}</h3>
       <small>{{ new Date(post.create_time).toLocaleString() }}</small>
@@ -25,6 +33,7 @@ export default {
       isLoading.value = true
       try {
         const response = await axios.get(`https://moxiangsi.srv.ink/api/posts?page=${page.value}&limit=10`)
+        // const response = await axios.get(`http://localhost:8080/api/posts?page=${page.value}&limit=10`)
         posts.value.push(...response.data)
         page.value++
       } catch (error) {
@@ -63,10 +72,12 @@ export default {
 
     return {
       posts,
-      observer
+      observer,
+      currentTime: new Date().toLocaleString(),
     }
   }
 }
+// export default {
 </script>
 
 <style scoped>
@@ -110,6 +121,33 @@ export default {
 
   .post-item {
     padding: 10px;
+    color: #1a1a1a;
   }
 }
+/* HTML: <div class="ribbon">Your text content</div> */
+.ribbon {
+  font-size: 28px;
+  font-weight: bold;
+  color: #fff;
+}
+.ribbon {
+  --f: .5em; /* control the folded part */
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  line-height: 1.8;
+  padding-inline: 1lh;
+  padding-bottom: var(--f);
+  border-image: conic-gradient(#0008 0 0) 51%/var(--f);
+  clip-path: polygon(
+      100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
+  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
+  transform-origin: 0% 100%;
+  background-color: #BD1550; /* the main color  */
+}
+.ribbon a{
+  color: #fff;
+  text-decoration: none;
+}
 </style>
diff --git a/src/style.css b/src/style.css
index bb131d6..19a992d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -4,7 +4,7 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
+  color: #1a1a1a;
   background-color: #242424;
 
   font-synthesis: none;
@@ -61,7 +61,6 @@ button:focus-visible {
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
   text-align: center;
 }
 
