diff --git a/src/component/panels/databasePanel/DatabasePanel.tsx b/src/component/panels/databasePanel/DatabasePanel.tsx
index e1430dcf8..153d0c4df 100644
--- a/src/component/panels/databasePanel/DatabasePanel.tsx
+++ b/src/component/panels/databasePanel/DatabasePanel.tsx
@@ -10,7 +10,7 @@ import {
 import { DatabaseNMREntry, mapRanges } from 'nmr-processing';
 import OCL from 'openchemlib/full';
 import { useCallback, useState, useRef, memo, useEffect, useMemo } from 'react';
-import { useAccordionContext } from 'react-science/ui';
+import { useAccordionContext, useOnOff } from 'react-science/ui';
 
 import { isSpectrum1D } from '../../../data/data1d/Spectrum1D';
 import { getSum } from '../../../data/data1d/Spectrum1D/SumManager';
@@ -25,7 +25,6 @@ import { useChartData } from '../../context/ChartContext';
 import { useDispatch } from '../../context/DispatchContext';
 import { usePreferences } from '../../context/PreferencesContext';
 import { useAlert } from '../../elements/popup/Alert';
-import { positions, transitions, useModal } from '../../elements/popup/Modal';
 import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus';
 import { options } from '../../toolbar/ToolTypes';
 import Events from '../../utility/Events';
@@ -37,9 +36,9 @@ import NoTableData from '../extra/placeholder/NoTableData';
 import PreferencesHeader from '../header/PreferencesHeader';
 
 import DatabasePreferences from './DatabasePreferences';
+import { DatabaseSearchOptions } from './DatabaseSearchOptions';
 import { DatabaseStructureSearchModal } from './DatabaseStructureSearchModal';
 import DatabaseTable from './DatabaseTable';
-import { DatabaseSearchOptions } from './DatabaseSearchOptions';
 
 export type Databases = Array<LocalDatabase | Database>;
 
@@ -82,11 +81,15 @@ function DatabasePanelInner({
 }: DatabaseInnerProps) {
   const dispatch = useDispatch();
   const alert = useAlert();
-  const modal = useModal();
   const { item } = useAccordionContext('Databases');
 
   const format = useFormatNumberByNucleus(nucleus);
   const [isFlipped, setFlipStatus] = useState(false);
+  const [
+    isOpenSearchByStructure,
+    openSearchByStructure,
+    closeSearchByStructure,
+  ] = useOnOff(false);
   const settingRef = useRef<any>();
   const [keywords, setKeywords] =
     useState<DatabaseSearchKeywords>(emptyKeywords);
@@ -296,24 +299,9 @@ function DatabasePanelInner({
     },
     [alert, result],
   );
-
   const searchByStructureHandler = (idCodeValue: string) => {
     setIdCode(idCodeValue);
   };
-  const openSearchByStructure = () => {
-    modal.show(
-      <DatabaseStructureSearchModal
-        onChange={searchByStructureHandler}
-        idCode={idCode}
-      />,
-      {
-        position: positions.MIDDLE,
-        transition: transitions.SCALE,
-        isBackgroundBlur: false,
-      },
-    );
-  };
-
   return (
     <div
       css={[
@@ -330,21 +318,29 @@ function DatabasePanelInner({
       ]}
     >
       {!isFlipped && (
-        <DatabaseSearchOptions
-          databases={databases}
-          defaultDatabase={defaultDatabase}
-          idCode={idCode}
-          keywords={keywords}
-          result={result}
-          selectedTool={selectedTool}
-          total={databaseInstance.current?.data.length || 0}
-          onKeywordsChange={(options) =>
-            setKeywords((prevKeywords) => ({ ...prevKeywords, ...options }))
-          }
-          onSettingClick={settingsPanelHandler}
-          onStructureClick={openSearchByStructure}
-          onDatabaseChange={handleChangeDatabase}
-        />
+        <>
+          <DatabaseSearchOptions
+            databases={databases}
+            defaultDatabase={defaultDatabase}
+            idCode={idCode}
+            keywords={keywords}
+            result={result}
+            selectedTool={selectedTool}
+            total={databaseInstance.current?.data.length || 0}
+            onKeywordsChange={(options) =>
+              setKeywords((prevKeywords) => ({ ...prevKeywords, ...options }))
+            }
+            onSettingClick={settingsPanelHandler}
+            onStructureClick={openSearchByStructure}
+            onDatabaseChange={handleChangeDatabase}
+          />
+          <DatabaseStructureSearchModal
+            isOpen={isOpenSearchByStructure}
+            onClose={closeSearchByStructure}
+            onChange={searchByStructureHandler}
+            idCode={idCode}
+          />
+        </>
       )}
       {isFlipped && (
         <PreferencesHeader
diff --git a/src/component/panels/databasePanel/DatabaseSearchOptions.tsx b/src/component/panels/databasePanel/DatabaseSearchOptions.tsx
index 687284329..6856eb85c 100644
--- a/src/component/panels/databasePanel/DatabaseSearchOptions.tsx
+++ b/src/component/panels/databasePanel/DatabaseSearchOptions.tsx
@@ -1,21 +1,23 @@
 import { BsHexagon, BsHexagonFill } from 'react-icons/bs';
+import { FaICursor } from 'react-icons/fa';
+import { IoSearchOutline } from 'react-icons/io5';
+
 import Button from '../../elements/Button';
 import { CounterLabel } from '../../elements/CounterLabel';
 import Input from '../../elements/Input';
 import { PreferencesButton } from '../../elements/PreferencesButton';
 import Select from '../../elements/Select';
-import PanelHeader from '../header/PanelHeader';
+import ToggleButton from '../../elements/ToggleButton';
 import useToolsFunctions from '../../hooks/useToolsFunctions';
 import { options } from '../../toolbar/ToolTypes';
 import { createFilterLabel } from '../header/DefaultPanelHeader';
-import { FaICursor } from 'react-icons/fa';
-import { IoSearchOutline } from 'react-icons/io5';
+import PanelHeader from '../header/PanelHeader';
+
 import {
   DataBaseSearchResultEntry,
   DatabaseSearchKeywords,
   Databases,
 } from './DatabasePanel';
-import ToggleButton from '../../elements/ToggleButton';
 
 type OnClick = React.ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
 
@@ -123,10 +125,11 @@ export function DatabaseSearchOptions({
             }}
           />
         </ToggleButton>
+
         <Input
           value={keywords.searchKeywords}
           renderIcon={() => <IoSearchOutline />}
-          style={{ inputWrapper: { margin: '0 5px', flex: 1 } }}
+          style={{ inputWrapper: { flex: 3 } }}
           className="search-input"
           type="text"
           debounceTime={250}
@@ -135,6 +138,7 @@ export function DatabaseSearchOptions({
           onClear={clearHandler}
           canClear
         />
+
         <Button.Done
           fill="clear"
           onClick={onStructureClick}
diff --git a/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx b/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx
index f2ac3a176..e1ea053b6 100644
--- a/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx
+++ b/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx
@@ -1,35 +1,48 @@
 /** @jsxImportSource @emotion/react */
 import { StructureEditor } from 'react-ocl/full';
-
-import CloseButton from '../../elements/CloseButton';
-import { ModalStyles } from '../../modal/ModalStyle';
+import { Modal } from 'react-science/ui';
 
 interface DatabaseStructureSearchModalProps {
   onChange: (idCode: string) => void;
+  isOpen: boolean;
   idCode: string | undefined;
   onClose?: () => void;
 }
 
 export function DatabaseStructureSearchModal({
   onChange,
+  isOpen,
   idCode,
   onClose,
 }: DatabaseStructureSearchModalProps) {
   return (
-    <div css={ModalStyles}>
-      <div className="header handle">
-        <span>Search by structure</span>
-        <CloseButton onClick={onClose} className="close-bt" />
-      </div>
-
-      <div className="main-content">
+    <Modal
+      hasCloseButton
+      isOpen={isOpen}
+      onRequestClose={() => {
+        onClose?.();
+      }}
+      maxWidth={1000}
+    >
+      <Modal.Header>
+        <div
+          style={{
+            color: 'rgb(0, 93, 158)',
+            width: '100%',
+            textAlign: 'center',
+          }}
+        >
+          <span>Search by structure</span>
+        </div>
+      </Modal.Header>
+      <Modal.Body>
         <StructureEditor
           initialIDCode={idCode}
           svgMenu
           fragment
           onChange={(molFile, molecule, idCode) => onChange(idCode)}
         />
-      </div>
-    </div>
+      </Modal.Body>
+    </Modal>
   );
 }