diff --git a/kraken-app/kraken-app-portal/src/hooks/product/index.ts b/kraken-app/kraken-app-portal/src/hooks/product/index.ts
index 6ae19e8a7..fb4e769fd 100644
--- a/kraken-app/kraken-app-portal/src/hooks/product/index.ts
+++ b/kraken-app/kraken-app-portal/src/hooks/product/index.ts
@@ -46,7 +46,7 @@ import {
   getValidateServerName,
   editContactInformation,
   getProductTypes,
-  rotateApiKey,
+  rotateApiKey, disableApiUseCase, getAPIUscCaseChangeHistory,
 } from "@/services/products";
 import { STALE_TIME } from "@/utils/constants/common";
 import {
@@ -71,7 +71,7 @@ import {
 import {
   IActivityDetail,
   IActivityLog,
-  IApiKeyDetail,
+  IApiKeyDetail, IApiUseCaseChangeHistory,
   IDataPlaneDetail,
   IEnv,
   IMapperDetails,
@@ -146,6 +146,8 @@ export const PRODUCT_CACHE_KEYS = {
   verify_product: "verify_product",
   edit_contact_information: "edit_contact_information",
   get_product_type_list: "get_product_type_list",
+  disable_api_use_case: "disable_api_use_case",
+  get_api_use_case_change_history: "get_api_use_case_change_history",
 };
 
 export const useCreateNewComponent = () => {
@@ -616,6 +618,34 @@ export const useGetRunningAPIList = (
   });
 };
 
+export const useDisableApiUseCase = (
+    productId: string,
+    params: Record<string, any>
+) => {
+  return useMutation<any, Error>({
+    mutationKey: [PRODUCT_CACHE_KEYS.disable_api_use_case],
+    mutationFn: ({ productId, mapperKey, envName, checked, version}: any) =>
+        disableApiUseCase(productId, mapperKey, envName, version, checked),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [PRODUCT_CACHE_KEYS.get_running_api_list],
+      });
+    },
+  });
+};
+
+export const useGetApiUseCaseChangeHistory = (
+    productId: string,
+    params: Record<string, any>
+) => {
+  return useQuery<any, Error, IApiUseCaseChangeHistory[]>({
+    queryKey: [PRODUCT_CACHE_KEYS.get_api_use_case_change_history, productId, params],
+    queryFn: () => getAPIUscCaseChangeHistory(productId, params),
+    enabled: Boolean(productId) && Boolean(params.mapperKey),
+    select: (data) => data?.data,
+  });
+};
+
 export const useGetAPIDeployments = (
   productId: string,
   params: Record<string, any>
diff --git a/kraken-app/kraken-app-portal/src/pages/EnvironmentOverview/components/RunningAPIMapping/index.tsx b/kraken-app/kraken-app-portal/src/pages/EnvironmentOverview/components/RunningAPIMapping/index.tsx
index 93ed7fe6d..aed9a56fe 100644
--- a/kraken-app/kraken-app-portal/src/pages/EnvironmentOverview/components/RunningAPIMapping/index.tsx
+++ b/kraken-app/kraken-app-portal/src/pages/EnvironmentOverview/components/RunningAPIMapping/index.tsx
@@ -1,13 +1,14 @@
 import { ApiCard } from "@/components/ApiMapping";
 import { Text } from "@/components/Text";
-import { useGetRunningAPIList } from "@/hooks/product";
+import {useDisableApiUseCase, useGetRunningAPIList} from "@/hooks/product";
 import { useAppStore } from "@/stores/app.store";
 import { IEnv, IRunningMapping } from "@/utils/types/env.type";
-import { Flex, Table, Tag, Typography } from "antd";
+import {Badge, Flex, Switch, Table, Tag, Typography} from "antd";
 import { useMemo } from "react";
 import { ColumnsType } from "antd/es/table";
 import { toDateTime } from "@/libs/dayjs";
 import styles from './index.module.scss'
+import {ClockCircleOutlined, HistoryOutlined} from "@ant-design/icons";
 
 type Props = {
   scrollHeight: number;
@@ -24,6 +25,15 @@ const RunningAPIMapping = ({ scrollHeight, env }: Props) => {
     direction: "DESC",
   });
 
+  const onStatusChange = (checked, item: GroupedMapping) => {
+    useDisableApiUseCase(currentProduct, {
+      mapperKey: item.targetMapperKey,
+      envName: env?.name,
+      checked,
+      version: item.version,
+    });
+  }
+
   const mappings = useMemo(() => {
     if (!data) return []
 
@@ -87,6 +97,20 @@ const RunningAPIMapping = ({ scrollHeight, env }: Props) => {
         </Flex>
       ),
     },
+    {
+      title: "Status",
+      width: 120,
+      render: (item: GroupedMapping) => (
+          <Switch defaultChecked={env?.name === 'stage'?item.stageAvailable:item.prodAvailable} onChange={(checked) => {onStatusChange(checked, item)}} />
+      ),
+    },
+    {
+      title: "History",
+      width: 90,
+      render: (item: GroupedMapping) => (
+          <button icon={<HistoryOutlined />} onClick={}></button>
+      ),
+    },
   ];
 
   return (
diff --git a/kraken-app/kraken-app-portal/src/services/products.ts b/kraken-app/kraken-app-portal/src/services/products.ts
index 7aaf2945d..2d8660081 100644
--- a/kraken-app/kraken-app-portal/src/services/products.ts
+++ b/kraken-app/kraken-app-portal/src/services/products.ts
@@ -257,6 +257,35 @@ export const getRunningAPIMappingList = (
   });
 };
 
