diff --git a/package-lock.json b/package-lock.json
index c47cdd3..fa7fa09 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -870,6 +870,12 @@
         "postcss": "^7.0.0"
       }
     },
+    "@mdi/font": {
+      "version": "4.1.95",
+      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-4.1.95.tgz",
+      "integrity": "sha512-/XhFVHkaBEVSaskmfhe/9sne+Sxkl8rUVdtSk5SCUAiPlFKidzYPDOWi9WGRiYYy8/OC4KuAHTRHvCNPywCxgg==",
+      "dev": true
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -2775,6 +2781,17 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -9510,6 +9527,36 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.22.10.tgz",
+      "integrity": "sha512-DUpS1tVMGCH6gr/N9cXCoemrjoNdOLhAHfQ37fJw2A5ZM4gSI9ej/8Xi95Xwus03RqZ2zdSnKZGULL7oS+jfMA==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.3.1.tgz",
+      "integrity": "sha512-tuU7+zm0pTCynKYHpdqaPpe+MMTQ76I9TPZ7i4/5dZsigE350shQWe5EZNl5dBidM49TPET75tNqRbcsUZWeNA==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "loader-utils": "^1.0.1",
+        "neo-async": "^2.5.0",
+        "pify": "^4.0.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -9724,6 +9771,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -11041,6 +11097,12 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-cli-plugin-vuetify": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-0.6.3.tgz",
+      "integrity": "sha512-bdbJcNIc8rrXX1KUiA/7H5mbq6hnjics+k0Q9qdWrX9DjXkGDd+kWhbk9pAIfAZgyHkgGxsgMXF4QhpMMYBiFg==",
+      "dev": true
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
@@ -11165,6 +11227,20 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuetify": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.0.9.tgz",
+      "integrity": "sha512-cXtsJXQT7pdkyojRkWoPi8PixQGbdUEkpWYaPamrxd33eLoOvLr7vIFN2tRERuB8nTBkgKiCHh2/ml/l0s/gDg=="
+    },
+    "vuetify-loader": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.3.0.tgz",
+      "integrity": "sha512-emKS3GWpx+0kWRHfoxpDpLR4HaXvhDn9bYNQf+IaaD5iU5S3xktDyS0egG7dp/oHLQr1U/Ui9g2ElhZUkdgRqw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.0"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/package.json b/package.json
index dea513b..e0bbe3c 100644
--- a/package.json
+++ b/package.json
@@ -9,16 +9,23 @@
   },
   "dependencies": {
     "core-js": "^2.6.5",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vuetify": "^2.0.0",
+    "lodash": "^4.17.14"
   },
   "devDependencies": {
+    "@mdi/font": "^4.1.95",
     "@vue/cli-plugin-babel": "^3.10.0",
     "@vue/cli-plugin-eslint": "^3.10.0",
     "@vue/cli-service": "^3.10.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "sass": "^1.17.4",
+    "sass-loader": "^7.1.0",
+    "vue-cli-plugin-vuetify": "^0.6.3",
+    "vue-template-compiler": "^2.6.10",
+    "vuetify-loader": "^1.2.2"
   },
   "eslintConfig": {
     "root": true,
diff --git a/public/index.html b/public/index.html
index d21d1b6..c2953fb 100644
--- a/public/index.html
+++ b/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>bbb-landing</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/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..2075a2e
Binary files /dev/null and b/public/logo.png differ
diff --git a/src/App.vue b/src/App.vue
index fcc5662..291c1eb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,21 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+  <v-app>
+    <v-content>
+      <HelloWorld/>
+    </v-content>
+  </v-app>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import HelloWorld from './components/HelloWorld';
 
 export default {
-  name: 'app',
+  name: 'App',
   components: {
-    HelloWorld
-  }
-}
+    HelloWorld,
+  },
+  data: () => ({
+    //
+  }),
+};
 </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>
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503..0000000
Binary files a/src/assets/logo.png and /dev/null differ
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
new file mode 100644
index 0000000..145b6d1
--- /dev/null
+++ b/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/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 879051a..30dab1c 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,58 +1,358 @@
 <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-app id="inspire">
