diff --git a/editors/demo/src/HHMI/FillTheGapQuestionService/CreateGapService/CreateGap.js b/editors/demo/src/HHMI/FillTheGapQuestionService/CreateGapService/CreateGap.js
new file mode 100644
index 0000000000000000000000000000000000000000..35d40e082da72d5aaf32b31eec05be70e4b250b1
--- /dev/null
+++ b/editors/demo/src/HHMI/FillTheGapQuestionService/CreateGapService/CreateGap.js
@@ -0,0 +1,25 @@
+import { injectable } from 'inversify';
+import { Tools } from 'wax-prosemirror-services';
+
+@injectable()
+class CreateGap extends Tools {
+  title = 'Create Gap Option';
+  label = 'Create Gap';
+  name = 'Create Gap';
+
+  get run() {
+    return (state, dispatch) => {};
+  }
+
+  get active() {
+    return state => {};
+  }
+
+  select = (state, activeViewId) => {};
+
+  get enable() {
+    return state => {};
+  }
+}
+
+export default CreateGap;
diff --git a/editors/demo/src/HHMI/FillTheGapQuestionService/CreateGapService/CreateGapService.js b/editors/demo/src/HHMI/FillTheGapQuestionService/CreateGapService/CreateGapService.js
new file mode 100644
index 0000000000000000000000000000000000000000..02083ffd0698b8a6c44f02b656e3f8c8cadd67f2
--- /dev/null
+++ b/editors/demo/src/HHMI/FillTheGapQuestionService/CreateGapService/CreateGapService.js
@@ -0,0 +1,10 @@
+import { Service } from 'wax-prosemirror-services';
+import CreateGap from './CreateGap';
+
+class FillTheGapQuestionService extends Service {
+  register() {
+    this.container.bind('CreateGap').to(CreateGap);
+  }
+}
+
+export default FillTheGapQuestionService;
diff --git a/editors/demo/src/HHMI/FillTheGapQuestionService/FillTheGapQuestion.js b/editors/demo/src/HHMI/FillTheGapQuestionService/FillTheGapQuestion.js
index 18449bebd93dc5aac9003df611e24515b068ac31..d8be5076e1f955cfae4d97f540bfe851ef3fc1cb 100644
--- a/editors/demo/src/HHMI/FillTheGapQuestionService/FillTheGapQuestion.js
+++ b/editors/demo/src/HHMI/FillTheGapQuestionService/FillTheGapQuestion.js
@@ -1,7 +1,7 @@
 import { injectable } from 'inversify';
 import { wrapIn } from 'prosemirror-commands';
-
 import { Tools } from 'wax-prosemirror-services';
+
 @injectable()
 class FillTheGapQuestion extends Tools {
   title = 'Add Fill The Gap Question';
diff --git a/editors/demo/src/HHMI/FillTheGapQuestionService/FillTheGapQuestionService.js b/editors/demo/src/HHMI/FillTheGapQuestionService/FillTheGapQuestionService.js
index 49d73887d296fb85e497384187fc44ebf5b0e6c6..60612d55d7c49a2c8d2c447e350fb30ca962fe4e 100644
--- a/editors/demo/src/HHMI/FillTheGapQuestionService/FillTheGapQuestionService.js
+++ b/editors/demo/src/HHMI/FillTheGapQuestionService/FillTheGapQuestionService.js
@@ -2,6 +2,7 @@ import { Service } from 'wax-prosemirror-services';
 import FillTheGapQuestion from './FillTheGapQuestion';
 import fillTheGapContainerNode from './schema/fillTheGapContainerNode';
 import fillTheGapNode from './schema/fillTheGapNode';
+import CreateGapService from './CreateGapService/CreateGapService';
 
 class FillTheGapQuestionService extends Service {
   register() {
@@ -13,6 +14,7 @@ class FillTheGapQuestionService extends Service {
       fill_the_gap_container: fillTheGapContainerNode,
     });
   }
+  dependencies = [new CreateGapService()];
 }
 
 export default FillTheGapQuestionService;
