diff --git a/src/component/1d-2d/FieldEdition.tsx b/src/component/1d-2d/FieldEdition.tsx
index b90244ef1c..d1ed63cae1 100644
--- a/src/component/1d-2d/FieldEdition.tsx
+++ b/src/component/1d-2d/FieldEdition.tsx
@@ -1,7 +1,6 @@
-/** @jsxImportSource @emotion/react */
 import type { PopoverProps } from '@blueprintjs/core';
 import { Popover } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
 import type { ReactNode } from 'react';
 import { useState } from 'react';
@@ -11,6 +10,12 @@ import * as Yup from 'yup';
 import { Input2Controller } from '../elements/Input2Controller.js';
 import { NumberInput2Controller } from '../elements/NumberInput2Controller.js';
 
+const StyledPopover = styled(Popover)`
+  .field-edition-popover {
+    border-radius: 5px;
+  }
+`;
+
 type InputType = 'number' | 'text';
 
 interface FieldProps {
@@ -51,12 +56,7 @@ export function FieldEdition(props: FieldEditionsProps) {
   }
 
   return (
-    <Popover
-      css={css`
-        .field-edition-popover {
-          border-radius: 5px;
-        }
-      `}
+    <StyledPopover
       popoverClassName="field-edition-popover"
       isOpen={isOpen}
       onClose={() => setIsOpen(false)}
@@ -67,7 +67,7 @@ export function FieldEdition(props: FieldEditionsProps) {
       {...PopoverProps}
     >
       {children}
-    </Popover>
+    </StyledPopover>
   );
 }
 
diff --git a/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx b/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx
index 352f255269..4fd7673964 100644
--- a/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx
+++ b/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { Ranges, Zones } from 'nmr-processing';
 import OCL from 'openchemlib/full';
 import { ResponsiveChart } from 'react-d3-utils';
@@ -32,7 +31,7 @@ interface DraggableStructureProps {
 
 const AUTO_CROP_MARGIN = 30;
 
-const style = css`
+const ReactRnd = styled(Rnd)`
   border: 1px solid transparent;
 
   button {
@@ -100,7 +99,7 @@ export function DraggableStructure(props: DraggableStructureProps) {
   if (!viewerRef) return null;
 
   return (
-    <Rnd
+    <ReactRnd
       default={moleculeView.floating.bounding}
       minWidth={90 + AUTO_CROP_MARGIN * 2}
       minHeight={100 + AUTO_CROP_MARGIN * 2}
@@ -116,7 +115,6 @@ export function DraggableStructure(props: DraggableStructureProps) {
         dragFloatMoleculeHandler({ x, y });
       }}
       resizeHandleWrapperStyle={{ backgroundColor: 'white' }}
-      css={style}
     >
       <div
         className="content"
@@ -167,6 +165,6 @@ export function DraggableStructure(props: DraggableStructureProps) {
         </ResponsiveChart>
       </div>
       {modal}
-    </Rnd>
+    </ReactRnd>
   );
 }
diff --git a/src/component/1d/ExclusionZoneAnnotation.tsx b/src/component/1d/ExclusionZoneAnnotation.tsx
index d630e601c8..9f6d738a26 100644
--- a/src/component/1d/ExclusionZoneAnnotation.tsx
+++ b/src/component/1d/ExclusionZoneAnnotation.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { Filters1D } from 'nmr-processing';
 import { memo } from 'react';
 
@@ -16,7 +15,7 @@ interface ExclusionZoneProps {
   filterId: string;
 }
 
-const style = css`
+const Rect = styled.rect`
   &:hover {
     fill: #ff6f0057 !important;
   }
@@ -43,9 +42,8 @@ function ExclusionZoneAnnotation({
 
   return (
     <g key={zone.id} transform={`translate(${scaleX()(zone.to)},0)`}>
-      <rect
+      <Rect
         x="0"
-        css={style}
         transform={`translate(0,${scaleY()(0) - (vAlign + 5)})`}
         width={`${scaleX()(zone.from) - scaleX()(zone.to)}`}
         height="10px"
diff --git a/src/component/1d/FooterBanner.tsx b/src/component/1d/FooterBanner.tsx
index 0b24bcf4aa..54189384d9 100644
--- a/src/component/1d/FooterBanner.tsx
+++ b/src/component/1d/FooterBanner.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { xFindClosestIndex } from 'ml-spectra-processing';
 import type { ActiveSpectrum, Spectrum1D } from 'nmr-load-save';
 import { memo } from 'react';
@@ -11,70 +10,19 @@ import { useBrushTracker } from '../EventsTrackers/BrushTracker.js';
 import { useMouseTracker } from '../EventsTrackers/MouseTracker.js';
 import { useChartData } from '../context/ChartContext.js';
 import { useScaleChecked } from '../context/ScaleContext.js';
+import { FooterContainer, InfoItem } from '../elements/Footer.js';
 import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
 import { useFormatNumberByNucleus } from '../hooks/useFormatNumberByNucleus.js';
 import useSpectrum from '../hooks/useSpectrum.js';
 
-const styles = css`
-  display: flex;
+const FlexInfoItem = styled(InfoItem)`
   align-items: center;
-  user-select: none;
-  background-color: #f7f7f7;
-  height: 30px;
-  padding: 6px;
-  color: #8d0018;
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-  container-type: inline-size;
-
-  @container (max-width:600px) {
-    .small-width-none {
-      display: none !important;
-    }
-  }
-
-  .flex-row {
-    display: flex;
-    align-items: center;
-  }
-
-  div {
-    margin: 0 10px;
-    display: inline-block;
-
-    .label {
-      font-size: 12px;
-      color: #4d4d4d;
-      font-weight: bold;
-    }
-
-    .value {
-      font-weight: bold;
-      font-size: 14px;
-      display: inline-block;
-    }
-
-    .unit {
-      font-weight: bold;
-      font-size: 10px;
-    }
-
-    .x-value {
-      min-width: 50px;
-    }
-
-    .y-value {
-      min-width: 80px;
-    }
-  }
-
-  .separator {
-    border-left: 2px solid gray;
-    margin: 0 20px;
-    width: 1px;
-    height: 100%;
-  }
+`;
+const Separator = styled.div`
+  border-left: 2px solid gray;
+  margin: 0 20px;
+  width: 1px;
+  height: 100%;
 `;
 
 interface FooterBannerInnerProps {
@@ -112,7 +60,7 @@ function FooterBannerInner({
     position.x > width - margin.right ||
     position.y > height - margin.bottom
   ) {
-    return <div css={styles} />;
+    return <FooterContainer />;
   }
 
   function getXIndex(xPosition) {
@@ -135,82 +83,82 @@ function FooterBannerInner({
   const isBrushing = step === 'brushing' && mouseButton === 'main';
 
   return (
-    <div css={styles}>
+    <FooterContainer>
       <BsCursor />
       <div>
-        <span className="label"> 𝛅: </span>
-        <span className="value">{format(scaleX().invert(position.x))}</span>
-        <span className="unit">ppm</span>
+        <InfoItem.Label> 𝛅: </InfoItem.Label>
+        <InfoItem.Value>{format(scaleX().invert(position.x))}</InfoItem.Value>
+        <InfoItem.Unit>ppm</InfoItem.Unit>
         {activeSpectrum && spectrum?.info?.originFrequency && (
           <>
-            <span className="value">
+            <InfoItem.Value>
               &nbsp;(
               {format(
                 scaleX().invert(position.x) * spectrum?.info?.originFrequency,
                 'hz',
               )}
-            </span>
-            <span className="unit">Hz</span>
-            <span className="value">) </span>
-            <span className="small-width-none">
+            </InfoItem.Value>
+            <InfoItem.Unit>Hz</InfoItem.Unit>
+            <InfoItem.Value>) </InfoItem.Value>
+            <InfoItem>
               <span>,</span>
-              <span className="label"> Index: </span>
-              <span className="value">{getXIndex(position.x)}</span>
-            </span>
+              <InfoItem.Label> Index: </InfoItem.Label>
+              <InfoItem.Value>{getXIndex(position.x)}</InfoItem.Value>
+            </InfoItem>
           </>
         )}
       </div>
 
       {isBrushing && (
-        <div className="flex-row small-width-none">
-          <span className="label"> Δppm: </span>
-          <span className="value">
+        <FlexInfoItem autoHide>
+          <InfoItem.Label> Δppm: </InfoItem.Label>
+          <InfoItem.Value>
             {(scaleX().invert(startX) - scaleX().invert(endX)).toPrecision(6)}
-          </span>
-        </div>
+          </InfoItem.Value>
+        </FlexInfoItem>
       )}
 
       {activeSpectrum && (
-        <div className=" flex-row small-width-none">
+        <FlexInfoItem autoHide>
           {spectrum?.info?.originFrequency && isBrushing && (
             <div>
-              <span className="label"> ΔHz: </span>
-              <span className="value">
+              <InfoItem.Label> ΔHz: </InfoItem.Label>
+              <InfoItem.Value>
                 {(
                   (scaleX().invert(startX) - scaleX().invert(endX)) *
                   spectrum?.info?.originFrequency
                 ).toPrecision(5)}
-              </span>
+              </InfoItem.Value>
             </div>
           )}
           {isBrushing && (
             <div>
-              <span className="label"> ratio :</span>
-              <span className="value">
+              <InfoItem.Label> ratio :</InfoItem.Label>
+              <InfoItem.Value>
                 {(
                   (getYValue(startX) / (getYValue(endX) || Number.MIN_VALUE)) *
                   100
                 ).toFixed(2)}
                 %
-              </span>
+              </InfoItem.Value>
             </div>
           )}
-        </div>
+        </FlexInfoItem>
       )}
 
       {activeSpectrum && (
-        <div className="flex-row small-width-none">
-          <div className="separator" />
+        <FlexInfoItem>
+          <Separator />
           <IoPulseSharp />
           <div>
-            <span className="label">Intensity: </span>
-            <span className="value y-value">
+            <InfoItem.Label>Intensity: </InfoItem.Label>
+            <InfoItem.Value style={{ minWidth: 80 }}>
               {format(getYValue(position.x))}
-            </span>
+            </InfoItem.Value>
           </div>
-        </div>
+        </FlexInfoItem>
       )}
-    </div>
+    </FooterContainer>
   );
 }
 
diff --git a/src/component/1d/LinesSeries.tsx b/src/component/1d/LinesSeries.tsx
index 68910a9b33..6ea29adab9 100644
--- a/src/component/1d/LinesSeries.tsx
+++ b/src/component/1d/LinesSeries.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { Spectrum1D } from 'nmr-load-save';
 
 import { get1DDataXY } from '../../data/data1d/Spectrum1D/get1DDataXY.js';
@@ -16,7 +15,7 @@ import { SPECTRA_BOTTOM_MARGIN } from './utilities/scale.js';
 
 const BOX_SIZE = 10;
 
-const style = css`
+const Rect = styled.rect`
   fill: transparent;
 
   &:hover {
@@ -76,8 +75,7 @@ function HeadlightRectStackMode(props: HeadlightRectStackModeProps) {
   }
 
   return (
-    <rect
-      css={style}
+    <Rect
       y={innerHeight - shiftY * index - BOX_SIZE / 2}
       x={margin.left}
       width={`${innerWidth}px`}
diff --git a/src/component/1d/XAxis.tsx b/src/component/1d/XAxis.tsx
index 27a442efc6..ac93a17861 100644
--- a/src/component/1d/XAxis.tsx
+++ b/src/component/1d/XAxis.tsx
@@ -1,25 +1,12 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import * as d3 from 'd3';
 import { useEffect, useRef } from 'react';
 
 import { useChartData } from '../context/ChartContext.js';
 import { useScale } from '../context/ScaleContext.js';
+import { AxisGroup } from '../elements/AxisGroup.js';
 
-const axisStyles = css`
-  user-select: none;
-
-  path,
-  line {
-    fill: none;
-    stroke: black;
-    stroke-width: 1;
-    shape-rendering: crispedges;
-    user-select: none;
-  }
-`;
-
-const gridStyles = css`
+const GridGroup = styled.g`
   user-select: none;
 
   line {
@@ -81,21 +68,19 @@ function XAxis(props: XAxisProps) {
   return (
     <>
       {show && (
-        <g
+        <AxisGroup
           className="x"
-          css={axisStyles}
           transform={`translate(0,${height - margin.bottom})`}
           ref={refAxis}
         >
           <text fill="#000" x={width - 10} y="30" dy="0.70em" textAnchor="end">
             {label}
           </text>
-        </g>
+        </AxisGroup>
       )}
       {showGrid && (
-        <g
+        <GridGroup
           data-no-export="true"
-          css={gridStyles}
           className="grid"
           ref={refGrid}
           transform={`translate(0,${height - margin.bottom})`}
diff --git a/src/component/1d/YAxis.tsx b/src/component/1d/YAxis.tsx
index cdf9482042..bff6d6d3d0 100644
--- a/src/component/1d/YAxis.tsx
+++ b/src/component/1d/YAxis.tsx
@@ -1,23 +1,9 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
 import * as d3 from 'd3';
 import { useEffect, useRef } from 'react';
 
 import { useChartData } from '../context/ChartContext.js';
 import { useScale } from '../context/ScaleContext.js';
-
-const axisStyles = css`
-  user-select: none;
-
-  path,
-  line {
-    fill: none;
-    stroke: black;
-    stroke-width: 1;
-    shape-rendering: crispedges;
-    user-select: none;
-  }
-`;
+import { AxisGroup } from '../elements/AxisGroup.js';
 
 interface YAxisProps {
   show?: boolean;
@@ -47,9 +33,8 @@ function YAxis(props: YAxisProps) {
   return (
     <>
       {show && (
-        <g
+        <AxisGroup
           className="y"
-          css={axisStyles}
           transform={`translate(${width - 50})`}
           ref={refAxis}
         >
@@ -63,7 +48,7 @@ function YAxis(props: YAxisProps) {
           >
             {label}
           </text>
-        </g>
+        </AxisGroup>
       )}
     </>
   );
diff --git a/src/component/1d/integral/IntegralResizable.tsx b/src/component/1d/integral/IntegralResizable.tsx
index d8cc813d61..17b15a1c0a 100644
--- a/src/component/1d/integral/IntegralResizable.tsx
+++ b/src/component/1d/integral/IntegralResizable.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { Integral } from 'nmr-processing';
 
 import { useChartData } from '../../context/ChartContext.js';
@@ -11,21 +10,13 @@ import { useResizerStatus } from '../../hooks/useResizerStatus.js';
 
 import { IntegralIndicator } from './IntegralIndicator.js';
 
-const stylesOnHover = css`
-  .highlight {
-    fill: transparent;
+const Group = styled.g<{ isActive: boolean }>`
+  rect {
+    fill: ${(props) => (props.isActive ? '#ff6f0057' : 'transparent')};
   }
 
   .target {
-    visibility: hidden;
-  }
-`;
-
-const stylesHighlighted = css`
-  fill: #ff6f0057;
-
-  .target {
-    visibility: visible;
+    visibility: ${(props) => (props.isActive ? 'visible' : 'hidden')};
   }
 `;
 
@@ -79,25 +70,14 @@ function IntegralResizable({
           const width = x2 - x1;
 
           return (
-            <g
-              css={
-                highlight.isActive || isActive
-                  ? stylesHighlighted
-                  : stylesOnHover
-              }
-            >
-              <rect
-                width={width}
-                height={bottom}
-                className="highlight"
-                data-no-export="true"
-              />
+            <Group isActive={highlight.isActive || isActive}>
+              <rect width={width} height={bottom} data-no-export="true" />
               <IntegralIndicator
                 value={integral}
                 format={integralFormat}
                 width={width}
               />
-            </g>
+            </Group>
           );
         }}
       </ResizerWithScale>
diff --git a/src/component/1d/multiplicityTree/MultiplicityTree.tsx b/src/component/1d/multiplicityTree/MultiplicityTree.tsx
index e47050cb59..293d85bb9a 100644
--- a/src/component/1d/multiplicityTree/MultiplicityTree.tsx
+++ b/src/component/1d/multiplicityTree/MultiplicityTree.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { xFindClosestIndex } from 'ml-spectra-processing';
 import type { Spectrum1D } from 'nmr-load-save';
 import type { Range } from 'nmr-processing';
@@ -20,15 +19,13 @@ import { AssignmentActionsButtons } from '../ranges/AssignmentActionsButtons.js'
 import type { TreeNodes } from './generateTreeNodes.js';
 import { generateTreeNodes } from './generateTreeNodes.js';
 
-const styles = {
-  cursor: 'default',
-  opacity: 0.6,
-  strokeWidth: 1,
-};
+const Group = styled.g<{ isActive: boolean; isHighlighted: boolean }>`
+  cursor: default;
+  opacity: ${({ isHighlighted }) => (isHighlighted ? '1' : '0.6')};
+  stroke-width: ${({ isHighlighted }) => (isHighlighted ? '1.5' : '1')}px;
 
-const cssStyle = css`
   .signal-target {
-    visibility: hidden;
+    visibility: ${({ isActive }) => (isActive ? 'visible' : 'hidden')};
   }
 
   &:hover {
@@ -159,10 +156,9 @@ function Tree(props: TreeProps) {
     treeHeight + headTextMargin + multiplicityTextSize + padding * 2;
 
   return (
-    <g
-      style={
-        isHighlighted ? { ...styles, opacity: 1, strokeWidth: 1.5 } : styles
-      }
+    <Group
+      isActive={assignment.isActive}
+      isHighlighted={isHighlighted}
       onMouseEnter={() => {
         assignment.show('x');
         highlight.show();
@@ -172,7 +168,6 @@ function Tree(props: TreeProps) {
         highlight.hide();
       }}
       pointerEvents="bounding-box"
-      {...(!assignment.isActive && { css: cssStyle })}
     >
       <rect
         x={x}
@@ -254,7 +249,7 @@ function Tree(props: TreeProps) {
         onUnAssign={unAssignHandler}
         borderRadius={16}
       />
-    </g>
+    </Group>
   );
 }
 
diff --git a/src/component/1d/ranges/Range.tsx b/src/component/1d/ranges/Range.tsx
index ae5fc0c5b3..0659e33fe4 100644
--- a/src/component/1d/ranges/Range.tsx
+++ b/src/component/1d/ranges/Range.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { Range as RangeType } from 'nmr-processing';
 import { LuLink, LuUnlink } from 'react-icons/lu';
 import { PiTextTBold, PiTextTSlashBold } from 'react-icons/pi';
@@ -34,9 +33,9 @@ import { useScaleX } from '../utilities/scale.js';
 import { AssignmentLabel } from './AssignmentLabel.js';
 import { Atoms } from './Atoms.js';
 
-const style = css`
+const Group = styled.g<{ isActive: boolean }>`
   .target {
-    visibility: hidden;
+    visibility: ${({ isActive }) => (isActive ? 'visible' : 'hidden')};
   }
 
   &:hover {
@@ -180,13 +179,13 @@ function Range({ range, selectedTool, relativeFormat }: RangeProps) {
     },
   ];
   return (
-    <g
+    <Group
       data-testid="range"
       style={{ outline: 'none' }}
       key={id}
       onMouseEnter={mouseEnterHandler}
       onMouseLeave={mouseLeaveHandler}
-      {...(!assignmentRange.isActive && { css: style })}
+      isActive={assignmentRange.isActive}
     >
       <ActionsButtonsPopover
         targetTagName="g"
@@ -236,7 +235,7 @@ function Range({ range, selectedTool, relativeFormat }: RangeProps) {
           }}
         </ResizerWithScale>
       </ActionsButtonsPopover>
-    </g>
+    </Group>
   );
 }
 
diff --git a/src/component/2d/1d-tracer/phase-correction-traces/SpectraPhaseTraces.tsx b/src/component/2d/1d-tracer/phase-correction-traces/SpectraPhaseTraces.tsx
index f6ddff0777..702c8a9d83 100644
--- a/src/component/2d/1d-tracer/phase-correction-traces/SpectraPhaseTraces.tsx
+++ b/src/component/2d/1d-tracer/phase-correction-traces/SpectraPhaseTraces.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 import { useChartData } from '../../../context/ChartContext.js';
 import {
@@ -16,7 +15,7 @@ import { useActivePhaseTraces } from './useActivePhaseTraces.js';
 
 const BOX_SIZE = 20;
 
-const style = css`
+const Rect = styled.rect`
   fill: transparent;
 
   &:hover {
@@ -69,8 +68,7 @@ function PhaseTrace(props: SpectrumTraceProps) {
       {...highlight.onHover}
     >
       {direction === 'horizontal' && (
-        <rect
-          css={style}
+        <Rect
           y={transformY}
           x={margin.left}
           width={`${innerWidth}px`}
@@ -78,8 +76,7 @@ function PhaseTrace(props: SpectrumTraceProps) {
         />
       )}
       {direction === 'vertical' && (
-        <rect
-          css={style}
+        <Rect
           y={margin.top}
           x={transformX}
           width={`${BOX_SIZE}px`}
diff --git a/src/component/2d/FooterBanner.tsx b/src/component/2d/FooterBanner.tsx
index 100d8b785f..7d7ce21f96 100644
--- a/src/component/2d/FooterBanner.tsx
+++ b/src/component/2d/FooterBanner.tsx
@@ -1,5 +1,3 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
 import { xFindClosestIndex } from 'ml-spectra-processing';
 import { Fragment, useMemo } from 'react';
 import { MF } from 'react-mf';
@@ -12,6 +10,7 @@ import {
 import { useBrushTracker } from '../EventsTrackers/BrushTracker.js';
 import { useMouseTracker } from '../EventsTrackers/MouseTracker.js';
 import { useChartData } from '../context/ChartContext.js';
+import { FooterContainer, InfoItem } from '../elements/Footer.js';
 import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
 import { useFormatNumberByNucleus } from '../hooks/useFormatNumberByNucleus.js';
 import { options } from '../toolbar/ToolTypes.js';
@@ -19,47 +18,6 @@ import { options } from '../toolbar/ToolTypes.js';
 import { getLayoutID, LAYOUT } from './utilities/DimensionLayout.js';
 import { get1DYScale, get2DXScale, get2DYScale } from './utilities/scale.js';
 
-const styles = css`
-  display: flex;
-  align-items: center;
-  user-select: none;
-  background-color: #f7f7f7;
-  height: 30px;
-  padding: 6px;
-  color: #8d0018;
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-  container-type: inline-size;
-
-  @container (max-width:600px) {
-    .small-width-none {
-      display: none !important;
-    }
-  }
-
-  div {
-    margin: 0 10px;
-    display: inline-block;
-
-    .label {
-      font-size: 12px;
-      color: #4d4d4d;
-      font-weight: bold;
-    }
-
-    .value {
-      font-weight: bold;
-      font-size: 14px;
-    }
-
-    .unit {
-      font-weight: bold;
-      font-size: 10px;
-    }
-  }
-`;
-
 function FooterBanner({ layout, data1D }) {
   const position = useMouseTracker();
   const { startX, endX, startY, endY, step, mouseButton } = useBrushTracker();
@@ -154,7 +112,7 @@ function FooterBanner({ layout, data1D }) {
     position.y > height - margin.bottom ||
     !data1D
   ) {
-    return <div css={styles} />;
+    return <FooterContainer />;
   }
   const getRealYValue = (coordinate) => {
     let index: number | null = null;
@@ -272,36 +230,36 @@ function FooterBanner({ layout, data1D }) {
   const isBrushing = step === 'brushing' && mouseButton === 'main';
 
   return (
-    <div css={styles}>
-      <div>
-        <span className="label">{getLabel('F2', 'X', nuclei[0])} :</span>
-        <span className="value">{formatX(getXValue())}</span>
-        <span className="unit">ppm</span>
-      </div>
+    <FooterContainer>
+      <InfoItem>
+        <InfoItem.Label>{getLabel('F2', 'X', nuclei[0])} :</InfoItem.Label>
+        <InfoItem.Value>{formatX(getXValue())}</InfoItem.Value>
+        <InfoItem.Unit>ppm</InfoItem.Unit>
+      </InfoItem>
 
-      <div>
-        <span className="label">{getLabel('F1', 'Y', nuclei[1])} :</span>
-        <span className="value">{formatY(getYValue())}</span>
-        <span className="unit">ppm</span>
-      </div>
-      <div className="small-width-none">
-        <span className="label">Intensity :</span>
-        <span className="value">{getZValue()}</span>
-      </div>
+      <InfoItem>
+        <InfoItem.Label>{getLabel('F1', 'Y', nuclei[1])} :</InfoItem.Label>
+        <InfoItem.Value>{formatY(getYValue())}</InfoItem.Value>
+        <InfoItem.Unit>ppm</InfoItem.Unit>
+      </InfoItem>
+      <InfoItem autoHide>
+        <InfoItem.Label>Intensity :</InfoItem.Label>
+        <InfoItem.Value>{getZValue()}</InfoItem.Value>
+      </InfoItem>
       {isBrushing && (
-        <div className="small-width-none">
-          <span className="label"> Δppm :</span>
-          <span className="value">{getDeltaX()}</span>
-        </div>
+        <InfoItem autoHide>
+          <InfoItem.Label> Δppm :</InfoItem.Label>
+          <InfoItem.Value>{getDeltaX()}</InfoItem.Value>
+        </InfoItem>
       )}
 
       {isBrushing && (
-        <div className="small-width-none">
-          <span className="label"> ratio :</span>
-          <span className="value">{getRation()}%</span>
-        </div>
+        <InfoItem autoHide>
+          <InfoItem.Label> ratio :</InfoItem.Label>
+          <InfoItem.Value>{getRation()}%</InfoItem.Value>
+        </InfoItem>
       )}
-    </div>
+    </FooterContainer>
   );
 }
 
diff --git a/src/component/2d/SignalDeltaLine.tsx b/src/component/2d/SignalDeltaLine.tsx
index dbd90b7f94..c92f6145f9 100644
--- a/src/component/2d/SignalDeltaLine.tsx
+++ b/src/component/2d/SignalDeltaLine.tsx
@@ -1,11 +1,10 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 import { useChartData } from '../context/ChartContext.js';
 
 import { useScale2DX, useScale2DY } from './utilities/scale.js';
 
-const lineStyle = css`
+const Line = styled.line`
   stroke: green;
   stroke-width: 2;
   opacity: 0.5;
@@ -26,8 +25,7 @@ function SignalDeltaLine({ delta, axis, show }: SignalDeltaLineProps) {
 
   if (axis === 'X') {
     return (
-      <line
-        css={lineStyle}
+      <Line
         key={`signalLine_${delta}_X`}
         x1={scaleX(delta)}
         x2={scaleX(delta)}
@@ -39,8 +37,7 @@ function SignalDeltaLine({ delta, axis, show }: SignalDeltaLineProps) {
 
   if (axis === 'Y') {
     return (
-      <line
-        css={lineStyle}
+      <Line
         key={`signalLine_${delta}_Y`}
         x1={scaleX(xDomain[0])}
         x2={scaleX(xDomain[1])}
diff --git a/src/component/2d/XAxis.tsx b/src/component/2d/XAxis.tsx
index f9f223f52e..d6e75867be 100644
--- a/src/component/2d/XAxis.tsx
+++ b/src/component/2d/XAxis.tsx
@@ -1,27 +1,13 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
 import * as d3 from 'd3';
 import type { Spectrum2D } from 'nmr-load-save';
 import { memo, useEffect, useRef } from 'react';
 
 import { useChartData } from '../context/ChartContext.js';
+import { AxisGroup } from '../elements/AxisGroup.js';
 import useSpectrum from '../hooks/useSpectrum.js';
 
 import { useScale2DX } from './utilities/scale.js';
 
-const axisStyles = css`
-  user-select: none;
-
-  path,
-  line {
-    fill: none;
-    stroke: black;
-    stroke-width: 1;
-    shape-rendering: crispedges;
-    user-select: none;
-  }
-`;
-
 const defaultMargin = { right: 100, top: 0, left: 0, bottom: 0 };
 
 interface XAxisProps {
@@ -59,9 +45,8 @@ function XAxis(props: XAxisProps) {
   return (
     <>
       {show && (
-        <g
+        <AxisGroup
           className="x"
-          css={axisStyles}
           transform={`translate(0,${
             height - (margin.bottom + marginProps.bottom)
           })`}
@@ -70,7 +55,7 @@ function XAxis(props: XAxisProps) {
           <text fill="#000" x={width - 60} y="20" dy="0.71em" textAnchor="end">
             {spectrum?.info?.isFid ? 'Time [sec]' : 'δ [ppm]'}
           </text>
-        </g>
+        </AxisGroup>
       )}
     </>
   );
diff --git a/src/component/2d/YAxis.tsx b/src/component/2d/YAxis.tsx
index 9f6987ed2a..1800d69b2f 100644
--- a/src/component/2d/YAxis.tsx
+++ b/src/component/2d/YAxis.tsx
@@ -1,27 +1,13 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
 import * as d3 from 'd3';
 import type { Spectrum2D } from 'nmr-load-save';
 import { memo, useEffect, useRef } from 'react';
 
 import { useChartData } from '../context/ChartContext.js';
+import { AxisGroup } from '../elements/AxisGroup.js';
 import useSpectrum from '../hooks/useSpectrum.js';
 
 import { useScale2DY } from './utilities/scale.js';
 
-const axisStyles = css`
-  user-select: none;
-
-  path,
-  line {
-    fill: none;
-    stroke: black;
-    stroke-width: 1;
-    shape-rendering: crispedges;
-    user-select: none;
-  }
-`;
-
 const defaultMargin = { right: 50, top: 0, bottom: 0, left: 0 };
 
 interface YAxisProps {
@@ -62,9 +48,8 @@ function YAxis(props: YAxisProps) {
   }
 
   return (
-    <g
+    <AxisGroup
       className="y"
-      css={axisStyles}
       transform={`translate(${width - marginProps.right})`}
       ref={refAxis}
     >
@@ -78,7 +63,7 @@ function YAxis(props: YAxisProps) {
       >
         {label}
       </text>
-    </g>
+    </AxisGroup>
   );
 }
 
diff --git a/src/component/2d/zones/IndicationLines.tsx b/src/component/2d/zones/IndicationLines.tsx
index f47e4cafb5..4feb6eab3c 100644
--- a/src/component/2d/zones/IndicationLines.tsx
+++ b/src/component/2d/zones/IndicationLines.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { Spectrum1D } from 'nmr-load-save';
 import { useEffect, useState } from 'react';
 
@@ -8,7 +7,7 @@ import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/index.js';
 import { useChartData } from '../../context/ChartContext.js';
 import { useScale2DX, useScale2DY } from '../utilities/scale.js';
 
-const lineStyle = css`
+const Line = styled.line`
   stroke: lightgrey;
   opacity: 0.7;
 `;
@@ -66,8 +65,7 @@ function IndicationLines({ axis, show }: IndicationLinesProps) {
       {deltas1D.map((_delta, i) => {
         if (axis === 'X') {
           return (
-            <line
-              css={lineStyle}
+            <Line
               // eslint-disable-next-line react/no-array-index-key
               key={`indicationLine${axis}${i}`}
               x1={scaleX(_delta)}
@@ -78,8 +76,7 @@ function IndicationLines({ axis, show }: IndicationLinesProps) {
           );
         } else {
           return (
-            <line
-              css={lineStyle}
+            <Line
               // eslint-disable-next-line react/no-array-index-key
               key={`indicationLine${axis}${i}`}
               x1={scaleX(xDomain[0])}
diff --git a/src/component/elements/ActionsButtonsPopover.tsx b/src/component/elements/ActionsButtonsPopover.tsx
index 7b0e9ccd67..a633889848 100644
--- a/src/component/elements/ActionsButtonsPopover.tsx
+++ b/src/component/elements/ActionsButtonsPopover.tsx
@@ -1,12 +1,26 @@
-/** @jsxImportSource @emotion/react */
 import type { PopoverProps } from '@blueprintjs/core';
 import { Popover } from '@blueprintjs/core';
 import type { Interpolation, Theme } from '@emotion/react';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { CSSProperties } from 'react';
 import type { ButtonProps } from 'react-science/ui';
 import { Button } from 'react-science/ui';
 
+const Container = styled.div<Pick<CSSProperties, 'flexDirection' | 'gap'>>`
+  display: flex;
+  flex-direction: ${(props) => props.flexDirection};
+  gap: ${(props) => props.gap}px;
+
+  button,
+  a[role='button'] {
+    border-radius: 50%;
+    min-width: 16px;
+    min-height: 16px;
+    font-size: 10px;
+    padding: 5px;
+  }
+`;
+
 export interface ActionsButtonsPopoverProps
   extends Omit<PopoverProps, 'interactionKind' | 'content'> {
   buttons: Array<
@@ -42,24 +56,7 @@ export function ActionsButtonsPopover(props: ActionsButtonsPopoverProps) {
       interactionKind="hover"
       enforceFocus={false}
       content={
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: direction,
-            gap: space,
-            ...contentStyle,
-          }}
-          css={css`
-            button,
-            a[role='button'] {
-              border-radius: 50%;
-              min-width: 16px;
-              min-height: 16px;
-              font-size: 10px;
-              padding: 5px;
-            }
-          `}
-        >
+        <Container style={contentStyle} flexDirection={direction} gap={space}>
           {buttons
             .filter((button) => button?.visible !== false)
             .map(({ title, visible, ...otherProps }, index) => (
@@ -69,7 +66,7 @@ export function ActionsButtonsPopover(props: ActionsButtonsPopoverProps) {
                 {...otherProps}
               />
             ))}
-        </div>
+        </Container>
       }
       {...otherProps}
     >
diff --git a/src/component/elements/ActiveButton.tsx b/src/component/elements/ActiveButton.tsx
index 9b236b34b3..c226f5bd6c 100644
--- a/src/component/elements/ActiveButton.tsx
+++ b/src/component/elements/ActiveButton.tsx
@@ -1,11 +1,10 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { CSSProperties, ReactNode } from 'react';
 import { memo, useCallback } from 'react';
 
 import ToolTip from './ToolTip/ToolTip.js';
 
-const styles = css`
+const Button = styled.button`
   background-color: #f5f5f5;
   border: none;
   border-radius: 5px;
@@ -57,16 +56,15 @@ function ActiveButton({
   }, [onClick, value]);
   return (
     <ToolTip title={popupTitle} popupPlacement={popupPlacement}>
-      <button
+      <Button
         disabled={disabled}
-        css={styles}
         style={style}
         className={(value ? 'toggle toggle-active ' : 'toggle ') + className}
         type="button"
         onClick={toggleHandler}
       >
         {children}
-      </button>
+      </Button>
     </ToolTip>
   );
 }
diff --git a/src/component/elements/Alert.tsx b/src/component/elements/Alert.tsx
index ba4eb107be..8b5dab8b42 100644
--- a/src/component/elements/Alert.tsx
+++ b/src/component/elements/Alert.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import type { ButtonProps } from '@blueprintjs/core';
 import { Button, Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import styled from '@emotion/styled';
diff --git a/src/component/elements/AxisGroup.tsx b/src/component/elements/AxisGroup.tsx
new file mode 100644
index 0000000000..618f31cd6f
--- /dev/null
+++ b/src/component/elements/AxisGroup.tsx
@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export const AxisGroup = styled.g`
+  user-select: none;
+
+  path,
+  line {
+    fill: none;
+    stroke: black;
+    stroke-width: 1;
+    shape-rendering: crispedges;
+    user-select: none;
+  }
+`;
diff --git a/src/component/elements/ColorInput.tsx b/src/component/elements/ColorInput.tsx
index 15e85933ab..fd89b1d44c 100644
--- a/src/component/elements/ColorInput.tsx
+++ b/src/component/elements/ColorInput.tsx
@@ -1,10 +1,9 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { useCallback, memo, useState, useEffect } from 'react';
 import type { ColorPickerProps } from 'react-science/ui';
 import { ColorPicker } from 'react-science/ui';
 
-const style = css`
+const Container = styled.div`
   display: flex;
   margin: 5px 0;
 
@@ -20,31 +19,6 @@ const style = css`
     text-align: center;
   }
 
-  .color {
-    width: 36px;
-    height: 14px;
-    border-radius: 2px;
-  }
-
-  .swatch {
-    padding: 5px;
-    background: #fff;
-    border-radius: 1px;
-    box-shadow: 0 0 0 1px rgb(0 0 0 / 10%);
-    display: inline-block;
-    cursor: pointer;
-  }
-
-  .color-popover {
-    position: absolute;
-    z-index: 2;
-  }
-
-  .cover {
-    position: fixed;
-    inset: 0;
-  }
-
   .chrome-picker {
     border-radius: 0 !important;
     width: 200px !important;
@@ -65,6 +39,28 @@ const style = css`
   }
 `;
 
+const Switch = styled.div`
+  padding: 5px;
+  background: #fff;
+  border-radius: 1px;
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 10%);
+  display: inline-block;
+  cursor: pointer;
+`;
+const Color = styled.div`
+  width: 36px;
+  height: 14px;
+  border-radius: 2px;
+`;
+const ColorPopover = styled.div`
+  position: absolute;
+  z-index: 2;
+`;
+const Cover = styled.div`
+  position: fixed;
+  inset: 0;
+`;
+
 export interface ColorInputProps {
   value?: string;
   name: string;
@@ -100,21 +96,21 @@ function ColorInput(props: ColorInputProps) {
     [name, onColorChange],
   );
   return (
-    <div css={style}>
-      <div className="swatch" onClick={handleClick}>
-        <div className="color" style={{ backgroundColor: selectedColor }} />
+    <Container>
+      <Switch onClick={handleClick}>
+        <Color style={{ backgroundColor: selectedColor }} />
         <input type="hidden" value={selectedColor} name={name} />
-      </div>
+      </Switch>
       {displayColorPicker ? (
-        <div className="color-popover">
-          <div className="cover" onClick={handleClose} />
+        <ColorPopover>
+          <Cover onClick={handleClose} />
           <ColorPicker
             color={{ hex: selectedColor }}
             onChangeComplete={handleOnColorChanged}
           />
-        </div>
+        </ColorPopover>
       ) : null}
-    </div>
+    </Container>
   );
 }
 
diff --git a/src/component/elements/DraggableDialog.tsx b/src/component/elements/DraggableDialog.tsx
index d2c835f3df..57bd7ac99b 100644
--- a/src/component/elements/DraggableDialog.tsx
+++ b/src/component/elements/DraggableDialog.tsx
@@ -15,7 +15,7 @@ import {
   Overlay2,
 } from '@blueprintjs/core';
 import { SmallCross } from '@blueprintjs/icons';
-import { css, Global } from '@emotion/react';
+import { Global } from '@emotion/react';
 import styled from '@emotion/styled';
 import type { ReactNode, RefObject } from 'react';
 import { useLayoutEffect, useRef } from 'react';
@@ -76,14 +76,13 @@ export function DraggableDialog(props: DraggableDialogProps) {
   return (
     <>
       <Global
-        styles={css`
-          div[class*='-portal']:has(.draggable-portal) {
-            height: 100%;
-            pointer-events: ${hasBackdrop === undefined || hasBackdrop
-              ? 'all'
-              : 'none'};
-          }
-        `}
+        styles={{
+          "div[class*='-portal']:has(.draggable-portal)": {
+            height: '100%',
+            pointerEvents:
+              hasBackdrop === undefined || hasBackdrop ? 'all' : 'none',
+          },
+        }}
       />
       <Overlay2
         {...otherProps}
diff --git a/src/component/elements/Footer.tsx b/src/component/elements/Footer.tsx
new file mode 100644
index 0000000000..c5c09bcccf
--- /dev/null
+++ b/src/component/elements/Footer.tsx
@@ -0,0 +1,63 @@
+import styled from '@emotion/styled';
+import type { CSSProperties, ReactNode } from 'react';
+
+const FooterContainer = styled.div`
+  display: flex;
+  align-items: center;
+  user-select: none;
+  background-color: #f7f7f7;
+  height: 30px;
+  padding: 6px;
+  color: #8d0018;
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  container-type: inline-size;
+`;
+
+interface InfoContainerProps {
+  autoHide?: boolean;
+  display?: CSSProperties['display'];
+}
+
+const InfoContainer = styled.div<InfoContainerProps>`
+  margin: 0 10px;
+  display: ${({ display = 'inline-block' }) => display};
+
+  @container (max-width:600px) {
+    display: ${({ autoHide = false, display = 'inline-block' }) =>
+      autoHide ? 'none' : display} !important;
+  }
+`;
+
+interface InfoItemProps extends InfoContainerProps {
+  children: ReactNode;
+}
+
+function InfoItem(props: InfoItemProps) {
+  const { children, autoHide = false, display = 'inline-block' } = props;
+  return (
+    <InfoContainer autoHide={autoHide} display={display}>
+      {children}
+    </InfoContainer>
+  );
+}
+
+const Span = styled.span`
+  font-weight: bold;
+`;
+
+InfoItem.Label = styled(Span)`
+  font-size: 12px;
+  color: #4d4d4d;
+`;
+
+InfoItem.Value = styled(Span)`
+  font-size: 14px;
+`;
+
+InfoItem.Unit = styled(Span)`
+  font-size: 10px;
+`;
+
+export { InfoItem, FooterContainer };
diff --git a/src/component/elements/Input2Controller.tsx b/src/component/elements/Input2Controller.tsx
index 98efb87aec..1126ca0778 100644
--- a/src/component/elements/Input2Controller.tsx
+++ b/src/component/elements/Input2Controller.tsx
@@ -1,7 +1,5 @@
-/** @jsxImportSource @emotion/react */
-
 import { FormGroup } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { ControllerProps, FieldValues } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
@@ -13,6 +11,17 @@ export interface InputMapValueFunctions {
   mapValue?: (value: any) => string;
 }
 
+const CustomFormGroup = styled(FormGroup)<{ isFill?: boolean }>`
+  ${({ isFill }) =>
+    isFill
+      ? `
+      div {
+                    flex: 1;
+                  }
+   `
+      : ''}
+`;
+
 interface Input2ControllerProps<TFieldValues extends FieldValues = FieldValues>
   extends Omit<Input2Props, 'name'>,
     Pick<ControllerProps<TFieldValues>, 'control' | 'name'>,
@@ -78,20 +87,14 @@ export function Input2Controller<
 
         if (enableErrorMessage && error?.message) {
           return (
-            <FormGroup
+            <CustomFormGroup
               fill={fill}
-              {...(fill && {
-                css: css`
-                  div {
-                    flex: 1;
-                  }
-                `,
-              })}
+              isFill={fill}
               helperText={error.message}
               intent={invalid ? 'danger' : intent}
             >
               {inputComponent}
-            </FormGroup>
+            </CustomFormGroup>
           );
         }
 
diff --git a/src/component/elements/Label.tsx b/src/component/elements/Label.tsx
index 40642ddf54..44035150d3 100644
--- a/src/component/elements/Label.tsx
+++ b/src/component/elements/Label.tsx
@@ -1,9 +1,12 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { CSSProperties, LabelHTMLAttributes, ReactNode } from 'react';
 
 import Button from './Button.js';
 
+const ShortTitle = styled.span`
+  display: none;
+`;
+
 export interface LabelStyle {
   label?: CSSProperties;
   wrapper?: CSSProperties;
@@ -53,9 +56,7 @@ export default function Label(props: LabelProps) {
           <span className={shortTitle ? 'large-label' : ''}>{title}</span>
         )}
         {shortTitle && (
-          <span className="small-label" css={css({ display: 'none' })}>
-            {shortTitle}
-          </span>
+          <ShortTitle className="small-label">{shortTitle}</ShortTitle>
         )}
         {description && (
           <Button.Info
diff --git a/src/component/elements/MenuButton.tsx b/src/component/elements/MenuButton.tsx
index a0d6ec8a4f..153ac429f5 100644
--- a/src/component/elements/MenuButton.tsx
+++ b/src/component/elements/MenuButton.tsx
@@ -1,59 +1,56 @@
 /** @jsxImportSource @emotion/react */
 import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { ReactNode } from 'react';
 import { useState, useCallback, useRef } from 'react';
 
 import ToolTip from './ToolTip/ToolTip.js';
 
-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;
-    }
+const MenuCover = styled.div`
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+`;
+const Menu = styled.div`
+  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;
+const MenuItemButton = styled.button`
+  background-color: transparent;
+  border: none;
+  border-bottom: 0.55px solid whitesmoke;
+  height: 35px;
+  display: table-cell;
+  vertical-align: middle;
+  text-align: left;
+  padding: 0 10px;
+
+  svg {
+    display: inline-block;
   }
 
-  .menu-item {
-    background-color: transparent;
-    border: none;
-    border-bottom: 0.55px solid whitesmoke;
-    height: 35px;
-    display: table-cell;
-    vertical-align: middle;
-    text-align: left;
-    padding: 0 10px;
-
-    svg {
-      display: inline-block;
-    }
-
-    :focus {
-      outline: none !important;
-    }
+  :focus {
+    outline: none !important;
+  }
 
-    span {
-      font-size: 10px;
-      padding: 0 10px;
-    }
+  span {
+    font-size: 10px;
+    padding: 0 10px;
   }
 `;
 
@@ -65,10 +62,10 @@ interface MenuItemProps {
 
 function MenuItem({ icon, label, onClick }: MenuItemProps) {
   return (
-    <button type="button" className="menu-item" onClick={onClick}>
+    <MenuItemButton type="button" onClick={onClick}>
       {icon}
       <span>{label}</span>
-    </button>
+    </MenuItemButton>
   );
 }
 export interface BoundingBox {
@@ -90,8 +87,7 @@ function MenuList({
   onClick,
 }: MenuListProps) {
   return (
-    <div
-      className="menu"
+    <Menu
       style={{
         transform: `translate(${boxBounding.width}px, -${boxBounding.height}px) `,
       }}
@@ -101,7 +97,7 @@ function MenuList({
           <MenuItem key={item.id} {...item} onClick={() => onClick(item)} />
         );
       })}
-    </div>
+    </Menu>
   );
 }
 
@@ -139,7 +135,7 @@ export default function MenuButton({
   );
 
   return (
-    <div style={{ height: 'auto' }} css={menuStyles}>
+    <div>
       <button
         ref={menuButtonRef}
         type="button"
@@ -160,7 +156,7 @@ export default function MenuButton({
         />
       )}
 
-      {isShown && <div className="menu-cover" onClick={closeMenuButton} />}
+      {isShown && <MenuCover onClick={closeMenuButton} />}
     </div>
   );
 }
diff --git a/src/component/elements/MoleculeSelection.tsx b/src/component/elements/MoleculeSelection.tsx
index 4414753689..6ab68f19ee 100644
--- a/src/component/elements/MoleculeSelection.tsx
+++ b/src/component/elements/MoleculeSelection.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { useCallback, useEffect, useState } from 'react';
 import { MF } from 'react-mf';
 import { MolfileSvgRenderer } from 'react-ocl/full';
@@ -8,7 +7,7 @@ import type { StateMoleculeExtended } from '../../data/molecules/Molecule.js';
 
 import { NextPrev } from './NextPrev.js';
 
-const toolbarStyle = css`
+const BarContainer = styled.div`
   display: flex;
   flex-direction: row;
   border-top: 0.55px solid rgb(240 240 240);
@@ -24,32 +23,10 @@ const toolbarStyle = css`
   }
 `;
 
-const moleculeContainerStyle = css`
+const MoleculeContainer = styled.div`
   width: 100%;
   position: relative;
 
-  .slider {
-    height: 180px;
-    width: 100%;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-  }
-
-  .slider p {
-    width: 100%;
-    margin: 0 auto;
-    display: block;
-    position: relative;
-    text-align: center;
-  }
-
-  .slider svg polygon {
-    fill: gray !important;
-  }
-
   button {
     flex: 2;
     padding: 5px;
@@ -65,6 +42,28 @@ const moleculeContainerStyle = css`
   }
 `;
 
+const SliderContent = styled.div`
+  height: 180px;
+  width: 100%;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  p {
+    width: 100%;
+    margin: 0 auto;
+    display: block;
+    position: relative;
+    text-align: center;
+  }
+
+  svg polygon {
+    fill: gray !important;
+  }
+`;
+
 interface MoleculeSelectionProps {
   molecules: StateMoleculeExtended[];
   onChange: (element: number) => void;
@@ -92,17 +91,17 @@ export default function MoleculeSelection(props: MoleculeSelectionProps) {
 
   return (
     <div>
-      <div css={toolbarStyle}>
+      <BarContainer>
         <p>
           {molecules &&
             molecules.length > 0 &&
             `${+(currentIndex + 1)} / ${molecules.length}`}{' '}
         </p>
-      </div>
-      <div css={moleculeContainerStyle}>
+      </BarContainer>
+      <MoleculeContainer>
         <NextPrev index={currentIndex} onChange={onChangeHandler}>
           {molecules?.map((mol, index) => (
-            <div key={mol.id} className="slider">
+            <SliderContent key={mol.id}>
               <div>
                 {mol.molfile && (
                   <MolfileSvgRenderer
@@ -115,10 +114,10 @@ export default function MoleculeSelection(props: MoleculeSelectionProps) {
               <p>
                 <MF mf={mol.mf} /> - {mol.mw?.toFixed(2)}
               </p>
-            </div>
+            </SliderContent>
           ))}
         </NextPrev>
-      </div>
+      </MoleculeContainer>
     </div>
   );
 }
diff --git a/src/component/elements/NextPrev.tsx b/src/component/elements/NextPrev.tsx
index f97d736a40..7cdc2e8919 100644
--- a/src/component/elements/NextPrev.tsx
+++ b/src/component/elements/NextPrev.tsx
@@ -1,54 +1,56 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import type { CSSProperties, ReactElement } from 'react';
 import { Children } from 'react';
 import { FaAngleLeft } from 'react-icons/fa';
 import useResizeObserver from 'use-resize-observer';
 
+type Direction = 'right' | 'left';
+
 interface ArrowProps {
-  direction: 'right' | 'left';
+  direction: Direction;
   onClick: () => void;
   style?: CSSProperties;
 }
 
+const ArrowButton = styled.div<{
+  direction: Direction;
+}>`
+  display: inline-flex;
+  height: 40px;
+  width: 40px;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+  align-items: center;
+  border: none;
+  transition: transform ease-in 0.1s;
+  background-color: #f7f7f7;
+  pointer-events: auto;
+
+  &:hover {
+    transform: scale(1.1);
+    background-color: #607d8b !important;
+    color: white;
+  }
+
+  img {
+    transform: translateX(
+      ${(props) => (props.direction === 'left' ? '-2' : '2')}px
+    );
+
+    &:focus {
+      outline: 0;
+    }
+  }
+`;
+
 function Arrow({ direction, onClick, style = {} }: ArrowProps) {
   return (
-    <div
-      onClick={onClick}
-      css={css`
-        display: inline-flex;
-        height: 40px;
-        width: 40px;
-        justify-content: center;
-        border-radius: 50%;
-        cursor: pointer;
-        align-items: center;
-        border: none;
-        transition: transform ease-in 0.1s;
-        background-color: #f7f7f7;
-        pointer-events: auto;
-
-        &:hover {
-          transform: scale(1.1);
-          background-color: #607d8b !important;
-          color: white;
-        }
-
-        img {
-          transform: translateX(${direction === 'left' ? '-2' : '2'}px);
-
-          &:focus {
-            outline: 0;
-          }
-        }
-      `}
-      style={style}
-    >
+    <ArrowButton onClick={onClick} direction={direction} style={style}>
       <FaAngleLeft
         style={{ transform: `scaleX(${direction === 'right' ? '-1' : '1'})` }}
       />
-    </div>
+    </ArrowButton>
   );
 }
 
@@ -72,6 +74,11 @@ const TransformController = styled.div<{
 `,
 );
 
+const Content = styled.div<{ width: number }>`
+  width: ${(props) => props.width}px;
+  height: 100%;
+`;
+
 const transition = 0.45;
 
 interface NextPrevProps {
@@ -141,15 +148,9 @@ export function NextPrev(props: NextPrevProps) {
       >
         {Children.map(children, (child: ReactElement) => {
           return (
-            <div
-              key={child.key}
-              css={css`
-                width: ${width}px;
-                height: 100%;
-              `}
-            >
+            <Content key={child.key} width={width}>
               {child}
-            </div>
+            </Content>
           );
         })}
       </TransformController>
diff --git a/src/component/elements/Select.tsx b/src/component/elements/Select.tsx
index 875aa333b2..ffa0b516fc 100644
--- a/src/component/elements/Select.tsx
+++ b/src/component/elements/Select.tsx
@@ -1,38 +1,32 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { CSSProperties, ForwardedRef } from 'react';
 import { forwardRef, useCallback } from 'react';
 
 const arrowDownIcon = `url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve"><g id="Rounded_Rectangle_33_copy_4_1_"><path d="M480,344.181L268.869,131.889c-15.756-15.859-41.3-15.859-57.054,0c-15.754,15.857-15.754,41.57,0,57.431l237.632,238.937c8.395,8.451,19.562,12.254,30.553,11.698c10.993,0.556,22.159-3.247,30.555-11.698l237.631-238.937c15.756-15.86,15.756-41.571,0-57.431s-41.299-15.859-57.051,0L480,344.181z"/></g></svg>')`;
 
-const styles = {
-  select: (width: number | string | undefined) => {
-    const widthValue = width ? Number(width) - 5 : 115;
-    return css`
-      padding: 0 5px;
-      border: 0.55px solid #cacaca;
-      font-size: 14px;
-      width: ${widthValue}px;
-      margin: 0;
-      height: 100%;
-      background: ${arrowDownIcon} no-repeat right white;
-      appearance: none;
-      background-position-x: calc(100% - 5px);
-      background-size: 15px 15px;
-      border-radius: 5px;
-      align-self: center;
+const BaseSelect = styled.select<{ width: number | string | undefined }>`
+  padding: 0 5px;
+  border: 0.55px solid #cacaca;
+  font-size: 14px;
+  width: ${({ width }) => (width ? Number(width) - 5 : 115)}px;
+  margin: 0;
+  height: 100%;
+  background: ${arrowDownIcon} no-repeat right white;
+  appearance: none;
+  background-position-x: calc(100% - 5px);
+  background-size: 15px 15px;
+  border-radius: 5px;
+  align-self: center;
 
-      &:focus,
-      input:focus {
-        outline: none;
-      }
+  &:focus,
+  input:focus {
+    outline: none;
+  }
 
-      &:required:invalid {
-        color: #666;
-      }
-    `;
-  },
-};
+  &:required:invalid {
+    color: #666;
+  }
+`;
 
 export interface SelectProps
   extends Omit<
@@ -79,9 +73,9 @@ const Select = forwardRef(function Select(
     [itemValueField, onChange, returnValue],
   );
   return (
-    <select
+    <BaseSelect
       ref={ref}
-      css={styles.select(style?.width)}
+      width={style?.width}
       name={name}
       onChange={handleOnChanged}
       defaultValue={defaultValue}
@@ -131,7 +125,7 @@ const Select = forwardRef(function Select(
           </option>
         );
       })}
-    </select>
+    </BaseSelect>
   );
 });
 
diff --git a/src/component/elements/StyledDialogBody.tsx b/src/component/elements/StyledDialogBody.tsx
new file mode 100644
index 0000000000..6d77348f13
--- /dev/null
+++ b/src/component/elements/StyledDialogBody.tsx
@@ -0,0 +1,10 @@
+import { DialogBody } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import type { CSSProperties } from 'react';
+
+export const StyledDialogBody = styled(DialogBody)<
+  Pick<CSSProperties, 'padding' | 'backgroundColor'>
+>`
+  padding: ${({ padding = '15px' }) => padding};
+  background-color: ${({ backgroundColor = 'white' }) => backgroundColor};
+`;
diff --git a/src/component/elements/Tab/DeleteButton.tsx b/src/component/elements/Tab/DeleteButton.tsx
index 3c379ef001..b701447a23 100644
--- a/src/component/elements/Tab/DeleteButton.tsx
+++ b/src/component/elements/Tab/DeleteButton.tsx
@@ -1,9 +1,8 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { CSSProperties } from 'react';
 import { FaTimes } from 'react-icons/fa';
 
-const styles = css`
+const BaseButton = styled.button`
   border-radius: 50%;
   width: 16px;
   height: 16px;
@@ -41,15 +40,14 @@ function DeleteButton({
   style = {},
 }: DeleteButtonProps) {
   return (
-    <button
-      css={styles}
+    <BaseButton
       className={className}
       style={style}
       type="button"
       onClick={onDelete}
     >
       <FaTimes className="icon" />
-    </button>
+    </BaseButton>
   );
 }
 
diff --git a/src/component/elements/ToggleButton.tsx b/src/component/elements/ToggleButton.tsx
index af47861f04..99b8a87690 100644
--- a/src/component/elements/ToggleButton.tsx
+++ b/src/component/elements/ToggleButton.tsx
@@ -1,11 +1,10 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { CSSProperties, ReactNode } from 'react';
 import { memo, useCallback, useState } from 'react';
 
 import ToolTip from './ToolTip/ToolTip.js';
 
-const styles = css`
+const Button = styled.button`
   background-color: #f5f5f5;
   border: none;
   border-radius: 5px;
@@ -52,16 +51,15 @@ function ToggleButton({
   }, [onClick, flag]);
   return (
     <ToolTip title={popupTitle} popupPlacement={popupPlacement}>
-      <button
+      <Button
         disabled={disabled}
-        css={styles}
         style={style}
         className={(flag ? 'toggle toggle-active ' : 'toggle ') + className}
         type="button"
         onClick={toggleHandler}
       >
         {children}
-      </button>
+      </Button>
     </ToolTip>
   );
 }
diff --git a/src/component/elements/ToolbarPopoverItem.tsx b/src/component/elements/ToolbarPopoverItem.tsx
index 2bd9e18a4d..72b32ce522 100644
--- a/src/component/elements/ToolbarPopoverItem.tsx
+++ b/src/component/elements/ToolbarPopoverItem.tsx
@@ -1,7 +1,7 @@
 import type { MenuItemProps } from '@blueprintjs/core';
 import { Menu, MenuItem } from '@blueprintjs/core';
 import type {
-  ToolbarPopoverItemProps as BaseToolbarPopoverItemProps,
+  ToolbarPopoverItemProps,
   ToolbarItemProps,
 } from 'react-science/ui';
 import { Toolbar } from 'react-science/ui';
@@ -10,11 +10,8 @@ export interface ToolbarPopoverMenuItem<T = object> extends MenuItemProps {
   data?: T;
 }
 
-interface ToolbarPopoverItemProps<T = object>
-  extends Omit<
-      BaseToolbarPopoverItemProps,
-      'onClick' | 'content' | 'itemProps'
-    >,
+interface CustomToolbarPopoverItemProps<T = object>
+  extends Omit<ToolbarPopoverItemProps, 'onClick' | 'content' | 'itemProps'>,
     Pick<
       ToolbarItemProps,
       'tooltip' | 'icon' | 'tooltipProps' | 'active' | 'id'
@@ -25,7 +22,7 @@ interface ToolbarPopoverItemProps<T = object>
 }
 
 export function ToolbarPopoverItem<T = object>(
-  props: ToolbarPopoverItemProps<T>,
+  props: CustomToolbarPopoverItemProps<T>,
 ) {
   const {
     options,
diff --git a/src/component/elements/dropDownButton/DropDownButton.tsx b/src/component/elements/dropDownButton/DropDownButton.tsx
index 083ae00422..d75d538e45 100644
--- a/src/component/elements/dropDownButton/DropDownButton.tsx
+++ b/src/component/elements/dropDownButton/DropDownButton.tsx
@@ -1,12 +1,15 @@
-/** @jsxImportSource @emotion/react */
 import { Popover, Button } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { CSSProperties, ReactNode } from 'react';
 import { useEffect, useState } from 'react';
 import { FaEllipsisH } from 'react-icons/fa';
 
 import DropDownList from './DropDownList.js';
 
+const PopoverButton = styled(Button)`
+  border: 0.55px solid lightgray;
+  border-radius: 5px;
+`;
 export interface DropDownListItem {
   key: string;
   label: string;
@@ -80,17 +83,13 @@ function DropDownButton<T extends DropDownListItem>(
         />
       }
     >
-      <Button
+      <PopoverButton
         style={{ boxShadow: 'none', ...style }}
-        css={css`
-          border: 0.55px solid lightgray;
-          border-radius: 5px;
-        `}
         rightIcon="chevron-down"
         onClick={() => setOpen((flag) => !flag)}
       >
         {!item ? <FaEllipsisH /> : formatSelectedValue(item)}
-      </Button>
+      </PopoverButton>
     </Popover>
   );
 }
diff --git a/src/component/elements/dropDownButton/DropDownList.tsx b/src/component/elements/dropDownButton/DropDownList.tsx
index cf104b6bc1..8b21c629f8 100644
--- a/src/component/elements/dropDownButton/DropDownList.tsx
+++ b/src/component/elements/dropDownButton/DropDownList.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 import type {
   DropDownListItem,
@@ -7,31 +6,30 @@ import type {
   ItemProps,
 } from './DropDownButton.js';
 
-const styles = {
-  ul: css`
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-  `,
-  li: css`
-    text-align: center;
-    white-space: nowrap;
-    color: black;
-    border-bottom: 0.55px solid #f9f9f9;
+const Menu = styled.ul`
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+`;
+const MenuItem = styled.li`
+  text-align: center;
+  white-space: nowrap;
+  color: black;
+  border-bottom: 0.55px solid #f9f9f9;
 
-    &:last-of-type {
-      border-bottom: none;
-    }
+  &:last-of-type {
+    border-bottom: none;
+  }
 
-    &:hover {
-      background-color: #f6f6f6;
-    }
-  `,
-  label: css`
-    padding: 5px 20px;
-    display: block;
-  `,
-};
+  &:hover {
+    background-color: #f6f6f6;
+  }
+`;
+
+const Text = styled.span`
+  padding: 5px 20px;
+  display: block;
+`;
 
 interface InnerDropDownListProps<T>
   extends DropDownListProps<T>,
@@ -49,10 +47,9 @@ function DropDownList({
 }: InnerDropDownListProps<DropDownListItem>) {
   return (
     <div>
-      <ul css={styles.ul}>
+      <Menu>
         {data.map((item, index) => (
-          <li
-            css={styles.li}
+          <MenuItem
             key={item[itemKey]}
             onClick={(e) => {
               e.stopPropagation();
@@ -64,12 +61,10 @@ function DropDownList({
               cursor: 'pointer',
             }}
           >
-            {renderItem?.(item) || (
-              <span css={styles.label}>{item[labelKey]}</span>
-            )}
-          </li>
+            {renderItem?.(item) || <Text>{item[labelKey]}</Text>}
+          </MenuItem>
         ))}
-      </ul>
+      </Menu>
     </div>
   );
 }
diff --git a/src/component/elements/export/ExportOptionsModal.tsx b/src/component/elements/export/ExportOptionsModal.tsx
index 254e056d30..e243529df3 100644
--- a/src/component/elements/export/ExportOptionsModal.tsx
+++ b/src/component/elements/export/ExportOptionsModal.tsx
@@ -1,15 +1,12 @@
-/** @jsxImportSource @emotion/react */
 import {
   Button,
   Dialog,
-  DialogBody,
   DialogFooter,
   Radio,
   RadioGroup,
   SegmentedControl,
   Tag,
 } from '@blueprintjs/core';
-import { css } from '@emotion/react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import type {
   AdvanceExportSettings,
@@ -25,6 +22,7 @@ import type { LabelStyle } from '../Label.js';
 import Label from '../Label.js';
 import { NumberInput2Controller } from '../NumberInput2Controller.js';
 import { Select2Controller } from '../Select2Controller.js';
+import { StyledDialogBody } from '../StyledDialogBody.js';
 import type { SizeItem } from '../print/pageSize.js';
 import { getSizesList } from '../print/pageSize.js';
 
@@ -160,11 +158,7 @@ function InnerExportOptionsModal(props: InnerExportOptionsModalProps) {
       canEscapeKeyClose
       autoFocus
     >
-      <DialogBody
-        css={css`
-          background-color: white;
-        `}
-      >
+      <StyledDialogBody>
         <div
           style={{
             display: 'flex',
@@ -298,7 +292,7 @@ function InnerExportOptionsModal(props: InnerExportOptionsModalProps) {
             placeholder="DPI"
           />
         </Label>
-      </DialogBody>
+      </StyledDialogBody>
       <DialogFooter>
         <div
           style={{
diff --git a/src/component/elements/print/PrintContent.tsx b/src/component/elements/print/PrintContent.tsx
index d05cb8a8c7..187ca429f4 100644
--- a/src/component/elements/print/PrintContent.tsx
+++ b/src/component/elements/print/PrintContent.tsx
@@ -1,13 +1,10 @@
-/** @jsxImportSource @emotion/react */
 import {
   Dialog,
-  DialogBody,
   DialogFooter,
   Radio,
   RadioGroup,
   Tag,
 } from '@blueprintjs/core';
-import { css } from '@emotion/react';
 import type { PageSizeName, PrintPageOptions } from 'nmr-load-save';
 import type { CSSProperties, ReactNode } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -19,6 +16,7 @@ import type { LabelStyle } from '../Label.js';
 import Label from '../Label.js';
 import { NumberInput2Controller } from '../NumberInput2Controller.js';
 import { Select2Controller } from '../Select2Controller.js';
+import { StyledDialogBody } from '../StyledDialogBody.js';
 
 import { PrintProvider } from './PrintProvider.js';
 import { getSizesList, pageSizes } from './pageSize.js';
@@ -351,11 +349,7 @@ function InnerPrintOptionsModal(props: InnerPrintOptionsModalProps) {
       onClose={onCloseDialog}
       style={{ width: 600 }}
     >
-      <DialogBody
-        css={css`
-          background-color: white;
-        `}
-      >
+      <StyledDialogBody>
         <Label style={labelStyle} title="Size">
           <Select2Controller control={control} name="size" items={sizesList} />
         </Label>
@@ -388,7 +382,7 @@ function InnerPrintOptionsModal(props: InnerPrintOptionsModalProps) {
             rightElement={<Tag>cm</Tag>}
           />
         </Label>
-      </DialogBody>
+      </StyledDialogBody>
       <DialogFooter>
         <ActionButtons
           style={{ flexDirection: 'row-reverse', margin: 0 }}
diff --git a/src/component/elements/resizer/SVGResizer.tsx b/src/component/elements/resizer/SVGResizer.tsx
index b103dc515f..403086ec42 100644
--- a/src/component/elements/resizer/SVGResizer.tsx
+++ b/src/component/elements/resizer/SVGResizer.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable react/no-unused-prop-types */
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { CSSProperties } from 'react';
 
 import useResizer from './useResizer.js';
@@ -23,15 +22,13 @@ const style: Record<'anchor' | 'innerContainer', CSSProperties> = {
   },
 };
 
-const styles = {
-  container: css`
-    &:hover {
-      rect:last-child {
-        fill: red !important;
-      }
+const Group = styled.g`
+  &:hover {
+    rect:last-child {
+      fill: red !important;
     }
-  `,
-};
+  }
+`;
 
 export interface Position {
   x1: number;
@@ -79,14 +76,13 @@ function SVGResizerHandle(props: {
   position: number;
 }) {
   return (
-    <g
+    <Group
       onPointerDown={props.onPointerDown}
-      css={styles.container}
       transform={`translate(${props.position})`}
       data-no-export="true"
     >
       <rect x="-5px" style={style.innerContainer} />
       <rect x="-2.5px" style={style.anchor} />
-    </g>
+    </Group>
   );
 }
diff --git a/src/component/header/Header.tsx b/src/component/header/Header.tsx
index 886c01f296..5a4c9337fc 100644
--- a/src/component/header/Header.tsx
+++ b/src/component/header/Header.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { memo, useMemo } from 'react';
 import {
   FaFilm,
@@ -55,7 +54,7 @@ export const headerLabelStyle: LabelStyle = {
   },
 };
 
-const styles = css`
+const Container = styled.div`
   container-type: inline-size;
   z-index: 1;
 
@@ -144,7 +143,7 @@ function HeaderInner(props: HeaderInnerProps) {
   }
 
   return (
-    <div css={styles}>
+    <Container>
       <HeaderContainer
         style={{ leftStyle: { flex: 1 }, containerStyle: { padding: '2px' } }}
       >
@@ -213,7 +212,7 @@ function HeaderInner(props: HeaderInnerProps) {
           </div>
         </HeaderWrapper>
       </HeaderContainer>
-    </div>
+    </Container>
   );
 }
 
diff --git a/src/component/hooks/useSaveSettings.tsx b/src/component/hooks/useSaveSettings.tsx
index edfee1c82d..f16693bbc1 100644
--- a/src/component/hooks/useSaveSettings.tsx
+++ b/src/component/hooks/useSaveSettings.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
diff --git a/src/component/loader/DefaultSpinnerComponent.tsx b/src/component/loader/DefaultSpinnerComponent.tsx
index ad76c976ed..3056ba9e56 100644
--- a/src/component/loader/DefaultSpinnerComponent.tsx
+++ b/src/component/loader/DefaultSpinnerComponent.tsx
@@ -1,7 +1,6 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
-const styles = css`
+const Container = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -38,7 +37,7 @@ export default function DefaultSpinnerComponent({
   loadingText = 'Loading ...',
 }) {
   return (
-    <div css={styles}>
+    <Container>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
         <g fill="#61DAFB">
           <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z" />
@@ -46,6 +45,6 @@ export default function DefaultSpinnerComponent({
         </g>
       </svg>
       <p>{loadingText}</p>
-    </div>
+    </Container>
   );
 }
diff --git a/src/component/loader/DropZone.tsx b/src/component/loader/DropZone.tsx
index 5b0cbc7e29..e1fbc5b4fe 100644
--- a/src/component/loader/DropZone.tsx
+++ b/src/component/loader/DropZone.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { ReactNode } from 'react';
 import { useCallback, useState } from 'react';
 import * as dropzone from 'react-dropzone';
@@ -12,7 +11,7 @@ import { MetaImportationModal } from '../modal/metaImportation/MetaImportationMo
 
 import { useLoadFiles } from './useLoadFiles.js';
 
-const style = css`
+const DropContainer = styled.div`
   height: 100%;
   background-color: #b5b5b599;
   position: absolute;
@@ -22,14 +21,6 @@ const style = css`
   flex-flow: column;
   z-index: 8;
 
-  p {
-    color: white;
-    background-color: rgb(104 104 104);
-    padding: 1.5%;
-    border-radius: 30px;
-    margin: 0;
-  }
-
   svg {
     stroke-width: 0;
     font-size: 3rem !important;
@@ -37,7 +28,15 @@ const style = css`
   }
 `;
 
-const containerStyle = css`
+const DropText = styled.p`
+  color: white;
+  background-color: rgb(104 104 104);
+  padding: 1.5%;
+  border-radius: 30px;
+  margin: 0;
+`;
+
+const Container = styled.div`
   display: flex;
   height: 100%;
 `;
@@ -83,11 +82,10 @@ export default function DropZone(props: DropZoneProps) {
           onCloseDialog={() => openMetaInformationDialog(null)}
         />
       )}
-      <div {...getRootProps()} role="none" css={containerStyle}>
+      <Container {...getRootProps()} role="none">
         <input {...getInputProps()} />
         {isDragActive && (
-          <div
-            css={style}
+          <DropContainer
             style={{
               width: `${width}px`,
               height: `${height}px`,
@@ -96,11 +94,11 @@ export default function DropZone(props: DropZoneProps) {
             }}
           >
             <FaUpload />
-            <p>Drop your files here</p>
-          </div>
+            <DropText>Drop your files here</DropText>
+          </DropContainer>
         )}
         {props.children}
-      </div>
+      </Container>
     </LoaderProvider>
   );
 }
diff --git a/src/component/modal/AboutPredictionModal.tsx b/src/component/modal/AboutPredictionModal.tsx
index 23acee7844..5c1267ba61 100644
--- a/src/component/modal/AboutPredictionModal.tsx
+++ b/src/component/modal/AboutPredictionModal.tsx
@@ -1,12 +1,11 @@
-/** @jsxImportSource @emotion/react */
-import { Dialog, DialogBody } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Dialog } from '@blueprintjs/core';
+import styled from '@emotion/styled';
 import { FaInfo } from 'react-icons/fa';
 import { Toolbar, useOnOff } from 'react-science/ui';
 
-const styles = css`
-  background-color: white;
+import { StyledDialogBody } from '../elements/StyledDialogBody.js';
 
+const DialogBody = styled(StyledDialogBody)`
   ul {
     list-style-type: disc;
     margin-left: 25px;
@@ -54,7 +53,7 @@ function AboutPredictionModal() {
         title="About prediction"
         style={{ width: '600px' }}
       >
-        <DialogBody css={styles}>
+        <DialogBody>
           <p>If you are using our tools please cite us:</p>
           <ul>
             <li>
diff --git a/src/component/modal/AboutSpectrumSimulationModal.tsx b/src/component/modal/AboutSpectrumSimulationModal.tsx
index 2192f54000..79e0f1e700 100644
--- a/src/component/modal/AboutSpectrumSimulationModal.tsx
+++ b/src/component/modal/AboutSpectrumSimulationModal.tsx
@@ -1,10 +1,11 @@
-/** @jsxImportSource @emotion/react */
-import { Dialog, DialogBody } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Dialog } from '@blueprintjs/core';
+import styled from '@emotion/styled';
 import { FaInfo } from 'react-icons/fa';
 import { Toolbar, useOnOff } from 'react-science/ui';
 
-const styles = css`
+import { StyledDialogBody } from '../elements/StyledDialogBody.js';
+
+const DialogBody = styled(StyledDialogBody)`
   background-color: white;
 
   ul {
@@ -56,7 +57,7 @@ function AboutSpectrumSimulationModal() {
         title="About spectrum simulation"
         style={{ width: '600px' }}
       >
-        <DialogBody css={styles}>
+        <DialogBody>
           <p>If you are using our tools please cite us:</p>
           <ul>
             <li>
diff --git a/src/component/modal/CopyClipboardModal.tsx b/src/component/modal/CopyClipboardModal.tsx
index e2596aa718..e521463fc1 100644
--- a/src/component/modal/CopyClipboardModal.tsx
+++ b/src/component/modal/CopyClipboardModal.tsx
@@ -1,9 +1,9 @@
-/** @jsxImportSource @emotion/react */
-import { Button, Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Button, Dialog, DialogFooter } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { FaCopy } from 'react-icons/fa';
 
+import { StyledDialogBody } from '../elements/StyledDialogBody.js';
+
 const Body = styled.div`
   padding: 5px;
   width: 100%;
@@ -30,13 +30,9 @@ function InnerCopyClipboardModal(props: Required<CopyClipboardModalProps>) {
   const { text, title, onClose, onCopyClick } = props;
   return (
     <Dialog isOpen title={title} onClose={onClose}>
-      <DialogBody
-        css={css`
-          background-color: white;
-        `}
-      >
+      <StyledDialogBody>
         <Body dangerouslySetInnerHTML={{ __html: text }} />
-      </DialogBody>
+      </StyledDialogBody>
       <DialogFooter>
         <Button
           onClick={() => onCopyClick(text)}
diff --git a/src/component/modal/EditPeakShapeModal.tsx b/src/component/modal/EditPeakShapeModal.tsx
index 9e54472d9d..5603fb3194 100644
--- a/src/component/modal/EditPeakShapeModal.tsx
+++ b/src/component/modal/EditPeakShapeModal.tsx
@@ -1,6 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Dialog, DialogFooter } from '@blueprintjs/core';
 import { yupResolver } from '@hookform/resolvers/yup';
 import type { Peak1D } from 'nmr-processing';
 import { useState } from 'react';
@@ -14,6 +12,7 @@ import type { LabelStyle } from '../elements/Label.js';
 import Label from '../elements/Label.js';
 import { NumberInput2Controller } from '../elements/NumberInput2Controller.js';
 import { Select2 } from '../elements/Select2.js';
+import { StyledDialogBody } from '../elements/StyledDialogBody.js';
 import { usePanelPreferences } from '../hooks/usePanelPreferences.js';
 import { formatNumber } from '../utility/formatNumber.js';
 
@@ -130,12 +129,7 @@ function InnerEditPeakShapeModal(props: Required<EditPeakShapeModalProps>) {
       onClose={onCloseDialog}
       title={`Peak Shape Edition ( ${valuePPM} PPM )`}
     >
-      <DialogBody
-        css={css`
-          background-color: white;
-          padding: 1.5em 3em;
-        `}
-      >
+      <StyledDialogBody padding="1.5em 3em">
         <>
           <Label title="Kind:" style={labelStyle}>
             <Select2
@@ -165,7 +159,7 @@ function InnerEditPeakShapeModal(props: Required<EditPeakShapeModalProps>) {
             </Label>
           )}
         </>
-      </DialogBody>
+      </StyledDialogBody>
       <DialogFooter>
         <ActionButtons
           style={{ flexDirection: 'row-reverse', margin: 0 }}
diff --git a/src/component/modal/ExportAsJcampModal.tsx b/src/component/modal/ExportAsJcampModal.tsx
index bd5b3080d1..9c21d7ed95 100644
--- a/src/component/modal/ExportAsJcampModal.tsx
+++ b/src/component/modal/ExportAsJcampModal.tsx
@@ -1,6 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Dialog, DialogFooter } from '@blueprintjs/core';
 import type { Spectrum } from 'nmr-load-save';
 import { useRef } from 'react';
 
@@ -11,6 +9,7 @@ import ActionButtons from '../elements/ActionButtons.js';
 import type { LabelStyle } from '../elements/Label.js';
 import Label from '../elements/Label.js';
 import { Select2 } from '../elements/Select2.js';
+import { StyledDialogBody } from '../elements/StyledDialogBody.js';
 import useSpectrum from '../hooks/useSpectrum.js';
 
 interface ExportDataTypeItem {
@@ -126,12 +125,7 @@ function InnerExportAsJcampModal(props: Required<InnerExportAsJCAMPProps>) {
       onClose={closeDialog}
       title="Export as JCAMP"
     >
-      <DialogBody
-        css={css`
-          background-color: white;
-          padding: 1.5em 3em;
-        `}
-      >
+      <StyledDialogBody padding="1.5em 3em">
         <Label title="Data" style={labelStyle}>
           <Select2
             defaultSelectedItem={exportDataTypes[0]}
@@ -139,7 +133,7 @@ function InnerExportAsJcampModal(props: Required<InnerExportAsJCAMPProps>) {
             items={exportDataTypes}
           />
         </Label>
-      </DialogBody>
+      </StyledDialogBody>
       <DialogFooter>
         <ActionButtons
           style={{ flexDirection: 'row-reverse', margin: 0 }}
diff --git a/src/component/modal/ImportPublicationStringModal.tsx b/src/component/modal/ImportPublicationStringModal.tsx
index 1db98d66b2..e757ff1569 100644
--- a/src/component/modal/ImportPublicationStringModal.tsx
+++ b/src/component/modal/ImportPublicationStringModal.tsx
@@ -1,10 +1,4 @@
-import {
-  Button,
-  Dialog,
-  DialogBody,
-  DialogFooter,
-  TextArea,
-} from '@blueprintjs/core';
+import { Button, Dialog, DialogFooter, TextArea } from '@blueprintjs/core';
 import type { LogEntry } from 'fifo-logger';
 import { FifoLogger } from 'fifo-logger';
 import debounce from 'lodash/debounce.js';
@@ -17,6 +11,7 @@ import { useToaster } from '../context/ToasterContext.js';
 import { GroupPane } from '../elements/GroupPane.js';
 import type { Column } from '../elements/ReactTable/ReactTable.js';
 import ReactTable from '../elements/ReactTable/ReactTable.js';
+import { StyledDialogBody } from '../elements/StyledDialogBody.js';
 
 interface InnerImportPublicationStringModalProps {
   onClose: () => void;
@@ -149,7 +144,7 @@ function InnerImportPublicationStringModal(
       onClose={onClose}
       style={{ width: 800, height: 500 }}
     >
-      <DialogBody>
+      <StyledDialogBody>
         <div
           style={{
             display: 'flex',
@@ -193,7 +188,7 @@ function InnerImportPublicationStringModal(
             />
           </GroupPane>
         </div>
-      </DialogBody>
+      </StyledDialogBody>
       <DialogFooter>
         <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
           <Button
diff --git a/src/component/modal/LoadJCAMPModal.tsx b/src/component/modal/LoadJCAMPModal.tsx
index 551a8269f6..def142a07b 100644
--- a/src/component/modal/LoadJCAMPModal.tsx
+++ b/src/component/modal/LoadJCAMPModal.tsx
@@ -1,6 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { Button, Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Button, Dialog, DialogFooter } from '@blueprintjs/core';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { readFromWebSource } from 'nmr-load-save';
 import { useForm } from 'react-hook-form';
@@ -11,6 +9,7 @@ import { useToaster } from '../context/ToasterContext.js';
 import { Input2Controller } from '../elements/Input2Controller.js';
 import type { LabelStyle } from '../elements/Label.js';
 import Label from '../elements/Label.js';
+import { StyledDialogBody } from '../elements/StyledDialogBody.js';
 
 const allowedExtensions = new Set(['dx', 'jdx', 'jcamp']);
 
@@ -90,11 +89,7 @@ function InnerLoadJCAMPModal({ onCloseDialog }: InnerLoadJCAMPModalProps) {
       title="Load JCAMP"
       style={{ minWidth: 400 }}
     >
-      <DialogBody
-        css={css`
-          background-color: white;
-        `}
-      >
+      <StyledDialogBody>
         <Label title="URL" style={labelStyle}>
           <Input2Controller
             name="url"
@@ -104,7 +99,7 @@ function InnerLoadJCAMPModal({ onCloseDialog }: InnerLoadJCAMPModalProps) {
             enableErrorMessage
           />
         </Label>
-      </DialogBody>
+      </StyledDialogBody>
       <DialogFooter>
         <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
           <Button
diff --git a/src/component/modal/LogsHistoryModal.tsx b/src/component/modal/LogsHistoryModal.tsx
index 9d33e7262e..bbc04ff705 100644
--- a/src/component/modal/LogsHistoryModal.tsx
+++ b/src/component/modal/LogsHistoryModal.tsx
@@ -1,6 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Dialog, DialogFooter } from '@blueprintjs/core';
 import type { LogEntry } from 'fifo-logger';
 import { useMemo } from 'react';
 import { FaRegTrashAlt } from 'react-icons/fa';
@@ -13,6 +11,7 @@ import Button from '../elements/Button.js';
 import { ColumnWrapper } from '../elements/ColumnWrapper.js';
 import type { Column } from '../elements/ReactTable/ReactTable.js';
 import ReactTable from '../elements/ReactTable/ReactTable.js';
+import { StyledDialogBody } from '../elements/StyledDialogBody.js';
 
 const logsDataFormat = new Intl.DateTimeFormat('default', {
   hour: 'numeric',
@@ -171,18 +170,14 @@ export function LogsHistoryModal(props: LogsHistoryModalProps) {
         title="Logs history"
         style={{ width: '50vw', height: '50vh' }}
       >
-        <DialogBody
-          css={css`
-            background-color: white;
-          `}
-        >
+        <StyledDialogBody>
           <ReactTable
             columns={COLUMNS}
             data={sortedLogs}
             emptyDataRowText="No Logs"
             rowStyle={handleRowStyle}
           />
-        </DialogBody>
+        </StyledDialogBody>
         <DialogFooter>
           <Button.Danger onClick={() => logger.clear()} fill="outline">
             <div style={{ display: 'flex', alignItems: 'center' }}>
diff --git a/src/component/modal/ModalStyle.ts b/src/component/modal/ModalStyle.ts
deleted file mode 100644
index 0507de9cbd..0000000000
--- a/src/component/modal/ModalStyle.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { css } from '@emotion/react';
-
-export const ModalStyles = css`
-  overflow: auto;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .header {
-    text-align: center;
-    padding: 10px 0 10px 0px;
-    margin: 0px;
-    color: #005d9e;
-    place-items: normal;
-    text-transform: none;
-    background-color: #fcfcfc;
-  }
-
-  .tab-content {
-    width: 100%;
-  }
-  .row {
-    display: flex;
-  }
-
-  .inner-content {
-    padding: 15px 30px;
-    width: 100%;
-    overflow: auto;
-  }
-
-  .footer-container {
-    display: flex;
-    flex-direction: row;
-    align-items: end;
-    justify-content: end;
-
-    background: rgb(242, 242, 242);
-    background: linear-gradient(
-      0deg,
-      rgba(242, 242, 242, 1) 0%,
-      rgba(245, 245, 245, 1) 37%,
-      rgba(255, 255, 255, 1) 90%
-    );
-    padding: 6px 15px;
-    height: 55px;
-  }
-
-  .section-header {
-    font-size: 13px;
-    color: #2ca8ff;
-    margin-bottom: 10px;
-    border-bottom: 0.55px solid #f9f9f9;
-    padding: 6px 2px;
-  }
-
-  .custom-label {
-    font-size: 12px;
-    font-weight: bold;
-    margin-right: 10px;
-    width: 120px;
-  }
-  .margin-10 {
-    margin: 10px 0;
-  }
-  .padding-h-10 {
-    margin: 10px;
-  }
-
-  .close-bt {
-    border: none;
-    color: red;
-    background-color: transparent;
-    outline: none;
-    position: absolute;
-    right: 10px;
-    top: 2px;
-    width: 30px;
-    height: 30px;
-  }
-`;
diff --git a/src/component/modal/MoleculeStructureEditorModal.tsx b/src/component/modal/MoleculeStructureEditorModal.tsx
index 6b6c4089f9..db519c4c61 100644
--- a/src/component/modal/MoleculeStructureEditorModal.tsx
+++ b/src/component/modal/MoleculeStructureEditorModal.tsx
@@ -1,6 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Dialog, DialogFooter } from '@blueprintjs/core';
 import { Molecule } from 'openchemlib/full';
 import { TopicMolecule } from 'openchemlib-utils';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -11,6 +9,7 @@ import { useOnOff } from 'react-science/ui';
 import type { StateMoleculeExtended } from '../../data/molecules/Molecule.js';
 import { useDispatch } from '../context/DispatchContext.js';
 import ActionButtons from '../elements/ActionButtons.js';
+import { StyledDialogBody } from '../elements/StyledDialogBody.js';
 
 interface MoleculeStructureEditorModalProps {
   onClose?: (element?: string) => void;
@@ -106,18 +105,14 @@ function MoleculeStructureEditorModal(
 
   return (
     <Dialog isOpen={isOpen} onClose={handleClose} style={{ width: 710 }}>
-      <DialogBody
-        css={css`
-          background-color: white;
-        `}
-      >
+      <StyledDialogBody>
         <StructureEditor
           initialMolfile={initialEnhancedMolfile?.molfile}
           svgMenu
           fragment={false}
           onChange={cb}
         />
-      </DialogBody>
+      </StyledDialogBody>
       <DialogFooter>
         <ActionButtons
           style={{ flexDirection: 'row-reverse', margin: 0 }}
diff --git a/src/component/modal/MultipletAnalysisModal.tsx b/src/component/modal/MultipletAnalysisModal.tsx
index 25522bad37..002044000d 100644
--- a/src/component/modal/MultipletAnalysisModal.tsx
+++ b/src/component/modal/MultipletAnalysisModal.tsx
@@ -1,6 +1,5 @@
-/** @jsxImportSource @emotion/react */
-import { Dialog, DialogBody } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Dialog } from '@blueprintjs/core';
+import styled from '@emotion/styled';
 import { xGetFromToIndex, xyToXYObject } from 'ml-spectra-processing';
 import { analyseMultiplet } from 'multiplet-analysis';
 import type { ActiveSpectrum, Spectrum } from 'nmr-load-save';
@@ -8,10 +7,9 @@ import { useEffect, useState } from 'react';
 import { Axis, LineSeries, Plot } from 'react-plot';
 
 import { isSpectrum2D } from '../../data/data2d/Spectrum2D/index.js';
+import { StyledDialogBody } from '../elements/StyledDialogBody.js';
 
-const styles = css`
-  background-color: white;
-
+const DialogBody = styled(StyledDialogBody)`
   button:focus {
     outline: none;
   }
@@ -48,7 +46,7 @@ const styles = css`
   }
 `;
 
-const loaderStyles = css`
+const LoaderContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -106,7 +104,7 @@ export default function MultipletAnalysisModal({
       title="Analyse multiplet"
       style={{ width: 900, height: 400 }}
     >
-      <DialogBody css={styles}>
+      <DialogBody>
         <InnerMultipleAnalysis
           {...{
             data,
@@ -180,7 +178,7 @@ function InnerMultipleAnalysis(props: InnerMultipleAnalysisProps) {
 
   if (!isCalcFinished) {
     return (
-      <div css={loaderStyles}>
+      <LoaderContainer>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
           <g fill="#61DAFB">
             <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z" />
@@ -188,7 +186,7 @@ function InnerMultipleAnalysis(props: InnerMultipleAnalysisProps) {
           </g>
         </svg>
         <p>Analyse Multiplet in progress. Please wait ...</p>
-      </div>
+      </LoaderContainer>
     );
   }
 
diff --git a/src/component/modal/PredictSpectraModal.tsx b/src/component/modal/PredictSpectraModal.tsx
index b241f83a84..25aab8be0f 100644
--- a/src/component/modal/PredictSpectraModal.tsx
+++ b/src/component/modal/PredictSpectraModal.tsx
@@ -1,6 +1,5 @@
-/** @jsxImportSource @emotion/react */
-import { Checkbox, Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Checkbox, Dialog, DialogFooter } from '@blueprintjs/core';
+import styled from '@emotion/styled';
 import { SvgNmrFt } from 'cheminfo-font';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { Toolbar, useOnOff } from 'react-science/ui';
@@ -15,13 +14,12 @@ import { useDispatch } from '../context/DispatchContext.js';
 import { useLogger } from '../context/LoggerContext.js';
 import { useToaster } from '../context/ToasterContext.js';
 import Button from '../elements/Button.js';
+import { StyledDialogBody } from '../elements/StyledDialogBody.js';
 import type { SettingsRef } from '../panels/extra/utilities/settingImperativeHandle.js';
 import PredictionPreferences from '../panels/predictionPanel/PredictionOptionsPanel.js';
 import { useStateWithLocalStorage } from '../utility/LocalStorage.js';
 
-const styles = css`
-  background-color: white;
-
+const DialogBody = styled(StyledDialogBody)`
   .inner-content {
     flex: 1;
   }
@@ -155,7 +153,7 @@ export function PredictSpectraModal({
         style={{ width: 600, maxWidth: 1000 }}
         title="Prediction of NMR spectrum"
       >
-        <DialogBody css={styles}>
+        <DialogBody>
           <PredictionPreferences
             onSave={submitHandler}
             options={initValues}
diff --git a/src/component/modal/SaveAsModal.tsx b/src/component/modal/SaveAsModal.tsx
index f8a455a2d5..08e8c65ccf 100644
--- a/src/component/modal/SaveAsModal.tsx
+++ b/src/component/modal/SaveAsModal.tsx
@@ -1,13 +1,10 @@
-/** @jsxImportSource @emotion/react */
 import {
   Checkbox,
   Dialog,
-  DialogBody,
   DialogFooter,
   Radio,
   RadioGroup,
 } from '@blueprintjs/core';
-import { css } from '@emotion/react';
 import { Controller, useForm } from 'react-hook-form';
 
 import { DataExportOptions } from '../../data/SpectraManager.js';
@@ -16,6 +13,7 @@ import ActionButtons from '../elements/ActionButtons.js';
 import { Input2Controller } from '../elements/Input2Controller.js';
 import type { LabelStyle } from '../elements/Label.js';
 import Label from '../elements/Label.js';
+import { StyledDialogBody } from '../elements/StyledDialogBody.js';
 import { useExport } from '../hooks/useExport.js';
 
 const INITIAL_VALUE = {
@@ -78,11 +76,7 @@ function InnerSaveAsModal(props: InnerSaveAsModalProps) {
       onClose={onCloseDialog}
       style={{ width: 600 }}
     >
-      <DialogBody
-        css={css`
-          background-color: white;
-        `}
-      >
+      <StyledDialogBody>
         <Label style={labelStyle} title="Name">
           <Input2Controller
             name="name"
@@ -128,7 +122,7 @@ function InnerSaveAsModal(props: InnerSaveAsModalProps) {
             }}
           />
         </Label>
-      </DialogBody>
+      </StyledDialogBody>
       <DialogFooter>
         <ActionButtons
           style={{ flexDirection: 'row-reverse', margin: 0 }}
diff --git a/src/component/modal/aboutUs/AboutUsModal.tsx b/src/component/modal/aboutUs/AboutUsModal.tsx
index fd7d706778..38109beaeb 100644
--- a/src/component/modal/aboutUs/AboutUsModal.tsx
+++ b/src/component/modal/aboutUs/AboutUsModal.tsx
@@ -1,34 +1,23 @@
-/** @jsxImportSource @emotion/react */
-import { Dialog, DialogBody } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Dialog } from '@blueprintjs/core';
+import styled from '@emotion/styled';
 import { SvgLogoNmrium } from 'cheminfo-font';
 import { Toolbar, useOnOff } from 'react-science/ui';
 
 import versionInfo from '../../../versionInfo.js';
 import Logo from '../../elements/Logo.js';
+import { StyledDialogBody } from '../../elements/StyledDialogBody.js';
 
 import AboutUsZakodium from './AboutUsZakodium.js';
 
-const styles = css`
+const CustomDialogBody = styled(StyledDialogBody)`
   display: flex;
   flex-direction: column;
   user-select: none;
-  background-color: white;
 
   button:focus {
     outline: none;
   }
 
-  .container {
-    padding: 20px;
-  }
-
-  .center-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
   ul {
     list-style-type: disc;
     margin-left: 20px;
@@ -62,13 +51,22 @@ const styles = css`
   a:focus {
     color: #00bcd4;
   }
+`;
 
-  .separator {
-    border-bottom: 1px solid gray;
-    width: 15px;
-    height: 1px;
-    margin: 10px 0;
-  }
+const InfoBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const Container = styled.div`
+  padding: 20px;
+`;
+
+const Separator = styled.span`
+  border-bottom: 1px solid gray;
+  width: 15px;
+  height: 1px;
+  margin: 10px 0;
 `;
 
 function AboutUsModal() {
@@ -91,29 +89,29 @@ function AboutUsModal() {
         }}
         title="About NMRium"
       >
-        <DialogBody css={styles}>
-          <div className="container">
-            <div className="center-container">
+        <CustomDialogBody>
+          <Container>
+            <InfoBlock>
               <Logo width={160} height={50} />
               Version <VersionInfo />
-              <span className="separator" />
+              <Separator />
               <a href="https://git.nmrium.org" target="_blank" rel="noreferrer">
                 GitHub ( https://git.nmrium.org )
               </a>
-            </div>
-            <div className="center-container">
-              <span className="separator" />
-            </div>
+            </InfoBlock>
+            <InfoBlock>
+              <Separator />
+            </InfoBlock>
             <span className="content">
               This project is developed by Zakodium Sàrl (Switzerland), the
               University of Cologne (Germany), Johannes Gutenberg University
               Mainz (Germany) and Universidad del Valle (Colombia).
             </span>
-            <div className="center-container">
-              <span className="separator" />
+            <InfoBlock>
+              <Separator />
               <span className="title">Funding is provided by</span>
-              <span className="separator" />
-            </div>
+              <Separator />
+            </InfoBlock>
             <div className="content">
               <ul>
                 <li>
@@ -133,9 +131,9 @@ function AboutUsModal() {
                 </li>
               </ul>
             </div>
-            <span className="separator" />
-          </div>
-        </DialogBody>
+            <Separator />
+          </Container>
+        </CustomDialogBody>
       </Dialog>
     </>
   );
diff --git a/src/component/modal/changeSum/ChangeSumModalContents.tsx b/src/component/modal/changeSum/ChangeSumModalContents.tsx
index e87a64dffa..ae272a325e 100644
--- a/src/component/modal/changeSum/ChangeSumModalContents.tsx
+++ b/src/component/modal/changeSum/ChangeSumModalContents.tsx
@@ -1,6 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { Button, DialogBody, DialogFooter, Tab, Tabs } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Button, DialogFooter, Tab, Tabs } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
 import type { SumOptions } from 'nmr-load-save';
@@ -10,9 +8,16 @@ import * as Yup from 'yup';
 
 import { usePreferences } from '../../context/PreferencesContext.js';
 import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import { StyledDialogBody } from '../../elements/StyledDialogBody.js';
 
 import SelectMolecule from './SelectMolecule.js';
 
+const DialogBody = styled(StyledDialogBody)`
+  [role='tablist'] {
+    border-bottom: 1px solid #f0f0f0;
+  }
+`;
+
 function getValidationSchema(option: SumSetOption) {
   if (option === 'auto') {
     return Yup.object({
@@ -116,16 +121,7 @@ export function ChangeSumModalContents(props: ChangeSumModalContentsProps) {
 
   return (
     <>
-      <DialogBody
-        css={css`
-          padding: 5px;
-          background-color: white;
-
-          [role='tablist'] {
-            border-bottom: 1px solid #f0f0f0;
-          }
-        `}
-      >
+      <DialogBody padding="5px">
         <Tabs
           selectedTabId={setOption}
           onChange={onTabChangeHandler}
diff --git a/src/component/modal/changeSum/SelectMolecule.tsx b/src/component/modal/changeSum/SelectMolecule.tsx
index 81db1452c0..004f823903 100644
--- a/src/component/modal/changeSum/SelectMolecule.tsx
+++ b/src/component/modal/changeSum/SelectMolecule.tsx
@@ -1,6 +1,6 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { CSSProperties } from 'react';
 import type { ControllerProps, FieldValues } from 'react-hook-form';
 import { useController } from 'react-hook-form';
 
@@ -8,37 +8,33 @@ import getAtom from '../../../data/utilities/getAtom.js';
 import { useChartData } from '../../context/ChartContext.js';
 import MoleculeSelection from '../../elements/MoleculeSelection.js';
 
-const styles = css`
-  .molecule-container {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-
-    .title {
-      padding: 0 10px;
-      width: 100%;
-      text-align: center;
-    }
-
-    .molecule-selection-container {
-      width: 450px;
-      display: block;
-      margin: 0 auto;
-    }
-
-    .new-sum-text {
-      margin-top: 15px;
-      padding: 0 10px;
-      width: 100%;
-      text-align: center;
-    }
-  }
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`;
+const SelectionContainer = styled.div`
+  width: 450px;
+  display: block;
+  margin: 0 auto;
+`;
+const Title = styled.p`
+  padding: 0 10px;
+  width: 100%;
+  text-align: center;
+`;
 
-  .empty {
-    width: 100%;
-    padding: 20%;
-    text-align: center;
-  }
+const SumValue = styled.p`
+  margin-top: 15px;
+  padding: 0 10px;
+  width: 100%;
+  text-align: center;
+`;
+const EmptyText = styled.p<{ color: CSSProperties['color'] }>`
+  width: 100%;
+  padding: 20%;
+  text-align: center;
+  color: ${({ color }) => color};
 `;
 
 export default function SelectMolecule<
@@ -92,27 +88,27 @@ export default function SelectMolecule<
   );
 
   return (
-    <div css={styles}>
+    <div>
       {element && molecules && molecules.length > 0 ? (
-        <div className="molecule-container">
-          <p className="title">Select a molecule as reference!</p>
+        <Container>
+          <Title>Select a molecule as reference!</Title>
 
-          <div className="molecule-selection-container">
+          <SelectionContainer>
             <MoleculeSelection
               index={currentIndex}
               molecules={molecules}
               onChange={onChangeMoleculeSelectionHandler}
             />
-            <p className="new-sum-text">
+            <SumValue>
               New sum for {element} will be {newSum}!
-            </p>
-          </div>
-        </div>
+            </SumValue>
+          </SelectionContainer>
+        </Container>
       ) : (
-        <p className="empty" style={{ color: invalid ? 'red' : 'black' }}>
+        <EmptyText color={invalid ? 'red' : 'black'}>
           You have to Select a spectrum and Add a molecule from the Structure
           panel to select as a reference!
-        </p>
+        </EmptyText>
       )}
     </div>
   );
diff --git a/src/component/modal/editRange/EditRangeModal.tsx b/src/component/modal/editRange/EditRangeModal.tsx
index 534c57b688..3d07882572 100644
--- a/src/component/modal/editRange/EditRangeModal.tsx
+++ b/src/component/modal/editRange/EditRangeModal.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
-import { Button, DialogBody, DialogFooter } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Button, DialogFooter } from '@blueprintjs/core';
+import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { v4 } from '@lukeed/uuid';
 import type { Spectrum1D } from 'nmr-load-save';
@@ -14,6 +14,7 @@ import { useChartData } from '../../context/ChartContext.js';
 import { useDispatch } from '../../context/DispatchContext.js';
 import type { DialogProps } from '../../elements/DialogManager.js';
 import { DraggableDialog } from '../../elements/DraggableDialog.js';
+import { StyledDialogBody } from '../../elements/StyledDialogBody.js';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 import useSpectrum from '../../hooks/useSpectrum.js';
 import useEditRangeModal from '../../panels/RangesPanel/hooks/useEditRangeModal.js';
@@ -23,9 +24,7 @@ import { formatNumber } from '../../utility/formatNumber.js';
 import SignalsContent from './forms/components/SignalsContent.js';
 import editRangeFormValidation from './forms/validation/EditRangeValidation.js';
 
-const styles = css`
-  background-color: white;
-
+const DialogBody = styled(StyledDialogBody)`
   .tabs .tab-list {
     overflow-x: auto;
   }
@@ -197,7 +196,7 @@ function InnerEditRangeModal(props: InnerEditRangeModalProps) {
         onClose={handleOnClose}
         placement="top-right"
       >
-        <DialogBody css={styles}>
+        <DialogBody>
           <SignalsContent range={range} />
         </DialogBody>
         <DialogFooter>
diff --git a/src/component/modal/editRange/forms/components/SignalTab.tsx b/src/component/modal/editRange/forms/components/SignalTab.tsx
index b564c15afc..810ed50ddd 100644
--- a/src/component/modal/editRange/forms/components/SignalTab.tsx
+++ b/src/component/modal/editRange/forms/components/SignalTab.tsx
@@ -1,6 +1,5 @@
-/** @jsxImportSource @emotion/react */
 import { Tab, Tabs } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { CSSProperties } from 'react';
 import { memo } from 'react';
 
@@ -21,16 +20,15 @@ interface SignalTabProps {
   index: number;
 }
 
+const Container = styled.div`
+  div[role='tabpanel'] {
+    width: 100%;
+  }
+`;
+
 function SignalTab({ index }: SignalTabProps) {
   return (
-    <div
-      style={style}
-      css={css`
-        div[role='tabpanel'] {
-          width: 100%;
-        }
-      `}
-    >
+    <Container style={style}>
       <Tabs vertical fill renderActiveTabPanelOnly>
         <Tab
           id="couplings"
@@ -43,7 +41,7 @@ function SignalTab({ index }: SignalTabProps) {
           panel={<SignalPeaksTable index={index} />}
         />
       </Tabs>
-    </div>
+    </Container>
   );
 }
 
diff --git a/src/component/modal/editZone/EditZoneModal.tsx b/src/component/modal/editZone/EditZoneModal.tsx
index e62f84d4f8..ef187c0f3d 100644
--- a/src/component/modal/editZone/EditZoneModal.tsx
+++ b/src/component/modal/editZone/EditZoneModal.tsx
@@ -1,6 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { Button, DialogBody, DialogFooter } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Button, DialogFooter } from '@blueprintjs/core';
 import { yupResolver } from '@hookform/resolvers/yup';
 import type { FromTo } from 'cheminfo-types';
 import type { Signal2D } from 'nmr-processing';
@@ -11,6 +9,7 @@ import * as Yup from 'yup';
 import DefaultPathLengths from '../../../data/constants/DefaultPathLengths.js';
 import type { DialogProps } from '../../elements/DialogManager.js';
 import { DraggableDialog } from '../../elements/DraggableDialog.js';
+import { StyledDialogBody } from '../../elements/StyledDialogBody.js';
 import type { ZoneData } from '../../panels/ZonesPanel/hooks/useMapZones.js';
 import { useZoneActions } from '../../panels/ZonesPanel/hooks/useZoneActions.js';
 
@@ -86,15 +85,11 @@ export function EditZoneModal(props: DialogProps<ZoneData>) {
       onClose={onCloseDialog}
       placement="top-right"
     >
-      <DialogBody
-        css={css`
-          background-color: white;
-        `}
-      >
+      <StyledDialogBody>
         <FormProvider {...methods}>
           <SignalsForm />
         </FormProvider>
-      </DialogBody>
+      </StyledDialogBody>
       <DialogFooter>
         <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
           <Button intent="success" onClick={() => handleSubmit(handleSave)()}>
diff --git a/src/component/modal/setting/GeneralSettings.tsx b/src/component/modal/setting/GeneralSettings.tsx
index c8356ccaf6..13201d17b6 100644
--- a/src/component/modal/setting/GeneralSettings.tsx
+++ b/src/component/modal/setting/GeneralSettings.tsx
@@ -1,13 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import {
-  Classes,
-  Dialog,
-  DialogBody,
-  DialogFooter,
-  Tab,
-  Tabs,
-} from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Classes, Dialog, DialogFooter, Tab, Tabs } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
 import type { Workspace } from 'nmr-load-save';
@@ -30,6 +21,7 @@ import {
 import { useToaster } from '../../context/ToasterContext.js';
 import ActionButtons from '../../elements/ActionButtons.js';
 import Label from '../../elements/Label.js';
+import { StyledDialogBody } from '../../elements/StyledDialogBody.js';
 import type { DropDownListItem } from '../../elements/dropDownButton/DropDownButton.js';
 import DropDownButton from '../../elements/dropDownButton/DropDownButton.js';
 import { useSaveSettings } from '../../hooks/useSaveSettings.js';
@@ -61,6 +53,25 @@ export const Section = styled.div`
   padding: 6px 2px;
 `;
 
+const StyledTabs = styled(Tabs)`
+  height: 100%;
+
+  div[role='tablist'] {
+    gap: 0;
+  }
+
+  div[role='tabpanel'] {
+    width: 100%;
+    padding: 0.8rem;
+    overflow: auto;
+    max-height: 100%;
+  }
+`;
+
+const StyledButton = styled(Button)<{ marginHorizontal: number }>`
+  margin: 0 ${(props) => props.marginHorizontal}px;
+`;
+
 function isRestButtonDisable(
   currentWorkspaceSetting,
   workspaceName,
@@ -227,30 +238,9 @@ function InnerGeneralSettingsModal(props: InnerGeneralSettingsModalProps) {
             />
           </div>
         </div>
-        <DialogBody
-          css={css`
-            padding: 0;
-            background-color: white;
-          `}
-        >
+        <StyledDialogBody>
           <div style={{ height }}>
-            <Tabs
-              vertical
-              css={css`
-                height: 100%;
-
-                div[role='tablist'] {
-                  gap: 0;
-                }
-
-                div[role='tabpanel'] {
-                  width: 100%;
-                  padding: 0.8rem;
-                  overflow: auto;
-                  max-height: 100%;
-                }
-              `}
-            >
+            <StyledTabs vertical>
               <Tab title="General" id="general" panel={<GeneralTabContent />} />
 
               <Tab title="Nuclei" id="nuclei" panel={<NucleiTabContent />} />
@@ -306,9 +296,9 @@ function InnerGeneralSettingsModal(props: InnerGeneralSettingsModalProps) {
                 id="export-options"
                 panel={<ExportTabContent />}
               />
-            </Tabs>
+            </StyledTabs>
           </div>
-        </DialogBody>
+        </StyledDialogBody>
         <DialogFooter>
           <DialogActionButtons onCloseDialog={onCloseDialog} onSave={onSave} />
         </DialogFooter>
@@ -389,14 +379,14 @@ function WorkSpaceActionsButtons(props) {
       >
         <FaBolt className={Classes.ICON} />
       </Button>
-      <Button
+      <StyledButton
         outlined
         onClick={handleCopyWorkspace}
         tooltipProps={{ content: 'Copy workspace preferences', compact: true }}
-        css={css({ margin: '0 5px' })}
+        marginHorizontal={5}
       >
         <FaRegCopy className={Classes.ICON} />
-      </Button>
+      </StyledButton>
       <Button
         outlined
         intent="success"
@@ -456,13 +446,13 @@ function DialogActionButtons(props: BasseGeneralModalProps) {
           props.onCloseDialog?.();
         }}
       />
-      <Button
+      <StyledButton
         intent="primary"
-        css={css({ margin: '0 10px' })}
         onClick={applyPreferencesHandler}
+        marginHorizontal={10}
       >
         Apply
-      </Button>
+      </StyledButton>
     </div>
   );
 }
diff --git a/src/component/modal/setting/settings-tabs/DatabasesTabContent.tsx b/src/component/modal/setting/settings-tabs/DatabasesTabContent.tsx
index 82bb1ab648..db94e2b7f3 100644
--- a/src/component/modal/setting/settings-tabs/DatabasesTabContent.tsx
+++ b/src/component/modal/setting/settings-tabs/DatabasesTabContent.tsx
@@ -1,6 +1,5 @@
-/** @jsxImportSource @emotion/react */
 import { Checkbox, Classes, Radio } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { v4 } from '@lukeed/uuid';
 import type { CustomWorkspaces, Database } from 'nmr-load-save';
 import { useCallback, useMemo } from 'react';
@@ -18,6 +17,10 @@ import { getPreferencesByWorkspace } from '../../../reducer/preferences/utilitie
 import { isGoogleDocument } from '../../../utility/isGoogleDocument.js';
 import { Section } from '../GeneralSettings.js';
 
+const StyledButton = styled(Button)<{ marginHorizontal: number }>`
+  margin: 0 ${({ marginHorizontal }) => marginHorizontal}px;
+`;
+
 function getKeyPath<T extends keyof Database>(
   index: number,
   key: T,
@@ -158,18 +161,16 @@ function DatabasesTabContent({
               >
                 <FaPlus className={Classes.ICON} />
               </Button>
-              <Button
+              <StyledButton
+                marginHorizontal={3}
                 small
                 outlined
                 intent="danger"
                 tooltipProps={{ content: '', disabled: true }}
                 onClick={() => deleteHandler(data, index)}
-                css={css`
-                  margin: 0 3px;
-                `}
               >
                 <FaRegTrashAlt className={Classes.ICON} />
-              </Button>
+              </StyledButton>
 
               {isGoogleDocument(record.url) && (
                 <Button
diff --git a/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx b/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx
index 78cee19e6a..15ead0f898 100644
--- a/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx
+++ b/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx
@@ -3,12 +3,12 @@ import type { NMRiumPanelPreferences } from 'nmr-load-save';
 import { useCallback, useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
+import { GroupPane } from '../../../elements/GroupPane.js';
+import Label from '../../../elements/Label.js';
 import ReactTable from '../../../elements/ReactTable/ReactTable.js';
 import type { CustomColumn } from '../../../elements/ReactTable/utility/addCustomColumn.js';
 import { Select2 } from '../../../elements/Select2.js';
 import type { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer.js';
-import Label from '../../../elements/Label.js';
-import { GroupPane } from '../../../elements/GroupPane.js';
 
 const basePath = 'display.panels';
 interface ListItem {
diff --git a/src/component/panels/RangesPanel/TableColumns/ActionsColumn.tsx b/src/component/panels/RangesPanel/TableColumns/ActionsColumn.tsx
index 464b17cab1..ad5ae82b8f 100644
--- a/src/component/panels/RangesPanel/TableColumns/ActionsColumn.tsx
+++ b/src/component/panels/RangesPanel/TableColumns/ActionsColumn.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { FaEdit, FaRegTrashAlt, FaSearchPlus } from 'react-icons/fa';
 
 import { SIGNAL_KINDS } from '../../../../data/constants/signalsKinds.js';
@@ -14,7 +13,7 @@ import type {
 } from '../RangesTableRow.js';
 import useEditRangeModal from '../hooks/useEditRangeModal.js';
 
-const styles = css`
+const ActionsCell = styled.td`
   width: 66px;
   padding: 0 !important;
 
@@ -71,7 +70,7 @@ function ActionsColumn({
         </td>
       )}
       {showActions && (
-        <td {...rowSpanTags} css={styles}>
+        <ActionsCell {...rowSpanTags}>
           {showDeleteAction && (
             <button
               type="button"
@@ -113,7 +112,7 @@ function ActionsColumn({
               <FaEdit color="blue" />
             </button>
           )}
-        </td>
+        </ActionsCell>
       )}
     </>
   );
diff --git a/src/component/panels/SpectraPanel/SpectraTabs.tsx b/src/component/panels/SpectraPanel/SpectraTabs.tsx
index 5729bf9771..1eb47e593b 100644
--- a/src/component/panels/SpectraPanel/SpectraTabs.tsx
+++ b/src/component/panels/SpectraPanel/SpectraTabs.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { ActiveSpectrum, Spectrum } from 'nmr-load-save';
 import { memo, useCallback, useMemo, useState } from 'react';
 
@@ -14,6 +13,13 @@ import groupByInfoKey from '../../utility/GroupByInfoKey.js';
 import { SpectraTable } from './SpectraTable.js';
 import SpectrumSetting from './base/setting/SpectrumSetting.js';
 
+const Container = styled.div`
+  height: calc(100% - 25px);
+
+  tbody tr {
+    height: 20px;
+  }
+`;
 interface SpectraTabsInnerProps {
   spectra: Spectrum[];
   activeTab: string;
@@ -76,14 +82,7 @@ function SpectraTabsInner({
   }
 
   return (
-    <div
-      style={{ height: 'calc(100% - 25px)' }}
-      css={css`
-        tbody tr {
-          height: 20px;
-        }
-      `}
-    >
+    <Container>
       <Tabs key={activeTab} activeTab={activeTab} onClick={onTabChangeHandler}>
         {spectraGroupByNucleus &&
           Object.keys(spectraGroupByNucleus).map((nucleus) => (
@@ -112,7 +111,7 @@ function SpectraTabsInner({
           position={settingModalPosition}
         />
       ) : null}
-    </div>
+    </Container>
   );
 }
 
diff --git a/src/component/panels/SpectraPanel/base/setting/Spectrum2DSetting.tsx b/src/component/panels/SpectraPanel/base/setting/Spectrum2DSetting.tsx
index c2f522ac38..055bb49b3a 100644
--- a/src/component/panels/SpectraPanel/base/setting/Spectrum2DSetting.tsx
+++ b/src/component/panels/SpectraPanel/base/setting/Spectrum2DSetting.tsx
@@ -1,8 +1,8 @@
-/** @jsxImportSource @emotion/react */
 import { RangeSlider } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import debounce from 'lodash/debounce.js';
 import { useMemo } from 'react';
+import type { CSSProperties } from 'react';
 import {
   Controller,
   FormProvider,
@@ -19,19 +19,27 @@ import { colorToHexWithAlpha } from '../../../../utility/colorToHexWithAlpha.js'
 
 import Spectrum2DHistogram from './Spectrum2DHistogram.js';
 
+const StyledRangeSlider = styled(RangeSlider)<{
+  progressColor: CSSProperties['backgroundColor'];
+}>`
+  width: 90%;
+
+  [class*='slider-progress']:nth-child(2) {
+    background-color: ${(props) => props.progressColor};
+  }
+`;
 interface Spectrum2DSettingProps {
   data: any;
   onSubmit: (values: any) => void;
 }
 
-const style = (color: string) => css`
+const Container = styled.div<{ color: CSSProperties['backgroundColor'] }>`
   display: inline-block;
 
   .track-1 {
-    background-color: ${color} !important;
+    background-color: ${(props) => props.color} !important;
   }
 `;
-
 function Spectrum2DSetting({
   data: SpectrumData,
   onSubmit,
@@ -42,14 +50,14 @@ function Spectrum2DSetting({
   return (
     <FormProvider {...methods}>
       <div>
-        <div css={style(positiveColor)}>
+        <Container color={positiveColor}>
           <span style={{ padding: '0 10px' }}>Positive</span>
           <Settings sign="positive" onSubmit={onSubmit} />
-        </div>
-        <div css={style(negativeColor)}>
+        </Container>
+        <Container color={negativeColor}>
           <span style={{ padding: '0 10px' }}>Negative</span>
           <Settings sign="negative" onSubmit={onSubmit} />
-        </div>
+        </Container>
         <Spectrum2DHistogram data={SpectrumData.data} />
       </div>
     </FormProvider>
@@ -105,7 +113,7 @@ function Settings(props: SettingsProps) {
             const { value, onChange } = field;
 
             return (
-              <RangeSlider
+              <StyledRangeSlider
                 min={0}
                 max={100}
                 stepSize={1}
@@ -116,13 +124,7 @@ function Settings(props: SettingsProps) {
                 }}
                 value={value}
                 showTrackFill
-                css={css`
-                  width: 90%;
-
-                  [class*='slider-progress']:nth-child(2) {
-                    background-color: ${progressColor};
-                  }
-                `}
+                progressColor={progressColor}
               />
             );
           }}
diff --git a/src/component/panels/SpectraPanel/base/setting/SpectrumSetting.tsx b/src/component/panels/SpectraPanel/base/setting/SpectrumSetting.tsx
index b0f25d4bb7..e9ddf6becf 100644
--- a/src/component/panels/SpectraPanel/base/setting/SpectrumSetting.tsx
+++ b/src/component/panels/SpectraPanel/base/setting/SpectrumSetting.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { memo, useCallback } from 'react';
 
 import { useDispatch } from '../../../../context/DispatchContext.js';
@@ -7,7 +6,7 @@ import { useDispatch } from '../../../../context/DispatchContext.js';
 import Spectrum1DSetting from './Spectrum1DSetting.js';
 import Spectrum2DSetting from './Spectrum2DSetting.js';
 
-const style = css`
+const Container = styled.div`
   position: fixed;
   z-index: 999999999;
   width: 100%;
@@ -101,7 +100,7 @@ function SpectrumSetting({ position, data, onClose }: SpectrumSettingProps) {
   const { x, y } = position;
 
   return (
-    <div css={style} onClick={clickHandler}>
+    <Container onClick={clickHandler}>
       <div
         className="inner-container"
         style={{
@@ -117,7 +116,7 @@ function SpectrumSetting({ position, data, onClose }: SpectrumSettingProps) {
           <Spectrum1DSetting onSubmit={submitHandler} data={data} />
         )}
       </div>
-    </div>
+    </Container>
   );
 }
 
diff --git a/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTable.tsx b/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTable.tsx
index 67d4f53438..32a01a9f12 100644
--- a/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTable.tsx
+++ b/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTable.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { Correlation } from 'nmr-correlation';
 import { useMemo } from 'react';
 
@@ -8,7 +7,7 @@ import { getLabelColor } from '../utilities/Utilities.js';
 import AdditionalColumnHeader from './AdditionalColumnHeader.js';
 import CorrelationTableRow from './CorrelationTableRow.js';
 
-const tableStyle = css`
+const Container = styled.div`
   overflow: auto;
   height: 100%;
   display: block;
@@ -131,7 +130,7 @@ function CorrelationTable({
   );
 
   return (
-    <div css={tableStyle}>
+    <Container>
       <table>
         <thead>
           <tr>
@@ -145,7 +144,7 @@ function CorrelationTable({
         </thead>
         <tbody>{rows}</tbody>
       </table>
-    </div>
+    </Container>
   );
 }
 
diff --git a/src/component/panels/SummaryPanel/CorrelationTable/editLink/Confirmation.tsx b/src/component/panels/SummaryPanel/CorrelationTable/editLink/Confirmation.tsx
index e4f35bad31..31fb527865 100644
--- a/src/component/panels/SummaryPanel/CorrelationTable/editLink/Confirmation.tsx
+++ b/src/component/panels/SummaryPanel/CorrelationTable/editLink/Confirmation.tsx
@@ -1,8 +1,7 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { useCallback } from 'react';
 
-const styles = css`
+const Container = styled.div`
   margin-top: 10px;
   padding: 5px;
   text-align: center;
@@ -50,12 +49,12 @@ function EditLinkConfirmation({
   );
 
   return (
-    <div css={styles}>
+    <Container>
       <p>{description}</p>
       <button type="button" onClick={handleOnConfirm}>
         Confirm
       </button>
-    </div>
+    </Container>
   );
 }
 
diff --git a/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditPathLength.tsx b/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditPathLength.tsx
index 1ebe1b8297..239d5b1530 100644
--- a/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditPathLength.tsx
+++ b/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditPathLength.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { FromTo } from 'cheminfo-types';
 import type { Signal2D } from 'nmr-processing';
 import { useCallback, useEffect, useState } from 'react';
@@ -9,22 +8,12 @@ import Button from '../../../../elements/Button.js';
 import Input from '../../../../elements/Input.js';
 import Label from '../../../../elements/Label.js';
 
-const editPathLengthsStyles = css`
+const Container = styled.div`
   width: 100%;
   height: 100%;
   margin-top: 10px;
   text-align: center;
 
-  .input-container {
-    width: 100%;
-    margin-top: 5px;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
   button {
     flex: 2;
     padding: 5px;
@@ -38,11 +27,20 @@ const editPathLengthsStyles = css`
     color: white;
     background-color: gray;
   }
+`;
 
-  .warning {
-    margin-top: 5px;
-    color: red;
-  }
+const InputContainer = styled.div`
+  width: 100%;
+  margin-top: 5px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+const WarningText = styled.span`
+  margin-top: 5px;
+  color: red;
 `;
 
 interface InputProps {
@@ -85,9 +83,9 @@ function EditPathLength({ signal, experimentType, onEdit }: InputProps) {
   }, [to, from]);
 
   return (
-    <div css={editPathLengthsStyles}>
+    <Container>
       <p>Setting of the minimum and maximum path length (J coupling).</p>
-      <div className="input-container">
+      <InputContainer>
         <Label
           title="Min:"
           style={{
@@ -125,17 +123,17 @@ function EditPathLength({ signal, experimentType, onEdit }: InputProps) {
             }}
           />
         </Label>
-      </div>
+      </InputContainer>
       {isError ? (
-        <p className="warning">
+        <WarningText>
           Minimum must not be 0 or higher than the maximum value.{' '}
-        </p>
+        </WarningText>
       ) : (
         <Button type="button" onClick={handleOnEdit} disabled={isError}>
           Set
         </Button>
       )}
-    </div>
+    </Container>
   );
 }
 
diff --git a/src/component/panels/SummaryPanel/CorrelationTable/editLink/MoveLink.tsx b/src/component/panels/SummaryPanel/CorrelationTable/editLink/MoveLink.tsx
index 00d5626c29..6f080fd2d6 100644
--- a/src/component/panels/SummaryPanel/CorrelationTable/editLink/MoveLink.tsx
+++ b/src/component/panels/SummaryPanel/CorrelationTable/editLink/MoveLink.tsx
@@ -1,12 +1,11 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { Correlation, Link } from 'nmr-correlation';
 import { getCorrelationDelta } from 'nmr-correlation';
 import { useCallback, useState } from 'react';
 
 import Select from '../../../../elements/Select.js';
 
-const moveLinkStyles = css`
+const Container = styled.div`
   width: 100%;
   height: 100%;
   margin-top: 10px;
@@ -119,7 +118,7 @@ function MoveLink({
   );
 
   return (
-    <div css={moveLinkStyles}>
+    <Container>
       <p>Move of signals on either one or both axes.</p>
       <p>&quot;New&quot; means to separate into a new row or column.</p>
       <div className="selection-container">
@@ -134,7 +133,7 @@ function MoveLink({
       >
         Move
       </button>
-    </div>
+    </Container>
   );
 }
 
diff --git a/src/component/panels/SummaryPanel/Overview.tsx b/src/component/panels/SummaryPanel/Overview.tsx
index af0dc12a71..00bcf1c356 100644
--- a/src/component/panels/SummaryPanel/Overview.tsx
+++ b/src/component/panels/SummaryPanel/Overview.tsx
@@ -1,11 +1,10 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { getAtomCounts } from 'nmr-correlation';
 import { memo } from 'react';
 
 import { ErrorColors, Errors } from './CorrelationTable/Constants.js';
 
-const styles = css`
+const Container = styled.div`
   display: flex;
   width: 100%;
   font-size: 15px;
@@ -69,7 +68,7 @@ function Overview({ correlationsData }: OverviewProps) {
       </p>
     );
 
-  return <div css={styles}>{elements}</div>;
+  return <Container>{elements}</Container>;
 }
 
 export default memo(Overview);
diff --git a/src/component/panels/SummaryPanel/SummaryPanel.tsx b/src/component/panels/SummaryPanel/SummaryPanel.tsx
index bfaa0b21e4..ab5ddad808 100644
--- a/src/component/panels/SummaryPanel/SummaryPanel.tsx
+++ b/src/component/panels/SummaryPanel/SummaryPanel.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type {
   Correlation,
   Link,
@@ -51,38 +50,37 @@ export type OnEditCorrelationCallback = (
   options?: CorrelationOptions,
 ) => void;
 
-const panelStyle = css`
+const Container = styled.div`
   display: flex;
   flex-direction: column;
   text-align: center;
   height: 100%;
   width: 100%;
+`;
 
-  .extra-header-content {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-
-    .overview-container {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      margin-left: 10px;
-    }
+const InnerHeader = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: center;
+`;
+const OverviewContainer = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+`;
 
-    .table-view-selection {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      margin-right: 2px;
-      white-space: nowrap;
+const SelectionContainer = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 2px;
+  white-space: nowrap;
+`;
 
-      label {
-        font-size: 13px;
-      }
-    }
-  }
+const SelectionLabel = styled.label`
+  font-size: 13px;
 `;
 
 const EditLinkDialog = withDialog(EditLinkModal);
@@ -474,7 +472,7 @@ function SummaryPanel() {
 
   const total = correlationsData ? correlationsData.values.length : 0;
   return (
-    <div css={panelStyle}>
+    <Container>
       <EditLinkDialog onEdit={editCorrelationTableCellHandler} />
       <SetMolecularFormulaModal
         isOpen={dialog.molecularFormula}
@@ -506,13 +504,13 @@ function SummaryPanel() {
           },
         ]}
       >
-        <div className="extra-header-content">
-          <div className="overview-container">
+        <InnerHeader>
+          <OverviewContainer>
             <Overview correlationsData={correlationsData} />
-          </div>
-          <div className="table-view-selection">
+          </OverviewContainer>
+          <SelectionContainer>
             <span>
-              <label>View:</label>
+              <SelectionLabel>View:</SelectionLabel>
               <Select
                 onChange={(selection) => {
                   setSelectedAdditionalColumnsAtomType(selection);
@@ -532,8 +530,8 @@ function SummaryPanel() {
                 }}
               />
             </span>
-          </div>
-        </div>
+          </SelectionContainer>
+        </InnerHeader>
       </DefaultPanelHeader>
       <CorrelationTable
         correlationsData={correlationsData}
@@ -545,7 +543,7 @@ function SummaryPanel() {
         showProtonsAsRows={showProtonsAsRows}
         spectraData={spectraData}
       />
-    </div>
+    </Container>
   );
 }
 
diff --git a/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx b/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx
index caa8e3f73a..bcbe099392 100644
--- a/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx
+++ b/src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx
@@ -1,8 +1,8 @@
-/** @jsxImportSource @emotion/react */
-import { Dialog, DialogBody } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Dialog } from '@blueprintjs/core';
 import { StructureEditor } from 'react-ocl/full';
 
+import { StyledDialogBody } from '../../elements/StyledDialogBody.js';
+
 interface DatabaseStructureSearchModalProps {
   onChange: (idCode: string) => void;
   isOpen: boolean;
@@ -25,18 +25,14 @@ export function DatabaseStructureSearchModal({
       style={{ width: 720 }}
       title="Search by structure"
     >
-      <DialogBody
-        css={css`
-          background-color: white;
-        `}
-      >
+      <StyledDialogBody>
         <StructureEditor
           initialIDCode={idCode}
           svgMenu
           fragment
           onChange={(molFile, molecule, idCode) => onChange(idCode)}
         />
-      </DialogBody>
+      </StyledDialogBody>
     </Dialog>
   );
 }
diff --git a/src/component/panels/informationPanel/InformationEditionModal.tsx b/src/component/panels/informationPanel/InformationEditionModal.tsx
index 211a63f75b..71ba141523 100644
--- a/src/component/panels/informationPanel/InformationEditionModal.tsx
+++ b/src/component/panels/informationPanel/InformationEditionModal.tsx
@@ -1,6 +1,5 @@
-/** @jsxImportSource @emotion/react */
-import { Classes, Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Classes, Dialog, DialogFooter } from '@blueprintjs/core';
+import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useCallback, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
@@ -12,9 +11,16 @@ import { useDispatch } from '../../context/DispatchContext.js';
 import { Input2Controller } from '../../elements/Input2Controller.js';
 import type { Column } from '../../elements/ReactTable/ReactTable.js';
 import ReactTable from '../../elements/ReactTable/ReactTable.js';
+import { StyledDialogBody } from '../../elements/StyledDialogBody.js';
 import useSpectrum from '../../hooks/useSpectrum.js';
 import { checkUniqueByKey } from '../../utility/checkUniqueByKey.js';
-import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 30px);
+  width: 100%;
+`;
 
 const metaInfoArraySchema = array()
   .of(
@@ -189,12 +195,8 @@ function InnerInformationPanel(props: InnerInformationPanelProps) {
   const values = watch('metaInfo');
   return (
     <>
-      <DialogBody
-        css={css`
-          background-color: white;
-        `}
-      >
-        <div css={tablePanelStyle} style={{ height: 'calc(100% - 30px)' }}>
+      <StyledDialogBody>
+        <Container>
           <div style={{ padding: '5px 0', display: 'flex' }}>
             <Button
               intent="success"
@@ -220,8 +222,8 @@ function InnerInformationPanel(props: InnerInformationPanelProps) {
               active: { backgroundColor: '#f5f5f5' },
             }}
           />
-        </div>
-      </DialogBody>
+        </Container>
+      </StyledDialogBody>
       <DialogFooter>
         <Button
           intent="success"
diff --git a/src/component/reducer/actions/DomainActions.ts b/src/component/reducer/actions/DomainActions.ts
index 8aed017a75..d688a63700 100644
--- a/src/component/reducer/actions/DomainActions.ts
+++ b/src/component/reducer/actions/DomainActions.ts
@@ -10,6 +10,10 @@ import type {
 } from 'nmr-load-save';
 
 import { get1DDataXY } from '../../../data/data1d/Spectrum1D/get1DDataXY.js';
+import {
+  isFid1DSpectrum,
+  isFt1DSpectrum,
+} from '../../../data/data1d/Spectrum1D/isSpectrum1D.js';
 import { isSpectrum2D } from '../../../data/data2d/Spectrum2D/index.js';
 import {
   isFid2DData,
@@ -21,10 +25,6 @@ import { addToBrushHistory } from '../helper/ZoomHistoryManager.js';
 import { getActiveSpectra } from '../helper/getActiveSpectra.js';
 import { getActiveSpectrum } from '../helper/getActiveSpectrum.js';
 import type { ActionType } from '../types/ActionType.js';
-import {
-  isFid1DSpectrum,
-  isFt1DSpectrum,
-} from '../../../data/data1d/Spectrum1D/isSpectrum1D.js';
 
 type SetAxisDomainAction = ActionType<
   'SET_AXIS_DOMAIN',
diff --git a/src/demo/Sidebar.tsx b/src/demo/Sidebar.tsx
index c408c2f071..1ff219ee43 100644
--- a/src/demo/Sidebar.tsx
+++ b/src/demo/Sidebar.tsx
@@ -1,15 +1,18 @@
-/** @jsxImportSource @emotion/react */
-
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import Menu from 'rc-menu';
 import { memo, useMemo } from 'react';
 import { FaBars } from 'react-icons/fa';
 import { createSearchParams, useNavigate } from 'react-router-dom';
+
 import 'rc-menu/assets/index.css';
 
 import { buildMenu, getKey } from './utility/menu.js';
 
-const sidebarCss = css`
+interface MenuStatus {
+  isMenuClosed: boolean;
+}
+
+const SideBarContainer = styled.div<MenuStatus>`
   background: #2ca8ff;
   position: fixed;
   top: 0;
@@ -17,17 +20,10 @@ const sidebarCss = css`
   bottom: 0;
   left: 0;
   z-index: 19;
+  width: ${({ isMenuClosed }) => (isMenuClosed ? '3%' : '260px')};
 `;
 
-const sidebarOpenCss = css`
-  width: 260px;
-`;
-
-const sidebarClosedCss = css`
-  width: 3%;
-`;
-
-const menuBtCss = css`
+const MenuButton = styled.button`
   margin: 2px 4px;
   z-index: 7;
   font-size: 18px;
@@ -56,7 +52,7 @@ const menuBtCss = css`
   }
 `;
 
-const logoCss = css`
+const SideBarHeader = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -64,7 +60,12 @@ const logoCss = css`
   border-bottom: 1px solid #eee;
 `;
 
-const simpleTextCss = css`
+const TitleContainer = styled.div<MenuStatus>`
+  display: ${({ isMenuClosed }) => (isMenuClosed ? 'none' : 'block')};
+  padding: 0.5rem 0.7rem;
+`;
+
+const Title = styled.a`
   text-transform: uppercase;
   padding: 0.5rem 0;
   display: block;
@@ -75,21 +76,18 @@ const simpleTextCss = css`
   font-weight: 400;
   line-height: 30px;
   overflow: hidden;
-`;
-
-const logoNormalCss = css`
-  display: block;
   opacity: 1;
   transform: translateZ(0);
 `;
 
-const sidebarWrapperCss = css`
+const SideBarWrapper = styled.div<MenuStatus>`
   position: relative;
   height: calc(100vh - 75px);
   overflow: hidden auto;
   width: 260px;
   z-index: 4;
   padding-bottom: 100px;
+  display: ${({ isMenuClosed }) => (isMenuClosed ? 'none' : 'block')};
 `;
 
 function Sidebar(props) {
@@ -98,25 +96,19 @@ function Sidebar(props) {
     return buildMenu(props.routes);
   }, [props.routes]);
 
-  const subDisplay = props.menuIsClosed ? 'none' : 'block';
+  const { menuIsClosed } = props;
 
   return (
-    <div
-      className="demo-side-bar"
-      css={css(
-        sidebarCss,
-        props.menuIsClosed ? sidebarClosedCss : sidebarOpenCss,
-      )}
-    >
-      <div css={logoCss}>
-        <div style={{ display: subDisplay, padding: '0.5rem 0.7rem' }}>
-          <a css={css(simpleTextCss, logoNormalCss)}>NMRium</a>
-        </div>
-        <button type="button" css={menuBtCss} onClick={props.onMenuToggle}>
+    <SideBarContainer isMenuClosed={menuIsClosed} className="demo-side-bar">
+      <SideBarHeader>
+        <TitleContainer isMenuClosed={menuIsClosed}>
+          <Title>NMRium</Title>
+        </TitleContainer>
+        <MenuButton type="button" onClick={props.onMenuToggle}>
           <FaBars />
-        </button>
-      </div>
-      <div css={sidebarWrapperCss} style={{ display: subDisplay }}>
+        </MenuButton>
+      </SideBarHeader>
+      <SideBarWrapper isMenuClosed={menuIsClosed}>
         {/* @ts-expect-error menu typings are wrong */}
         <Menu
           onClick={(e) => {
@@ -135,8 +127,8 @@ function Sidebar(props) {
         >
           {routes}
         </Menu>
-      </div>
-    </div>
+      </SideBarWrapper>
+    </SideBarContainer>
   );
 }
 
diff --git a/src/demo/layouts/Admin.tsx b/src/demo/layouts/Admin.tsx
index cb7a914cc3..f557448b06 100644
--- a/src/demo/layouts/Admin.tsx
+++ b/src/demo/layouts/Admin.tsx
@@ -1,6 +1,4 @@
-/** @jsxImportSource @emotion/react */
-
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { ReactElement } from 'react';
 import { Suspense, useCallback, useMemo, useState } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
@@ -9,20 +7,13 @@ import Sidebar from '../Sidebar.js';
 import { getKey, mapTreeToFlatArray } from '../utility/menu.js';
 import { possibleViews } from '../views/index.js';
 
-const mainPanelCss = css`
+const Container = styled.div<{ isMenuClosed: boolean }>`
   position: relative;
   float: right;
   height: 100%;
   background-color: #ebecf1;
-`;
-
-const mainPanelOpenCss = css`
-  width: calc(100% - 260px);
-`;
-
-const mainPanelClosedCss = css`
-  width: 98%;
-  margin-left: 20px !important;
+  width: ${({ isMenuClosed }) => (isMenuClosed ? '98%' : 'calc(100% - 260px)')};
+  margin-left: ${({ isMenuClosed }) => (isMenuClosed ? '20px' : '0px')};
 `;
 
 interface DashboardProps {
@@ -71,13 +62,7 @@ export function Dashboard(props: DashboardProps) {
         menuIsClosed={menuIsClosed}
         onMenuToggle={toggleMenu}
       />
-      <div
-        className="demo-main-container"
-        css={css(
-          mainPanelCss,
-          menuIsClosed ? mainPanelClosedCss : mainPanelOpenCss,
-        )}
-      >
+      <Container isMenuClosed={menuIsClosed} className="demo-main-container">
         {/*<StrictMode>*/}
         <Suspense fallback={<div>Loading...</div>}>
           <Routes>
@@ -97,7 +82,7 @@ export function Dashboard(props: DashboardProps) {
           </Routes>
         </Suspense>
         {/*</StrictMode>*/}
-      </div>
+      </Container>
     </div>
   );
 }
diff --git a/src/demo/test/TestHighlight.tsx b/src/demo/test/TestHighlight.tsx
index c4ba0c6a3d..4da7755edd 100644
--- a/src/demo/test/TestHighlight.tsx
+++ b/src/demo/test/TestHighlight.tsx
@@ -1,6 +1,4 @@
-/** @jsxImportSource @emotion/react */
-
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 import {
   HighlightProvider,
@@ -24,39 +22,39 @@ const tableTwo = [
   { id: '5', highlight: [] },
 ];
 
-const mainDiv = css`
+const Container = styled.div`
   display: flex;
   padding: 20px;
 `;
 
-const tableDiv = css`
+const PanelContainer = styled.div`
   padding: 20px;
 `;
 
-const table = css`
+const Table = styled.table`
   border: 1px solid black;
 `;
 
-const th = css`
+const TableHeader = styled.th`
   padding: 5px;
   font-weight: 600;
 `;
 
-const td = css`
+const TableCell = styled.td`
   padding: 5px;
 `;
 
 export default function TestHighlight() {
   return (
     <HighlightProvider>
-      <div css={mainDiv}>
-        <div css={tableDiv}>
+      <Container>
+        <PanelContainer>
           <HighlightTable data={tableOne} />
-        </div>
-        <div css={tableDiv}>
+        </PanelContainer>
+        <PanelContainer>
           <HighlightTable data={tableTwo} />
-        </div>
-      </div>
+        </PanelContainer>
+      </Container>
     </HighlightProvider>
   );
 }
@@ -67,11 +65,11 @@ interface HighlightTableProps {
 
 function HighlightTable(props: HighlightTableProps) {
   return (
-    <table css={table}>
+    <Table>
       <thead>
         <tr>
-          <th css={th}>ID</th>
-          <th css={th}>Highlight ids</th>
+          <TableHeader>ID</TableHeader>
+          <TableHeader>Highlight ids</TableHeader>
         </tr>
       </thead>
       <tbody>
@@ -79,7 +77,7 @@ function HighlightTable(props: HighlightTableProps) {
           <Tr key={datum.id} value={datum} />
         ))}
       </tbody>
-    </table>
+    </Table>
   );
 }
 
@@ -100,8 +98,8 @@ function Tr(props: TrProps) {
       }}
       {...highlight.onHover}
     >
-      <td css={td}>{value.id}</td>
-      <td css={td}>{value.highlight.join(', ')}</td>
+      <TableCell>{value.id}</TableCell>
+      <TableCell>{value.highlight.join(', ')}</TableCell>
     </tr>
   );
 }
diff --git a/src/demo/views/Loading.tsx b/src/demo/views/Loading.tsx
index a351fd8746..d3a3970311 100644
--- a/src/demo/views/Loading.tsx
+++ b/src/demo/views/Loading.tsx
@@ -1,7 +1,6 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
-const style = css`
+const LoadingContainer = styled.div`
   height: 100vh;
   display: flex;
   flex-direction: column;
@@ -39,12 +38,12 @@ const style = css`
 
 export function Loading() {
   return (
-    <div css={style}>
+    <LoadingContainer>
       <span id="title">
         <strong>NMR</strong>
         <strong>ium</strong> loading ...
       </span>
       <div id="loader" />
-    </div>
+    </LoadingContainer>
   );
 }
diff --git a/src/utils/clipboard/clipboardComponents.tsx b/src/utils/clipboard/clipboardComponents.tsx
index 216420d4d8..f436164e72 100644
--- a/src/utils/clipboard/clipboardComponents.tsx
+++ b/src/utils/clipboard/clipboardComponents.tsx
@@ -1,11 +1,10 @@
-/** @jsxImportSource @emotion/react */
-import { Dialog, DialogBody } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import { Dialog } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import type { FormEvent } from 'react';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import Button from '../../component/elements/Button.js';
+import { StyledDialogBody } from '../../component/elements/StyledDialogBody.js';
 
 import type { ClipboardMode } from './types.js';
 
@@ -127,14 +126,9 @@ export function ClipboardFallbackModal(props: ClipboardFallbackProps) {
 
   return (
     <Dialog isOpen onClose={props.onDismiss} title={titles[props.mode]}>
-      <DialogBody
-        css={css`
-          padding: 0;
-          background-color: white;
-        `}
-      >
+      <StyledDialogBody padding="0px">
         <ClipboardFallback {...props} />
-      </DialogBody>
+      </StyledDialogBody>
     </Dialog>
   );
 }