diff --git a/package.json b/package.json
index ab11a54e8..87e570a23 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,8 @@
     "@subql/contract-sdk": "^0.100.3",
     "@subql/network-clients": "^0.100.0",
     "@subql/network-config": "^0.100.0",
-    "@subql/network-query": "0.100.2",
-    "@subql/react-hooks": "0.100.3-0",
+    "@subql/network-query": "0.100.3-0",
+    "@subql/react-hooks": "0.100.3-1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
diff --git a/src/pages/consumer/MyFlexPlans/MyFlexPlanTable.tsx b/src/pages/consumer/MyFlexPlans/MyFlexPlanTable.tsx
index 62ff2aeeb..a647f6b95 100644
--- a/src/pages/consumer/MyFlexPlans/MyFlexPlanTable.tsx
+++ b/src/pages/consumer/MyFlexPlans/MyFlexPlanTable.tsx
@@ -4,14 +4,15 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router';
-import { TableTitle } from '@subql/components';
+import { useRouteQuery } from '@hooks';
+import { TableTitle, Typography } from '@subql/components';
 import { StateChannelFieldsFragment as ConsumerFlexPlan } from '@subql/network-query';
 import { ChannelStatus } from '@subql/network-query';
-import { useGetConsumerClosedFlexPlansLazyQuery, useGetConsumerOngoingFlexPlansLazyQuery } from '@subql/react-hooks';
-import { TableProps, Tag, Typography } from 'antd';
+import { useGetConsumerFlexPlansByDeploymentIdLazyQuery } from '@subql/react-hooks';
+import { TableProps, Tag } from 'antd';
+import dayjs from 'dayjs';
 import { BigNumber } from 'ethers';
 import i18next from 'i18next';
-import moment from 'moment';
 
 import { AntDTable, DeploymentMeta, EmptyList, Spinner, TableText } from '../../../components';
 import { ConnectedIndexer } from '../../../components/IndexerDetails/IndexerName';
@@ -23,18 +24,22 @@ import { OngoingFlexPlanActions } from './OngoingFlexPlanActions';
 
 const { ONGOING_PLANS_NAV, CLOSED_PLANS_NAV } = ROUTES;
 