diff --git a/editors/demo/src/HHMI/FillTheGapToolGroupService/FillTheGap.js b/editors/demo/src/HHMI/FillTheGapToolGroupService/FillTheGap.js
index 40220ac4c873abfe3c52d35bd044e2f8f52bd976..6318c164ea2f20196bc81991e6a700e5d6c4a8b0 100644
--- a/editors/demo/src/HHMI/FillTheGapToolGroupService/FillTheGap.js
+++ b/editors/demo/src/HHMI/FillTheGapToolGroupService/FillTheGap.js
@@ -4,9 +4,12 @@ import { ToolGroup } from 'wax-prosemirror-services';
 @injectable()
 class FillTheGap extends ToolGroup {
   tools = [];
-  constructor(@inject('FillTheGapQuestion') FillTheGapQuestion) {
+  constructor(
+    @inject('FillTheGapQuestion') FillTheGapQuestion,
+    @inject('CreateGap') CreateGap,
+  ) {
     super();
-    this.tools = [FillTheGapQuestion];
+    this.tools = [FillTheGapQuestion, CreateGap];
   }
 }
 
diff --git a/editors/demo/src/HHMI/layout/EditorElements.js b/editors/demo/src/HHMI/layout/EditorElements.js
index 87ac8cb9855caf77cb8673d3890d7c1c781a7878..f25b22af6c28beed5b75754732a6acaba702221c 100644
--- a/editors/demo/src/HHMI/layout/EditorElements.js
+++ b/editors/demo/src/HHMI/layout/EditorElements.js
@@ -345,4 +345,33 @@ export default css`
       padding: 5px 5px 0 5px;
     }
   }
+
+  /* -- Fill The Gap ---------------------------------- */
+
+  .fill-the-gap {
+    border: 3px solid #f5f5f7;
+    margin-bottom: 30px;
+    margin-top: 30px;
+    padding: 3px;
+
+    &:before {
+      background-color: #fff;
+      bottom: 22px;
+      color: #535e76;
+      content: 'Fill The Gap';
+      height: 10px;
+      left: -1px;
+      position: relative;
+      width: 30px;
+    }
+
+    p {
+      bottom: 22px;
+      position: relative;
+    }
+
+    p:last-child {
+      margin-bottom: -1em;
+    }
+  }
 `;
diff --git a/wax-prosemirror-services/src/BaseService/BaseService.js b/wax-prosemirror-services/src/BaseService/BaseService.js
index f1918417203545ebdf724304ef165fbbaa1c5440..83525bb3e3d7feb9249cf38c510d4c8972f028c1 100644
--- a/wax-prosemirror-services/src/BaseService/BaseService.js
+++ b/wax-prosemirror-services/src/BaseService/BaseService.js
@@ -1,5 +1,5 @@
-import Service from "../Service";
-import BaseServices from "./index";
+import Service from '../Service';
+import BaseServices from './index';
 
 class BaseService extends Service {
   dependencies = BaseServices;
diff --git a/wax-prosemirror-services/src/InlineAnnotations/InlineAnnotationsService.js b/wax-prosemirror-services/src/InlineAnnotations/InlineAnnotationsService.js
index 76e753be9fcf8b4d68633b149ace953a713c6eda..ddf4f112bba3b43d1f3cb2b36907eb0ec146f88d 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/InlineAnnotationsService.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/InlineAnnotationsService.js
@@ -1,5 +1,5 @@
-import Service from "../Service";
-import InlineServices from "./index";
+import Service from '../Service';
+import InlineServices from './index';
 
 class InlineAnnotationsService extends Service {
   dependencies = InlineServices;
diff --git a/wax-prosemirror-services/src/ListsService/ListsService.js b/wax-prosemirror-services/src/ListsService/ListsService.js
index 3e1fd350729b7457a2a805b77e9cef76d9961ad0..4a87bf91042c542062e13331daddb0afa6458797 100644
--- a/wax-prosemirror-services/src/ListsService/ListsService.js
+++ b/wax-prosemirror-services/src/ListsService/ListsService.js
@@ -1,5 +1,5 @@
-import Service from "../Service";
-import ListsServices from "./index";
+import Service from '../Service';
+import ListsServices from './index';
 
 class ListsService extends Service {
   dependencies = ListsServices;
diff --git a/wax-prosemirror-services/src/TablesService/TablesService.js b/wax-prosemirror-services/src/TablesService/TablesService.js
index 1172660adaed87bd1b3d8bfc67b4064528c25957..ceef94284bfef870d37c86b5d677156266450724 100644
--- a/wax-prosemirror-services/src/TablesService/TablesService.js
+++ b/wax-prosemirror-services/src/TablesService/TablesService.js
@@ -1,5 +1,5 @@
-import Service from "../Service";
-import TablesServices from "./index";
+import Service from '../Service';
+import TablesServices from './index';
 
 class TablesService extends Service {
   dependencies = TablesServices;
diff --git a/wax-prosemirror-services/src/TextBlockLevel/TextBlockLevelService.js b/wax-prosemirror-services/src/TextBlockLevel/TextBlockLevelService.js
index 756956f3c3a69f7576d5b1e89f7dd3fca42fc855..e19aa29a9e418725281a186e7bc8a15dd387fb76 100644
--- a/wax-prosemirror-services/src/TextBlockLevel/TextBlockLevelService.js
+++ b/wax-prosemirror-services/src/TextBlockLevel/TextBlockLevelService.js
@@ -1,5 +1,5 @@
-import Service from "../Service";
-import TextServices from "./index";
+import Service from '../Service';
+import TextServices from './index';
 
 class TextBlockLevelService extends Service {
   dependencies = TextServices;