diff --git a/src/api/tip.js b/src/api/tip.js
new file mode 100644
index 0000000000000000000000000000000000000000..03c0ebca1e3312b84c51288623bc305d249a0e1e
--- /dev/null
+++ b/src/api/tip.js
@@ -0,0 +1,8 @@
+import request from '@/util/request'
+
+export function getTodayTip() {
+  return request({
+    url: '/tip/today',
+    method: 'get'
+  })
+}
\ No newline at end of file
diff --git a/src/view/Home.vue b/src/view/Home.vue
index c0f7fa2ced5b61b29f47f85fe96ecfb5d386d563..600aada4dfb55582501172d2633f02ac9c80e392 100644
--- a/src/view/Home.vue
+++ b/src/view/Home.vue
@@ -1,22 +1,31 @@
 <template>
   <div>
-      <div class="box">
-          {{billboard.content}}
+    <div class="box">
+      {{ billboard.content }}
+    </div>
+    <div class="columns">
+      <div class="column is-three-quarters"></div>
+      <div class="column">
+        <CardBar />
       </div>
+    </div>
   </div>
 </template>
 
 <script>
-import {getBillboard} from '@/api/billboard'
-
+import { getBillboard } from '@/api/billboard'
+import CardBar from '@/view/card/CardBar'
 export default {
   name: 'Home',
+  components: {
+    CardBar,
+  },
   data() {
-      return {
-          billboard: {
-            content: ''
-          }
-      }
+    return {
+      billboard: {
+        content: '',
+      },
+    }
   },
   created() {
     this.fetchBillboard()
@@ -24,13 +33,12 @@ export default {
   methods: {
     async fetchBillboard() {
       getBillboard().then((value) => {
-        const {data} = value
+        const { data } = value
         this.billboard = data
       })
-    }
-  }
+    },
+  },
 }
 </script>
 
-<style>
-</style>
\ No newline at end of file
+<style></style>
diff --git a/src/view/card/CardBar.vue b/src/view/card/CardBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ead2f3bdcedc603c58b2fc8f372014090692e992
--- /dev/null
+++ b/src/view/card/CardBar.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <TipCard />
+  </div>
+</template>
+
+<script>
+import TipCard from './Tip'
+export default {
+  name: 'CardBar',
+  components: {
+    TipCard
+  }
+}
+</script>
+
+<style>
+
+</style>
\ 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..f95e97e2343099a113b720b0f7c9667ed6419346
--- /dev/null
+++ b/src/view/card/Tip.vue
@@ -0,0 +1,42 @@
+<template>
+  <el-card class="box-card" shadow="never">
+    <div slot="header">
+      <span>🥳 每日一句</span>
+    </div>
+    <div>
+      <div class="has-text-left block">
+        {{ tip.content }}
+      </div>
+      <div class="has-text-right mt-5 block">
+        ——{{ tip.author }}
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { getTodayTip } from '@/api/tip'
+export default {
+  name: 'Tip',
+  data() {
+    return {
+      tip: {}
+    }
+  },
+  created() {
+    this.fetchTodayTip()
+  },
+  methods: {
+    async fetchTodayTip() {
+      getTodayTip().then((response) => {
+        const { data } = response
+        this.tip = data
+      })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file