+    <v-content>
+      <v-container
+              class="fill-height"
+              fluid
+      >
+        <v-row
+                align="center"
+                justify="center"
+        >
+          <v-col
+                  cols="12"
+                  sm="8"
+                  md="4"
+          >
+            <v-card class="elevation-12">
+              <v-sheet
+                      width="100%"
+                      height="200"
+                      color="primary"
+                      dark
+                      tile
+                      class="text-center pt-8"
+              >
+                <img src="/logo.png" width="100px" />
+                <div class="title">BBB-全网门槛最低合约产品</div>
+                <div class="caption">低手续费、低合约单价<br />下载即用，操作简单</div>
+              </v-sheet>
+
+              <v-card-text class="px-5 pb-0">
+                <v-form>
+                  <v-text-field
+                          :label="form_label.account_name"
+                          v-model="name"
+                          required
+                          clearable
+                          type="text"
+                          @input="onAccountNameChanged"
+                  ></v-text-field>
+
+                  <v-text-field
+                          v-model="password"
+                          :label="form_label.pwd"
+                          :rules="passwordRules"
+                          :type="showPassword?'text':'password'"
+                          @input="onPasswordChanged"
+                          clearable
+                          required
+                  >
+                    <v-icon slot="append" v-on:click="showPassword=!showPassword">mdi-eye-outline</v-icon>
+                  </v-text-field>
+                  <v-text-field
+                          id="password"
+                          :label="form_label.pwdrpt"
+                          name="passwordagain"
+                          v-model="repeatpwd"
+                          :rules="repeatpwdRules"
+                          :type="showPassword?'text':'password'"
+                          clearable
+                          required
+                  >
+                    <v-icon slot="append" v-on:click="showPassword=!showPassword">mdi-eye-outline</v-icon>
+                  </v-text-field>
+
+                  <v-text-field
+                          id="captcha"
+                          :label="form_label.captcha"
+                          name="captcha"
+                          type="text"
+                          :rules="validcodeRules"
+                          required
+                          clearable
+                  ></v-text-field>
+
+                  <v-text-field
+                          id="refer"
+                          :label="form_label.refer"
+                          name="refer"
+                          type="text"
+                          clearable
+                  ></v-text-field>
+
+                  <v-checkbox
+                          v-model="warnForgot"
+                          :rules="[v => !!v || 'You must agree to continue!']"
+                          :label="form_label.agree"
+                          required
+                  ></v-checkbox>
+
+
+                </v-form>
+              </v-card-text>
+              <v-card-actions class="pa-5">
+                <v-spacer></v-spacer>
+                <v-btn color="primary" block dark v-text="form_label.register"></v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+
+
+
+      </v-container>
+    </v-content>
+
+    <v-footer
+            color="primary"
+            padless
+    >
+      <v-row
+              justify="center"
+              no-gutters
+      >
+        <v-btn
+                v-for="link in links"
+                :key="link"
+                color="white"
+                text
+                rounded
+                class="my-2"
+        >
+          {{ link }}
+        </v-btn>
+      </v-row>
+    </v-footer>
+  </v-app>
 </template>
 
 <script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
