diff --git a/.github/workflows/deploy_web.yaml b/.github/workflows/deploy_web.yaml
index 02a05ba35..f74f49daa 100644
--- a/.github/workflows/deploy_web.yaml
+++ b/.github/workflows/deploy_web.yaml
@@ -22,30 +22,16 @@ jobs:
         with:
           node-version-file: .nvmrc
 
-      - name: use pnpm
+      - name: Use pnpm
         uses: pnpm/action-setup@v2
         with:
           version: 8
 
-      - name: Cache pnpm modules
-        uses: actions/cache@v3
-        with:
-          path: ~/.pnpm-store
-          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-
-
-      - name: Set env
-        run: |
-          cd apps/web
-          echo "VUE_APP_PAGE_TITLE=Easy-to-Use Online MQTT Client | Try Now" > .env.local
-          echo "VUE_APP_PAGE_DESCRIPTION=Online MQTT 5.0 client on the web, using MQTT over WebSocket to connect to the MQTT Broker and test message publishing and receiving in the browser." >> .env.local
-
       - name: Install dependencies
         run: |
           pnpm install
 
-      - name: build
+      - name: Build
         run: |
           pnpm run build:web
 
diff --git a/apps/desktop/src/renderer/components.d.ts b/apps/desktop/src/renderer/components.d.ts
index c31097493..160f4b0c9 100644
--- a/apps/desktop/src/renderer/components.d.ts
+++ b/apps/desktop/src/renderer/components.d.ts
@@ -7,6 +7,9 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AboutFooter: typeof import('./../../../../packages/ui/src/components/about/Footer.vue')['default']
+    AboutInfo: typeof import('./../../../../packages/ui/src/components/about/Info.vue')['default']
+    AboutView: typeof import('./../../../../packages/ui/src/components/about/View.vue')['default']
     CommonEmptyView: typeof import('./../../../../packages/ui/src/components/common/EmptyView.vue')['default']
     CommonLeftMenu: typeof import('./../../../../packages/ui/src/components/common/LeftMenu.vue')['default']
     CommonMainView: typeof import('./../../../../packages/ui/src/components/common/MainView.vue')['default']
