diff --git a/wax-prosemirror-services/src/AiService/AiToolGroupService/AiToolGroupService.js b/wax-prosemirror-services/src/AiService/AiToolGroupService/AiToolGroupService.js
index 3a89788d16f7f348a91ed1c16f018f15284a5c5e..2b12f947a88a88af8bdcc354ae1b4b11a1cbae6a 100644
--- a/wax-prosemirror-services/src/AiService/AiToolGroupService/AiToolGroupService.js
+++ b/wax-prosemirror-services/src/AiService/AiToolGroupService/AiToolGroupService.js
@@ -1,9 +1,9 @@
 import { Service } from 'wax-prosemirror-core';
-import ToggleAiTool from './ToggleAiTool';
+import ToggleAi from './ToggleAi';
 
 class AiToolGroupService extends Service {
   register() {
-    this.container.bind('ToggleAiTool').to(ToggleAiTool);
+    this.container.bind('ToggleAi').to(ToggleAi);
   }
 }
 
diff --git a/wax-prosemirror-services/src/AiService/AiToolGroupService/ToggleAiTool.js b/wax-prosemirror-services/src/AiService/AiToolGroupService/ToggleAi.js
similarity index 50%
rename from wax-prosemirror-services/src/AiService/AiToolGroupService/ToggleAiTool.js
rename to wax-prosemirror-services/src/AiService/AiToolGroupService/ToggleAi.js
index 418346c2d16802eec33cef5c16724d91cfa8f0ad..f6892f2ec998300141c73ed3642dd3c8754e626f 100644
--- a/wax-prosemirror-services/src/AiService/AiToolGroupService/ToggleAiTool.js
+++ b/wax-prosemirror-services/src/AiService/AiToolGroupService/ToggleAi.js
@@ -2,13 +2,13 @@ import { injectable, inject } from 'inversify';
 import { ToolGroup } from 'wax-prosemirror-core';
 
 @injectable()
-class ToggleAiTool extends ToolGroup {
+class ToggleAi extends ToolGroup {
   tools = [];
 
-  constructor() {
+  constructor(@inject('ToggleAiTool') toggleAiTool) {
     super();
-    this.tools = [];
+    this.tools = [toggleAiTool];
   }
 }
 
-export default ToggleAiTool;
+export default ToggleAi;
diff --git a/wax-prosemirror-services/src/AiService/AskAiContentService.js b/wax-prosemirror-services/src/AiService/AskAiContentService.js
index 0fc32436e74f591e4a8b675f5c0a2a6ab4832378..6f79d22a051222af24397aeb5bf24be297995f73 100644
--- a/wax-prosemirror-services/src/AiService/AskAiContentService.js
+++ b/wax-prosemirror-services/src/AiService/AskAiContentService.js
@@ -2,6 +2,7 @@ import { Service } from 'wax-prosemirror-core';
 import AskAIOverlay from './components/AskAIOverlay';
 import AskAiSelectionPlugin from './plugins/AskAiSelectionPlugin';
 import AiToolGroupService from './AiToolGroupService/AiToolGroupService';
+import ToggleAiTool from './ToggleAiTool';
 import './AskAiContent.css';
 
 class AskAiContentService extends Service {
@@ -29,6 +30,10 @@ class AskAiContentService extends Service {
     );
   }
 
+  register() {
+    this.container.bind('ToggleAiTool').to(ToggleAiTool);
+  }
+
   dependencies = [new AiToolGroupService()];
 }
 
diff --git a/wax-prosemirror-services/src/AiService/ToggleAiTool.js b/wax-prosemirror-services/src/AiService/ToggleAiTool.js
new file mode 100644
index 0000000000000000000000000000000000000000..f9161efc13faad72c950d5fc9775feaae39591d7
--- /dev/null
+++ b/wax-prosemirror-services/src/AiService/ToggleAiTool.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { Tools } from 'wax-prosemirror-core';
+import ToggleAiComponent from './components/ToggleAiComponent';
+
+class ToggleAiTool extends Tools {
+  title = 'Toggle Ai';
+  icon = '';
+  name = 'ToggleAi';
+
+  renderTool(view) {
+    return (
+      <ToggleAiComponent item={this.toJSON()} key={uuidv4()} view={view} />
+    );
+  }
+}
+
+export default ToggleAiTool;
diff --git a/wax-prosemirror-services/src/AiService/components/ToggleAiComponent.js b/wax-prosemirror-services/src/AiService/components/ToggleAiComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..c5676acd3205066b66f3c8966c4b3a655061128c
--- /dev/null
+++ b/wax-prosemirror-services/src/AiService/components/ToggleAiComponent.js
@@ -0,0 +1,23 @@
+import React, { useMemo, useState, useContext } from 'react';
+import styled from 'styled-components';
+import { WaxContext } from 'wax-prosemirror-core';
+
+const ToggleAiComponent = ({ item }) => {
+  const { icon, title } = item;
+  const [isOpen, setIsOpen] = useState(false);
+
+  const {
+    pmViews: { main },
+  } = useContext(WaxContext);
+
+  let isDisabled = false;
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+
+  if (!isEditable) isDisabled = true;
+
+  return useMemo(() => <span> Toggle Ai</span>, [isOpen, isDisabled]);
+};
+
+export default ToggleAiComponent;