diff --git a/backend/.idea/workspace.xml b/backend/.idea/workspace.xml
index d6fa6b7..d5f5bf9 100644
--- a/backend/.idea/workspace.xml
+++ b/backend/.idea/workspace.xml
@@ -20,7 +20,20 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="8b97a098-48b2-4e64-a9ef-522fe2d30b52" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/../web/src/router/index.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/../web/src/views/Dashboard.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/../web/src/views/Subscription.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/../web/src/views/User.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/sub-store.js" beforeDir="false" afterPath="$PROJECT_DIR$/sub-store.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../web/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/../web/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../web/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/../web/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../web/src/App.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/App.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../web/src/assets/logo.svg" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/assets/logo.svg" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../web/src/components/BottomNav.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/components/BottomNav.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../web/src/components/TopToolbar.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/components/TopToolbar.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../web/src/main.js" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/main.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../web/src/plugins/vuetify.js" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/plugins/vuetify.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -52,6 +65,8 @@
       <option name="presentableId" value="Default" />
       <updated>1597827738046</updated>
       <workItem from="1597827739128" duration="775000" />
+      <workItem from="1597902241253" duration="776000" />
+      <workItem from="1598004165212" duration="170000" />
     </task>
     <servers />
   </component>
@@ -68,5 +83,6 @@
         </entry>
       </map>
     </option>
+    <option name="oldMeFiltersMigrated" value="true" />
   </component>
 </project>
