diff --git a/wax-prosemirror-services/src/AiService/components/ToggleAiComponent.js b/wax-prosemirror-services/src/AiService/components/ToggleAiComponent.js
index 066175e57b2da8ec5e2b9971735cd1b9491c0ddc..9e6ca37edd5489b2477a0965003dc2aa1a57bd4a 100644
--- a/wax-prosemirror-services/src/AiService/components/ToggleAiComponent.js
+++ b/wax-prosemirror-services/src/AiService/components/ToggleAiComponent.js
@@ -6,9 +6,12 @@ const ToggleAiComponent = ({ item }) => {
   const [checked, setChecked] = useState(false);
   const context = useContext(WaxContext);
   const {
+    app,
     pmViews: { main },
   } = context;
 
+  const enableService = app.config.get('config.AskAiContentService');
+
   let isDisabled = false;
   const isEditable = main.props.editable(editable => {
     return editable;
@@ -24,16 +27,17 @@ const ToggleAiComponent = ({ item }) => {
   };
 
   return useMemo(
-    () => (
-      <MenuButton
-        active={checked}
-        disabled={!isEditable}
-        iconName={item.icon}
-        onMouseDown={onMouseDown}
-        title={item.title}
-      />
-    ),
-    [checked, isDisabled],
+    () =>
+      enableService.AiOn ? (
+        <MenuButton
+          active={checked}
+          disabled={!isEditable}
+          iconName={item.icon}
+          onMouseDown={onMouseDown}
+          title={item.title}
+        />
+      ) : null,
+    [checked, isDisabled, enableService.AiOn],
   );
 };