diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index 38e547ec9f7b28aa08c150dd252ae21bf7264f56..31b5aed9ffd06846df2f237e012f61fedd0ce6ca 100644
--- a/wax-prosemirror-components/index.js
+++ b/wax-prosemirror-components/index.js
@@ -5,3 +5,6 @@ export { default as icons } from "./src/icons/icons";
 export { default as TableDropDown } from "./src/components/TableDropDown";
 export { default as ImageUpload } from "./src/components/ImageUpload";
 export { default as LeftMenuTitle } from "./src/components/LeftMenuTitle";
+export {
+  default as ToolGroupComponent
+} from "./src/components/ToolGroupComponent";
diff --git a/wax-prosemirror-components/src/components/ToolGroupComponent.js b/wax-prosemirror-components/src/components/ToolGroupComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..d1a90b093d291e9ca0f4ead0cdb9187e55e65d05
--- /dev/null
+++ b/wax-prosemirror-components/src/components/ToolGroupComponent.js
@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { isFunction } from "lodash";
+import styled from "styled-components";
+
+const InnerStyled = styled.div`
+  display: flex;
+  width: 0;
+  top: 40px;
+  position: relative;
+  right: 100%;
+`;
+
+const ToolGroupComponent = ({ view, tools, name, title }) => {
+  const [more, showHide] = useState(false),
+    toolsShown = [],
+    rest = [],
+    DisplayTitle = isFunction(title) ? title : () => title;
+
+  tools.forEach(tool => {
+    tool.hideOnToolbar
+      ? rest.push(tool.renderTool(view))
+      : toolsShown.push(tool.renderTool(view));
+  });
+
+  return (
+    <div>
+      <DisplayTitle />
+      {toolsShown}
+      {rest.length && !more ? (
+        <button onClick={() => showHide(!more)}>...</button>
+      ) : null}
+      {more && (
+        <div>
+          <button onClick={() => showHide(!more)}>...</button>
+          <InnerStyled>{rest}</InnerStyled>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ToolGroupComponent;
diff --git a/wax-prosemirror-services/src/lib/ToolGroup.js b/wax-prosemirror-services/src/lib/ToolGroup.js
index 93ae0ef7d02058e2baafda4730a26e676b76227d..0191bfc95243179b03ff21d8eaefc6877d6d1ff4 100644
--- a/wax-prosemirror-services/src/lib/ToolGroup.js
+++ b/wax-prosemirror-services/src/lib/ToolGroup.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { injectable } from "inversify";
-import { isFunction } from "lodash";
+import { ToolGroupComponent } from "wax-prosemirror-components";
 
 @injectable()
 export default class ToolGroup {
@@ -42,43 +42,15 @@ export default class ToolGroup {
   }
 
   renderTools(view) {
-    const [more, showHide] = useState(false);
-    const tools = [];
-    const rest = [];
-    this._tools.forEach(tool => {
-      if (tool.hideOnToolbar) {
-        rest.push(tool.renderTool(view));
-      } else {
-        tools.push(tool.renderTool(view));
-      }
-    });
-
-    const Title = isFunction(this.title) ? this.title : () => this.title;
-
+    const { name } = this.constructor;
     return (
-      <div key={`groupName-${this.constructor.name}`}>
-        <Title />
-        {tools}
-        {rest.length && !more ? (
-          <button onClick={() => showHide(!more)}>...</button>
-        ) : null}
-        {more && (
-          <div>
-            <button onClick={() => showHide(!more)}>...</button>
-            <div
-              style={{
-                display: "flex",
-                width: "0",
-                top: "40px",
-                position: "relative",
-                right: "100%"
-              }}
-            >
-              {rest}
-            </div>
-          </div>
-        )}
-      </div>
+      <ToolGroupComponent
+        key={`groupName-${name}`}
+        view={view}
+        tools={this._tools}
+        title={this.title}
+        name={name}
+      />
     );
   }
 }