-interface MyFlexPlanTableProps {
-  queryFn: typeof useGetConsumerOngoingFlexPlansLazyQuery | typeof useGetConsumerClosedFlexPlansLazyQuery;
-}
-
-export const MyFlexPlanTable: React.FC<MyFlexPlanTableProps> = ({ queryFn }) => {
+export const MyFlexPlanTable: React.FC = () => {
   const { account } = useWeb3();
   const { pathname } = useLocation();
+  const query = useRouteQuery();
   const navigate = useNavigate();
   const { t } = useTranslation();
-  const [now] = React.useState<Date>(moment().toDate());
-  const sortedParams = { consumer: account ?? '', now, offset: 0 };
-  const [loadFlexPlan, flexPlans] = queryFn({ variables: sortedParams, fetchPolicy: 'no-cache' });
+  const sortedParams = {
+    consumer: account ?? '',
+    now: dayjs('1970-1-1').toDate(),
+    offset: 0,
+    deploymentId: query.get('deploymentId') || '',
+  };
+  const [loadFlexPlan, flexPlans] = useGetConsumerFlexPlansByDeploymentIdLazyQuery({
+    variables: sortedParams,
+    fetchPolicy: 'no-cache',
+  });
 
   const fetchMoreFlexPlans = () => {
     loadFlexPlan();
@@ -76,11 +81,7 @@ export const MyFlexPlanTable: React.FC<MyFlexPlanTableProps> = ({ queryFn }) =>
       {
         dataIndex: 'expiredAt',
         width: 30,
-        title: (
-          <TableTitle
-            title={i18next.t(path === ONGOING_PLANS_NAV ? 'flexPlans.validityPeriod' : 'flexPlans.duration')}
-          />
-        ),
+        title: <TableTitle title={i18next.t('flexPlans.validityPeriod')} />,
         render: (expiredAt) => {
           return <TableText content={formatDate(expiredAt)} />;
         },
@@ -148,11 +149,21 @@ export const MyFlexPlanTable: React.FC<MyFlexPlanTableProps> = ({ queryFn }) =>
         }, flexPlans),
         {
           loading: () => <Spinner />,
-          error: (e) => <Typography.Text type="danger">{`Failed to load flex plans: ${e}`}</Typography.Text>,
+          error: (e) => <Typography type="danger">{`Failed to load flex plans: ${e}`}</Typography>,
           empty: () => <EmptyList title={t('flexPlans.non')} description={t('myFlexPlans.description')} />,
           data: (flexPlanList) => {
             return (
-              <div>
+              <div
+                style={{
+                  borderRadius: 8,
+                  border: '1px solid var(--Card-boder, rgba(223, 227, 232, 0.60))',
+                  background: '#fff',
+                  padding: 24,
+                }}
+              >
+                <Typography variant="large" style={{ marginBottom: 22 }}>
+                  {query.get('projectName')}
+                </Typography>
                 <AntDTable
                   tableProps={{
                     columns: getColumns(
diff --git a/src/pages/consumer/MyFlexPlans/MyFlexPlans.tsx b/src/pages/consumer/MyFlexPlans/MyFlexPlans.tsx
index ee346eeb2..5d068bd8a 100644
--- a/src/pages/consumer/MyFlexPlans/MyFlexPlans.tsx
+++ b/src/pages/consumer/MyFlexPlans/MyFlexPlans.tsx
@@ -3,11 +3,11 @@
 
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Navigate, Route, Routes, useMatch, useNavigate, useParams } from 'react-router';
+import { Navigate, Route, Routes, useMatch, useNavigate } from 'react-router';
 import { useRouteQuery } from '@hooks';
 import { useIsLogin } from '@hooks/useIsLogin';
 import { Typography } from '@subql/components';
-import { useGetConsumerClosedFlexPlansLazyQuery, useGetConsumerOngoingFlexPlansLazyQuery } from '@subql/react-hooks';
+import { useGetConsumerFlexPlansByDeploymentIdLazyQuery } from '@subql/react-hooks';
 import { Breadcrumb } from 'antd';
 import i18next from 'i18next';
 
@@ -96,23 +96,6 @@ const Header = () => {
               },
             ]}
           ></Breadcrumb>
-          <TabButtons
-            tabs={[
-              {
-                label: i18next.t('myFlexPlans.ongoing'),
-                link: `ongoing/details/${query.get('id')}/ongoing?id=${query.get('id')}&deploymentId=${query.get(
-                  'deploymentId',
-                )}`,
-              },
-              {
-                label: i18next.t('myFlexPlans.closed'),
-                link: `ongoing/details/${query.get('id')}/closed?id=${query.get('id')}&deploymentId=${query.get(
-                  'deploymentId',
-                )}`,
-              },
-            ]}
-            whiteTab
-          />
         </div>
       )}
     </>
@@ -128,14 +111,7 @@ export const MyFlexPlans: React.FC = () => {
         element={
           <Routes>
             <Route path={ONGOING_PLANS} element={<MyHostedPlan></MyHostedPlan>} />
-            <Route
-              path={`${ONGOING_PLANS}/details/:id/ongoing`}
-              element={<MyFlexPlanTable queryFn={useGetConsumerOngoingFlexPlansLazyQuery} />}
-            ></Route>
-            <Route
-              path={`${ONGOING_PLANS}/details/:id/closed`}
-              element={<MyFlexPlanTable queryFn={useGetConsumerClosedFlexPlansLazyQuery} />}
-            ></Route>
+            <Route path={`${ONGOING_PLANS}/details/:id`} element={<MyFlexPlanTable />}></Route>
             <Route path={API_KEY} element={<ApiKeys />} />
             <Route path={'/'} element={<Navigate replace to={ONGOING_PLANS} />} />
           </Routes>
diff --git a/src/pages/consumer/MyFlexPlans/MyHostedPlan/MyHostedPlan.tsx b/src/pages/consumer/MyFlexPlans/MyHostedPlan/MyHostedPlan.tsx
index 3f4cadd9c..6385a047b 100644
--- a/src/pages/consumer/MyFlexPlans/MyHostedPlan/MyHostedPlan.tsx
+++ b/src/pages/consumer/MyFlexPlans/MyHostedPlan/MyHostedPlan.tsx
@@ -122,7 +122,7 @@ const MyHostedPlan: FC = (props) => {
                     style={{ color: 'var(--sq-blue600)', padding: '6px 10px' }}
                     onClick={() => {
                       navigate(
-                        `/consumer/flex-plans/ongoing/details/${record.id}/ongoing?id=${record.id}&projectName=${record.projectName}&deploymentId=${record.deployment.deployment}`,
+                        `/consumer/flex-plans/ongoing/details/${record.id}?id=${record.id}&projectName=${record.projectName}&deploymentId=${record.deployment.deployment}`,
                       );
                     }}
                   >
diff --git a/yarn.lock b/yarn.lock
index a97cf26f9..b539b0074 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4669,10 +4669,10 @@
   dependencies:
     graphql "^16.5.0"
 
-"@subql/network-query@0.100.2":
-  version "0.100.2"
-  resolved "https://registry.npmjs.org/@subql/network-query/-/network-query-0.100.2.tgz#5f44100dd144c4139291b8258a1d4110d39f896f"
-  integrity sha512-QEDs0HZj+ChADhKzaoIbx3VKQlGr9PPuu3ErRkCGcMrtFIFO9/N0CdR7loDmUCf9xHB0Y5goFLenSCYNWZTrTQ==
+"@subql/network-query@0.100.3-0":
+  version "0.100.3-0"
+  resolved "https://registry.npmjs.org/@subql/network-query/-/network-query-0.100.3-0.tgz#46fa62091c815a383a3e276b6f8e6ee0c32a22d1"
+  integrity sha512-VJBjlcXAece8xjK/7Ii8cEuBvmgXyf3h2bLVtrX6vDuM5+cddn4xpl3pY9tLA330G5/mkQd2GmP+A9lHO7RkDA==
   dependencies:
     graphql "^16.5.0"
 
@@ -4687,15 +4687,15 @@
     jwt-decode "^3.1.2"
     lru-cache "^10.0.1"
 
-"@subql/react-hooks@0.100.3-0":
-  version "0.100.3-0"
-  resolved "https://registry.npmjs.org/@subql/react-hooks/-/react-hooks-0.100.3-0.tgz#c399ae23e54470abeb91d0841190fed5fdcc767a"
-  integrity sha512-lvpoz1CURkf/iaqXaXc5SvYUB55ncUQq5crsnngvJXC9gCdsYt6gn69ZqPYC3TolWMsQhdJ+hygw36bpxd1akA==
+"@subql/react-hooks@0.100.3-1":
+  version "0.100.3-1"
+  resolved "https://registry.npmjs.org/@subql/react-hooks/-/react-hooks-0.100.3-1.tgz#2fb270747568b6f7d0ab8b75b6a114b8984ee2f9"
+  integrity sha512-HdYx+rNDu8qyzF6gn38w0hbtZvQ2Rupbcnem5jA8/lbgxVF05k0K6nAsBOdNUvxybp7YijPJQqxUAZ2nw0NWZg==
   dependencies:
     "@graphql-tools/code-file-loader" "^7.3.6"
     "@graphql-tools/graphql-tag-pluck" "^7.3.6"
     "@graphql-tools/load" "^7.7.7"
-    "@subql/network-query" "0.100.2"
+    "@subql/network-query" "0.100.3-0"
     ahooks "^3.7.8"
     bignumber.js "^9.1.2"
     class-transformer "^0.5.1"