diff --git a/src/component/elements/DropdownMenu.tsx b/src/component/elements/DropdownMenu.tsx
new file mode 100644
index 0000000000..288156ed17
--- /dev/null
+++ b/src/component/elements/DropdownMenu.tsx
@@ -0,0 +1,39 @@
+import {
+  Menu,
+  MenuItem,
+  MenuItemProps,
+  Popover,
+  PopoverProps,
+} from '@blueprintjs/core';
+
+export interface DropdownMenuItem extends MenuItemProps {
+  data?: object;
+}
+
+export interface DropdownMenuProps
+  extends Omit<PopoverProps, 'onSelect' | 'content'> {
+  options: DropdownMenuItem[];
+  onSelect: (data?: object) => void;
+}
+
+export function DropdownMenu(props: DropdownMenuProps) {
+  const { options, onSelect, children, ...other } = props;
+
+  const content = (
+    <Menu>
+      {options.map((option) => (
+        <MenuItem
+          key={JSON.stringify(option)}
+          {...option}
+          onClick={() => onSelect(option?.data)}
+        />
+      ))}
+    </Menu>
+  );
+
+  return (
+    <Popover {...other} content={content}>
+      {children}
+    </Popover>
+  );
+}
diff --git a/src/component/elements/ToolbarMenu.tsx b/src/component/elements/ToolbarMenu.tsx
deleted file mode 100644
index e71e56a44b..0000000000
--- a/src/component/elements/ToolbarMenu.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-import {
-  ReactNode,
-  useState,
-  useCallback,
-  useRef,
-  useLayoutEffect,
-} from 'react';
-import { Toolbar } from 'react-science/ui';
-
-import { BoundingBox } from './MenuButton';
-
-const menuStyles = css`
-  .menu {
-    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
-    margin: 0;
-    border-radius: 5px;
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    z-index: 99999;
-    padding: 2px;
-    background-color: white;
-
-    button:hover {
-      background-color: #fafafa;
-    }
-  }
-
-  .menu-cover {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 1;
-  }
-
-  .menu-item {
-    background-color: transparent;
-    border: none;
-    border-bottom: 0.55px solid whitesmoke;
-    height: 35px;
-    outline: outline;
-    display: table-cell;
-    vertical-align: middle;
-    text-align: left;
-    padding: 0 10px;
-
-    svg {
-      display: inline-block;
-    }
-
-    :focus {
-      outline: none !important;
-    }
-
-    span {
-      font-size: 10px;
-      padding: 0 10px;
-    }
-  }
-`;
-
-interface MenuItemProps {
-  icon: ReactNode;
-  label: string;
-  onClick?: () => void;
-}
-
-function MenuItem({ icon, label, onClick }: MenuItemProps) {
-  return (
-    <button type="button" className="menu-item" onClick={onClick}>
-      {icon}
-      <span>{label}</span>
-    </button>
-  );
-}
-
-interface MenuListProps {
-  items: Array<MenuItemProps & { id: string }>;
-  onClick: (element: MenuItemProps & { id: string }) => void;
-  boxBounding?: BoundingBox;
-}
-
-function MenuList({
-  items,
-  boxBounding = { x: 0, y: 0, width: 0, height: 0 },
-  onClick,
-}: MenuListProps) {
-  const listRef = useRef<any>();
-  const [translate, setTranslate] = useState({
-    x: boxBounding.width,
-    y: boxBounding.height,
-  });
-
-  useLayoutEffect(() => {
-    const boxSize = listRef.current.getBoundingClientRect();
-    setTranslate((oldTransform) => {
-      let y = boxBounding.height;
-      if (boxSize.bottom > window.innerHeight) {
-        y = boxBounding.height * 2 + (boxSize.bottom - window.innerHeight);
-      }
-      return {
-        ...oldTransform,
-        y,
-      };
-    });
-  }, [boxBounding.height]);
-
-  return (
-    <div
-      ref={listRef}
-      className="menu"
-      style={{
-        transform: `translate(${translate.x}px, -${translate.y}px) `,
-      }}
-    >
-      {items?.map((item) => {
-        return (
-          <MenuItem key={item.id} {...item} onClick={() => onClick(item)} />
-        );
-      })}
-    </div>
-  );
-}
-
-interface MenuButtonProps {
-  component: ReactNode;
-  toolTip: string;
-  items?: Array<MenuItemProps & { id: string }>;
-  onClick?: (element: MenuItemProps & { id: string }) => void;
-}
-
-export default function ToolbarMenu({
-  component,
-  toolTip = '',
-  items = [],
-  onClick = () => null,
-}: MenuButtonProps) {
-  const menuButtonRef = useRef<HTMLDivElement>(null);
-  const [isShown, showMenu] = useState(false);
-
-  const closeMenuButton = useCallback(() => {
-    showMenu(false);
-  }, []);
-
-  const handleClick = useCallback(() => {
-    showMenu((flag) => !flag);
-  }, []);
-
-  const clickHandler = useCallback(
-    (e) => {
-      showMenu(false);
-      onClick(e);
-    },
-    [onClick],
-  );
-
-  const boxBounding = useCallback(() => {
-    return menuButtonRef.current?.getBoundingClientRect();
-  }, []);
-
-  return (
-    <div style={{ height: 'auto' }} css={menuStyles}>
-      <div ref={menuButtonRef}>
-        <Toolbar.Item
-          id={`menu-${toolTip}`}
-          title={toolTip}
-          active={isShown}
-          onClick={handleClick}
-        >
-          {component}
-        </Toolbar.Item>
-      </div>
-      {isShown && (
-        <MenuList
-          items={items}
-          boxBounding={boxBounding()}
-          onClick={clickHandler}
-        />
-      )}
-
-      {isShown && <div className="menu-cover" onClick={closeMenuButton} />}
-    </div>
-  );
-}
diff --git a/src/component/header/Header.tsx b/src/component/header/Header.tsx
index b81768de73..5ffb0d7db0 100644
--- a/src/component/header/Header.tsx
+++ b/src/component/header/Header.tsx
@@ -154,7 +154,7 @@ function HeaderInner(props: HeaderInnerProps) {
           }}
         >
           <div>
