diff --git a/packages/velaux-ui/src/pages/ApplicationInstanceList/components/Header/index.tsx b/packages/velaux-ui/src/pages/ApplicationInstanceList/components/Header/index.tsx
index cf9b25257..a9e0d045a 100644
--- a/packages/velaux-ui/src/pages/ApplicationInstanceList/components/Header/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationInstanceList/components/Header/index.tsx
@@ -5,6 +5,7 @@ import React, { Component } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { AiOutlineCopy } from 'react-icons/ai';
 import { HiOutlineRefresh } from 'react-icons/hi';
+import { listApplicationServiceEndpoints } from '../../../../api/observation';
 
 import {
   recycleApplicationEnvbinding,
@@ -34,17 +35,16 @@ export type GatewayIP = {
 };
 
 type Props = {
+  // For the search
   targets?: Target[];
+  components?: ApplicationComponent[];
+  updateQuery?: (params: { target?: string; component?: string }) => void;
   applicationStatus?: ApplicationStatus;
   applicationDetail?: ApplicationDetail;
-  components?: ApplicationComponent[];
   envName: string;
   appName: string;
   envbinding?: EnvBinding;
   disableStatusShow?: boolean;
-  endpoints?: Endpoint[];
-  updateQuery: (params: { target?: string; component?: string }) => void;
-  updateEnvs: () => void;
   refresh: () => void;
   dispatch: ({}) => void;
 };
@@ -59,6 +59,8 @@ type State = {
   component?: string;
   compare?: ApplicationCompareResponse;
   visibleApplicationDiff: boolean;
+  endpoints?: Endpoint[];
+  loading?: boolean;
 };
 
 class Header extends Component<Props, State> {
@@ -75,15 +77,90 @@ class Header extends Component<Props, State> {
   }
   componentDidMount() {
     this.compareCurrentWithCluster(this.props.appName, this.props.envName);
+    this.loadApplicationEndpoints();
   }
 
   shouldComponentUpdate(nextProps: Props) {
     if (nextProps.appName + nextProps.envName != this.props.appName + this.props.envName) {
       this.compareCurrentWithCluster(this.props.appName, nextProps.envName);
+      this.loadApplicationEndpoints();
     }
     return true;
   }
 
+  getTarget = () => {
+    const { targets } = this.props;
+    const { target } = this.state;
+    if (targets && target) {
+      const t = targets.find((item) => item.name === target);
+      return t;
+    }
+    return;
+  };
+  loadApplicationEndpoints = async () => {
+    const { applicationDetail, appName, envbinding } = this.props;
+    const { component } = this.state;
+    const target = this.getTarget();
+
+    if (applicationDetail && applicationDetail.name && envbinding) {
+      const param = {
+        appName: envbinding.appDeployName || appName,
+        appNs: envbinding.appDeployNamespace,
+        componentName: component,
+        cluster: '',
+        clusterNs: '',
+      };
+      if (target) {
+        param.cluster = target.cluster?.clusterName || '';
+        param.clusterNs = target.cluster?.namespace || '';
+      }
+      this.setState({ loading: true });
+      listApplicationServiceEndpoints(param)
+        .then((re) => {
+          if (re && re.endpoints) {
+            this.setState({ endpoints: re.endpoints });
+          } else {
+            this.setState({ endpoints: [] });
+          }
+        })
+        .finally(() => {
+          this.setState({ loading: false });
+        });
+    }
+  };
+
+  loadApplicationWorkflows = async () => {
+    const { appName } = this.props;
+    this.props.dispatch({
+      type: 'application/getApplicationWorkflows',
+      payload: { appName: appName },
+    });
+  };
+
+  loadApplicationPolicies = async () => {
+    const { appName } = this.props;
+    this.props.dispatch({
+      type: 'application/getApplicationPolicies',
+      payload: { appName: appName },
+    });
+  };
+
+  loadApplicationEnvbinding = async () => {
+    const { appName } = this.props;
+    if (appName) {
+      this.props.dispatch({
+        type: 'application/getApplicationEnvbinding',
+        payload: { appName: appName },
+      });
+    }
+  };
+
+  updateEnvbindingList = () => {
+    this.loadApplicationEnvbinding();
+    this.loadApplicationWorkflows();
+    this.loadApplicationPolicies();
+  };
+
   compareCurrentWithCluster = (appName: string, envName: string) => {
     const { applicationStatus } = this.props;
     if (!applicationStatus) {
@@ -99,13 +176,19 @@ class Header extends Component<Props, State> {
 
   handleTargetChange = (value: string) => {
     this.setState({ target: value }, () => {
-      this.props.updateQuery({ component: this.state.component, target: this.state.target });
+      if (this.props.updateQuery) {
+        this.props.updateQuery({ component: this.state.component, target: this.state.target });
+      }
+      this.loadApplicationEndpoints();
     });
   };
 
   handleComponentChange = (value: string) => {
     this.setState({ component: value }, () => {
-      this.props.updateQuery({ component: this.state.component, target: this.state.target });
+      if (this.props.updateQuery) {
+        this.props.updateQuery({ component: this.state.component, target: this.state.target });
+      }
+      this.loadApplicationEndpoints();
     });
   };
 
@@ -133,6 +216,7 @@ class Header extends Component<Props, State> {
                 dispatch(routerRedux.push(`/applications`));
               } else {
                 refresh();
+                this.loadApplicationEndpoints();
               }
             }
           });
@@ -146,12 +230,12 @@ class Header extends Component<Props, State> {
     Dialog.confirm({
       content: i18n.t('Are you sure you want to delete the current environment binding?').toString(),
       onOk: () => {
-        const { applicationDetail, envName, updateEnvs, dispatch } = this.props;
+        const { applicationDetail, envName, dispatch } = this.props;
         if (applicationDetail) {
           deleteApplicationEnvbinding({ appName: applicationDetail.name, envName: envName }).then((re) => {
             if (re) {
               Message.success(i18n.t('Environment binding deleted successfully'));
-              updateEnvs();
+              this.updateEnvbindingList();
               dispatch(routerRedux.push(`/applications/${applicationDetail.name}/config`));
             }
           });
@@ -182,8 +266,8 @@ class Header extends Component<Props, State> {
   render() {
     const { Row, Col } = Grid;
     const { appName, envName, components, applicationDetail } = this.props;
-    const { recycleLoading, deleteLoading, refreshLoading, compare, visibleApplicationDiff } = this.state;
-    const { targets, applicationStatus, endpoints, disableStatusShow } = this.props;
+    const { recycleLoading, deleteLoading, refreshLoading, compare, visibleApplicationDiff, endpoints } = this.state;
+    const { targets, applicationStatus, disableStatusShow } = this.props;
     const targetOptions = (targets || []).map((item: Target) => ({
       label: item.alias || item.name,
       value: item.name,
@@ -207,31 +291,36 @@ class Header extends Component<Props, State> {
       return 'warning';
     };
     const projectName = applicationDetail && applicationDetail.project?.name;
+    const span = 10 + (targetOptions.length > 0 ? 0 : 4) + (componentOptions.length > 0 ? 0 : 4);
     return (
       <div>
         <Row wrap={true} className="border-radius-8">
-          <Col xl={4} m={12} xs={24} style={{ marginBottom: '16px', padding: '0 8px' }}>
-            <Select
-              locale={locale().Select}
-              mode="single"
-              onChange={this.handleTargetChange}
-              dataSource={targetOptions}
-              label={i18n.t('Target').toString()}
-              placeholder={i18n.t('Target Selector').toString()}
-              hasClear
-            />
-          </Col>
-          <Col xl={4} m={12} xs={24} style={{ marginBottom: '16px', padding: '0 8px' }}>
-            <Select
-              locale={locale().Select}
-              mode="single"
-              onChange={this.handleComponentChange}
-              dataSource={componentOptions}
-              label={i18n.t('Component').toString()}
-              placeholder={i18n.t('Component Selector').toString()}
-              hasClear
-            />
-          </Col>
+          {targetOptions.length > 0 && (
+            <Col xl={4} m={12} xs={24} style={{ marginBottom: '16px', padding: '0 8px' }}>
+              <Select
+                locale={locale().Select}
+                mode="single"
+                onChange={this.handleTargetChange}
+                dataSource={targetOptions}
+                label={i18n.t('Target').toString()}
+                placeholder={i18n.t('Target Selector').toString()}
+                hasClear
+              />
+            </Col>
+          )}
+          {componentOptions.length > 0 && (
+            <Col xl={4} m={12} xs={24} style={{ marginBottom: '16px', padding: '0 8px' }}>
+              <Select
+                locale={locale().Select}
+                mode="single"
+                onChange={this.handleComponentChange}
+                dataSource={componentOptions}
+                label={i18n.t('Component').toString()}
+                placeholder={i18n.t('Component Selector').toString()}
+                hasClear
+              />
+            </Col>
+          )}
           <Col xl={6} m={12} xs={24} style={{ marginBottom: '16px', padding: '0 8px' }}>
             <If condition={applicationStatus}>
               <Message type={getAppStatusShowType(applicationStatus?.status)} size="medium" style={{ padding: '8px' }}>
@@ -246,7 +335,7 @@ class Header extends Component<Props, State> {
               </Message>
             </If>
           </Col>
-          <Col xl={10} m={12} xs={24} className="flexright" style={{ marginBottom: '16px', padding: '0 8px' }}>
+          <Col xl={span} m={12} xs={24} className="flexright" style={{ marginBottom: '16px', padding: '0 8px' }}>
             <If condition={compare && compare.isDiff}>
               <Button type="secondary" onClick={this.showApplicationDiff}>
                 <span className="circle circle-failure" />
diff --git a/packages/velaux-ui/src/pages/ApplicationInstanceList/index.tsx b/packages/velaux-ui/src/pages/ApplicationInstanceList/index.tsx
index a058868c9..82341c692 100644
--- a/packages/velaux-ui/src/pages/ApplicationInstanceList/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationInstanceList/index.tsx
@@ -5,7 +5,7 @@ import querystring from 'query-string';
 import React from 'react';
 
 import { deployApplication } from '../../api/application';
-import { listApplicationPods, listCloudResources, listApplicationServiceEndpoints } from '../../api/observation';
+import { listApplicationPods, listCloudResources } from '../../api/observation';
 import { If } from '../../components/If';
 import StatusShow from '../../components/StatusShow';
 import { Translation } from '../../components/Translation';
@@ -17,7 +17,7 @@ import type {
   ApplicationStatus,
   EnvBinding,
 } from '../../interface/application';
-import type { PodBase, CloudResource, Configuration, Endpoint } from '../../interface/observation';
+import type { PodBase, CloudResource, Configuration } from '../../interface/observation';
 import type { Target } from '../../interface/target';
 import type { LoginUserInfo } from '../../interface/user';
 import { momentDate } from '../../utils/common';
@@ -54,7 +54,6 @@ type State = {
   openRowKeys: [];
   cloudInstance?: CloudInstance[];
   showStatus: boolean;
-  endpoints?: Endpoint[];
   deployLoading: boolean;
 };
 
@@ -112,72 +111,11 @@ class ApplicationInstanceList extends React.Component<Props, State> {
         payload: { appName: appName, envName: envName },
         callback: (re: any) => {
           this.loadAppInstances();
-          if (re) {
-            const status: ApplicationStatus = re.status;
-            if (status && status.appliedResources) {
-              this.loadApplicationEndpoints();
-            }
-          }
         },
       });
     }
   };
 
-  loadApplicationEndpoints = async () => {
-    const { applicationDetail } = this.props;
-    const {
-      params: { appName },
-    } = this.props.match;
-    const { target, componentName } = this.state;
-    const env = this.getEnvbindingByName();
-    if (applicationDetail && applicationDetail.name && env) {
-      const param = {
-        appName: env.appDeployName || appName,
-        appNs: env.appDeployNamespace,
-        componentName: componentName,
-        cluster: '',
-        clusterNs: '',
-      };
-      if (target) {
-        param.cluster = target.cluster?.clusterName || '';
-        param.clusterNs = target.cluster?.namespace || '';
-      }
-      this.setState({ loading: true });
-      listApplicationServiceEndpoints(param)
-        .then((re) => {
-          if (re && re.endpoints) {
-            this.setState({ endpoints: re.endpoints });
-          } else {
-            this.setState({ endpoints: [] });
-          }
-        })
-        .finally(() => {
-          this.setState({ loading: false });
-        });
-    }
-  };
-
-  loadApplicationWorkflows = async () => {
-    const {
-      params: { appName },
-    } = this.props.match;
-    this.props.dispatch({
-      type: 'application/getApplicationWorkflows',
-      payload: { appName: appName },
-    });
-  };
-  loadApplicationEnvbinding = async () => {
-    const {
-      params: { appName },
-    } = this.props.match;
-    if (appName) {
-      this.props.dispatch({
-        type: 'application/getApplicationEnvbinding',
-        payload: { appName: appName },
-      });
-    }
-  };
-
   convertCloudInstance = (configurations: Configuration[]) => {
     const instances: CloudInstance[] = [];
     if (Array.isArray(configurations) && configurations.length > 0) {
@@ -405,7 +343,6 @@ class ApplicationInstanceList extends React.Component<Props, State> {
     }
     this.setState({ target: target, componentName: params.component }, () => {
       this.loadAppInstances();
-      this.loadApplicationEndpoints();
     });
   };
 
@@ -501,7 +438,7 @@ class ApplicationInstanceList extends React.Component<Props, State> {
 
   render() {
     const { applicationStatus, applicationDetail, components, userInfo } = this.props;
-    const { podList, loading, showStatus, cloudInstance, endpoints, deployLoading } = this.state;
+    const { podList, loading, showStatus, cloudInstance, deployLoading } = this.state;
     const columns = this.getColumns();
     const envbinding = this.getEnvbindingByName();
     const expandedRowRender = (record: PodBase) => {
@@ -533,11 +470,6 @@ class ApplicationInstanceList extends React.Component<Props, State> {
           components={components}
           envName={envName}
           appName={appName}
-          endpoints={endpoints}
-          updateEnvs={() => {
-            this.loadApplicationEnvbinding();
-            this.loadApplicationWorkflows();
-          }}
           applicationDetail={applicationDetail}
           applicationStatus={applicationStatus}
           updateQuery={(params: { target?: string; component?: string }) => {
diff --git a/packages/velaux-ui/src/pages/ApplicationStatus/index.tsx b/packages/velaux-ui/src/pages/ApplicationStatus/index.tsx
index 328b502d4..434fcf932 100644
--- a/packages/velaux-ui/src/pages/ApplicationStatus/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationStatus/index.tsx
@@ -5,11 +5,7 @@ import i18next from 'i18next';
 import React from 'react';
 
 import { deployApplication } from '../../api/application';
-import {
-  listApplicationResourceTree,
-  listApplicationServiceAppliedResources,
-  listApplicationServiceEndpoints,
-} from '../../api/observation';
+import { listApplicationResourceTree, listApplicationServiceAppliedResources } from '../../api/observation';
 import { If } from '../../components/If';
 import { Translation } from '../../components/Translation';
 import i18n from '../../i18n';
@@ -22,7 +18,7 @@ import type {
   ComponentStatus,
   ApplicationDeployResponse,
 } from '../../interface/application';
-import type { Endpoint, AppliedResource } from '../../interface/observation';
+import type { AppliedResource } from '../../interface/observation';
 import type { Target } from '../../interface/target';
 import type { LoginUserInfo } from '../../interface/user';
 import type { APIError } from '../../utils/errors';
@@ -53,7 +49,6 @@ type Props = {
 
 type State = {
   loading: boolean;
-  endpoints?: Endpoint[];
   target?: Target;
   componentName?: string;
   resources: AppliedResource[];
@@ -108,7 +103,6 @@ class ApplicationStatusPage extends React.Component<Props, State> {
         payload: { appName: appName, envName: envName },
         callback: (res: any) => {
           if (res.status) {
-            this.loadApplicationEndpoints();
             this.loadApplicationAppliedResources();
           }
         },
@@ -133,40 +127,6 @@ class ApplicationStatusPage extends React.Component<Props, State> {
     return envbinding.find((env) => env.name === envName);
   };
 
-  loadApplicationEndpoints = async () => {
-    const { applicationDetail } = this.props;
-    const {
-      params: { appName },
-    } = this.props.match;
-    const { target, componentName } = this.state;
-    const env = this.getEnvbindingByName();
-    if (applicationDetail && applicationDetail.name && env) {
-      const param = {
-        appName: env.appDeployName || appName,
-        appNs: env.appDeployNamespace,
-        componentName: componentName,
-        cluster: '',
-        clusterNs: '',
-      };
-      if (target) {
-        param.cluster = target.cluster?.clusterName || '';
-        param.clusterNs = target.cluster?.namespace || '';
-      }
-      this.setState({ endpointLoading: true });
-      listApplicationServiceEndpoints(param)
-        .then((re) => {
-          if (re && re.endpoints) {
-            this.setState({ endpoints: re.endpoints });
-          } else {
-            this.setState({ endpoints: [] });
-          }
-        })
-        .finally(() => {
-          this.setState({ endpointLoading: false });
-        });
-    }
-  };
-
   loadApplicationAppliedResources = async () => {
     const { mode } = this.state;
     if (mode === 'resource-graph') {
@@ -240,38 +200,6 @@ class ApplicationStatusPage extends React.Component<Props, State> {
     }
   };
 
-  loadApplicationWorkflows = async () => {
-    const {
-      params: { appName },
-    } = this.props.match;
-    this.props.dispatch({
-      type: 'application/getApplicationWorkflows',
-      payload: { appName: appName },
-    });
-  };
-
-  loadApplicationPolicies = async () => {
-    const {
-      params: { appName },
-    } = this.props.match;
-    this.props.dispatch({
-      type: 'application/getApplicationPolicies',
-      payload: { appName: appName },
-    });
-  };
-
-  loadApplicationEnvbinding = async () => {
-    const {
-      params: { appName },
-    } = this.props.match;
-    if (appName) {
-      this.props.dispatch({
-        type: 'application/getApplicationEnvbinding',
-        payload: { appName: appName },
-      });
-    }
-  };
-
   updateQuery = (params: { target?: string; component?: string }) => {
     const targets = this.getTargets()?.filter((item) => item.name == params.target);
     let target: Target | undefined = undefined;
@@ -279,7 +207,6 @@ class ApplicationStatusPage extends React.Component<Props, State> {
       target = targets[0];
     }
     this.setState({ target: target, componentName: params.component }, () => {
-      this.loadApplicationEndpoints();
       this.loadApplicationAppliedResources();
     });
   };
@@ -347,8 +274,7 @@ class ApplicationStatusPage extends React.Component<Props, State> {
     const {
       params: { appName, envName },
     } = this.props.match;
-    const { loading, endpointLoading, resourceLoading, endpoints, resources, componentName, deployLoading, mode } =
-      this.state;
+    const { loading, endpointLoading, resourceLoading, resources, componentName, deployLoading, mode } = this.state;
     let componentStatus = applicationStatus?.services;
     if (componentName) {
       componentStatus = componentStatus?.filter((item) => item.name == componentName);
@@ -386,15 +312,9 @@ class ApplicationStatusPage extends React.Component<Props, State> {
             envName={envName}
             appName={appName}
             disableStatusShow={true}
-            endpoints={endpoints}
             applicationDetail={applicationDetail}
             applicationStatus={applicationStatus}
             components={components}
-            updateEnvs={() => {
-              this.loadApplicationEnvbinding();
-              this.loadApplicationWorkflows();
-              this.loadApplicationPolicies();
-            }}
             updateQuery={(params: { target?: string; component?: string }) => {
               this.updateQuery(params);
             }}
diff --git a/packages/velaux-ui/src/pages/ApplicationWorkflowStatus/index.tsx b/packages/velaux-ui/src/pages/ApplicationWorkflowStatus/index.tsx
index b3a2b68db..6cc885dbb 100644
--- a/packages/velaux-ui/src/pages/ApplicationWorkflowStatus/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationWorkflowStatus/index.tsx
@@ -8,6 +8,7 @@ import Empty from '../../components/Empty';
 import { If } from '../../components/If';
 import Permission from '../../components/Permission';
 import { Translation } from '../../components/Translation';
+import Header from '../ApplicationInstanceList/components/Header';
 import i18n from '../../i18n';
 import type {
   ApplicationDetail,
@@ -135,7 +136,7 @@ class ApplicationWorkflow extends React.Component<Props, State> {
   runApplicationWorkflow = () => {};
 
   render() {
-    const { applicationDetail, dispatch } = this.props;
+    const { applicationDetail, dispatch, applicationStatus } = this.props;
     const {
       params: { record, appName, envName },
     } = this.props.match;
@@ -173,6 +174,18 @@ class ApplicationWorkflow extends React.Component<Props, State> {
     }
     return (
       <div className="run-layout">
+        <Header
+          envbinding={this.getEnvbindingByName()}
+          envName={envName}
+          appName={appName}
+          disableStatusShow={true}
+          applicationDetail={applicationDetail}
+          applicationStatus={applicationStatus}
+          refresh={() => {
+            this.loadApplicationStatus();
+          }}
+          dispatch={this.props.dispatch}
+        />
         <Card contentHeight={'auto'}>
           <Row>
             <Col span={6}>