diff --git a/src/api/tip.js b/src/api/tip.js
new file mode 100644
index 0000000000000000000000000000000000000000..18ead22d58dd97381455da0a2e4790f34011d863
--- /dev/null
+++ b/src/api/tip.js
@@ -0,0 +1,8 @@
+import request from '@/util/request'
+
+export function getTip() {
+    return request({
+        url: '/tip/random',
+        method: 'get'
+    })
+}
\ No newline at end of file
diff --git a/src/assets/app.css b/src/assets/app.css
new file mode 100644
index 0000000000000000000000000000000000000000..ff7e0ec45d675c713aeaa4def506b440b42dd037
--- /dev/null
+++ b/src/assets/app.css
@@ -0,0 +1,21 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body,
+html {
+    background-color: #f6f6f6;
+    color: black;
+    width: 100%;
+    font-size: 14px;
+    letter-spacing: 0.03em;
+    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
+    Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji,
+    Segoe UI Symbol, Android Emoji, EmojiSymbols;
+}
+
+.el-card {
+    margin-bottom: 16px;
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 3ac0fe9b26d04552196b0b496b876cff9006fd59..ad3864bb5597eb6b43cec1d7e061d32880f319e0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,8 @@ import 'buefy/dist/buefy.css'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 
+import '@/assets/app.css'
+
 import router from './router'
 // import store from './store'
 
@@ -16,7 +18,7 @@ Vue.use(ElementUI)
 Vue.config.productionTip = false
 
 new Vue({
-    router,
-    // store,
-    render: h => h(App),
-}).$mount('#app')
\ No newline at end of file
+  router,
+  // store,
+  render: h => h(App)
+}).$mount('#app')
diff --git a/src/view/Home.vue b/src/view/Home.vue
index c0f7fa2ced5b61b29f47f85fe96ecfb5d386d563..9443b3b464d80e2b792fac0f210ccbccce6a9e52 100644
--- a/src/view/Home.vue
+++ b/src/view/Home.vue
@@ -1,35 +1,44 @@
 <template>
   <div>
-      <div class="box">
-          {{billboard.content}}
+    <div class="box">🔔 {{ billboard.content }}</div>
+    <div class="columns">
+      <div class="column is-three-quarters">
+        <PostList />
       </div>
+      <div class="column">
+        <CardBar />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import {getBillboard} from '@/api/billboard'
+import { getBillboard } from "@/api/billboard";
+import PostList from "@/view/post/Index";
+import CardBar from "@/view/card/CardBar";
 
 export default {
-  name: 'Home',
+  name: "Home",
+  components: { PostList, CardBar },
   data() {
-      return {
-          billboard: {
-            content: ''
-          }
-      }
+    return {
+      billboard: {
+        content: "",
+      },
+    };
   },
   created() {
-    this.fetchBillboard()
+    this.fetchBillboard();
   },
   methods: {
     async fetchBillboard() {
       getBillboard().then((value) => {
-        const {data} = value
-        this.billboard = data
-      })
-    }
-  }
-}
+        const { data } = value;
+        this.billboard = data;
+      });
+    },
+  },
+};
 </script>
 
 <style>
diff --git a/src/view/card/CardBar.vue b/src/view/card/CardBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b930a4501256556e2ae07ffb1d082537bf5bfed7
--- /dev/null
+++ b/src/view/card/CardBar.vue
@@ -0,0 +1,12 @@
+<template>
+  <Tip />
+</template>
+
+<script>
+import Tip from "@/view/card/Tip";
+
+export default {
+  name: "CardBar",
+  components: { Tip }
+};
+</script>
\ No newline at end of file
diff --git a/src/view/card/Tip.vue b/src/view/card/Tip.vue
new file mode 100644
index 0000000000000000000000000000000000000000..33b8492c450c8ae0d5ec20ee704cdc62a52140a3
--- /dev/null
+++ b/src/view/card/Tip.vue
@@ -0,0 +1,33 @@
+<template>
+  <el-card class="box-card" shadow="never">
+    <div slot="header">🥳 每日一句</div>
+    <div>
+      <div class="has-left-label block">{{ tip.content }}</div>
+      <div class="has-text-right mt-5 block">—— {{ tip.author }}</div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { getTip } from "@/api/tip";
+
+export default {
+  name: "Tip",
+  data() {
+    return {
+      tip: {},
+    };
+  },
+  created() {
+    this.fetchTip();
+  },
+  methods: {
+    async fetchTip() {
+      getTip().then((value) => {
+        const { data } = value;
+        this.tip = data;
+      });
+    },
+  },
+};
+</script>
diff --git a/src/view/post/Index.vue b/src/view/post/Index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0e175b83ce393f8729b5163a5d414f48874de271
--- /dev/null
+++ b/src/view/post/Index.vue
@@ -0,0 +1,15 @@
+<template>
+  <el-card>
+    <div slot="header">帖子列表</div>
+    <div>body</div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: "PostList",
+  data() {
+    return {};
+  },
+};
+</script>
\ No newline at end of file