diff --git a/src/css/popup.less b/src/css/popup.less
index cee0500..7c4800a 100644
--- a/src/css/popup.less
+++ b/src/css/popup.less
@@ -93,7 +93,7 @@ body {
         border: 1px solid #FF8549;
         line-height: 30px;
         text-align: center;
-        transition: .2s;
+        transition: .3s;
         border-radius: 4px;
         cursor: pointer;
         box-sizing: border-box;
diff --git a/src/js/default-config.js b/src/js/default-config.js
new file mode 100644
index 0000000..3c98ee5
--- /dev/null
+++ b/src/js/default-config.js
@@ -0,0 +1,12 @@
+export default {
+    rsshubDomain: 'https://rsshub.app',
+    notice: {
+        badge: true,
+    },
+    submitto: {
+        ttrss: false,
+        ttrssDomain: '',
+        feedly: false,
+        inoreader: false,
+    }
+}
\ No newline at end of file
diff --git a/src/js/options/App.vue b/src/js/options/App.vue
index 37b8a20..183e198 100644
--- a/src/js/options/App.vue
+++ b/src/js/options/App.vue
@@ -13,11 +13,15 @@
                     <i class="el-icon-setting"></i>
                     <span slot="title">设置</span>
                 </el-menu-item>
+                <el-menu-item index="/list">
+                    <i class="el-icon-magic-stick"></i>
+                    <span slot="title">支持列表</span>
+                </el-menu-item>
                 <el-menu-item index="/about">
                     <i class="el-icon-coordinate"></i>
                     <span slot="title">关于</span>
                 </el-menu-item>
-                <el-footer class="footer">@DIYgod</el-footer>
+                <el-footer class="footer">版本 v{{ version }}<br>© 2019 <a href="https://diygod.me">DIYgod</a></el-footer>
             </el-menu>
         </el-aside>
         <el-container>
@@ -36,6 +40,9 @@ export default {
     components: {
         HelloWorld
     },
+    data: () => ({
+        version: VERSION,
+    }),
     methods: {
         handleSelect(key, keyPath) {
             this.$router.push(key);
@@ -88,6 +95,28 @@ body {
     line-height: 60px;
     text-align: center;
     font-size: 14px;
-    color: @color-primary;
+    color: #999;
+    line-height: 25px;
+
+    a {
+        color: @color-primary;
+        text-decoration: none;
+    }
+}
+
+.el-menu-item {
+    i,
+    span {
+        transition: color .3s;
+    }
+
+    &.is-active {
+        color: #303133;
+
+        i,
+        span {
+            color: #f5712c;
+        }
+    }
 }
 </style>
diff --git a/src/js/options/index.js b/src/js/options/index.js
index 1deea99..161aa8c 100644
--- a/src/js/options/index.js
+++ b/src/js/options/index.js
@@ -1,10 +1,11 @@
+import '../../css/options.scss'
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './App.vue';
 import Setting from './views/Setting.vue';
+import List from './views/List.vue';
 import About from './views/About.vue';
-import { Container, Menu, MenuItem, Aside, Header, Main, Footer } from 'element-ui';
-import '../../css/options.scss'
+import { Container, Menu, MenuItem, Aside, Header, Main, Footer, Input, Checkbox, Message, Loading } from 'element-ui';
 
 Vue.use(VueRouter);
 Vue.use(Container);
@@ -14,11 +15,18 @@ Vue.use(Aside);
 Vue.use(Header);
 Vue.use(Main);
 Vue.use(Footer);
+Vue.use(Input);
+Vue.use(Checkbox);
+Vue.use(Loading.directive);
+
+Vue.prototype.$loading = Loading.service;
+Vue.prototype.$message = Message;
 Vue.config.productionTip = false;
 
 const routes = [
     { path: '/', redirect: '/setting' },
     { path: '/setting', component: Setting },
+    { path: '/list', component: List },
     { path: '/about', component: About },
 ];
 const router = new VueRouter({
diff --git a/src/js/options/views/About.vue b/src/js/options/views/About.vue
index 487b23e..53d639f 100644
--- a/src/js/options/views/About.vue
+++ b/src/js/options/views/About.vue
@@ -1,5 +1,40 @@
 <template>
-  <div class="about">
-      About
-  </div>
-</template>
\ No newline at end of file
+    <div class="about">
+        <el-main>
+            <div class="title">关于</div>
+            <div class="content">
+                未完成的功能
+            </div>
+        </el-main>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'About',
+    data: () => ({
+    }),
+}
+</script>
+
+<style lang="less" scoped>
+.about {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 40px 10px;
+}
+
+.title {
+    font-size: 25px;
+    font-weight: bold;
+    border-bottom: 1px solid #e6e6e6;
+    padding-bottom: 10px;
+    color: #f5712c;
+}
+
+.content {
+    margin-top: 20px;
+    color: #222;
+}
+</style>
diff --git a/src/js/options/views/List.vue b/src/js/options/views/List.vue
new file mode 100644
index 0000000..dc1777e
--- /dev/null
+++ b/src/js/options/views/List.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="list">
+        <el-main>
+            <div class="title">支持列表</div>
+            <div class="content">
+                未完成的功能
+            </div>
+        </el-main>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'List',
+    data: () => ({
+    }),
+}
+</script>
+
+<style lang="less" scoped>
+.list {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 40px 10px;
+}
+
+.title {
+    font-size: 25px;
+    font-weight: bold;
+    border-bottom: 1px solid #e6e6e6;
+    padding-bottom: 10px;
+    color: #f5712c;
+}
+
+.content {
+    margin-top: 20px;
+    color: #222;
+}
+</style>
diff --git a/src/js/options/views/Setting.vue b/src/js/options/views/Setting.vue
index 1ec65cc..fb11d28 100644
--- a/src/js/options/views/Setting.vue
+++ b/src/js/options/views/Setting.vue
@@ -1,21 +1,112 @@
 <template>
-  <div class="setting">
-      <el-main>Setting</el-main>
-  </div>
+    <div class="setting">
+        <el-main>
+            <div class="title">设置</div>
+            <div class="content" v-loading="loading">
+                <div class="subtitle">常规</div>
+                <div class="setting-item">
+                    <div class="setting-name">自定义 RSSHub 域名</div>
+                    <div class="setting-input">
+                        <el-input @change="saveConfig" v-model="config.rsshubDomain" placeholder="请输入你的 RSSHub 域名，留空使用官方域名"></el-input>
+                    </div>
+                </div>
+                <div class="subtitle">通知与提醒</div>
+                <div class="setting-item">
+                    <div class="setting-name">角标提醒</div>
+                    <div class="setting-input">
+                        <el-checkbox @change="saveConfig" v-model="config.notice.badge">开启</el-checkbox>
+                    </div>
+                </div>
+                <div class="subtitle">一键订阅</div>
+                <div class="setting-item">
+                    <div class="setting-name">Tiny Tiny RSS</div>
+                    <div class="setting-input">
+                        <el-checkbox @change="saveConfig" v-model="config.submitto.ttrss">开启</el-checkbox>
+                        <el-input @change="saveConfig" style="margin-left: 20px;" v-if="config.submitto.ttrss" v-model="config.submitto.ttrssDomain" placeholder="必填，请输入你的 Tiny Tiny RSS 地址"></el-input>
+                    </div>
+                    <div class="setting-name">Feedly</div>
+                    <div class="setting-input">
+                        <el-checkbox @change="saveConfig" v-model="config.submitto.feedly">开启</el-checkbox>
+                    </div>
+                    <div class="setting-name">Inoreader</div>
+                    <div class="setting-input">
+                        <el-checkbox @change="saveConfig" v-model="config.submitto.inoreader">开启</el-checkbox>
+                    </div>
+                </div>
+            </div>
+        </el-main>
+    </div>
 </template>
 
 <script>
+import defaultConfig from '../../default-config';
+
 export default {
     name: 'Setting',
+    data: () => ({
+        loading: true,
+        defaultConfig,
+        config: defaultConfig,
+    }),
+    created() {
+        this.getConfig();
+    },
     methods: {
+        getConfig() {
+            chrome.storage.local.get('config', (result) => {
+                this.config = Object.assign({}, defaultConfig, result.config);
+                this.loading = false;
+            });
+        },
+        saveConfig() {
+            chrome.storage.local.set({
+                config: this.config,
+            }, () => {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            });
+        },
     }
 }
 </script>
 
-<style lang="less">
-
+<style lang="less" scoped>
 .setting {
     width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 40px 10px;
 }
 
+.title {
+    font-size: 25px;
+    font-weight: bold;
+    border-bottom: 1px solid #e6e6e6;
+    padding-bottom: 10px;
+    color: #f5712c;
+}
+
+.content {
+    margin-top: 20px;
+    color: #222;
+}
+
+.subtitle {
+    font-size: 20px;
+    font-weight: bold;
+    margin: 30px 0 15px;
+}
+
+.setting-name {
+    font-size: 15px;
+    margin: 15px 0 5px;
+}
+
+.setting-input {
+    height: 40px;
+    display: flex;
+    align-items: center;
+}
 </style>
diff --git a/webpack.config.js b/webpack.config.js
index f3f6470..0137830 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
@@ -166,6 +167,9 @@ module.exports = {
             },
         ]),
         new VueLoaderPlugin(),
+        new webpack.DefinePlugin({
+            VERSION: JSON.stringify(require('./src/assets/manifest.json').version)
+        }),
     ],
 
     node: {