diff --git a/src/App.vue b/src/App.vue
index ac71d4a..c81f6c3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -117,8 +117,8 @@
     }
 
     .body {
-        top: 60px;
-        bottom: 1px;
+        top: 65px;
+        bottom: 5px;
         width: 100%;
         position: absolute;
 
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 879051a..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/card/base-card.vue b/src/components/card/base-card.vue
new file mode 100644
index 0000000..eecf859
--- /dev/null
+++ b/src/components/card/base-card.vue
@@ -0,0 +1,29 @@
+<template>
+    <div class="card">
+        <el-card shadow="hover">
+            <slot/>
+        </el-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "base-card"
+    };
+</script>
+
+<style lang="scss">
+    .card {
+        padding: 8px 6px;
+        border-radius: 10px;
+        box-sizing: border-box;
+
+        .el-card {
+            width: 100%;
+        }
+
+        &:first-child {
+            padding-top: 0;
+        }
+    }
+</style>
diff --git a/src/components/error/style.scss b/src/components/error/style.scss
index 03102d3..5754164 100644
--- a/src/components/error/style.scss
+++ b/src/components/error/style.scss
@@ -1,5 +1,5 @@
 .error {
-  margin-top: 50px;
+  margin-top: 45px;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -19,7 +19,7 @@
     text-align: center;
 
     h1 {
-      color: #409EFF;
+      color: #1296DB;
       font-size: 72px;
       font-weight: 600;
       line-height: 72px;
@@ -28,7 +28,7 @@
 
     .desc {
       color: black;
-      font-size: 20px;
+      font-size: 15px;
       line-height: 28px;
       margin-bottom: 16px;
     }
diff --git a/src/main.js b/src/main.js
index ab41fae..ba35388 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,15 +1,17 @@
 import Vue from 'vue'
-import App from './App.vue'
+import App from './App'
 import router from './router/router'
 import store from './store/store'
+import baseCard from './components/card/base-card'
 //Element UI
 import './plugins/element/element.js'
 //Axios
 import axios from 'axios'
 import VueAxios from 'vue-axios'
 
-Vue.config.productionTip = false
 Vue.use(VueAxios, axios);
+Vue.component('base-card', baseCard);
+Vue.config.productionTip = false;
 
 new Vue({
     router,
diff --git a/src/plugins/element/element-variables.scss b/src/plugins/element/element-variables.scss
index 0060199..391930b 100644
--- a/src/plugins/element/element-variables.scss
+++ b/src/plugins/element/element-variables.scss
@@ -3,7 +3,7 @@ Write your variables here. All available variables can be
 found in element-ui/packages/theme-chalk/src/common/var.scss.
 For example, to overwrite the theme color:
 */
-$--color-primary: #409EFF;
+$--color-primary: #1296DB;
 
 /* icon font path, required */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
diff --git a/src/store/store.js b/src/store/store.js
index 5955c89..32e0941 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {