diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index c7795ea5e002299834161628a12b86e4053b89cd..ff64c3ceae599772a8228d44a76586902afaa2b1 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/wax-prosemirror-components/src/components/tables/CreateTable.js
@@ -1,11 +1,25 @@
 /* eslint react/prop-types: 0 */
 
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useMemo } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
+import styled from 'styled-components';
+import { grid } from '@pubsweet/ui-toolkit';
 
-import Dropdown from '../../ui/buttons/Dropdown';
+import MenuButton from '../../ui/buttons/MenuButton';
 import InsertTableTool from '../../ui/tables/InsertTableTool';
 
+const Wrapper = styled.div`
+  font-size: 0;
+  position: relative;
+  z-index: 2;
+`;
+
+const DropWrapper = styled.div`
+  margin-top: ${grid(1)};
+  position: absolute;
+  background: white;
+`;
+
 const CreateTable = ({ view = {}, item }) => {
   const {
     view: { main },
@@ -15,33 +29,62 @@ const CreateTable = ({ view = {}, item }) => {
     view = main;
   }
 
-  const [showTool, setShowTool] = useState(false);
-  const toggleShowTool = () => setShowTool(!showTool);
-
-  const { state, dispatch } = view;
+  const { state } = view;
   const { enable, icon, run, select, title } = item;
+  const [isOpen, setIsOpen] = useState(false);
 
   const dropComponent = (
     <InsertTableTool
-      onGridSelect={colRows => {
-        run(colRows, state, dispatch);
-      }}
+      onGridSelect={(colRows, editorState, editorDispatch) =>
+        handleSelect(colRows, view.state, view.dispatch)
+      }
     />
   );
 
+  const handleSelect = (colRows, editorState, editorDispatch) => {
+    run(colRows, editorState, editorDispatch);
+    setIsOpen(!isOpen);
+  };
+
   const isDisabled =
     enable && !enable(state) && !(select && select(state, activeViewId));
 
-  return (
-    <Dropdown
-      active={showTool}
-      dropComponent={dropComponent}
-      iconName={icon}
-      disabled={isDisabled}
-      onClick={toggleShowTool}
-      title={title}
-    />
+  const MemorizedDropdown = useMemo(
+    () => (
+      <Wrapper>
+        <MenuButton
+          active={isOpen}
+          disabled={isDisabled}
+          iconName={icon}
+          onMouseDown={() => {
+            setIsOpen(!isOpen);
+          }}
+          title={title}
+        />
+
+        {isOpen && <DropWrapper>{dropComponent}</DropWrapper>}
+      </Wrapper>
+    ),
+    [isDisabled, isOpen],
   );
+
+  return MemorizedDropdown;
+
+  // const MemorizedDropdown = useMemo(
+  //   () => (
+  //     <Dropdown
+  //       active={showTool}
+  //       dropComponent={dropComponent}
+  //       iconName={icon}
+  //       disabled={isDisabled}
+  //       onMouseDown={toggleShowTool}
+  //       title={title}
+  //     />
+  //   ),
+  //   [isDisabled, showTool],
+  // );
+  //
+  // return MemorizedDropdown;
 };
 
 export default CreateTable;