diff --git a/pkg/apiserver/debugapi/apis.go b/pkg/apiserver/debugapi/apis.go
index 42ce60ca95..8fc9ae8fee 100644
--- a/pkg/apiserver/debugapi/apis.go
+++ b/pkg/apiserver/debugapi/apis.go
@@ -10,7 +10,7 @@ import (
 	"github.com/pingcap/tidb-dashboard/util/topo"
 )
 
-var commomParamPprofKinds = endpoint.APIParamEnum("kind", true, []endpoint.EnumItemDefinition{
+var commonParamPprofKinds = endpoint.APIParamEnum("kind", true, []endpoint.EnumItemDefinition{
 	{Value: "allocs"},
 	{Value: "block"},
 	{Value: "cmdline"},
@@ -159,7 +159,7 @@ var apiEndpoints = []endpoint.APIDefinition{
 		Path:      "/debug/pprof/{kind}",
 		Method:    resty.MethodGet,
 		PathParams: []endpoint.APIParamDefinition{
-			commomParamPprofKinds,
+			commonParamPprofKinds,
 		},
 		QueryParams: []endpoint.APIParamDefinition{
 			commonParamPprofSeconds,
@@ -394,7 +394,7 @@ var apiEndpoints = []endpoint.APIDefinition{
 		Path:      "/debug/pprof/{kind}",
 		Method:    resty.MethodGet,
 		PathParams: []endpoint.APIParamDefinition{
-			commomParamPprofKinds,
+			commonParamPprofKinds,
 		},
 		QueryParams: []endpoint.APIParamDefinition{
 			commonParamPprofSeconds,
@@ -439,4 +439,24 @@ var apiEndpoints = []endpoint.APIDefinition{
 			req.SetHeader("Content-Type", "application/protobuf")
 		},
 	},
+	// TiProxy Endpoints
+	{
+		ID:        "tiproxy_config",
+		Component: topo.KindTiProxy,
+		Path:      "/api/admin/config",
+		Method:    resty.MethodGet,
+	},
+	{
+		ID:        "tiproxy_pprof",
+		Component: topo.KindTiProxy,
+		Path:      "/debug/pprof/{kind}",
+		Method:    resty.MethodGet,
+		PathParams: []endpoint.APIParamDefinition{
+			commonParamPprofKinds,
+		},
+		QueryParams: []endpoint.APIParamDefinition{
+			commonParamPprofSeconds,
+			commonParamPprofDebug,
+		},
+	},
 }
diff --git a/pkg/apiserver/debugapi/endpoint/payload.go b/pkg/apiserver/debugapi/endpoint/payload.go
index 9ba1e72a7a..c16144940c 100644
--- a/pkg/apiserver/debugapi/endpoint/payload.go
+++ b/pkg/apiserver/debugapi/endpoint/payload.go
@@ -298,7 +298,7 @@ func (p *ResolvedRequestPayload) verifyEndpoint(ctx context.Context, etcdClient
 		}
 		matched := false
 		for _, info := range infos {
-			if info.IP == p.host && info.Port == uint(p.port) {
+			if info.IP == p.host && info.StatusPort == uint(p.port) {
 				matched = true
 				break
 			}
diff --git a/ui/packages/tidb-dashboard-for-op/src/apps/DebugAPI/context.ts b/ui/packages/tidb-dashboard-for-op/src/apps/DebugAPI/context.ts
index 72d742f1ab..4005d41b80 100644
--- a/ui/packages/tidb-dashboard-for-op/src/apps/DebugAPI/context.ts
+++ b/ui/packages/tidb-dashboard-for-op/src/apps/DebugAPI/context.ts
@@ -46,6 +46,10 @@ class DataSource implements IDebugAPIDataSource {
   getPDTopology(options?: ReqConfig) {
     return client.getInstance().getPDTopology(options)
   }
+
+  getTiProxyTopology(options?: ReqConfig) {
+    return client.getInstance().getTiProxyTopology(options)
+  }
 }
 
 const ds = new DataSource()
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/List.tsx b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/List.tsx
index f0ea8f554a..738a024a30 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/List.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/apps/ContinuousProfiling/pages/List.tsx
@@ -109,7 +109,7 @@ export default function Page() {
         minWidth: 250,
         maxWidth: 300,
         onRender: (rec) => {
-          const { tikv, tidb, pd, tiflash, ticdc } = rec.component_num
+          const { tikv, tidb, pd, tiflash, ticdc, tiproxy } = rec.component_num
           let s = `${tikv} ${instanceKindName(
             'tikv'
           )}, ${tidb} ${instanceKindName('tidb')}, ${pd} ${instanceKindName(
@@ -120,6 +120,9 @@ export default function Page() {
           if (ticdc !== undefined) {
             s = `${s}, ${ticdc} ${instanceKindName('ticdc')}`
           }
+          if (tiproxy !== undefined) {
+            s = `${s}, ${tiproxy} ${instanceKindName('tiproxy')}`
+          }
           return s
         }
       },
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/ApiForm.tsx b/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/ApiForm.tsx
index a41a690481..3fda7afb69 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/ApiForm.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/ApiForm.tsx
@@ -19,6 +19,7 @@ export interface Topology {
   tikv: TopologyStoreInfo[]
   tiflash: TopologyStoreInfo[]
   pd: TopologyPDInfo[]
+  tiproxy: TopologyPDInfo[]
 }
 
 export default function ApiForm({
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/ApiList.tsx b/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/ApiList.tsx
index b44983659e..232317ef9d 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/ApiList.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/ApiList.tsx
@@ -59,7 +59,7 @@ export default function Page() {
   const { endpoints, filterBy } = useFilterEndpoints(endpointData)
 
   // TODO: refine with components/InstanceSelect
-  const { data: tidbTopology = [], isLoading: isTiDBTopology } =
+  const { data: tidbTopology = [], isLoading: isTiDBLoading } =
     useClientRequest(ctx!.ds.getTiDBTopology)
   const { data: pdTopology = [], isLoading: isPDLoading } = useClientRequest(
     ctx!.ds.getPDTopology
@@ -67,13 +67,17 @@ export default function Page() {
   const { data: storeTopology, isLoading: isStoreLoading } = useClientRequest(
     ctx!.ds.getStoreTopology
   )
+  const { data: tiproxyTopology = [], isLoading: isTiProxyLoading } =
+    useClientRequest(ctx!.ds.getTiProxyTopology)
   const topology: Topology = {
     tidb: tidbTopology!,
     tikv: storeTopology?.tikv || [],
     tiflash: storeTopology?.tiflash || [],
-    pd: pdTopology!
+    pd: pdTopology!,
+    tiproxy: tiproxyTopology!
   }
-  const isTopologyLoading = isTiDBTopology || isPDLoading || isStoreLoading
+  const isTopologyLoading =
+    isTiDBLoading || isPDLoading || isStoreLoading || isTiProxyLoading
 
   const groups = useMemo(
     () =>
@@ -89,7 +93,7 @@ export default function Page() {
   )
   const sortedGroups = useMemo(
     () =>
-      ['tidb', 'tikv', 'tiflash', 'pd']
+      ['tidb', 'tikv', 'tiflash', 'pd', 'tiproxy']
         .filter((sortKey) => groups[sortKey])
         .map((sortKey) => groups[sortKey]),
     [groups]
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/widgets/Host.tsx b/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/widgets/Host.tsx
index 9a6183175b..8adba79063 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/widgets/Host.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/apilist/widgets/Host.tsx
@@ -9,7 +9,8 @@ const portKeys: { [k: string]: string } = {
   tidb: 'status_port',
   tikv: 'status_port',
   tiflash: 'status_port',
-  pd: 'port'
+  pd: 'port',
+  tiproxy: 'status_port'
 }
 
 export const HostSelectWidget: ApiFormWidget = ({ endpoint, topology }) => {
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/context/index.ts b/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/context/index.ts
index b05331f70d..30a3bc8c54 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/context/index.ts
+++ b/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/context/index.ts
@@ -8,7 +8,8 @@ import {
   InfoTableSchema,
   TopologyTiDBInfo,
   ClusterinfoStoreTopologyResponse,
-  TopologyPDInfo
+  TopologyPDInfo,
+  TopologyTiProxyInfo
 } from '@lib/client'
 
 import { IContextConfig, ReqConfig } from '@lib/types'
@@ -37,6 +38,10 @@ export interface IDebugAPIDataSource {
   ): AxiosPromise<ClusterinfoStoreTopologyResponse>
 
   getPDTopology(options?: ReqConfig): AxiosPromise<Array<TopologyPDInfo>>
+
+  getTiProxyTopology(
+    options?: ReqConfig
+  ): AxiosPromise<Array<TopologyTiProxyInfo>>
 }
 
 export interface IDebugAPIContext {
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/translations/en.yaml b/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/translations/en.yaml
index 28add18fa2..bc1b2ceed8 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/translations/en.yaml
+++ b/ui/packages/tidb-dashboard-lib/src/apps/DebugAPI/translations/en.yaml
@@ -133,3 +133,9 @@ debug_api:
       pd_store_id: Store - by StoreID (pd-ctl store [id])
       # pd_pprof: pprof
       # pd_pprof_desc: The `seconds` parameter is only effective to `kind=profile` and `kind=trace`.
+  tiproxy:
+    name: '{{distro.tiproxy}}'
+    endpoints:
+      tiproxy_config: Current Config
+      tiproxy_pprof: pprof
+      tiproxy_pprof_desc: The `seconds` parameter is only effective to `kind=profile` and `kind=trace`.
diff --git a/ui/packages/tidb-dashboard-lib/src/components/InstanceSelect/index.tsx b/ui/packages/tidb-dashboard-lib/src/components/InstanceSelect/index.tsx
index 1e1b96b207..a15871ca5b 100644
--- a/ui/packages/tidb-dashboard-lib/src/components/InstanceSelect/index.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/components/InstanceSelect/index.tsx
@@ -168,7 +168,13 @@ function InstanceSelect(
   )
 
   const [tableItems] = useMemo(() => {
-    if (loadingTiDB || loadingStores || loadingPD) {
+    if (
+      loadingTiDB ||
+      loadingStores ||
+      loadingPD ||
+      loadingTiCDC ||
+      loadingTiProxy
+    ) {
       return [[], []]
     }
     return buildInstanceTable({