diff --git a/src/views/system/Backup.vue b/src/views/system/Backup.vue
new file mode 100644
index 00000000..f99c74cd
--- /dev/null
+++ b/src/views/system/Backup.vue
@@ -0,0 +1,174 @@
+<template>
+  <a-card
+    :bordered="false"
+    :bodyStyle="{ padding: '16px' }"
+  >
+    <div slot="title">
+      <a-icon type="hdd" />博客备份
+    </div>
+    <template
+      class="ant-card-actions"
+      slot="actions"
+    >
+      <a-button
+        type="link"
+        icon="download"
+        :loading="backuping"
+        @click="handleBackupClick"
+      >备份</a-button>
+
+      <a-button
+        type="link"
+        icon="reload"
+        :loading="loading"
+        @click="handleBAckupRefreshClick"
+      >刷新</a-button>
+    </template>
+
+    <a-list
+      itemLayout="horizontal"
+      :dataSource="backupTips"
+    >
+      <a-list-item
+        slot="renderItem"
+        slot-scope="backupTip"
+      >
+        <a-list-item-meta :description="backupTip.description">
+          <h4 slot="title">{{ backupTip.title }}</h4>
+        </a-list-item-meta>
+        <a-alert
+          slot="extra"
+          v-if="backupTip.alert"
+          :message="backupTip.alert.message"
+          :type="backupTip.alert.type"
+          banner
+        />
+      </a-list-item>
+    </a-list>
+
+    <a-divider>历史备份</a-divider>
+
+    <a-list
+      itemLayout="vertical"
+      size="small"
+      :dataSource="backups"
+    >
+      <a-list-item
+        slot="renderItem"
+        slot-scope="backup"
+      >
+        <a-button
+          slot="extra"
+          type="link"
+          style="color: red"
+          icon="delete"
+          :loading="deleting"
+          @click="handleBackupDeleteClick(backup.filename)"
+        >删除</a-button>
+        <a-list-item-meta>
+          <a
+            slot="title"
+            :href="backup.downloadUrl"
+          >
+            <a-icon
+              type="schedule"
+              style="color: #52c41a"
+            />
+            {{ backup.filename }}
+          </a>
+          <p slot="description">{{ backup.updateTime | timeAgo }}</p>
+        </a-list-item-meta>
+      </a-list-item>
+      <div
+        v-if="loading"
+        class="loading-container"
+      >
+        <a-spin />
+      </div>
+    </a-list>
+  </a-card>
+</template>
+
+<script>
+import backupApi from '@/api/backup'
+
+export default {
+  name: 'Backup',
+  data() {
+    return {
+      backuping: false,
+      loading: false,
+      deleting: false,
+      backups: [],
+      backupTips: [
+        {
+          title: '博客备份',
+          description:
+            '将会压缩 Halo 的工作目录到临时文件中，并提供下载链接。如果附件太多的话，可能会十分耗时，请耐心等待！',
+          alert: {
+            type: 'warning',
+            message: '注意：备份后生成的压缩文件存储在临时文件中，重启服务器会造成备份文件的丢失，所以请尽快下载！'
+          }
+        },
+        { title: '备份查询', description: '查询近期的备份，按照备份时间递减排序。' },
+        { title: '备份删除', description: '删除已经备份的内容。' },
+        {
+          title: '版本要求',
+          alert: {
+            type: 'warning',
+            message: '注意：要求 Halo server 版本大于 v1.1.1！你可以在 【系统 | 关于】 里面找到系统的版本信息。'
+          }
+        }
+      ]
+    }
+  },
+  created() {
+    this.getBackups()
+  },
+  methods: {
+    getBackups() {
+      this.loading = true
+      backupApi
+        .listHaloBackups()
+        .then(response => {
+          this.backups = response.data.data
+        })
+        .finally(() => (this.loading = false))
+    },
+    handleBackupClick() {
+      this.backuping = true
+      backupApi
+        .backupHalo()
+        .then(response => {
+          this.$notification.success({ message: 'Backup succeeded!' })
+          this.getBackups()
+        })
+        .finally(() => {
+          this.backuping = false
+        })
+    },
+    handleBackupDeleteClick(filename) {
+      this.deleting = true
+      backupApi
+        .deleteHaloBackup(filename)
+        .then(response => {
+          this.$notification.success({ message: 'Delete succeeded!' })
+          this.getBackups()
+        })
+        .finally(() => (this.deleting = false))
+    },
+    handleBAckupRefreshClick() {
+      this.getBackups()
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.loading-container {
+  position: absolute;
+  bottom: 40px;
+  width: 100%;
+  text-align: center;
+}
+</style>
diff --git a/src/views/system/ToolList.vue b/src/views/system/ToolList.vue
index 898b02fe..ec91566d 100644
--- a/src/views/system/ToolList.vue
+++ b/src/views/system/ToolList.vue
@@ -2,6 +2,15 @@
   <div class="page-header-index-wide">
     <div class="card-content">
       <a-row :gutter="12">
+        <a-col
+          :xl="12"
+          :lg="12"
+          :md="24"
+          :sm="24"
+          :xs="24"
+        >
+          <backup />
+        </a-col>
         <a-col
           :xl="6"
           :lg="6"
@@ -10,10 +19,12 @@
           :xs="24"
         >
           <a-card
-            title="Markdown 文章导入"
             :bordered="false"
             :bodyStyle="{ padding: '16px' }"
           >
+            <div slot="title">
+              <a-icon type="file-markdown" />Markdown 文章导入
+            </div>
             <p>支持 Hexo/Jekyll 文章导入并解析元数据</p>
             <a-button
               type="primary"
@@ -44,7 +55,10 @@
 
 <script>
 import backupApi from '@/api/backup'
+import Backup from './Backup'
+
 export default {
+  components: { Backup },
   data() {
     return {
       markdownUpload: false,