diff --git a/server/zanata-frontend/src/app/editor/components/EditorSearchInput/EditorSearchInput.test.js b/server/zanata-frontend/src/app/editor/components/EditorSearchInput/EditorSearchInput.test.js
index 8a6e94fd41..055a8f7216 100644
--- a/server/zanata-frontend/src/app/editor/components/EditorSearchInput/EditorSearchInput.test.js
+++ b/server/zanata-frontend/src/app/editor/components/EditorSearchInput/EditorSearchInput.test.js
@@ -5,7 +5,11 @@ import React from 'react'
 import * as ReactDOMServer from 'react-dom/server'
 import * as TestUtils from 'react-dom/test-utils'
 import { EditorSearchInput } from '.'
-import { Panel, Button } from 'react-bootstrap'
+import Collapse from 'antd/lib/collapse'
+import 'antd/lib/collapse/style/css'
+import Button from 'antd/lib/button'
+import 'antd/lib/button/style/css'
+const Panel = Collapse.Panel
 
 const callback = () => {}
 
@@ -41,85 +45,95 @@ describe('EditorSearchInputTest', () => {
           <span className="EditorInputGroup-addon btn-xs btn-link n1"
             >Hide advanced</span>
         </div>
-        <Panel collapsible expanded>
-          <div title="exact Resource ID for a string"
-            className="u-sPB-1-2">
-            <label className="u-textSecondary u-sPB-1-4">Resource ID</label>
-            <input type="text"
-              onChange={callback}
-              placeholder="exact Resource ID for a string"
-              className="u-bgHighest u-sizeFull u-inputFlat u-sP-1-2 u-rounded u-sMH-1-4 u-sMV-1-8"
-              value="para-0001" />
-          </div>
-          <div title="username"
-            className="u-sPB-1-2">
-            <label className="u-textSecondary u-sPB-1-4">
-              Last modified by
-            </label>
-            <input type="text"
-              onChange={callback}
-              placeholder="username"
-              className="u-bgHighest u-sizeFull u-inputFlat u-sP-1-2 u-rounded u-sMH-1-4 u-sMV-1-8"
-              value="cdickens" />
-          </div>
-          <div title="date in format yyyy/mm/dd"
-            className="u-sPB-1-2">
-            <label className="u-textSecondary u-sPB-1-4">
-              Last modified before
-            </label>
-            <input type="text"
-              onChange={callback}
-              placeholder="date in format yyyy/mm/dd"
-              className="u-bgHighest u-sizeFull u-inputFlat u-sP-1-2 u-rounded u-sMH-1-4 u-sMV-1-8"
-              value="1859-12-31" />
-          </div>
-          <div title="date in format yyyy/mm/dd"
-            className="u-sPB-1-2">
-            <label className="u-textSecondary u-sPB-1-4">
-              Last modified after
-            </label>
-            <input type="text"
-              onChange={callback}
-              placeholder="date in format yyyy/mm/dd"
-              className="u-bgHighest u-sizeFull u-inputFlat u-sP-1-2 u-rounded u-sMH-1-4 u-sMV-1-8"
-              value="1859-01-01" />
-          </div>
-          <div title="source comment text"
-            className="u-sPB-1-2">
-            <label className="u-textSecondary u-sPB-1-4">Source comment</label>
-            <input type="text"
-              onChange={callback}
-              placeholder="source comment text"
-              className="u-bgHighest u-sizeFull u-inputFlat u-sP-1-2 u-rounded u-sMH-1-4 u-sMV-1-8"
-              value="England and France" />
-          </div>
-          <div title="translation comment text"
-            className="u-sPB-1-2">
-            <label className="u-textSecondary u-sPB-1-4">
-              Translation comment
-            </label>
-            <input type="text"
-              onChange={callback}
-              placeholder="translation comment text"
-              className="u-bgHighest u-sizeFull u-inputFlat u-sP-1-2 u-rounded u-sMH-1-4 u-sMV-1-8"
-              value="blurst of times?! You stupid monkey!" />
-          </div>
-          <div title="exact Message Context for a string"
-            className="u-sPB-1-2">
-            <label className="u-textSecondary u-sPB-1-4">
-              msgctxt (gettext)
-            </label>
-            <input type="text"
-              onChange={callback}
-              placeholder="exact Message Context for a string"
-              className="u-bgHighest u-sizeFull u-inputFlat u-sP-1-2 u-rounded u-sMH-1-4 u-sMV-1-8"
-              value="chapter01.txt" />
-          </div>
-          <Button bsStyle="link" bsSize="xsmall" className="AdvSearch-clear"
-            onClick={callback}>
-            Clear all
-          </Button>
-        </Panel>
+        <Collapse activeKey={'1'} onChange={callback}
+          style={{
+            zIndex: '1000',
+            position: 'absolute',
+            marginBottom: '0.5rem',
+            width: '100%'
+          }}>
+          <Panel key='1' header={undefined} showArrow={false}>
+            <span>
+              <div title="exact Resource ID for a string"
+                className="u-sPB-1-2">
+                <label className="u-textSecondary u-sPB-1-4">Resource ID</label>
+                <input type="text"
+                  onChange={callback}
+                  placeholder="exact Resource ID for a string"
+                  className="u-bgHighest u-sizeFull u-inputFlat u-sP-1-2 u-rounded u-sMH-1-4 u-sMV-1-8"
+                  value="para-0001" />
+              </div>
+              <div title="username"
+                className="u-sPB-1-2">
+                <label className="u-textSecondary u-sPB-1-4">
+                  Last modified by
+                </label>
+                <input type="text"
+                  onChange={callback}
+                  placeholder="username"
+                  className="u-bgHighest u-sizeFull u-inputFlat u-sP-1-2 u-rounded u-sMH-1-4 u-sMV-1-8"
+                  value="cdickens" />
+              </div>
+              <div title="date in format yyyy/mm/dd"
+                className="u-sPB-1-2">
+                <label className="u-textSecondary u-sPB-1-4">
+                  Last modified before
+                </label>
+                <input type="text"
+                  onChange={callback}
+                  placeholder="date in format yyyy/mm/dd"
+                  className="u-bgHighest u-sizeFull u-inputFlat u-sP-1-2 u-rounded u-sMH-1-4 u-sMV-1-8"
+                  value="1859-12-31" />
+              </div>
+              <div title="date in format yyyy/mm/dd"
+                className="u-sPB-1-2">
+                <label className="u-textSecondary u-sPB-1-4">
+                  Last modified after
+                </label>
+                <input type="text"
+                  onChange={callback}
+                  placeholder="date in format yyyy/mm/dd"
+                  className="u-bgHighest u-sizeFull u-inputFlat u-sP-1-2 u-rounded u-sMH-1-4 u-sMV-1-8"
+                  value="1859-01-01" />
+              </div>
+              <div title="source comment text"
+                className="u-sPB-1-2">
+                <label className="u-textSecondary u-sPB-1-4">Source comment</label>
+                <input type="text"
+                  onChange={callback}
+                  placeholder="source comment text"
+                  className="u-bgHighest u-sizeFull u-inputFlat u-sP-1-2 u-rounded u-sMH-1-4 u-sMV-1-8"
+                  value="England and France" />
+              </div>
+              <div title="translation comment text"
+                className="u-sPB-1-2">
+                <label className="u-textSecondary u-sPB-1-4">
+                  Translation comment
+                </label>
+                <input type="text"
+                  onChange={callback}
+                  placeholder="translation comment text"
+                  className="u-bgHighest u-sizeFull u-inputFlat u-sP-1-2 u-rounded u-sMH-1-4 u-sMV-1-8"
+                  value="blurst of times?! You stupid monkey!" />
+              </div>
+              <div title="exact Message Context for a string"
+                className="u-sPB-1-2">
+                <label className="u-textSecondary u-sPB-1-4">
+                  msgctxt (gettext)
+                </label>
+                <input type="text"
+                  onChange={callback}
+                  placeholder="exact Message Context for a string"
+                  className="u-bgHighest u-sizeFull u-inputFlat u-sP-1-2 u-rounded u-sMH-1-4 u-sMV-1-8"
+                  value="chapter01.txt" />
+              </div>
+              <Button size={'small'} aria-label='button' className="AdvSearch-clear"
+                onClick={callback}>
+                Clear all
+              </Button>
+            </span>
+          </Panel>
+        </Collapse>
       </div>
       /* eslint-enable max-len */
     )