diff --git a/.github/workflows/build_dockerhub_img.yml b/.github/workflows/build_dockerhub_img.yml
index 6d6da726..75ea31b5 100644
--- a/.github/workflows/build_dockerhub_img.yml
+++ b/.github/workflows/build_dockerhub_img.yml
@@ -17,6 +17,9 @@ jobs:
     - name: Checkout
       uses: actions/checkout@v3
 
+    - name: Set up QEMU
+      uses: docker/setup-qemu-action@v2
+
     - name: Set up Docker Buildx
       uses: docker/setup-buildx-action@v2
       with:
diff --git a/Dockerfile b/Dockerfile
index ac06839a..c1bd53ba 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:16 AS node-builder
+FROM amd64/node AS node-builder
 
 LABEL maintainer="mingcheng<mc@sf.com>"
 
diff --git a/i18n/en_US.yaml b/i18n/en_US.yaml
index c89a01ce..acc7b697 100644
--- a/i18n/en_US.yaml
+++ b/i18n/en_US.yaml
@@ -235,7 +235,7 @@ ui:
     show_more: Show more
   suspended:
     title: Your Account has been Suspended
-    until_time: 'Your account was suspended until {{ time }}.'
+    until_time: "Your account was suspended until {{ time }}."
     forever: This user was suspended forever.
     end: You don't meet a community guideline.
   editor:
@@ -420,12 +420,12 @@ ui:
     btn_cancel: Cancel
   dates:
     long_date: MMM D
-    long_date_with_year: 'MMM D, YYYY'
-    long_date_with_time: 'MMM D, YYYY [at] HH:mm'
+    long_date_with_year: "MMM D, YYYY"
+    long_date_with_time: "MMM D, YYYY [at] HH:mm"
     now: now
-    x_seconds_ago: '{{count}}s ago'
-    x_minutes_ago: '{{count}}m ago'
-    x_hours_ago: '{{count}}h ago'
+    x_seconds_ago: "{{count}}s ago"
+    x_minutes_ago: "{{count}}m ago"
+    x_hours_ago: "{{count}}h ago"
     hour: hour
     day: day
   comment:
@@ -507,7 +507,7 @@ ui:
     add_btn: Add tag
     create_btn: Create new tag
     search_tag: Search tag
-    hint: 'Describe what your question is about, at least one tag is required.'
+    hint: "Describe what your question is about, at least one tag is required."
     no_result: No tags matched
   header:
     nav:
@@ -536,7 +536,7 @@ ui:
     first: >-
       You're almost done! We sent an activation mail to <bold>{{mail}}</bold>.
       Please follow the instructions in the mail to activate your account.
-    info: 'If it doesn''t arrive, check your spam folder.'
+    info: "If it doesn't arrive, check your spam folder."
     another: >-
       We sent another activation email to you at <bold>{{mail}}</bold>. It might
       take a few minutes for it to arrive; be sure to check your spam folder.
@@ -548,6 +548,7 @@ ui:
     page_title: Welcome to Answer
     info_sign: Don't have an account? <1>Sign up</1>
     info_login: Already have an account? <1>Log in</1>
+    agreements: By registering, you agree to the <1>privacy policy</1> and <3>terms of service</3>.
     forgot_pass: Forgot password?
     name:
       label: Name
@@ -634,15 +635,15 @@ ui:
         label: About Me (optional)
       website:
         label: Website (optional)
-        placeholder: 'https://example.com'
+        placeholder: "https://example.com"
         msg: Website incorrect format
       location:
         label: Location (optional)
-        placeholder: 'City, Country'
+        placeholder: "City, Country"
     notification:
       email:
         label: Email Notifications
-        radio: 'Answers to your questions, comments, and more'
+        radio: "Answers to your questions, comments, and more"
     account:
       change_email_btn: Change email
       change_pass_btn: Change password
@@ -732,7 +733,7 @@ ui:
     options: Options
     follow: Follow
     following: Following
-    counts: '{{count}} Results'
+    counts: "{{count}} Results"
     more: More
     sort_btns:
       relevance: Relevance
@@ -742,12 +743,12 @@ ui:
       more: More
     tips:
       title: Advanced Search Tips
-      tag: '<1>[tag]</1> search withing a tag'
-      user: '<1>user:username</1> search by author'
-      answer: '<1>answers:0</1> unanswered questions'
-      score: '<1>score:3</1> posts with a 3+ score'
-      question: '<1>is:question</1> search questions'
-      is_answer: '<1>is:answer</1> search answers'
+      tag: "<1>[tag]</1> search withing a tag"
+      user: "<1>user:username</1> search by author"
+      answer: "<1>answers:0</1> unanswered questions"
+      score: "<1>score:3</1> posts with a 3+ score"
+      question: "<1>is:question</1> search questions"
+      is_answer: "<1>is:answer</1> search answers"
     empty: We couldn't find anything. <br /> Try different or less specific keywords.
   share:
     name: Share
@@ -777,8 +778,8 @@ ui:
     follow_tag_tip: Follow tags to curate your list of questions.
     hot_questions: Hot Questions
     all_questions: All Questions
-    x_questions: '{{ count }} Questions'
-    x_answers: '{{ count }} answers'
+    x_questions: "{{ count }} Questions"
+    x_answers: "{{ count }} answers"
     questions: Questions
     answers: Answers
     newest: Newest
@@ -805,12 +806,12 @@ ui:
     newest: Newest
     score: Score
     edit_profile: Edit Profile
-    visited_x_days: 'Visited {{ count }} days'
+    visited_x_days: "Visited {{ count }} days"
     viewed: Viewed
     joined: Joined
     last_login: Seen
     about_me: About Me
-    about_me_empty: '// Hello, World !'
+    about_me_empty: "// Hello, World !"
     top_answers: Top Answers
     top_questions: Top Questions
     stats: Stats
@@ -845,7 +846,7 @@ ui:
       msg: Password cannot be empty.
     db_host:
       label: Database Host
-      placeholder: 'db:3306'
+      placeholder: "db:3306"
       msg: Database Host cannot be empty.
     db_name:
       label: Database Name
@@ -861,7 +862,7 @@ ui:
       description: >-
         You can create the <1>config.yaml</1> file manually in the
         <1>/var/wwww/xxx/</1> directory and paste the following text into it.
-      info: 'After you’ve done that, click “Next” button.'
+      info: "After you’ve done that, click “Next” button."
     site_information: Site Information
     admin_account: Admin Account
     site_name:
@@ -898,7 +899,7 @@ ui:
     ready_description: >-
       If you ever feel like changing more settings, visit <1>admin section</1>;
       find it in the site menu.
-    good_luck: 'Have fun, and good luck!'
+    good_luck: "Have fun, and good luck!"
     warn_title: Warning
     warn_description: >-
       The file <1>config.yaml</1> already exists. If you need to reset any of the
@@ -913,46 +914,51 @@ ui:
       This either means that the database information in your <1>config.yaml</1> file is incorrect or that contact with the database server could not be established. This could mean your host’s database server is down.
 
   page_404:
-    description: 'Unfortunately, this page doesn''t exist.'
+    description: "Unfortunately, this page doesn't exist."
     back_home: Back to homepage
   page_50X:
     description: The server encountered an error and could not complete your request.
     back_home: Back to homepage
   page_maintenance:
-    description: 'We are under maintenance, we’ll be back soon.'
+    description: "We are under maintenance, we’ll be back soon."
+  nav_menus:
+    dashboard: Dashboard
+    contents: Contents
+    questions: Questions
+    answers: Answers
+    users: Users
+    flags: Flags
+    settings: Settings
+    general: General
+    interface: Interface
+    smtp: SMTP
+    branding: Branding
+    legal: Legal
+    write: Write
+    tos: Terms of Service
+    privacy: Privacy
   admin:
     admin_header:
       title: Admin
-    nav_menus:
-      dashboard: Dashboard
-      contents: Contents
-      questions: Questions
-      answers: Answers
-      users: Users
-      flags: Flags
-      settings: Settings
-      general: General
-      interface: Interface
-      smtp: SMTP
     dashboard:
       title: Dashboard
       welcome: Welcome to Answer Admin!
       site_statistics: Site Statistics
-      questions: 'Questions:'
-      answers: 'Answers:'
-      comments: 'Comments:'
-      votes: 'Votes:'
-      active_users: 'Active users:'
-      flags: 'Flags:'
+      questions: "Questions:"
+      answers: "Answers:"
+      comments: "Comments:"
+      votes: "Votes:"
+      active_users: "Active users:"
+      flags: "Flags:"
       site_health_status: Site Health Status
-      version: 'Version:'
-      https: 'HTTPS:'
-      uploading_files: 'Uploading files:'
-      smtp: 'SMTP:'
-      timezone: 'Timezone:'
+      version: "Version:"
+      https: "HTTPS:"
+      uploading_files: "Uploading files:"
+      smtp: "SMTP:"
+      timezone: "Timezone:"
       system_info: System Info
-      storage_used: 'Storage used:'
-      uptime: 'Uptime:'
+      storage_used: "Storage used:"
+      uptime: "Uptime:"
       answer_links: Answer Links
       documents: Documents
       feedback: Feedback
@@ -961,8 +967,8 @@ ui:
       update_to: Update to
       latest: Latest
       check_failed: Check failed
-      'yes': 'Yes'
-      'no': 'No'
+      "yes": "Yes"
+      "no": "No"
       not_allowed: Not allowed
       allowed: Allowed
       enabled: Enabled
@@ -984,7 +990,7 @@ ui:
       suspended_name: suspended
       suspended_description: A suspended user can't log in.
       deleted_name: deleted
-      deleted_description: 'Delete profile, authentication associations.'
+      deleted_description: "Delete profile, authentication associations."
       inactive_name: inactive
       inactive_description: An inactive user must re-validate their email.
       confirm_title: Delete this user
@@ -993,11 +999,11 @@ ui:
       msg:
         empty: Please select a reason.
     status_modal:
-      title: 'Change {{ type }} status to...'
+      title: "Change {{ type }} status to..."
       normal_name: normal
       normal_description: A normal post available to everyone.
       closed_name: closed
-      closed_description: 'A closed question can''t answer, but still can edit, vote and comment.'
+      closed_description: "A closed question can't answer, but still can edit, vote and comment."
       deleted_name: deleted
       deleted_description: All reputation gained and lost will be restored.
       btn_cancel: Cancel
@@ -1020,7 +1026,7 @@ ui:
       deleted: Deleted
       normal: Normal
       filter:
-        placeholder: 'Filter by name, user:id'
+        placeholder: "Filter by name, user:id"
     questions:
       page_title: Questions
       normal: Normal
@@ -1034,7 +1040,7 @@ ui:
       action: Action
       change: Change
       filter:
-        placeholder: 'Filter by title, question:id'
+        placeholder: "Filter by title, question:id"
     answers:
       page_title: Answers
       normal: Normal
@@ -1046,13 +1052,13 @@ ui:
       action: Action
       change: Change
       filter:
-        placeholder: 'Filter by title, answer:id'
+        placeholder: "Filter by title, answer:id"
     general:
       page_title: General
       name:
         label: Site Name
         msg: Site name cannot be empty.
-        text: 'The name of this site, as used in the title tag.'
+        text: "The name of this site, as used in the title tag."
       site_url:
         label: Site URL
         msg: Site url cannot be empty.
@@ -1061,11 +1067,11 @@ ui:
       short_description:
         label: Short Site Description (optional)
         msg: Short site description cannot be empty.
-        text: 'Short description, as used in the title tag on homepage.'
+        text: "Short description, as used in the title tag on homepage."
       description:
         label: Site Description (optional)
         msg: Site description cannot be empty.
-        text: 'Describe this site in one sentence, as used in the meta description tag.'
+        text: "Describe this site in one sentence, as used in the meta description tag."
       contact_email:
         label: Contact Email
         msg: Contact email cannot be empty.
@@ -1126,5 +1132,45 @@ ui:
       smtp_authentication:
         label: SMTP Authentication
         msg: SMTP authentication cannot be empty.
-        'yes': 'Yes'
-        'no': 'No'
+        "yes": "Yes"
+        "no": "No"
+    branding:
+      page_title: Branding
+      logo:
+        label: Logo
+        msg: Logo cannot be empty.
+        text: The logo image at the top left of your site. Use a wide rectangular image with a height of 56 and an aspect ratio greater than 3:1. If left blank, the site title text will be shown.
+      mobile_logo:
+        label: Mobile Logo (optional)
+        text: The logo used on mobile version of your site. Use a wide rectangular image with a height of 56. If left blank, the image from the “logo” setting will be used.
+      square_icon:
+        label: Square Icon
+        msg: Square icon cannot be empty.
+        text: Image used as the base for metadata icons. Should ideally be larger than 512x512.
+      favicon:
+        label: Favicon (optional)
+        text: A favicon for your site. To work correctly over a CDN it must be a png. Will be resized to 32x32. If left blank, “square icon” will be used.
+    legal:
+      page_title: Legal
+      terms_of_service:
+        label: Terms of Service
+        text: "You can add terms of service content here. If you already have a document hosted elsewhere, provide the full URL here."
+      privacy_policy:
+        label: Privacy Policy
+        text: "You can add privacy policy content here. If you already have a document hosted elsewhere, provide the full URL here."
+    write:
+      page_title: Write
+      recommend_tags:
+        label: Recommend Tags
+        text: "Please input tag slug above, one tag per line."
+      required_tag:
+        label: Required Tag
+        text: "Every new question must have at least one recommend tag"
+      reserved_tags:
+        label: Reserved Tags
+        text: "Reserved tags can only be added to a post by moderator."
+  form:
+    empty: cannot be empty
+    invalid: is invalid
+    btn_submit: Save
+    not_found_props: "Required property {{ key }} not found."
diff --git a/i18n/zh_CN.yaml b/i18n/zh_CN.yaml
index 2e476f82..24ed4dc4 100644
--- a/i18n/zh_CN.yaml
+++ b/i18n/zh_CN.yaml
@@ -759,20 +759,20 @@ ui:
   page_50X:
     description: 服务器遇到了一个错误，无法完成你的请求。
     back_home: 回到主页
+  nav_menus:
+    dashboard: 后台管理
+    contents: 内容管理
+    questions: 问题
+    answers: 回答
+    users: 用户管理
+    flags: 举报管理
+    settings: 站点设置
+    general: 一般
+    interface: 界面
+    smtp: SMTP
   admin:
     admin_header:
       title: 后台管理
-    nav_menus:
-      dashboard: 后台管理
-      contents: 内容管理
-      questions: 问题
-      answers: 回答
-      users: 用户管理
-      flags: 举报管理
-      settings: 站点设置
-      general: 一般
-      interface: 界面
-      smtp: SMTP
     dashboard:
       title: 后台管理
       welcome: 欢迎来到 Answer 后台管理！
diff --git a/ui/.env b/ui/.env
deleted file mode 100644
index 6893217c..00000000
--- a/ui/.env
+++ /dev/null
@@ -1 +0,0 @@
-PUBLIC_URL=
diff --git a/ui/.env.development b/ui/.env.development
index 8648d82a..c78ae289 100644
--- a/ui/.env.development
+++ b/ui/.env.development
@@ -1 +1,2 @@
-REACT_APP_API_URL=http://10.0.10.98:2060
+PUBLIC_URL
+REACT_APP_API_URL = http://127.0.0.1
diff --git a/ui/.env.production b/ui/.env.production
index 940bd4a8..e04b4d35 100644
--- a/ui/.env.production
+++ b/ui/.env.production
@@ -1,3 +1,2 @@
-REACT_APP_API_URL=/
-REACT_APP_PUBLIC_PATH=/
-REACT_APP_VERSION=
+PUBLIC_URL = /
+REACT_APP_API_URL = /
diff --git a/ui/.env.test b/ui/.env.test
deleted file mode 100644
index e69de29b..00000000
diff --git a/ui/.gitignore b/ui/.gitignore
index c4796f76..fe3fdef0 100644
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -13,10 +13,7 @@
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
 
 npm-debug.log*
 yarn-debug.log*
diff --git a/ui/.gitlab-ci.yml b/ui/.gitlab-ci.yml
deleted file mode 100644
index df03dd15..00000000
--- a/ui/.gitlab-ci.yml
+++ /dev/null
@@ -1,93 +0,0 @@
-include:
-  - project: 'segmentfault/devops/templates'
-    file:
-      - .deploy-cdn.yml
-      - .deploy-helm.yml
-
-variables:
-  FF_USE_FASTZIP: 'true'
-  PROJECT_NAME: 'answer_static'
-
-stages:
-  - install
-  - publish
-  - deploy
-
-# 静态资源构建
-install:
-  image: dockerhub.qingcloud.com/sf_base/node-build:14
-  stage: install
-  allow_failure: false
-
-  cache:
-    - key:
-        files:
-          - pnpm-lock.yml
-      paths:
-        - node_modules/
-      policy: pull-push
-  script:
-    - pnpm install
-    - if [ "$CI_COMMIT_BRANCH" = "dev" ]; then
-      sed -i "s/<projectName>/$PROJECT_NAME/g" .env.development;
-      sed -i "s/<version>/$CI_COMMIT_SHORT_SHA/g" .env.development;
-      pnpm run build:dev;
-      elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
-      sed -i "s/<projectName>/$PROJECT_NAME/g" .env.test;
-      sed -i "s/<version>/$CI_COMMIT_SHORT_SHA/g" .env.test;
-      pnpm run build:test;
-      elif [ "$CI_COMMIT_BRANCH" = "release" ]; then
-      sed -i "s/<projectName>/$PROJECT_NAME/g" .env.production;
-      sed -i "s/<version>/$CI_COMMIT_SHORT_SHA/g" .env.production;
-      pnpm run build:prod;
-      fi
-  artifacts:
-    paths:
-      - build/
-
-publish:cdn:dev:
-  extends: .deploy-cdn
-  stage: publish
-  only:
-    - dev
-  variables:
-    AssetsPath: ./build
-    Project: $PROJECT_NAME
-    Version: $CI_COMMIT_SHORT_SHA
-    Destination: dev
-
-publish:cdn:test:
-  extends: .deploy-cdn
-  stage: publish
-  only:
-    - main
-  variables:
-    AssetsPath: ./build
-    Project: $PROJECT_NAME
-    Version: $CI_COMMIT_SHORT_SHA
-    Destination: test
-
-publish:cdn:prod:
-  extends: .deploy-cdn
-  stage: publish
-  only:
-    - release
-  variables:
-    AssetsPath: ./build
-    Project: $PROJECT_NAME
-    Version: $CI_COMMIT_SHORT_SHA
-    Destination: prod
-
-deploy:dev:
-  extends: .deploy-helm
-  stage: deploy
-  only:
-    - dev
-  needs:
-    - publish:cdn:dev
-  variables:
-    KubernetesCluster: dev
-    KubernetesNamespace: 'sf-test'
-    DockerTag: $CI_COMMIT_SHORT_SHA
-    ChartName: answer-web
-    InstallPolicy: replace
diff --git a/ui/.npmrc b/ui/.npmrc
new file mode 100644
index 00000000..885ffc35
--- /dev/null
+++ b/ui/.npmrc
@@ -0,0 +1,2 @@
+strict-peer-dependencies = true
+auto-install-peers = true
diff --git a/ui/README.md b/ui/README.md
index fcf0cb4c..42639ec5 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -30,7 +30,7 @@ clone the repo locally and run following command in your terminal:
 $ git clone git@github.com:answerdev/answer.git answer
 $ cd answer/ui
 $ pnpm install
-$ pnpm run start
+$ pnpm start
 ```
 
 now, your browser should already open automatically, and autoload `http://localhost:3000`.
@@ -41,11 +41,9 @@ you can also manually visit it.
 when cloning repo, and run `pnpm install` to init dependencies. you can use project commands below:
 
 - `pnpm run start` run Answer web locally.
-- `pnpm run build:dev` build code for environment `dev`
-- `pnpm run build:test` build code for environment `test`
-- `pnpm run build:prod` build code for environment `prod`
+- `pnpm run build` build Answer for production
 - `pnpm run lint` lint and fix the code style
-- `pnpm run cz` run `git commit` by `commitizen`
+
 
 ## 🖥 Environment Support
 
diff --git a/ui/config-overrides.js b/ui/config-overrides.js
index 0a5deeff..3d70e9e4 100644
--- a/ui/config-overrides.js
+++ b/ui/config-overrides.js
@@ -8,12 +8,8 @@ const i18nPath = path.resolve(__dirname, "../i18n");
 
 module.exports = {
   webpack: function(config, env) {
-    if (env === "production") {
-      config.output.publicPath = process.env.REACT_APP_PUBLIC_PATH;
-    }
-
     addWebpackAlias({
-      ["@"]: path.resolve(__dirname, "src"),
+      "@": path.resolve(__dirname, "src"),
       "@i18n": i18nPath
     })(config);
 
@@ -34,16 +30,16 @@ module.exports = {
     return function(proxy, allowedHost) {
       const config = configFunction(proxy, allowedHost);
       config.proxy = {
-        "/answer": {
-          target: "http://10.0.10.98:2060",
+        '/answer': {
+          target: process.env.REACT_APP_API_URL,
           changeOrigin: true,
-          secure: false
+          secure: false,
         },
-        "/installation": {
-          target: "http://10.0.10.98:2060",
+        '/installation': {
+          target: process.env.REACT_APP_API_URL,
           changeOrigin: true,
-          secure: false
-        }
+          secure: false,
+        },
       };
       return config;
     };
diff --git a/ui/package.json b/ui/package.json
index c09fac27..51baaa06 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -5,26 +5,13 @@
   "homepage": "/",
   "scripts": {
     "start": "react-app-rewired start",
-    "build:dev": "env-cmd -f .env.development react-app-rewired build",
-    "build:test": "env-cmd -f .env.test react-app-rewired build",
-    "build:prod": "env-cmd -f .env.production react-app-rewired build",
-    "build": "env-cmd -f .env react-app-rewired build",
-    "test": "react-app-rewired test",
+    "build": "react-app-rewired build",
     "lint": "eslint . --cache --fix --ext .ts,.tsx",
-    "prepare": "cd .. && husky install",
-    "cz": "cz",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
     "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "prepare": "cd .. && husky install",
     "preinstall": "node ./scripts/preinstall.js"
   },
-  "config": {
-    "commitizen": {
-      "path": "ui/node_modules/cz-conventional-changelog"
-    }
-  },
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "ahooks": "^3.7.0",
     "axios": "^0.27.2",
     "bootstrap": "^5.2.0",
     "bootstrap-icons": "^1.9.1",
@@ -32,11 +19,7 @@
     "codemirror": "5.65.0",
     "copy-to-clipboard": "^3.3.2",
     "dayjs": "^1.11.5",
-    "highlight.js": "^11.6.0",
     "i18next": "^21.9.0",
-    "i18next-chained-backend": "^3.0.2",
-    "i18next-http-backend": "^1.4.1",
-    "i18next-localstorage-backend": "^3.1.3",
     "katex": "^0.16.2",
     "lodash": "^4.17.21",
     "marked": "^4.0.19",
@@ -54,13 +37,10 @@
     "zustand": "^4.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "@babel/plugin-syntax-flow": "^7.18.6",
-    "@babel/plugin-transform-react-jsx": "^7.14.9",
     "@commitlint/cli": "^17.0.3",
-    "@commitlint/config-conventional": "^17.0.3",
     "@fullhuman/postcss-purgecss": "^4.1.3",
-    "@popperjs/core": "^2.11.5",
+    "purgecss-webpack-plugin": "^4.1.3",
+    "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
@@ -74,11 +54,7 @@
     "@types/react-helmet": "^6.1.5",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.33.0",
-    "commitizen": "^4.2.5",
-    "conventional-changelog-cli": "^2.2.2",
     "customize-cra": "^1.0.0",
-    "cz-conventional-changelog": "^3.3.0",
-    "env-cmd": "^10.1.0",
     "eslint": "^8.0.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -95,13 +71,10 @@
     "lint-staged": "^13.0.3",
     "postcss": "^8.0.0",
     "prettier": "^2.7.1",
-    "purgecss-webpack-plugin": "^4.1.3",
     "react-app-rewired": "^2.2.1",
     "react-scripts": "5.0.1",
     "sass": "^1.54.4",
-    "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "typescript": "*",
-    "web-vitals": "^2.1.4",
+    "typescript": "^4.8.3",
     "yaml-loader": "^0.8.0"
   },
   "packageManager": "pnpm@7.9.5",
@@ -110,4 +83,4 @@
     "pnpm": ">=7"
   },
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index 98ebd589..c0bad184 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -1,13 +1,8 @@
 lockfileVersion: 5.4
 
 specifiers:
-  '@babel/core': ^7.18.10
-  '@babel/plugin-syntax-flow': ^7.18.6
-  '@babel/plugin-transform-react-jsx': ^7.14.9
   '@commitlint/cli': ^17.0.3
-  '@commitlint/config-conventional': ^17.0.3
   '@fullhuman/postcss-purgecss': ^4.1.3
-  '@popperjs/core': ^2.11.5
   '@testing-library/dom': ^8.17.1
   '@testing-library/jest-dom': ^4.2.4
   '@testing-library/react': ^13.3.0
@@ -22,19 +17,14 @@ specifiers:
   '@types/react-helmet': ^6.1.5
   '@typescript-eslint/eslint-plugin': ^5.0.0
   '@typescript-eslint/parser': ^5.33.0
-  ahooks: ^3.7.0
   axios: ^0.27.2
   bootstrap: ^5.2.0
   bootstrap-icons: ^1.9.1
   classnames: ^2.3.1
   codemirror: 5.65.0
-  commitizen: ^4.2.5
-  conventional-changelog-cli: ^2.2.2
   copy-to-clipboard: ^3.3.2
   customize-cra: ^1.0.0
-  cz-conventional-changelog: ^3.3.0
   dayjs: ^1.11.5
-  env-cmd: ^10.1.0
   eslint: ^8.0.1
   eslint-config-airbnb: ^19.0.4
   eslint-config-airbnb-typescript: ^17.0.0
@@ -47,12 +37,8 @@ specifiers:
   eslint-plugin-promise: ^6.0.0
   eslint-plugin-react: ^7.30.1
   eslint-plugin-react-hooks: ^4.6.0
-  highlight.js: ^11.6.0
   husky: ^8.0.1
   i18next: ^21.9.0
-  i18next-chained-backend: ^3.0.2
-  i18next-http-backend: ^1.4.1
-  i18next-localstorage-backend: ^3.1.3
   katex: ^0.16.2
   lint-staged: ^13.0.3
   lodash: ^4.17.21
@@ -74,15 +60,11 @@ specifiers:
   react-scripts: 5.0.1
   sass: ^1.54.4
   swr: ^1.3.0
-  tsconfig-paths-webpack-plugin: ^4.0.0
-  typescript: '*'
-  web-vitals: ^2.1.4
+  typescript: ^4.8.3
   yaml-loader: ^0.8.0
   zustand: ^4.1.1
 
 dependencies:
-  '@testing-library/jest-dom': 4.2.4
-  ahooks: 3.7.1_react@18.2.0
   axios: 0.27.2
   bootstrap: 5.2.1_@popperjs+core@2.11.6
   bootstrap-icons: 1.9.1
@@ -90,11 +72,7 @@ dependencies:
   codemirror: 5.65.0
   copy-to-clipboard: 3.3.2
   dayjs: 1.11.5
-  highlight.js: 11.6.0
   i18next: 21.9.2
-  i18next-chained-backend: 3.1.0
-  i18next-http-backend: 1.4.4
-  i18next-localstorage-backend: 3.1.3
   katex: 0.16.2
   lodash: 4.17.21
   marked: 4.1.0
@@ -112,14 +90,10 @@ dependencies:
   zustand: 4.1.1_react@18.2.0
 
 devDependencies:
-  '@babel/core': 7.19.1
-  '@babel/plugin-syntax-flow': 7.18.6_@babel+core@7.19.1
-  '@babel/plugin-transform-react-jsx': 7.19.0_@babel+core@7.19.1
   '@commitlint/cli': 17.1.2
-  '@commitlint/config-conventional': 17.1.0
   '@fullhuman/postcss-purgecss': 4.1.3_postcss@8.4.16
-  '@popperjs/core': 2.11.6
   '@testing-library/dom': 8.18.1
+  '@testing-library/jest-dom': 4.2.4
   '@testing-library/react': 13.4.0_biqbaboplfbrettd7655fr4n2y
   '@testing-library/user-event': 13.5.0_znccgeejomvff3jrsk3ljovfpu
   '@types/jest': 27.5.2
@@ -132,11 +106,7 @@ devDependencies:
   '@types/react-helmet': 6.1.5
   '@typescript-eslint/eslint-plugin': 5.38.0_wsb62dxj2oqwgas4kadjymcmry
   '@typescript-eslint/parser': 5.38.0_irgkl5vooow2ydyo6aokmferha
-  commitizen: 4.2.5
-  conventional-changelog-cli: 2.2.2
   customize-cra: 1.0.0
-  cz-conventional-changelog: 3.3.0
-  env-cmd: 10.1.0
   eslint: 8.23.1
   eslint-config-airbnb: 19.0.4_4zstfqq5uopk5xuvotejlnl36y
   eslint-config-airbnb-typescript: 17.0.0_j57hrpt2hfp47otngkwtnuyxpa
@@ -153,13 +123,11 @@ devDependencies:
   lint-staged: 13.0.3
   postcss: 8.4.16
   prettier: 2.7.1
-  purgecss-webpack-plugin: 4.1.3
+  purgecss-webpack-plugin: 4.1.3_webpack@5.74.0
   react-app-rewired: 2.2.1_react-scripts@5.0.1
-  react-scripts: 5.0.1_vcopaw66ubzwqe5wj7m4edgwnq
+  react-scripts: 5.0.1_v2uhgyutubjd4jjlagvop2mfmq
   sass: 1.54.9
-  tsconfig-paths-webpack-plugin: 4.0.0
   typescript: 4.8.3
-  web-vitals: 2.1.4
   yaml-loader: 0.8.0
 
 packages:
@@ -1451,13 +1419,6 @@ packages:
       - '@swc/wasm'
     dev: true
 
-  /@commitlint/config-conventional/17.1.0:
-    resolution: {integrity: sha512-WU2p0c9/jLi8k2q2YrDV96Y8XVswQOceIQ/wyJvQxawJSCasLdRB3kUIYdNjOCJsxkpoUlV/b90ZPxp1MYZDiA==}
-    engines: {node: '>=v14'}
-    dependencies:
-      conventional-changelog-conventionalcommits: 5.0.0
-    dev: true
-
   /@commitlint/config-validator/17.1.0:
     resolution: {integrity: sha512-Q1rRRSU09ngrTgeTXHq6ePJs2KrI+axPTgkNYDWSJIuS1Op4w3J30vUfSXjwn5YEJHklK3fSqWNHmBhmTR7Vdg==}
     engines: {node: '>=v14'}
@@ -1598,7 +1559,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
-    dev: true
 
   /@csstools/normalize.css/12.0.0:
     resolution: {integrity: sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg==}
@@ -1788,11 +1748,6 @@ packages:
   /@humanwhocodes/object-schema/1.2.1:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
 
-  /@hutson/parse-repository-url/3.0.2:
-    resolution: {integrity: sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
   /@istanbuljs/load-nyc-config/1.1.0:
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
     engines: {node: '>=8'}
@@ -1829,7 +1784,7 @@ packages:
       jest-util: 28.1.3
       slash: 3.0.0
 
-  /@jest/core/27.5.1:
+  /@jest/core/27.5.1_ts-node@10.9.1:
     resolution: {integrity: sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     peerDependencies:
@@ -1850,7 +1805,7 @@ packages:
       exit: 0.1.2
       graceful-fs: 4.2.10
       jest-changed-files: 27.5.1
-      jest-config: 27.5.1
+      jest-config: 27.5.1_ts-node@10.9.1
       jest-haste-map: 27.5.1
       jest-message-util: 27.5.1
       jest-regex-util: 27.5.1
@@ -2010,7 +1965,7 @@ packages:
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-reports': 1.1.2
       '@types/yargs': 13.0.12
-    dev: false
+    dev: true
 
   /@jest/types/27.5.1:
     resolution: {integrity: sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==}
@@ -2076,7 +2031,6 @@ packages:
     dependencies:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
-    dev: true
 
   /@leichtgewicht/ip-codec/2.0.4:
     resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==}
@@ -2145,6 +2099,7 @@ packages:
 
   /@popperjs/core/2.11.6:
     resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==}
+    dev: false
 
   /@react-aria/ssr/3.3.0_react@18.2.0:
     resolution: {integrity: sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==}
@@ -2384,7 +2339,7 @@ packages:
       lodash: 4.17.21
       pretty-format: 24.9.0
       redent: 3.0.0
-    dev: false
+    dev: true
 
   /@testing-library/react/13.4.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==}
@@ -2420,19 +2375,15 @@ packages:
 
   /@tsconfig/node10/1.0.9:
     resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}
