diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..48e341a
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}
diff --git a/web/README.md b/web/README.md
index 4f75363..ae73f2f 100644
--- a/web/README.md
+++ b/web/README.md
@@ -1,4 +1,4 @@
-# sub-store-web
+# web
 
 ## Project setup
 ```
diff --git a/web/package-lock.json b/web/package-lock.json
index 67a0bd8..98dfa8e 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "sub-store-web",
+  "name": "web",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -301,7 +301,8 @@
     "@babel/helper-validator-identifier": {
       "version": "7.10.4",
       "resolved": "https://registry.npm.taobao.org/@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.10.4.tgz?cache=0&sync_timestamp=1593521083613&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fhelper-validator-identifier%2Fdownload%2F%40babel%2Fhelper-validator-identifier-7.10.4.tgz",
-      "integrity": "sha1-p4x6clHgH2FlEtMbEK3PUq2l4NI="
+      "integrity": "sha1-p4x6clHgH2FlEtMbEK3PUq2l4NI=",
+      "dev": true
     },
     "@babel/helper-wrap-function": {
       "version": "7.10.4",
@@ -340,7 +341,8 @@
     "@babel/parser": {
       "version": "7.11.3",
       "resolved": "https://registry.npm.taobao.org/@babel/parser/download/@babel/parser-7.11.3.tgz?cache=0&sync_timestamp=1596915985899&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fparser%2Fdownload%2F%40babel%2Fparser-7.11.3.tgz",
-      "integrity": "sha1-nh6uRnOLzQjiPoZ7q0PnuVKZqPk="
+      "integrity": "sha1-nh6uRnOLzQjiPoZ7q0PnuVKZqPk=",
+      "dev": true
     },
     "@babel/plugin-proposal-async-generator-functions": {
       "version": "7.10.5",
@@ -1069,6 +1071,7 @@
       "version": "7.11.0",
       "resolved": "https://registry.npm.taobao.org/@babel/types/download/@babel/types-7.11.0.tgz",
       "integrity": "sha1-Kua/G6mujDxDgk5YYSaYcbIG6Q0=",
+      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.10.4",
         "lodash": "^4.17.19",
@@ -1901,76 +1904,6 @@
         }
       }
     },
-    "@vue/compiler-core": {
-      "version": "3.0.0-rc.5",
-      "resolved": "https://registry.npm.taobao.org/@vue/compiler-core/download/@vue/compiler-core-3.0.0-rc.5.tgz?cache=0&sync_timestamp=1595985153463&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcompiler-core%2Fdownload%2F%40vue%2Fcompiler-core-3.0.0-rc.5.tgz",
-      "integrity": "sha1-3U8YFvyuNKgbxg5YT5eZPK0oTVQ=",
-      "requires": {
-        "@babel/parser": "^7.10.4",
-        "@babel/types": "^7.10.4",
-        "@vue/shared": "3.0.0-rc.5",
-        "estree-walker": "^2.0.1",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz?cache=0&sync_timestamp=1589682764497&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsource-map%2Fdownload%2Fsource-map-0.6.1.tgz",
-          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM="
-        }
-      }
-    },
-    "@vue/compiler-dom": {
-      "version": "3.0.0-rc.5",
-      "resolved": "https://registry.npm.taobao.org/@vue/compiler-dom/download/@vue/compiler-dom-3.0.0-rc.5.tgz?cache=0&sync_timestamp=1595985152508&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcompiler-dom%2Fdownload%2F%40vue%2Fcompiler-dom-3.0.0-rc.5.tgz",
-      "integrity": "sha1-g5BehgESOjZUuQ+9gHCKFlMM4ho=",
-      "requires": {
-        "@vue/compiler-core": "3.0.0-rc.5",
-        "@vue/shared": "3.0.0-rc.5"
-      }
-    },
-    "@vue/compiler-sfc": {
-      "version": "3.0.0-rc.5",
-      "resolved": "https://registry.npm.taobao.org/@vue/compiler-sfc/download/@vue/compiler-sfc-3.0.0-rc.5.tgz?cache=0&sync_timestamp=1595985044175&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcompiler-sfc%2Fdownload%2F%40vue%2Fcompiler-sfc-3.0.0-rc.5.tgz",
-      "integrity": "sha1-N05Spvv4+5ruEhMCYFCg8cSW/s8=",
-      "dev": true,
-      "requires": {
-        "@babel/parser": "^7.10.4",
-        "@babel/types": "^7.10.4",
-        "@vue/compiler-core": "3.0.0-rc.5",
-        "@vue/compiler-dom": "3.0.0-rc.5",
-        "@vue/compiler-ssr": "3.0.0-rc.5",
-        "@vue/shared": "3.0.0-rc.5",
-        "consolidate": "^0.15.1",
-        "estree-walker": "^2.0.1",
-        "hash-sum": "^2.0.0",
-        "lru-cache": "^5.1.1",
-        "magic-string": "^0.25.7",
-        "merge-source-map": "^1.1.0",
-        "postcss": "^7.0.27",
-        "postcss-modules": "^3.1.0",
-        "postcss-selector-parser": "^6.0.2",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz?cache=0&sync_timestamp=1589682764497&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsource-map%2Fdownload%2Fsource-map-0.6.1.tgz",
-          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
-          "dev": true
-        }
-      }
-    },
-    "@vue/compiler-ssr": {
-      "version": "3.0.0-rc.5",
-      "resolved": "https://registry.npm.taobao.org/@vue/compiler-ssr/download/@vue/compiler-ssr-3.0.0-rc.5.tgz?cache=0&sync_timestamp=1595985044376&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcompiler-ssr%2Fdownload%2F%40vue%2Fcompiler-ssr-3.0.0-rc.5.tgz",
-      "integrity": "sha1-h4QGxZ2v82Ls3LGZ+5Rnp2nKjeU=",
-      "dev": true,
-      "requires": {
-        "@vue/compiler-dom": "3.0.0-rc.5",
-        "@vue/shared": "3.0.0-rc.5"
-      }
-    },
     "@vue/component-compiler-utils": {
       "version": "3.2.0",
       "resolved": "https://registry.npm.taobao.org/@vue/component-compiler-utils/download/@vue/component-compiler-utils-3.2.0.tgz?cache=0&sync_timestamp=1595427628913&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcomponent-compiler-utils%2Fdownload%2F%40vue%2Fcomponent-compiler-utils-3.2.0.tgz",
@@ -2024,38 +1957,6 @@
       "integrity": "sha1-zrkktOyzucQ4ccekKaAvhCPmIas=",
       "dev": true
     },
-    "@vue/reactivity": {
-      "version": "3.0.0-rc.5",
-      "resolved": "https://registry.npm.taobao.org/@vue/reactivity/download/@vue/reactivity-3.0.0-rc.5.tgz?cache=0&sync_timestamp=1595985154146&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Freactivity%2Fdownload%2F%40vue%2Freactivity-3.0.0-rc.5.tgz",
-      "integrity": "sha1-Rc/42DnXrRMLHkmSOQkAUP3s/xM=",
-      "requires": {
-        "@vue/shared": "3.0.0-rc.5"
-      }
-    },
-    "@vue/runtime-core": {
-      "version": "3.0.0-rc.5",
-      "resolved": "https://registry.npm.taobao.org/@vue/runtime-core/download/@vue/runtime-core-3.0.0-rc.5.tgz",
-      "integrity": "sha1-3VmvOl/AidHNwFplcyDA3Bflw2I=",
-      "requires": {
-        "@vue/reactivity": "3.0.0-rc.5",
-        "@vue/shared": "3.0.0-rc.5"
-      }
-    },
-    "@vue/runtime-dom": {
-      "version": "3.0.0-rc.5",
-      "resolved": "https://registry.npm.taobao.org/@vue/runtime-dom/download/@vue/runtime-dom-3.0.0-rc.5.tgz?cache=0&sync_timestamp=1595985153167&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fruntime-dom%2Fdownload%2F%40vue%2Fruntime-dom-3.0.0-rc.5.tgz",
-      "integrity": "sha1-L9daHymyOr8P/lzN7avaEXIcW1s=",
-      "requires": {
-        "@vue/runtime-core": "3.0.0-rc.5",
-        "@vue/shared": "3.0.0-rc.5",
-        "csstype": "^2.6.8"
-      }
-    },
-    "@vue/shared": {
-      "version": "3.0.0-rc.5",
-      "resolved": "https://registry.npm.taobao.org/@vue/shared/download/@vue/shared-3.0.0-rc.5.tgz?cache=0&sync_timestamp=1595985152851&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fshared%2Fdownload%2F%40vue%2Fshared-3.0.0-rc.5.tgz",
-      "integrity": "sha1-zqI3jj43Nj3cH13RWO3JybWz//A="
-    },
     "@vue/web-component-wrapper": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/@vue/web-component-wrapper/download/@vue/web-component-wrapper-1.2.0.tgz",
@@ -2378,7 +2279,6 @@
       "resolved": "https://registry.npm.taobao.org/anymatch/download/anymatch-3.1.1.tgz",
       "integrity": "sha1-xV7PAhheJGklk5kxDBc84xIzsUI=",
       "dev": true,
-      "optional": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -2724,8 +2624,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/binary-extensions/download/binary-extensions-2.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbinary-extensions%2Fdownload%2Fbinary-extensions-2.1.0.tgz",
       "integrity": "sha1-MPpAyef+B9vIlWeM0ocCTeokHdk=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "bindings": {
       "version": "1.5.0",
@@ -3251,7 +3150,6 @@
       "resolved": "https://registry.npm.taobao.org/chokidar/download/chokidar-3.4.2.tgz",
       "integrity": "sha1-ONyOZY3sOAl0HrPve7Ckf+QkIy0=",
       "dev": true,
-      "optional": true,
       "requires": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
@@ -3268,7 +3166,6 @@
           "resolved": "https://registry.npm.taobao.org/braces/download/braces-3.0.2.tgz",
           "integrity": "sha1-NFThpGLujVmeI23zNs2epPiv4Qc=",
           "dev": true,
-          "optional": true,
           "requires": {
             "fill-range": "^7.0.1"
           }
@@ -3278,7 +3175,6 @@
           "resolved": "https://registry.npm.taobao.org/fill-range/download/fill-range-7.0.1.tgz",
           "integrity": "sha1-GRmmp8df44ssfHflGYU12prN2kA=",
           "dev": true,
-          "optional": true,
           "requires": {
             "to-regex-range": "^5.0.1"
           }
@@ -3287,15 +3183,13 @@
           "version": "7.0.0",
           "resolved": "https://registry.npm.taobao.org/is-number/download/is-number-7.0.0.tgz",
           "integrity": "sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "to-regex-range": {
           "version": "5.0.1",
           "resolved": "https://registry.npm.taobao.org/to-regex-range/download/to-regex-range-5.0.1.tgz",
           "integrity": "sha1-FkjESq58jZiKMmAY7XL1tN0DkuQ=",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-number": "^7.0.0"
           }
@@ -3505,6 +3399,17 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npm.taobao.org/clone-deep/download/clone-deep-4.0.1.tgz",
+      "integrity": "sha1-wZ/Zvbv4WUK0/ZechNz31fB8I4c=",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
     "coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/coa/download/coa-2.0.2.tgz",
@@ -4173,11 +4078,6 @@
         }
       }
     },
-    "csstype": {
-      "version": "2.6.13",
-      "resolved": "https://registry.npm.taobao.org/csstype/download/csstype-2.6.13.tgz?cache=0&sync_timestamp=1596101681368&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcsstype%2Fdownload%2Fcsstype-2.6.13.tgz",
-      "integrity": "sha1-pokwFbkOhN1uhdDjtEKh6E8tvg8="
-    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/cyclist/download/cyclist-1.0.1.tgz",
@@ -4193,6 +4093,12 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz",
+      "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
+      "dev": true
+    },
     "debug": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/debug/download/debug-4.1.1.tgz?cache=0&sync_timestamp=1589891993007&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-4.1.1.tgz",
@@ -4956,32 +4862,14 @@
       }
     },
     "eslint-plugin-vue": {
-      "version": "7.0.0-beta.2",
-      "resolved": "https://registry.npm.taobao.org/eslint-plugin-vue/download/eslint-plugin-vue-7.0.0-beta.2.tgz?cache=0&sync_timestamp=1597198168566&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-plugin-vue%2Fdownload%2Feslint-plugin-vue-7.0.0-beta.2.tgz",
-      "integrity": "sha1-SCiSPsJBkwYPgFZ7+MFbGOE5aLM=",
+      "version": "6.2.2",
+      "resolved": "https://registry.npm.taobao.org/eslint-plugin-vue/download/eslint-plugin-vue-6.2.2.tgz?cache=0&sync_timestamp=1597198168566&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-plugin-vue%2Fdownload%2Feslint-plugin-vue-6.2.2.tgz",
+      "integrity": "sha1-J/7NmjokeJsPER7N1UCp5WGY4P4=",
       "dev": true,
       "requires": {
-        "eslint-utils": "^2.1.0",
         "natural-compare": "^1.4.0",
-        "semver": "^7.3.2",
-        "vue-eslint-parser": "^7.1.0"
-      },
-      "dependencies": {
-        "eslint-utils": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npm.taobao.org/eslint-utils/download/eslint-utils-2.1.0.tgz",
-          "integrity": "sha1-0t5eA0JOcH3BDHQGjd7a5wh0Gyc=",
-          "dev": true,
-          "requires": {
-            "eslint-visitor-keys": "^1.1.0"
-          }
-        },
-        "semver": {
-          "version": "7.3.2",
-          "resolved": "https://registry.npm.taobao.org/semver/download/semver-7.3.2.tgz?cache=0&sync_timestamp=1589682805026&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-7.3.2.tgz",
-          "integrity": "sha1-YElisFK4HtB4aq6EOJ/7pw/9OTg=",
-          "dev": true
-        }
+        "semver": "^5.6.0",
+        "vue-eslint-parser": "^7.0.0"
       }
     },
     "eslint-scope": {
@@ -5066,11 +4954,6 @@
       "integrity": "sha1-OYrT88WiSUi+dyXoPRGn3ijNvR0=",
       "dev": true
     },
-    "estree-walker": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npm.taobao.org/estree-walker/download/estree-walker-2.0.1.tgz",
-      "integrity": "sha1-+OAw+yHO+hg7RLetUWt0dDTno+A="
-    },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npm.taobao.org/esutils/download/esutils-2.0.3.tgz?cache=0&sync_timestamp=1589682816934&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fesutils%2Fdownload%2Fesutils-2.0.3.tgz",
@@ -5696,15 +5579,6 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
-    "generic-names": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npm.taobao.org/generic-names/download/generic-names-2.0.1.tgz",
-      "integrity": "sha1-+KN46tLMqno08DF7BVVIMq5BuHI=",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^1.1.0"
-      }
-    },
     "gensync": {
       "version": "1.0.0-beta.1",
       "resolved": "https://registry.npm.taobao.org/gensync/download/gensync-1.0.0-beta.1.tgz",
@@ -6224,12 +6098,6 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
-    "icss-replace-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npm.taobao.org/icss-replace-symbols/download/icss-replace-symbols-1.1.0.tgz",
-      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
-      "dev": true
-    },
     "icss-utils": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-4.1.1.tgz",
@@ -6540,7 +6408,6 @@
       "resolved": "https://registry.npm.taobao.org/is-binary-path/download/is-binary-path-2.1.0.tgz",
       "integrity": "sha1-6h9/O4DwZCNug0cPhsCcJU+0Wwk=",
       "dev": true,
-      "optional": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -7106,12 +6973,7 @@
     "lodash": {
       "version": "4.17.20",
       "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.20.tgz?cache=0&sync_timestamp=1597335994883&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.20.tgz",
-      "integrity": "sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI="
-    },
-    "lodash.camelcase": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npm.taobao.org/lodash.camelcase/download/lodash.camelcase-4.3.0.tgz",
-      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
+      "integrity": "sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI=",
       "dev": true
     },
     "lodash.defaultsdeep": {
@@ -7189,15 +7051,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "magic-string": {
-      "version": "0.25.7",
-      "resolved": "https://registry.npm.taobao.org/magic-string/download/magic-string-0.25.7.tgz",
-      "integrity": "sha1-P0l9b9NMZpxnmNy4IfLvMfVEUFE=",
-      "dev": true,
-      "requires": {
-        "sourcemap-codec": "^1.4.4"
-      }
-    },
     "make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-2.1.0.tgz",
@@ -8247,8 +8100,7 @@
       "version": "2.2.2",
       "resolved": "https://registry.npm.taobao.org/picomatch/download/picomatch-2.2.2.tgz",
       "integrity": "sha1-IfMz6ba46v8CRo9RRupAbTRfTa0=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "pify": {
       "version": "4.0.1",
@@ -8598,23 +8450,6 @@
         }
       }
     },
-    "postcss-modules": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npm.taobao.org/postcss-modules/download/postcss-modules-3.2.0.tgz?cache=0&sync_timestamp=1593589775045&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules%2Fdownload%2Fpostcss-modules-3.2.0.tgz",
-      "integrity": "sha1-HKhw0ZfNCaeWQlPhLeKqyQbJQlY=",
-      "dev": true,
-      "requires": {
-        "generic-names": "^2.0.1",
-        "icss-replace-symbols": "^1.1.0",
-        "lodash.camelcase": "^4.3.0",
-        "postcss": "^7.0.32",
-        "postcss-modules-extract-imports": "^2.0.0",
-        "postcss-modules-local-by-default": "^3.0.2",
-        "postcss-modules-scope": "^2.2.0",
-        "postcss-modules-values": "^3.0.0",
-        "string-hash": "^1.1.1"
-      }
-    },
     "postcss-modules-extract-imports": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/postcss-modules-extract-imports/download/postcss-modules-extract-imports-2.0.0.tgz",
@@ -9169,7 +9004,6 @@
       "resolved": "https://registry.npm.taobao.org/readdirp/download/readdirp-3.4.0.tgz",
       "integrity": "sha1-n9zN+ekVWAVEkiGsZF6DA6tbmto=",
       "dev": true,
-      "optional": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
@@ -9532,6 +9366,36 @@
       "integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=",
       "dev": true
     },
+    "sass": {
+      "version": "1.26.10",
+      "resolved": "https://registry.npm.taobao.org/sass/download/sass-1.26.10.tgz",
+      "integrity": "sha1-hR0SYCHNyT3svyAdHsoqIO5DR2A=",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npm.taobao.org/sass-loader/download/sass-loader-8.0.2.tgz?cache=0&sync_timestamp=1596633419455&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsass-loader%2Fdownload%2Fsass-loader-8.0.2.tgz",
+      "integrity": "sha1-3r7NjDziQ8dkVPLoKQSCFQOACQ0=",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "loader-utils": "^1.2.3",
+        "neo-async": "^2.6.1",
+        "schema-utils": "^2.6.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1589682805026&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz",
+          "integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
+          "dev": true
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz",
@@ -9750,6 +9614,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npm.taobao.org/shallow-clone/download/shallow-clone-3.0.1.tgz",
+      "integrity": "sha1-jymBrZJTH1UDWwH7IwdppA4C76M=",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/shebang-command/download/shebang-command-1.2.0.tgz",
@@ -10055,12 +9928,6 @@
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
       "dev": true
     },
-    "sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npm.taobao.org/sourcemap-codec/download/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha1-6oBL2UhXQC5pktBaOO8a41qatMQ=",
-      "dev": true
-    },
     "spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/spdx-correct/download/spdx-correct-3.1.1.tgz",
@@ -10258,12 +10125,6 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
-    "string-hash": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npm.taobao.org/string-hash/download/string-hash-1.1.3.tgz",
-      "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=",
-      "dev": true
-    },
     "string-width": {
       "version": "4.2.0",
       "resolved": "https://registry.npm.taobao.org/string-width/download/string-width-4.2.0.tgz",
@@ -10602,7 +10463,8 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/to-fast-properties/download/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+      "dev": true
     },
     "to-object-path": {
       "version": "0.3.0",
@@ -11061,14 +10923,9 @@
       "dev": true
     },
     "vue": {
-      "version": "3.0.0-rc.5",
-      "resolved": "https://registry.npm.taobao.org/vue/download/vue-3.0.0-rc.5.tgz?cache=0&sync_timestamp=1595983987853&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-3.0.0-rc.5.tgz",
-      "integrity": "sha1-lzF11FqJKzvSPvXef6pK3ZxmJ18=",
-      "requires": {
-        "@vue/compiler-dom": "3.0.0-rc.5",
-        "@vue/runtime-dom": "3.0.0-rc.5",
-        "@vue/shared": "3.0.0-rc.5"
-      }
+      "version": "2.6.11",
+      "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz?cache=0&sync_timestamp=1595983987853&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.11.tgz",
+      "integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU="
     },
     "vue-cli-plugin-vuetify": {
       "version": "2.0.7",
@@ -11240,12 +11097,37 @@
         }
       }
     },
+    "vue-template-compiler": {
+      "version": "2.6.11",
+      "resolved": "https://registry.npm.taobao.org/vue-template-compiler/download/vue-template-compiler-2.6.11.tgz",
+      "integrity": "sha1-wEcE749JixUxMAGJk+VjCdRpgIA=",
+      "dev": true,
+      "requires": {
+        "de-indent": "^1.0.2",
+        "he": "^1.1.0"
+      }
+    },
     "vue-template-es2015-compiler": {
       "version": "1.9.1",
       "resolved": "https://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vuetify": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npm.taobao.org/vuetify/download/vuetify-2.3.9.tgz",
+      "integrity": "sha1-bc0d5kfhzix8+uu3BooM+JKTYLM="
+    },
+    "vuetify-loader": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npm.taobao.org/vuetify-loader/download/vuetify-loader-1.6.0.tgz",
+      "integrity": "sha1-Bd8IBbOrL/DeGYEJ00+do/adpmc=",
+      "dev": true,
+      "requires": {
+        "file-loader": "^4.0.0",
+        "loader-utils": "^1.2.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.4",
       "resolved": "https://registry.npm.taobao.org/watchpack/download/watchpack-1.7.4.tgz?cache=0&sync_timestamp=1597081659128&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwatchpack%2Fdownload%2Fwatchpack-1.7.4.tgz",
diff --git a/web/package.json b/web/package.json
index d7e10b5..ec82f55 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "sub-store-web",
+  "name": "web",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,17 +9,21 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^3.0.0-0"
+    "vue": "^2.6.11",
+    "vuetify": "^2.2.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0-0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0-0",
-    "vue-cli-plugin-vuetify": "~2.0.7"
+    "eslint-plugin-vue": "^6.2.2",
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
+    "vue-cli-plugin-vuetify": "~2.0.7",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0"
   },
   "eslintConfig": {
     "root": true,
@@ -27,7 +31,7 @@
       "node": true
     },
     "extends": [
-      "plugin:vue/vue3-essential",
+      "plugin:vue/essential",
       "eslint:recommended"
     ],
     "parserOptions": {
diff --git a/web/public/index.html b/web/public/index.html
index 4123528..bc51465 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
   <body>
     <noscript>
diff --git a/web/src/App.vue b/web/src/App.vue
index 55df315..e1e471a 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,28 +1,60 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+  <v-app>
+    <v-app-bar
+      app
+      color="primary"
+      dark
+    >
+      <div class="d-flex align-center">
+        <v-img
+          alt="Vuetify Logo"
+          class="shrink mr-2"
+          contain
+          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
+          transition="scale-transition"
+          width="40"
+        />
+
+        <v-img
+          alt="Vuetify Name"
+          class="shrink mt-1 hidden-sm-and-down"
+          contain
+          min-width="100"
+          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
+          width="100"
+        />
+      </div>
+
+      <v-spacer></v-spacer>
+
+      <v-btn
+        href="https://github.com/vuetifyjs/vuetify/releases/latest"
+        target="_blank"
+        text
+      >
+        <span class="mr-2">Latest Release</span>
+        <v-icon>mdi-open-in-new</v-icon>
+      </v-btn>
+    </v-app-bar>
+
+    <v-main>
+      <HelloWorld/>
+    </v-main>
+  </v-app>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import HelloWorld from './components/HelloWorld';
 
 export default {
   name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+  components: {
+    HelloWorld,
+  },
+
+  data: () => ({
+    //
+  }),
+};
+</script>
diff --git a/web/src/assets/logo.svg b/web/src/assets/logo.svg
new file mode 100644
index 0000000..145b6d1
--- /dev/null
+++ b/web/src/assets/logo.svg
@@ -0,0 +1 @@
+<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/HelloWorld.vue b/web/src/components/HelloWorld.vue
index 879051a..8e95071 100644
--- a/web/src/components/HelloWorld.vue
+++ b/web/src/components/HelloWorld.vue
@@ -1,58 +1,151 @@
 <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>
+  <v-container>
+    <v-row class="text-center">
+      <v-col cols="12">
+        <v-img
+          :src="require('../assets/logo.svg')"
+          class="my-3"
+          contain
+          height="200"
+        />
+      </v-col>
+
+      <v-col class="mb-4">
+        <h1 class="display-2 font-weight-bold mb-3">
+          Welcome to Vuetify
+        </h1>
+
+        <p class="subheading font-weight-regular">
+          For help and collaboration with other Vuetify developers,
+          <br>please join our online
+          <a
+            href="https://community.vuetifyjs.com"
+            target="_blank"
+          >Discord Community</a>
+        </p>
+      </v-col>
+
+      <v-col
+        class="mb-5"
+        cols="12"
+      >
+        <h2 class="headline font-weight-bold mb-3">
+          What's next?
+        </h2>
+
+        <v-row justify="center">
+          <a
+            v-for="(next, i) in whatsNext"
+            :key="i"
+            :href="next.href"
+            class="subheading mx-3"
+            target="_blank"
+          >
+            {{ next.text }}
+          </a>
+        </v-row>
+      </v-col>
+
+      <v-col
+        class="mb-5"
+        cols="12"
+      >
+        <h2 class="headline font-weight-bold mb-3">
+          Important Links
+        </h2>
+
+        <v-row justify="center">
+          <a
+            v-for="(link, i) in importantLinks"
+            :key="i"
+            :href="link.href"
+            class="subheading mx-3"
+            target="_blank"
+          >
+            {{ link.text }}
+          </a>
+        </v-row>
+      </v-col>
+
+      <v-col
+        class="mb-5"
+        cols="12"
+      >
+        <h2 class="headline font-weight-bold mb-3">
+          Ecosystem
+        </h2>
+
+        <v-row justify="center">
+          <a
+            v-for="(eco, i) in ecosystem"
+            :key="i"
+            :href="eco.href"
+            class="subheading mx-3"
+            target="_blank"
+          >
+            {{ eco.text }}
+          </a>
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
+  export default {
+    name: 'HelloWorld',
 
-<!-- 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>
+    data: () => ({
+      ecosystem: [
+        {
+          text: 'vuetify-loader',
+          href: 'https://github.com/vuetifyjs/vuetify-loader',
+        },
+        {
+          text: 'github',
+          href: 'https://github.com/vuetifyjs/vuetify',
+        },
+        {
+          text: 'awesome-vuetify',
+          href: 'https://github.com/vuetifyjs/awesome-vuetify',
+        },
+      ],
+      importantLinks: [
+        {
+          text: 'Documentation',
+          href: 'https://vuetifyjs.com',
+        },
+        {
+          text: 'Chat',
+          href: 'https://community.vuetifyjs.com',
+        },
+        {
+          text: 'Made with Vuetify',
+          href: 'https://madewithvuejs.com/vuetify',
+        },
+        {
+          text: 'Twitter',
+          href: 'https://twitter.com/vuetifyjs',
+        },
+        {
+          text: 'Articles',
+          href: 'https://medium.com/vuetify',
+        },
+      ],
+      whatsNext: [
+        {
+          text: 'Explore components',
+          href: 'https://vuetifyjs.com/components/api-explorer',
+        },
+        {
+          text: 'Select a layout',
+          href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
+        },
+        {
+          text: 'Frequently Asked Questions',
+          href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
+        },
+      ],
+    }),
+  }
+</script>
diff --git a/web/src/main.js b/web/src/main.js
index 01433bc..a21e528 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -1,4 +1,10 @@
-import { createApp } from 'vue'
+import Vue from 'vue'
 import App from './App.vue'
+import vuetify from './plugins/vuetify';
 
-createApp(App).mount('#app')
+Vue.config.productionTip = false
+
+new Vue({
+  vuetify,
+  render: h => h(App)
+}).$mount('#app')
diff --git a/web/src/plugins/vuetify.js b/web/src/plugins/vuetify.js
new file mode 100644
index 0000000..ec46adb
--- /dev/null
+++ b/web/src/plugins/vuetify.js
@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+});
diff --git a/web/vue.config.js b/web/vue.config.js
new file mode 100644
index 0000000..ef6e86b
--- /dev/null
+++ b/web/vue.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  "transpileDependencies": [
+    "vuetify"
+  ]
+}
\ No newline at end of file