diff --git a/.stylelintrc.json b/.stylelintrc.json
index a7ae2ac..45d2b17 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,3 +1,7 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-recommended-vue"]
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-standard-scss",
+    "stylelint-config-recommended-vue"
+  ]
 }
diff --git a/env.d.ts b/env.d.ts
index e69de29..0e9b1db 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite-svg-loader" />
diff --git a/package.json b/package.json
index c732015..222ca3f 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@fontsource-variable/noto-sans-sc": "^5.0.3",
+    "@material-design-icons/svg": "^0.14.13",
     "@tauri-apps/api": "^1.5.1",
     "vue": "^3.3.8",
     "vuetify": "^3.3.23"
@@ -41,6 +43,7 @@
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
     "vite-plugin-vuetify": "^1.0.2",
+    "vite-svg-loader": "^4.0.0",
     "vue-tsc": "^1.8.22"
   },
   "browserslist": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index df49435..bd9052b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,12 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@fontsource-variable/noto-sans-sc':
+    specifier: ^5.0.3
+    version: 5.0.3
+  '@material-design-icons/svg':
+    specifier: ^0.14.13
+    version: 0.14.13
   '@tauri-apps/api':
     specifier: ^1.5.1
     version: 1.5.1
@@ -64,6 +70,9 @@ devDependencies:
   prettier:
     specifier: ^3.0.3
     version: 3.0.3
+  sass:
+    specifier: ^1.69.5
+    version: 1.69.5
   stylelint:
     specifier: ^15.11.0
     version: 15.11.0(typescript@5.2.2)
@@ -73,15 +82,21 @@ devDependencies:
   stylelint-config-standard:
     specifier: ^34.0.0
     version: 34.0.0(stylelint@15.11.0)
+  stylelint-config-standard-scss:
+    specifier: ^11.1.0
+    version: 11.1.0(postcss@8.4.31)(stylelint@15.11.0)
   typescript:
     specifier: ^5.2.2
     version: 5.2.2
   vite:
     specifier: ^4.5.0
-    version: 4.5.0(@types/node@20.9.0)
+    version: 4.5.0(@types/node@20.9.0)(sass@1.69.5)
   vite-plugin-vuetify:
     specifier: ^1.0.2
     version: 1.0.2(vite@4.5.0)(vue@3.3.8)(vuetify@3.3.23)
+  vite-svg-loader:
+    specifier: ^4.0.0
+    version: 4.0.0
   vue-tsc:
     specifier: ^1.8.22
     version: 1.8.22(typescript@5.2.2)
@@ -729,6 +744,10 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@fontsource-variable/noto-sans-sc@5.0.3:
+    resolution: {integrity: sha512-q0JNlXUyqUNzcNEn1wUtUl/8VZ2JmpdQYdh0ImtNRDQskWF4EldBTO3MdFZHUs/JJtnOQ/zZoFjfAOuXisYeKw==}
+    dev: false
+
   /@fontsource/roboto@5.0.8:
     resolution: {integrity: sha512-XxPltXs5R31D6UZeLIV1td3wTXU3jzd3f2DLsXI8tytMGBkIsGcc9sIyiupRtA8y73HAhuSCeweOoBqf6DbWCA==}
     dev: true
