diff --git a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
index 5ffe5a5650..1f47b2e777 100644
--- a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
+++ b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
@@ -1,25 +1,25 @@
 import React from 'react'
 import { Space } from 'antd'
 import { useTranslation } from 'react-i18next'
-import { useLocation, Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 import { ArrowLeftOutlined } from '@ant-design/icons'
-import { useToggle } from '@umijs/hooks'
+import { useLocalStorageState } from '@umijs/hooks'
 
 import client from '@lib/client'
 import { useClientRequest } from '@lib/utils/useClientRequest'
-import { parseQueryFn, buildQueryFn } from '@lib/utils/query'
+import { buildQueryFn, parseQueryFn } from '@lib/utils/query'
 import formatSql from '@lib/utils/formatSql'
 import {
-  Head,
-  Descriptions,
-  TextWithInfo,
-  Pre,
-  HighlightSQL,
-  Expand,
-  CopyLink,
-  CardTabs,
   AnimatedSkeleton,
+  CardTabs,
+  CopyLink,
+  Descriptions,
   ErrorBar,
+  Expand,
+  Head,
+  HighlightSQL,
+  Pre,
+  TextWithInfo,
 } from '@lib/components'
 import TabBasic from './DetailTabBasic'
 import TabTime from './DetailTabTime'
@@ -32,6 +32,8 @@ export interface IPageQuery {
   timestamp?: number
 }
 
+const SLOW_QUERY_DETAIL_EXPAND = 'slow_query.detail_expand'
+
 function DetailPage() {
   const query = DetailPage.parseQuery(useLocation().search)
 
@@ -48,11 +50,21 @@ function DetailPage() {
       )
   )
 
-  const { state: sqlExpanded, toggle: toggleSqlExpanded } = useToggle(false)
-  const { state: prevSqlExpanded, toggle: togglePrevSqlExpanded } = useToggle(
-    false
+  const [detailExpand, setDetailExpand] = useLocalStorageState(
+    SLOW_QUERY_DETAIL_EXPAND,
+    {
+      prev_query: false,
+      query: false,
+      plan: false,
+    }
   )
-  const { state: planExpanded, toggle: togglePlanExpanded } = useToggle(false)
+
+  const togglePrevQuery = () =>
+    setDetailExpand((prev) => ({ ...prev, prev_query: !prev.prev_query }))
+  const toggleQuery = () =>
+    setDetailExpand((prev) => ({ ...prev, query: !prev.query }))
+  const togglePlan = () =>
+    setDetailExpand((prev) => ({ ...prev, plan: !prev.plan }))
 
   return (
     <div>
@@ -71,20 +83,20 @@ function DetailPage() {
               <Descriptions>
                 <Descriptions.Item
                   span={2}
-                  multiline={sqlExpanded}
+                  multiline={detailExpand.query}
                   label={
                     <Space size="middle">
                       <TextWithInfo.TransKey transKey="slow_query.detail.head.sql" />
                       <Expand.Link
-                        expanded={sqlExpanded}
-                        onClick={() => toggleSqlExpanded()}
+                        expanded={detailExpand.query}
+                        onClick={toggleQuery}
                       />
                       <CopyLink data={formatSql(data.query!)} />
                     </Space>
                   }
                 >
                   <Expand
-                    expanded={sqlExpanded}
+                    expanded={detailExpand.query}
                     collapsedContent={
                       <HighlightSQL sql={data.query!} compact />
                     }
@@ -97,20 +109,20 @@ function DetailPage() {
                     return (
                       <Descriptions.Item
                         span={2}
-                        multiline={prevSqlExpanded}
+                        multiline={detailExpand.prev_query}
                         label={
                           <Space size="middle">
                             <TextWithInfo.TransKey transKey="slow_query.detail.head.previous_sql" />
                             <Expand.Link
-                              expanded={prevSqlExpanded}
-                              onClick={() => togglePrevSqlExpanded()}
+                              expanded={detailExpand.prev_query}
+                              onClick={togglePrevQuery}
                             />
                             <CopyLink data={formatSql(data.prev_stmt!)} />
                           </Space>
                         }
                       >
                         <Expand
-                          expanded={prevSqlExpanded}
+                          expanded={detailExpand.prev_query}
                           collapsedContent={
                             <HighlightSQL sql={data.prev_stmt!} compact />
                           }
@@ -122,19 +134,19 @@ function DetailPage() {
                 })()}
                 <Descriptions.Item
                   span={2}
-                  multiline={planExpanded}
+                  multiline={detailExpand.plan}
                   label={
                     <Space size="middle">
                       <TextWithInfo.TransKey transKey="slow_query.detail.head.plan" />
                       <Expand.Link
-                        expanded={planExpanded}
-                        onClick={() => togglePlanExpanded()}
+                        expanded={detailExpand.plan}
+                        onClick={togglePlan}
                       />
                       <CopyLink data={data.plan ?? ''} />
                     </Space>
                   }
                 >
-                  <Expand expanded={planExpanded}>
+                  <Expand expanded={detailExpand.plan}>
                     <Pre noWrap>{data.plan}</Pre>
                   </Expand>
                 </Descriptions.Item>
diff --git a/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx b/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx
index ef16819a97..b686c63345 100644
--- a/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx
+++ b/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx
@@ -1,18 +1,18 @@
 import React from 'react'
 import { Space } from 'antd'
-import { useToggle } from '@umijs/hooks'
+import { useLocalStorageState } from '@umijs/hooks'
 import { useTranslation } from 'react-i18next'
 import {
+  AnimatedSkeleton,
   Card,
-  Descriptions,
-  HighlightSQL,
-  TextWithInfo,
-  Pre,
   CardTabs,
-  Expand,
   CopyLink,
-  AnimatedSkeleton,
+  Descriptions,
   ErrorBar,
+  Expand,
+  HighlightSQL,
+  Pre,
+  TextWithInfo,
 } from '@lib/components'
 import { useClientRequest } from '@lib/utils/useClientRequest'
 import client from '@lib/client'
@@ -34,6 +34,8 @@ export interface IPlanDetailProps {
   query: IQuery
 }
 
+const STMT_DETAIL_PLAN_EXPAND = 'statement.detail_plan_expand'
+
 function PlanDetail({ query }: IPlanDetailProps) {
   const { t } = useTranslation()
   const { data, isLoading, error } = useClientRequest((reqConfig) =>
@@ -48,11 +50,22 @@ function PlanDetail({ query }: IPlanDetailProps) {
         reqConfig
       )
   )
-  const { state: sqlExpanded, toggle: toggleSqlExpanded } = useToggle(false)
-  const { state: prevSqlExpanded, toggle: togglePrevSqlExpanded } = useToggle(
-    false
+
+  const [detailExpand, setDetailExpand] = useLocalStorageState(
+    STMT_DETAIL_PLAN_EXPAND,
+    {
+      prev_query: false,
+      query: false,
+      plan: false,
+    }
   )
-  const { state: planExpanded, toggle: togglePlanExpanded } = useToggle(false)
+
+  const togglePrevQuery = () =>
+    setDetailExpand((prev) => ({ ...prev, prev_query: !prev.prev_query }))
+  const toggleQuery = () =>
+    setDetailExpand((prev) => ({ ...prev, query: !prev.query }))
+  const togglePlan = () =>
+    setDetailExpand((prev) => ({ ...prev, plan: !prev.plan }))
 
   let title_key
   if (query.allPlans === 1) {
@@ -62,7 +75,6 @@ function PlanDetail({ query }: IPlanDetailProps) {
   } else {
     title_key = 'some'
   }
-
   return (
     <Card
       title={t(`statement.pages.detail.desc.plans.title.${title_key}`, {
@@ -76,20 +88,20 @@ function PlanDetail({ query }: IPlanDetailProps) {
             <Descriptions>
               <Descriptions.Item
                 span={2}
-                multiline={sqlExpanded}
+                multiline={detailExpand.query}
                 label={
                   <Space size="middle">
                     <TextWithInfo.TransKey transKey="statement.fields.query_sample_text" />
                     <Expand.Link
-                      expanded={sqlExpanded}
-                      onClick={() => toggleSqlExpanded()}
+                      expanded={detailExpand.query}
+                      onClick={toggleQuery}
                     />
                     <CopyLink data={formatSql(data.query_sample_text)} />
                   </Space>
                 }
               >
                 <Expand
-                  expanded={sqlExpanded}
+                  expanded={detailExpand.query}
                   collapsedContent={
                     <HighlightSQL sql={data.query_sample_text!} compact />
                   }
@@ -100,20 +112,20 @@ function PlanDetail({ query }: IPlanDetailProps) {
               {data.prev_sample_text ? (
                 <Descriptions.Item
                   span={2}
-                  multiline={prevSqlExpanded}
+                  multiline={detailExpand.prev_query}
                   label={
                     <Space size="middle">
                       <TextWithInfo.TransKey transKey="statement.fields.prev_sample_text" />
                       <Expand.Link
-                        expanded={prevSqlExpanded}
-                        onClick={() => togglePrevSqlExpanded()}
+                        expanded={detailExpand.prev_query}
+                        onClick={togglePrevQuery}
                       />
                       <CopyLink data={formatSql(data.prev_sample_text)} />
                     </Space>
                   }
                 >
                   <Expand
-                    expanded={prevSqlExpanded}
+                    expanded={detailExpand.prev_query}
                     collapsedContent={
                       <HighlightSQL sql={data.prev_sample_text!} compact />
                     }
@@ -124,19 +136,19 @@ function PlanDetail({ query }: IPlanDetailProps) {
               ) : null}
               <Descriptions.Item
                 span={2}
-                multiline={planExpanded}
+                multiline={detailExpand.plan}
                 label={
                   <Space size="middle">
                     <TextWithInfo.TransKey transKey="statement.fields.plan" />
                     <Expand.Link
-                      expanded={planExpanded}
-                      onClick={() => togglePlanExpanded()}
+                      expanded={detailExpand.plan}
+                      onClick={togglePlan}
                     />
                     <CopyLink data={data.plan ?? ''} />
                   </Space>
                 }
               >
-                <Expand expanded={planExpanded}>
+                <Expand expanded={detailExpand.plan}>
                   <Pre noWrap>{data.plan}</Pre>
                 </Expand>
               </Descriptions.Item>
diff --git a/ui/lib/apps/Statement/pages/Detail/index.tsx b/ui/lib/apps/Statement/pages/Detail/index.tsx
index 858747e8b0..8f97175764 100644
--- a/ui/lib/apps/Statement/pages/Detail/index.tsx
+++ b/ui/lib/apps/Statement/pages/Detail/index.tsx
@@ -5,7 +5,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link, useLocation } from 'react-router-dom'
 import { ArrowLeftOutlined } from '@ant-design/icons'
-import { useToggle } from '@umijs/hooks'
+import { useLocalStorageState } from '@umijs/hooks'
 
 import client, { StatementModel } from '@lib/client'
 import {
@@ -13,11 +13,11 @@ import {
   CardTable,
   DateTime,
   Descriptions,
+  ErrorBar,
   Expand,
   Head,
   HighlightSQL,
   TextWithInfo,
-  ErrorBar,
 } from '@lib/components'
 import CopyLink from '@lib/components/CopyLink'
 import formatSql from '@lib/utils/formatSql'
@@ -34,6 +34,8 @@ export interface IPageQuery {
   endTime?: number
 }
 
+const STMT_DETAIL_EXPAND = 'statement.detail_expand'
+
 function DetailPage() {
   const query = DetailPage.parseQuery(useLocation().search)
   const { data: plans, isLoading, error } = useClientRequest((reqConfig) =>
@@ -60,7 +62,11 @@ function DetailPage() {
     })
   )
 
-  const { state: sqlExpanded, toggle: toggleSqlExpanded } = useToggle(false)
+  const [sqlExpanded, setSqlExpanded] = useLocalStorageState(
+    STMT_DETAIL_EXPAND,
+    false
+  )
+  const toggleSqlExpanded = () => setSqlExpanded((prev) => !prev)
 
   useEffect(() => {
     if (plans && plans.length > 0) {
@@ -91,7 +97,7 @@ function DetailPage() {
                       <TextWithInfo.TransKey transKey="statement.fields.digest_text" />
                       <Expand.Link
                         expanded={sqlExpanded}
-                        onClick={() => toggleSqlExpanded()}
+                        onClick={toggleSqlExpanded}
                       />
                       <CopyLink data={formatSql(plans[0].digest_text!)} />
                     </Space>