diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js
index 2dcdbfec057002447b287212bf1af7be3a69e18c..be76ca3d97a14dbc6bb739162dc71efe9d6a29ae 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js
@@ -1,7 +1,10 @@
+import React from 'react';
+import { isEmpty } from 'lodash';
 import { injectable } from 'inversify';
 import { Tools } from 'wax-prosemirror-services';
 import { Fragment } from 'prosemirror-model';
 import { v4 as uuidv4 } from 'uuid';
+import ToolBarBtn from './components/ToolBarBtn';
 
 const createQuestion = (state, dispatch, tr) => {
   const { empty, $from, $to } = state.selection;
@@ -63,6 +66,13 @@ class MultipleChoiceQuestion extends Tools {
   get enable() {
     return state => {};
   }
+
+  renderTool(view) {
+    if (isEmpty(view)) return null;
+    return this._isDisplayed ? (
+      <ToolBarBtn key={uuidv4()} item={this.toJSON()} view={view} />
+    ) : null;
+  }
 }
 
 export default MultipleChoiceQuestion;
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/ToolBarBtn.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/ToolBarBtn.js
index 9e21a5e6d140ca4a44c650b282d97bd52e3e62e3..175b0b771aba846548b2262681e84c069063a0ad 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/ToolBarBtn.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/ToolBarBtn.js
@@ -2,7 +2,7 @@
 import React, { useContext, useMemo } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
 import styled, { css } from 'styled-components';
-import MenuButton from 'wax-prosemirror-components';
+import { MenuButton } from 'wax-prosemirror-components';
 
 const activeStyles = css`
   pointer-events: none;