diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js
index 1a60e782c41d1401fcfbfa88c0eb03deb660fd9e..9d4c0bc6dd5ceafc791473865a50215f924e2572 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js
@@ -1,5 +1,6 @@
-import React, { useRef, useMemo, useContext, useState } from 'react';
-import { WaxContext } from 'wax-prosemirror-core';
+/* eslint react/prop-types: 0 */
+
+import React from 'react';
 import styled from 'styled-components';
 import { grid, th } from '@pubsweet/ui-toolkit';
 import Icon from '../../helpers/Icon';
@@ -26,7 +27,7 @@ const SearchInput = styled.input`
   border-radius: 2px;
   border: none;
   padding: ${grid(1)};
-  width: 80%;
+  width: 73%;
   box-shadow: inset 0 0 0 1px rgba(27, 43, 75, 0.28);
   ::placeholder {
     color: #d8dae0;
@@ -42,9 +43,24 @@ const StyledIcon = styled(Icon)`
   cursor: pointer;
 `;
 
-const FindAndReplaceComponent = () => {
+const CloseWrapper = styled.div`
+  border-left: 1px solid #e0e2e7;
+  margin-left: 1%;
+`;
+
+const ExpandedWrapper = styled.div``;
+
+const FindAndReplaceComponent = ({ close }) => {
   const onChange = () => {};
 
+  const closeFind = () => {
+    close();
+  };
+
+  const showExpanded = () => {
+    console.log('expanded');
+  };
+
   return (
     <Wrapper>
       <SingleRow>
@@ -56,7 +72,14 @@ const FindAndReplaceComponent = () => {
         />
         <StyledIcon name="navigatePrevious" />
         <StyledIcon name="navigateNext" />
-        <StyledIcon name="more" />
+
+        <ExpandedWrapper onClick={showExpanded}>
+          <StyledIcon name="more" />
+        </ExpandedWrapper>
+
+        <CloseWrapper onClick={closeFind}>
+          <StyledIcon name="close" />
+        </CloseWrapper>
       </SingleRow>
     </Wrapper>
   );
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
index 95aaf8e3fd96b220253aa6d7690f0908684f0a06..5e4724e45797d5114d54c89dd37e9f29b03084e3 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
@@ -73,7 +73,11 @@ const FindAndReplaceTool = ({ view = {}, item }) => {
 
         {isOpen && (
           <DropWrapper style={style} ref={dropElement}>
-            <FindAndReplaceComponent />
+            <FindAndReplaceComponent
+              close={() => {
+                setIsOpen(false);
+              }}
+            />
           </DropWrapper>
         )}
       </Wrapper>
diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js
index e5bb657062ef5faa49b88bfe94ff3d18982540c7..6f3fdc7be9a10ab438751a542d0b4bbbbba089cd 100644
--- a/wax-prosemirror-components/src/icons/icons.js
+++ b/wax-prosemirror-components/src/icons/icons.js
@@ -236,4 +236,10 @@ export default {
       <path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z" />
     </Svg>
   ),
+  close: ({ className }) => (
+    <Svg className={className} viewBox="0 0 24 24" fill="none">
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+    </Svg>
+  ),
 };