diff --git a/ui/packages/tidb-dashboard-for-dbaas/package.json b/ui/packages/tidb-dashboard-for-dbaas/package.json
index d30576f661..4f194d751c 100644
--- a/ui/packages/tidb-dashboard-for-dbaas/package.json
+++ b/ui/packages/tidb-dashboard-for-dbaas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pingcap/tidb-dashboard-for-dbaas",
-  "version": "0.0.68",
+  "version": "0.0.80",
   "main": "dist/main.js",
   "module": "dist/main.js",
   "files": [
diff --git a/ui/packages/tidb-dashboard-for-dbaas/src/apps/Statement/context.ts b/ui/packages/tidb-dashboard-for-dbaas/src/apps/Statement/context.ts
index b2000cd5b6..ecb14cd9d0 100644
--- a/ui/packages/tidb-dashboard-for-dbaas/src/apps/Statement/context.ts
+++ b/ui/packages/tidb-dashboard-for-dbaas/src/apps/Statement/context.ts
@@ -107,6 +107,41 @@ class DataSource implements IStatementDataSource {
     return client.getAxiosInstance().get('/statements/time_ranges', options)
   }
 
+  // quick plan bind api
+  statementsPlanBindStatusGet(
+    sqlDigest: string,
+    beginTime: number,
+    endTime: number,
+    options?: ReqConfig
+  ) {
+    return client.getInstance().statementsPlanBindingGet(
+      {
+        sqlDigest,
+        beginTime,
+        endTime
+      },
+      options
+    )
+  }
+
+  statementsPlanBindCreate(planDigest: string, options?: ReqConfig) {
+    return client.getInstance().statementsPlanBindingPost(
+      {
+        planDigest
+      },
+      options
+    )
+  }
+
+  statementsPlanBindDelete(sqlDigest: string, options?: ReqConfig) {
+    return client.getInstance().statementsPlanBindingDelete(
+      {
+        sqlDigest
+      },
+      options
+    )
+  }
+
   // slow query
   slowQueryAvailableFieldsGet(options?: ReqConfig) {
     return client.getInstance().slowQueryAvailableFieldsGet(options)
@@ -170,6 +205,7 @@ export const ctx: () => IStatementContext = () => ({
   cfg: {
     apiPathBase: client.getBasePath(),
     enableExport: false,
-    showHelp: false
+    showHelp: false,
+    enablePlanBinding: true
   }
 })
diff --git a/ui/packages/tidb-dashboard-for-op/src/apps/Statement/context.ts b/ui/packages/tidb-dashboard-for-op/src/apps/Statement/context.ts
index b45d860962..395ed2b83a 100644
--- a/ui/packages/tidb-dashboard-for-op/src/apps/Statement/context.ts
+++ b/ui/packages/tidb-dashboard-for-op/src/apps/Statement/context.ts
@@ -114,6 +114,7 @@ class DataSource implements IStatementDataSource {
     })
   }
 
+  // quick plan bind api
   statementsPlanBindStatusGet(
     sqlDigest: string,
     beginTime: number,
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Statement/pages/Detail/PlanBind.tsx b/ui/packages/tidb-dashboard-lib/src/apps/Statement/pages/Detail/PlanBind.tsx
index b49cd9109f..c21763da74 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/Statement/pages/Detail/PlanBind.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/apps/Statement/pages/Detail/PlanBind.tsx
@@ -270,6 +270,7 @@ const PlanTable = ({
       onRenderCheckbox={(props) => (
         <Radio checked={props?.checked} disabled={!!boundPlanDigest} />
       )}
+      style={{ overflow: 'scroll' }}
     />
   )
 }