@@ -24,12 +27,14 @@ declare module 'vue' {
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconDownload: typeof import('@element-plus/icons-vue')['Download']
     ElIconPrinter: typeof import('@element-plus/icons-vue')['Printer']
+    ElIconRight: typeof import('@element-plus/icons-vue')['Right']
     ElIconUpload: typeof import('@element-plus/icons-vue')['Upload']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
diff --git a/apps/desktop/src/renderer/src/pages/about.vue b/apps/desktop/src/renderer/src/pages/about.vue
new file mode 100644
index 000000000..b25db2d70
--- /dev/null
+++ b/apps/desktop/src/renderer/src/pages/about.vue
@@ -0,0 +1,3 @@
+<template>
+  <AboutView />
+</template>
diff --git a/apps/desktop/typed-router.d.ts b/apps/desktop/typed-router.d.ts
index 07087aabb..dd95cc4a7 100644
--- a/apps/desktop/typed-router.d.ts
+++ b/apps/desktop/typed-router.d.ts
@@ -18,6 +18,7 @@ declare module 'vue-router/auto-routes' {
    * Route name map generated by unplugin-vue-router
    */
   export interface RouteNamedMap {
+    '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
     '/connections/': RouteRecordInfo<'/connections/', '/connections', Record<never, never>, Record<never, never>>,
     '/connections/[id]': RouteRecordInfo<'/connections/[id]', '/connections/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/help': RouteRecordInfo<'/help', '/help', Record<never, never>, Record<never, never>>,
diff --git a/apps/web/components.d.ts b/apps/web/components.d.ts
index ead027120..c5f4e2c0c 100644
--- a/apps/web/components.d.ts
+++ b/apps/web/components.d.ts
@@ -7,6 +7,9 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AboutFooter: typeof import('./../../packages/ui/src/components/about/Footer.vue')['default']
+    AboutInfo: typeof import('./../../packages/ui/src/components/about/Info.vue')['default']
+    AboutView: typeof import('./../../packages/ui/src/components/about/View.vue')['default']
     CommonEmptyView: typeof import('./../../packages/ui/src/components/common/EmptyView.vue')['default']
     CommonLeftMenu: typeof import('./../../packages/ui/src/components/common/LeftMenu.vue')['default']
     CommonMainView: typeof import('./../../packages/ui/src/components/common/MainView.vue')['default']
@@ -24,12 +27,14 @@ declare module 'vue' {
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconDownload: typeof import('@element-plus/icons-vue')['Download']
     ElIconPrinter: typeof import('@element-plus/icons-vue')['Printer']
+    ElIconRight: typeof import('@element-plus/icons-vue')['Right']
     ElIconUpload: typeof import('@element-plus/icons-vue')['Upload']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
diff --git a/apps/web/src/pages/about.vue b/apps/web/src/pages/about.vue
new file mode 100644
index 000000000..b25db2d70
--- /dev/null
+++ b/apps/web/src/pages/about.vue
@@ -0,0 +1,3 @@
+<template>
+  <AboutView />
+</template>
diff --git a/apps/web/typed-router.d.ts b/apps/web/typed-router.d.ts
index 07087aabb..dd95cc4a7 100644
--- a/apps/web/typed-router.d.ts
+++ b/apps/web/typed-router.d.ts
@@ -18,6 +18,7 @@ declare module 'vue-router/auto-routes' {
    * Route name map generated by unplugin-vue-router
    */
   export interface RouteNamedMap {
+    '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
     '/connections/': RouteRecordInfo<'/connections/', '/connections', Record<never, never>, Record<never, never>>,
     '/connections/[id]': RouteRecordInfo<'/connections/[id]', '/connections/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/help': RouteRecordInfo<'/help', '/help', Record<never, never>, Record<never, never>>,
diff --git a/packages/tailwind-config/base.config.ts b/packages/tailwind-config/base.config.ts
index b6fa33530..18f74482e 100644
--- a/packages/tailwind-config/base.config.ts
+++ b/packages/tailwind-config/base.config.ts
@@ -10,6 +10,7 @@ const config: Config = {
     extend: {
       backgroundImage: () => ({
         'gradient-card': 'var(--color-bg-card-gradient)',
+        'gradient-btn': 'var(--color-bg-btn-gradient)',
       }),
     },
   },
diff --git a/packages/ui/components.d.ts b/packages/ui/components.d.ts
index 0f88d63cd..9d3f59138 100644
--- a/packages/ui/components.d.ts
+++ b/packages/ui/components.d.ts
@@ -7,6 +7,9 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AboutFooter: typeof import('./src/components/about/Footer.vue')['default']
+    AboutInfo: typeof import('./src/components/about/Info.vue')['default']
+    AboutView: typeof import('./src/components/about/View.vue')['default']
     CommonEmptyView: typeof import('./src/components/common/EmptyView.vue')['default']
     CommonLeftMenu: typeof import('./src/components/common/LeftMenu.vue')['default']
     CommonMainView: typeof import('./src/components/common/MainView.vue')['default']
@@ -22,12 +25,14 @@ declare module 'vue' {
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconDownload: typeof import('@element-plus/icons-vue')['Download']
     ElIconPrinter: typeof import('@element-plus/icons-vue')['Printer']
+    ElIconRight: typeof import('@element-plus/icons-vue')['Right']
     ElIconUpload: typeof import('@element-plus/icons-vue')['Upload']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
diff --git a/packages/ui/src/assets/images/about/emq-logo-dark.png b/packages/ui/src/assets/images/about/emq-logo-dark.png
new file mode 100644
index 000000000..b22f6ca2c
Binary files /dev/null and b/packages/ui/src/assets/images/about/emq-logo-dark.png differ
diff --git a/packages/ui/src/assets/images/about/emq-logo-light.png b/packages/ui/src/assets/images/about/emq-logo-light.png
new file mode 100644
index 000000000..cd2b7a381
Binary files /dev/null and b/packages/ui/src/assets/images/about/emq-logo-light.png differ
diff --git a/packages/ui/src/assets/images/about/mqttx-dark.png b/packages/ui/src/assets/images/about/mqttx-dark.png
new file mode 100644
index 000000000..13abc8c1d
Binary files /dev/null and b/packages/ui/src/assets/images/about/mqttx-dark.png differ
diff --git a/packages/ui/src/assets/images/about/mqttx-light.png b/packages/ui/src/assets/images/about/mqttx-light.png
new file mode 100644
index 000000000..222377d52
Binary files /dev/null and b/packages/ui/src/assets/images/about/mqttx-light.png differ
diff --git a/packages/ui/src/assets/images/about/wx_qr_code.png b/packages/ui/src/assets/images/about/wx_qr_code.png
new file mode 100644
index 000000000..5a31a4eac
Binary files /dev/null and b/packages/ui/src/assets/images/about/wx_qr_code.png differ
diff --git a/packages/ui/src/components/about/Footer.vue b/packages/ui/src/components/about/Footer.vue
new file mode 100644
index 000000000..d44a89da0
--- /dev/null
+++ b/packages/ui/src/components/about/Footer.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import IconDiscord from '~icons/custom/discord'
+import IconSlack from '~icons/custom/slack'
+import IconWeChat from '~icons/custom/wechat'
+import IconX from '~icons/custom/x'
+import logoDark from '../../assets/images/about/emq-logo-dark.png'
+import logoLight from '../../assets/images/about/emq-logo-light.png'
+import WeChatQRCode from '../../assets/images/about/wx_qr_code.png'
+import { useSettingsStore } from '../../stores'
+
+const { settings } = useSettingsStore()
+const logo = computed(() => settings!.currentTheme === 'light' ? logoDark : logoLight)
+
+const fullYear = new Date().getFullYear()
+const { about } = useLinks()
+
+const socialLinks = [
+  {
+    icon: IconX,
+    name: 'X',
+    link: 'https://twitter.com/EMQTech',
+  },
+  {
+    icon: IconDiscord,
+    name: 'Discord',
+    link: 'https://discord.gg/xYGf3fQnES',
+  },
+  {
+    icon: IconSlack,
+    name: 'Slack',
+    link: 'https://slack-invite.emqx.io/',
+  },
+]
+</script>
+
+<template>
+  <div class="py-6 border-t border-t-border-default flex gap-6 items-center justify-between">
+    <div class="flex items-center gap-2">
+      <img :src="logo" alt="EMQ" width="40" height="12">
+      <span class="text-default text-sm">
+        &copy;{{ fullYear }}
+        <a class="text-main-green" :href="about.EMQ" target="_blank" rel="noopener">
+          EMQ
+        </a>
+        Technologies Inc.
+      </span>
+    </div>
+    <div class="flex gap-3">
+      <a
+        v-for="{ icon, name, link } in socialLinks"
+        :key="name"
+        :href="link"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <component :is="icon" class="w-5 h-5 text-light" />
+      </a>
+      <ElPopover
+        v-if="settings?.currentLang === 'zh'"
+        placement="top"
+        width="30"
+        trigger="click"
+      >
+        <img :src="WeChatQRCode" alt="WeChat QR Code" width="126" height="126">
+        <template #reference>
+          <div
+            role="button"
+            tabindex="0"
+          >
+            <component :is="IconWeChat" class="w-5 h-5 text-light" />
+          </div>
+        </template>
+      </ElPopover>
+    </div>
+  </div>
+</template>
diff --git a/packages/ui/src/components/about/Info.vue b/packages/ui/src/components/about/Info.vue
new file mode 100644
index 000000000..415a0736c
--- /dev/null
+++ b/packages/ui/src/components/about/Info.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+// TODO: Implement update function, and display data collection policy.
+import type { PlatformType } from 'mqttx'
+import IconFaq from '~icons/custom/faq'
+import IconGithub from '~icons/custom/github'
+import IconWebsite from '~icons/custom/website'
+
+const { about } = useLinks()
+
+const platformType = inject<PlatformType>('platformType', 'web')
+
+const { t } = useI18n()
+const btns = computed(() => [
+  {
+    icon: IconGithub,
+    text: 'GitHub',
+    link: 'https://github.com/emqx/MQTTX',
+  },
+  {
+    icon: IconWebsite,
+    text: t('about.web'),
+    link: 'https://mqttx.app',
+  },
+  {
+    icon: IconFaq,
+    text: 'FAQ',
+    link: 'https://mqttx.app/faq',
+  },
+])
+</script>
+
+<template>
+  <div class="mb-16">
+    <div :class="$style.section">
+      <div
+        v-if="platformType === 'desktop'"
+        role="button"
+        tabindex="0"
+      >
+        {{ $t('about.update') }}
+      </div>
+      <a :href="about.releases" target="_blank" rel="noopener">
+        {{ $t('about.releases') }}
+      </a>
+      <a href="https://github.com/emqx/MQTTX/issues" target="_blank" rel="noopener">
+        {{ $t('about.support') }}
+      </a>
+      <div
+        v-if="platformType === 'web'"
+        role="button"
+        tabindex="0"
+      >
+        {{ $t('about.dataCollectionPolicy') }}
+      </div>
+    </div>
+    <p class="mb-6 max-w-xl text-sm text-default">
+      {{ platformType === 'desktop' ? $t('about.mqttxDesc') : $t('about.mqttxWebDesc') }}
+    </p>
+    <div class="mb-16 inline-grid grid-cols-3 gap-6">
+      <a
+        v-for="{ icon, text, link } in btns"
+        :key="link"
+        class="inline-flex gap-1.5 items-center justify-center min-w-40 rounded-lg px-6 py-3 bg-card-normal text-main-green text-sm font-medium"
+        :href="link"
+        target="_blank"
+        rel="noopener"
+      >
+        <component :is="icon" class="text-xl text-card-icon" />
+        {{ text }}
+        <ElIconRight width="16" height="16" />
+      </a>
+    </div>
+    <div :class="$style.cloud">
+      <h2 class="mb-4 text-title text-lg font-semibold">
+        {{ $t('about.cloudTitle') }}
+      </h2>
+      <p class="mb-4 text-default text-sm">
+        {{ $t('about.cloudSummary') }}
+      </p>
+      <a
+        class="inline-flex gap-1.5 items-center justify-center min-w-40 rounded-lg px-4 py-2 bg-gradient-btn text-main-white text-sm font-medium"
+        :href="about.EMQXCloud"
+        target="_blank"
+        rel="noopener"
+      >
+        {{ $t('about.tryCloud') }}
+        <ElIconRight width="16" height="16" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<style module>
+.section {
+  @apply mb-6 flex divide-x divide-border-default text-sm text-main-green;
+  > div,
+  > a {
+    @apply px-3 first:pl-0 last:pr-0;
+  }
+}
+
+.cloud {
+  @apply text-center px-10 py-5 bg-gradient-card rounded-lg;
+}
+</style>
diff --git a/packages/ui/src/components/about/View.vue b/packages/ui/src/components/about/View.vue
new file mode 100644
index 000000000..3a79c47e4
--- /dev/null
+++ b/packages/ui/src/components/about/View.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import logoDark from '../../assets/images/about/mqttx-dark.png'
+import logoLight from '../../assets/images/about/mqttx-light.png'
+import { useSettingsStore } from '../../stores'
+
+const { settings } = useSettingsStore()
+const logo = computed(() => settings!.currentTheme === 'light' ? logoDark : logoLight)
+
+const { t } = useI18n()
+const version = computed(() => `${t('common.version')} v${window.__APP_VERSION__}`)
+</script>
+
+<template>
+  <div id="help-view" class="px-4 pt-4 pb-12 bg-primary min-h-full select-none">
+    <div class="mx-auto max-w-screen-lg">
+      <h1 class="mb-12 text-lg text-title font-semibold">
+        {{ $t('about.about') }}
+      </h1>
+      <div class="px-6 flex flex-col items-center justify-center min-h-[calc(100vh-140px)]">
+        <div class="flex gap-20 items-center">
+          <img :src="logo" alt="MQTTX" width="200" height="192">
+          <div>
+            <div class="mb-4 font-semibold text-2xl text-title">
+              {{ version }}
+            </div>
+            <AboutInfo />
+            <AboutFooter />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/ui/src/components/common/LeftMenu.vue b/packages/ui/src/components/common/LeftMenu.vue
index f0996cfe0..2d931f688 100644
--- a/packages/ui/src/components/common/LeftMenu.vue
+++ b/packages/ui/src/components/common/LeftMenu.vue
@@ -80,7 +80,7 @@ const menus = reactive<Menus>({
 
 <style module>
 .aside {
-  @apply z-[1001] py-10 flex flex-col gap-8 justify-between items-center border-r border-r-border-leftbar;
+  @apply z-[1001] select-none py-10 flex flex-col gap-8 justify-between items-center border-r border-r-border-leftbar;
   background: linear-gradient(135deg, var(--color-bg-leftbar_top) 0%, var(--color-bg-leftbar_bottom) 100%);
 }
 
diff --git a/packages/ui/src/composables/__test__/useLinks.test.ts b/packages/ui/src/composables/__test__/useLinks.test.ts
index 5425e2715..08c934993 100644
--- a/packages/ui/src/composables/__test__/useLinks.test.ts
+++ b/packages/ui/src/composables/__test__/useLinks.test.ts
@@ -99,7 +99,7 @@ describe('useLinks', () => {
       faq: 'https://mqttx.app/zh/docs/faq?utm_source=mqttx&utm_medium=referral&utm_campaign=about-to-faq',
       MQTTX: 'https://mqttx.app/zh?utm_source=mqttx&utm_medium=referral&utm_campaign=about-to-mqttx',
       EMQ: 'https://emqx.com/zh?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-homepage',
-      EMQXCloud: 'https://emqx.com/zh/cloud?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-cloud',
+      EMQXCloud: 'https://accounts-zh.emqx.com/signup?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-cloud&continue=https%3A%2F%2Fcloud.emqx.com%2Fconsole%2Fdeployments%2Fnew',
     })
 
     await setupI18n('en')
@@ -108,7 +108,7 @@ describe('useLinks', () => {
       faq: 'https://mqttx.app/docs/faq?utm_source=mqttx&utm_medium=referral&utm_campaign=about-to-faq',
       MQTTX: 'https://mqttx.app?utm_source=mqttx&utm_medium=referral&utm_campaign=about-to-mqttx',
       EMQ: 'https://emqx.com/en?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-homepage',
-      EMQXCloud: 'https://emqx.com/en/cloud?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-cloud',
+      EMQXCloud: 'https://accounts.emqx.com/signup?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-cloud&continue=https%3A%2F%2Fcloud.emqx.com%2Fconsole%2Fdeployments%2Fnew',
     })
   })
 
@@ -135,4 +135,28 @@ describe('useLinks', () => {
       blogUtm: '?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-help-to-blog',
     })
   })
+
+  it('should return correct authSite based on locale', async () => {
+    await setupI18n('zh')
+    const wrapper = mount(createTestComponent(), { global: { plugins: [i18n] } })
+    expect(wrapper.vm.authSite).toBe('https://accounts-zh.emqx.com')
+
+    await setupI18n('ja')
+    expect(wrapper.vm.authSite).toBe('https://accounts.emqx.com/ja')
+
+    await setupI18n('en')
+    expect(wrapper.vm.authSite).toBe('https://accounts.emqx.com')
+  })
+
+  it('should return correct cloudTrial link', async () => {
+    await setupI18n('zh')
+    const wrapper = mount(createTestComponent(), { global: { plugins: [i18n] } })
+    expect(wrapper.vm.cloudTrial).toBe('https://accounts-zh.emqx.com/signup?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-cloud&continue=https%3A%2F%2Fcloud.emqx.com%2Fconsole%2Fdeployments%2Fnew')
+
+    await setupI18n('ja')
+    expect(wrapper.vm.cloudTrial).toBe('https://accounts.emqx.com/ja/signup?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-cloud&continue=https%3A%2F%2Fcloud.emqx.com%2Fconsole%2Fdeployments%2Fnew')
+
+    await setupI18n('en')
+    expect(wrapper.vm.cloudTrial).toBe('https://accounts.emqx.com/signup?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-cloud&continue=https%3A%2F%2Fcloud.emqx.com%2Fconsole%2Fdeployments%2Fnew')
+  })
 })
diff --git a/packages/ui/src/composables/useLinks.ts b/packages/ui/src/composables/useLinks.ts
index e5d03bb4e..79540d3f3 100644
--- a/packages/ui/src/composables/useLinks.ts
+++ b/packages/ui/src/composables/useLinks.ts
@@ -15,10 +15,25 @@ export default function useLinks() {
     return 'https://emqx.com/en'
   })
 
-  const forumSite = computed(() => locale.value === 'zh' ? 'https://askemq.com/c/tools/11' : 'https://github.com/emqx/MQTTX/discussions')
+  const authSite = computed(() => {
+    if (['ja'].includes(locale.value)) {
+      return `https://accounts.emqx.com/${locale.value}`
+    }
+    if (locale.value === 'zh') {
+      return 'https://accounts-zh.emqx.com'
+    }
+    return 'https://accounts.emqx.com'
+  })
 
   const utm = '?utm_source=mqttx&utm_medium=referral&utm_campaign='
 
+  const cloudTrial = computed(() => {
+    const query = `${utm}mqttx-to-cloud&continue=https%3A%2F%2Fcloud.emqx.com%2Fconsole%2Fdeployments%2Fnew`
+    return `${authSite.value}/signup${query}`
+  })
+
+  const forumSite = computed(() => locale.value === 'zh' ? 'https://askemq.com/c/tools/11' : 'https://github.com/emqx/MQTTX/discussions')
+
   const leftBarLogo = computed(() => `${MQTTXSite.value}${utm}logo-to-homepage`)
 
   const empty = computed(() => ({
@@ -31,7 +46,7 @@ export default function useLinks() {
     faq: `${MQTTXSite.value}/docs/faq${utm}about-to-faq`,
     MQTTX: `${MQTTXSite.value}${utm}about-to-mqttx`,
     EMQ: `${EMQSite.value}${utm}mqttx-to-homepage`,
-    EMQXCloud: `${EMQSite.value}/cloud${utm}mqttx-to-cloud`,
+    EMQXCloud: cloudTrial.value,
   }))
 
   const help = computed(() => ({
@@ -46,6 +61,8 @@ export default function useLinks() {
   return {
     MQTTXSite,
     EMQSite,
+    authSite,
+    cloudTrial,
     forumSite,
     leftBarLogo,
     empty,
diff --git a/packages/ui/src/i18n/about.ts b/packages/ui/src/i18n/about.ts
index bec526a82..3efe8d1d2 100644
--- a/packages/ui/src/i18n/about.ts
+++ b/packages/ui/src/i18n/about.ts
@@ -34,6 +34,13 @@ export default {
     ja: 'リリース履歴',
     hu: 'Kiadások',
   },
+  dataCollectionPolicy: {
+    zh: '数据收集政策',
+    en: 'Data Collection Policy',
+    tr: 'Veri Toplama Politikası',
+    ja: 'データ収集ポリシー',
+    hu: 'Adatgyűjtési irányelv',
+  },
   mqttxDesc: {
     zh: 'MQTTX 是一款由 EMQ 开源的 MQTT 5.0 跨平台桌面客户端，旨在帮助开发者更快的开发、调试 MQTT 服务和应用。',
     en: 'MQTTX is a cross-platform MQTT 5.0 client tool open-sourced by EMQ, designed to help develop and debug MQTT services and applications faster.',
@@ -41,6 +48,13 @@ export default {
     ja: 'MQTTXは、EMQによるオープンソースのMQTT 5.0クロスプラットフォーム・デスクスクライアントで、開発者がMQTTサービスおよびアプリケーションをより速く開発およびデバッグできるよう設計されています。',
     hu: 'Az MQTTX egy nyílt forráskódú MQTT 5.0 cross-platform asztali kliens az EMQ-tól, amelynek célja, hogy segítse a fejlesztőket az MQTT szolgáltatások és alkalmazások gyorsabb fejlesztésében és hibakeresésében.',
   },
+  mqttxWebDesc: {
+    zh: 'MQTTX Web 是一款开源的可在浏览器运行的 MQTT 5.0 WebSocket 客户端工具，无需本地安装即可帮助您更快地调试 MQTT 服务及应用。',
+    en: 'MQTTX Web is an open-source MQTT 5.0 WebSocket client on the browser to help you debug your MQTT services and applications faster.',
+    tr: 'MQTTX Web, MQTT hizmetlerinizi ve uygulamalarınızı daha hızlı hata ayıklamanıza yardımcı olmak için tarayıcıda çalışan açık kaynak kodlu bir MQTT 5.0 WebSocket istemcisidir.',
+    ja: 'MQTTX Webは、オープンソースのMQTT 5.0 WebSocketクライアントで、ブラウザ上でMQTTサービスやアプリケーションのデバッグを高速化することができます。',
+    hu: 'Az MQTTX Web egy nyílt forráskódú MQTT 5.0 WebSocket kliens a böngészőben, amely segít gyorsabban hibakeresni az MQTT szolgáltatásokat és alkalmazásokat.',
+  },
   cloudTitle: {
     zh: '立即获取一个您专属的 MQTT 服务！',
     en: 'Get Your Dedicated MQTT Server Now!',