+export const disableApiUseCase = (
+    productId: string,
+    mapperKey: string,
+    envName: string,
+    version: string,
+    checked: boolean,
+) => {
+  return request(`/products/${productId}/components/disableTargetMapper`, {
+    method: "PATCH",
+    data: {
+      mapperKey,
+      envName,
+      version,
+      disable: !checked
+    }
+  });
+};
+
+export const getAPIUscCaseChangeHistory = (
+    productId: string,
+    params
+) => {
+  return request(`/v3${PRODUCT}/${productId}/components/apiAvailability/change-history`, {
+    method: "GET",
+    params,
+  });
+};
+
+
 export const getAPIMapperDeployments = (
   productId: string,
   params: Record<string, any>
diff --git a/kraken-app/kraken-app-portal/src/utils/types/env.type.ts b/kraken-app/kraken-app-portal/src/utils/types/env.type.ts
index 0a56d7a3e..76d27ab0e 100644
--- a/kraken-app/kraken-app-portal/src/utils/types/env.type.ts
+++ b/kraken-app/kraken-app-portal/src/utils/types/env.type.ts
@@ -92,6 +92,17 @@ export interface IRunningMapping {
   version: string;
   status: string;
   mappingStatus: string;
+  stageAvailable?: boolean;
+  prodAvailable?: boolean;
+}
+
+export interface IApiUseCaseChangeHistory {
+  mapperKey: string;
+  updatedAt: string;
+  updatedBy: string;
+  available: boolean;
+  version: string;
+  env: string;
 }
 
 export interface IRunningComponentItem {
diff --git a/kraken-java-sdk/kraken-java-sdk-controller/src/main/java/com/consoleconnect/kraken/operator/controller/service/ProductDeploymentService.java b/kraken-java-sdk/kraken-java-sdk-controller/src/main/java/com/consoleconnect/kraken/operator/controller/service/ProductDeploymentService.java
index 2b7e51289..7e2720e37 100644
--- a/kraken-java-sdk/kraken-java-sdk-controller/src/main/java/com/consoleconnect/kraken/operator/controller/service/ProductDeploymentService.java
+++ b/kraken-java-sdk/kraken-java-sdk-controller/src/main/java/com/consoleconnect/kraken/operator/controller/service/ProductDeploymentService.java
@@ -708,8 +708,8 @@ private void fillAvailabilityState(List<ApiMapperDeploymentDTO> result) {
       result.stream()
           .forEach(
               dto -> {
-                dto.setStageAvailable(stageDisableApiList.contains(dto.getTargetMapperKey()));
-                dto.setProdAvailable(prodDisableApiList.contains(dto.getTargetMapperKey()));
+                dto.setStageAvailable(!stageDisableApiList.contains(dto.getTargetMapperKey()));
+                dto.setProdAvailable(!prodDisableApiList.contains(dto.getTargetMapperKey()));
               });
     }
   }