diff --git a/editors/demo/src/HHMI/config/config.js b/editors/demo/src/HHMI/config/config.js
index 02915ac7cf73ce9a4eac4624f9823b83c5e935bf..996b71a37fdc3b1fe5ec37f66d7d9a2d8d2c4ea7 100644
--- a/editors/demo/src/HHMI/config/config.js
+++ b/editors/demo/src/HHMI/config/config.js
@@ -55,6 +55,10 @@ export default {
         'FullScreen',
       ],
     },
+    {
+      templateArea: 'fillTheGap',
+      toolGroups: ['FillTheGap'],
+    },
   ],
 
   SchemaService: DefaultSchema,
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/CreateGapService/CreateGap.js b/wax-prosemirror-services/src/FillTheGapQuestionService/CreateGapService/CreateGap.js
index 156bc209cebfe738d7985ed9a5379b5b44f46fd3..1d69d4c54dd64a118e85dd5b7c0e0b9462c53901 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/CreateGapService/CreateGap.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/CreateGapService/CreateGap.js
@@ -27,19 +27,10 @@ class CreateGap extends Tools {
   }
 
   select = (state, activeViewId, activeView) => {
-    let status = false;
-    const { from, to } = state.selection;
-    const { disallowedTools } = activeView.props;
+    if (activeView.props.type && activeView.props.type === 'filltheGapContaier')
+      return true;
 
-    state.doc.nodesBetween(from, to, (node, pos) => {
-      if (node.type.name === 'fill_the_gap_container') {
-        status = true;
-      }
-    });
-
-    if (from === null || disallowedTools.includes('Gap')) status = false;
-
-    return status;
+    return false;
   };
 
   get active() {
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/CreateGapService/CreateGapService.js b/wax-prosemirror-services/src/FillTheGapQuestionService/CreateGapService/CreateGapService.js
index 36fb3875ac912ceb293ceae0ea823b6048475318..d7cfe9046c9e0c2202551b54975c7ba7f622bf73 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/CreateGapService/CreateGapService.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/CreateGapService/CreateGapService.js
@@ -1,10 +1,13 @@
 import { Service } from 'wax-prosemirror-core';
 import CreateGap from './CreateGap';
+import FillTheGapToolGroupService from '../../WaxToolGroups/FillTheGapToolGroupService/FillTheGapToolGroupService';
 
 class FillTheGapQuestionService extends Service {
   register() {
     this.container.bind('CreateGap').to(CreateGap);
   }
+
+  dependencies = [new FillTheGapToolGroupService()];
 }
 
 export default FillTheGapQuestionService;
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/ContainerEditor.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/ContainerEditor.js
index 3a1d20673b3e6c7cfbcc698222d6df63d340e407..cd423adee99f8b2bf02379edbe19f688d7df1bb8 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/components/ContainerEditor.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/components/ContainerEditor.js
@@ -87,6 +87,7 @@ const ContainerEditor = ({ node, view, getPos }) => {
           'FillTheGap',
           'MultipleChoice',
         ],
+        type: 'filltheGapContaier',
         handleDOMEvents: {
           mousedown: () => {
             main.dispatch(
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
index a1b2defc132317a0375601102670140107e5a358..79b90694b5e27009acfdade5f739f95a8824601f 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React, { useContext } from 'react';
-import { WaxContext } from 'wax-prosemirror-core';
+import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
 import styled from 'styled-components';
 import ContainerEditor from './ContainerEditor';
 import FeedbackComponent from './FeedbackComponent';
@@ -10,6 +10,10 @@ const FillTheGapContainer = styled.div`
   margin-bottom: 30px;
 `;
 
+const FillTheGapContainerTool = styled.div`
+  background: #f5f5f7;
+`;
+
 const FillTheGapWrapper = styled.div`
   margin: 0px 38px 15px 38px;
   margin-top: 10px;
@@ -21,6 +25,8 @@ export default ({ node, view, getPos }) => {
     pmViews: { main },
   } = context;
 
+  const FillTheGapTool = ComponentPlugin('fillTheGap');
+
   const customProps = main.props.customValues;
   const { testMode } = customProps;
 
@@ -32,7 +38,12 @@ export default ({ node, view, getPos }) => {
 
   return (
     <FillTheGapWrapper>
-      <span>Fill The Gap</span>
+      <div>
+        <span> Fill The Gap</span>
+        <FillTheGapContainerTool>
+          <FillTheGapTool />
+        </FillTheGapContainerTool>
+      </div>
       <FillTheGapContainer className="fill-the-gap">
         <ContainerEditor getPos={getPos} node={node} view={view} />
 
diff --git a/wax-prosemirror-services/src/WaxToolGroups/FillTheGapToolGroupService/FillTheGap.js b/wax-prosemirror-services/src/WaxToolGroups/FillTheGapToolGroupService/FillTheGap.js
new file mode 100644
index 0000000000000000000000000000000000000000..3f3c294e21b697a9496f8cccd48d8fd7e4e16454
--- /dev/null
+++ b/wax-prosemirror-services/src/WaxToolGroups/FillTheGapToolGroupService/FillTheGap.js
@@ -0,0 +1,13 @@
+import { injectable, inject } from 'inversify';
+import { ToolGroup } from 'wax-prosemirror-core';
+
+@injectable()
+class FillTheGap extends ToolGroup {
+  tools = [];
+  constructor(@inject('CreateGap') CreateGap) {
+    super();
+    this.tools = [CreateGap];
+  }
+}
+
+export default FillTheGap;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/FillTheGapToolGroupService/FillTheGapToolGroupService.js b/wax-prosemirror-services/src/WaxToolGroups/FillTheGapToolGroupService/FillTheGapToolGroupService.js
new file mode 100644
index 0000000000000000000000000000000000000000..7e8fcabea47ece4a8c897a01d493cca690c687b4
--- /dev/null
+++ b/wax-prosemirror-services/src/WaxToolGroups/FillTheGapToolGroupService/FillTheGapToolGroupService.js
@@ -0,0 +1,10 @@
+import { Service } from 'wax-prosemirror-core';
+import FillTheGap from './FillTheGap';
+
+class FillTheGapToolGroupService extends Service {
+  register() {
+    this.container.bind('FillTheGap').to(FillTheGap);
+  }
+}
+
+export default FillTheGapToolGroupService;