diff --git a/ui-speedspacechart/src/components/SpeedSpaceChart.tsx b/ui-speedspacechart/src/components/SpeedSpaceChart.tsx
index 882865ad4..bce5a89d7 100644
--- a/ui-speedspacechart/src/components/SpeedSpaceChart.tsx
+++ b/ui-speedspacechart/src/components/SpeedSpaceChart.tsx
@@ -101,6 +101,7 @@ const SpeedSpaceChart = ({
     : width;
 
   const [showDetailsBox, setShowDetailsBox] = useState(false);
+  const [isMouseHoveringSettingsPanel, setIsMouseHoveringSettingsPanel] = useState(false);
 
   const reset = () => {
     setStore((prev) => ({
@@ -162,6 +163,7 @@ const SpeedSpaceChart = ({
             color={backgroundColor}
             store={store}
             setStore={setStore}
+            setIsMouseHoveringSettingsPanel={setIsMouseHoveringSettingsPanel}
             translations={translations}
           />
         </div>
@@ -187,14 +189,14 @@ const SpeedSpaceChart = ({
       <TickLayerY width={width} height={height} store={store} />
       {store.layersDisplay.electricalProfiles && (
         <ElectricalProfileLayer
-          width={width}
+          width={adjustedWidthRightAxis}
           height={height + LINEAR_LAYERS_HEIGHTS.ELECTRICAL_PROFILES_HEIGHT}
           store={store}
         />
       )}
       {store.layersDisplay.powerRestrictions && (
         <PowerRestrictionsLayer
-          width={width}
+          width={adjustedWidthRightAxis}
           marginTop={getLinearLayerMarginTop(height, store.layersDisplay)}
           store={store}
         />
@@ -204,15 +206,16 @@ const SpeedSpaceChart = ({
       {store.layersDisplay.declivities && (
         <TickLayerYRight width={width} height={height} store={store} />
       )}
-      <ReticleLayer
-        width={adjustedWidthRightAxis}
-        height={dynamicHeight}
-        heightOffset={dynamicHeightOffset}
-        store={store}
-        showDetailsBox={showDetailsBox}
-        setShowDetailsBox={setShowDetailsBox}
-      />
-
+      {!isMouseHoveringSettingsPanel && (
+        <ReticleLayer
+          width={adjustedWidthRightAxis}
+          height={dynamicHeight}
+          heightOffset={dynamicHeightOffset}
+          store={store}
+          showDetailsBox={showDetailsBox}
+          setShowDetailsBox={setShowDetailsBox}
+        />
+      )}
       <FrontInteractivityLayer
         width={WIDTH_OFFSET}
         height={dynamicHeightOffset}
diff --git a/ui-speedspacechart/src/components/common/DetailsBox.tsx b/ui-speedspacechart/src/components/common/DetailsBox.tsx
index b7624f858..4647269ba 100644
--- a/ui-speedspacechart/src/components/common/DetailsBox.tsx
+++ b/ui-speedspacechart/src/components/common/DetailsBox.tsx
@@ -38,14 +38,12 @@ const DetailsBox = ({
   let rightOffset = 0;
   let bottomOffset = 0;
 
+  const adaptedOffset = store.isSettingsPanelOpened ? 641 : 115;
+
   // find out if the box is going out off the right side of the canvas
-  if (curveX + MARGIN_LEFT + 115 > width - MARGIN_RIGHT - 10) {
-    rightOffset = 127;
-  }
+  if (curveX + MARGIN_LEFT + adaptedOffset > width - MARGIN_RIGHT - 10) rightOffset = 127;
   // find out if the box is going out off the bottom side of the canvas
-  if (curveY + MARGIN_TOP + 180 > height - MARGIN_BOTTOM - 10) {
-    bottomOffset = 192;
-  }
+  if (curveY + MARGIN_TOP + 180 > height - MARGIN_BOTTOM - 10) bottomOffset = 192;
 
   const boxX = curveX + MARGIN_LEFT + 6 - rightOffset;
   const boxY = curveY + MARGIN_TOP + 6 - bottomOffset;
diff --git a/ui-speedspacechart/src/components/common/SettingsPanel.tsx b/ui-speedspacechart/src/components/common/SettingsPanel.tsx
index 984c2533e..4025b6d58 100644
--- a/ui-speedspacechart/src/components/common/SettingsPanel.tsx
+++ b/ui-speedspacechart/src/components/common/SettingsPanel.tsx
@@ -10,11 +10,19 @@ type SettingsPanelProps = {
   color: string;
   store: Store;
   setStore: React.Dispatch<React.SetStateAction<Store>>;
+  setIsMouseHoveringSettingsPanel: React.Dispatch<React.SetStateAction<boolean>>;
   translations?: SpeedSpaceChartProps['translations'];
 };
 
-const SettingsPanel = ({ color, store, setStore, translations }: SettingsPanelProps) => {
+const SettingsPanel = ({
+  color,
+  store,
+  setStore,
+  setIsMouseHoveringSettingsPanel,
+  translations,
+}: SettingsPanelProps) => {
   const closeSettingsPanel = () => {
+    setIsMouseHoveringSettingsPanel(false);
     setStore((prev) => ({
       ...prev,
       isSettingsPanelOpened: false,
@@ -26,6 +34,8 @@ const SettingsPanel = ({ color, store, setStore, translations }: SettingsPanelPr
       id="settings-panel"
       style={{ background: `rgba(${color.substring(4, color.length - 1)}, 0.4)` }}
       className="font-sans"
+      onMouseEnter={() => setIsMouseHoveringSettingsPanel(true)}
+      onMouseLeave={() => setIsMouseHoveringSettingsPanel(false)}
     >
       <div className="settings-panel-section">
         <div className="settings-panel-section-title">
diff --git a/ui-speedspacechart/src/styles/main.css b/ui-speedspacechart/src/styles/main.css
index 4bb835b56..cb9d27b6e 100644
--- a/ui-speedspacechart/src/styles/main.css
+++ b/ui-speedspacechart/src/styles/main.css
@@ -130,7 +130,7 @@
 #settings-panel {
   position: absolute;
   display: flex;
-  height: 27.5rem;
+  height: 27.625rem;
   width: 32.875rem;
   margin-right: 20px;
   color: rgb(49, 46, 43);