+  import { debounce } from "lodash";
+
+  export default {
+    props: {
+      source: String,
+    },
+    data: () => ({
+      drawer:false,
+      form_label:{
+        account_name: "用户名",
+        pwd:"密码",
+        pwdrpt:"确认密码",
+        captcha: "验证码",
+        refer:"推荐人",
+        agree:"我确认已妥善备份即将创建的账户名称及其密码，并知晓一旦密码遗忘，将无法找回，也无法再次登陆账户或使用账户资金",
+        register:"注册"
+      },
+      isAccountChecked: false,
+      isAccountValid: false,
+      isAccountNew: false,
+      warnForgot: false,
+      showPassword: false,
+      generated: "",
+      name: "",
+      password: "",
+      repeatpwd: "",
+      captcha: "",
+      nameRules: [
+        // value =>
+        //         !this.isAccountValid ||
+        //         !!value ||
+        //         this.$t("validation.account_required"),
+        // value => this.checkName(value)
+      ],
+      passwordRules: [
+        // value => this.checkPassword(value) || this.$t("validation.pwd_length")
+      ],
+      repeatpwdRules: [
+        // value =>
+        //         !this.isAccountValid ||
+        //         (!!value
+        //                 ? value === this.password || this.$t("validation.pwd_unmatched")
+        //                 : this.$t("validation.pwd_repeat"))
+      ],
+      validcodeRules: [
+        // value =>
+        //         !this.isAccountValid ||
+        //         (!!value || this.$t("validation.validcode_required"))
+      ],
+      inRegister: false,
+      links: [
+        '赛贝交易所',
+        '联系我们',
+        '帮助与反馈',
+      ],
+    }),
+    methods: {
+      onPasswordChanged() {
+        this.$refs.form.validate();
+      },
+      onAccountNameChanged: debounce(async function() {
+        if (!this.name) return;
+        this.isAccountChecked = false;
+        this.name = (this.name || "").slice(0, 64);
+        try {
+          this.isAccountNew = !(await this.$call(
+                  this.cybexjs.get_user,
+                  this.name
+          ));
+          this.isAccountChecked = true;
+          this.$refs.form.validate();
+        } catch (e) {
+          this.isAccountNew = true;
+          this.isAccountChecked = true;
+          this.$refs.form.validate();
+        }
+      }, 200),
+      checkPassword(value, returnBool) {
+        if (!this.isAccountValid) {
+          return true;
+        }
+        const checkLen = this.isCloudMode ? 12 : 8;
+        if (!this.checkPasswordLength(value, checkLen)) {
+          return returnBool ? false : this.$t("validation.pwd_too_short", {len: checkLen});
+        }
+        const validReg = this.isCloudMode ? this.checkPasswordComplex(value) : this.checkPasswordComplexSimpler(value);
+        const invalidRegStr = this.isCloudMode ? this.$t("validation.pwd_number") : this.$t("validation.pwd_number_simple");
+        if (!validReg) {
+          return returnBool ? false : invalidRegStr;
+        }
+        if (!/^[ -~]+$/g.test(value)) {
+          return returnBool ? false : this.$t("validation.pwd_wrong");
+        }
+        return true;
+      },
+      // async createAccount() {
+      //   const failDeal = () => {
+      //     ga("send", {
+      //       hitType: "event",
+      //       eventCategory: "unique",
+      //       eventAction: "REGISTER_FAILED",
+      //       eventLabel: this.name
+      //     });
+      //     try {
+      //       (window._czc|| []).push(["_trackEvent", "unique", "REGISTER_FAILED", this.name]);
+      //     } catch (e) {
+      //       console.log(e)
+      //     }
+      //     this.captcha = "";
+      //     this.refreshCaptch(true);
+      //   };
+      //   if (this.$refs.form.validate()) {
+      //     let isReg = false;
+      //     this.inRegister = true;
+      //     await this.$eventHandle(async () => {
+      //       this.$store
+      //               .dispatch("auth/register", {
+      //                 mode: this.registerMode,
+      //                 username: this.name,
+      //                 password: this.password,
+      //                 codeId: this.verifyCode.id,
+      //                 code: this.captcha
+      //               })
+      //               .then(res => {
+      //                 if (res) {
+      //                   if (this.isCloudMode) {
+      //                     try {
+      //                       ga("send", {
+      //                         hitType: "event",
+      //                         eventCategory: "unique",
+      //                         eventAction: "REGISTER_DONE:CLOUD",
+      //                         eventLabel: this.name
+      //                       });
+      //                       (window._czc|| []).push(["_trackEvent", "unique", "REGISTER_DONE:CLOUD", this.name]);
+      //                       ga("send", {
+      //                         hitType: "event",
+      //                         eventCategory: "unique",
+      //                         eventAction: "LOGIN_DONE:CLOUD",
+      //                         eventLabel: this.name
+      //                       });
+      //                       (window._czc|| []).push(["_trackEvent", "unique", "LOGIN_DONE:CLOUD", this.name]);
+      //                     } catch (e) {
+      //                       console.log(e)
+      //                     }
+      //                     this.$i18n.jumpTo("/register/guide");
+      //                   } else {
+      //                     try {
+      //                       ga("send", {
+      //                         hitType: "event",
+      //                         eventCategory: "unique",
+      //                         eventAction: "REGISTER_DONE:BIN",
+      //                         eventLabel: this.name
+      //                       });
+      //                       (window._czc|| []).push(["_trackEvent", "unique", "REGISTER_DONE:BIN", this.name]);
+      //                     } catch (e) {
+      //                       console.log(e)
+      //                     }
+      //                     this.$router.push(
+      //                             this.$i18n.path("/settings/backup?register=true")
+      //                     );
+      //                   }
+      //                 } else {
+      //                   failDeal();
+      //                 }
+      //               })
+      //               .catch(e => {
+      //                 console.error(e);
+      //                 failDeal();
+      //               })
+      //               .finally(() => {
+      //                 this.inRegister = false;
+      //               });
+      //     });
+      //   }
+      // },
+      checkName(value, returnBool) {
+        let msg = "";
+        if (/([^a-z0-9\-])/g.test(value)) {
+          msg = this.$t("validation.account_no_sign");
+        }
+        if (!/^([a-z])/g.test(value)) {
+          msg = this.$t("validation.account_alpha");
+        }
+        if (
+                !value ||
+                (value && value.length < 3) ||
+                (value && value.length > 64)
+        ) {
+          if (value && value.length > 64) {
+            msg = this.$t("validation.account_too_long");
+          } else {
+            msg = this.$t("validation.account_too_short");
+          }
+        }
+        if (!/[0-9\-]+.*$/g.test(value)) {
+          msg = this.$t("validation.account_slash");
+        }
+        if (!/^((?!\-\-).)*$/g.test(value)) {
+          msg = this.$t("validation.account_slash_limit");
+        }
+        if (!/([a-z0-9])$/g.test(value)) {
+          msg = this.$t("validation.account_number");
+        }
+        if (this.isAccountChecked && !this.isAccountNew) {
+          msg = this.$t("validation.account_exists");
+        }
+        if (msg) {
+          this.isAccountValid = false;
+          return returnBool ? false : msg;
+        } else {
+          this.isAccountValid = this.isAccountNew;
+        }
+        return true;
+      },
+      async refreshCaptch() {
+        if (this.autoRefresh) {
+          clearTimeout(this.autoRefresh);
+          this.autoRefresh = null;
+        }
+        this.autoRefresh = setTimeout(() => {
+          this.refreshCaptch();
+        }, 1.5 * 60 * 1000);
+        let s = await this.$callmsg(this.cybexjs.verify_code);
+        this.verifyCode = s;
+      }
+    },
   }
-}
 </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/main.js b/src/main.js
index 63eb05f..a21e528 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
+import vuetify from './plugins/vuetify';
 
 Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App),
+  vuetify,
+  render: h => h(App)
 }).$mount('#app')
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
new file mode 100644
index 0000000..d1adb68
--- /dev/null
+++ b/src/plugins/vuetify.js
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
+
+import colors from 'vuetify/lib/util/colors'
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+  theme: {
+    themes: {
+      light: {
+        primary: "#c62c43", // #c62c43
+        secondary: colors.red.darken2, // #FFCDD2
+        accent: colors.red.lighten1, // #3F51B5
+      },
+    },
+  },
+  icons: {
+    iconfont: 'mdi',
+  },
+});