diff --git a/src/layout/components/footer.vue b/src/layout/components/footer.vue
index 196c888..dfa149c 100644
--- a/src/layout/components/footer.vue
+++ b/src/layout/components/footer.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app-footer">
-    <a class="record-number" href="http://beian.miit.gov.cn/">粤ICP备2020098994号</a>
+    Soul2 | <a class="record-number" href="http://beian.miit.gov.cn/">粤ICP备2020098994号</a>
   </div>
 </template>
 
@@ -14,9 +14,6 @@ export default {
 @import "~@/style/layout/footer.scss";
 
 #app-footer {
-  position: absolute;
-  bottom: 20px;
-  left: 0;
   width: 100%;
 }
 
diff --git a/src/layout/components/navbar/index.vue b/src/layout/components/navbar/index.vue
index 23913b5..f5cff5d 100644
--- a/src/layout/components/navbar/index.vue
+++ b/src/layout/components/navbar/index.vue
@@ -50,7 +50,7 @@ export default {
         sm: 5,
         md: 4,
         lg: 3,
-        xl: 1
+        xl: 2
       }
     },
     menuStyle() {
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 424c925..0d91585 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="layout">
-    <el-container>
+    <!--    <div id="bg" :style="randomUrl" />-->
+    <el-container style="height: 100%;">
       <el-header>
         <navbar/>
       </el-header>
@@ -9,7 +10,7 @@
           <app-main/>
         </el-scrollbar>
       </el-main>
-      <el-footer>
+      <el-footer style="height: 40px;">
         <app-footer/>
       </el-footer>
     </el-container>
@@ -20,10 +21,19 @@
 import AppMain from "@/layout/components/AppMain";
 import Navbar from "@/layout/components/navbar";
 import AppFooter from "@/layout/components/footer";
+import Background from "@/layout/components/background";
 
 export default {
   name: "Layout",
-  components: {Navbar, AppMain, AppFooter}
+  components: {Background, Navbar, AppMain, AppFooter},
+  computed: {
+    randomUrl() {
+      let n = Math.floor(Math.random() * 5 + 1)
+      return {
+        background: "url(http://soul2.cn/images/spi_a" + n + ".jpg) center no-repeat fixed"
+      }
+    }
+  }
 }
 </script>
 
@@ -32,10 +42,24 @@ export default {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
-el-container {
+#bg {
   height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  background-size: 100% 100%;
+  -moz-background-size: 100% 100%;
+  -webkit-background-size: 100% 100%;
+}
+
+el-container {
   padding-top: 0;
 }
 </style>
diff --git a/src/style/index.scss b/src/style/index.scss
index 8a51b70..bce7532 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -3,6 +3,7 @@
 * {
   margin: 0;
   padding: 0;
+  z-index: 5;
 }
 
 body {
diff --git a/src/style/layout/index.scss b/src/style/layout/index.scss
new file mode 100644
index 0000000..a9f0813
--- /dev/null
+++ b/src/style/layout/index.scss
@@ -0,0 +1,21 @@
+
+a {
+  color: #b79500;
+}
+
+a:hover {
+  animation-name: aHover;
+  animation-duration: 0.8s;
+  animation-timing-function: ease-in;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+}
+
+@keyframes aHover {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.5;
+  }
+}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index e905615..ee3b6e4 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,17 +1,134 @@
 <template>
-  <div>
-    这是一个首页 <br>
-    如你所见，它现在还什么都没有，但马上就会有了。 <br>
-    By Soul2
+  <div id="home">
+    <!--    这是一个首页 <br>-->
+    <!--    如你所见，它现在还什么都没有，但马上就会有了。 <br>-->
+    <!--    By Soul2-->
+    <el-card shadow="always">
+      <el-collapse :accordion="accordion" v-model="expand" style="text-align: left">
+        <el-collapse-item name="openShow">
+          <template slot="title">
+            关于灵魂演示
+          </template>
+          <div>
+            <p>
+              这是一套你不能错过的魔兽地图编辑器入门教程。
+            </p>
+            <p>
+              灵魂演示是灵魂所制作的一套强大的
+              <el-link
+                href='https://xywiki.com/%E9%AD%94%E5%85%BD%E5%9C%B0%E5%9B%BE%E7%BC%96%E8%BE%91%E5%99%A8'
+                target='_blank'
+                type="primary"
+                style="font-size: 12px"
+              >
+                魔兽地图编辑器
+              </el-link>
+              系统演示地图，涵盖了许多新手入门所关注和需要的内容。
+            </p>
+            <p>
+              灵魂演示地图基于
+              <el-link
+                href='https://xywiki.com/YDWE'
+                target='_blank'
+                type="primary"
+                style="font-size: 12px"
+              >
+                YDWE
+              </el-link>
+              1.27.5 制作，请使用 YDWE 1.27.5 或以上的版本打开灵魂演示地图，否则可能会导致
+              <el-link
+                href='https://xywiki.com/WE%E5%85%BC%E5%AE%B9%E6%80%A7%E9%94%99%E8%AF%AF'
+                target='_blank'
+                type="primary"
+                style="font-size: 12px"
+              >
+                WE兼容性错误
+              </el-link>
+              。
+            </p>
+            <p>
+              你可以选择
+              <el-link
+                href='http://next.soul2.cn/download/soul-demo/%E5%90%88%E9%9B%86.zip'
+                target='_blank'
+                type="primary"
+                style="font-size: 12px"
+                icon="el-icon-download"
+              >
+                点击这里
+              </el-link>
+              一次性下载所有演示地图，也可以通过点击下方各个按钮以你希望的方式下载你所需要的特定演示地图。
+            </p>
+            <div style="margin-top: 7px;">
+              <el-button size="mini" class="el-icon-position"
+                         @click="goto('https://wow8.org/soul-demo/')"
+              >
+                Wow8
+              </el-button>
+              <el-button size="mini" class="el-icon-position"
+                         @click="goto('https://tieba.baidu.com/p/4575301644')"
+              >
+                贴吧
+              </el-button>
+              <el-button size="mini" class="el-icon-cloudy"
+                         @click="goto('https://share.weiyun.com/5YXLT4L')"
+              >
+                微云
+              </el-button>
+              <el-button size="mini" class="el-icon-cloudy"
+                         @click="goto('https://pan.baidu.com/s/1bGeoOm#list/path=%2F')"
+              >
+                百度云
+              </el-button>
+            </div>
+          </div>
+        </el-collapse-item>
+        <el-collapse-item name="soui">
+          <template slot="title">
+            关于SoUI
+          </template>
+          <div>
+            <p>SoUI是基于魔兽争霸III地图编辑器的一个扩展性Mod, 仅使用编辑器原有的函数为使用者增加一些更方便的功能。</p>
+            <p>当前最新版本的SoUI版本是
+              <el-link href="http://bbs.mvprpg.com/forum.php?mod=viewthread&tid=465517"
+                       type="primary" :underline="false">
+                <el-tag size="mini">0.4.6</el-tag>
+              </el-link>
+            </p>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </el-card>
   </div>
 </template>
 
 <script>
+
 export default {
-  name: "Home"
+  name: "Home",
+  components: {},
+  computed: {
+    expand() {
+      return ['openShow', 'soui']
+    }
+  },
+  methods: {
+    goto(where) {
+      location.href = where
+    }
+  }
 }
 </script>
 
 <style scoped>
+@import "~@/style/layout/index.scss";
+
+#home {
+  padding-left: 15%;
+  padding-right: 15%;
+}
 
+a {
+
+}
 </style>
diff --git a/src/views/sodemo/index.vue b/src/views/sodemo/index.vue
index 8b043ec..0164218 100644
--- a/src/views/sodemo/index.vue
+++ b/src/views/sodemo/index.vue
@@ -1,10 +1,93 @@
 <template>
-  <div id="so-demo">
-    灵魂演示 <br>
-    这是一套你不能错过的魔兽地图编辑器入门教程。 <br>
-    灵魂演示是灵魂所制作的一套强大的魔兽地图编辑器系统演示地图，涵盖了许多新手入门所关注和需要的内容。 <br>
-    你可以选择点击这里一次性下载所有演示地图，也可以通过点击下方各个按钮以你希望的方式下载你所需要的特定演示地图。 <br>
-    提醒：灵魂演示地图基于 YDWE 1.27.5 制作，请使用 YDWE 1.27.5 或以上的版本打开灵魂演示地图，否则可能会导致 WE兼容性错误 。 <br>
+  <div id="so-demo" style="padding: 0 15%;">
+    <el-card shadow="always">
+      <div slot="header">
+        关于灵魂演示
+      </div>
+      <div>
+        <p>
+          这是一套你不能错过的魔兽地图编辑器入门教程。
+        </p>
+        <p>
+          灵魂演示是灵魂所制作的一套强大的
+          <el-link
+            href='https://xywiki.com/%E9%AD%94%E5%85%BD%E5%9C%B0%E5%9B%BE%E7%BC%96%E8%BE%91%E5%99%A8'
+            target='_blank'
+            type="primary"
+          >
+            魔兽地图编辑器
+          </el-link>
+          系统演示地图，涵盖了许多新手入门所关注和需要的内容。
+        </p>
+        <p>
+          灵魂演示地图基于
+          <el-link
+            href='https://xywiki.com/YDWE'
+            target='_blank'
+            type="primary"
+          >
+            YDWE
+          </el-link>
+          1.27.5 制作，请使用 YDWE 1.27.5 或以上的版本打开灵魂演示地图，否则可能会导致
+          <el-link
+            href='https://xywiki.com/WE%E5%85%BC%E5%AE%B9%E6%80%A7%E9%94%99%E8%AF%AF'
+            target='_blank'
+            type="primary"
+          >
+            WE兼容性错误
+          </el-link>
+          。
+        </p>
+        <p>
+          你可以选择
+          <el-link
+            href='http://next.soul2.cn/download/soul-demo/%E5%90%88%E9%9B%86.zip'
+            target='_blank'
+            type="primary"
+            icon="el-icon-download"
+          >
+            点击这里
+          </el-link>
+          一次性下载所有演示地图，也可以通过点击下方各个按钮以你希望的方式下载你所需要的特定演示地图。
+        </p>
+        <div style="margin-top: 7px;">
+          <el-button size="mini" class="el-icon-position"
+                     @click="goto('https://wow8.org/soul-demo/')"
+          >
+            Wow8
+          </el-button>
+          <el-button size="mini" class="el-icon-position"
+                     @click="goto('https://tieba.baidu.com/p/4575301644')"
+          >
+            贴吧
+          </el-button>
+          <el-button size="mini" class="el-icon-cloudy"
+                     @click="goto('https://share.weiyun.com/5YXLT4L')"
+          >
+            微云
+          </el-button>
+          <el-button size="mini" class="el-icon-cloudy"
+                     @click="goto('https://pan.baidu.com/s/1bGeoOm#list/path=%2F')"
+          >
+            百度云
+          </el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <el-card shadow="always" style="margin-top: 20px;">
+      <div slot="header">第三卷的教程是视频教程</div>
+      <div>
+        放到了
+        <el-link href="https://space.bilibili.com/8225928" type="primary">我的B站账号</el-link>
+        上
+      </div>
+    </el-card>
+
+    <el-card shadow="always" style="margin-top: 20px;">
+      <div slot="header">另外</div>
+      <div>每期的列表将会在不久后展示。</div>
+    </el-card>
   </div>
 </template>
 
diff --git a/src/views/soui/index.vue b/src/views/soui/index.vue
index c1bb98c..f521d8e 100644
--- a/src/views/soui/index.vue
+++ b/src/views/soui/index.vue
@@ -1,23 +1,46 @@
 <template>
-  <div id="soui">
-    So UI <br>
-    这是一个魔兽争霸3地图编辑器的功能扩展包. <br>
-    <div class="readme">
-      <div class="title">
+  <div id="soui" style="text-align: left;padding: 0 15%;">
+    <el-card shadow="always">
+      <div class="title" slot="header" style="text-align: center">
         关于SoUI
       </div>
-      <ul>
-        <li>这是一个基于YDWEv1.31.8(+网易DzAPI 1.2.9a)打包的魔兽争霸3地图编辑器扩展包.</li>
-        <li>该扩展包添加了一些减少重复劳动的编辑器额外动作UI.</li>
-        <li>扩展包部分内容仍处于测试阶段,其功能可能存有未知BUG.</li>
-        <li>已提供部分额外功能的演示地图,安装后可以在安装目录\example(演示地图)\SoUI文件夹内找到.</li>
-        <li>未经本人许可擅自将SoUI在网上散播者将承担盗版乱传的相关法律责任,并且传播者将承担所有使用者使用本UI带来的所有负面后果,本人不承担任何责任.</li>
-        <li>发现任何BUG可以<a href="" id="ret">点击这里</a>进行反馈</li>
-        <li>
-          SoUI仅对编辑器功能进行扩展,不涉及编辑器原有功能的修改.
-        </li>
-      </ul>
-    </div>
+      <p>这是一个基于YDWEv1.31.8(+网易DzAPI 1.2.9a)打包的魔兽争霸3地图编辑器扩展包.</p>
+      <p>该扩展包添加了一些减少重复劳动的编辑器额外动作UI.</p>
+      <p>扩展包部分内容仍处于测试阶段,其功能可能存有未知BUG.</p>
+      <p>已提供部分额外功能的演示地图,安装后可以在安装目录\example(演示地图)\SoUI文件夹内找到.</p>
+      <p>未经本人许可擅自将SoUI在网上散播者将承担盗版乱传的相关法律责任,并且传播者将承担所有使用者使用本UI带来的所有负面后果,Soul本人不承担任何责任.</p>
+      <p>SoUI仅对编辑器功能进行扩展,不涉及编辑器原有功能的修改.</p>
+    </el-card>
+
+    <el-card shadow="always" style="margin-top: 20px;">
+      <div slot="header" style="text-align: center">关于版本</div>
+      <div>
+        <p>最新的版本是
+          <el-tag size="mini">0.4.6</el-tag>
+          。
+        </p>
+        <p>可能会有
+          <el-tag size="mini">0.5.0</el-tag>
+          (也许)
+        </p>
+      </div>
+    </el-card>
+
+    <el-card shadow="always" style="margin-top: 20px;">
+      <div slot="header" style="text-align: center">下载</div>
+      <div>
+        <el-button size="mini" class="el-icon-cloudy"
+                   @click="goto('https://share.weiyun.com/dlM6m0EE')"
+        >
+          微云
+        </el-button>
+        <el-button size="mini" class="el-icon-cloudy"
+                   @click="goto('https://pan.baidu.com/s/1bL96VxXYSCW8pSsVZ5rzrw#awsl')"
+        >
+          百度云
+        </el-button>
+      </div>
+    </el-card>
   </div>
 </template>