-    dev: true
 
   /@tsconfig/node12/1.0.11:
     resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
-    dev: true
 
   /@tsconfig/node14/1.0.3:
     resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
-    dev: true
 
   /@tsconfig/node16/1.0.3:
     resolution: {integrity: sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==}
-    dev: true
 
   /@types/aria-query/4.2.2:
     resolution: {integrity: sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==}
@@ -2547,7 +2498,7 @@ packages:
     dependencies:
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-lib-report': 3.0.0
-    dev: false
+    dev: true
 
   /@types/istanbul-reports/3.0.1:
     resolution: {integrity: sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==}
@@ -2561,10 +2512,6 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
-  /@types/js-cookie/2.2.7:
-    resolution: {integrity: sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==}
-    dev: false
-
   /@types/json-schema/7.0.11:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
 
@@ -2689,7 +2636,7 @@ packages:
     resolution: {integrity: sha512-qCxJE1qgz2y0hA4pIxjBR+PelCH0U5CK1XJXFwCNqfmliatKp47UCXXE9Dyk1OXBDLvsCF57TqQEJaeLfDYEOQ==}
     dependencies:
       '@types/yargs-parser': 21.0.0
-    dev: false
+    dev: true
 
   /@types/yargs/16.0.4:
     resolution: {integrity: sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==}
@@ -2980,7 +2927,6 @@ packages:
   /acorn-walk/8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /acorn/7.4.1:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
@@ -2992,10 +2938,6 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  /add-stream/1.0.0:
-    resolution: {integrity: sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==}
-    dev: true
-
   /address/1.2.1:
     resolution: {integrity: sha512-B+6bi5D34+fDYENiH5qOlA0cV2rAGKuWZ9LeyUUehbXy8e0VS9e498yO0Jeeh+iM+6KbfudHTFjXw2MmJD4QRA==}
     engines: {node: '>= 10.0.0'}
@@ -3023,29 +2965,10 @@ packages:
       indent-string: 4.0.0
     dev: true
 
-  /ahooks-v3-count/1.0.0:
-    resolution: {integrity: sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ==}
-    dev: false
-
-  /ahooks/3.7.1_react@18.2.0:
-    resolution: {integrity: sha512-9fooKjhScNyJaIPnlWd13LkY1gQYqv3BqwSA9ynHg1ZUtDqAICuCRoedV97ylrEL6QqI4zeq3bO3lQxkfWVNcg==}
-    engines: {node: '>=8.0.0'}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@types/js-cookie': 2.2.7
-      ahooks-v3-count: 1.0.0
-      dayjs: 1.11.5
-      intersection-observer: 0.12.2
-      js-cookie: 2.2.1
-      lodash: 4.17.21
-      react: 18.2.0
-      resize-observer-polyfill: 1.5.1
-      screenfull: 5.2.0
-    dev: false
-
-  /ajv-formats/2.1.1:
+  /ajv-formats/2.1.1_ajv@8.11.0:
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
+    peerDependencies:
+      ajv: ^8.0.0
     peerDependenciesMeta:
       ajv:
         optional: true
@@ -3097,7 +3020,7 @@ packages:
   /ansi-regex/4.1.1:
     resolution: {integrity: sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==}
     engines: {node: '>=6'}
-    dev: false
+    dev: true
 
   /ansi-regex/5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
@@ -3137,7 +3060,6 @@ packages:
 
   /arg/4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
-    dev: true
 
   /arg/5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
@@ -3244,7 +3166,7 @@ packages:
     resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==}
     engines: {node: '>= 4.5.0'}
     hasBin: true
-    dev: false
+    dev: true
 
   /autoprefixer/10.4.12_postcss@8.4.16:
     resolution: {integrity: sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q==}
@@ -3441,10 +3363,6 @@ packages:
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  /base64-js/1.5.1:
-    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
-    dev: true
-
   /batch/0.6.1:
     resolution: {integrity: sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==}
 
@@ -3464,14 +3382,6 @@ packages:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
 
-  /bl/4.1.0:
-    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
-    dependencies:
-      buffer: 5.7.1
-      inherits: 2.0.4
-      readable-stream: 3.6.0
-    dev: true
-
   /bluebird/3.7.2:
     resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
 
@@ -3555,13 +3465,6 @@ packages:
   /buffer-from/1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
-  /buffer/5.7.1:
-    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
-    dependencies:
-      base64-js: 1.5.1
-      ieee754: 1.2.1
-    dev: true
-
   /builtin-modules/3.3.0:
     resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
     engines: {node: '>=6'}
@@ -3580,11 +3483,6 @@ packages:
     resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
     engines: {node: '>= 0.8'}
 
-  /cachedir/2.3.0:
-    resolution: {integrity: sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==}
-    engines: {node: '>=6'}
-    dev: true
-
   /call-bind/1.0.2:
     resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
     dependencies:
@@ -3660,10 +3558,6 @@ packages:
     resolution: {integrity: sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==}
     engines: {node: '>=12.20'}
 
-  /chardet/0.7.0:
-    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
-    dev: true
-
   /charenc/0.0.2:
     resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==}
     dev: false
@@ -3717,11 +3611,6 @@ packages:
       restore-cursor: 3.1.0
     dev: true
 
-  /cli-spinners/2.7.0:
-    resolution: {integrity: sha512-qu3pN8Y3qHNgE2AFweciB1IfMnmZ/fsNTEE+NOFjmGB2F/7rLhnhzppvpCnN4FovtP26k8lHyy9ptEbNwWFLzw==}
-    engines: {node: '>=6'}
-    dev: true
-
   /cli-truncate/2.1.0:
     resolution: {integrity: sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==}
     engines: {node: '>=8'}
@@ -3738,11 +3627,6 @@ packages:
       string-width: 5.1.2
     dev: true
 
-  /cli-width/3.0.0:
-    resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
-    engines: {node: '>= 10'}
-    dev: true
-
   /cliui/7.0.4:
     resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
     dependencies:
@@ -3750,11 +3634,6 @@ packages:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
-  /clone/1.0.4:
-    resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
-    engines: {node: '>=0.8'}
-    dev: true
-
   /co/4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -3806,11 +3685,6 @@ packages:
   /commander/2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
-  /commander/4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-    dev: true
-
   /commander/7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -3824,30 +3698,6 @@ packages:
     engines: {node: ^12.20.0 || >=14}
     dev: true
 
-  /commitizen/4.2.5:
-    resolution: {integrity: sha512-9sXju8Qrz1B4Tw7kC5KhnvwYQN88qs2zbiB8oyMsnXZyJ24PPGiNM3nHr73d32dnE3i8VJEXddBFIbOgYSEXtQ==}
-    engines: {node: '>= 12'}
-    hasBin: true
-    dependencies:
-      cachedir: 2.3.0
-      cz-conventional-changelog: 3.3.0
-      dedent: 0.7.0
-      detect-indent: 6.1.0
-      find-node-modules: 2.1.3
-      find-root: 1.1.0
-      fs-extra: 9.1.0
-      glob: 7.2.3
-      inquirer: 8.2.4
-      is-utf8: 0.2.1
-      lodash: 4.17.21
-      minimist: 1.2.6
-      strip-bom: 4.0.0
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - '@swc/core'
-      - '@swc/wasm'
-    dev: true
-
   /common-path-prefix/3.0.0:
     resolution: {integrity: sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==}
 
@@ -3913,156 +3763,6 @@ packages:
       q: 1.5.1
     dev: true
 
