diff --git a/web/src/pages/ApiServices/View/index.tsx b/web/src/pages/ApiServices/View/index.tsx
index cd03155..b908351 100644
--- a/web/src/pages/ApiServices/View/index.tsx
+++ b/web/src/pages/ApiServices/View/index.tsx
@@ -2,7 +2,7 @@ import Breadcrumbs from "@/components/ui/breadcrumbs";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useAdmin } from "@/store/admin";
-import { useEffect, type FC } from "react";
+import { useCallback, useEffect, type FC } from "react";
 import { Link, useParams } from "react-router";
 
 const InfoCard = ({
@@ -29,6 +29,9 @@ const ViewApiServicePage: FC = () => {
 
   const loadService = useAdmin((state) => state.fetchApiService);
 
+  const toggling = useAdmin((state) => state.togglingApiService);
+  const toggle = useAdmin((state) => state.toggleApiService);
+
   useEffect(() => {
     if (typeof serviceId === "string") loadService(serviceId);
   }, [loadService, serviceId]);
@@ -181,7 +184,8 @@ const ViewApiServicePage: FC = () => {
                   ? "text-red-400 hover:text-red-500"
                   : "text-green-400 hover:text-green-500"
               }
-              onClick={() => {}}
+              onClick={toggle}
+              loading={toggling}
             >
               {apiService.is_active ? "Disable" : "Enable"}
             </Button>