diff --git a/src/component/elements/toggle/ToggleButton.tsx b/src/component/elements/toggle/ToggleButton.tsx
deleted file mode 100644
index c6182848cf..0000000000
--- a/src/component/elements/toggle/ToggleButton.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useCallback, useState, useEffect, ReactElement } from 'react';
-import { Toolbar } from 'react-science/ui';
-
-interface ToggleButtonProps {
-  isActive?: boolean;
-  value?: any;
-  onChange?: (value: any) => null;
-  children: ReactElement;
-  isVisible?: boolean;
-}
-
-export default function ToggleButton(
-  props: ToggleButtonProps & { title: string; id: string },
-) {
-  const {
-    children,
-    value = null,
-    isActive = false,
-    onChange = () => null,
-    isVisible = true,
-    id,
-    title,
-  } = props;
-
-  const [active, setActive] = useState(props.isActive);
-
-  const toggleButton = useCallback(() => {
-    const _isActive = !active;
-    setActive(_isActive);
-
-    if (_isActive) {
-      onChange(value);
-    } else {
-      onChange(null);
-    }
-  }, [active, onChange, value]);
-
-  useEffect(() => {
-    setActive(isActive);
-  }, [isActive]);
-
-  if (!isVisible) {
-    return null;
-  }
-
-  return (
-    <Toolbar.Item onClick={toggleButton} title={title} id={id} active={active}>
-      {children}
-    </Toolbar.Item>
-  );
-}
diff --git a/src/component/elements/toggle/ToggleButtonGroup.tsx b/src/component/elements/toggle/ToggleButtonGroup.tsx
deleted file mode 100644
index 04d7410058..0000000000
--- a/src/component/elements/toggle/ToggleButtonGroup.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import {
-  useCallback,
-  useState,
-  useMemo,
-  useEffect,
-  Children,
-  cloneElement,
-  ReactNode,
-} from 'react';
-
-import ToggleButton from './ToggleButton';
-
-interface ToggleButtonGroupProps {
-  children: ReactNode;
-  value: string;
-  onChange?: (value: any) => void;
-}
-
-export default function ToggleButtonGroup({
-  children,
-  value,
-  onChange = () => null,
-}: ToggleButtonGroupProps) {
-  const [toggleButtons, setToggleButtons] = useState<any>([]);
-  const handleOnChange = useCallback(
-    (val) => {
-      const _toggles: any[] = [...toggleButtons];
-      const toggles = _toggles.map((toggle) => {
-        return {
-          value: toggle.value,
-          isActive: toggle.value === val,
-        };
-      });
-
-      setToggleButtons(toggles);
-      onChange(val);
-    },
-    [onChange, toggleButtons],
-  );
-
-  const mappedChildren = useMemo(() => {
-    let index = 0;
-    return Children.map(children, (child: any) => {
-      if (child) {
-        if (child.type === ToggleButton) {
-          const _child = cloneElement(child, {
-            onChange: handleOnChange,
-            isActive: toggleButtons[index]?.isActive,
-            index,
-          });
-          index++;
-          return _child;
-        } else {
-          return cloneElement(child);
-        }
-      }
-    });
-  }, [children, handleOnChange, toggleButtons]);
-
-  useEffect(() => {
-    const val = Children.map(children, (child: any) => {
-      if (child && child.type === ToggleButton) {
-        return {
-          value: child.props.value,
-          isActive: child.props.value === value,
-        };
-      }
-    });
-    setToggleButtons(val);
-  }, [children, value]);
-
-  return <>{mappedChildren}</>;
-}
diff --git a/src/component/toolbar/FunctionToolBar.tsx b/src/component/toolbar/FunctionToolBar.tsx
index b5d52f8cf1..153bb495ea 100644
--- a/src/component/toolbar/FunctionToolBar.tsx
+++ b/src/component/toolbar/FunctionToolBar.tsx
@@ -15,8 +15,6 @@ import { Toolbar } from 'react-science/ui';
 
 import { useChartData } from '../context/ChartContext';
 import { useDispatch } from '../context/DispatchContext';
-import ToggleButton from '../elements/toggle/ToggleButton';
-import ToggleButtonGroup from '../elements/toggle/ToggleButtonGroup';
 import { useCheckToolsVisibility } from '../hooks/useCheckToolsVisibility';
 import useDatumWithSpectraStatistics from '../hooks/useDatumWithSpectraStatistics';
 import useToolsFunctions from '../hooks/useToolsFunctions';