\ No newline at end of file
diff --git a/backend/sub-store.js b/backend/sub-store.js
index f30172a..3e65322 100644
--- a/backend/sub-store.js
+++ b/backend/sub-store.js
@@ -123,6 +123,7 @@ async function parseSub(sub, platform) {
     const $operator = ProxyOperator();
 
     for (const item of sub.process || []) {
+        // process script
         if (item.type.indexOf("Script") !== -1) {
             if (item.args && item.args[0].indexOf("http") !== -1) {
                 // if this is remote script
@@ -201,7 +202,9 @@ async function updateSub(req, res) {
             ...allSubs[name],
             ...sub
         };
-        allSubs[name] = newSub;
+        // allow users to update the subscription name
+        delete allSubs[name];
+        allSubs[sub.name || name] = newSub;
         $.write(allSubs, SUBS_KEY);
         res.json({
             status: "success",
@@ -316,7 +319,9 @@ async function updateCollection(req, res) {
             ...allCol[name],
             ...collection
         };
-        allCol[name] = newCol;
+        // allow users to update collection name
+        delete allCol[name];
+        allCol[collection.name || name] = newCol;
         $.write(allCol, COLLECTIONS_KEY);
         res.json({
             status: "success",
@@ -1489,6 +1494,15 @@ function ScriptOperator(script) {
         name: "Script Operator",
         func: (proxies) => {
             ;(function () {
+                // interface to get internal operators
+                const $get = (name, args) => {
+                    const operator = AVAILABLE_OPERATORS[name];
+                    if (operator) {
+                        return operator(args).func;
+                    } else {
+                        throw new Error(`No operator named ${name} is found!`);
+                    }
+                };
                 eval(script);
                 return func(proxies);
             })();
@@ -1588,15 +1602,24 @@ function TypeFilter(...types) {
  }
  WARNING:
  1. This function name should be `func`!
- 2. Always declare variable before using it!
+ 2. Always declare variables before using them!
  */
 function ScriptFilter(script) {
     return {
         name: "Script Filter",
         func: (proxies) => {
             !(function () {
+                // interface to get internal filters
+                const $get = (name, args) => {
+                    const filter = AVAILABLE_FILTERS[name];
+                    if (filter) {
+                        return filter(args).func;
+                    } else {
+                        throw new Error(`No filter named ${name} is found!`);
+                    }
+                };
                 eval(script);
-                return filter(proxies);
+                return func(proxies);
             })();
         }
     }
diff --git a/web/package-lock.json b/web/package-lock.json
index cb8a818..a4f62b2 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -11114,6 +11114,11 @@
         }
       }
     },
+    "vue-router": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz",
+      "integrity": "sha512-BADg1mjGWX18Dpmy6bOGzGNnk7B/ZA0RxuA6qedY/YJwirMfKXIDzcccmHbQI0A6k5PzMdMloc0ElHfyOoX35A=="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz",
diff --git a/web/package.json b/web/package.json
index 987491f..357116d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -13,6 +13,7 @@
     "lodash": "^4.17.20",
     "material-design-icons-iconfont": "^5.0.1",
     "vue": "^2.6.11",
+    "vue-router": "^3.4.3",
     "vuetify": "^2.2.11"
   },
   "devDependencies": {
diff --git a/web/src/App.vue b/web/src/App.vue
index 1db3065..73f9289 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,6 +1,9 @@
 <template>
   <v-app>
     <TopToolbar></TopToolbar>
+    <v-content>
+      <router-view></router-view>
+    </v-content>
     <BottomNav></BottomNav>
   </v-app>
 </template>
@@ -15,16 +18,15 @@ export default {
     BottomNav
   },
 
-  props: {
-    source: String,
-  },
-
-  data: () => ({
-    drawer: null,
-  }),
-
   created() {
-    this.$vuetify.theme.dark = true
+    this.$vuetify.theme.dark = true;
+    this.$vuetify.theme.themes.dark.primary = '#d02f2f';
   },
+
+  computed: {
+    isDarkMode() {
+      return true;
+    }
+  }
 }
 </script>
\ No newline at end of file
diff --git a/web/src/assets/logo.svg b/web/src/assets/logo.svg
index 145b6d1..28a0573 100644
--- a/web/src/assets/logo.svg
+++ b/web/src/assets/logo.svg
@@ -1 +1,10 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100">
+    <defs>
+        <style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style>
+    </defs>
+    <title>Artboard 46</title>
+    <polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/>
+    <polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/>
+    <polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/>
+    <polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/>
+</svg>
diff --git a/web/src/components/BottomNav.vue b/web/src/components/BottomNav.vue
index 090ca73..efb79d0 100644
--- a/web/src/components/BottomNav.vue
+++ b/web/src/components/BottomNav.vue
@@ -2,24 +2,24 @@
 
   <v-bottom-navigation
       app
+      color="primary"
       fixed
       grow
       v-model="activeItem"
-      color="primary"
   >
-    <v-btn value="dashboard">
+    <v-btn :to="{path:'/dashboard'}" value="dashboard">
       <span>首页</span>
       <v-icon>dashboard</v-icon>
     </v-btn>
 
-    <v-btn value="collection">
+    <v-btn :to="{path: '/'}" value="subscription">
       <span>订阅</span>
       <v-icon>favorite</v-icon>
     </v-btn>
 
-    <v-btn value="subscription">
-      <span>机场</span>
-      <v-icon>code</v-icon>
+    <v-btn :to="{path: '/user'}" value="user">
+      <span>我的</span>
+      <v-icon>settings</v-icon>
     </v-btn>
 
 
@@ -31,7 +31,7 @@
 export default {
   data: () => {
     return {
-      activeItem: 'collection'
+      activeItem: 'subscription'
     }
   }
 }
diff --git a/web/src/components/TopToolbar.vue b/web/src/components/TopToolbar.vue
index b7751ba..8d5909e 100644
--- a/web/src/components/TopToolbar.vue
+++ b/web/src/components/TopToolbar.vue
@@ -28,9 +28,9 @@
 
     <v-app-bar
         app
-        fixed
-        dark
         color="primary"
+        dark
+        fixed
     >
       <v-app-bar-nav-icon @click.stop="toggleMenu"></v-app-bar-nav-icon>
 
@@ -50,10 +50,10 @@ export default {
   },
 
   methods: {
-    toggleMenu: function() {
+    toggleMenu: function () {
       this.showMenu = !this.showMenu;
     },
-    doNothing: function() {
+    doNothing: function () {
 
     }
   }
diff --git a/web/src/main.js b/web/src/main.js
index a21e528..5a1ea5e 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import vuetify from './plugins/vuetify';
+import router from './router';
 
 Vue.config.productionTip = false
 
 new Vue({
-  vuetify,
-  render: h => h(App)
+    vuetify,
+    router,
+    render: h => h(App)
 }).$mount('#app')
diff --git a/web/src/plugins/vuetify.js b/web/src/plugins/vuetify.js
index 22251c3..00ba4d3 100644
--- a/web/src/plugins/vuetify.js
+++ b/web/src/plugins/vuetify.js
@@ -4,5 +4,4 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css'
 
 Vue.use(Vuetify);
 
-export default new Vuetify({
-});
+export default new Vuetify({});
diff --git a/web/src/router/index.js b/web/src/router/index.js
new file mode 100644
index 0000000..ddd8bb9
--- /dev/null
+++ b/web/src/router/index.js
@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+
+import Subscription from "@/views/Subscription";
+import Dashboard from "@/views/Dashboard";
+import User from "@/views/User";
+
+Vue.use(Router);
+
+const router = new Router({
+    mode: "history",
+    base: process.env.BASE_URL,
+    routes: [
+        {
+            path: "/",
+            name: "subscriptions",
+            component: Subscription
+        },
+        {
+            path: "/dashboard",
+            name: "dashboard",
+            component: Dashboard
+        },
+        {
+            path: "/user",
+            name: "user",
+            component: User
+        }
+    ]
+});
+
+export default router;
\ No newline at end of file
diff --git a/web/src/views/Dashboard.vue b/web/src/views/Dashboard.vue
new file mode 100644
index 0000000..d1eae2c
--- /dev/null
+++ b/web/src/views/Dashboard.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-container>
+    <h1 class="headline">首页</h1>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "Dashboard"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/web/src/views/Subscription.vue b/web/src/views/Subscription.vue
new file mode 100644
index 0000000..7a27b20
--- /dev/null
+++ b/web/src/views/Subscription.vue
@@ -0,0 +1,10 @@
+<template>
+  <v-container>
+    <h1 class="headline">订阅</h1>
+  </v-container>
+</template>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/web/src/views/User.vue b/web/src/views/User.vue
new file mode 100644
index 0000000..f670d8f
--- /dev/null
+++ b/web/src/views/User.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-container>
+    <h1 class="headline">用户</h1>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "User"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file