-  /conventional-changelog-atom/2.0.8:
-    resolution: {integrity: sha512-xo6v46icsFTK3bb7dY/8m2qvc8sZemRgdqLb/bjpBsH2UyOS8rKNTgcb5025Hri6IpANPApbXMg15QLb1LJpBw==}
-    engines: {node: '>=10'}
-    dependencies:
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-cli/2.2.2:
-    resolution: {integrity: sha512-8grMV5Jo8S0kP3yoMeJxV2P5R6VJOqK72IiSV9t/4H5r/HiRqEBQ83bYGuz4Yzfdj4bjaAEhZN/FFbsFXr5bOA==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      add-stream: 1.0.0
-      conventional-changelog: 3.1.25
-      lodash: 4.17.21
-      meow: 8.1.2
-      tempfile: 3.0.0
-    dev: true
-
-  /conventional-changelog-codemirror/2.0.8:
-    resolution: {integrity: sha512-z5DAsn3uj1Vfp7po3gpt2Boc+Bdwmw2++ZHa5Ak9k0UKsYAO5mH1UBTN0qSCuJZREIhX6WU4E1p3IW2oRCNzQw==}
-    engines: {node: '>=10'}
-    dependencies:
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-conventionalcommits/4.6.3:
-    resolution: {integrity: sha512-LTTQV4fwOM4oLPad317V/QNQ1FY4Hju5qeBIM1uTHbrnCE+Eg4CdRZ3gO2pUeR+tzWdp80M2j3qFFEDWVqOV4g==}
-    engines: {node: '>=10'}
-    dependencies:
-      compare-func: 2.0.0
-      lodash: 4.17.21
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-conventionalcommits/5.0.0:
-    resolution: {integrity: sha512-lCDbA+ZqVFQGUj7h9QBKoIpLhl8iihkO0nCTyRNzuXtcd7ubODpYB04IFy31JloiJgG0Uovu8ot8oxRzn7Nwtw==}
-    engines: {node: '>=10'}
-    dependencies:
-      compare-func: 2.0.0
-      lodash: 4.17.21
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-core/4.2.4:
-    resolution: {integrity: sha512-gDVS+zVJHE2v4SLc6B0sLsPiloR0ygU7HaDW14aNJE1v4SlqJPILPl/aJC7YdtRE4CybBf8gDwObBvKha8Xlyg==}
-    engines: {node: '>=10'}
-    dependencies:
-      add-stream: 1.0.0
-      conventional-changelog-writer: 5.0.1
-      conventional-commits-parser: 3.2.4
-      dateformat: 3.0.3
-      get-pkg-repo: 4.2.1
-      git-raw-commits: 2.0.11
-      git-remote-origin-url: 2.0.0
-      git-semver-tags: 4.1.1
-      lodash: 4.17.21
-      normalize-package-data: 3.0.3
-      q: 1.5.1
-      read-pkg: 3.0.0
-      read-pkg-up: 3.0.0
-      through2: 4.0.2
-    dev: true
-
-  /conventional-changelog-ember/2.0.9:
-    resolution: {integrity: sha512-ulzIReoZEvZCBDhcNYfDIsLTHzYHc7awh+eI44ZtV5cx6LVxLlVtEmcO+2/kGIHGtw+qVabJYjdI5cJOQgXh1A==}
-    engines: {node: '>=10'}
-    dependencies:
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-eslint/3.0.9:
-    resolution: {integrity: sha512-6NpUCMgU8qmWmyAMSZO5NrRd7rTgErjrm4VASam2u5jrZS0n38V7Y9CzTtLT2qwz5xEChDR4BduoWIr8TfwvXA==}
-    engines: {node: '>=10'}
-    dependencies:
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-express/2.0.6:
-    resolution: {integrity: sha512-SDez2f3iVJw6V563O3pRtNwXtQaSmEfTCaTBPCqn0oG0mfkq0rX4hHBq5P7De2MncoRixrALj3u3oQsNK+Q0pQ==}
-    engines: {node: '>=10'}
-    dependencies:
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-jquery/3.0.11:
-    resolution: {integrity: sha512-x8AWz5/Td55F7+o/9LQ6cQIPwrCjfJQ5Zmfqi8thwUEKHstEn4kTIofXub7plf1xvFA2TqhZlq7fy5OmV6BOMw==}
-    engines: {node: '>=10'}
-    dependencies:
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-jshint/2.0.9:
-    resolution: {integrity: sha512-wMLdaIzq6TNnMHMy31hql02OEQ8nCQfExw1SE0hYL5KvU+JCTuPaDO+7JiogGT2gJAxiUGATdtYYfh+nT+6riA==}
-    engines: {node: '>=10'}
-    dependencies:
-      compare-func: 2.0.0
-      q: 1.5.1
-    dev: true
-
-  /conventional-changelog-preset-loader/2.3.4:
-    resolution: {integrity: sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g==}
-    engines: {node: '>=10'}
-    dev: true
-
-  /conventional-changelog-writer/5.0.1:
-    resolution: {integrity: sha512-5WsuKUfxW7suLblAbFnxAcrvf6r+0b7GvNaWUwUIk0bXMnENP/PEieGKVUQrjPqwPT4o3EPAASBXiY6iHooLOQ==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      conventional-commits-filter: 2.0.7
-      dateformat: 3.0.3
-      handlebars: 4.7.7
-      json-stringify-safe: 5.0.1
-      lodash: 4.17.21
-      meow: 8.1.2
-      semver: 6.3.0
-      split: 1.0.1
-      through2: 4.0.2
-    dev: true
-
-  /conventional-changelog/3.1.25:
-    resolution: {integrity: sha512-ryhi3fd1mKf3fSjbLXOfK2D06YwKNic1nC9mWqybBHdObPd8KJ2vjaXZfYj1U23t+V8T8n0d7gwnc9XbIdFbyQ==}
-    engines: {node: '>=10'}
-    dependencies:
-      conventional-changelog-angular: 5.0.13
-      conventional-changelog-atom: 2.0.8
-      conventional-changelog-codemirror: 2.0.8
-      conventional-changelog-conventionalcommits: 4.6.3
-      conventional-changelog-core: 4.2.4
-      conventional-changelog-ember: 2.0.9
-      conventional-changelog-eslint: 3.0.9
-      conventional-changelog-express: 2.0.6
-      conventional-changelog-jquery: 3.0.11
-      conventional-changelog-jshint: 2.0.9
-      conventional-changelog-preset-loader: 2.3.4
-    dev: true
-
-  /conventional-commit-types/3.0.0:
-    resolution: {integrity: sha512-SmmCYnOniSsAa9GqWOeLqc179lfr5TRu5b4QFDkbsrJ5TZjPJx85wtOr3zn+1dbeNiXDKGPbZ72IKbPhLXh/Lg==}
-    dev: true
-
-  /conventional-commits-filter/2.0.7:
-    resolution: {integrity: sha512-ASS9SamOP4TbCClsRHxIHXRfcGCnIoQqkvAzCSbZzTFLfcTqJVugB0agRgsEELsqaeWgsXv513eS116wnlSSPA==}
-    engines: {node: '>=10'}
-    dependencies:
-      lodash.ismatch: 4.4.0
-      modify-values: 1.0.1
-    dev: true
-
   /conventional-commits-parser/3.2.4:
     resolution: {integrity: sha512-nK7sAtfi+QXbxHCYfhpZsfRtaitZLIA6889kFIouLvz6repszQDgxBu7wf2WbU+Dco7sAnNCJYERCwt54WPC2Q==}
     engines: {node: '>=10'}
@@ -4147,15 +3847,6 @@ packages:
 
   /create-require/1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
-    dev: true
-
-  /cross-fetch/3.1.5:
-    resolution: {integrity: sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==}
-    dependencies:
-      node-fetch: 2.6.7
-    transitivePeerDependencies:
-      - encoding
-    dev: false
 
   /cross-spawn/7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
@@ -4297,7 +3988,7 @@ packages:
 
   /css.escape/1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
-    dev: false
+    dev: true
 
   /css/2.2.4:
     resolution: {integrity: sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==}
@@ -4306,7 +3997,7 @@ packages:
       source-map: 0.6.1
       source-map-resolve: 0.5.3
       urix: 0.1.0
-    dev: false
+    dev: true
 
   /cssdb/7.0.1:
     resolution: {integrity: sha512-pT3nzyGM78poCKLAEy2zWIVX2hikq6dIrjuZzLV98MumBg+xMTNYfHx7paUlfiRTgg91O/vR889CIf+qiv79Rw==}
@@ -4399,23 +4090,6 @@ packages:
       lodash.flow: 3.5.0
     dev: true
 
-  /cz-conventional-changelog/3.3.0:
-    resolution: {integrity: sha512-U466fIzU5U22eES5lTNiNbZ+d8dfcHcssH4o7QsdWaCcRs/feIPCxKYSWkYBNs5mny7MvEfwpTLWjvbm94hecw==}
-    engines: {node: '>= 10'}
-    dependencies:
-      chalk: 2.4.2
-      commitizen: 4.2.5
-      conventional-commit-types: 3.0.0
-      lodash.map: 4.6.0
-      longest: 2.0.1
-      word-wrap: 1.2.3
-    optionalDependencies:
-      '@commitlint/load': 17.1.2
-    transitivePeerDependencies:
-      - '@swc/core'
-      - '@swc/wasm'
-    dev: true
-
   /d3-array/1.2.4:
     resolution: {integrity: sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==}
     dev: false
@@ -4913,10 +4587,6 @@ packages:
       whatwg-mimetype: 2.3.0
       whatwg-url: 8.7.0
 
-  /dateformat/3.0.3:
-    resolution: {integrity: sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==}
-    dev: true
-
   /dayjs/1.11.5:
     resolution: {integrity: sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==}
     dev: false
@@ -4971,7 +4641,7 @@ packages:
   /decode-uri-component/0.2.0:
     resolution: {integrity: sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==}
     engines: {node: '>=0.10'}
-    dev: false
+    dev: true
 
   /dedent/0.7.0:
     resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
@@ -4989,12 +4659,6 @@ packages:
     dependencies:
       execa: 5.1.1
 
-  /defaults/1.0.3:
-    resolution: {integrity: sha512-s82itHOnYrN0Ib8r+z7laQz3sdE+4FP3d9Q7VLO7U+KRT+CR0GsWuyHxzdAY82I7cXv0G/twrqomTJLOssO5HA==}
-    dependencies:
-      clone: 1.0.4
-    dev: true
-
   /define-lazy-prop/2.0.0:
     resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
     engines: {node: '>=8'}
@@ -5036,16 +4700,6 @@ packages:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
 
-  /detect-file/1.0.0:
-    resolution: {integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /detect-indent/6.1.0:
-    resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
-    engines: {node: '>=8'}
-    dev: true
-
   /detect-newline/3.1.0:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
@@ -5078,7 +4732,7 @@ packages:
   /diff-sequences/24.9.0:
     resolution: {integrity: sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==}
     engines: {node: '>= 6'}
-    dev: false
+    dev: true
 
   /diff-sequences/27.5.1:
     resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==}
@@ -5087,7 +4741,6 @@ packages:
   /diff/4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
-    dev: true
 
   /dir-glob/3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
@@ -5255,15 +4908,6 @@ packages:
   /entities/2.2.0:
     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
 
-  /env-cmd/10.1.0:
-    resolution: {integrity: sha512-mMdWTT9XKN7yNth/6N6g2GuKuJTsKMDHlQFUDacb/heQRRWOTIZ42t1rMHnQu4jYxU1ajdTeJM+9eEETlqToMA==}
-    engines: {node: '>=8.0.0'}
-    hasBin: true
-    dependencies:
-      commander: 4.1.1
-      cross-spawn: 7.0.3
-    dev: true
-
   /error-ex/1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
@@ -5588,7 +5232,7 @@ packages:
       '@typescript-eslint/eslint-plugin': 5.38.0_wsb62dxj2oqwgas4kadjymcmry
       '@typescript-eslint/experimental-utils': 5.38.0_irgkl5vooow2ydyo6aokmferha
       eslint: 8.23.1
-      jest: 27.5.1
+      jest: 27.5.1_ts-node@10.9.1
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -5888,13 +5532,6 @@ packages:
     resolution: {integrity: sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==}
     engines: {node: '>= 0.8.0'}
 
-  /expand-tilde/2.0.2:
-    resolution: {integrity: sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      homedir-polyfill: 1.0.3
-    dev: true
-
   /expect/27.5.1:
     resolution: {integrity: sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -5942,15 +5579,6 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /external-editor/3.1.0:
-    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
-    engines: {node: '>=4'}
-    dependencies:
-      chardet: 0.7.0
-      iconv-lite: 0.4.24
-      tmp: 0.0.33
-    dev: true
-
   /fast-deep-equal/3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -5990,13 +5618,6 @@ packages:
     dependencies:
       bser: 2.1.1
 
-  /figures/3.2.0:
-    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
-    engines: {node: '>=8'}
-    dependencies:
-      escape-string-regexp: 1.0.5
-    dev: true
-
   /file-entry-cache/6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -6050,24 +5671,6 @@ packages:
       make-dir: 3.1.0
       pkg-dir: 4.2.0
 
-  /find-node-modules/2.1.3:
-    resolution: {integrity: sha512-UC2I2+nx1ZuOBclWVNdcnbDR5dlrOdVb7xNjmT/lHE+LsgztWks3dG7boJ37yTS/venXw84B/mAW9uHVoC5QRg==}
-    dependencies:
-      findup-sync: 4.0.0
-      merge: 2.1.1
-    dev: true
-
-  /find-root/1.1.0:
-    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
-    dev: true
-
-  /find-up/2.1.0:
-    resolution: {integrity: sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==}
-    engines: {node: '>=4'}
-    dependencies:
-      locate-path: 2.0.0
-    dev: true
-
   /find-up/3.0.0:
     resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
     engines: {node: '>=6'}
@@ -6088,16 +5691,6 @@ packages:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
-  /findup-sync/4.0.0:
-    resolution: {integrity: sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==}
-    engines: {node: '>= 8'}
-    dependencies:
-      detect-file: 1.0.0
-      is-glob: 4.0.3
-      micromatch: 4.0.5
-      resolve-dir: 1.0.1
-    dev: true
-
   /flat-cache/3.0.4:
     resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -6243,17 +5836,6 @@ packages:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
     engines: {node: '>=8.0.0'}
 
-  /get-pkg-repo/4.2.1:
-    resolution: {integrity: sha512-2+QbHjFRfGB74v/pYWjd5OhU3TDIC2Gv/YKUTk/tCvAz0pkn/Mz6P3uByuBimLOcPvN2jYdScl3xGFSrx0jEcA==}
-    engines: {node: '>=6.9.0'}
-    hasBin: true
-    dependencies:
-      '@hutson/parse-repository-url': 3.0.2
-      hosted-git-info: 4.1.0
-      through2: 2.0.5
-      yargs: 16.2.0
-    dev: true
-
   /get-stream/6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
@@ -6277,29 +5859,6 @@ packages:
       through2: 4.0.2
     dev: true
 
-  /git-remote-origin-url/2.0.0:
-    resolution: {integrity: sha512-eU+GGrZgccNJcsDH5LkXR3PB9M958hxc7sbA8DFJjrv9j4L2P/eZfKhM+QD6wyzpiv+b1BpK0XrYCxkovtjSLw==}
-    engines: {node: '>=4'}
-    dependencies:
-      gitconfiglocal: 1.0.0
-      pify: 2.3.0
-    dev: true
-
-  /git-semver-tags/4.1.1:
-    resolution: {integrity: sha512-OWyMt5zBe7xFs8vglMmhM9lRQzCWL3WjHtxNNfJTMngGym7pC1kh8sP6jevfydJ6LP3ZvGxfb6ABYgPUM0mtsA==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      meow: 8.1.2
-      semver: 6.3.0
-    dev: true
-
-  /gitconfiglocal/1.0.0:
-    resolution: {integrity: sha512-spLUXeTAVHxDtKsJc8FkFVgFtMdEN9qPGpL23VfSHx4fP4+Ds097IXLvymbnDH8FnmxX5Nr9bPw3A+AQ6mWEaQ==}
-    dependencies:
-      ini: 1.3.8
-    dev: true
-
   /glob-parent/5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -6332,32 +5891,12 @@ packages:
       ini: 1.3.8
     dev: true
 
-  /global-modules/1.0.0:
-    resolution: {integrity: sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      global-prefix: 1.0.2
-      is-windows: 1.0.2
-      resolve-dir: 1.0.1
-    dev: true
-
   /global-modules/2.0.0:
     resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
     engines: {node: '>=6'}
     dependencies:
       global-prefix: 3.0.0
 
-  /global-prefix/1.0.2:
-    resolution: {integrity: sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      expand-tilde: 2.0.2
-      homedir-polyfill: 1.0.3
-      ini: 1.3.8
-      is-windows: 1.0.2
-      which: 1.3.1
-    dev: true
-
   /global-prefix/3.0.0:
     resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
     engines: {node: '>=6'}
@@ -6408,19 +5947,6 @@ packages:
   /handle-thing/2.0.1:
     resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==}
 
-  /handlebars/4.7.7:
-    resolution: {integrity: sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==}
-    engines: {node: '>=0.4.7'}
-    hasBin: true
-    dependencies:
-      minimist: 1.2.6
-      neo-async: 2.6.2
-      source-map: 0.6.1
-      wordwrap: 1.0.0
-    optionalDependencies:
-      uglify-js: 3.17.1
-    dev: true
-
   /hard-rejection/2.1.0:
     resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
     engines: {node: '>=6'}
@@ -6465,18 +5991,6 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
-  /highlight.js/11.6.0:
-    resolution: {integrity: sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==}
-    engines: {node: '>=12.0.0'}
-    dev: false
-
-  /homedir-polyfill/1.0.3:
-    resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      parse-passwd: 1.0.0
-    dev: true
-
   /hoopy/0.1.4:
     resolution: {integrity: sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==}
     engines: {node: '>= 6.0.0'}
@@ -6639,26 +6153,6 @@ packages:
     hasBin: true
     dev: true
 
-  /i18next-chained-backend/3.1.0:
-    resolution: {integrity: sha512-ltWy0fPMrtXjq0rSLo7s4ZF92LGvVsO47hhV3czaZXzMzhpFva6LVKMyDT7x82R8vAyB7VAeyGLBvMiW4W543A==}
-    dependencies:
-      '@babel/runtime': 7.19.0
-    dev: false
-
-  /i18next-http-backend/1.4.4:
-    resolution: {integrity: sha512-M4gLPe6JKZ2p1UmE6t4rzWV/sAxgrLThW7ztXAsTpFwFqXoyzhTzX8eYxVv9KjpCQh4K9nwxnEjEi+74C4Thbg==}
-    dependencies:
-      cross-fetch: 3.1.5
-    transitivePeerDependencies:
-      - encoding
-    dev: false
-
-  /i18next-localstorage-backend/3.1.3:
-    resolution: {integrity: sha512-tx8dxQTEsTnRC654IrXPFr94c3NH7bIVHGKHnGvbgefpLz13/uFT5ITsmhqhg/gOza0TIj8e5jTsGnQytIhh+A==}
-    dependencies:
-      '@babel/runtime': 7.19.0
-    dev: false
-
   /i18next/21.9.2:
     resolution: {integrity: sha512-00fVrLQOwy45nm3OtC9l1WiLK3nJlIYSljgCt0qzTaAy65aciMdRy9GsuW+a2AtKtdg9/njUGfRH30LRupV7ZQ==}
     dependencies:
@@ -6694,10 +6188,6 @@ packages:
     dependencies:
       harmony-reflect: 1.6.2
 
-  /ieee754/1.2.1:
-    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
-    dev: true
-
   /ignore/5.2.0:
     resolution: {integrity: sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==}
     engines: {node: '>= 4'}
@@ -6730,6 +6220,7 @@ packages:
   /indent-string/4.0.0:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
+    dev: true
 
   /inflight/1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
@@ -6746,27 +6237,6 @@ packages:
   /ini/1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
-  /inquirer/8.2.4:
-    resolution: {integrity: sha512-nn4F01dxU8VeKfq192IjLsxu0/OmMZ4Lg3xKAns148rCaXP6ntAoEkVYZThWjwON8AlzdZZi6oqnhNbxUG9hVg==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      ansi-escapes: 4.3.2
-      chalk: 4.1.2
-      cli-cursor: 3.1.0
-      cli-width: 3.0.0
-      external-editor: 3.1.0
-      figures: 3.2.0
-      lodash: 4.17.21
-      mute-stream: 0.0.8
-      ora: 5.4.1
-      run-async: 2.4.1
-      rxjs: 7.5.6
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      through: 2.3.8
-      wrap-ansi: 7.0.0
-    dev: true
-
   /internal-slot/1.0.3:
     resolution: {integrity: sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==}
     engines: {node: '>= 0.4'}
@@ -6780,10 +6250,6 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
-  /intersection-observer/0.12.2:
-    resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==}
-    dev: false
-
   /invariant/2.2.4:
     resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
     dependencies:
@@ -6866,11 +6332,6 @@ packages:
     dependencies:
       is-extglob: 2.1.1
 
-  /is-interactive/1.0.0:
-    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
-    engines: {node: '>=8'}
-    dev: true
-
   /is-module/1.0.0:
     resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
 
@@ -6960,25 +6421,11 @@ packages:
   /is-typedarray/1.0.0:
     resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
 
-  /is-unicode-supported/0.1.0:
-    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
-    engines: {node: '>=10'}
-    dev: true
-
-  /is-utf8/0.2.1:
-    resolution: {integrity: sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==}
-    dev: true
-
   /is-weakref/1.0.2:
     resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
     dependencies:
       call-bind: 1.0.2
 
-  /is-windows/1.0.2:
-    resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /is-wsl/2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
@@ -7080,7 +6527,7 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /jest-cli/27.5.1:
+  /jest-cli/27.5.1_ts-node@10.9.1:
     resolution: {integrity: sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     hasBin: true
@@ -7090,14 +6537,14 @@ packages:
       node-notifier:
         optional: true
     dependencies:
-      '@jest/core': 27.5.1
+      '@jest/core': 27.5.1_ts-node@10.9.1
       '@jest/test-result': 27.5.1
       '@jest/types': 27.5.1
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.10
       import-local: 3.1.0
-      jest-config: 27.5.1
+      jest-config: 27.5.1_ts-node@10.9.1
       jest-util: 27.5.1
       jest-validate: 27.5.1
       prompts: 2.4.2
@@ -7109,7 +6556,7 @@ packages:
       - ts-node
       - utf-8-validate
 
-  /jest-config/27.5.1:
+  /jest-config/27.5.1_ts-node@10.9.1:
     resolution: {integrity: sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     peerDependencies:
@@ -7142,6 +6589,7 @@ packages:
       pretty-format: 27.5.1
       slash: 3.0.0
       strip-json-comments: 3.1.1
+      ts-node: 10.9.1_ao52im6kiihokc7tdj7weudhra
     transitivePeerDependencies:
       - bufferutil
       - canvas
@@ -7156,7 +6604,7 @@ packages:
       diff-sequences: 24.9.0
       jest-get-type: 24.9.0
       pretty-format: 24.9.0
-    dev: false
+    dev: true
 
   /jest-diff/27.5.1:
     resolution: {integrity: sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==}
@@ -7214,7 +6662,7 @@ packages:
   /jest-get-type/24.9.0:
     resolution: {integrity: sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==}
     engines: {node: '>= 6'}
-    dev: false
+    dev: true
 
   /jest-get-type/27.5.1:
     resolution: {integrity: sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==}
@@ -7278,7 +6726,7 @@ packages:
       jest-diff: 24.9.0
       jest-get-type: 24.9.0
       pretty-format: 24.9.0
-    dev: false
+    dev: true
 
   /jest-matcher-utils/27.5.1:
     resolution: {integrity: sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==}
@@ -7505,7 +6953,7 @@ packages:
     dependencies:
       ansi-escapes: 4.3.2
       chalk: 4.1.2
-      jest: 27.5.1
+      jest: 27.5.1_ts-node@10.9.1
       jest-regex-util: 28.0.2
       jest-watcher: 28.1.3
       slash: 4.0.0
@@ -7561,7 +7009,7 @@ packages:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  /jest/27.5.1:
+  /jest/27.5.1_ts-node@10.9.1:
     resolution: {integrity: sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     hasBin: true
@@ -7571,9 +7019,9 @@ packages:
       node-notifier:
         optional: true
     dependencies:
-      '@jest/core': 27.5.1
+      '@jest/core': 27.5.1_ts-node@10.9.1
       import-local: 3.1.0
-      jest-cli: 27.5.1
+      jest-cli: 27.5.1_ts-node@10.9.1
     transitivePeerDependencies:
       - bufferutil
       - canvas
@@ -7581,10 +7029,6 @@ packages:
       - ts-node
       - utf-8-validate
 
-  /js-cookie/2.2.1:
-    resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==}
-    dev: false
-
   /js-sdsl/4.1.4:
     resolution: {integrity: sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==}
 
@@ -7654,10 +7098,6 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  /json-parse-better-errors/1.0.2:
-    resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
-    dev: true
-
   /json-parse-even-better-errors/2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
@@ -7673,10 +7113,6 @@ packages:
   /json-stable-stringify-without-jsonify/1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
-  /json-stringify-safe/5.0.1:
-    resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
-    dev: true
-
   /json5/1.0.1:
     resolution: {integrity: sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==}
     hasBin: true
@@ -7822,16 +7258,6 @@ packages:
       wrap-ansi: 7.0.0
     dev: true
 
-  /load-json-file/4.0.0:
-    resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
-    engines: {node: '>=4'}
-    dependencies:
-      graceful-fs: 4.2.10
-      parse-json: 4.0.0
-      pify: 3.0.0
-      strip-bom: 3.0.0
-    dev: true
-
   /loader-runner/4.3.0:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
     engines: {node: '>=6.11.5'}
@@ -7848,14 +7274,6 @@ packages:
     resolution: {integrity: sha512-HVl9ZqccQihZ7JM85dco1MvO9G+ONvxoGa9rkhzFsneGLKSUg1gJf9bWzhRhcvm2qChhWpebQhP44qxjKIUCaQ==}
     engines: {node: '>= 12.13.0'}
 
-  /locate-path/2.0.0:
-    resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==}
-    engines: {node: '>=4'}
-    dependencies:
-      p-locate: 2.0.0
-      path-exists: 3.0.0
-    dev: true
-
   /locate-path/3.0.0:
     resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
     engines: {node: '>=6'}
@@ -7882,14 +7300,6 @@ packages:
     resolution: {integrity: sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw==}
     dev: true
 
-  /lodash.ismatch/4.4.0:
-    resolution: {integrity: sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==}
-    dev: true
-
-  /lodash.map/4.6.0:
-    resolution: {integrity: sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q==}
-    dev: true
-
   /lodash.memoize/4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
 
@@ -7905,14 +7315,6 @@ packages:
   /lodash/4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
-  /log-symbols/4.1.0:
-    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
-    engines: {node: '>=10'}
-    dependencies:
-      chalk: 4.1.2
-      is-unicode-supported: 0.1.0
-    dev: true
-
   /log-update/4.0.0:
     resolution: {integrity: sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==}
     engines: {node: '>=10'}
@@ -7923,11 +7325,6 @@ packages:
       wrap-ansi: 6.2.0
     dev: true
 
-  /longest/2.0.1:
-    resolution: {integrity: sha512-Ajzxb8CM6WAnFjgiloPsI3bF+WCxcvhdIG3KNA2KN962+tdBsHcuQ4k4qX/EcS/2CRkcc0iAkR956Nib6aXU/Q==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /loose-envify/1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -7963,7 +7360,6 @@ packages:
 
   /make-error/1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
-    dev: true
 
   /makeerror/1.0.12:
     resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
@@ -8033,10 +7429,6 @@ packages:
   /merge-stream/2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
-  /merge/2.1.1:
-    resolution: {integrity: sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==}
-    dev: true
-
   /merge2/1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -8093,6 +7485,7 @@ packages:
   /min-indent/1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
+    dev: true
 
   /mini-css-extract-plugin/2.6.1_webpack@5.74.0:
     resolution: {integrity: sha512-wd+SD57/K6DiV7jIR34P+s3uckTRuQvx0tKPcvjFlrEylk6P4mQ2KSWk1hblj1Kxaqok7LogKOieygXqBczNlg==}
@@ -8140,11 +7533,6 @@ packages:
     dependencies:
       minimist: 1.2.6
 
-  /modify-values/1.0.1:
-    resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /moment-mini/2.24.0:
     resolution: {integrity: sha512-9ARkWHBs+6YJIvrIp0Ik5tyTTtP9PoV0Ssu2Ocq5y9v8+NOOpWiRshAp8c4rZVWTOe+157on/5G+zj5pwIQFEQ==}
     dev: false
@@ -8165,10 +7553,6 @@ packages:
       dns-packet: 5.4.0
       thunky: 1.1.0
 
-  /mute-stream/0.0.8:
-    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
-    dev: true
-
   /nanoid/3.3.4:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -8195,7 +7579,7 @@ packages:
       jsonp: 0.2.1
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
-      react-scripts: 5.0.1_vcopaw66ubzwqe5wj7m4edgwnq
+      react-scripts: 5.0.1_v2uhgyutubjd4jjlagvop2mfmq
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -8206,18 +7590,6 @@ packages:
       lower-case: 2.0.2
       tslib: 2.4.0
 
-  /node-fetch/2.6.7:
-    resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
-    engines: {node: 4.x || >=6.0.0}
-    peerDependencies:
-      encoding: ^0.1.0
-    peerDependenciesMeta:
-      encoding:
-        optional: true
-    dependencies:
-      whatwg-url: 5.0.0
-    dev: false
-
   /node-forge/1.3.1:
     resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
     engines: {node: '>= 6.13.0'}
@@ -8409,33 +7781,6 @@ packages:
       type-check: 0.4.0
       word-wrap: 1.2.3
 
-  /ora/5.4.1:
-    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
-    engines: {node: '>=10'}
-    dependencies:
-      bl: 4.1.0
-      chalk: 4.1.2
-      cli-cursor: 3.1.0
-      cli-spinners: 2.7.0
-      is-interactive: 1.0.0
-      is-unicode-supported: 0.1.0
-      log-symbols: 4.1.0
-      strip-ansi: 6.0.1
-      wcwidth: 1.0.1
-    dev: true
-
-  /os-tmpdir/1.0.2:
-    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /p-limit/1.3.0:
-    resolution: {integrity: sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==}
-    engines: {node: '>=4'}
-    dependencies:
-      p-try: 1.0.0
-    dev: true
-
   /p-limit/2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -8448,13 +7793,6 @@ packages:
     dependencies:
       yocto-queue: 0.1.0
 
-  /p-locate/2.0.0:
-    resolution: {integrity: sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==}
-    engines: {node: '>=4'}
-    dependencies:
-      p-limit: 1.3.0
-    dev: true
-
   /p-locate/3.0.0:
     resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
     engines: {node: '>=6'}
@@ -8487,11 +7825,6 @@ packages:
       '@types/retry': 0.12.0
       retry: 0.13.1
 
-  /p-try/1.0.0:
-    resolution: {integrity: sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==}
-    engines: {node: '>=4'}
-    dev: true
-
   /p-try/2.2.0:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
@@ -8508,14 +7841,6 @@ packages:
     dependencies:
       callsites: 3.1.0
 
-  /parse-json/4.0.0:
-    resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==}
-    engines: {node: '>=4'}
-    dependencies:
-      error-ex: 1.3.2
-      json-parse-better-errors: 1.0.2
-    dev: true
-
   /parse-json/5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
@@ -8525,11 +7850,6 @@ packages:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
-  /parse-passwd/1.0.0:
-    resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /parse5/6.0.1:
     resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
 
@@ -8570,13 +7890,6 @@ packages:
   /path-to-regexp/0.1.7:
     resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
 
-  /path-type/3.0.0:
-    resolution: {integrity: sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==}
-    engines: {node: '>=4'}
-    dependencies:
-      pify: 3.0.0
-    dev: true
-
   /path-type/4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -8604,11 +7917,6 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
-  /pify/3.0.0:
-    resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
-    engines: {node: '>=4'}
-    dev: true
-
   /pirates/4.0.5:
     resolution: {integrity: sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==}
     engines: {node: '>= 6'}
@@ -8884,7 +8192,7 @@ packages:
       postcss: 8.4.16
       postcss-value-parser: 4.2.0
 
-  /postcss-load-config/3.1.4_postcss@8.4.16:
+  /postcss-load-config/3.1.4_57znarxsqwmnneadci5z5fd5gu:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
     peerDependencies:
@@ -8898,6 +8206,7 @@ packages:
     dependencies:
       lilconfig: 2.0.6
       postcss: 8.4.16
+      ts-node: 10.9.1_ao52im6kiihokc7tdj7weudhra
       yaml: 1.10.2
 
   /postcss-loader/6.2.1_qjv4cptcpse3y5hrjkrbb7drda:
@@ -9365,7 +8674,7 @@ packages:
       ansi-regex: 4.1.1
       ansi-styles: 3.2.1
       react-is: 16.13.1
-    dev: false
+    dev: true
 
   /pretty-format/27.5.1:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
@@ -9430,17 +8739,14 @@ packages:
     resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
     engines: {node: '>=6'}
 
-  /purgecss-webpack-plugin/4.1.3:
+  /purgecss-webpack-plugin/4.1.3_webpack@5.74.0:
     resolution: {integrity: sha512-1OHS0WE935w66FjaFSlV06ycmn3/A8a6Q+iVUmmCYAujQ1HPdX+psMXUhASEW0uF1PYEpOlhMc5ApigVqYK08g==}
+    peerDependencies:
+      webpack: '*'
     dependencies:
       purgecss: 4.1.3
       webpack: 5.74.0
       webpack-sources: 3.2.3
-    transitivePeerDependencies:
-      - '@swc/core'
-      - esbuild
-      - uglify-js
-      - webpack-cli
     dev: true
 
   /purgecss/4.1.3:
@@ -9525,7 +8831,7 @@ packages:
     peerDependencies:
       react-scripts: '>=2.1.3'
     dependencies:
-      react-scripts: 5.0.1_vcopaw66ubzwqe5wj7m4edgwnq
+      react-scripts: 5.0.1_v2uhgyutubjd4jjlagvop2mfmq
       semver: 5.7.1
     dev: true
 
@@ -9687,7 +8993,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /react-scripts/5.0.1_vcopaw66ubzwqe5wj7m4edgwnq:
+  /react-scripts/5.0.1_v2uhgyutubjd4jjlagvop2mfmq:
     resolution: {integrity: sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
@@ -9721,7 +9027,7 @@ packages:
       fs-extra: 10.1.0
       html-webpack-plugin: 5.5.0_webpack@5.74.0
       identity-obj-proxy: 3.0.0
-      jest: 27.5.1
+      jest: 27.5.1_ts-node@10.9.1
       jest-resolve: 27.5.1
       jest-watch-typeahead: 1.1.0_jest@27.5.1
       mini-css-extract-plugin: 2.6.1_webpack@5.74.0
@@ -9741,7 +9047,7 @@ packages:
       semver: 7.3.7
       source-map-loader: 3.0.1_webpack@5.74.0
       style-loader: 3.3.1_webpack@5.74.0
-      tailwindcss: 3.1.8_postcss@8.4.16
+      tailwindcss: 3.1.8_57znarxsqwmnneadci5z5fd5gu
       terser-webpack-plugin: 5.3.6_webpack@5.74.0
       typescript: 4.8.3
       webpack: 5.74.0
@@ -9808,14 +9114,6 @@ packages:
     dependencies:
       pify: 2.3.0
 
-  /read-pkg-up/3.0.0:
-    resolution: {integrity: sha512-YFzFrVvpC6frF1sz8psoHDBGF7fLPc+llq/8NB43oagqWkx8ar5zYtsTORtOjw9W2RHLpWP+zTWwBvf1bCmcSw==}
-    engines: {node: '>=4'}
-    dependencies:
-      find-up: 2.1.0
-      read-pkg: 3.0.0
-    dev: true
-
   /read-pkg-up/7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -9825,15 +9123,6 @@ packages:
       type-fest: 0.8.1
     dev: true
 
-  /read-pkg/3.0.0:
-    resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==}
-    engines: {node: '>=4'}
-    dependencies:
-      load-json-file: 4.0.0
-      normalize-package-data: 2.5.0
-      path-type: 3.0.0
-    dev: true
-
   /read-pkg/5.2.0:
     resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
     engines: {node: '>=8'}
@@ -9881,6 +9170,7 @@ packages:
     dependencies:
       indent-string: 4.0.0
       strip-indent: 3.0.0
+    dev: true
 
   /regenerate-unicode-properties/10.1.0:
     resolution: {integrity: sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==}
@@ -9958,24 +9248,12 @@ packages:
   /requires-port/1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
 
-  /resize-observer-polyfill/1.5.1:
-    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
-    dev: false
-
   /resolve-cwd/3.0.0:
     resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
     engines: {node: '>=8'}
     dependencies:
       resolve-from: 5.0.0
 
-  /resolve-dir/1.0.1:
-    resolution: {integrity: sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      expand-tilde: 2.0.2
-      global-modules: 1.0.0
-    dev: true
-
   /resolve-from/4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -10012,7 +9290,7 @@ packages:
   /resolve-url/0.2.1:
     resolution: {integrity: sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==}
     deprecated: https://github.com/lydell/resolve-url#deprecated
-    dev: false
+    dev: true
 
   /resolve.exports/1.1.0:
     resolution: {integrity: sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==}
@@ -10082,11 +9360,6 @@ packages:
     optionalDependencies:
       fsevents: 2.3.2
 
-  /run-async/2.4.1:
-    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
-    engines: {node: '>=0.12.0'}
-    dev: true
-
   /run-parallel/1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
@@ -10191,14 +9464,9 @@ packages:
     dependencies:
       '@types/json-schema': 7.0.11
       ajv: 8.11.0
-      ajv-formats: 2.1.1
+      ajv-formats: 2.1.1_ajv@8.11.0
       ajv-keywords: 5.1.0_ajv@8.11.0
 
-  /screenfull/5.2.0:
-    resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /select-hose/2.0.0:
     resolution: {integrity: sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==}
 
@@ -10383,7 +9651,7 @@ packages:
       resolve-url: 0.2.1
       source-map-url: 0.4.1
       urix: 0.1.0
-    dev: false
+    dev: true
 
   /source-map-support/0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
@@ -10394,7 +9662,7 @@ packages:
   /source-map-url/0.4.1:
     resolution: {integrity: sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==}
     deprecated: See https://github.com/lydell/source-map-url#deprecated
-    dev: false
+    dev: true
 
   /source-map/0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
@@ -10459,12 +9727,6 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /split/1.0.1:
-    resolution: {integrity: sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==}
-    dependencies:
-      through: 2.3.8
-    dev: true
-
   /split2/3.2.2:
     resolution: {integrity: sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==}
     dependencies:
@@ -10616,6 +9878,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       min-indent: 1.0.1
+    dev: true
 
   /strip-json-comments/3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
@@ -10719,7 +9982,7 @@ packages:
   /symbol-tree/3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
-  /tailwindcss/3.1.8_postcss@8.4.16:
+  /tailwindcss/3.1.8_57znarxsqwmnneadci5z5fd5gu:
     resolution: {integrity: sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==}
     engines: {node: '>=12.13.0'}
     hasBin: true
@@ -10742,7 +10005,7 @@ packages:
       postcss: 8.4.16
       postcss-import: 14.1.0_postcss@8.4.16
       postcss-js: 4.0.0_postcss@8.4.16
-      postcss-load-config: 3.1.4_postcss@8.4.16
+      postcss-load-config: 3.1.4_57znarxsqwmnneadci5z5fd5gu
       postcss-nested: 5.0.6_postcss@8.4.16
       postcss-selector-parser: 6.0.10
       postcss-value-parser: 4.2.0
@@ -10763,14 +10026,6 @@ packages:
     resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
     engines: {node: '>=8'}
 
-  /tempfile/3.0.0:
-    resolution: {integrity: sha512-uNFCg478XovRi85iD42egu+eSFUmmka750Jy7L5tfHI5hQKKtbPnxaSaXAbBqCDYrw3wx4tXjKwci4/QmsZJxw==}
-    engines: {node: '>=8'}
-    dependencies:
-      temp-dir: 2.0.0
-      uuid: 3.4.0
-    dev: true
-
   /tempy/0.6.0:
     resolution: {integrity: sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==}
     engines: {node: '>=10'}
@@ -10843,13 +10098,6 @@ packages:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
     dev: true
 
-  /through2/2.0.5:
-    resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
-    dependencies:
-      readable-stream: 2.3.7
-      xtend: 4.0.2
-    dev: true
-
   /through2/4.0.2:
     resolution: {integrity: sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==}
     dependencies:
@@ -10859,13 +10107,6 @@ packages:
   /thunky/1.1.0:
     resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
 
-  /tmp/0.0.33:
-    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
-    engines: {node: '>=0.6.0'}
-    dependencies:
-      os-tmpdir: 1.0.2
-    dev: true
-
   /tmpl/1.0.5:
     resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
 
@@ -10896,10 +10137,6 @@ packages:
       universalify: 0.2.0
       url-parse: 1.5.10
 
-  /tr46/0.0.3:
-    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
-    dev: false
-
   /tr46/1.0.1:
     resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
     dependencies:
@@ -10919,6 +10156,36 @@ packages:
   /tryer/1.0.1:
     resolution: {integrity: sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==}
 
+  /ts-node/10.9.1_ao52im6kiihokc7tdj7weudhra:
+    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.9
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.3
+      '@types/node': 16.11.59
+      acorn: 8.8.0
+      acorn-walk: 8.2.0
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 4.8.3
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+
   /ts-node/10.9.1_ck2axrxkiif44rdbzjywaqjysa:
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
@@ -10950,15 +10217,6 @@ packages:
       yn: 3.1.1
     dev: true
 
-  /tsconfig-paths-webpack-plugin/4.0.0:
-    resolution: {integrity: sha512-fw/7265mIWukrSHd0i+wSwx64kYUSAKPfxRDksjKIYTxSAp9W9/xcZVBF4Kl0eqQd5eBpAQ/oQrc5RyM/0c1GQ==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      chalk: 4.1.2
-      enhanced-resolve: 5.10.0
-      tsconfig-paths: 4.1.0
-    dev: true
-
   /tsconfig-paths/3.14.1:
     resolution: {integrity: sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==}
     dependencies:
@@ -10967,15 +10225,6 @@ packages:
       minimist: 1.2.6
       strip-bom: 3.0.0
 
-  /tsconfig-paths/4.1.0:
-    resolution: {integrity: sha512-AHx4Euop/dXFC+Vx589alFba8QItjF+8hf8LtmuiCwHyI4rHXQtOOENaM8kvYf5fR0dRChy3wzWIZ9WbB7FWow==}
-    engines: {node: '>=6'}
-    dependencies:
-      json5: 2.2.1
-      minimist: 1.2.6
-      strip-bom: 3.0.0
-    dev: true
-
   /tslib/1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
@@ -11051,14 +10300,6 @@ packages:
     engines: {node: '>=4.2.0'}
     hasBin: true
 
-  /uglify-js/3.17.1:
-    resolution: {integrity: sha512-+juFBsLLw7AqMaqJ0GFvlsGZwdQfI2ooKQB39PSBgMnMakcFosi9O8jCwE+2/2nMNcc0z63r9mwjoDG8zr+q0Q==}
-    engines: {node: '>=0.8.0'}
-    hasBin: true
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /unbox-primitive/1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
     dependencies:
@@ -11141,7 +10382,7 @@ packages:
   /urix/0.1.0:
     resolution: {integrity: sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==}
     deprecated: Please see https://github.com/lydell/urix#deprecated
-    dev: false
+    dev: true
 
   /url-parse/1.5.10:
     resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
@@ -11175,19 +10416,12 @@ packages:
     resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
     engines: {node: '>= 0.4.0'}
 
-  /uuid/3.4.0:
-    resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==}
-    deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
-    hasBin: true
-    dev: true
-
   /uuid/8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
 
   /v8-compile-cache-lib/3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
-    dev: true
 
   /v8-to-istanbul/8.1.1:
     resolution: {integrity: sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==}
@@ -11247,20 +10481,6 @@ packages:
     dependencies:
       minimalistic-assert: 1.0.1
 
-  /wcwidth/1.0.1:
-    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
-    dependencies:
-      defaults: 1.0.3
-    dev: true
-
-  /web-vitals/2.1.4:
-    resolution: {integrity: sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg==}
-    dev: true
-
-  /webidl-conversions/3.0.1:
-    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
-    dev: false
-
   /webidl-conversions/4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
 
@@ -11421,13 +10641,6 @@ packages:
   /whatwg-mimetype/2.3.0:
     resolution: {integrity: sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==}
 
-  /whatwg-url/5.0.0:
-    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
-    dependencies:
-      tr46: 0.0.3
-      webidl-conversions: 3.0.1
-    dev: false
-
   /whatwg-url/7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
     dependencies:
@@ -11469,10 +10682,6 @@ packages:
     resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}
     engines: {node: '>=0.10.0'}
 
-  /wordwrap/1.0.0:
-    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
-    dev: true
-
   /workbox-background-sync/6.5.4:
     resolution: {integrity: sha512-0r4INQZMyPky/lj4Ou98qxcThrETucOde+7mRGJl13MPJugQNKeZQOdIJe/1AchOP23cTqHcN/YVpD6r8E6I8g==}
     dependencies:
@@ -11743,7 +10952,6 @@ packages:
   /yn/3.1.1:
     resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
     engines: {node: '>=6'}
-    dev: true
 
   /yocto-queue/0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
diff --git a/ui/public/index.html b/ui/public/index.html
index efa315fc..304d295f 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -2,7 +2,6 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
 <!--    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />-->
@@ -24,7 +23,34 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root">
+      <style>
+        @keyframes _doc-spin {
+          to { transform: rotate(360deg) }
+        }
+        #doc-spinner {
+          position: fixed;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+        #doc-spinner .spinner {
+          box-sizing: border-box;
+          display: inline-block;
+          width: 2rem;
+          height: 2rem;
+          vertical-align: -.125em;
+          border: .25rem solid currentColor;
+          border-right-color: transparent;
+          color: rgba(108, 117, 125, .75);
+          border-radius: 50%;
+          animation: 0.75s linear infinite _doc-spin;
+        }
+      </style>
+      <div id="doc-spinner">
+        <div class="spinner"></div>
+      </div>
+    </div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/ui/scripts/preinstall.js b/ui/scripts/preinstall.js
index 076ad606..2faddacf 100644
--- a/ui/scripts/preinstall.js
+++ b/ui/scripts/preinstall.js
@@ -1,5 +1,7 @@
 // There is a bug when using npm to install: the execution of preinstall is after install, so when this prompt is displayed, the dependent packages have already been installed.
 if (!/pnpm/.test(process.env.npm_execpath)) {
-    console.warn(`\u001b[33mThis repository requires using pnpm as the package manager for scripts to work properly.\u001b[39m\n`)
-    process.exit(1)
-}
\ No newline at end of file
+  console.warn(
+    `\u001b[33mThis repository requires using pnpm as the package manager for scripts to work properly.\u001b[39m\n`,
+  );
+  process.exit(1);
+}
diff --git a/ui/src/common/constants.ts b/ui/src/common/constants.ts
index 1bf1f355..0f5b55d0 100644
--- a/ui/src/common/constants.ts
+++ b/ui/src/common/constants.ts
@@ -43,7 +43,7 @@ export const ADMIN_NAV_MENUS = [
   },
   {
     name: 'contents',
-    child: [{ name: 'questions' }, { name: 'answers' }],
+    children: [{ name: 'questions' }, { name: 'answers' }],
   },
   {
     name: 'users',
@@ -54,10 +54,19 @@ export const ADMIN_NAV_MENUS = [
   },
   {
     name: 'settings',
-    child: [{ name: 'general' }, { name: 'interface' }, { name: 'smtp' }],
+    children: [
+      { name: 'general' },
+      { name: 'interface' },
+      { name: 'branding' },
+      { name: 'smtp' },
+      { name: 'legal' },
+      { name: 'write' },
+    ],
   },
 ];
 
+export const ADMIN_LEGAL_MENUS = [{ name: 'tos' }, { name: 'privacy' }];
+
 export const TIMEZONES = [
   {
     label: 'Africa',
diff --git a/ui/src/common/interface.ts b/ui/src/common/interface.ts
index 9ea391c7..9e933fc1 100644
--- a/ui/src/common/interface.ts
+++ b/ui/src/common/interface.ts
@@ -24,6 +24,8 @@ export interface ReportParams {
 export interface TagBase {
   display_name: string;
   slug_name: string;
+  recommend: boolean;
+  reserved: boolean;
 }
 
 export interface Tag extends TagBase {
@@ -126,7 +128,8 @@ export interface UserInfoRes extends UserInfoBase {
   [prop: string]: any;
 }
 
-export interface AvatarUploadReq {
+export type UploadType = 'post' | 'avatar' | 'branding';
+export interface UploadReq {
   file: FormData;
 }
 
@@ -266,7 +269,6 @@ export interface AdminSettingsGeneral {
 }
 
 export interface AdminSettingsInterface {
-  logo: string;
   language: string;
   theme: string;
   time_zone?: string;
@@ -285,10 +287,31 @@ export interface AdminSettingsSmtp {
 }
 
 export interface SiteSettings {
+  branding: AdmingSettingBranding;
   general: AdminSettingsGeneral;
   interface: AdminSettingsInterface;
 }
 
+export interface AdmingSettingBranding {
+  logo: string;
+  square_icon: string;
+  mobile_logo?: string;
+  favicon?: string;
+}
+
+export interface AdminSettingsLegal {
+  privacy_policy_original_text?: string;
+  privacy_policy_parsed_text?: string;
+  terms_of_service_original_text?: string;
+  terms_of_service_parsed_text?: string;
+}
+
+export interface AdminSettingsWrite {
+  recommend_tags: string[];
+  required_tag: string;
+  reserved_tags: string[];
+}
+
 /**
  * @description interface for Activity
  */
diff --git a/ui/src/components/AccordionNav/index.tsx b/ui/src/components/AccordionNav/index.tsx
index b3403bc8..cf5620c2 100644
--- a/ui/src/components/AccordionNav/index.tsx
+++ b/ui/src/components/AccordionNav/index.tsx
@@ -8,7 +8,7 @@ import { useAccordionButton } from 'react-bootstrap/AccordionButton';
 import { Icon } from '@/components';
 
 function MenuNode({ menu, callback, activeKey, isLeaf = false }) {
-  const { t } = useTranslation('translation', { keyPrefix: 'admin.nav_menus' });
+  const { t } = useTranslation('translation', { keyPrefix: 'nav_menus' });
   const accordionClick = useAccordionButton(menu.name);
   const menuOnClick = (evt) => {
     evt.preventDefault();
@@ -44,30 +44,45 @@ function MenuNode({ menu, callback, activeKey, isLeaf = false }) {
 
 interface AccordionProps {
   menus: any[];
+  path?: string;
 }
-const AccordionNav: FC<AccordionProps> = ({ menus }) => {
+const AccordionNav: FC<AccordionProps> = ({ menus, path = '/' }) => {
   const navigate = useNavigate();
-  let activeKey = menus[0].name;
-  const pathMatch = useMatch('/admin/*');
+  const pathMatch = useMatch(`${path}*`);
+  if (!menus.length) {
+    return null;
+  }
+  // auto set menu fields
+  menus.forEach((m) => {
+    if (!Array.isArray(m.children)) {
+      m.children = [];
+    }
+    m.children.forEach((sm) => {
+      if (!Array.isArray(sm.children)) {
+        sm.children = [];
+      }
+    });
+  });
   const splat = pathMatch && pathMatch.params['*'];
+  let activeKey = menus[0].name;
   if (splat) {
     activeKey = splat;
   }
   const menuClick = (clickedMenu) => {
     const menuKey = clickedMenu.name;
-    if (Array.isArray(clickedMenu.child) && clickedMenu.child.length) {
+    if (clickedMenu.children.length) {
       return;
     }
     if (activeKey !== menuKey) {
-      const routePath = `/admin/${menuKey}`;
+      const routePath = `${path}${menuKey}`;
       navigate(routePath);
     }
   };
 
   let defaultOpenKey;
   menus.forEach((li) => {
-    if (Array.isArray(li.child) && li.child.length) {
-      const matchedChild = li.child.find((el) => {
+    if (li.children.length) {
+      const matchedChild = li.children.find((el) => {
         return el.name === activeKey;
       });
       if (matchedChild) {
@@ -83,10 +98,10 @@ const AccordionNav: FC<AccordionProps> = ({ menus }) => {
           return (
             <React.Fragment key={li.name}>
               <MenuNode menu={li} callback={menuClick} activeKey={activeKey} />
-              {Array.isArray(li.child) ? (
+              {li.children.length ? (
                 <Accordion.Collapse eventKey={li.name} className="ms-4">
                   <Stack direction="vertical" gap={1}>
-                    {li.child?.map((leaf) => {
+                    {li.children.map((leaf) => {
                       return (
                         <MenuNode
                           menu={leaf}
diff --git a/ui/src/components/AdminHeader/index.tsx b/ui/src/components/AdminHeader/index.tsx
deleted file mode 100644
index cb5d6401..00000000
--- a/ui/src/components/AdminHeader/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FC, memo } from 'react';
-import { Container } from 'react-bootstrap';
-import { useTranslation } from 'react-i18next';
-import { useMatch } from 'react-router-dom';
-
-const Index: FC = () => {
-  const { t } = useTranslation('translation', {
-    keyPrefix: 'admin.admin_header',
-  });
-  const adminPathMatch = useMatch('/admin/*');
-  if (!adminPathMatch) {
-    return null;
-  }
-  return (
-    <div className="bg-light py-2">
-      <Container className="py-1">
-        <h6 className="mb-0 fw-bold lh-base">{t('title')}</h6>
-      </Container>
-    </div>
-  );
-};
-
-export default memo(Index);
diff --git a/ui/src/components/BrandUpload/index.tsx b/ui/src/components/BrandUpload/index.tsx
new file mode 100644
index 00000000..c921fbdf
--- /dev/null
+++ b/ui/src/components/BrandUpload/index.tsx
@@ -0,0 +1,44 @@
+import { FC } from 'react';
+import { ButtonGroup, Button } from 'react-bootstrap';
+
+import { Icon, UploadImg } from '@/components';
+import { UploadType } from '@/common/interface';
+
+interface Props {
+  type: UploadType;
+  value: string;
+  onChange: (value: string) => void;
+  acceptType?: string;
+}
+
+const Index: FC<Props> = ({ type = 'post', value, onChange, acceptType }) => {
+  const onUpload = (imgPath: string) => {
+    onChange(imgPath);
+  };
+
+  const onRemove = () => {
+    onChange('');
+  };
+  return (
+    <div className="d-flex">
+      <div className="bg-gray-300 upload-img-wrap me-2 d-flex align-items-center justify-content-center">
+        <img src={value} alt="" height={100} />
+      </div>
+      <ButtonGroup vertical className="fit-content">
+        <UploadImg
+          type={type}
+          uploadCallback={onUpload}
+          className="mb-0"
+          acceptType={acceptType}>
+          <Icon name="cloud-upload" />
+        </UploadImg>
+
+        <Button variant="outline-secondary" onClick={onRemove}>
+          <Icon name="trash" />
+        </Button>
+      </ButtonGroup>
+    </div>
+  );
+};
+
+export default Index;
diff --git a/ui/src/components/Editor/ToolBars/image.tsx b/ui/src/components/Editor/ToolBars/image.tsx
index bfa4c530..2eb1c5e8 100644
--- a/ui/src/components/Editor/ToolBars/image.tsx
+++ b/ui/src/components/Editor/ToolBars/image.tsx
@@ -61,7 +61,7 @@ const Image: FC<IEditorContext> = ({ editor }) => {
     files: FileList,
   ): Promise<{ url: string; name: string }[]> => {
     const promises = Array.from(files).map(async (file) => {
-      const url = await uploadImage(file);
+      const url = await uploadImage({ file, type: 'post' });
 
       return {
         name: file.name,
@@ -209,7 +209,7 @@ const Image: FC<IEditorContext> = ({ editor }) => {
       return;
     }
 
-    uploadImage(e.target.files[0]).then((url) => {
+    uploadImage({ file: e.target.files[0], type: 'post' }).then((url) => {
       setLink({ ...link, value: url });
     });
   };
diff --git a/ui/src/components/Editor/utils/index.ts b/ui/src/components/Editor/utils/index.ts
index c38f5ca9..8c767559 100644
--- a/ui/src/components/Editor/utils/index.ts
+++ b/ui/src/components/Editor/utils/index.ts
@@ -1,6 +1,5 @@
 import type { Editor, Position } from 'codemirror';
 import type CodeMirror from 'codemirror';
-// import 'highlight.js/styles/github.css';
 import 'katex/dist/katex.min.css';
 
 export function createEditorUtils(
@@ -114,9 +113,4 @@ export function htmlRender(el: HTMLElement | null) {
       });
     },
   );
-  // import('highlight.js').then(({ default: highlight }) => {
-  //   el.querySelectorAll('pre code').forEach((code) => {
-  //     highlight.highlightElement(code as HTMLElement);
-  //   });
-  // });
 }
diff --git a/ui/src/components/FollowingTags/index.tsx b/ui/src/components/FollowingTags/index.tsx
index 9e3156b0..a9fa3a0c 100644
--- a/ui/src/components/FollowingTags/index.tsx
+++ b/ui/src/components/FollowingTags/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { NavLink } from 'react-router-dom';
 
 import { TagSelector, Tag } from '@/components';
-import { tryLoggedAndActicevated } from '@/utils/guard';
+import { tryLoggedAndActivated } from '@/utils/guard';
 import { useFollowingTags, followTags } from '@/services';
 
 const Index: FC = () => {
@@ -32,7 +32,7 @@ const Index: FC = () => {
     });
   };
 
-  if (!tryLoggedAndActicevated().ok) {
+  if (!tryLoggedAndActivated().ok) {
     return null;
   }
 
@@ -73,11 +73,7 @@ const Index: FC = () => {
           <>
             {followingTags.map((item) => {
               const slugName = item?.slug_name;
-              return (
-                <Tag key={slugName} className="m-1" href={`/tags/${slugName}`}>
-                  {slugName}
-                </Tag>
-              );
+              return <Tag key={slugName} className="m-1" data={item} />;
             })}
           </>
         ) : (
diff --git a/ui/src/components/Header/index.tsx b/ui/src/components/Header/index.tsx
index 8681c94c..d4af750c 100644
--- a/ui/src/components/Header/index.tsx
+++ b/ui/src/components/Header/index.tsx
@@ -17,7 +17,7 @@ import {
   useLocation,
 } from 'react-router-dom';
 
-import { loggedUserInfoStore, siteInfoStore, interfaceStore } from '@/stores';
+import { loggedUserInfoStore, siteInfoStore, brandingStore } from '@/stores';
 import { logout, useQueryNotificationStatus } from '@/services';
 import { RouteAlias } from '@/router/alias';
 
@@ -33,7 +33,7 @@ const Header: FC = () => {
   const q = urlSearch.get('q');
   const [searchStr, setSearch] = useState('');
   const siteInfo = siteInfoStore((state) => state.siteInfo);
-  const { interface: interfaceInfo } = interfaceStore();
+  const brandingInfo = brandingStore((state) => state.branding);
   const { data: redDot } = useQueryNotificationStatus();
   const location = useLocation();
   const handleInput = (val) => {
@@ -73,10 +73,10 @@ const Header: FC = () => {
 
         <div className="d-flex justify-content-between align-items-center nav-grow flex-nowrap">
           <Navbar.Brand to="/" as={Link} className="lh-1 me-0 me-sm-3">
-            {interfaceInfo.logo ? (
+            {brandingInfo.logo ? (
               <img
                 className="logo rounded-1 me-0"
-                src={interfaceInfo.logo}
+                src={brandingInfo.logo}
                 alt=""
               />
             ) : (
diff --git a/ui/src/components/Label/index.tsx b/ui/src/components/Label/index.tsx
new file mode 100644
index 00000000..a2781bd1
--- /dev/null
+++ b/ui/src/components/Label/index.tsx
@@ -0,0 +1,27 @@
+import React, { memo, FC } from 'react';
+
+import classNames from 'classnames';
+
+import { labelStyle } from '@/utils';
+
+interface IProps {
+  className?: string;
+  children?: React.ReactNode;
+  color: string;
+}
+
+const Index: FC<IProps> = ({ className = '', children, color }) => {
+  // hover
+  const [hover, setHover] = React.useState(false);
+  return (
+    <span
+      className={classNames('badge-label rounded-1', className)}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={labelStyle(color, hover)}>
+      {children}
+    </span>
+  );
+};
+
+export default memo(Index);
diff --git a/ui/src/components/LabelsCard/index.tsx b/ui/src/components/LabelsCard/index.tsx
new file mode 100644
index 00000000..f90187f1
--- /dev/null
+++ b/ui/src/components/LabelsCard/index.tsx
@@ -0,0 +1,33 @@
+import { Card, Dropdown, Form } from 'react-bootstrap';
+
+import Label from '../Label';
+
+const Labels = ({ className }) => {
+  return (
+    <Card className={className}>
+      <Card.Header className="d-flex justify-content-between align-items-center">
+        <Card.Title className="mb-0">Labels</Card.Title>
+
+        <Dropdown align="end">
+          <Dropdown.Toggle variant="link" className="no-toggle">
+            Edit
+          </Dropdown.Toggle>
+
+          <Dropdown.Menu className="p-3">
+            <Form.Check className="mb-2" type="checkbox" label="featured" />
+            <Form.Check className="mb-2" type="checkbox" label="featured" />
+            <Form.Check className="mb-2" type="checkbox" label="featured" />
+            <Form.Check type="checkbox" label="featured" />
+          </Dropdown.Menu>
+        </Dropdown>
+      </Card.Header>
+      <Card.Body>
+        <Label className="badge-label" color="#DC3545">
+          featured
+        </Label>
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default Labels;
diff --git a/ui/src/components/QuestionList/index.tsx b/ui/src/components/QuestionList/index.tsx
index a45cd401..44ae2fa4 100644
--- a/ui/src/components/QuestionList/index.tsx
+++ b/ui/src/components/QuestionList/index.tsx
@@ -158,14 +158,7 @@ const QuestionList: FC<Props> = ({ source }) => {
                 {Array.isArray(li.tags)
                   ? li.tags.map((tag) => {
                       return (
-                        <Tag
-                          key={tag.slug_name}
-                          className="m-1"
-                          href={`/tags/${
-                            tag.main_tag_slug_name || tag.slug_name
-                          }`}>
-                          {tag.slug_name}
-                        </Tag>
+                        <Tag key={tag.slug_name} className="m-1" data={tag} />
                       );
                     })
                   : null}
diff --git a/ui/src/components/SchemaForm/README.md b/ui/src/components/SchemaForm/README.md
new file mode 100644
index 00000000..46676a8f
--- /dev/null
+++ b/ui/src/components/SchemaForm/README.md
@@ -0,0 +1,79 @@
+# SchemaForm User Guide
+
+## Introduction
+
+SchemaForm is a component that can be used to render a form based on a [JSON schema](https://json-schema.org/understanding-json-schema/index.html).
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import React from 'react';
+import { SchemaForm, initFormData, JSONSchema, UISchema } from '@/components';
+
+const schema: JSONSchema = {
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+      title: 'Name',
+    },
+    age: {
+      type: 'number',
+      title: 'Age',
+    },
+    sex:{
+      type: 'boolean',
+      title: 'sex',
+      enum: [1, 2],
+      enumNames: ['male', 'female'],
+    }
+  },
+};
+
+const uiSchema: UISchema = {
+  name: {
+    'ui:widget': 'input',
+  },
+  age: {
+    'ui:widget': 'input',
+    'ui:options': {
+      type: 'number'
+    }
+  },
+  sex: {
+    'ui:widget': 'radio',
+  }
+};
+
+// form component
+
+const Form = () => {
+  const [formData, setFormData] = useState(initFormData(schema));
+  return (
+    <SchemaForm
+      schema={schema}
+      uiSchema={uiSchema}
+      formData={formData}
+      onChange={console.log}
+    />
+  );
+};
+```
+
+## Props
+
+| Property | Description                              | Type                                      | Default |
+| -------- | ---------------------------------------- | ----------------------------------------- | ------- |
+| schema   | JSON schema                              | [JSONSchema](index.tsx#L9)                | -       |
+| uiSchema | UI schema                                | [UISchema](index.tsx#L24)                 | -       |
+| formData | Form data                                | [FormData](index.tsx#L66)                 | -       |
+| onChange | Callback function when form data changes | (data: [FormData](index.tsx#L66)) => void | -       |
+| onSubmit | Callback function when form is submitted | (data: React.FormEvent) => void           | -       |
+
+## reference
+
+- [json schema](https://json-schema.org/understanding-json-schema/index.html)
+- [react-jsonschema-form](http://rjsf-team.github.io/react-jsonschema-form/)
+- [vue-json-schema-form](https://github.com/lljj-x/vue-json-schema-form/)
diff --git a/ui/src/components/SchemaForm/index.tsx b/ui/src/components/SchemaForm/index.tsx
new file mode 100644
index 00000000..1d36e7e9
--- /dev/null
+++ b/ui/src/components/SchemaForm/index.tsx
@@ -0,0 +1,415 @@
+import { FC } from 'react';
+import { Form, Button, Stack } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import BrandUpload from '../BrandUpload';
+import TimeZonePicker from '../TimeZonePicker';
+import type * as Type from '@/common/interface';
+
+export interface JSONSchema {
+  title: string;
+  description?: string;
+  required?: string[];
+  properties: {
+    [key: string]: {
+      type: 'string' | 'boolean';
+      title: string;
+      description?: string;
+      enum?: Array<string | boolean>;
+      enumNames?: string[];
+      default?: string | boolean;
+    };
+  };
+}
+export interface UISchema {
+  [key: string]: {
+    'ui:widget'?:
+      | 'textarea'
+      | 'text'
+      | 'checkbox'
+      | 'radio'
+      | 'select'
+      | 'upload'
+      | 'timezone'
+      | 'switch';
+    'ui:options'?: {
+      rows?: number;
+      placeholder?: string;
+      type?:
+        | 'color'
+        | 'date'
+        | 'datetime-local'
+        | 'email'
+        | 'month'
+        | 'number'
+        | 'password'
+        | 'range'
+        | 'search'
+        | 'tel'
+        | 'text'
+        | 'time'
+        | 'url'
+        | 'week';
+      empty?: string;
+      validator?: (value) => Promise<string | true | void> | true | string;
+      textRender?: () => React.ReactElement;
+      imageType?: Type.UploadType;
+      acceptType?: string;
+    };
+  };
+}
+
+interface IProps {
+  schema: JSONSchema;
+  uiSchema?: UISchema;
+  formData?: Type.FormDataType;
+  onChange?: (data: Type.FormDataType) => void;
+  onSubmit: (e: React.FormEvent) => void;
+}
+
+/**
+ * json schema form
+ * @param schema json schema
+ * @param uiSchema ui schema
+ * @param formData form data
+ * @param onChange change event
+ * @param onSubmit submit event
+ */
+const SchemaForm: FC<IProps> = ({
+  schema,
+  uiSchema = {},
+  formData = {},
+  onChange,
+  onSubmit,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'form',
+  });
+
+  const { required = [], properties } = schema;
+
+  // check required field
+  const excludes = required.filter((key) => !properties[key]);
+
+  if (excludes.length > 0) {
+    console.error(t('not_found_props', { key: excludes.join(', ') }));
+  }
+
+  const keys = Object.keys(properties);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    const data = {
+      ...formData,
+      [name]: { ...formData[name], value, isInvalid: false },
+    };
+    if (onChange instanceof Function) {
+      onChange(data);
+    }
+  };
+
+  const handleSwitchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, checked } = e.target;
+    const data = {
+      ...formData,
+      [name]: { ...formData[name], value: checked, isInvalid: false },
+    };
+    if (onChange instanceof Function) {
+      onChange(data);
+    }
+  };
+
+  const requiredValidator = () => {
+    const errors: string[] = [];
+    required.forEach((key) => {
+      if (!formData[key] || !formData[key].value) {
+        errors.push(key);
+      }
+    });
+    return errors;
+  };
+
+  const syncValidator = () => {
+    const errors: Array<{ key: string; msg: string }> = [];
+    const promises: Array<{
+      key: string;
+      promise;
+    }> = [];
+    keys.forEach((key) => {
+      const { validator } = uiSchema[key]?.['ui:options'] || {};
+      if (validator instanceof Function) {
+        const value = formData[key]?.value;
+        promises.push({
+          key,
+          promise: validator(value),
+        });
+      }
+    });
+    return Promise.allSettled(promises.map((item) => item.promise)).then(
+      (results) => {
+        results.forEach((result, index) => {
+          const { key } = promises[index];
+          if (result.status === 'rejected') {
+            errors.push({
+              key,
+              msg: result.reason.message,
+            });
+          }
+
+          if (result.status === 'fulfilled') {
+            const msg = result.value;
+            if (typeof msg === 'string') {
+              errors.push({
+                key,
+                msg,
+              });
+            }
+          }
+        });
+        return errors;
+      },
+    );
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const errors = requiredValidator();
+    if (errors.length > 0) {
+      formData = errors.reduce((acc, cur) => {
+        console.log('schema.properties[cur]', cur);
+        acc[cur] = {
+          ...formData[cur],
+          isInvalid: true,
+          errorMsg:
+            uiSchema[cur]?.['ui:options']?.empty ||
+            `${schema.properties[cur]?.title} ${t('empty')}`,
+        };
+        return acc;
+      }, formData);
+      if (onChange instanceof Function) {
+        onChange({ ...formData });
+      }
+      return;
+    }
+    const syncErrors = await syncValidator();
+    if (syncErrors.length > 0) {
+      formData = syncErrors.reduce((acc, cur) => {
+        acc[cur.key] = {
+          ...formData[cur.key],
+          isInvalid: true,
+          errorMsg:
+            cur.msg || `${schema.properties[cur.key].title} ${t('invalid')}`,
+        };
+        return acc;
+      }, formData);
+      if (onChange instanceof Function) {
+        onChange({ ...formData });
+      }
+      return;
+    }
+    Object.keys(formData).forEach((key) => {
+      formData[key].isInvalid = false;
+      formData[key].errorMsg = '';
+    });
+    if (onChange instanceof Function) {
+      onChange(formData);
+    }
+    onSubmit(e);
+  };
+
+  const handleUploadChange = (name: string, value: string) => {
+    const data = { ...formData, [name]: { ...formData[name], value } };
+    if (onChange instanceof Function) {
+      onChange(data);
+    }
+  };
+
+  return (
+    <Form noValidate onSubmit={handleSubmit}>
+      {keys.map((key) => {
+        const { title, description } = properties[key];
+        const { 'ui:widget': widget = 'input', 'ui:options': options = {} } =
+          uiSchema[key] || {};
+        if (widget === 'select') {
+          return (
+            <Form.Group key={title} controlId={key} className="mb-3">
+              <Form.Label>{title}</Form.Label>
+              <Form.Select
+                aria-label={description}
+                isInvalid={formData[key].isInvalid}>
+                {properties[key].enum?.map((item, index) => {
+                  return (
+                    <option value={String(item)} key={String(item)}>
+                      {properties[key].enumNames?.[index]}
+                    </option>
+                  );
+                })}
+              </Form.Select>
+              <Form.Control.Feedback type="invalid">
+                {formData[key]?.errorMsg}
+              </Form.Control.Feedback>
+              <Form.Text className="text-muted">{description}</Form.Text>
+            </Form.Group>
+          );
+        }
+        if (widget === 'checkbox' || widget === 'radio') {
+          return (
+            <Form.Group key={title} className="mb-3" controlId={key}>
+              <Form.Label>{title}</Form.Label>
+              <Stack direction="horizontal">
+                {properties[key].enum?.map((item, index) => {
+                  return (
+                    <Form.Check
+                      key={String(item)}
+                      inline
+                      required
+                      type={widget}
+                      name={title}
+                      id={String(item)}
+                      label={properties[key].enumNames?.[index]}
+                      checked={formData[key]?.value === item}
+                      feedback={formData[key]?.errorMsg}
+                      feedbackType="invalid"
+                      isInvalid={formData[key].isInvalid}
+                    />
+                  );
+                })}
+              </Stack>
+              <Form.Control.Feedback type="invalid">
+                {formData[key]?.errorMsg}
+              </Form.Control.Feedback>
+              <Form.Text className="text-muted">{description}</Form.Text>
+            </Form.Group>
+          );
+        }
+
+        if (widget === 'switch') {
+          console.log(formData[key]?.value, 'switch=====');
+          return (
+            <Form.Group key={title} className="mb-3" controlId={key}>
+              <Form.Label>{title}</Form.Label>
+              <Form.Check
+                required
+                id={title}
+                name={key}
+                type="switch"
+                label={title}
+                checked={formData[key]?.value}
+                feedback={formData[key]?.errorMsg}
+                feedbackType="invalid"
+                isInvalid={formData[key].isInvalid}
+                onChange={handleSwitchChange}
+              />
+              <Form.Control.Feedback type="invalid">
+                {formData[key]?.errorMsg}
+              </Form.Control.Feedback>
+              <Form.Text className="text-muted">{description}</Form.Text>
+            </Form.Group>
+          );
+        }
+        if (widget === 'timezone') {
+          return (
+            <Form.Group key={title} className="mb-3" controlId={key}>
+              <Form.Label>{title}</Form.Label>
+              <TimeZonePicker
+                value={formData[key]?.value}
+                onChange={handleInputChange}
+              />
+              <Form.Control
+                name={key}
+                className="d-none"
+                isInvalid={formData[key].isInvalid}
+              />
+              <Form.Control.Feedback type="invalid">
+                {formData[key]?.errorMsg}
+              </Form.Control.Feedback>
+              <Form.Text className="text-muted">{description}</Form.Text>
+            </Form.Group>
+          );
+        }
+
+        if (widget === 'upload') {
+          return (
+            <Form.Group key={title} className="mb-3" controlId={key}>
+              <Form.Label>{title}</Form.Label>
+              <BrandUpload
+                type={options.imageType || 'avatar'}
+                acceptType={options.acceptType || ''}
+                value={formData[key]?.value}
+                onChange={(value) => handleUploadChange(key, value)}
+              />
+              <Form.Control
+                name={key}
+                className="d-none"
+                isInvalid={formData[key].isInvalid}
+              />
+              <Form.Control.Feedback type="invalid">
+                {formData[key]?.errorMsg}
+              </Form.Control.Feedback>
+              <Form.Text className="text-muted">{description}</Form.Text>
+            </Form.Group>
+          );
+        }
+
+        if (widget === 'textarea') {
+          return (
+            <Form.Group controlId={key} key={key} className="mb-3">
+              <Form.Label>{title}</Form.Label>
+              <Form.Control
+                as="textarea"
+                name={key}
+                placeholder={options?.placeholder || ''}
+                type={options?.type || 'text'}
+                value={formData[key]?.value}
+                onChange={handleInputChange}
+                isInvalid={formData[key].isInvalid}
+                rows={options?.rows || 3}
+              />
+              <Form.Control.Feedback type="invalid">
+                {formData[key]?.errorMsg}
+              </Form.Control.Feedback>
+
+              <Form.Text className="text-muted">{description}</Form.Text>
+            </Form.Group>
+          );
+        }
+        return (
+          <Form.Group controlId={key} key={key} className="mb-3">
+            <Form.Label>{title}</Form.Label>
+            <Form.Control
+              name={key}
+              placeholder={options?.placeholder || ''}
+              type={options?.type || 'text'}
+              value={formData[key]?.value}
+              onChange={handleInputChange}
+              style={options?.type === 'color' ? { width: '6rem' } : {}}
+              isInvalid={formData[key].isInvalid}
+            />
+            <Form.Control.Feedback type="invalid">
+              {formData[key]?.errorMsg}
+            </Form.Control.Feedback>
+
+            <Form.Text className="text-muted">{description}</Form.Text>
+          </Form.Group>
+        );
+      })}
+      <Button variant="primary" type="submit">
+        {t('btn_submit')}
+      </Button>
+    </Form>
+  );
+};
+export const initFormData = (schema: JSONSchema): Type.FormDataType => {
+  const formData: Type.FormDataType = {};
+  Object.keys(schema.properties).forEach((key) => {
+    formData[key] = {
+      value: '',
+      isInvalid: false,
+      errorMsg: '',
+    };
+  });
+  return formData;
+};
+
+export default SchemaForm;
diff --git a/ui/src/components/Tag/index.tsx b/ui/src/components/Tag/index.tsx
index ddab7d64..ac7910ff 100644
--- a/ui/src/components/Tag/index.tsx
+++ b/ui/src/components/Tag/index.tsx
@@ -2,17 +2,27 @@ import React, { memo, FC } from 'react';
 
 import classNames from 'classnames';
 
+import { Tag } from '@/common/interface';
+
 interface IProps {
+  data: Tag;
+  href?: string;
   className?: string;
-  children?: React.ReactNode;
-  href: string;
 }
 
-const Index: FC<IProps> = ({ className = '', children, href }) => {
-  href = href.toLowerCase();
+const Index: FC<IProps> = ({ className = '', href, data }) => {
+  href =
+    href || `/tags/${data.main_tag_slug_name || data.slug_name}`.toLowerCase();
   return (
-    <a href={href} className={classNames('badge-tag rounded-1', className)}>
-      {children}
+    <a
+      href={href}
+      className={classNames(
+        'badge-tag rounded-1',
+        data.reserved && 'badge-tag-reserved',
+        data.recommend && 'badge-tag-required',
+        className,
+      )}>
+      {data.slug_name}
     </a>
   );
 };
diff --git a/ui/src/components/TagSelector/index.tsx b/ui/src/components/TagSelector/index.tsx
index 8747f65a..ab028dac 100644
--- a/ui/src/components/TagSelector/index.tsx
+++ b/ui/src/components/TagSelector/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import { FC, useState, useEffect } from 'react';
 import { Dropdown, FormControl, Button, Form } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
@@ -95,17 +96,16 @@ const TagSelector: FC<IProps> = ({
     }
   }, [value]);
 
-  useEffect(() => {
-    if (!tag) {
-      setTags(null);
-      return;
-    }
-
-    queryTags(tag).then((res) => {
+  const fetchTags = (str) => {
+    queryTags(str).then((res) => {
       const tagArray: Type.Tag[] = filterTags(res || []);
       setTags(tagArray);
     });
-  }, [tag]);
+  };
+
+  useEffect(() => {
+    fetchTags(tag);
+  }, [visibleMenu]);
 
   const handleClick = (val: Type.Tag) => {
     const findIndex = initialValue.findIndex(
@@ -143,7 +143,9 @@ const TagSelector: FC<IProps> = ({
   };
 
   const handleSearch = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    setTag(e.currentTarget.value.replace(';', ''));
+    const searchStr = e.currentTarget.value.replace(';', '');
+    setTag(searchStr);
+    fetchTags(searchStr);
   };
 
   const handleSelect = (eventKey) => {
@@ -186,7 +188,9 @@ const TagSelector: FC<IProps> = ({
                 'm-1 text-nowrap d-flex align-items-center',
                 index === repeatIndex && 'warning',
               )}
-              variant="outline-secondary"
+              variant={`outline-${
+                item.reserved ? 'danger' : item.recommend ? 'dark' : 'secondary'
+              }`}
               size="sm">
               {item.slug_name}
               <span className="ms-1" onMouseUp={() => handleRemove(item)}>
@@ -220,6 +224,14 @@ const TagSelector: FC<IProps> = ({
                   </Form>
                 </Dropdown.Header>
               )}
+              {tags && tags.filter((v) => v.recommend)?.length > 0 && (
+                <Dropdown.Item
+                  disabled
+                  style={{ fontWeight: 500 }}
+                  className="text-secondary">
+                  Required tag (at least one)
+                </Dropdown.Item>
+              )}
 
               {tags?.map((item, index) => {
                 return (
diff --git a/ui/src/components/TimeZonePicker/index.tsx b/ui/src/components/TimeZonePicker/index.tsx
new file mode 100644
index 00000000..bd0d0f5c
--- /dev/null
+++ b/ui/src/components/TimeZonePicker/index.tsx
@@ -0,0 +1,25 @@
+import { Form } from 'react-bootstrap';
+
+import { TIMEZONES } from '@/common/constants';
+
+const TimeZonePicker = (props) => {
+  return (
+    <Form.Select {...props}>
+      {TIMEZONES?.map((item) => {
+        return (
+          <optgroup label={item.label} key={item.label}>
+            {item.options.map((option) => {
+              return (
+                <option value={option.value} key={option.value}>
+                  {option.label}
+                </option>
+              );
+            })}
+          </optgroup>
+        );
+      })}
+    </Form.Select>
+  );
+};
+
+export default TimeZonePicker;
diff --git a/ui/src/components/UploadImg/index.tsx b/ui/src/components/UploadImg/index.tsx
index 3054fac4..0d3ee519 100644
--- a/ui/src/components/UploadImg/index.tsx
+++ b/ui/src/components/UploadImg/index.tsx
@@ -1,16 +1,29 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { uploadImage } from '@/services';
+import * as Type from '@/common/interface';
+
 interface IProps {
-  type: string;
-  upload: (data: FormData) => Promise<any>;
+  type: Type.UploadType;
+  className?: string;
+  children?: React.ReactNode;
+  acceptType?: string;
+  uploadCallback: (img: string) => void;
 }
 
-const Index: React.FC<IProps> = ({ type, upload }) => {
+const Index: React.FC<IProps> = ({
+  type,
+  uploadCallback,
+  children,
+  acceptType = '',
+  className,
+}) => {
   const { t } = useTranslation();
   const [status, setStatus] = useState(false);
 
   const onChange = (e: any) => {
+    console.log('uploading', e);
     if (status) {
       return;
     }
@@ -24,25 +37,25 @@ const Index: React.FC<IProps> = ({ type, upload }) => {
       //   return;
       // }
       setStatus(true);
-      const data = new FormData();
-
-      data.append('file', e.target.files[0]);
-      // do
-      upload(data).finally(() => {
-        setStatus(false);
-      });
+      console.log('uploading', e.target.files);
+      uploadImage({ file: e.target.files[0], type })
+        .then((res) => {
+          uploadCallback(res);
+        })
+        .finally(() => {
+          setStatus(false);
+        });
     }
   };
 
   return (
-    <label className="mb-2 btn btn-outline-secondary uploadBtn">
-      {status ? t('upload_img.loading') : t('upload_img.name')}
+    <label className={`btn btn-outline-secondary uploadBtn ${className}`}>
+      {children || (status ? t('upload_img.loading') : t('upload_img.name'))}
       <input
         type="file"
         className="d-none"
-        accept="image/jpeg,image/jpg,image/png,image/webp"
+        accept={`image/jpeg,image/jpg,image/png,image/webp${acceptType}`}
         onChange={onChange}
-        id={type}
       />
     </label>
   );
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 25bdefa7..d1a801ae 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -18,13 +18,15 @@ import TextArea from './TextArea';
 import Mentions from './Mentions';
 import FormatTime from './FormatTime';
 import Toast from './Toast';
-import AdminHeader from './AdminHeader';
 import AccordionNav from './AccordionNav';
 import PageTitle from './PageTitle';
 import Empty from './Empty';
 import BaseUserCard from './BaseUserCard';
 import FollowingTags from './FollowingTags';
 import QueryGroup from './QueryGroup';
+import BrandUpload from './BrandUpload';
+import SchemaForm, { JSONSchema, UISchema, initFormData } from './SchemaForm';
+import Labels from './LabelsCard';
 
 export {
   Avatar,
@@ -47,7 +49,6 @@ export {
   Mentions,
   FormatTime,
   Toast,
-  AdminHeader,
   AccordionNav,
   PageTitle,
   Empty,
@@ -55,5 +56,9 @@ export {
   FollowingTags,
   htmlRender,
   QueryGroup,
+  BrandUpload,
+  SchemaForm,
+  initFormData,
+  Labels,
 };
-export type { EditorRef };
+export type { EditorRef, JSONSchema, UISchema };
diff --git a/ui/src/hooks/useChangeModal/index.tsx b/ui/src/hooks/useChangeModal/index.tsx
index 529f7a3a..767618b6 100644
--- a/ui/src/hooks/useChangeModal/index.tsx
+++ b/ui/src/hooks/useChangeModal/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 import { Modal, Form, Button, FormCheck } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
@@ -141,69 +141,70 @@ const useChangeModal = ({ callback }: Props) => {
     setDefaultType(params.type);
     setShow(true);
   };
+  useLayoutEffect(() => {
+    root.render(
+      <Modal show={show} onHide={onClose}>
+        <Modal.Header closeButton>
+          <Modal.Title as="h5">{t('title')}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form>
+            {list.map((item) => {
+              if (
+                defaultType === 'inactive' &&
+                (item.type === 'suspended' || item.type === 'deleted')
+              ) {
+                return null;
+              }
 
-  root.render(
-    <Modal show={show} onHide={onClose}>
-      <Modal.Header closeButton>
-        <Modal.Title as="h5">{t('title')}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        <Form>
-          {list.map((item) => {
-            if (
-              defaultType === 'inactive' &&
-              (item.type === 'suspended' || item.type === 'deleted')
-            ) {
-              return null;
-            }
-
-            if (defaultType === 'suspended' && item.type === 'inactive') {
-              return null;
-            }
-            return (
-              <div key={item?.type}>
-                <Form.Group
-                  controlId={item.type}
-                  className={`${
-                    item.have_content && changeType === item.type
-                      ? 'mb-2'
-                      : 'mb-3'
-                  }`}>
-                  <FormCheck>
-                    <FormCheck.Input
-                      id={item.type}
-                      type="radio"
-                      checked={changeType.type === item.type}
-                      onChange={() => handleRadio(item)}
-                      isInvalid={isInvalid}
-                    />
-                    <FormCheck.Label htmlFor={item.type}>
-                      <span className="fw-bold">{item?.name}</span>
-                      <br />
-                      <span className="text-secondary">
-                        {item?.description}
-                      </span>
-                    </FormCheck.Label>
-                    <Form.Control.Feedback type="invalid">
-                      {t('msg.empty')}
-                    </Form.Control.Feedback>
-                  </FormCheck>
-                </Form.Group>
-              </div>
-            );
-          })}
-        </Form>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button variant="link" onClick={() => onClose()}>
-          {t('btn_cancel')}
-        </Button>
-        <Button variant="primary" onClick={handleSubmit}>
-          {t('btn_submit')}
-        </Button>
-      </Modal.Footer>
-    </Modal>,
-  );
+              if (defaultType === 'suspended' && item.type === 'inactive') {
+                return null;
+              }
+              return (
+                <div key={item?.type}>
+                  <Form.Group
+                    controlId={item.type}
+                    className={`${
+                      item.have_content && changeType === item.type
+                        ? 'mb-2'
+                        : 'mb-3'
+                    }`}>
+                    <FormCheck>
+                      <FormCheck.Input
+                        id={item.type}
+                        type="radio"
+                        checked={changeType.type === item.type}
+                        onChange={() => handleRadio(item)}
+                        isInvalid={isInvalid}
+                      />
+                      <FormCheck.Label htmlFor={item.type}>
+                        <span className="fw-bold">{item?.name}</span>
+                        <br />
+                        <span className="text-secondary">
+                          {item?.description}
+                        </span>
+                      </FormCheck.Label>
+                      <Form.Control.Feedback type="invalid">
+                        {t('msg.empty')}
+                      </Form.Control.Feedback>
+                    </FormCheck>
+                  </Form.Group>
+                </div>
+              );
+            })}
+          </Form>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="link" onClick={() => onClose()}>
+            {t('btn_cancel')}
+          </Button>
+          <Button variant="primary" onClick={handleSubmit}>
+            {t('btn_submit')}
+          </Button>
+        </Modal.Footer>
+      </Modal>,
+    );
+  });
 
   return {
     onClose,
diff --git a/ui/src/hooks/useEditStatusModal/index.tsx b/ui/src/hooks/useEditStatusModal/index.tsx
index 818d3a35..54a246ba 100644
--- a/ui/src/hooks/useEditStatusModal/index.tsx
+++ b/ui/src/hooks/useEditStatusModal/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 import { Modal, Form, Button, FormCheck } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
@@ -73,56 +73,57 @@ const useEditStatusModal = ({
     setDefaultType(params.type);
     setShow(true);
   };
-
-  root.render(
-    <Modal show={show} onHide={onClose}>
-      <Modal.Header closeButton>
-        <Modal.Title as="h5">{t('title', { type: editType })}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        <Form>
-          {list.map((item) => {
-            if (editType === 'answer' && item.type === 'closed') {
-              return null;
-            }
-            return (
-              <div key={item?.type}>
-                <Form.Group controlId={item.type} className="mb-3">
-                  <FormCheck>
-                    <FormCheck.Input
-                      id={item.type}
-                      type="radio"
-                      checked={changeType === item.type}
-                      onChange={() => handleRadio(item)}
-                      isInvalid={isInvalid}
-                    />
-                    <FormCheck.Label htmlFor={item.type}>
-                      <span className="fw-bold">{item.name}</span>
-                      <br />
-                      <span className="fs-14 text-secondary">
-                        {item.description}
-                      </span>
-                    </FormCheck.Label>
-                    <Form.Control.Feedback type="invalid">
-                      {t('msg.empty')}
-                    </Form.Control.Feedback>
-                  </FormCheck>
-                </Form.Group>
-              </div>
-            );
-          })}
-        </Form>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button variant="link" onClick={() => onClose()}>
-          {t('btn_cancel')}
-        </Button>
-        <Button variant="primary" onClick={handleSubmit}>
-          {changeType !== 'normal' ? t('btn_next') : t('btn_submit')}
-        </Button>
-      </Modal.Footer>
-    </Modal>,
-  );
+  useLayoutEffect(() => {
+    root.render(
+      <Modal show={show} onHide={onClose}>
+        <Modal.Header closeButton>
+          <Modal.Title as="h5">{t('title', { type: editType })}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form>
+            {list.map((item) => {
+              if (editType === 'answer' && item.type === 'closed') {
+                return null;
+              }
+              return (
+                <div key={item?.type}>
+                  <Form.Group controlId={item.type} className="mb-3">
+                    <FormCheck>
+                      <FormCheck.Input
+                        id={item.type}
+                        type="radio"
+                        checked={changeType === item.type}
+                        onChange={() => handleRadio(item)}
+                        isInvalid={isInvalid}
+                      />
+                      <FormCheck.Label htmlFor={item.type}>
+                        <span className="fw-bold">{item.name}</span>
+                        <br />
+                        <span className="fs-14 text-secondary">
+                          {item.description}
+                        </span>
+                      </FormCheck.Label>
+                      <Form.Control.Feedback type="invalid">
+                        {t('msg.empty')}
+                      </Form.Control.Feedback>
+                    </FormCheck>
+                  </Form.Group>
+                </div>
+              );
+            })}
+          </Form>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="link" onClick={() => onClose()}>
+            {t('btn_cancel')}
+          </Button>
+          <Button variant="primary" onClick={handleSubmit}>
+            {changeType !== 'normal' ? t('btn_next') : t('btn_submit')}
+          </Button>
+        </Modal.Footer>
+      </Modal>,
+    );
+  });
 
   return {
     onClose,
diff --git a/ui/src/i18n/init.ts b/ui/src/i18n/init.ts
index ec4bf378..ad88c161 100644
--- a/ui/src/i18n/init.ts
+++ b/ui/src/i18n/init.ts
@@ -1,15 +1,12 @@
 import { initReactI18next } from 'react-i18next';
 
 import i18next from 'i18next';
-import Backend from 'i18next-http-backend';
 import en_US from '@i18n/en_US.yaml';
 import zh_CN from '@i18n/zh_CN.yaml';
 
 import { DEFAULT_LANG } from '@/common/constants';
 
 i18next
-  // load translation using http
-  .use(Backend)
   //  pass the i18n instance to react-i18next.
   .use(initReactI18next)
   .init({
@@ -31,12 +28,6 @@ i18next
       // allow <br/> and simple html elements in translations
       transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'],
     },
-    // backend: {
-    //   loadPath: (lngs, namespace) => {
-    //     console.log(lngs, namespace);
-    //     return 'https://cdn.jsdelivr.net/npm/echarts@4.8.0/map/js/china.js';
-    //   },
-    // },
   });
 
 export default i18next;
diff --git a/ui/src/index.scss b/ui/src/index.scss
index 097dafa0..7cfa95b8 100644
--- a/ui/src/index.scss
+++ b/ui/src/index.scss
@@ -2,6 +2,10 @@
 @import '~bootstrap/scss/bootstrap';
 @import '~bootstrap-icons';
 
+.bg-gray-300 {
+  background-color: $gray-300;
+}
+
 .focus {
   color: $input-focus-color !important;
   background-color: $input-focus-bg !important;
@@ -65,11 +69,32 @@ a {
   padding: 1px 0.5rem 2px;
   color: $blue-700;
   height: 24px;
+  border: 1px solid rgba($blue-100, 0.5);
   &:hover {
     background: rgba($blue-100, 1);
   }
 }
 
+.badge-tag-required {
+  background: rgba($gray-200, 0.5);
+  color: $gray-700;
+  border: 1px solid $gray-400;
+  &:hover {
+    color: $gray-700;
+    background: rgba($gray-400, 1);
+  }
+}
+
+.badge-tag-reserved {
+  background: rgba($orange-100, 0.5);
+  color: $orange-700;
+  border: 1px solid $orange-400;
+  &:hover {
+    color: $orange-700;
+    background: rgba($orange-400, 1);
+  }
+}
+
 .divide-line {
   border-bottom: 1px solid rgba(33, 37, 41, 0.25);
 }
@@ -143,6 +168,7 @@ a {
 
 .fit-content {
   height: fit-content;
+  width: fit-content;
   flex: none;
 }
 
@@ -210,3 +236,16 @@ a {
     }
   }
 }
+
+.upload-img-wrap {
+  flex-grow: 1;
+  height: 128px;
+}
+.badge-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  padding: 1px 0.5rem 2px;
+  height: 24px;
+}
diff --git a/ui/src/pages/Admin/Branding/index.tsx b/ui/src/pages/Admin/Branding/index.tsx
new file mode 100644
index 00000000..b517e7b5
--- /dev/null
+++ b/ui/src/pages/Admin/Branding/index.tsx
@@ -0,0 +1,154 @@
+import { FC, memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { JSONSchema, SchemaForm, UISchema } from '@/components';
+import { FormDataType } from '@/common/interface';
+import { brandSetting, getBrandSetting } from '@/services';
+import { brandingStore } from '@/stores';
+import { useToast } from '@/hooks';
+
+const uploadType = 'branding';
+const Index: FC = () => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'admin.branding',
+  });
+  const { branding: brandingInfo, update } = brandingStore();
+  const Toast = useToast();
+
+  const [formData, setFormData] = useState<FormDataType>({
+    logo: {
+      value: brandingInfo.logo,
+      isInvalid: false,
+      errorMsg: '',
+    },
+    mobile_logo: {
+      value: '',
+      isInvalid: false,
+      errorMsg: '',
+    },
+    square_icon: {
+      value: '',
+      isInvalid: false,
+      errorMsg: '',
+    },
+    favicon: {
+      value: '',
+      isInvalid: false,
+      errorMsg: '',
+    },
+  });
+
+  const schema: JSONSchema = {
+    title: t('page_title'),
+    properties: {
+      logo: {
+        type: 'string',
+        title: t('logo.label'),
+        description: t('logo.text'),
+      },
+      mobile_logo: {
+        type: 'string',
+        title: t('mobile_logo.label'),
+        description: t('mobile_logo.text'),
+      },
+      square_icon: {
+        type: 'string',
+        title: t('square_icon.label'),
+        description: t('square_icon.text'),
+      },
+      favicon: {
+        type: 'string',
+        title: t('favicon.label'),
+        description: t('favicon.text'),
+      },
+    },
+  };
+
+  const uiSchema: UISchema = {
+    logo: {
+      'ui:widget': 'upload',
+      'ui:options': {
+        imageType: uploadType,
+      },
+    },
+    mobile_logo: {
+      'ui:widget': 'upload',
+      'ui:options': {
+        imageType: uploadType,
+      },
+    },
+    square_icon: {
+      'ui:widget': 'upload',
+      'ui:options': {
+        imageType: uploadType,
+      },
+    },
+    favicon: {
+      'ui:widget': 'upload',
+      'ui:options': {
+        acceptType: ',image/x-icon,image/vnd.microsoft.icon',
+        imageType: uploadType,
+      },
+    },
+  };
+
+  const handleOnChange = (data) => {
+    setFormData(data);
+  };
+
+  const onSubmit = () => {
+    const params = {
+      logo: formData.logo.value,
+      mobile_logo: formData.mobile_logo.value,
+      square_icon: formData.square_icon.value,
+      favicon: formData.favicon.value,
+    };
+    brandSetting(params)
+      .then((res) => {
+        console.log(res);
+        update(params);
+        Toast.onShow({
+          msg: t('update', { keyPrefix: 'toast' }),
+          variant: 'success',
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+        if (err.key) {
+          formData[err.key].isInvalid = true;
+          formData[err.key].errorMsg = err.value;
+          setFormData({ ...formData });
+        }
+      });
+  };
+
+  const getBrandData = async () => {
+    const res = await getBrandSetting();
+    if (res) {
+      formData.logo.value = res.logo;
+      formData.mobile_logo.value = res.mobile_logo;
+      formData.square_icon.value = res.square_icon;
+      formData.favicon.value = res.favicon;
+      setFormData({ ...formData });
+    }
+  };
+
+  useEffect(() => {
+    getBrandData();
+  }, []);
+
+  return (
+    <div>
+      <h3 className="mb-4">{t('page_title')}</h3>
+      <SchemaForm
+        schema={schema}
+        uiSchema={uiSchema}
+        formData={formData}
+        onSubmit={onSubmit}
+        onChange={handleOnChange}
+      />
+    </div>
+  );
+};
+
+export default memo(Index);
diff --git a/ui/src/pages/Admin/General/index.tsx b/ui/src/pages/Admin/General/index.tsx
index 2ea2f485..d33883b6 100644
--- a/ui/src/pages/Admin/General/index.tsx
+++ b/ui/src/pages/Admin/General/index.tsx
@@ -1,11 +1,12 @@
 import React, { FC, useEffect, useState } from 'react';
-import { Form, Button } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
+import { SchemaForm, JSONSchema, initFormData, UISchema } from '@/components';
 import type * as Type from '@/common/interface';
 import { useToast } from '@/hooks';
 import { siteInfoStore } from '@/stores';
 import { useGeneralSetting, updateGeneralSetting } from '@/services';
+import Pattern from '@/common/pattern';
 
 import '../index.scss';
 
@@ -17,91 +18,77 @@ const General: FC = () => {
   const updateSiteInfo = siteInfoStore((state) => state.update);
 
   const { data: setting } = useGeneralSetting();
-  const [formData, setFormData] = useState<Type.FormDataType>({
-    name: {
-      value: '',
-      isInvalid: false,
-      errorMsg: '',
+  const schema: JSONSchema = {
+    title: t('page_title'),
+    required: ['name', 'site_url', 'contact_email'],
+    properties: {
+      name: {
+        type: 'string',
+        title: t('name.label'),
+        description: t('name.text'),
+      },
+      site_url: {
+        type: 'string',
+        title: t('site_url.label'),
+        description: t('site_url.text'),
+      },
+      short_description: {
+        type: 'string',
+        title: t('short_description.label'),
+        description: t('short_description.text'),
+      },
+      description: {
+        type: 'string',
+        title: t('description.label'),
+        description: t('description.text'),
+      },
+      contact_email: {
+        type: 'string',
+        title: t('contact_email.label'),
+        description: t('contact_email.text'),
+      },
     },
+  };
+  const uiSchema: UISchema = {
     site_url: {
-      value: '',
-      isInvalid: false,
-      errorMsg: '',
-    },
-    short_description: {
-      value: '',
-      isInvalid: false,
-      errorMsg: '',
-    },
-    description: {
-      value: '',
-      isInvalid: false,
-      errorMsg: '',
+      'ui:options': {
+        validator: (value) => {
+          let url: URL | undefined;
+          try {
+            url = new URL(value);
+          } catch (ex) {
+            return t('site_url.validate');
+          }
+          if (
+            !url ||
+            /^https?:$/.test(url.protocol) === false ||
+            url.pathname !== '/' ||
+            url.search !== '' ||
+            url.hash !== ''
+          ) {
+            return t('site_url.validate');
+          }
+
+          return true;
+        },
+      },
     },
     contact_email: {
-      value: '',
-      isInvalid: false,
-      errorMsg: '',
+      'ui:options': {
+        validator: (value) => {
+          if (!Pattern.email.test(value)) {
+            return t('contact_email.validate');
+          }
+          return true;
+        },
+      },
     },
-  });
-  const checkValidated = (): boolean => {
-    let ret = true;
-    const { name, site_url, contact_email } = formData;
-    if (!name.value) {
-      ret = false;
-      formData.name = {
-        value: '',
-        isInvalid: true,
-        errorMsg: t('name.msg'),
-      };
-    }
-    if (!site_url.value) {
-      ret = false;
-      formData.site_url = {
-        value: '',
-        isInvalid: true,
-        errorMsg: t('site_url.msg'),
-      };
-    } else if (!/^(https?):\/\/([\w.]+\/?)\S*$/.test(site_url.value)) {
-      ret = false;
-      formData.site_url = {
-        value: formData.site_url.value,
-        isInvalid: true,
-        errorMsg: t('site_url.validate'),
-      };
-    }
-
-    if (!contact_email.value) {
-      ret = false;
-      formData.contact_email = {
-        value: '',
-        isInvalid: true,
-        errorMsg: t('contact_email.msg'),
-      };
-    } else if (
-      !/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
-        contact_email.value,
-      )
-    ) {
-      ret = false;
-      formData.contact_email = {
-        value: formData.contact_email.value,
-        isInvalid: true,
-        errorMsg: t('contact_email.validate'),
-      };
-    }
-    setFormData({
-      ...formData,
-    });
-    return ret;
   };
+  const [formData, setFormData] = useState(initFormData(schema));
 
   const onSubmit = (evt) => {
     evt.preventDefault();
     evt.stopPropagation();
-    if (checkValidated() === false) {
-      return;
-    }
     const reqParams: Type.AdminSettingsGeneral = {
       name: formData.name.value,
       description: formData.description.value,
@@ -126,19 +113,7 @@ const General: FC = () => {
         setFormData({ ...formData });
       });
   };
-  const onFieldChange = (fieldName, fieldValue) => {
-    if (!formData[fieldName]) {
-      return;
-    }
-    const fieldData: Type.FormDataType = {
-      [fieldName]: {
-        value: fieldValue,
-        isInvalid: false,
-        errorMsg: '',
-      },
-    };
-    setFormData({ ...formData, ...fieldData });
-  };
+
   useEffect(() => {
     if (!setting) {
       return;
@@ -149,87 +124,21 @@ const General: FC = () => {
     });
     setFormData({ ...formData, ...formMeta });
   }, [setting]);
+
+  const handleOnChange = (data) => {
+    setFormData(data);
+  };
+
   return (
     <>
       <h3 className="mb-4">{t('page_title')}</h3>
-      <Form noValidate onSubmit={onSubmit}>
-        <Form.Group controlId="siteName" className="mb-3">
-          <Form.Label>{t('name.label')}</Form.Label>
-          <Form.Control
-            required
-            type="text"
-            value={formData.name.value}
-            isInvalid={formData.name.isInvalid}
-            onChange={(evt) => onFieldChange('name', evt.target.value)}
-          />
-          <Form.Text as="div">{t('name.text')}</Form.Text>
-          <Form.Control.Feedback type="invalid">
-            {formData.name.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="siteUrl" className="mb-3">
-          <Form.Label>{t('site_url.label')}</Form.Label>
-          <Form.Control
-            required
-            type="text"
-            value={formData.site_url.value}
-            isInvalid={formData.site_url.isInvalid}
-            onChange={(evt) => onFieldChange('site_url', evt.target.value)}
-          />
-          <Form.Text as="div">{t('site_url.text')}</Form.Text>
-          <Form.Control.Feedback type="invalid">
-            {formData.site_url.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="shortDescription" className="mb-3">
-          <Form.Label>{t('short_description.label')}</Form.Label>
-          <Form.Control
-            required
-            type="text"
-            value={formData.short_description.value}
-            isInvalid={formData.short_description.isInvalid}
-            onChange={(evt) =>
-              onFieldChange('short_description', evt.target.value)
-            }
-          />
-          <Form.Text as="div">{t('short_description.text')}</Form.Text>
-          <Form.Control.Feedback type="invalid">
-            {formData.short_description.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="description" className="mb-3">
-          <Form.Label>{t('description.label')}</Form.Label>
-          <Form.Control
-            required
-            type="text"
-            value={formData.description.value}
-            isInvalid={formData.description.isInvalid}
-            onChange={(evt) => onFieldChange('description', evt.target.value)}
-          />
-          <Form.Text as="div">{t('description.text')}</Form.Text>
-          <Form.Control.Feedback type="invalid">
-            {formData.description.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="contact_email" className="mb-3">
-          <Form.Label>{t('contact_email.label')}</Form.Label>
-          <Form.Control
-            required
-            type="text"
-            value={formData.contact_email.value}
-            isInvalid={formData.contact_email.isInvalid}
-            onChange={(evt) => onFieldChange('contact_email', evt.target.value)}
-          />
-          <Form.Text as="div">{t('contact_email.text')}</Form.Text>
-          <Form.Control.Feedback type="invalid">
-            {formData.contact_email.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-
-        <Button variant="primary" type="submit">
-          {t('save', { keyPrefix: 'btns' })}
-        </Button>
-      </Form>
+      <SchemaForm
+        schema={schema}
+        formData={formData}
+        onSubmit={onSubmit}
+        uiSchema={uiSchema}
+        onChange={handleOnChange}
+      />
     </>
   );
 };
diff --git a/ui/src/pages/Admin/Interface/index.tsx b/ui/src/pages/Admin/Interface/index.tsx
index 0d68cd98..9d307cbb 100644
--- a/ui/src/pages/Admin/Interface/index.tsx
+++ b/ui/src/pages/Admin/Interface/index.tsx
@@ -1,6 +1,5 @@
-import React, { FC, FormEvent, useEffect, useState } from 'react';
-import { Form, Button, Image, Stack } from 'react-bootstrap';
-import { Trans, useTranslation } from 'react-i18next';
+import { FC, FormEvent, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useToast } from '@/hooks';
 import {
@@ -9,10 +8,9 @@ import {
   AdminSettingsInterface,
 } from '@/common/interface';
 import { interfaceStore } from '@/stores';
-import { UploadImg } from '@/components';
-import { TIMEZONES, DEFAULT_TIMEZONE } from '@/common/constants';
+import { JSONSchema, SchemaForm, UISchema } from '@/components';
+import { DEFAULT_TIMEZONE } from '@/common/constants';
 import {
-  uploadAvatar,
   updateInterfaceSetting,
   useInterfaceSetting,
   useThemeOptions,
@@ -33,12 +31,32 @@ const Interface: FC = () => {
   const [langs, setLangs] = useState<LangsType[]>();
   const { data: setting } = useInterfaceSetting();
 
-  const [formData, setFormData] = useState<FormDataType>({
-    logo: {
-      value: setting?.logo || storeInterface.logo,
-      isInvalid: false,
-      errorMsg: '',
+  const schema: JSONSchema = {
+    title: t('page_title'),
+    properties: {
+      theme: {
+        type: 'string',
+        title: t('theme.label'),
+        description: t('theme.text'),
+        enum: themes?.map((theme) => theme.value) || [],
+        enumNames: themes?.map((theme) => theme.label) || [],
+      },
+      language: {
+        type: 'string',
+        title: t('language.label'),
+        description: t('language.text'),
+        enum: langs?.map((lang) => lang.value),
+        enumNames: langs?.map((lang) => lang.label),
+      },
+      time_zone: {
+        type: 'string',
+        title: t('time_zone.label'),
+        description: t('time_zone.text'),
+      },
     },
+  };
+
+  const [formData, setFormData] = useState<FormDataType>({
     theme: {
       value: setting?.theme || storeInterface.theme,
       isInvalid: false,
@@ -55,6 +73,31 @@ const Interface: FC = () => {
       errorMsg: '',
     },
   });
+
+  // const onChange = (fieldName, fieldValue) => {
+  //   if (!formData[fieldName]) {
+  //     return;
+  //   }
+  //   const fieldData: FormDataType = {
+  //     [fieldName]: {
+  //       value: fieldValue,
+  //       isInvalid: false,
+  //       errorMsg: '',
+  //     },
+  //   };
+  //   setFormData({ ...formData, ...fieldData });
+  // };
+  const uiSchema: UISchema = {
+    theme: {
+      'ui:widget': 'select',
+    },
+    language: {
+      'ui:widget': 'select',
+    },
+    time_zone: {
+      'ui:widget': 'timezone',
+    },
+  };
   const getLangs = async () => {
     const res: LangsType[] = await loadLanguageOptions(true);
     setLangs(res);
@@ -103,7 +146,6 @@ const Interface: FC = () => {
       return;
     }
     const reqParams: AdminSettingsInterface = {
-      logo: formData.logo.value,
       theme: formData.theme.value,
       language: formData.language.value,
       time_zone: formData.time_zone.value,
@@ -111,13 +153,13 @@ const Interface: FC = () => {
 
     updateInterfaceSetting(reqParams)
       .then(() => {
+        interfaceStore.getState().update(reqParams);
+        setupAppLanguage();
+        setupAppTimeZone();
         Toast.onShow({
           msg: t('update', { keyPrefix: 'toast' }),
           variant: 'success',
         });
-        interfaceStore.getState().update(reqParams);
-        setupAppLanguage();
-        setupAppTimeZone();
       })
       .catch((err) => {
         if (err.isError && err.key) {
@@ -127,34 +169,22 @@ const Interface: FC = () => {
         setFormData({ ...formData });
       });
   };
-  const imgUpload = (file: any) => {
-    return new Promise((resolve) => {
-      uploadAvatar(file).then((res) => {
-        setFormData({
-          ...formData,
-          logo: {
-            value: res,
-            isInvalid: false,
-            errorMsg: '',
-          },
-        });
-        resolve(true);
-      });
-    });
-  };
-  const onChange = (fieldName, fieldValue) => {
-    if (!formData[fieldName]) {
-      return;
-    }
-    const fieldData: FormDataType = {
-      [fieldName]: {
-        value: fieldValue,
-        isInvalid: false,
-        errorMsg: '',
-      },
-    };
-    setFormData({ ...formData, ...fieldData });
-  };
+  // const imgUpload = (file: any) => {
+  //   return new Promise((resolve) => {
+  //     uploadAvatar(file).then((res) => {
+  //       setFormData({
+  //         ...formData,
+  //         logo: {
+  //           value: res,
+  //           isInvalid: false,
+  //           errorMsg: '',
+  //         },
+  //       });
+  //       resolve(true);
+  //     });
+  //   });
+  // };
+
   useEffect(() => {
     if (setting) {
       const formMeta = {};
@@ -167,10 +197,21 @@ const Interface: FC = () => {
   useEffect(() => {
     getLangs();
   }, []);
+
+  const handleOnChange = (data) => {
+    setFormData(data);
+  };
   return (
     <>
       <h3 className="mb-4">{t('page_title')}</h3>
-      <Form noValidate onSubmit={onSubmit}>
+      <SchemaForm
+        schema={schema}
+        uiSchema={uiSchema}
+        formData={formData}
+        onSubmit={onSubmit}
+        onChange={handleOnChange}
+      />
+      {/* <Form noValidate onSubmit={onSubmit}>
         <Form.Group controlId="logo" className="mb-3">
           <Form.Label>{t('logo.label')}</Form.Label>
           <Stack gap={2}>
@@ -187,7 +228,7 @@ const Interface: FC = () => {
               ) : null}
             </div>
             <div className="d-inline-flex">
-              <UploadImg type="logo" upload={imgUpload} />
+              <UploadImg type="logo" upload={imgUpload} className="mb-2" />
             </div>
           </Stack>
           <Form.Text as="div" className="text-muted">
@@ -282,7 +323,7 @@ const Interface: FC = () => {
         <Button variant="primary" type="submit">
           {t('save', { keyPrefix: 'btns' })}
         </Button>
-      </Form>
+      </Form> */}
     </>
   );
 };
diff --git a/ui/src/pages/Admin/Legal/index.tsx b/ui/src/pages/Admin/Legal/index.tsx
new file mode 100644
index 00000000..76a0bc7f
--- /dev/null
+++ b/ui/src/pages/Admin/Legal/index.tsx
@@ -0,0 +1,107 @@
+import React, { FC, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { marked } from 'marked';
+
+import type * as Type from '@/common/interface';
+import { SchemaForm, JSONSchema, initFormData, UISchema } from '@/components';
+import { useToast } from '@/hooks';
+import { getLegalSetting, putLegalSetting } from '@/services';
+import '../index.scss';
+
+const Legal: FC = () => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'admin.legal',
+  });
+  const Toast = useToast();
+
+  const schema: JSONSchema = {
+    title: t('page_title'),
+    required: ['terms_of_service', 'privacy_policy'],
+    properties: {
+      terms_of_service: {
+        type: 'string',
+        title: t('terms_of_service.label'),
+        description: t('terms_of_service.text'),
+      },
+      privacy_policy: {
+        type: 'string',
+        title: t('privacy_policy.label'),
+        description: t('privacy_policy.text'),
+      },
+    },
+  };
+  const uiSchema: UISchema = {
+    terms_of_service: {
+      'ui:widget': 'textarea',
+      'ui:options': {
+        rows: 10,
+      },
+    },
+    privacy_policy: {
+      'ui:widget': 'textarea',
+      'ui:options': {
+        rows: 10,
+      },
+    },
+  };
+  const [formData, setFormData] = useState(initFormData(schema));
+
+  const onSubmit = (evt) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    const reqParams: Type.AdminSettingsLegal = {
+      terms_of_service_original_text: formData.terms_of_service.value,
+      terms_of_service_parsed_text: marked.parse(
+        formData.terms_of_service.value,
+      ),
+      privacy_policy_original_text: formData.privacy_policy.value,
+      privacy_policy_parsed_text: marked.parse(formData.privacy_policy.value),
+    };
+
+    putLegalSetting(reqParams)
+      .then(() => {
+        Toast.onShow({
+          msg: t('update', { keyPrefix: 'toast' }),
+          variant: 'success',
+        });
+      })
+      .catch((err) => {
+        if (err.isError && err.key) {
+          formData[err.key].isInvalid = true;
+          formData[err.key].errorMsg = err.value;
+        }
+        setFormData({ ...formData });
+      });
+  };
+
+  useEffect(() => {
+    getLegalSetting().then((setting) => {
+      const formMeta = { ...formData };
+      formMeta.terms_of_service.value = setting.terms_of_service_original_text;
+      formMeta.privacy_policy.value = setting.privacy_policy_original_text;
+
+      setFormData(formMeta);
+    });
+  }, []);
+
+  const handleOnChange = (data) => {
+    setFormData(data);
+  };
+
+  return (
+    <>
+      <h3 className="mb-4">{t('page_title')}</h3>
+      <SchemaForm
+        schema={schema}
+        formData={formData}
+        onSubmit={onSubmit}
+        uiSchema={uiSchema}
+        onChange={handleOnChange}
+      />
+    </>
+  );
+};
+
+export default Legal;
diff --git a/ui/src/pages/Admin/Questions/index.tsx b/ui/src/pages/Admin/Questions/index.tsx
index 76a65de9..4169b840 100644
--- a/ui/src/pages/Admin/Questions/index.tsx
+++ b/ui/src/pages/Admin/Questions/index.tsx
@@ -15,11 +15,7 @@ import {
 import { ADMIN_LIST_STATUS } from '@/common/constants';
 import { useEditStatusModal, useReportModal } from '@/hooks';
 import * as Type from '@/common/interface';
-import {
-  useQuestionSearch,
-  changeQuestionStatus,
-  deleteQuestion,
-} from '@/services';
+import { useQuestionSearch, changeQuestionStatus } from '@/services';
 
 import '../index.scss';
 
@@ -76,9 +72,7 @@ const Questions: FC = () => {
         confirmBtnVariant: 'danger',
         confirmText: t('delete', { keyPrefix: 'btns' }),
         onConfirm: () => {
-          deleteQuestion({
-            id,
-          }).then(() => {
+          changeQuestionStatus(id, 'deleted').then(() => {
             refreshList();
           });
         },
diff --git a/ui/src/pages/Admin/Smtp/index.tsx b/ui/src/pages/Admin/Smtp/index.tsx
index 33de30ab..7b02aed8 100644
--- a/ui/src/pages/Admin/Smtp/index.tsx
+++ b/ui/src/pages/Admin/Smtp/index.tsx
@@ -1,11 +1,12 @@
 import React, { FC, useEffect, useState } from 'react';
-import { Form, Button, Stack } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
 import type * as Type from '@/common/interface';
 import { useToast } from '@/hooks';
 import { useSmtpSetting, updateSmtpSetting } from '@/services';
 import pattern from '@/common/pattern';
+import { SchemaForm, JSONSchema, UISchema } from '@/components';
+import { initFormData } from '../../../components/SchemaForm/index';
 
 const Smtp: FC = () => {
   const { t } = useTranslation('translation', {
@@ -13,90 +14,100 @@ const Smtp: FC = () => {
   });
   const Toast = useToast();
   const { data: setting } = useSmtpSetting();
-  const [formData, setFormData] = useState<Type.FormDataType>({
-    from_email: {
-      value: '',
-      isInvalid: false,
-      errorMsg: '',
-    },
-    from_name: {
-      value: '',
-      isInvalid: false,
-      errorMsg: '',
-    },
-    smtp_host: {
-      value: '',
-      isInvalid: false,
-      errorMsg: '',
+  const schema: JSONSchema = {
+    title: t('page_title'),
+    properties: {
+      from_email: {
+        type: 'string',
+        title: t('from_email.label'),
+        description: t('from_email.text'),
+      },
+      from_name: {
+        type: 'string',
+        title: t('from_name.label'),
+        description: t('from_name.text'),
+      },
+      smtp_host: {
+        type: 'string',
+        title: t('smtp_host.label'),
+        description: t('smtp_host.text'),
+      },
+      encryption: {
+        type: 'boolean',
+        title: t('encryption.label'),
+        description: t('encryption.text'),
+        enum: [true, false],
+        enumNames: ['SSL', ''],
+      },
+      smtp_port: {
+        type: 'string',
+        title: t('smtp_port.label'),
+        description: t('smtp_port.text'),
+      },
+      smtp_authentication: {
+        type: 'boolean',
+        title: t('smtp_authentication.label'),
+        enum: [true, false],
+        enumNames: [t('smtp_authentication.yes'), t('smtp_authentication.no')],
+      },
+      smtp_username: {
+        type: 'string',
+        title: t('smtp_username.label'),
+        description: t('smtp_username.text'),
+      },
+      smtp_password: {
+        type: 'string',
+        title: t('smtp_password.label'),
+        description: t('smtp_password.text'),
+      },
+      test_email_recipient: {
+        type: 'string',
+        title: t('test_email_recipient.label'),
+        description: t('test_email_recipient.text'),
+      },
     },
+  };
+  const uiSchema: UISchema = {
     encryption: {
-      value: '',
-      isInvalid: false,
-      errorMsg: '',
-    },
-    smtp_port: {
-      value: '',
-      isInvalid: false,
-      errorMsg: '',
-    },
-    smtp_authentication: {
-      value: 'yes',
-      isInvalid: false,
-      errorMsg: '',
-    },
-    smtp_username: {
-      value: '',
-      isInvalid: false,
-      errorMsg: '',
+      'ui:widget': 'radio',
     },
     smtp_password: {
-      value: '',
-      isInvalid: false,
-      errorMsg: '',
+      'ui:options': {
+        type: 'password',
+      },
+    },
+    smtp_authentication: {
+      'ui:widget': 'radio',
+    },
+    smtp_port: {
+      'ui:options': {
+        validator: (value) => {
+          if (!/^[1-9][0-9]*$/.test(value) || Number(value) > 65535) {
+            return t('smtp_port.msg');
+          }
+          return true;
+        },
+      },
     },
     test_email_recipient: {
-      value: '',
-      isInvalid: false,
-      errorMsg: '',
+      'ui:options': {
+        validator: (value) => {
+          if (value && !pattern.email.test(value)) {
+            return t('test_email_recipient.msg');
+          }
+          return true;
+        },
+      },
     },
-  });
-  const checkValidated = (): boolean => {
-    let ret = true;
-    const { smtp_port, test_email_recipient } = formData;
-    if (
-      !/^[1-9][0-9]*$/.test(smtp_port.value) ||
-      Number(smtp_port.value) > 65535
-    ) {
-      ret = false;
-      formData.smtp_port = {
-        value: smtp_port.value,
-        isInvalid: true,
-        errorMsg: t('smtp_port.msg'),
-      };
-    }
-    if (
-      test_email_recipient.value &&
-      !pattern.email.test(test_email_recipient.value)
-    ) {
-      ret = false;
-      formData.test_email_recipient = {
-        value: test_email_recipient.value,
-        isInvalid: true,
-        errorMsg: t('test_email_recipient.msg'),
-      };
-    }
-    setFormData({
-      ...formData,
-    });
-    return ret;
   };
+  const [formData, setFormData] = useState<Type.FormDataType>(
+    initFormData(schema),
+  );
 
   const onSubmit = (evt) => {
     evt.preventDefault();
     evt.stopPropagation();
-    if (!checkValidated()) {
-      return;
-    }
+
     const reqParams: Type.AdminSettingsSmtp = {
       from_email: formData.from_email.value,
       from_name: formData.from_name.value,
@@ -124,19 +135,7 @@ const Smtp: FC = () => {
         setFormData({ ...formData });
       });
   };
-  const onFieldChange = (fieldName, fieldValue) => {
-    if (!formData[fieldName]) {
-      return;
-    }
-    const fieldData: Type.FormDataType = {
-      [fieldName]: {
-        value: fieldValue,
-        isInvalid: false,
-        errorMsg: '',
-      },
-    };
-    setFormData({ ...formData, ...fieldData });
-  };
+
   useEffect(() => {
     if (!setting) {
       return;
@@ -152,166 +151,19 @@ const Smtp: FC = () => {
     setFormData(formState);
   }, [setting]);
 
+  const handleOnChange = (data) => {
+    setFormData(data);
+  };
   return (
     <>
       <h3 className="mb-4">{t('page_title')}</h3>
-      <Form noValidate onSubmit={onSubmit}>
-        <Form.Group controlId="fromEmail" className="mb-3">
-          <Form.Label>{t('from_email.label')}</Form.Label>
-          <Form.Control
-            required
-            type="text"
-            value={formData.from_email.value}
-            isInvalid={formData.from_email.isInvalid}
-            onChange={(evt) => onFieldChange('from_email', evt.target.value)}
-          />
-          <Form.Text as="div">{t('from_email.text')}</Form.Text>
-          <Form.Control.Feedback type="invalid">
-            {formData.from_email.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="fromName" className="mb-3">
-          <Form.Label>{t('from_name.label')}</Form.Label>
-          <Form.Control
-            required
-            type="text"
-            value={formData.from_name.value}
-            isInvalid={formData.from_name.isInvalid}
-            onChange={(evt) => onFieldChange('from_name', evt.target.value)}
-          />
-          <Form.Text as="div">{t('from_name.text')}</Form.Text>
-          <Form.Control.Feedback type="invalid">
-            {formData.from_name.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="smtpHost" className="mb-3">
-          <Form.Label>{t('smtp_host.label')}</Form.Label>
-          <Form.Control
-            required
-            type="text"
-            value={formData.smtp_host.value}
-            isInvalid={formData.smtp_host.isInvalid}
-            onChange={(evt) => onFieldChange('smtp_host', evt.target.value)}
-          />
-          <Form.Text as="div">{t('smtp_host.text')}</Form.Text>
-          <Form.Control.Feedback type="invalid">
-            {formData.smtp_host.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="encryption" className="mb-3">
-          <Form.Label>{t('encryption.label')}</Form.Label>
-          <Stack direction="horizontal">
-            <Form.Check
-              inline
-              label={t('encryption.ssl')}
-              name="smtp_encryption"
-              id="smtp_encryption_ssl"
-              checked={formData.encryption.value === 'SSL'}
-              onChange={() => onFieldChange('encryption', 'SSL')}
-              type="radio"
-            />
-            <Form.Check
-              inline
-              label={t('encryption.none')}
-              name="smtp_encryption"
-              id="smtp_encryption_none"
-              checked={!formData.encryption.value}
-              onChange={() => onFieldChange('encryption', '')}
-              type="radio"
-            />
-          </Stack>
-          <Form.Text as="div">{t('encryption.text')}</Form.Text>
-          <Form.Control.Feedback type="invalid">
-            {formData.encryption.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="smtpPort" className="mb-3">
-          <Form.Label>{t('smtp_port.label')}</Form.Label>
-          <Form.Control
-            required
-            type="text"
-            value={formData.smtp_port.value}
-            isInvalid={formData.smtp_port.isInvalid}
-            onChange={(evt) => onFieldChange('smtp_port', evt.target.value)}
-          />
-          <Form.Text as="div">{t('smtp_port.text')}</Form.Text>
-          <Form.Control.Feedback type="invalid">
-            {formData.smtp_port.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="smtpAuthentication" className="mb-3">
-          <Form.Label>{t('smtp_authentication.label')}</Form.Label>
-          <Stack direction="horizontal">
-            <Form.Check
-              inline
-              label={t('smtp_authentication.yes')}
-              name="smtp_authentication"
-              id="smtp_authentication_yes"
-              checked={!!formData.smtp_authentication.value}
-              onChange={() => onFieldChange('smtp_authentication', true)}
-              type="radio"
-            />
-            <Form.Check
-              inline
-              label={t('smtp_authentication.no')}
-              name="smtp_authentication"
-              id="smtp_authentication_no"
-              checked={!formData.smtp_authentication.value}
-              onChange={() => onFieldChange('smtp_authentication', false)}
-              type="radio"
-            />
-          </Stack>
-          <Form.Control.Feedback type="invalid">
-            {formData.smtp_authentication.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="smtpUsername" className="mb-3">
-          <Form.Label>{t('smtp_username.label')}</Form.Label>
-          <Form.Control
-            required
-            type="text"
-            value={formData.smtp_username.value}
-            isInvalid={formData.smtp_username.isInvalid}
-            onChange={(evt) => onFieldChange('smtp_username', evt.target.value)}
-          />
-          <Form.Control.Feedback type="invalid">
-            {formData.smtp_username.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="smtpPassword" className="mb-3">
-          <Form.Label>{t('smtp_password.label')}</Form.Label>
-          <Form.Control
-            required
-            type="password"
-            value={formData.smtp_password.value}
-            isInvalid={formData.smtp_password.isInvalid}
-            onChange={(evt) => onFieldChange('smtp_password', evt.target.value)}
-          />
-          <Form.Control.Feedback type="invalid">
-            {formData.smtp_password.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="testEmailRecipient" className="mb-3">
-          <Form.Label>{t('test_email_recipient.label')}</Form.Label>
-          <Form.Control
-            required
-            type="text"
-            value={formData.test_email_recipient.value}
-            isInvalid={formData.test_email_recipient.isInvalid}
-            onChange={(evt) =>
-              onFieldChange('test_email_recipient', evt.target.value)
-            }
-          />
-          <Form.Text as="div">{t('test_email_recipient.text')}</Form.Text>
-          <Form.Control.Feedback type="invalid">
-            {formData.test_email_recipient.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-
-        <Button variant="primary" type="submit">
-          {t('save', { keyPrefix: 'btns' })}
-        </Button>
-      </Form>
+      <SchemaForm
+        schema={schema}
+        uiSchema={uiSchema}
+        formData={formData}
+        onChange={handleOnChange}
+        onSubmit={onSubmit}
+      />
     </>
   );
 };
diff --git a/ui/src/pages/Admin/Write/index.tsx b/ui/src/pages/Admin/Write/index.tsx
new file mode 100644
index 00000000..12cf4e98
--- /dev/null
+++ b/ui/src/pages/Admin/Write/index.tsx
@@ -0,0 +1,118 @@
+import React, { FC, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { SchemaForm, JSONSchema, initFormData, UISchema } from '@/components';
+import type * as Type from '@/common/interface';
+import { useToast } from '@/hooks';
+import {
+  getRequireAndReservedTag,
+  postRequireAndReservedTag,
+} from '@/services';
+
+import '../index.scss';
+
+const Legal: FC = () => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'admin.write',
+  });
+  const Toast = useToast();
+  // const updateSiteInfo = siteInfoStore((state) => state.update);
+
+  const schema: JSONSchema = {
+    title: t('page_title'),
+    properties: {
+      recommend_tags: {
+        type: 'string',
+        title: t('recommend_tags.label'),
+        description: t('recommend_tags.text'),
+      },
+      required_tag: {
+        type: 'boolean',
+        title: t('required_tag.label'),
+        description: t('required_tag.text'),
+      },
+      reserved_tags: {
+        type: 'string',
+        title: t('reserved_tags.label'),
+        description: t('reserved_tags.text'),
+      },
+    },
+  };
+  const uiSchema: UISchema = {
+    recommend_tags: {
+      'ui:widget': 'textarea',
+      'ui:options': {
+        rows: 5,
+      },
+    },
+    required_tag: {
+      'ui:widget': 'switch',
+    },
+    reserved_tags: {
+      'ui:widget': 'textarea',
+      'ui:options': {
+        rows: 5,
+      },
+    },
+  };
+  const [formData, setFormData] = useState(initFormData(schema));
+
+  const onSubmit = (evt) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    const reqParams: Type.AdminSettingsWrite = {
+      recommend_tags: formData.recommend_tags.value.trim().split('\n'),
+      required_tag: formData.required_tag.value,
+      reserved_tags: formData.reserved_tags.value.trim().split('\n'),
+    };
+
+    console.log(reqParams);
+    postRequireAndReservedTag(reqParams)
+      .then(() => {
+        Toast.onShow({
+          msg: t('update', { keyPrefix: 'toast' }),
+          variant: 'success',
+        });
+      })
+      .catch((err) => {
+        if (err.isError && err.key) {
+          formData[err.key].isInvalid = true;
+          formData[err.key].errorMsg = err.value;
+        }
+        setFormData({ ...formData });
+      });
+  };
+
+  const initData = () => {
+    getRequireAndReservedTag().then((res) => {
+      formData.recommend_tags.value = res.recommend_tags.join('\n');
+      formData.required_tag.value = res.required_tag;
+      formData.reserved_tags.value = res.reserved_tags.join('\n');
+      setFormData({ ...formData });
+    });
+  };
+
+  useEffect(() => {
+    initData();
+  }, []);
+
+  const handleOnChange = (data) => {
+    setFormData(data);
+  };
+
+  return (
+    <>
+      <h3 className="mb-4">{t('page_title')}</h3>
+      <SchemaForm
+        schema={schema}
+        formData={formData}
+        onSubmit={onSubmit}
+        uiSchema={uiSchema}
+        onChange={handleOnChange}
+      />
+    </>
+  );
+};
+
+export default Legal;
diff --git a/ui/src/pages/Admin/index.tsx b/ui/src/pages/Admin/index.tsx
index f8b389d6..7ae60655 100644
--- a/ui/src/pages/Admin/index.tsx
+++ b/ui/src/pages/Admin/index.tsx
@@ -1,25 +1,42 @@
 import { FC } from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 
-import { AccordionNav, AdminHeader, PageTitle } from '@/components';
+import { AccordionNav, PageTitle } from '@/components';
 import { ADMIN_NAV_MENUS } from '@/common/constants';
 
 import './index.scss';
 
-const Dashboard: FC = () => {
+const formPaths = [
+  'general',
+  'smtp',
+  'interface',
+  'branding',
+  'legal',
+  'write',
+];
+
+const Index: FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'page_title' });
+  const { pathname } = useLocation();
+
   return (
     <>
       <PageTitle title={t('admin')} />
-      <AdminHeader />
+      <div className="bg-light py-2">
+        <Container className="py-1">
+          <h6 className="mb-0 fw-bold lh-base">
+            {t('title', { keyPrefix: 'admin.admin_header' })}
+          </h6>
+        </Container>
+      </div>
       <Container className="admin-container">
         <Row>
           <Col lg={2}>
-            <AccordionNav menus={ADMIN_NAV_MENUS} />
+            <AccordionNav menus={ADMIN_NAV_MENUS} path="/admin/" />
           </Col>
-          <Col lg={10}>
+          <Col lg={formPaths.find((v) => pathname.includes(v)) ? 6 : 10}>
             <Outlet />
           </Col>
         </Row>
@@ -28,4 +45,4 @@ const Dashboard: FC = () => {
   );
 };
 
-export default Dashboard;
+export default Index;
diff --git a/ui/src/pages/Layout/index.tsx b/ui/src/pages/Layout/index.tsx
index 7539c2fa..94478af9 100644
--- a/ui/src/pages/Layout/index.tsx
+++ b/ui/src/pages/Layout/index.tsx
@@ -4,12 +4,13 @@ import { Helmet, HelmetProvider } from 'react-helmet-async';
 
 import { SWRConfig } from 'swr';
 
-import { siteInfoStore, toastStore } from '@/stores';
+import { siteInfoStore, toastStore, brandingStore } from '@/stores';
 import { Header, Footer, Toast } from '@/components';
 
 const Layout: FC = () => {
   const { msg: toastMsg, variant, clear: toastClear } = toastStore();
   const { siteInfo } = siteInfoStore.getState();
+  const { favicon } = brandingStore((state) => state.branding);
   const closeToast = () => {
     toastClear();
   };
@@ -17,6 +18,7 @@ const Layout: FC = () => {
   return (
     <HelmetProvider>
       <Helmet>
+        <link rel="icon" href={favicon || '/favicon.ico'} />
         {siteInfo && <meta name="description" content={siteInfo.description} />}
       </Helmet>
       <SWRConfig
diff --git a/ui/src/pages/Legal/Privacy/index.tsx b/ui/src/pages/Legal/Privacy/index.tsx
new file mode 100644
index 00000000..90e0610f
--- /dev/null
+++ b/ui/src/pages/Legal/Privacy/index.tsx
@@ -0,0 +1,17 @@
+import { FC } from 'react';
+
+import { useLegalPrivacy } from '@/services';
+
+const Index: FC = () => {
+  const { data: privacy } = useLegalPrivacy();
+  return (
+    <div
+      className="fmt fs-14"
+      dangerouslySetInnerHTML={{
+        __html: privacy?.privacy_policy_parsed_text || '',
+      }}
+    />
+  );
+};
+
+export default Index;
diff --git a/ui/src/pages/Legal/Tos/index.tsx b/ui/src/pages/Legal/Tos/index.tsx
new file mode 100644
index 00000000..bfd788e1
--- /dev/null
+++ b/ui/src/pages/Legal/Tos/index.tsx
@@ -0,0 +1,17 @@
+import { FC } from 'react';
+
+import { useLegalTos } from '@/services';
+
+const Index: FC = () => {
+  const { data: tos } = useLegalTos();
+  return (
+    <div
+      className="fmt fs-14"
+      dangerouslySetInnerHTML={{
+        __html: tos?.terms_of_service_parsed_text || '',
+      }}
+    />
+  );
+};
+
+export default Index;
diff --git a/ui/src/pages/Legal/index.scss b/ui/src/pages/Legal/index.scss
new file mode 100644
index 00000000..12582a98
--- /dev/null
+++ b/ui/src/pages/Legal/index.scss
@@ -0,0 +1,4 @@
+.sub-container {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
diff --git a/ui/src/pages/Legal/index.tsx b/ui/src/pages/Legal/index.tsx
new file mode 100644
index 00000000..2a7d5a7b
--- /dev/null
+++ b/ui/src/pages/Legal/index.tsx
@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { Container, Row, Col } from 'react-bootstrap';
+import { Outlet } from 'react-router-dom';
+
+import { AccordionNav } from '@/components';
+import { ADMIN_LEGAL_MENUS } from '@/common/constants';
+
+import './index.scss';
+
+const Index: FC = () => {
+  return (
+    <Container className="sub-container">
+      <Row>
+        <Col lg={2}>
+          <AccordionNav menus={ADMIN_LEGAL_MENUS} />
+        </Col>
+        <Col lg={6}>
+          <Outlet />
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+export default Index;
diff --git a/ui/src/pages/Questions/Ask/index.tsx b/ui/src/pages/Questions/Ask/index.tsx
index 3ed72f84..f8f1ea1e 100644
--- a/ui/src/pages/Questions/Ask/index.tsx
+++ b/ui/src/pages/Questions/Ask/index.tsx
@@ -123,7 +123,7 @@ const Ask = () => {
         isInvalid: true,
         errorMsg: t('form.fields.title.msg.empty'),
       };
-    } else if ([...title.value].length > 150) {
+    } else if (Array.from(title.value).length > 150) {
       bol = false;
       formData.title = {
         value: title.value,
diff --git a/ui/src/pages/Questions/Detail/components/Question/index.tsx b/ui/src/pages/Questions/Detail/components/Question/index.tsx
index 5795ca42..685c0486 100644
--- a/ui/src/pages/Questions/Detail/components/Question/index.tsx
+++ b/ui/src/pages/Questions/Detail/components/Question/index.tsx
@@ -93,14 +93,7 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer }) => {
       </div>
       <div className="m-n1">
         {data?.tags?.map((item: any) => {
-          return (
-            <Tag
-              className="m-1"
-              href={`/tags/${item.main_tag_slug_name || item.slug_name}`}
-              key={item.slug_name}>
-              {item.slug_name}
-            </Tag>
-          );
+          return <Tag className="m-1" key={item.slug_name} data={item} />;
         })}
       </div>
       <article
diff --git a/ui/src/pages/Questions/Detail/index.tsx b/ui/src/pages/Questions/Detail/index.tsx
index cc19a719..50346938 100644
--- a/ui/src/pages/Questions/Detail/index.tsx
+++ b/ui/src/pages/Questions/Detail/index.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
 import { useParams, useSearchParams, useNavigate } from 'react-router-dom';
 
-import { Pagination, PageTitle } from '@/components';
+import { Pagination, PageTitle, Labels } from '@/components';
 import { loggedUserInfoStore } from '@/stores';
 import { scrollTop } from '@/utils';
 import { usePageUsers } from '@/hooks';
@@ -167,6 +167,7 @@ const Index = () => {
             )}
           </Col>
           <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
+            <Labels className="mb-4" />
             <RelatedQuestions id={question?.id || ''} />
           </Col>
         </Row>
diff --git a/ui/src/pages/Search/components/SearchItem/index.tsx b/ui/src/pages/Search/components/SearchItem/index.tsx
index ca4df6e6..8b9d8e6e 100644
--- a/ui/src/pages/Search/components/SearchItem/index.tsx
+++ b/ui/src/pages/Search/components/SearchItem/index.tsx
@@ -67,11 +67,7 @@ const Index: FC<Props> = ({ data }) => {
       )}
 
       {data.object?.tags?.map((item) => {
-        return (
-          <Tag href={`/tags/${item.slug_name}`} className="me-1">
-            {item.slug_name}
-          </Tag>
-        );
+        return <Tag key={item.slug_name} className="me-1" data={item} />;
       })}
     </ListGroupItem>
   );
diff --git a/ui/src/pages/Tags/Info/index.tsx b/ui/src/pages/Tags/Info/index.tsx
index 3b792adb..55758038 100644
--- a/ui/src/pages/Tags/Info/index.tsx
+++ b/ui/src/pages/Tags/Info/index.tsx
@@ -152,9 +152,17 @@ const TagIntroduction = () => {
                   <>
                     <div className="mb-3">
                       {t('synonyms.text')}{' '}
-                      <Tag className="me-2 mb-2" href="#">
-                        {tagName}
-                      </Tag>
+                      <Tag
+                        className="me-2 mb-2"
+                        href="#"
+                        data={{
+                          slug_name: tagName || '',
+                          main_tag_slug_name: '',
+                          display_name: '',
+                          recommend: false,
+                          reserved: false,
+                        }}
+                      />
                     </div>
                     <TagSelector
                       value={synonymsTags}
@@ -170,9 +178,8 @@ const TagIntroduction = () => {
                         <Tag
                           key={item.tag_id}
                           className="me-2 mb-2"
-                          href={`/tags/${item.slug_name}`}>
-                          {item.slug_name}
-                        </Tag>
+                          data={item}
+                        />
                       );
                     })
                   ) : (
diff --git a/ui/src/pages/Tags/index.tsx b/ui/src/pages/Tags/index.tsx
index a01e3e56..bbd55a99 100644
--- a/ui/src/pages/Tags/index.tsx
+++ b/ui/src/pages/Tags/index.tsx
@@ -77,9 +77,8 @@ const Tags = () => {
                   className="mb-4">
                   <Card className="h-100">
                     <Card.Body className="d-flex flex-column align-items-start">
-                      <Tag className="mb-3" href={`/tags/${tag.slug_name}`}>
-                        {tag.slug_name}
-                      </Tag>
+                      <Tag className="mb-3" data={tag} />
+
                       <p className="fs-14 flex-fill text-break text-wrap text-truncate-4">
                         {tag.original_text}
                       </p>
diff --git a/ui/src/pages/Users/ActiveEmail/index.tsx b/ui/src/pages/Users/ActiveEmail/index.tsx
index ac2223a7..177395d7 100644
--- a/ui/src/pages/Users/ActiveEmail/index.tsx
+++ b/ui/src/pages/Users/ActiveEmail/index.tsx
@@ -1,16 +1,17 @@
 import { FC, memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
 
 import { loggedUserInfoStore } from '@/stores';
-import { getQueryString } from '@/utils';
 import { activateAccount } from '@/services';
 import { PageTitle } from '@/components';
 
 const Index: FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'page_title' });
+  const [searchParams] = useSearchParams();
   const updateUser = loggedUserInfoStore((state) => state.update);
   useEffect(() => {
-    const code = getQueryString('code');
+    const code = searchParams.get('code');
 
     if (code) {
       activateAccount(encodeURIComponent(code)).then((res) => {
diff --git a/ui/src/pages/Users/Login/index.tsx b/ui/src/pages/Users/Login/index.tsx
index 7a499e64..503b9723 100644
--- a/ui/src/pages/Users/Login/index.tsx
+++ b/ui/src/pages/Users/Login/index.tsx
@@ -1,6 +1,6 @@
 import React, { FormEvent, useState, useEffect } from 'react';
 import { Container, Form, Button, Col } from 'react-bootstrap';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 
 import type {
@@ -10,7 +10,7 @@ import type {
 } from '@/common/interface';
 import { PageTitle, Unactivate } from '@/components';
 import { loggedUserInfoStore } from '@/stores';
-import { getQueryString, guard, floppyNavigation } from '@/utils';
+import { guard, floppyNavigation } from '@/utils';
 import { login, checkImgCode } from '@/services';
 import { REDIRECT_PATH_STORAGE_KEY } from '@/common/constants';
 import { RouteAlias } from '@/router/alias';
@@ -20,6 +20,7 @@ import Storage from '@/utils/storage';
 const Index: React.FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'login' });
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
   const [refresh, setRefresh] = useState(0);
   const updateUser = loggedUserInfoStore((state) => state.update);
   const storeUser = loggedUserInfoStore((state) => state.user);
@@ -154,7 +155,7 @@ const Index: React.FC = () => {
   }, [refresh]);
 
   useEffect(() => {
-    const isInactive = getQueryString('status');
+    const isInactive = searchParams.get('status');
 
     if ((storeUser.id && storeUser.mail_status === 2) || isInactive) {
       setStep(2);
diff --git a/ui/src/pages/Users/PasswordReset/index.tsx b/ui/src/pages/Users/PasswordReset/index.tsx
index ab00de30..fc95731b 100644
--- a/ui/src/pages/Users/PasswordReset/index.tsx
+++ b/ui/src/pages/Users/PasswordReset/index.tsx
@@ -1,17 +1,16 @@
 import React, { FormEvent, useState } from 'react';
 import { Container, Col, Form, Button } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import { loggedUserInfoStore } from '@/stores';
-import { getQueryString } from '@/utils';
 import type { FormDataType } from '@/common/interface';
 import { replacementPassword } from '@/services';
 import { PageTitle } from '@/components';
 
 const Index: React.FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'password_reset' });
-
+  const [searchParams] = useSearchParams();
   const [step, setStep] = useState(1);
   const clearUser = loggedUserInfoStore((state) => state.clear);
   const [formData, setFormData] = useState<FormDataType>({
@@ -91,7 +90,7 @@ const Index: React.FC = () => {
     if (checkValidated() === false) {
       return;
     }
-    const code = getQueryString('code');
+    const code = searchParams.get('code');
     if (!code) {
       console.error('code is required');
       return;
diff --git a/ui/src/pages/Users/Personal/components/Answers/index.tsx b/ui/src/pages/Users/Personal/components/Answers/index.tsx
index a7d8c48a..4d7b6f1d 100644
--- a/ui/src/pages/Users/Personal/components/Answers/index.tsx
+++ b/ui/src/pages/Users/Personal/components/Answers/index.tsx
@@ -46,14 +46,7 @@ const Index: FC<Props> = ({ visible, data }) => {
             </div>
             <div>
               {item.question_info?.tags?.map((tag) => {
-                return (
-                  <Tag
-                    href={`/t/${tag.main_tag_slug_name || tag.slug_name}`}
-                    key={tag.slug_name}
-                    className="me-1">
-                    {tag.slug_name}
-                  </Tag>
-                );
+                return <Tag key={tag.slug_name} className="me-1" data={tag} />;
               })}
             </div>
           </ListGroupItem>
diff --git a/ui/src/pages/Users/Personal/components/DefaultList/index.tsx b/ui/src/pages/Users/Personal/components/DefaultList/index.tsx
index e249067f..faa4ddfe 100644
--- a/ui/src/pages/Users/Personal/components/DefaultList/index.tsx
+++ b/ui/src/pages/Users/Personal/components/DefaultList/index.tsx
@@ -73,14 +73,7 @@ const Index: FC<Props> = ({ visible, tabName, data }) => {
             </div>
             <div>
               {item.tags?.map((tag) => {
-                return (
-                  <Tag
-                    href={`/t/${tag.main_tag_slug_name || tag.slug_name}`}
-                    className="me-1"
-                    key={tag.slug_name}>
-                    {tag.slug_name}
-                  </Tag>
-                );
+                return <Tag className="me-1" key={tag.slug_name} data={tag} />;
               })}
             </div>
           </ListGroupItem>
diff --git a/ui/src/pages/Users/Register/components/SignUpForm/index.tsx b/ui/src/pages/Users/Register/components/SignUpForm/index.tsx
index 0d92c5fa..61ccbb2e 100644
--- a/ui/src/pages/Users/Register/components/SignUpForm/index.tsx
+++ b/ui/src/pages/Users/Register/components/SignUpForm/index.tsx
@@ -1,10 +1,10 @@
-import React, { FormEvent, useState } from 'react';
+import React, { FormEvent, MouseEvent, useState } from 'react';
 import { Form, Button, Col } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 
 import type { FormDataType } from '@/common/interface';
-import { register } from '@/services';
+import { register, useLegalTos, useLegalPrivacy } from '@/services';
 import userStore from '@/stores/userInfo';
 
 interface Props {
@@ -82,6 +82,26 @@ const Index: React.FC<Props> = ({ callback }) => {
     });
     return bol;
   };
+  const { data: tos } = useLegalTos();
+  const { data: privacy } = useLegalPrivacy();
+  const argumentClick = (evt: MouseEvent, type: 'tos' | 'privacy') => {
+    evt.stopPropagation();
+    const contentText =
+      type === 'tos'
+        ? tos?.terms_of_service_original_text
+        : privacy?.privacy_policy_original_text;
+    let matchUrl: URL | undefined;
+    try {
+      if (contentText) {
+        matchUrl = new URL(contentText);
+      }
+      // eslint-disable-next-line no-empty
+    } catch (ex) {}
+    if (matchUrl) {
+      evt.preventDefault();
+      window.open(matchUrl.toString());
+    }
+  };
 
   const handleSubmit = async (event: FormEvent) => {
     event.preventDefault();
@@ -185,7 +205,29 @@ const Index: React.FC<Props> = ({ callback }) => {
           </Button>
         </div>
       </Form>
-
+      <div className="text-center fs-14 mt-3">
+        <Trans i18nKey="login.agreements" ns="translation">
+          By registering, you agree to the
+          <Link
+            to="/privacy"
+            onClick={(evt) => {
+              argumentClick(evt, 'privacy');
+            }}
+            target="_blank">
+            privacy policy
+          </Link>
+          and
+          <Link
+            to="/tos"
+            onClick={(evt) => {
+              argumentClick(evt, 'tos');
+            }}
+            target="_blank">
+            terms of service
+          </Link>
+          .
+        </Trans>
+      </div>
       <div className="text-center mt-5">
         <Trans i18nKey="login.info_login" ns="translation">
           Already have an account? <Link to="/users/login">Log in</Link>
diff --git a/ui/src/pages/Users/Settings/Profile/index.tsx b/ui/src/pages/Users/Settings/Profile/index.tsx
index 500c2ef1..0b874997 100644
--- a/ui/src/pages/Users/Settings/Profile/index.tsx
+++ b/ui/src/pages/Users/Settings/Profile/index.tsx
@@ -9,7 +9,7 @@ import type { FormDataType } from '@/common/interface';
 import { UploadImg, Avatar } from '@/components';
 import { loggedUserInfoStore } from '@/stores';
 import { useToast } from '@/hooks';
-import { modifyUserInfo, uploadAvatar, getLoggedUserInfo } from '@/services';
+import { modifyUserInfo, getLoggedUserInfo } from '@/services';
 
 const Index: React.FC = () => {
   const { t } = useTranslation('translation', {
@@ -60,21 +60,16 @@ const Index: React.FC = () => {
     setFormData({ ...formData, ...params });
   };
 
-  const avatarUpload = (file: any) => {
-    return new Promise((resolve) => {
-      uploadAvatar(file).then((res) => {
-        setFormData({
-          ...formData,
-          avatar: {
-            ...formData.avatar,
-            type: 'custom',
-            custom: res,
-            isInvalid: false,
-            errorMsg: '',
-          },
-        });
-        resolve(true);
-      });
+  const avatarUpload = (path: string) => {
+    setFormData({
+      ...formData,
+      avatar: {
+        ...formData.avatar,
+        type: 'custom',
+        custom: path,
+        isInvalid: false,
+        errorMsg: '',
+      },
     });
   };
 
@@ -364,7 +359,11 @@ const Index: React.FC = () => {
                 className="me-3 rounded"
               />
               <div>
-                <UploadImg type="avatar" upload={avatarUpload} />
+                <UploadImg
+                  type="avatar"
+                  uploadCallback={avatarUpload}
+                  className="mb-2"
+                />
                 <div>
                   <Form.Text className="text-muted mt-0">
                     <Trans i18nKey="settings.profile.avatar.text">
diff --git a/ui/src/react-app-env.d.ts b/ui/src/react-app-env.d.ts
index c40b86b3..9ccf8b7f 100644
--- a/ui/src/react-app-env.d.ts
+++ b/ui/src/react-app-env.d.ts
@@ -1,2 +1,4 @@
 /// <reference types="react-scripts" />
 declare module '*.yaml';
+
+declare module '*.ico';
diff --git a/ui/src/router/index.tsx b/ui/src/router/index.tsx
index e5aa2797..6892f403 100644
--- a/ui/src/router/index.tsx
+++ b/ui/src/router/index.tsx
@@ -10,7 +10,7 @@ const routes: RouteObject[] = [];
 
 const routeWrapper = (routeNodes: RouteNode[], root: RouteObject[]) => {
   routeNodes.forEach((rn) => {
-    if (rn.path === '/') {
+    if (rn.page === 'pages/Layout') {
       rn.element = <Layout />;
       rn.errorElement = <ErrorBoundary />;
     } else {
@@ -31,7 +31,7 @@ const routeWrapper = (routeNodes: RouteNode[], root: RouteObject[]) => {
       const refLoader = rn.loader;
       const refGuard = rn.guard;
       rn.loader = async (args) => {
-        const gr = await refGuard();
+        const gr = await refGuard(args);
         if (gr?.redirect && floppyNavigation.differentCurrent(gr.redirect)) {
           return redirect(gr.redirect);
         }
diff --git a/ui/src/router/routes.ts b/ui/src/router/routes.ts
index a723284c..7336b995 100644
--- a/ui/src/router/routes.ts
+++ b/ui/src/router/routes.ts
@@ -1,4 +1,4 @@
-import { RouteObject } from 'react-router-dom';
+import { LoaderFunctionArgs, RouteObject } from 'react-router-dom';
 
 import { guard } from '@/utils';
 import type { TGuardResult } from '@/utils/guard';
@@ -13,7 +13,7 @@ export interface RouteNode extends RouteObject {
    * if guard returned the `TGuardResult` has `redirect` field,
    * then auto redirect route to the `redirect` target.
    */
-  guard?: () => Promise<TGuardResult>;
+  guard?: (args: LoaderFunctionArgs) => Promise<TGuardResult>;
 }
 
 const routes: RouteNode[] = [
@@ -31,7 +31,6 @@ const routes: RouteNode[] = [
       },
       {
         path: 'questions',
-        index: true,
         page: 'pages/Questions',
       },
       {
@@ -251,6 +250,18 @@ const routes: RouteNode[] = [
             path: 'smtp',
             page: 'pages/Admin/Smtp',
           },
+          {
+            path: 'branding',
+            page: 'pages/Admin/Branding',
+          },
+          {
+            path: 'legal',
+            page: 'pages/Admin/Legal',
+          },
+          {
+            path: 'write',
+            page: 'pages/Admin/Write',
+          },
         ],
       },
       {
@@ -263,6 +274,25 @@ const routes: RouteNode[] = [
       },
     ],
   },
+  {
+    path: '/',
+    page: 'pages/Layout',
+    children: [
+      {
+        page: 'pages/Legal',
+        children: [
+          {
+            path: 'tos',
+            page: 'pages/Legal/Tos',
+          },
+          {
+            path: 'privacy',
+            page: 'pages/Legal/Privacy',
+          },
+        ],
+      },
+    ],
+  },
   {
     path: '/install',
     page: 'pages/Install',
diff --git a/ui/src/services/admin/dashboard.ts b/ui/src/services/admin/dashboard.ts
new file mode 100644
index 00000000..580c6583
--- /dev/null
+++ b/ui/src/services/admin/dashboard.ts
@@ -0,0 +1,17 @@
+import useSWR from 'swr';
+
+import * as Type from '@/common/interface';
+import request from '@/utils/request';
+
+export const useDashBoard = () => {
+  const apiUrl = `/answer/admin/api/dashboard`;
+  const { data, error } = useSWR<Type.AdminDashboard, Error>(
+    [apiUrl],
+    request.instance.get,
+  );
+  return {
+    data,
+    isLoading: !data && !error,
+    error,
+  };
+};
diff --git a/ui/src/services/admin/index.ts b/ui/src/services/admin/index.ts
index be55c163..09811f2e 100644
--- a/ui/src/services/admin/index.ts
+++ b/ui/src/services/admin/index.ts
@@ -2,3 +2,5 @@ export * from './answer';
 export * from './flag';
 export * from './question';
 export * from './settings';
+export * from './users';
+export * from './dashboard';
diff --git a/ui/src/services/admin/question.ts b/ui/src/services/admin/question.ts
index 9e8d726a..bdd5aeb0 100644
--- a/ui/src/services/admin/question.ts
+++ b/ui/src/services/admin/question.ts
@@ -4,24 +4,6 @@ import useSWR from 'swr';
 import request from '@/utils/request';
 import type * as Type from '@/common/interface';
 
-export const changeUserStatus = (params) => {
-  return request.put('/answer/admin/api/user/status', params);
-};
-
-export const useQueryUsers = (params) => {
-  const apiUrl = `/answer/admin/api/users/page?${qs.stringify(params)}`;
-  const { data, error, mutate } = useSWR<Type.ListResult, Error>(
-    apiUrl,
-    request.instance.get,
-  );
-  return {
-    data,
-    isLoading: !data && !error,
-    error,
-    mutate,
-  };
-};
-
 export const useQuestionSearch = (params: Type.AdminContentsReq) => {
   const apiUrl = `/answer/admin/api/question/page?${qs.stringify(params)}`;
   const { data, error, mutate } = useSWR<Type.ListResult, Error>(
diff --git a/ui/src/services/admin/settings.ts b/ui/src/services/admin/settings.ts
index 6bae3576..e24cf34f 100644
--- a/ui/src/services/admin/settings.ts
+++ b/ui/src/services/admin/settings.ts
@@ -71,20 +71,33 @@ export const updateSmtpSetting = (params: Type.AdminSettingsSmtp) => {
   return request.put(apiUrl, params);
 };
 
-export const useDashBoard = () => {
-  const apiUrl = `/answer/admin/api/dashboard`;
-  const { data, error } = useSWR<Type.AdminDashboard, Error>(
-    [apiUrl],
-    request.instance.get,
-  );
-  return {
-    data,
-    isLoading: !data && !error,
-    error,
-  };
-};
-
 export const getAdminLanguageOptions = () => {
   const apiUrl = `/answer/admin/api/language/options`;
   return request.get<Type.LangsType[]>(apiUrl);
 };
+
+export const getBrandSetting = () => {
+  return request.get('/answer/admin/api/siteinfo/branding');
+};
+
+export const brandSetting = (params: Type.AdmingSettingBranding) => {
+  return request.put('/answer/admin/api/siteinfo/branding', params);
+};
+
+export const getRequireAndReservedTag = () => {
+  return request.get('/answer/admin/api/siteinfo/write');
+};
+
+export const postRequireAndReservedTag = (params) => {
+  return request.put('/answer/admin/api/siteinfo/write', params);
+};
+
+export const getLegalSetting = () => {
+  return request.get<Type.AdminSettingsLegal>(
+    '/answer/admin/api/siteinfo/legal',
+  );
+};
+
+export const putLegalSetting = (params: Type.AdminSettingsLegal) => {
+  return request.put('/answer/admin/api/siteinfo/legal', params);
+};
diff --git a/ui/src/services/admin/users.ts b/ui/src/services/admin/users.ts
new file mode 100644
index 00000000..0cbc787a
--- /dev/null
+++ b/ui/src/services/admin/users.ts
@@ -0,0 +1,23 @@
+import qs from 'qs';
+import useSWR from 'swr';
+
+import request from '@/utils/request';
+import type * as Type from '@/common/interface';
+
+export const changeUserStatus = (params) => {
+  return request.put('/answer/admin/api/user/status', params);
+};
+
+export const useQueryUsers = (params) => {
+  const apiUrl = `/answer/admin/api/users/page?${qs.stringify(params)}`;
+  const { data, error, mutate } = useSWR<Type.ListResult, Error>(
+    apiUrl,
+    request.instance.get,
+  );
+  return {
+    data,
+    isLoading: !data && !error,
+    error,
+    mutate,
+  };
+};
diff --git a/ui/src/services/client/index.ts b/ui/src/services/client/index.ts
index 17cfb7e0..2777d9ef 100644
--- a/ui/src/services/client/index.ts
+++ b/ui/src/services/client/index.ts
@@ -5,3 +5,4 @@ export * from './question';
 export * from './search';
 export * from './tag';
 export * from './settings';
+export * from './legal';
diff --git a/ui/src/services/client/legal.ts b/ui/src/services/client/legal.ts
new file mode 100644
index 00000000..d294f1df
--- /dev/null
+++ b/ui/src/services/client/legal.ts
@@ -0,0 +1,32 @@
+import useSWR from 'swr';
+
+import request from '@/utils/request';
+import type * as Type from '@/common/interface';
+
+export const useLegalTos = () => {
+  const apiUrl = '/answer/api/v1/siteinfo/legal?info_type=tos';
+  const { data, error, mutate } = useSWR<Type.AdminSettingsLegal, Error>(
+    [apiUrl],
+    request.instance.get,
+  );
+  return {
+    data,
+    isLoading: !data && !error,
+    error,
+    mutate,
+  };
+};
+
+export const useLegalPrivacy = () => {
+  const apiUrl = '/answer/api/v1/siteinfo/legal?info_type=privacy';
+  const { data, error, mutate } = useSWR<Type.AdminSettingsLegal, Error>(
+    [apiUrl],
+    request.instance.get,
+  );
+  return {
+    data,
+    isLoading: !data && !error,
+    error,
+    mutate,
+  };
+};
diff --git a/ui/src/services/client/notification.ts b/ui/src/services/client/notification.ts
index 6d34022b..c4e535c8 100644
--- a/ui/src/services/client/notification.ts
+++ b/ui/src/services/client/notification.ts
@@ -3,7 +3,7 @@ import qs from 'qs';
 
 import request from '@/utils/request';
 import type * as Type from '@/common/interface';
-import { tryLoggedAndActicevated } from '@/utils/guard';
+import { tryLoggedAndActivated } from '@/utils/guard';
 
 export const useQueryNotifications = (params) => {
   const apiUrl = `/answer/api/v1/notification/page?${qs.stringify(params, {
@@ -33,7 +33,7 @@ export const useQueryNotificationStatus = () => {
   const apiUrl = '/answer/api/v1/notification/status';
 
   return useSWR<{ inbox: number; achievement: number }>(
-    tryLoggedAndActicevated().ok ? apiUrl : null,
+    tryLoggedAndActivated().ok ? apiUrl : null,
     request.instance.get,
     {
       refreshInterval: 3000,
diff --git a/ui/src/services/client/tag.ts b/ui/src/services/client/tag.ts
index b1ec3a9a..10e3c76a 100644
--- a/ui/src/services/client/tag.ts
+++ b/ui/src/services/client/tag.ts
@@ -2,7 +2,7 @@ import useSWR from 'swr';
 
 import request from '@/utils/request';
 import type * as Type from '@/common/interface';
-import { tryLoggedAndActicevated } from '@/utils/guard';
+import { tryLoggedAndActivated } from '@/utils/guard';
 
 export const deleteTag = (id) => {
   return request.delete('/answer/api/v1/tag', {
@@ -24,7 +24,7 @@ export const saveSynonymsTags = (params) => {
 
 export const useFollowingTags = () => {
   let apiUrl = '';
-  if (tryLoggedAndActicevated().ok) {
+  if (tryLoggedAndActivated().ok) {
     apiUrl = '/answer/api/v1/tags/following';
   }
   const { data, error, mutate } = useSWR<any[]>(apiUrl, request.instance.get);
diff --git a/ui/src/services/common.ts b/ui/src/services/common.ts
index 1ddc7f18..8a541f03 100644
--- a/ui/src/services/common.ts
+++ b/ui/src/services/common.ts
@@ -4,12 +4,13 @@ import useSWR from 'swr';
 import request from '@/utils/request';
 import type * as Type from '@/common/interface';
 
-export const uploadImage = (file) => {
+export const uploadImage = (params: { file: File; type: Type.UploadType }) => {
   const form = new FormData();
-
-  form.append('file', file);
-  return request.post('/answer/api/v1/user/post/file', form);
+  form.append('source', String(params.type));
+  form.append('file', params.file);
+  return request.post('/answer/api/v1/file', form);
 };
+
 export const useQueryQuestionByTitle = (title) => {
   return useSWR<Record<string, any>>(
     title ? `/answer/api/v1/question/similar?title=${title}` : '',
@@ -127,10 +128,6 @@ export const modifyUserInfo = (params: Type.ModifyUserReq) => {
   return request.put('/answer/api/v1/user/info', params);
 };
 
-export const uploadAvatar = (params: Type.AvatarUploadReq) => {
-  return request.post('/answer/api/v1/user/avatar/upload', params);
-};
-
 export const resetPassword = (params: Type.PasswordResetReq) => {
   return request.post('/answer/api/v1/user/password/reset', params);
 };
diff --git a/ui/src/stores/branding.ts b/ui/src/stores/branding.ts
new file mode 100644
index 00000000..343c2423
--- /dev/null
+++ b/ui/src/stores/branding.ts
@@ -0,0 +1,31 @@
+import create from 'zustand';
+
+import { AdmingSettingBranding } from '@/common/interface';
+import { DEFAULT_LANG } from '@/common/constants';
+
+interface InterfaceType {
+  branding: AdmingSettingBranding;
+  update: (params: AdmingSettingBranding) => void;
+}
+
+const interfaceSetting = create<InterfaceType>((set) => ({
+  branding: {
+    logo: '',
+    square_icon: '',
+    mobile_logo: '',
+    favicon: '',
+  },
+  interface: {
+    theme: '',
+    language: DEFAULT_LANG,
+    time_zone: '',
+  },
+  update: (params) =>
+    set(() => {
+      return {
+        branding: params,
+      };
+    }),
+}));
+
+export default interfaceSetting;
diff --git a/ui/src/stores/index.ts b/ui/src/stores/index.ts
index 6bc6377e..473bafbb 100644
--- a/ui/src/stores/index.ts
+++ b/ui/src/stores/index.ts
@@ -3,6 +3,7 @@ import loggedUserInfoStore from './userInfo';
 import globalStore from './global';
 import siteInfoStore from './siteInfo';
 import interfaceStore from './interface';
+import brandingStore from './branding';
 
 export {
   toastStore,
@@ -10,4 +11,5 @@ export {
   globalStore,
   siteInfoStore,
   interfaceStore,
+  brandingStore,
 };
diff --git a/ui/src/stores/interface.ts b/ui/src/stores/interface.ts
index e92e0f8a..d71a94fa 100644
--- a/ui/src/stores/interface.ts
+++ b/ui/src/stores/interface.ts
@@ -10,7 +10,6 @@ interface InterfaceType {
 
 const interfaceSetting = create<InterfaceType>((set) => ({
   interface: {
-    logo: '',
     theme: '',
     language: DEFAULT_LANG,
     time_zone: '',
diff --git a/ui/src/utils/common.ts b/ui/src/utils/common.ts
index 2f846382..a6e35682 100644
--- a/ui/src/utils/common.ts
+++ b/ui/src/utils/common.ts
@@ -1,12 +1,5 @@
 import i18next from 'i18next';
 
-function getQueryString(name: string): string {
-  const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`);
-  const r = window.location.search.substr(1).match(reg);
-  if (r != null) return unescape(r[2]);
-  return '';
-}
-
 function thousandthDivision(num) {
   const reg = /\d{1,3}(?=(\d{3})+$)/g;
   return `${num}`.replace(reg, '$&,');
@@ -101,9 +94,63 @@ function escapeRemove(str) {
     return arrEntities[t];
   });
 }
+function mixColor(color_1, color_2, weight) {
+  function d2h(d) {
+    return d.toString(16);
+  }
+  function h2d(h) {
+    return parseInt(h, 16);
+  }
+
+  weight = typeof weight !== 'undefined' ? weight : 50;
+  let color = '#';
+
+  for (let i = 0; i <= 5; i += 2) {
+    const v1 = h2d(color_1.substr(i, 2));
+    const v2 = h2d(color_2.substr(i, 2));
+    let val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
+
+    while (val.length < 2) {
+      val = `0${val}`;
+    }
+
+    color += val;
+  }
+
+  return color;
+}
+
+function colorRgb(sColor) {
+  sColor = sColor.toLowerCase();
+  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+  if (sColor && reg.test(sColor)) {
+    if (sColor.length === 4) {
+      let sColorNew = '#';
+      for (let i = 1; i < 4; i += 1) {
+        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+      }
+      sColor = sColorNew;
+    }
+    const sColorChange: number[] = [];
+    for (let i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`, 16));
+    }
+    return sColorChange.join(',');
+  }
+  return sColor;
+}
+
+function labelStyle(color, hover) {
+  const textColor = mixColor('000000', color.replace('#', ''), 40);
+  const backgroundColor = mixColor('ffffff', color.replace('#', ''), 80);
+  const rgbBackgroundColor = colorRgb(backgroundColor);
+  return {
+    color: textColor,
+    backgroundColor: `rgba(${colorRgb(rgbBackgroundColor)},${hover ? 1 : 0.5})`,
+  };
+}
 
 export {
-  getQueryString,
   thousandthDivision,
   formatCount,
   scrollTop,
@@ -111,4 +158,7 @@ export {
   parseUserInfo,
   formatUptime,
   escapeRemove,
+  mixColor,
+  colorRgb,
+  labelStyle,
 };
diff --git a/ui/src/utils/guard.ts b/ui/src/utils/guard.ts
index 4fb21496..887e5257 100644
--- a/ui/src/utils/guard.ts
+++ b/ui/src/utils/guard.ts
@@ -1,5 +1,10 @@
 import { getLoggedUserInfo, getAppSettings } from '@/services';
-import { loggedUserInfoStore, siteInfoStore, interfaceStore } from '@/stores';
+import {
+  loggedUserInfoStore,
+  siteInfoStore,
+  interfaceStore,
+  brandingStore,
+} from '@/stores';
 import { RouteAlias } from '@/router/alias';
 import Storage from '@/utils/storage';
 import { LOGGED_USER_STORAGE_KEY } from '@/common/constants';
@@ -182,9 +187,10 @@ export const tryNormalLogged = (canNavigate: boolean = false) => {
   return false;
 };
 
-export const tryLoggedAndActicevated = () => {
+export const tryLoggedAndActivated = () => {
   const gr: TGuardResult = { ok: true };
   const us = deriveLoginState();
+
   if (!us.isLogged || !us.isActivated) {
     gr.ok = false;
   }
@@ -196,6 +202,7 @@ export const initAppSettingsStore = async () => {
   if (appSettings) {
     siteInfoStore.getState().update(appSettings.general);
     interfaceStore.getState().update(appSettings.interface);
+    brandingStore.getState().update(appSettings.branding);
   }
 };
 
diff --git a/ui/src/utils/localize.ts b/ui/src/utils/localize.ts
index 5071ee9d..37b0919b 100644
--- a/ui/src/utils/localize.ts
+++ b/ui/src/utils/localize.ts
@@ -85,6 +85,7 @@ export const getCurrentLang = () => {
 
 export const setupAppLanguage = async () => {
   const lang = getCurrentLang();
+  console.log(lang);
   if (!i18next.getDataByLanguage(lang)) {
     await addI18nResource(lang);
   }
diff --git a/ui/src/utils/request.ts b/ui/src/utils/request.ts
index 7859b90d..7d880bbf 100644
--- a/ui/src/utils/request.ts
+++ b/ui/src/utils/request.ts
@@ -10,16 +10,8 @@ import { getCurrentLang } from '@/utils/localize';
 import Storage from './storage';
 import { floppyNavigation } from './floppyNavigation';
 
-const API = {
-  development: '',
-  production: '',
-  test: '',
-};
-
-const baseApiUrl = process.env.REACT_APP_API_URL || API[process.env.NODE_ENV];
-
 const baseConfig = {
-  baseUrl: baseApiUrl,
+  baseUrl: process.env.REACT_APP_API_URL || '',
   timeout: 10000,
   withCredentials: true,
 };
@@ -56,8 +48,8 @@ class Request {
         return data;
       },
       (error) => {
-        const { status, data: respData, msg: respMsg } = error.response;
-        const { data, msg = '' } = respData;
+        const { status, data: respData, msg: respMsg } = error.response || {};
+        const { data = {}, msg = '' } = respData || {};
         if (status === 400) {
           // show error message
           if (data instanceof Object && data.err_type) {
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index afe1b5b9..c6e49931 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -7,7 +7,6 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
-    "downlevelIteration": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",
@@ -24,5 +23,5 @@
       "@i18n/*": ["../i18n/*"]
     }
   },
-  "include": ["src", "node_modules/@testing-library/jest-dom" ]
+  "include": ["src", "node_modules/@testing-library/jest-dom", "scripts" ]
 }