diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js
index 3e0b13574e74ec1730cf8cda95badfcc31049503..7072aeab13c9c70d5f17b45059cd5bd9f521dec8 100644
--- a/editors/editoria/src/config/config.js
+++ b/editors/editoria/src/config/config.js
@@ -24,6 +24,7 @@ import {
   CodeBlockService,
   CodeBlockToolGroupService,
   TrackChangeToolGroupService,
+  DisplayTextToolGroupService,
 } from 'wax-prosemirror-services';
 
 import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
@@ -54,7 +55,7 @@ export default {
     },
     {
       templateArea: 'leftSideBar',
-      toolGroups: ['Display', 'Text'],
+      toolGroups: ['DisplayText'],
     },
   ],
 
@@ -95,5 +96,6 @@ export default {
     new CodeBlockService(),
     new CodeBlockToolGroupService(),
     new TrackChangeToolGroupService(),
+    new DisplayTextToolGroupService(),
   ],
 };
diff --git a/wax-prosemirror-components/src/components/ToolGroupComponent.js b/wax-prosemirror-components/src/components/ToolGroupComponent.js
index 1e0062f31c740dcd0a4d2b1721babf1243ceede6..fe3d20e3650800172d85815174698d8e598c01e0 100644
--- a/wax-prosemirror-components/src/components/ToolGroupComponent.js
+++ b/wax-prosemirror-components/src/components/ToolGroupComponent.js
@@ -34,6 +34,7 @@ const ToolGroupComponent = ({ view, tools, name, title }) => {
 
   return (
     <Wrapper data-name={name}>
+      {/* <DisplayTitle /> */}
       {toolsShown}
       {rest.length > 0 && (
         <Dropdown
diff --git a/wax-prosemirror-components/src/components/ToolGroups.js b/wax-prosemirror-components/src/components/ToolGroups.js
index 29dcfcb6be744bfee4687ddc79a4bec5053d3cb1..374fb6f15a63edb7e272aa3b8e7b16b2334d0f81 100644
--- a/wax-prosemirror-components/src/components/ToolGroups.js
+++ b/wax-prosemirror-components/src/components/ToolGroups.js
@@ -1,3 +1,5 @@
+/* eslint no-underscore-dangle: 0 */
+/* eslint react/prop-types: 0 */
 import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import ToolGroupComponent from './ToolGroupComponent';
@@ -12,7 +14,7 @@ const ToolGroups = ({ toolGroups, view }) => {
         key={uuidv4()}
         view={view}
         tools={toolGroup._tools}
-        title={this.title}
+        // title={this.title}
         // name={name}
       />
     );
diff --git a/wax-prosemirror-services/index.js b/wax-prosemirror-services/index.js
index 9da4eae14ce49c0d6606647654776ca93c8e0dd4..1ea51a65b7a0d4af93ae5a00aec159608fffcf97 100644
--- a/wax-prosemirror-services/index.js
+++ b/wax-prosemirror-services/index.js
@@ -41,3 +41,5 @@ export { default as TextToolGroupService } from './src/WaxToolGroups/TextToolGro
 export { default as NoteToolGroupService } from './src/WaxToolGroups/NoteToolGroupService/NoteToolGroupService';
 export { default as CodeBlockToolGroupService } from './src/WaxToolGroups/CodeBlockToolGroupService/CodeBlockToolGroupService';
 export { default as TrackChangeToolGroupService } from './src/WaxToolGroups/TrackChangeToolGroupService/TrackChangeToolGroupService';
+
+export { default as DisplayTextToolGroupService } from './src/WaxToolGroups/DisplayTextToolGroupService/DisplayTextToolGroupService';
diff --git a/wax-prosemirror-services/src/MenuService/MenuWrapper.js b/wax-prosemirror-services/src/MenuService/MenuWrapper.js
index b52b826dbb37cddf7869f4c31126f299293cec32..5b67f631aa0cecb92704f784686b2088c4989fed 100644
--- a/wax-prosemirror-services/src/MenuService/MenuWrapper.js
+++ b/wax-prosemirror-services/src/MenuService/MenuWrapper.js
@@ -7,24 +7,7 @@ import { map } from 'lodash';
 import { ToolGroupComponent, ToolGroups } from 'wax-prosemirror-components';
 
 const MainMenuBar = ({ items = [], view }) => {
-  return (
-    <>
-      {map(items, item => {
-        if (item._toolGroups && item._toolGroups.length > 0) {
-          return <ToolGroups toolGroups={item._toolGroups} view={view} />;
-        }
-        return (
-          <ToolGroupComponent
-            key={uuidv4()}
-            view={view}
-            tools={item._tools}
-            // title={this.title}
-            // name={name}
-          />
-        );
-      })}
-    </>
-  );
+  return <>{map(items, item => item.renderTools(view))}</>;
 };
 
 export default MainMenuBar;
diff --git a/wax-prosemirror-services/src/lib/ToolGroup.js b/wax-prosemirror-services/src/lib/ToolGroup.js
index 93ce54c133e1d655e7239f7c61dbc1b603937977..60d6393c9d175109594c22baae10fbf9b7bc48d9 100644
--- a/wax-prosemirror-services/src/lib/ToolGroup.js
+++ b/wax-prosemirror-services/src/lib/ToolGroup.js
@@ -1,18 +1,24 @@
 import React, { useState } from 'react';
 import { injectable } from 'inversify';
-import { ToolGroupComponent } from 'wax-prosemirror-components';
+import { ToolGroupComponent, ToolGroups } from 'wax-prosemirror-components';
 import { v4 as uuidv4 } from 'uuid';
 
+export default
 @injectable()
-export default class ToolGroup {
+class ToolGroup {
   _config = {};
   title = '';
   _tools = [];
-  constructor() {}
+  _toolGroups = [];
+
   setGroupConfig(config) {
     this._config = config;
   }
 
+  set toolGroups(groups) {
+    this._toolGroups = groups;
+  }
+
   excludeIncludeTools() {
     const { exclude = [], include = [] } = this._config;
 
@@ -52,6 +58,9 @@ export default class ToolGroup {
 
   renderTools(view) {
     const { name } = this.constructor;
+    if (this._toolGroups > 0) {
+      return <ToolGroups toolGroups={this._toolGroups} view={view} />;
+    }
     return (
       <ToolGroupComponent
         key={uuidv4()}