diff --git a/cmd/tidb-dashboard/main.go b/cmd/tidb-dashboard/main.go
index c3b2eb22f6..9b575f9652 100755
--- a/cmd/tidb-dashboard/main.go
+++ b/cmd/tidb-dashboard/main.go
@@ -21,6 +21,7 @@ import (
 	_ "net/http/pprof" // #nosec
 	"os"
 	"os/signal"
+	"path"
 	"strings"
 	"sync"
 	"syscall"
@@ -31,13 +32,13 @@ import (
 	"go.uber.org/zap"
 	"go.uber.org/zap/zapcore"
 
-	_ "github.com/pingcap/tidb-dashboard/internal/resource/distrores"
 	"github.com/pingcap/tidb-dashboard/pkg/apiserver"
 	"github.com/pingcap/tidb-dashboard/pkg/config"
 	keyvisualregion "github.com/pingcap/tidb-dashboard/pkg/keyvisual/region"
 	"github.com/pingcap/tidb-dashboard/pkg/swaggerserver"
 	"github.com/pingcap/tidb-dashboard/pkg/uiserver"
 	"github.com/pingcap/tidb-dashboard/pkg/utils/version"
+	"github.com/pingcap/tidb-dashboard/util/distro"
 )
 
 type DashboardCLIConfig struct {
@@ -147,6 +148,26 @@ func buildTLSConfig(caPath, keyPath, certPath *string) *tls.Config {
 	return tlsConfig
 }
 
+const (
+	distroResFolderName      string = "distro-res"
+	distroStringsResFileName string = "strings.json"
+)
+
+func loadDistroStringsRes() {
+	exePath, err := os.Executable()
+	if err != nil {
+		log.Fatal("Failed to get executable path", zap.Error(err))
+	}
+
+	distroStringsResPath := path.Join(path.Dir(exePath), distroResFolderName, distroStringsResFileName)
+	distroStringsRes, err := distro.ReadResourceStringsFromFile(distroStringsResPath)
+	if err != nil {
+		log.Fatal("Failed to load distro strings res", zap.String("path", distroStringsResPath), zap.Error(err))
+	}
+
+	distro.ReplaceGlobal(distroStringsRes)
+}
+
 func main() {
 	// Flushing any buffered log entries
 	defer log.Sync() //nolint:errcheck
@@ -164,10 +185,12 @@ func main() {
 		log.SetLevel(zapcore.DebugLevel)
 	}
 
+	loadDistroStringsRes()
+
 	listenAddr := fmt.Sprintf("%s:%d", cliConfig.ListenHost, cliConfig.ListenPort)
 	listener, err := net.Listen("tcp", listenAddr)
 	if err != nil {
-		log.Fatal("TiDB Dashboard server listen failed", zap.String("addr", listenAddr), zap.Error(err))
+		log.Fatal("Dashboard server listen failed", zap.String("addr", listenAddr), zap.Error(err))
 	}
 
 	var customKeyVisualProvider *keyvisualregion.DataProvider
diff --git a/internal/resource/distrores/populate.go b/internal/resource/distrores/populate.go
deleted file mode 100644
index 2495d75b80..0000000000
--- a/internal/resource/distrores/populate.go
+++ /dev/null
@@ -1,11 +0,0 @@
-// Copyright 2021 PingCAP, Inc. Licensed under Apache-2.0.
-
-package distrores
-
-import (
-	"github.com/pingcap/tidb-dashboard/util/distro"
-)
-
-func init() {
-	distro.ReplaceGlobal(resource)
-}
diff --git a/internal/resource/distrores/strings.go b/internal/resource/distrores/strings.go
deleted file mode 100644
index bbc19b2e3f..0000000000
--- a/internal/resource/distrores/strings.go
+++ /dev/null
@@ -1,11 +0,0 @@
-// Copyright 2021 PingCAP, Inc. Licensed under Apache-2.0.
-
-// Note: The content of this file will be replaced by the distro resource.
-
-package distrores
-
-import (
-	"github.com/pingcap/tidb-dashboard/util/distro"
-)
-
-var resource = distro.DistributionResource{}
diff --git a/pkg/uiserver/embedded_assets_rewriter.go b/pkg/uiserver/embedded_assets_rewriter.go
index 958f4a8a18..6a11c807a3 100644
--- a/pkg/uiserver/embedded_assets_rewriter.go
+++ b/pkg/uiserver/embedded_assets_rewriter.go
@@ -7,9 +7,13 @@ package uiserver
 import (
 	"net/http"
 	"os"
+	"path"
 	"sync"
 	"time"
 
+	"go.uber.org/zap"
+
+	"github.com/pingcap/log"
 	"github.com/pingcap/tidb-dashboard/pkg/config"
 )
 
@@ -17,7 +21,13 @@ var once sync.Once
 
 func Assets(cfg *config.Config) http.FileSystem {
 	once.Do(func() {
-		RewriteAssets(assets, cfg, func(fs http.FileSystem, f http.File, path, newContent string, bs []byte) {
+		exePath, err := os.Executable()
+		if err != nil {
+			log.Fatal("Failed to get executable path", zap.Error(err))
+		}
+
+		distroResFolderPath := path.Join(path.Dir(exePath), distroResFolderName)
+		RewriteAssets(assets, cfg, distroResFolderPath, func(fs http.FileSystem, f http.File, path, newContent string, bs []byte) {
 			m := fs.(vfsgen۰FS)
 			fi := f.(os.FileInfo)
 			m[path] = &vfsgen۰CompressedFileInfo{
diff --git a/pkg/uiserver/uiserver.go b/pkg/uiserver/uiserver.go
index 484f3b03ad..8a50d52829 100644
--- a/pkg/uiserver/uiserver.go
+++ b/pkg/uiserver/uiserver.go
@@ -5,10 +5,15 @@ package uiserver
 import (
 	"bytes"
 	"compress/gzip"
+	"encoding/base64"
+	"encoding/json"
+	"errors"
 	"html"
 	"io"
 	"io/ioutil"
 	"net/http"
+	"os"
+	"path"
 	"strings"
 
 	"github.com/pingcap/log"
@@ -16,11 +21,16 @@ import (
 	"go.uber.org/zap"
 
 	"github.com/pingcap/tidb-dashboard/pkg/config"
+	"github.com/pingcap/tidb-dashboard/util/distro"
+)
+
+const (
+	distroResFolderName = "distro-res"
 )
 
 type UpdateContentFunc func(fs http.FileSystem, oldFile http.File, path, newContent string, zippedBytes []byte)
 
-func RewriteAssets(fs http.FileSystem, cfg *config.Config, updater UpdateContentFunc) {
+func RewriteAssets(fs http.FileSystem, cfg *config.Config, distroResFolderPath string, updater UpdateContentFunc) {
 	if fs == nil {
 		return
 	}
@@ -39,6 +49,9 @@ func RewriteAssets(fs http.FileSystem, cfg *config.Config, updater UpdateContent
 		tmplText := string(bs)
 		updated := strings.ReplaceAll(tmplText, "__PUBLIC_PATH_PREFIX__", html.EscapeString(cfg.PublicPathPrefix))
 
+		distroStrings, _ := json.Marshal(distro.R()) // this will never fail
+		updated = strings.ReplaceAll(updated, "__DISTRO_STRINGS_RES__", base64.StdEncoding.EncodeToString(distroStrings))
+
 		var b bytes.Buffer
 		w := gzip.NewWriter(&b)
 		if _, err := w.Write([]byte(updated)); err != nil {
@@ -53,6 +66,67 @@ func RewriteAssets(fs http.FileSystem, cfg *config.Config, updater UpdateContent
 
 	rewrite("/index.html")
 	rewrite("/diagnoseReport.html")
+
+	if err := overrideDistroAssetsRes(fs, distroResFolderPath, updater); err != nil {
+		log.Fatal("Failed to load distro assets res", zap.Error(err))
+	}
+}
+
+func overrideDistroAssetsRes(fs http.FileSystem, distroResFolderPath string, updater UpdateContentFunc) error {
+	info, err := os.Stat(distroResFolderPath)
+	if errors.Is(err, os.ErrNotExist) || !info.IsDir() {
+		// just ignore if the folder doesn't exist or it's not a folder
+		return nil
+	}
+	if err != nil {
+		return err
+	}
+
+	// traverse
+	files, err := ioutil.ReadDir(distroResFolderPath)
+	if err != nil {
+		return err
+	}
+	for _, file := range files {
+		if err := overrideSingleDistroAsset(fs, distroResFolderPath, file.Name(), updater); err != nil {
+			return err
+		}
+	}
+	return nil
+}
+
+func overrideSingleDistroAsset(fs http.FileSystem, distroResFolderPath, assetName string, updater UpdateContentFunc) error {
+	assetPath := path.Join("/", distroResFolderName, assetName)
+	targetFile, err := fs.Open(assetPath)
+	if err != nil {
+		// has no target asset to be overried, skip
+		return nil
+	}
+	defer targetFile.Close()
+
+	assetFullPath := path.Join(distroResFolderPath, assetName)
+	sourceFile, err := os.Open(assetFullPath)
+	if err != nil {
+		return err
+	}
+	defer sourceFile.Close()
+
+	data, err := ioutil.ReadAll(sourceFile)
+	if err != nil {
+		return err
+	}
+
+	var b bytes.Buffer
+	w := gzip.NewWriter(&b)
+	if _, err := w.Write(data); err != nil {
+		return err
+	}
+	if err := w.Close(); err != nil {
+		return err
+	}
+
+	updater(fs, targetFile, assetPath, string(data), b.Bytes())
+	return nil
 }
 
 func Handler(root http.FileSystem) http.Handler {
diff --git a/scripts/distro/replace_resources.sh b/scripts/distro/replace_resources.sh
deleted file mode 100755
index 6e499232b6..0000000000
--- a/scripts/distro/replace_resources.sh
+++ /dev/null
@@ -1,28 +0,0 @@
-#!/usr/bin/env bash
-
-# This script replaces the resources in the project with specific distribution resources.
-#
-# Required params:
-# DISTRIBUTION_DIR
-#   Specify the resource directory to be used for replacement.
-
-set -euo pipefail
-
-DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
-PROJECT_DIR=$(cd "$DIR/../.."; pwd)
-
-echo "+ Preflight check"
-if [ -z "${DISTRIBUTION_DIR}" ] || [ ! -d "${DISTRIBUTION_DIR}" ]; then
-  echo "  - Error: DISTRIBUTION_DIR must be specified"
-  exit 1
-fi
-
-echo "+ Replace distribution resources"
-
-cp -f "${DISTRIBUTION_DIR}/strings.go" "${PROJECT_DIR}/internal/resource/distrores/strings.go"
-\cp -f "${DISTRIBUTION_DIR}/logo.svg" "${PROJECT_DIR}/ui/dashboardApp/layout/signin/logo.svg" || true
-\cp -f "${DISTRIBUTION_DIR}/landing.svg" "${PROJECT_DIR}/ui/dashboardApp/layout/signin/landing.svg" || true
-\cp -f "${DISTRIBUTION_DIR}/logo-icon-light.svg" "${PROJECT_DIR}/ui/dashboardApp/layout/main/Sider/logo-icon-light.svg" || true
-\cp -f "${DISTRIBUTION_DIR}/favicon.ico" "${PROJECT_DIR}/ui/public/favicon.ico" || true
-
-echo "  - Success!"
diff --git a/scripts/distro/write_strings.go b/scripts/distro/write_strings.go
index f898ec32a8..60302f65ea 100644
--- a/scripts/distro/write_strings.go
+++ b/scripts/distro/write_strings.go
@@ -10,7 +10,6 @@ import (
 	"github.com/pingcap/log"
 	"go.uber.org/zap"
 
-	_ "github.com/pingcap/tidb-dashboard/internal/resource/distrores"
 	"github.com/pingcap/tidb-dashboard/util/distro"
 )
 
diff --git a/scripts/distro/write_strings.sh b/scripts/distro/write_strings.sh
index b05aaa9106..9848b9f793 100755
--- a/scripts/distro/write_strings.sh
+++ b/scripts/distro/write_strings.sh
@@ -1,25 +1,17 @@
 #!/usr/bin/env bash
 
-# This script writes distribution strings in json which is required for the frontend.
+# This script outputs distribution strings to json which is required for the frontend.
 
 set -euo pipefail
 
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
 PROJECT_DIR=$(cd "$DIR/../.."; pwd)
-BUILD_TAG=""
 
-if [[ -f "${PROJECT_DIR}/internal/resource/distrores/strings.go" ]]; then
-  echo "+ Existing distribution resource is detected, using it to write strings"
-  BUILD_TAG=distro
-fi
-
-echo "+ Write resource strings"
+echo "+ Write distro strings"
 cd "$PROJECT_DIR"
-# FIXME: distro/write_strings needs to access the /internal package, which is not allowed to be invoked in another module
-# Currently we workaround this by invoking in the TiDB Dashboard module.
-go run -tags="${BUILD_TAG}" scripts/distro/write_strings.go -o="${PROJECT_DIR}/ui/lib/distribution.json"
+go run scripts/distro/write_strings.go -o="${PROJECT_DIR}/ui/lib/distro_strings.json"
 
-echo "  - Success! Resource strings:"
-cat "${PROJECT_DIR}/ui/lib/distribution.json"
+echo "  - Success! Distro strings:"
+cat "${PROJECT_DIR}/ui/lib/distro_strings.json"
 
 echo
diff --git a/ui/config-overrides.js b/ui/config-overrides.js
index 3bfb2a176b..ab0d7f675b 100755
--- a/ui/config-overrides.js
+++ b/ui/config-overrides.js
@@ -1,5 +1,5 @@
 const path = require('path')
-const fs = require('fs')
+const fs = require('fs-extra')
 const os = require('os')
 const {
   override,
@@ -17,16 +17,37 @@ const WebpackBar = require('webpackbar')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const rewireHtmlWebpackPlugin = require('react-app-rewire-html-webpack-plugin')
 
+function copyDistroRes() {
+  const distroResPath = '../bin/distro-res'
+  if (fs.existsSync(distroResPath)) {
+    fs.copySync(distroResPath, './public/distro-res')
+  }
+}
+
 function injectDistroToHTML(config, env) {
-  const distroInfo = Object.entries(require('./lib/distribution.json')).reduce(
-    (prev, [k, v]) => {
-      return {
-        ...prev,
-        [`distro_${k}`]: v,
-      }
+  let distroStringsResMeta = '__DISTRO_STRINGS_RES__'
+
+  // For dev mode,
+  // we copy distro assets from bin/distro-res to public/distro-res to override the default assets,
+  // read distro strings res from public/distro-res/strings.json and encode it by base64 if it exists.
+  // For production mode, we keep the "__DISTRO_STRINGS_RES__" value, it will be replaced by the backend RewriteAssets() method in the run time.
+  if (isBuildAsDevServer()) {
+    copyDistroRes()
+
+    const distroStringsResFilePath = './public/distro-res/strings.json'
+    if (fs.existsSync(distroStringsResFilePath)) {
+      const distroStringsRes = require(distroStringsResFilePath)
+      distroStringsResMeta = btoa(JSON.stringify(distroStringsRes))
+    }
+  }
+
+  // Store the distro strings res in the html head meta,
+  // HtmlWebpacPlugin will write this meta into the html head.
+  const distroInfo = {
+    meta: {
+      'x-distro-strings-res': distroStringsResMeta,
     },
-    {}
-  )
+  }
   return rewireHtmlWebpackPlugin(config, env, distroInfo)
 }
 
@@ -183,10 +204,10 @@ module.exports = override(
     )
   ),
   disableMinimizeByEnv(),
-  addExtraEntries(),
   supportDynamicPublicPathPrefix(),
   overrideProcessEnv({
     REACT_APP_RELEASE_VERSION: JSON.stringify(getInternalVersion()),
   }),
-  injectDistroToHTML
+  injectDistroToHTML,
+  addExtraEntries()
 )
diff --git a/ui/dashboardApp/index.ts b/ui/dashboardApp/index.ts
index a183e0f41e..9eedc5c2b3 100755
--- a/ui/dashboardApp/index.ts
+++ b/ui/dashboardApp/index.ts
@@ -10,6 +10,7 @@ import AppRegistry from '@lib/utils/registry'
 import * as routing from '@lib/utils/routing'
 import * as auth from '@lib/utils/auth'
 import * as i18n from '@lib/utils/i18n'
+import { distro } from '@lib/utils/i18n'
 import { saveAppOptions, loadAppOptions } from '@lib/utils/appOptions'
 import {
   initSentryRoutingInstrument,
@@ -148,6 +149,8 @@ async function webPageStart() {
 }
 
 async function main() {
+  document.title = `${distro.tidb} Dashboard`
+
   if (routing.isPortalPage()) {
     // the portal page is only used to receive options
     function handlePortalEvent(event) {
diff --git a/ui/dashboardApp/layout/main/Sider/Banner.tsx b/ui/dashboardApp/layout/main/Sider/Banner.tsx
index 37edf1b06b..f20a66d7d0 100644
--- a/ui/dashboardApp/layout/main/Sider/Banner.tsx
+++ b/ui/dashboardApp/layout/main/Sider/Banner.tsx
@@ -3,13 +3,14 @@ import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
 import { useSize } from 'ahooks'
 import Flexbox from '@g07cha/flexbox-react'
 import { useSpring, animated } from 'react-spring'
-import { InfoInfoResponse } from '@lib/client'
 import { useTranslation } from 'react-i18next'
 import { TFunction } from 'i18next'
 
-import { ReactComponent as Logo } from './logo-icon-light.svg'
-import styles from './Banner.module.less'
+import { InfoInfoResponse } from '@lib/client'
 import { store } from '@lib/utils/store'
+import publicPathPrefix from '@lib/utils/publicPathPrefix'
+
+import styles from './Banner.module.less'
 
 const toggleWidth = 40
 const toggleHeight = 50
@@ -81,7 +82,10 @@ export default function ToggleBanner({
         >
           <Flexbox flexDirection="row">
             <div className={styles.bannerLogo}>
-              <Logo height={30} />
+              <img
+                src={`${publicPathPrefix}/distro-res/logo-icon-light.svg`}
+                style={{ height: 30 }}
+              />
             </div>
             <div className={styles.bannerContent}>
               <div className={styles.bannerTitle}>
diff --git a/ui/dashboardApp/layout/signin/index.module.less b/ui/dashboardApp/layout/signin/index.module.less
index a58bd5b744..1993d71400 100644
--- a/ui/dashboardApp/layout/signin/index.module.less
+++ b/ui/dashboardApp/layout/signin/index.module.less
@@ -37,11 +37,15 @@
   margin: auto;
 }
 
+.landingContainer {
+  flex-grow: 1;
+}
+
 .landing {
   flex-grow: 1;
-  background-image: url(./landing.svg);
   background-size: cover;
   background-position: center left;
+  height: 100%;
 }
 
 .logo {
diff --git a/ui/dashboardApp/layout/signin/index.tsx b/ui/dashboardApp/layout/signin/index.tsx
index e9bf6f84cc..29fa1766a5 100755
--- a/ui/dashboardApp/layout/signin/index.tsx
+++ b/ui/dashboardApp/layout/signin/index.tsx
@@ -29,11 +29,11 @@ import { getAuthURL } from '@lib/utils/authSSO'
 import { AuthTypes } from '@lib/utils/auth'
 import { isDistro } from '@lib/utils/i18n'
 import * as auth from '@lib/utils/auth'
+import { useIsFeatureSupport } from '@lib/utils/store'
+import publicPathPrefix from '@lib/utils/publicPathPrefix'
 import { Root, AppearAnimate, LanguageDropdown } from '@lib/components'
 
 import styles from './index.module.less'
-import { ReactComponent as Logo } from './logo.svg'
-import { useIsFeatureSupport } from '@lib/utils/store'
 
 enum DisplayFormType {
   uninitialized,
@@ -256,7 +256,10 @@ function TiDBSignInForm({ successRoute, onClickAlternative }) {
           initialValues={{ username: lastLoginUsername }}
           form={refForm}
         >
-          <Logo className={styles.logo} />
+          <img
+            src={`${publicPathPrefix}/distro-res/logo.svg`}
+            className={styles.logo}
+          />
           <Form.Item>
             <h2>{t('signin.form.tidb_auth.title')}</h2>
           </Form.Item>
@@ -340,7 +343,10 @@ function CodeSignInForm({ successRoute, onClickAlternative }) {
     <div className={styles.dialogContainer}>
       <div className={styles.dialog}>
         <Form onFinish={handleSubmit} layout="vertical" form={refForm}>
-          <Logo className={styles.logo} />
+          <img
+            src={`${publicPathPrefix}/distro-res/logo.svg`}
+            className={styles.logo}
+          />
           <Form.Item>
             <h2>{t('signin.form.code_auth.title')}</h2>
           </Form.Item>
@@ -400,7 +406,10 @@ function SSOSignInForm({ successRoute, onClickAlternative }) {
     <div className={styles.dialogContainer}>
       <div className={styles.dialog}>
         <Form>
-          <Logo className={styles.logo} />
+          <img
+            src={`${publicPathPrefix}/distro-res/logo.svg`}
+            className={styles.logo}
+          />
           <Form.Item>
             <Button
               type="primary"
@@ -508,9 +517,16 @@ function App({ registry }) {
           )}
         </AppearAnimate>
         <AppearAnimate
-          className={styles.landing}
           motionName="landingAnimation"
-        />
+          className={styles.landingContainer}
+        >
+          <div
+            style={{
+              backgroundImage: `url(${publicPathPrefix}/distro-res/landing.svg)`,
+            }}
+            className={styles.landing}
+          />
+        </AppearAnimate>
       </div>
     </Root>
   )
diff --git a/ui/diagnoseReportApp/components/DiagnosisTable.tsx b/ui/diagnoseReportApp/components/DiagnosisTable.tsx
index 4b4060b710..2669ef266e 100644
--- a/ui/diagnoseReportApp/components/DiagnosisTable.tsx
+++ b/ui/diagnoseReportApp/components/DiagnosisTable.tsx
@@ -1,24 +1,60 @@
 import React, { useContext, useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { TableDef, ExpandContext, TableRowDef } from '../types'
 import ReactMarkdown from 'react-markdown'
+import { distro } from '@lib/utils/i18n'
+import { TableDef, ExpandContext, TableRowDef } from '../types'
+
+const lowerDistro = Object.keys(distro).reduce((accu, cur) => {
+  if (typeof distro[cur] === 'string') {
+    accu[cur] = distro[cur].toLowerCase()
+  }
+  return accu
+}, {})
+
+const distroRegs = Object.keys(lowerDistro).reduce((accu, cur) => {
+  accu[cur] = new RegExp(cur, 'ig')
+  return accu
+}, {})
+
+function replaceDistro(oriStr: string): string {
+  let retStr = oriStr
+  Object.keys(lowerDistro).forEach((key) => {
+    retStr = retStr.replace(distroRegs[key], lowerDistro[key])
+  })
+  return retStr
+}
 
 function DiagnosisRow({ row }: { row: TableRowDef }) {
   const outsideExpand = useContext(ExpandContext)
   const [internalExpand, setInternalExpand] = useState(false)
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
 
   // when outsideExpand changes, reset the internalExpand to the same as outsideExpand
   useEffect(() => {
     setInternalExpand(outsideExpand)
   }, [outsideExpand])
 
+  function showRowName(rowName: string) {
+    const i18nKey = `diagnosis.tables.table.name.${rowName}`
+    if (i18n.exists(i18nKey)) {
+      return t(i18nKey)
+    }
+    return replaceDistro(rowName)
+  }
+
+  function showOthers(val: string | number) {
+    if (typeof val === 'string') {
+      return replaceDistro(val)
+    }
+    return val
+  }
+
   return (
     <>
       <tr>
         {(row.values || []).map((val, valIdx) => (
           <td key={valIdx}>
-            {t(`diagnosis.tables.table.name.${val}`, val)}
+            {valIdx === 0 ? showRowName(val) : showOthers(val)}
             {valIdx === 0 &&
               t(`diagnosis.tables.table.comment.${val}`, '') !== '' && (
                 <div className="dropdown is-hoverable is-up">
@@ -58,7 +94,7 @@ function DiagnosisRow({ row }: { row: TableRowDef }) {
           {subVals.map((subVal, subValIdx) => (
             <td key={subValIdx}>
               {subValIdx === 0 && '|-- '}
-              {subVal}
+              {showOthers(subVal)}
             </td>
           ))}
         </tr>
diff --git a/ui/diagnoseReportApp/index.tsx b/ui/diagnoseReportApp/index.tsx
index 2e9a2b871f..3433a1866f 100644
--- a/ui/diagnoseReportApp/index.tsx
+++ b/ui/diagnoseReportApp/index.tsx
@@ -5,13 +5,15 @@ import 'bulma/css/bulma.css'
 import '@fortawesome/fontawesome-free/js/all.js'
 
 import * as i18n from '@lib/utils/i18n'
+import { distro } from '@lib/utils/i18n'
+
 import DiagnosisReport from './components/DiagnosisReport'
 import translations from './translations'
+
 import './index.css'
 
 function refineDiagnosisData() {
   const diagnosisData = window.__diagnosis_data__ || []
-  console.log(window.__diagnosis_data__)
 
   let preCategory = ''
   diagnosisData.forEach((d) => {
@@ -25,6 +27,7 @@ function refineDiagnosisData() {
 }
 
 i18n.addTranslations(translations)
+document.title = `${distro.tidb} Dashboard Diagnosis Report`
 
 ReactDOM.render(
   <DiagnosisReport diagnosisTables={refineDiagnosisData()} />,
diff --git a/ui/gulpfile.esm.js b/ui/gulpfile.esm.js
index 1af7d036c3..5803352fe8 100644
--- a/ui/gulpfile.esm.js
+++ b/ui/gulpfile.esm.js
@@ -23,26 +23,9 @@ task('swagger:watch', () =>
 
 task('distro:generate', shell.task('../scripts/distro/write_strings.sh'))
 
-task('distro:watch', () =>
-  watch(
-    ['../internal/resource/distrores/strings.go'],
-    series('distro:generate')
-  )
-)
-
-task(
-  'webpack:dev',
-  shell.task(
-    'REACT_APP_COMMIT_HASH=$(git rev-parse --short HEAD) yarn react-app-rewired start'
-  )
-)
+task('webpack:dev', shell.task('yarn react-app-rewired start'))
 
-task(
-  'webpack:build',
-  shell.task(
-    'REACT_APP_COMMIT_HASH=$(git rev-parse --short HEAD) yarn react-app-rewired build'
-  )
-)
+task('webpack:build', shell.task('yarn react-app-rewired build'))
 
 task(
   'speedscope:copy_static_assets',
@@ -78,7 +61,7 @@ task(
       'distro:generate',
       'speedscope:copy_static_assets'
     ),
-    parallel('swagger:watch', 'distro:watch', 'speedscope:watch', 'webpack:dev')
+    parallel('swagger:watch', 'speedscope:watch', 'webpack:dev')
   )
 )
 
diff --git a/ui/lib/.gitignore b/ui/lib/.gitignore
deleted file mode 100644
index 2c725bf464..0000000000
--- a/ui/lib/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-/distribution.json
diff --git a/ui/lib/distro_strings.json b/ui/lib/distro_strings.json
new file mode 100644
index 0000000000..722c282408
--- /dev/null
+++ b/ui/lib/distro_strings.json
@@ -0,0 +1 @@
+{ "tidb": "TiDB", "tikv": "TiKV", "pd": "PD", "tiflash": "TiFlash" }
diff --git a/ui/lib/utils/distroStringsRes.ts b/ui/lib/utils/distroStringsRes.ts
new file mode 100644
index 0000000000..72439b5c8a
--- /dev/null
+++ b/ui/lib/utils/distroStringsRes.ts
@@ -0,0 +1,24 @@
+import defaultDistroStringsRes from '@lib/distro_strings.json'
+
+let distro = defaultDistroStringsRes
+
+// it is a base64 encoded string
+let distroStringsRes = document
+  .querySelector('meta[name="x-distro-strings-res"]')
+  ?.getAttribute('content')
+
+if (distroStringsRes && distroStringsRes !== '__DISTRO_STRINGS_RES__') {
+  try {
+    const distroObj = JSON.parse(atob(distroStringsRes))
+    distro = {
+      ...defaultDistroStringsRes,
+      ...distroObj,
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const isDistro = Boolean(distro['is_distro'])
+
+export { distro, isDistro }
diff --git a/ui/lib/utils/i18n.ts b/ui/lib/utils/i18n.ts
index 40db3c85e7..d339e5215e 100755
--- a/ui/lib/utils/i18n.ts
+++ b/ui/lib/utils/i18n.ts
@@ -5,7 +5,7 @@ import i18next from 'i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
 import { initReactI18next } from 'react-i18next'
 
-import distro from '@lib/distribution.json'
+import { distro, isDistro } from './distroStringsRes'
 
 i18next.on('languageChanged', function (lng) {
   dayjs.locale(lng.toLowerCase())
@@ -45,6 +45,4 @@ i18next
     },
   })
 
-const isDistro = Boolean(distro['is_distro'])
-
 export { distro, isDistro }
diff --git a/ui/package.json b/ui/package.json
index a5b568315b..c220d08780 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -98,6 +98,7 @@
     "browserslist-useragent-regexp": "^2.1.0",
     "customize-cra": "^1.0.0",
     "esm": "^3.2.25",
+    "fs-extra": "^10.0.0",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "gulp-shell": "^0.8.0",
diff --git a/ui/public/diagnoseReport.html b/ui/public/diagnoseReport.html
index 07ef29efed..5bae3114b5 100644
--- a/ui/public/diagnoseReport.html
+++ b/ui/public/diagnoseReport.html
@@ -2,15 +2,8 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/distro-res/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      name="description"
-      content="<%= htmlWebpackPlugin.options.distro_tidb %> Dashboard Diagnosis Report"
-    />
-    <title>
-      <%= htmlWebpackPlugin.options.distro_tidb %> Dashboard Diagnosis Report
-    </title>
     <script src="./data.js"></script>
   </head>
   <body>
diff --git a/ui/public/favicon.ico b/ui/public/distro-res/favicon.ico
similarity index 100%
rename from ui/public/favicon.ico
rename to ui/public/distro-res/favicon.ico
diff --git a/ui/dashboardApp/layout/signin/landing.svg b/ui/public/distro-res/landing.svg
similarity index 100%
rename from ui/dashboardApp/layout/signin/landing.svg
rename to ui/public/distro-res/landing.svg
diff --git a/ui/dashboardApp/layout/main/Sider/logo-icon-light.svg b/ui/public/distro-res/logo-icon-light.svg
similarity index 100%
rename from ui/dashboardApp/layout/main/Sider/logo-icon-light.svg
rename to ui/public/distro-res/logo-icon-light.svg
diff --git a/ui/dashboardApp/layout/signin/logo.svg b/ui/public/distro-res/logo.svg
similarity index 100%
rename from ui/dashboardApp/layout/signin/logo.svg
rename to ui/public/distro-res/logo.svg
diff --git a/ui/public/index.html b/ui/public/index.html
index dc0ee2e8d9..a3df451dd0 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -3,12 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta name="x-public-path-prefix" content="__PUBLIC_PATH_PREFIX__" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/distro-res/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      name="description"
-      content="<%= htmlWebpackPlugin.options.distro_tidb %> Dashboard"
-    />
     <style>
       body {
         margin: 0;
@@ -90,7 +86,6 @@
         }
       }
     </style>
-    <title><%= htmlWebpackPlugin.options.distro_tidb %> Dashboard</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/ui/yarn.lock b/ui/yarn.lock
index a3b002dd81..7a769dd647 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -8216,6 +8216,15 @@ fs-extra@^0.30.0:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
+fs-extra@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1"
+  integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs-extra@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
diff --git a/util/distro/distro.go b/util/distro/distro.go
index 2d18dc6b34..5f9bbf44da 100644
--- a/util/distro/distro.go
+++ b/util/distro/distro.go
@@ -7,6 +7,10 @@ package distro
 
 import (
 	"encoding/json"
+	"errors"
+	"io/ioutil"
+	"os"
+	"path/filepath"
 	"sync"
 
 	"go.uber.org/atomic"
@@ -62,3 +66,33 @@ func R() *DistributionResource {
 	}
 	return r.(*DistributionResource)
 }
+
+func ReadResourceStringsFromFile(filePath string) (DistributionResource, error) {
+	distroStringsRes := DistributionResource{}
+
+	info, err := os.Stat(filePath)
+	if errors.Is(err, os.ErrNotExist) || info.IsDir() {
+		// ignore if file not exist or it is a folder
+		return distroStringsRes, nil
+	}
+	if err != nil {
+		// may be permission-like errors
+		return distroStringsRes, err
+	}
+
+	distroStringsFile, err := os.Open(filepath.Clean(filePath))
+	if err != nil {
+		return distroStringsRes, err
+	}
+	defer func() {
+		_ = distroStringsFile.Close()
+	}()
+
+	data, err := ioutil.ReadAll(distroStringsFile)
+	if err != nil {
+		return distroStringsRes, err
+	}
+
+	err = json.Unmarshal(data, &distroStringsRes)
+	return distroStringsRes, err
+}