-            <Toolbar orientation="horizontal">
+            <Toolbar>
               <AboutUsModal />
             </Toolbar>
           </div>
@@ -179,15 +179,14 @@ function HeaderInner(props: HeaderInnerProps) {
           {!general?.hideLogs && <LogsHistoryModal />}
 
           <div>
-            <Toolbar orientation="horizontal">
+            <Toolbar>
               {!general?.hideHelp && (
                 <Toolbar.Item
                   id="user-manual"
                   title="User manual"
                   onClick={() => window.open(docsBaseUrl, '_blank')}
-                >
-                  <FaQuestionCircle />
-                </Toolbar.Item>
+                  icon={<FaQuestionCircle />}
+                />
               )}
               {!hideGeneralSettings && (
                 <GeneralSettingsModal height={height / 2} />
@@ -199,9 +198,8 @@ function HeaderInner(props: HeaderInnerProps) {
                   onClick={onEnableFullscreen}
                   title="Full Screen"
                   className="windowButton"
-                >
-                  <FaRegWindowMaximize />
-                </Toolbar.Item>
+                  icon={<FaRegWindowMaximize />}
+                />
               )}
             </Toolbar>
           </div>
diff --git a/src/component/modal/aboutUs/AboutUsModal.tsx b/src/component/modal/aboutUs/AboutUsModal.tsx
index c1948076a6..58128cf620 100644
--- a/src/component/modal/aboutUs/AboutUsModal.tsx
+++ b/src/component/modal/aboutUs/AboutUsModal.tsx
@@ -96,11 +96,11 @@ function AboutUsModal() {
     <>
       <Toolbar.Item
         onClick={openDialog}
-        titleOrientation="horizontal"
         id="logo"
         title="About NMRium"
-      >
-        <div
+        icon={<SvgLogoNmrium />}
+      />
+      {/* <div
           style={{
             display: 'flex',
             alignItems: 'center',
@@ -108,8 +108,8 @@ function AboutUsModal() {
           }}
         >
           <SvgLogoNmrium />
-        </div>
-      </Toolbar.Item>
+        </div> */}
+      {/* </Toolbar.Item> */}
       <Modal
         hasCloseButton
         isOpen={isOpenDialog}
diff --git a/src/component/modal/setting/GeneralSettings.tsx b/src/component/modal/setting/GeneralSettings.tsx
index 4c9cb6c6d2..7489f89971 100644
--- a/src/component/modal/setting/GeneralSettings.tsx
+++ b/src/component/modal/setting/GeneralSettings.tsx
@@ -288,9 +288,9 @@ function GeneralSettingsModal({ height }: GeneralSettingsModalProps) {
         id="general-settings"
         onClick={openDialog}
         title="General settings"
-      >
-        <FaWrench />
-      </Toolbar.Item>
+        icon={<FaWrench />}
+      />
+
       <Modal
         hasCloseButton
         isOpen={isOpenDialog}
diff --git a/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx b/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx
index 3b85386a3b..042794017d 100644
--- a/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx
+++ b/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx
@@ -11,7 +11,6 @@ import {
   FaRegTrashAlt,
 } from 'react-icons/fa';
 import { IoOpenOutline } from 'react-icons/io5';
-import { DropdownMenuProps, DropdownMenu } from 'react-science/ui';
 
 import {
   MoleculesView,
@@ -25,6 +24,7 @@ import { useDispatch } from '../../context/DispatchContext';
 import { useGlobal } from '../../context/GlobalContext';
 import ActiveButton from '../../elements/ActiveButton';
 import Button from '../../elements/Button';
+import { DropdownMenu, DropdownMenuProps } from '../../elements/DropdownMenu';
 import { useAlert } from '../../elements/popup/Alert';
 import AboutPredictionModal from '../../modal/AboutPredictionModal';
 import PredictSpectraModal from '../../modal/PredictSpectraModal';
@@ -49,39 +49,31 @@ const styles: Record<'counter' | 'atomLabel', CSSProperties> = {
   },
 };
 
-const LabelWrapper = ({ children }) => {
-  return <p style={{ padding: '0.4em' }}>{children}</p>;
-};
-
-const MOL_EXPORT_MENU: DropdownMenuProps<{ id: string }, void>['options'] = [
+const MOL_EXPORT_MENU: DropdownMenuProps['options'] = [
   {
-    type: 'option',
     icon: <FaCopy />,
-    label: <LabelWrapper>Copy as molfile V3</LabelWrapper>,
+    text: 'Copy as molfile V3',
     data: {
       id: 'molfileV3',
     },
   },
   {
-    type: 'option',
     icon: <FaCopy />,
-    label: <LabelWrapper>Copy as molfile V2</LabelWrapper>,
+    text: 'Copy as molfile V2',
     data: {
       id: 'molfileV2',
     },
   },
   {
-    type: 'option',
     icon: <FaFileImage />,
-    label: <LabelWrapper>Copy as PNG</LabelWrapper>,
+    text: 'Copy as PNG',
     data: {
       id: 'png',
     },
   },
   {
-    type: 'option',
     icon: <FaDownload />,
-    label: <LabelWrapper>Export as SVG</LabelWrapper>,
+    text: 'Export as SVG',
     data: {
       id: 'svg',
     },
@@ -145,7 +137,7 @@ export default function MoleculePanelHeader({
     (selected) => {
       const molecule = molecules?.[currentIndex];
       if (molecule) {
-        switch (selected?.data.id) {
+        switch (selected?.id) {
           case 'molfileV3':
             saveAsMolHandler(molecule.molfile);
             break;
@@ -222,11 +214,7 @@ export default function MoleculePanelHeader({
     <PanelHeader>
       {renderSource === 'predictionPanel' && <AboutPredictionModal />}
       {renderSource === 'moleculePanel' && (
-        <DropdownMenu
-          trigger="click"
-          options={MOL_EXPORT_MENU}
-          onSelect={exportHandler}
-        >
+        <DropdownMenu options={MOL_EXPORT_MENU} onSelect={exportHandler}>
           <Button.BarButton
             as="div"
             disabled={!hasMolecules}
diff --git a/src/component/toolbar/BasicToolBar.tsx b/src/component/toolbar/BasicToolBar.tsx
index 25888f8546..c42ce2a66e 100644
--- a/src/component/toolbar/BasicToolBar.tsx
+++ b/src/component/toolbar/BasicToolBar.tsx
@@ -19,7 +19,7 @@ import { Toolbar, useOnOff } from 'react-science/ui';
 
 import { useChartData } from '../context/ChartContext';
 import { useLoader } from '../context/LoaderContext';
-import ToolbarMenu from '../elements/ToolbarMenu';
+import { DropdownMenu, DropdownMenuProps } from '../elements/DropdownMenu';
 import { useModal } from '../elements/popup/Modal';
 import useCheckExperimentalFeature from '../hooks/useCheckExperimentalFeature';
 import { useCheckToolsVisibility } from '../hooks/useCheckToolsVisibility';
@@ -32,59 +32,79 @@ import { LoadJCAMPModal } from '../modal/LoadJCAMPModal';
 import { useMetaInformationImportationModal } from '../modal/metaImportation/index';
 import { VerticalAlignment } from '../reducer/Reducer';
 
-const IMPORT_MENU = [
+const IMPORT_MENU: DropdownMenuProps['options'] = [
   {
-    id: 'importFile',
     icon: <FaFile />,
-    label: 'Import from file system (Press Ctrl + O)',
+    text: 'Import from file system (Press Ctrl + O)',
+    data: {
+      id: 'importFile',
+    },
   },
   {
-    id: 'importJDX',
     icon: <FaFile />,
-    label: 'Add JCAMP-DX from URL',
+    text: 'Add JCAMP-DX from URL',
+    data: {
+      id: 'importJDX',
+    },
   },
   {
-    id: 'importPublicationString',
     icon: <FaFile />,
-    label: 'Import from publication string',
+    text: 'Import from publication string',
+    data: {
+      id: 'importPublicationString',
+    },
   },
   {
-    id: 'importMetaInformation',
     icon: <FaFile />,
-    label: 'Import meta information',
+    text: 'Import meta information',
+    data: {
+      id: 'importMetaInformation',
+    },
   },
 ];
 
-const EXPORT_MENU = [
+const EXPORT_MENU: DropdownMenuProps['options'] = [
   {
-    id: 'svg',
     icon: <FaDownload />,
-    label: 'Export as SVG',
+    text: 'Export as SVG',
+    data: {
+      id: 'svg',
+    },
   },
   {
-    id: 'png',
     icon: <FaFileImage />,
-    label: 'Export as PNG',
+    text: 'Export as PNG',
+    data: {
+      id: 'png',
+    },
   },
   {
-    id: 'json',
     icon: <FaFileDownload />,
-    label: 'Save data ( Press Ctrl + S )',
+    text: 'Save data ( Press Ctrl + S )',
+    data: {
+      id: 'json',
+    },
   },
   {
-    id: 'advance_save',
     icon: <FaFileDownload />,
-    label: 'Save data as  ( Press Ctrl + Shift + S )',
+    text: 'Save data as  ( Press Ctrl + Shift + S )',
+    data: {
+      id: 'advance_save',
+    },
   },
   {
-    id: 'nmre',
     icon: <FaFileDownload />,
-    label: 'Save NMRE data',
+    text: 'Save NMRE data',
+    data: {
+      id: 'nmre',
+    },
   },
   {
-    id: 'copy',
     icon: <FaCopy />,
-    label: 'Copy image to Clipboard ( Press Ctrl + C )',
+    text: 'Copy image to Clipboard ( Press Ctrl + C )',
+    data: {
+      id: 'copy',
+    },
   },
 ];
 
@@ -207,26 +227,25 @@ function BasicToolBarInner({
       />
 
       {isButtonVisible('import') && (
-        <ToolbarMenu
-          component={<FaFileImport />}
-          toolTip="Import"
-          onClick={(element) => {
-            importHandler(element);
-            return null;
+        <DropdownMenu
+          placement="right"
+          onSelect={(data) => {
+            importHandler(data);
           }}
-          items={importMenu}
-        />
+          options={importMenu}
+        >
+          <Toolbar.Item title="Import " icon={<FaFileImport />} />
+        </DropdownMenu>
       )}
       {isButtonVisible('exportAs') && (
-        <ToolbarMenu
-          component={<FaFileExport />}
-          toolTip="Export As"
-          onClick={(element) => {
-            exportHandler(element);
-            return null;
+        <DropdownMenu
+          onSelect={(data) => {
+            exportHandler(data);
           }}
-          items={exportMenu}
-        />
+          options={exportMenu}
+        >
+          <Toolbar.Item title="Export as " icon={<FaFileExport />} />
+        </DropdownMenu>
       )}
 
       {isButtonVisible('spectraStackAlignments') && ftCounter > 1 && (
@@ -235,13 +254,14 @@ function BasicToolBarInner({
           className="cheminfo"
           title="Spectra alignment ( Press s )"
           onClick={changeDisplayViewModeHandler}
-        >
-          {verticalAlign === 'stack' ? (
-            <SvgNmrOverlay3Aligned />
-          ) : (
-            <SvgNmrOverlay3 />
-          )}
-        </Toolbar.Item>
+          icon={
+            verticalAlign === 'stack' ? (
+              <SvgNmrOverlay3Aligned />
+            ) : (
+              <SvgNmrOverlay3 />
+            )
+          }
+        />
       )}
       {isButtonVisible('realImaginary') && (
         <Toolbar.Item
@@ -249,9 +269,8 @@ function BasicToolBarInner({
           title={isRealSpectrumShown ? 'Display real ' : 'Display imaginary'}
           onClick={changeSpectrumViewHandler}
           className="cheminfo"
-        >
-          <SvgNmrRealImag />
-        </Toolbar.Item>
+          icon={<SvgNmrRealImag />}
+        />
       )}
       {isButtonVisible('spectraCenterAlignments') &&
         (ftCounter > 0 || fidCounter > 0) && (
@@ -264,15 +283,16 @@ function BasicToolBarInner({
             }
             onClick={alignSpectrumsVerticallyHandler}
             className="cheminfo"
-          >
-            <div style={{ fontSize: 24 }}>
-              {verticalAlign === 'bottom' ? (
-                <SvgNmrAlignCenter />
-              ) : (
-                <SvgNmrAlignBottom />
-              )}
-            </div>
-          </Toolbar.Item>
+            icon={
+              <div style={{ fontSize: 24 }}>
+                {verticalAlign === 'bottom' ? (
+                  <SvgNmrAlignCenter />
+                ) : (
+                  <SvgNmrAlignBottom />
+                )}
+              </div>
+            }
+          />
         )}
     </Fragment>
   );
diff --git a/src/component/toolbar/FunctionToolBar.tsx b/src/component/toolbar/FunctionToolBar.tsx
index c5741d92f2..b5d52f8cf1 100644
--- a/src/component/toolbar/FunctionToolBar.tsx
+++ b/src/component/toolbar/FunctionToolBar.tsx
@@ -88,9 +88,8 @@ function FunctionToolBarInner({
             id="zoom-out"
             onClick={handleFullZoomOut}
             title="Horizontal zoom out ( Press f ), Horizontal and Vertical zoom out, double click ( Press ff )"
-          >
-            <FaExpand />
-          </Toolbar.Item>
+            icon={<FaExpand />}
+          />
         )}
 
         {isButtonVisible('peakPicking') && (
@@ -229,9 +228,8 @@ function FunctionToolBarInner({
           className="cheminfo"
           title={`${options.fft.label} ( Press t )`}
           onClick={handleOnFFTFilter}
-        >
-          <SvgNmrFourierTransform />
-        </Toolbar.Item>
+          icon={<SvgNmrFourierTransform />}
+        />
       )}
       {isButtonVisible('fftDimension1') && (
         <Toolbar.Item
@@ -239,9 +237,8 @@ function FunctionToolBarInner({
           className="cheminfo"
           title={options.fftDimension1.label}
           onClick={handleFFtDimension1Filter}
-        >
-          <SvgNmrFourierTransform />
-        </Toolbar.Item>
+          icon={<SvgNmrFourierTransform />}
+        />
       )}
       {isButtonVisible('fftDimension2') && (
         <Toolbar.Item
@@ -249,9 +246,8 @@ function FunctionToolBarInner({
           className="cheminfo"
           title={options.fftDimension2.label}
           onClick={handleFFtDimension2Filter}
-        >
-          <SvgNmrFourierTransform />
-        </Toolbar.Item>
+          icon={<SvgNmrFourierTransform />}
+        />
       )}
     </>
   );
diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx
index 560af98390..3621b264bc 100644
--- a/src/component/toolbar/ToolBar.tsx
+++ b/src/component/toolbar/ToolBar.tsx
@@ -12,7 +12,7 @@ interface ToolBarInnerProps {
 
 function ToolBarInner({ selectedTool }: ToolBarInnerProps) {
   return (
-    <Toolbar orientation="vertical">
+    <Toolbar vertical intent="none">
       <FunctionToolBar defaultValue={selectedTool} />
       <BasicToolBar />
     </Toolbar>