@@ -71,157 +69,140 @@ function FunctionToolBarInner({
 
   return (
     <>
-      <ToggleButtonGroup value={option} onChange={handleChange}>
-        {isButtonVisible('zoom') && (
-          <ToggleButton
-            key={options.zoom.id}
-            value={options.zoom.id}
-            id={options.zoom.id}
-            title={`${options.zoom.label}`}
-          >
-            <FaSearchPlus />
-          </ToggleButton>
-        )}
+      {isButtonVisible('zoom') && (
+        <Toolbar.Item
+          onClick={() => handleChange(options.zoom.id)}
+          title={options.zoom.label}
+          id={options.zoom.id}
+          active={option === options.zoom.id}
+          icon={<FaSearchPlus />}
+        />
+      )}
 
-        {isButtonVisible('zoomOut') && (
+      {isButtonVisible('zoomOut') && (
+        <Toolbar.Item
+          id="zoom-out"
+          onClick={handleFullZoomOut}
+          title="Horizontal zoom out ( Press f ), Horizontal and Vertical zoom out, double click ( Press ff )"
+          icon={<FaExpand />}
+        />
+      )}
+
+      {isButtonVisible('peakPicking') && (
+        <Toolbar.Item
+          onClick={() => handleChange(options.peakPicking.id)}
+          title={`${options.peakPicking.label} ( Press p )`}
+          id={options.peakPicking.id}
+          active={option === options.peakPicking.id}
+          icon={<SvgNmrPeakPicking />}
+        />
+      )}
+      {isButtonVisible('integral') && (
+        <Toolbar.Item
+          onClick={() => handleChange(options.integral.id)}
+          title={`${options.integral.label} ( Press i )`}
+          id={options.integral.id}
+          active={option === options.integral.id}
+          icon={<SvgNmrIntegrate />}
+        />
+      )}
+      {isButtonVisible('zonePicking') && (
+        <Toolbar.Item
+          onClick={() => handleChange(options.zonePicking.id)}
+          title={`${options.zonePicking.label} ( Press r )`}
+          id={options.zonePicking.id}
+          active={option === options.zonePicking.id}
+          icon={<FaDiceFour />}
+        />
+      )}
+      {isButtonVisible('slicing') && (
+        <Toolbar.Item
+          onClick={() => handleChange(options.slicing.id)}
+          title={options.slicing.label}
+          id={options.slicing.id}
+          active={option === options.slicing.id}
+          icon={<p>Slic</p>}
+        />
+      )}
+      {isButtonVisible('rangePicking') && (
+        <Toolbar.Item
+          onClick={() => handleChange(options.rangePicking.id)}
+          title={`${options.rangePicking.label} ( Press r )`}
+          id={options.rangePicking.id}
+          active={option === options.rangePicking.id}
+          icon={<SvgNmrRangePicking />}
+        />
+      )}
+      {isButtonVisible('multipleSpectraAnalysis', {
+        checkSpectrumType: false,
+      }) &&
+        ftCounter > 1 && (
           <Toolbar.Item
-            id="zoom-out"
-            onClick={handleFullZoomOut}
-            title="Horizontal zoom out ( Press f ), Horizontal and Vertical zoom out, double click ( Press ff )"
-            icon={<FaExpand />}
+            onClick={() => handleChange(options.multipleSpectraAnalysis.id)}
+            title={options.multipleSpectraAnalysis.label}
+            id={options.multipleSpectraAnalysis.id}
+            active={option === options.multipleSpectraAnalysis.id}
+            icon={<SvgNmrMultipleAnalysis />}
           />
         )}
+      {isButtonVisible('apodization') && (
+        <Toolbar.Item
+          onClick={() => handleChange(options.apodization.id)}
+          title={`${options.apodization.label} (Press a)`}
+          id={options.apodization.id}
+          active={option === options.apodization.id}
+          icon={<SvgNmrApodization />}
+        />
+      )}
+      {isButtonVisible('zeroFilling') && (
+        <Toolbar.Item
+          onClick={() => handleChange(options.zeroFilling.id)}
+          title={`${options.zeroFilling.label} ( Press z )`}
+          id={options.zeroFilling.id}
+          active={option === options.zeroFilling.id}
+          icon={<SvgNmrZeroFilling />}
+        />
+      )}
+      {isButtonVisible('phaseCorrection') && (
+        <Toolbar.Item
+          onClick={() => handleChange(options.phaseCorrection.id)}
+          title={`${options.phaseCorrection.label} ( Press a )`}
+          id={options.phaseCorrection.id}
+          active={option === options.phaseCorrection.id}
+          icon={<SvgNmrPhaseCorrection />}
+        />
+      )}
+      {isButtonVisible('phaseCorrectionTwoDimensions') && (
+        <Toolbar.Item
+          onClick={() => handleChange(options.phaseCorrectionTwoDimensions.id)}
+          title={`${options.phaseCorrectionTwoDimensions.label} ( Press a )`}
+          id={options.phaseCorrectionTwoDimensions.id}
+          active={option === options.phaseCorrectionTwoDimensions.id}
+          icon={<SvgNmrPhaseCorrection />}
+        />
+      )}
 
-        {isButtonVisible('peakPicking') && (
-          <ToggleButton
-            key={options.peakPicking.id}
-            value={options.peakPicking.id}
-            title={`${options.peakPicking.label} ( Press p )`}
-            id={options.peakPicking.id}
-          >
-            <SvgNmrPeakPicking />
-          </ToggleButton>
-        )}
-        {isButtonVisible('integral') && (
-          <ToggleButton
-            key={options.integral.id}
-            value={options.integral.id}
-            id={options.integral.id}
-            title={`${options.integral.label} ( Press i )`}
-          >
-            <SvgNmrIntegrate />
-          </ToggleButton>
-        )}
-        {isButtonVisible('zonePicking') && (
-          <ToggleButton
-            key={options.zonePicking.id}
-            value={options.zonePicking.id}
-            id={options.zonePicking.id}
-            title={`${options.zonePicking.label} ( Press r )`}
-          >
-            <FaDiceFour />
-          </ToggleButton>
-        )}
-        {isButtonVisible('slicing') && (
-          <ToggleButton
-            key={options.slicing.id}
-            value={options.slicing.id}
-            id={options.slicing.id}
-            title={`${options.slicing.label}`}
-          >
-            <p>Slic</p>
-          </ToggleButton>
-        )}
-        {isButtonVisible('rangePicking') && (
-          <ToggleButton
-            key={options.rangePicking.id}
-            value={options.rangePicking.id}
-            title={`${options.rangePicking.label} ( Press r )`}
-            id={options.rangePicking.id}
-          >
-            <SvgNmrRangePicking />
-          </ToggleButton>
-        )}
-        {isButtonVisible('multipleSpectraAnalysis', {
-          checkSpectrumType: false,
-        }) &&
-          ftCounter > 1 && (
-            <ToggleButton
-              key={options.multipleSpectraAnalysis.id}
-              value={options.multipleSpectraAnalysis.id}
-              id={options.multipleSpectraAnalysis.id}
-              title={options.multipleSpectraAnalysis.label}
-            >
-              <SvgNmrMultipleAnalysis />
-            </ToggleButton>
-          )}
-        {isButtonVisible('apodization') && (
-          <ToggleButton
-            key={options.apodization.id}
-            value={options.apodization.id}
-            id={options.apodization.id}
-            title={`${options.apodization.label} (Press a)`}
-          >
-            <SvgNmrApodization />
-          </ToggleButton>
-        )}
-        {isButtonVisible('zeroFilling') && (
-          <ToggleButton
-            key={options.zeroFilling.id}
-            value={options.zeroFilling.id}
-            id={options.zeroFilling.id}
-            title={`${options.zeroFilling.label} ( Press z )`}
-          >
-            <SvgNmrZeroFilling />
-          </ToggleButton>
-        )}
-        {isButtonVisible('phaseCorrection') && (
-          <ToggleButton
-            key={options.phaseCorrection.id}
-            value={options.phaseCorrection.id}
-            id={options.phaseCorrection.id}
-            title={`${options.phaseCorrection.label} ( Press a )`}
-          >
-            <SvgNmrPhaseCorrection />
-          </ToggleButton>
-        )}
-        {isButtonVisible('phaseCorrectionTwoDimensions') && (
-          <ToggleButton
-            key={options.phaseCorrectionTwoDimensions.id}
-            value={options.phaseCorrectionTwoDimensions.id}
-            id={options.phaseCorrectionTwoDimensions.id}
-            title={`${options.phaseCorrectionTwoDimensions.label} ( Press a )`}
-          >
-            <SvgNmrPhaseCorrection />
-          </ToggleButton>
-        )}
+      {isButtonVisible('baselineCorrection') && (
+        <Toolbar.Item
+          onClick={() => handleChange(options.baselineCorrection.id)}
+          title={`${options.baselineCorrection.label} ( Press b )`}
+          id={options.baselineCorrection.id}
+          active={option === options.baselineCorrection.id}
+          icon={<SvgNmrBaselineCorrection />}
+        />
+      )}
 
-        {isButtonVisible('baselineCorrection') && (
-          <ToggleButton
-            key={options.baselineCorrection.id}
-            value={options.baselineCorrection.id}
-            id={options.baselineCorrection.id}
-            title={`${options.baselineCorrection.label} ( Press b )`}
-          >
-            <SvgNmrBaselineCorrection />
-          </ToggleButton>
+      {isButtonVisible('exclusionZones', { checkSpectrumType: false }) &&
+        ftCounter > 0 && (
+          <Toolbar.Item
+            onClick={() => handleChange(options.exclusionZones.id)}
+            title={`${options.exclusionZones.label} ( Press e )`}
+            id={options.exclusionZones.id}
+            active={option === options.exclusionZones.id}
+            icon={<SvgNmrMultipleAnalysis />}
+          />
         )}
 
-        {isButtonVisible('exclusionZones', { checkSpectrumType: false }) &&
-          ftCounter > 0 && (
-            <ToggleButton
-              key={options.exclusionZones.id}
-              value={options.exclusionZones.id}
-              title={`${options.exclusionZones.label} ( Press e )`}
-              id={options.exclusionZones.id}
-            >
-              <div style={{ fontSize: 18 }}>
-                <SvgNmrMultipleAnalysis />
-              </div>
-            </ToggleButton>
-          )}
-      </ToggleButtonGroup>
-
       {isButtonVisible('fft') && (
         <Toolbar.Item
           id={options.fft.id}