@@ -756,6 +775,10 @@ packages:
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 
+  /@material-design-icons/svg@0.14.13:
+    resolution: {integrity: sha512-nCExGZOtoLoFeeqShEOM4XA9DkkLzLlQdk/ZxHxps0//dz6e1Lw3fvQbZ2X/+0Dz2O+udiEukfZ4Nd4KpHg8aA==}
+    dev: false
+
   /@mdi/js@7.3.67:
     resolution: {integrity: sha512-MnRjknFqpTC6FifhGHjZ0+QYq2bAkZFQqIj8JA2AdPZbBxUvr8QSgB2yPAJ8/ob/XkR41xlg5majDR3c1JP1hw==}
     dev: true
@@ -909,6 +932,11 @@ packages:
       '@tauri-apps/cli-win32-x64-msvc': 1.5.6
     dev: true
 
+  /@trysound/sax@0.2.0:
+    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
+    engines: {node: '>=10.13.0'}
+    dev: true
+
   /@types/json-schema@7.0.15:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
@@ -1072,7 +1100,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.5.0(@types/node@20.9.0)
+      vite: 4.5.0(@types/node@20.9.0)(sass@1.69.5)
       vue: 3.3.8(typescript@5.2.2)
     dev: true
 
@@ -1293,6 +1321,13 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
@@ -1341,6 +1376,10 @@ packages:
     engines: {node: '>=0.6'}
     dev: true
 
+  /binary-extensions@2.2.0:
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+    engines: {node: '>=8'}
+
   /boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
     dev: true
@@ -1370,7 +1409,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       fill-range: 7.0.1
-    dev: true
 
   /browserslist@4.22.1:
     resolution: {integrity: sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==}
@@ -1431,6 +1469,20 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /chokidar@3.5.3:
+    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -1456,6 +1508,11 @@ packages:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
     dev: true
 
+  /commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+    dev: true
+
   /commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
@@ -1528,6 +1585,24 @@ packages:
       postcss: 8.4.31
     dev: true
 
+  /css-select@5.1.0:
+    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.1.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      nth-check: 2.1.1
+    dev: true
+
+  /css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.0.2
+    dev: true
+
   /css-tree@2.3.1:
     resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
@@ -1536,6 +1611,11 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /css-what@6.1.0:
+    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
+    engines: {node: '>= 6'}
+    dev: true
+
   /cssdb@7.9.0:
     resolution: {integrity: sha512-WPMT9seTQq6fPAa1yN4zjgZZeoTriSN2LqW9C+otjar12DQIWA4LuSfFrvFJiKp4oD0xIk1vumDLw8K9ur4NBw==}
     dev: true
@@ -1546,6 +1626,13 @@ packages:
     hasBin: true
     dev: true
 
+  /csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+    dependencies:
+      css-tree: 2.2.1
+    dev: true
+
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
@@ -1944,7 +2031,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       to-regex-range: 5.0.1
-    dev: true
 
   /find-cache-dir@3.3.2:
     resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
@@ -2011,7 +2097,6 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob-parent@6.0.2:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
@@ -2144,6 +2229,9 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /immutable@4.3.4:
+    resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
+
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -2186,6 +2274,12 @@ packages:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
     dev: true
 
+  /is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.2.0
+
   /is-core-module@2.13.1:
     resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
     dependencies:
@@ -2207,7 +2301,6 @@ packages:
   /is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
@@ -2219,7 +2312,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-extglob: 2.1.1
-    dev: true
 
   /is-inside-container@1.0.0:
     resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
@@ -2232,7 +2324,6 @@ packages:
   /is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
-    dev: true
 
   /is-path-inside@3.0.3:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
@@ -2405,6 +2496,10 @@ packages:
     resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
     dev: true
 
+  /mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+    dev: true
+
   /mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
     dev: true
@@ -2529,7 +2624,6 @@ packages:
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /normalize-range@0.1.2:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
@@ -2704,7 +2798,6 @@ packages:
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
-    dev: true
 
   /pidtree@0.6.0:
     resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
@@ -2909,6 +3002,10 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-media-query-parser@0.2.3:
+    resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
+    dev: true
+
   /postcss-nesting@12.0.1(postcss@8.4.31):
     resolution: {integrity: sha512-6LCqCWP9pqwXw/njMvNK0hGY44Fxc4B2EsGbn6xDcxbNRzP8GYoxT7yabVVMLrX3quqOJ9hg2jYMsnkedOf8pA==}
     engines: {node: ^14 || ^16 || >=18}
@@ -3057,6 +3154,15 @@ packages:
       postcss: 8.4.31
     dev: true
 
+  /postcss-scss@4.0.9(postcss@8.4.31):
+    resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.4.29
+    dependencies:
+      postcss: 8.4.31
+    dev: true
+
   /postcss-selector-not@7.0.1(postcss@8.4.31):
     resolution: {integrity: sha512-1zT5C27b/zeJhchN7fP0kBr16Cc61mu7Si9uWWLoA3Px/D9tIJPKchJCkUH3tPO5D0pCFmGeApAv8XpXBQJ8SQ==}
     engines: {node: ^14 || ^16 || >=18}
@@ -3148,6 +3254,12 @@ packages:
       type-fest: 4.7.0
     dev: true
 
+  /readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+
   /redent@4.0.0:
     resolution: {integrity: sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==}
     engines: {node: '>=12'}
@@ -3203,6 +3315,15 @@ packages:
       queue-microtask: 1.2.3
     dev: true
 
+  /sass@1.69.5:
+    resolution: {integrity: sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.4
+      source-map-js: 1.0.2
+
   /semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -3333,6 +3454,22 @@ packages:
       stylelint: 15.11.0(typescript@5.2.2)
     dev: true
 
+  /stylelint-config-recommended-scss@13.1.0(postcss@8.4.31)(stylelint@15.11.0):
+    resolution: {integrity: sha512-8L5nDfd+YH6AOoBGKmhH8pLWF1dpfY816JtGMePcBqqSsLU+Ysawx44fQSlMOJ2xTfI9yTGpup5JU77c17w1Ww==}
+    peerDependencies:
+      postcss: ^8.3.3
+      stylelint: ^15.10.0
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+    dependencies:
+      postcss: 8.4.31
+      postcss-scss: 4.0.9(postcss@8.4.31)
+      stylelint: 15.11.0(typescript@5.2.2)
+      stylelint-config-recommended: 13.0.0(stylelint@15.11.0)
+      stylelint-scss: 5.3.1(stylelint@15.11.0)
+    dev: true
+
   /stylelint-config-recommended-vue@1.5.0(postcss-html@1.5.0)(stylelint@15.11.0):
     resolution: {integrity: sha512-65TAK/clUqkNtkZLcuytoxU0URQYlml+30Nhop7sRkCZ/mtWdXt7T+spPSB3KMKlb+82aEVJ4OrcstyDBdbosg==}
     engines: {node: ^12 || >=14}
@@ -3356,6 +3493,21 @@ packages:
       stylelint: 15.11.0(typescript@5.2.2)
     dev: true
 
+  /stylelint-config-standard-scss@11.1.0(postcss@8.4.31)(stylelint@15.11.0):
+    resolution: {integrity: sha512-5gnBgeNTgRVdchMwiFQPuBOtj9QefYtfXiddrOMJA2pI22zxt6ddI2s+e5Oh7/6QYl7QLJujGnaUR5YyGq72ow==}
+    peerDependencies:
+      postcss: ^8.3.3
+      stylelint: ^15.10.0
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+    dependencies:
+      postcss: 8.4.31
+      stylelint: 15.11.0(typescript@5.2.2)
+      stylelint-config-recommended-scss: 13.1.0(postcss@8.4.31)(stylelint@15.11.0)
+      stylelint-config-standard: 34.0.0(stylelint@15.11.0)
+    dev: true
+
   /stylelint-config-standard@34.0.0(stylelint@15.11.0):
     resolution: {integrity: sha512-u0VSZnVyW9VSryBG2LSO+OQTjN7zF9XJaAJRX/4EwkmU0R2jYwmBSN10acqZisDitS0CLiEiGjX7+Hrq8TAhfQ==}
     engines: {node: ^14.13.1 || >=16.0.0}
@@ -3366,6 +3518,19 @@ packages:
       stylelint-config-recommended: 13.0.0(stylelint@15.11.0)
     dev: true
 
+  /stylelint-scss@5.3.1(stylelint@15.11.0):
+    resolution: {integrity: sha512-5I9ZDIm77BZrjOccma5WyW2nJEKjXDd4Ca8Kk+oBapSO4pewSlno3n+OyimcyVJJujQZkBN2D+xuMkIamSc6hA==}
+    peerDependencies:
+      stylelint: ^14.5.1 || ^15.0.0
+    dependencies:
+      known-css-properties: 0.29.0
+      postcss-media-query-parser: 0.2.3
+      postcss-resolve-nested-selector: 0.1.1
+      postcss-selector-parser: 6.0.13
+      postcss-value-parser: 4.2.0
+      stylelint: 15.11.0(typescript@5.2.2)
+    dev: true
+
   /stylelint@15.11.0(typescript@5.2.2):
     resolution: {integrity: sha512-78O4c6IswZ9TzpcIiQJIN49K3qNoXTM8zEJzhaTE/xRTCZswaovSEVIa/uwbOltZrk16X4jAxjaOhzz/hTm1Kw==}
     engines: {node: ^14.13.1 || >=16.0.0}
@@ -3442,6 +3607,19 @@ packages:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
     dev: true
 
+  /svgo@3.0.3:
+    resolution: {integrity: sha512-X4UZvLhOglD5Xrp834HzGHf8RKUW0Ahigg/08yRO1no9t2NxffOkMiQ0WmaMIbaGlVTlSst2zWANsdhz5ybXgA==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      '@trysound/sax': 0.2.0
+      commander: 7.2.0
+      css-select: 5.1.0
+      css-tree: 2.3.1
+      csso: 5.0.5
+      picocolors: 1.0.0
+    dev: true
+
   /synckit@0.8.5:
     resolution: {integrity: sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -3479,7 +3657,6 @@ packages:
     engines: {node: '>=8.0'}
     dependencies:
       is-number: 7.0.0
-    dev: true
 
   /trim-newlines@4.1.1:
     resolution: {integrity: sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==}
@@ -3581,13 +3758,20 @@ packages:
       '@vuetify/loader-shared': 1.7.1(vue@3.3.8)(vuetify@3.3.23)
       debug: 4.3.4
       upath: 2.0.1
-      vite: 4.5.0(@types/node@20.9.0)
+      vite: 4.5.0(@types/node@20.9.0)(sass@1.69.5)
       vuetify: 3.3.23(typescript@5.2.2)(vite-plugin-vuetify@1.0.2)(vue@3.3.8)
     transitivePeerDependencies:
       - supports-color
       - vue
 
-  /vite@4.5.0(@types/node@20.9.0):
+  /vite-svg-loader@4.0.0:
+    resolution: {integrity: sha512-0MMf1yzzSYlV4MGePsLVAOqXsbF5IVxbn4EEzqRnWxTQl8BJg/cfwIzfQNmNQxZp5XXwd4kyRKF1LytuHZTnqA==}
+    dependencies:
+      '@vue/compiler-sfc': 3.3.8
+      svgo: 3.0.3
+    dev: true
+
+  /vite@4.5.0(@types/node@20.9.0)(sass@1.69.5):
     resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -3619,6 +3803,7 @@ packages:
       esbuild: 0.18.20
       postcss: 8.4.31
       rollup: 3.29.4
+      sass: 1.69.5
     optionalDependencies:
       fsevents: 2.3.3
 
diff --git a/src/App.vue b/src/App.vue
index c94a36f..896cf52 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import FileSelector from "@/components/FileSelector.vue";
 import {
-  VContainer,
   VTab,
   VTabs,
   VToolbar,
@@ -10,6 +8,9 @@ import {
   VWindowItem,
 } from "vuetify/components";
 import { mdiFileKey, mdiFileCheck, mdiKeyChain } from "@mdi/js";
+import SignView from "./views/SignView.vue";
+import ValidateView from "./views/ValidateView.vue";
+import KeygenView from "./views/KeygenView.vue";
 
 const enum Tab {
   sign,
@@ -18,8 +19,6 @@ const enum Tab {
 }
 
 const tab = ref(Tab.sign);
-
-const file = ref<string>();
 </script>
 
 <template>
@@ -35,31 +34,13 @@ const file = ref<string>();
 
   <VWindow v-model="tab">
     <VWindowItem :value="Tab.sign">
-      <VContainer fluid>
-        <div class="text-h1 pa-2">Sign</div>
-        <FileSelector v-model="file" />
-        <div v-if="file">
-          {{ file }}
-        </div>
-      </VContainer>
+      <SignView />
     </VWindowItem>
     <VWindowItem :value="Tab.validate">
-      <VContainer fluid>
-        <h1>Validate</h1>
-        <FileSelector v-model="file" />
-        <div v-if="file">
-          {{ file }}
-        </div>
-      </VContainer>
+      <ValidateView />
     </VWindowItem>
     <VWindowItem :value="Tab.keygen">
-      <VContainer fluid>
-        <h1>Keygen</h1>
-        <FileSelector v-model="file" />
-        <div v-if="file">
-          {{ file }}
-        </div>
-      </VContainer>
+      <KeygenView />
     </VWindowItem>
   </VWindow>
 </template>
diff --git a/src/components/FileSelector.vue b/src/components/FileSelector.vue
index 7607d6f..7dd08fe 100644
--- a/src/components/FileSelector.vue
+++ b/src/components/FileSelector.vue
@@ -3,8 +3,9 @@ import { computed, onMounted, onUnmounted, ref } from "vue";
 import { message, open } from "@tauri-apps/api/dialog";
 import { listen, TauriEvent, type UnlistenFn } from "@tauri-apps/api/event";
 
-import { VBtn, VIcon } from "vuetify/components";
+import { VBtn, VCard, VDialog, VImg } from "vuetify/components";
 import { mdiFolderOpen } from "@mdi/js";
+import UploadFile from "@material-design-icons/svg/two-tone/upload_file.svg?url";
 
 const props = defineProps<{ modelValue: string | undefined }>();
 
@@ -16,7 +17,7 @@ const files = computed<string | undefined>({
   get: () => props.modelValue,
   set: (value) => {
     emits("update:modelValue", value);
-  }
+  },
 });
 
 const SelectFile = async () => {
@@ -24,7 +25,7 @@ const SelectFile = async () => {
   files.value = selected ?? undefined;
 };
 
-const hover = ref(0);
+const hover = ref(false);
 
 let unlistenFileDrop: UnlistenFn | undefined;
 let unlistenFileDropHover: UnlistenFn | undefined;
@@ -38,30 +39,32 @@ onMounted(async () => {
       console.log(e.payload);
       if (e.payload.length > 1) {
         await message(
-          `You can only drop one file here.\nYou have selected: ${JSON.stringify(e.payload)}`
+          `You can only drop one file here.\nYou have selected: ${JSON.stringify(
+            e.payload,
+          )}`,
         );
         return;
       }
       files.value = e.payload[0];
-      hover.value = 0;
-    }
+      hover.value = false;
+    },
   );
   unlistenFileDropHover = await listen<string[]>(
     TauriEvent.WINDOW_FILE_DROP_HOVER,
     (e) => {
       console.log(e.payload);
-      hover.value = e.payload.length;
-    }
+      hover.value = true;
+    },
   );
   unlistenFileDropCanceled = await listen<void>(
     TauriEvent.WINDOW_FILE_DROP_CANCELLED,
     () => {
-      hover.value = 0;
-    }
+      hover.value = false;
+    },
   );
   unlistenBlur = await listen<void>(TauriEvent.WINDOW_BLUR, () => {
     console.log("Blur");
-    hover.value = 0;
+    hover.value = false;
   });
 });
 
@@ -70,7 +73,7 @@ onUnmounted(() => {
     unlistenFileDrop,
     unlistenFileDropHover,
     unlistenFileDropCanceled,
-    unlistenBlur
+    unlistenBlur,
   ].forEach((unlisten) => {
     if (unlisten) {
       unlisten();
@@ -79,15 +82,16 @@ onUnmounted(() => {
 });
 </script>
 <template>
-  <VBtn @click="SelectFile">
-    <VIcon :icon="mdiFolderOpen" />
-    选择文件
-  </VBtn>
-  <Teleport v-if="hover" to="body">
-    <div class="hover-indication">
-      <div class="hover-indication-box">{{ hover }} file(s) hovering.</div>
-    </div>
-  </Teleport>
+  <VBtn :prepend-icon="mdiFolderOpen" @click="SelectFile"> 选择文件 </VBtn>
+  <VDialog v-model="hover" height="100%">
+    <VCard class="hover-indication-box">
+      <VImg :src="UploadFile" class="hover-indication-icon" />
+      <div class="hover-indication-text text-blue-darken-3 mt-3">
+        拖拽至此处
+      </div>
+    </VCard>
+  </VDialog>
+  <!-- </Teleport> -->
 </template>
 <style scoped>
 .hover-indication {
@@ -101,11 +105,21 @@ onUnmounted(() => {
 }
 
 .hover-indication-box {
-  color: red;
-  border-radius: 1rem;
-  border: 5px red dashed;
-  margin: 1rem;
-  height: calc(100% - 2rem);
-  width: calc(100% - 2rem);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
+.hover-indication-icon {
+  height: 5em;
+  width: 5em;
+  flex-grow: initial;
+}
+
+.hover-indication-text {
+  font-size: 2em;
 }
 </style>
diff --git a/src/views/KeygenView.vue b/src/views/KeygenView.vue
new file mode 100644
index 0000000..74238f8
--- /dev/null
+++ b/src/views/KeygenView.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import FileSelector from "@/components/FileSelector.vue";
+import { VContainer } from "vuetify/components";
+const file = ref<string>();
+</script>
+
+<template>
+  <VContainer fluid>
+    <h1 class="h1 pa-2">密钥管理</h1>
+    <FileSelector v-model="file" />
+    <div v-if="file">
+      {{ file }}
+    </div>
+  </VContainer>
+</template>
+<style scoped>
+.h1 {
+  font-size: 6rem;
+  font-weight: 300;
+  line-height: 6rem;
+  letter-spacing: -0.0156em;
+  font-family: Roboto, sans-serif;
+  text-transform: none;
+}
+</style>
diff --git a/src/views/SignView.vue b/src/views/SignView.vue
new file mode 100644
index 0000000..e15eaab
--- /dev/null
+++ b/src/views/SignView.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import FileSelector from "@/components/FileSelector.vue";
+import { VContainer } from "vuetify/components";
+const file = ref<string>();
+</script>
+
+<template>
+  <VContainer fluid>
+    <h1 class="text-h1 pa-2">签名</h1>
+    <FileSelector v-model="file" />
+    <div v-if="file">
+      {{ file }}
+    </div>
+  </VContainer>
+</template>
diff --git a/src/views/ValidateView.vue b/src/views/ValidateView.vue
new file mode 100644
index 0000000..baccad0
--- /dev/null
+++ b/src/views/ValidateView.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import FileSelector from "@/components/FileSelector.vue";
+import { VContainer } from "vuetify/components";
+const file = ref<string>();
+</script>
+
+<template>
+  <VContainer fluid>
+    <h1 class="text-h1 pa-2">校验</h1>
+    <FileSelector v-model="file" />
+    <div v-if="file">
+      {{ file }}
+    </div>
+  </VContainer>
+</template>
diff --git a/vite.config.ts b/vite.config.ts
index 5f0bd80..118ccb9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,10 +4,11 @@ import postcssPresetEnv from "postcss-preset-env";
 import autoPrefixer from "autoprefixer";
 import { fileURLToPath, URL } from "node:url";
 import vuetify from "vite-plugin-vuetify";
+import svgLoader from "vite-svg-loader";
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
-  plugins: [vue(), vuetify()],
+  plugins: [vue(), svgLoader(), vuetify()],
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //