diff --git a/__snapshots__/features/bookings/pages/BookingDetails/BookingDetails.native.test.tsx.native-snap b/__snapshots__/features/bookings/pages/BookingDetails/BookingDetails.native.test.tsx.native-snap
index f2e1c8d4491..aeadb1c6e8c 100644
--- a/__snapshots__/features/bookings/pages/BookingDetails/BookingDetails.native.test.tsx.native-snap
+++ b/__snapshots__/features/bookings/pages/BookingDetails/BookingDetails.native.test.tsx.native-snap
@@ -1088,17 +1088,6 @@ exports[`BookingDetails should render correctly 1`] = `
       }
     }
   >
-    <View
-      customHeight={16}
-      enable={true}
-      style={
-        [
-          {
-            "height": 16,
-          },
-        ]
-      }
-    />
     <View
       collapsable={false}
       height={80}
@@ -1134,38 +1123,22 @@ exports[`BookingDetails should render correctly 1`] = `
       />
     </View>
     <View
-      numberOfSpaces={2}
-      style={
-        [
-          {
-            "height": 8,
-          },
-        ]
-      }
-    />
-    <View
+      marginRight={64}
+      marginTop={16}
       style={
         [
           {
             "alignItems": "center",
-            "flexBasis": 0,
             "flexDirection": "row",
-            "flexGrow": 1,
-            "flexShrink": 1,
+            "justifyContent": "space-between",
+            "marginBottom": 8,
+            "marginLeft": 24,
+            "marginRight": 64,
+            "marginTop": 16,
           },
         ]
       }
     >
-      <View
-        numberOfSpaces={6}
-        style={
-          [
-            {
-              "width": 24,
-            },
-          ]
-        }
-      />
       <View
         accessibilityLabel="Revenir en arrière"
         accessibilityRole="button"
@@ -1288,67 +1261,37 @@ exports[`BookingDetails should render correctly 1`] = `
             },
           ]
         }
-      />
-      <Text
-        accessibilityHidden={true}
-        collapsable={false}
-        numberOfLines={2}
-        style={
-          {
-            "color": "#ffffff",
-            "flexShrink": 1,
-            "opacity": 0,
-            "textAlign": "center",
-          }
-        }
       >
         <Text
+          accessibilityHidden={true}
+          collapsable={false}
+          numberOfLines={2}
           style={
-            [
-              {
-                "color": "#161617",
-                "fontFamily": "Montserrat-Medium",
-                "fontSize": 16,
-                "lineHeight": 25.6,
-              },
-            ]
+            {
+              "color": "#ffffff",
+              "flexShrink": 1,
+              "opacity": 0,
+              "textAlign": "center",
+            }
           }
         >
-          Avez-vous déjà vu ?
+          <Text
+            style={
+              [
+                {
+                  "color": "#161617",
+                  "fontFamily": "Montserrat-Medium",
+                  "fontSize": 16,
+                  "lineHeight": 25.6,
+                },
+              ]
+            }
+          >
+            Avez-vous déjà vu ?
+          </Text>
         </Text>
-      </Text>
-      <View
-        style={
-          [
-            {
-              "flexBasis": 0,
-              "flexGrow": 1,
-              "flexShrink": 1,
-            },
-          ]
-        }
-      />
-      <View
-        numberOfSpaces={16}
-        style={
-          [
-            {
-              "width": 64,
-            },
-          ]
-        }
-      />
+      </View>
     </View>
-    <View
-      numberOfSpaces={2}
-      style={
-        [
-          {
-            "height": 8,
-          },
-        ]
-      }
-    />
   </View>
   <Modal
     accessibilityLabelledBy="testUuidV4"
diff --git a/__snapshots__/features/home/pages/ThematicHome.native.test.tsx.native-snap b/__snapshots__/features/home/pages/ThematicHome.native.test.tsx.native-snap
index 58d79943e40..14564a4e030 100644
--- a/__snapshots__/features/home/pages/ThematicHome.native.test.tsx.native-snap
+++ b/__snapshots__/features/home/pages/ThematicHome.native.test.tsx.native-snap
@@ -348,17 +348,6 @@ exports[`ThematicHome should render correctly 1`] = `
       }
     }
   >
-    <View
-      customHeight={16}
-      enable={true}
-      style={
-        [
-          {
-            "height": 16,
-          },
-        ]
-      }
-    />
     <View
       collapsable={false}
       height={80}
@@ -394,38 +383,22 @@ exports[`ThematicHome should render correctly 1`] = `
       />
     </View>
     <View
-      numberOfSpaces={2}
-      style={
-        [
-          {
-            "height": 8,
-          },
-        ]
-      }
-    />
-    <View
+      marginRight={24}
+      marginTop={16}
       style={
         [
           {
             "alignItems": "center",
-            "flexBasis": 0,
             "flexDirection": "row",
-            "flexGrow": 1,
-            "flexShrink": 1,
+            "justifyContent": "space-between",
+            "marginBottom": 8,
+            "marginLeft": 24,
+            "marginRight": 24,
+            "marginTop": 16,
           },
         ]
       }
     >
-      <View
-        numberOfSpaces={6}
-        style={
-          [
-            {
-              "width": 24,
-            },
-          ]
-        }
-      />
       <View
         accessibilityLabel="Revenir en arrière"
         accessibilityRole="button"
@@ -548,46 +521,36 @@ exports[`ThematicHome should render correctly 1`] = `
             },
           ]
         }
-      />
-      <Text
-        accessibilityHidden={true}
-        collapsable={false}
-        numberOfLines={2}
-        style={
-          {
-            "color": "#ffffff",
-            "flexShrink": 1,
-            "opacity": 0,
-            "textAlign": "center",
-          }
-        }
       >
         <Text
+          accessibilityHidden={true}
+          collapsable={false}
+          numberOfLines={2}
           style={
-            [
-              {
-                "color": "#161617",
-                "fontFamily": "Montserrat-Medium",
-                "fontSize": 16,
-                "lineHeight": 25.6,
-              },
-            ]
+            {
+              "color": "#ffffff",
+              "flexShrink": 1,
+              "opacity": 0,
+              "textAlign": "center",
+            }
           }
         >
-          HeaderTitle
+          <Text
+            style={
+              [
+                {
+                  "color": "#161617",
+                  "fontFamily": "Montserrat-Medium",
+                  "fontSize": 16,
+                  "lineHeight": 25.6,
+                },
+              ]
+            }
+          >
+            HeaderTitle
+          </Text>
         </Text>
-      </Text>
-      <View
-        style={
-          [
-            {
-              "flexBasis": 0,
-              "flexGrow": 1,
-              "flexShrink": 1,
-            },
-          ]
-        }
-      />
+      </View>
       <View
         collapsable={false}
         style={
@@ -797,27 +760,7 @@ exports[`ThematicHome should render correctly 1`] = `
           />
         </View>
       </View>
-      <View
-        numberOfSpaces={6}
-        style={
-          [
-            {
-              "width": 24,
-            },
-          ]
-        }
-      />
     </View>
-    <View
-      numberOfSpaces={2}
-      style={
-        [
-          {
-            "height": 8,
-          },
-        ]
-      }
-    />
   </View>
   <View
     collapsable={false}
diff --git a/__snapshots__/features/tutorial/pages/profileTutorial/ProfileTutorialAgeInformation.native.test.tsx.native-snap b/__snapshots__/features/tutorial/pages/profileTutorial/ProfileTutorialAgeInformation.native.test.tsx.native-snap
index 2829820e877..fc6eb317631 100644
--- a/__snapshots__/features/tutorial/pages/profileTutorial/ProfileTutorialAgeInformation.native.test.tsx.native-snap
+++ b/__snapshots__/features/tutorial/pages/profileTutorial/ProfileTutorialAgeInformation.native.test.tsx.native-snap
@@ -2629,17 +2629,6 @@ exports[`<ProfileTutorialAgeInformation /> should display not logged in version
       }
     }
   >
-    <View
-      customHeight={16}
-      enable={true}
-      style={
-        [
-          {
-            "height": 16,
-          },
-        ]
-      }
-    />
     <View
       collapsable={false}
       height={80}
@@ -2675,38 +2664,22 @@ exports[`<ProfileTutorialAgeInformation /> should display not logged in version
       />
     </View>
     <View
-      numberOfSpaces={2}
-      style={
-        [
-          {
-            "height": 8,
-          },
-        ]
-      }
-    />
-    <View
+      marginRight={64}
+      marginTop={16}
       style={
         [
           {
             "alignItems": "center",
-            "flexBasis": 0,
             "flexDirection": "row",
-            "flexGrow": 1,
-            "flexShrink": 1,
+            "justifyContent": "space-between",
+            "marginBottom": 8,
+            "marginLeft": 24,
+            "marginRight": 64,
+            "marginTop": 16,
           },
         ]
       }
     >
-      <View
-        numberOfSpaces={6}
-        style={
-          [
-            {
-              "width": 24,
-            },
-          ]
-        }
-      />
       <View
         accessibilityLabel="Revenir en arrière"
         accessibilityRole="button"
@@ -2829,67 +2802,37 @@ exports[`<ProfileTutorialAgeInformation /> should display not logged in version
             },
           ]
         }
-      />
-      <Text
-        accessibilityHidden={true}
-        collapsable={false}
-        numberOfLines={2}
-        style={
-          {
-            "color": "#ffffff",
-            "flexShrink": 1,
-            "opacity": 0,
-            "textAlign": "center",
-          }
-        }
       >
         <Text
+          accessibilityHidden={true}
+          collapsable={false}
+          numberOfLines={2}
           style={
-            [
-              {
-                "color": "#161617",
-                "fontFamily": "Montserrat-Medium",
-                "fontSize": 16,
-                "lineHeight": 25.6,
-              },
-            ]
+            {
+              "color": "#ffffff",
+              "flexShrink": 1,
+              "opacity": 0,
+              "textAlign": "center",
+            }
           }
         >
-          Le pass Culture à 15 ans
+          <Text
+            style={
+              [
+                {
+                  "color": "#161617",
+                  "fontFamily": "Montserrat-Medium",
+                  "fontSize": 16,
+                  "lineHeight": 25.6,
+                },
+              ]
+            }
+          >
+            Le pass Culture à 15 ans
+          </Text>
         </Text>
-      </Text>
-      <View
-        style={
-          [
-            {
-              "flexBasis": 0,
-              "flexGrow": 1,
-              "flexShrink": 1,
-            },
-          ]
-        }
-      />
-      <View
-        numberOfSpaces={16}
-        style={
-          [
-            {
-              "width": 64,
-            },
-          ]
-        }
-      />
+      </View>
     </View>
-    <View
-      numberOfSpaces={2}
-      style={
-        [
-          {
-            "height": 8,
-          },
-        ]
-      }
-    />
   </View>,
 ]
 `;
@@ -5264,17 +5207,6 @@ exports[`<ProfileTutorialAgeInformation /> should render correctly when logged i
       }
     }
   >
-    <View
-      customHeight={16}
-      enable={true}
-      style={
-        [
-          {
-            "height": 16,
-          },
-        ]
-      }
-    />
     <View
       collapsable={false}
       height={80}
@@ -5310,38 +5242,22 @@ exports[`<ProfileTutorialAgeInformation /> should render correctly when logged i
       />
     </View>
     <View
-      numberOfSpaces={2}
-      style={
-        [
-          {
-            "height": 8,
-          },
-        ]
-      }
-    />
-    <View
+      marginRight={64}
+      marginTop={16}
       style={
         [
           {
             "alignItems": "center",
-            "flexBasis": 0,
             "flexDirection": "row",
-            "flexGrow": 1,
-            "flexShrink": 1,
+            "justifyContent": "space-between",
+            "marginBottom": 8,
+            "marginLeft": 24,
+            "marginRight": 64,
+            "marginTop": 16,
           },
         ]
       }
     >
-      <View
-        numberOfSpaces={6}
-        style={
-          [
-            {
-              "width": 24,
-            },
-          ]
-        }
-      />
       <View
         accessibilityLabel="Revenir en arrière"
         accessibilityRole="button"
@@ -5464,67 +5380,37 @@ exports[`<ProfileTutorialAgeInformation /> should render correctly when logged i
             },
           ]
         }
-      />
-      <Text
-        accessibilityHidden={true}
-        collapsable={false}
-        numberOfLines={2}
-        style={
-          {
-            "color": "#ffffff",
-            "flexShrink": 1,
-            "opacity": 0,
-            "textAlign": "center",
-          }
-        }
       >
         <Text
+          accessibilityHidden={true}
+          collapsable={false}
+          numberOfLines={2}
           style={
-            [
-              {
-                "color": "#161617",
-                "fontFamily": "Montserrat-Medium",
-                "fontSize": 16,
-                "lineHeight": 25.6,
-              },
-            ]
+            {
+              "color": "#ffffff",
+              "flexShrink": 1,
+              "opacity": 0,
+              "textAlign": "center",
+            }
           }
         >
-          Comment ça marche ?
+          <Text
+            style={
+              [
+                {
+                  "color": "#161617",
+                  "fontFamily": "Montserrat-Medium",
+                  "fontSize": 16,
+                  "lineHeight": 25.6,
+                },
+              ]
+            }
+          >
+            Comment ça marche ?
+          </Text>
         </Text>
-      </Text>
-      <View
-        style={
-          [
-            {
-              "flexBasis": 0,
-              "flexGrow": 1,
-              "flexShrink": 1,
-            },
-          ]
-        }
-      />
-      <View
-        numberOfSpaces={16}
-        style={
-          [
-            {
-              "width": 64,
-            },
-          ]
-        }
-      />
+      </View>
     </View>
-    <View
-      numberOfSpaces={2}
-      style={
-        [
-          {
-            "height": 8,
-          },
-        ]
-      }
-    />
   </View>,
 ]
 `;
diff --git a/__snapshots__/features/venue/pages/Venue/Venue.native.test.tsx.native-snap b/__snapshots__/features/venue/pages/Venue/Venue.native.test.tsx.native-snap
index 77d74bbf7ae..d6cebdefc63 100644
--- a/__snapshots__/features/venue/pages/Venue/Venue.native.test.tsx.native-snap
+++ b/__snapshots__/features/venue/pages/Venue/Venue.native.test.tsx.native-snap
@@ -4414,17 +4414,6 @@ d’options
       }
     }
   >
-    <View
-      customHeight={16}
-      enable={true}
-      style={
-        [
-          {
-            "height": 16,
-          },
-        ]
-      }
-    />
     <View
       collapsable={false}
       height={80}
@@ -4460,38 +4449,22 @@ d’options
       />
     </View>
     <View
-      numberOfSpaces={2}
-      style={
-        [
-          {
-            "height": 8,
-          },
-        ]
-      }
-    />
-    <View
+      marginRight={24}
+      marginTop={16}
       style={
         [
           {
             "alignItems": "center",
-            "flexBasis": 0,
             "flexDirection": "row",
-            "flexGrow": 1,
-            "flexShrink": 1,
+            "justifyContent": "space-between",
+            "marginBottom": 8,
+            "marginLeft": 24,
+            "marginRight": 24,
+            "marginTop": 16,
           },
         ]
       }
     >
-      <View
-        numberOfSpaces={6}
-        style={
-          [
-            {
-              "width": 24,
-            },
-          ]
-        }
-      />
       <View
         accessibilityLabel="Revenir en arrière"
         accessibilityRole="button"
@@ -4614,47 +4587,37 @@ d’options
             },
           ]
         }
-      />
-      <Text
-        accessibilityHidden={true}
-        collapsable={false}
-        numberOfLines={2}
-        style={
-          {
-            "color": "#ffffff",
-            "flexShrink": 1,
-            "opacity": 0,
-            "textAlign": "center",
-          }
-        }
-        testID="venueHeaderName"
       >
         <Text
+          accessibilityHidden={true}
+          collapsable={false}
+          numberOfLines={2}
           style={
-            [
-              {
-                "color": "#161617",
-                "fontFamily": "Montserrat-Medium",
-                "fontSize": 16,
-                "lineHeight": 25.6,
-              },
-            ]
+            {
+              "color": "#ffffff",
+              "flexShrink": 1,
+              "opacity": 0,
+              "textAlign": "center",
+            }
           }
+          testID="venueHeaderName"
         >
-          Le Petit Rintintin 1
+          <Text
+            style={
+              [
+                {
+                  "color": "#161617",
+                  "fontFamily": "Montserrat-Medium",
+                  "fontSize": 16,
+                  "lineHeight": 25.6,
+                },
+              ]
+            }
+          >
+            Le Petit Rintintin 1
+          </Text>
         </Text>
-      </Text>
-      <View
-        style={
-          [
-            {
-              "flexBasis": 0,
-              "flexGrow": 1,
-              "flexShrink": 1,
-            },
-          ]
-        }
-      />
+      </View>
       <View
         accessibilityLabel="Partager"
         accessibilityRole="button"
@@ -4767,27 +4730,7 @@ d’options
           </View>
         </View>
       </View>
-      <View
-        numberOfSpaces={6}
-        style={
-          [
-            {
-              "width": 24,
-            },
-          ]
-        }
-      />
     </View>
-    <View
-      numberOfSpaces={2}
-      style={
-        [
-          {
-            "height": 8,
-          },
-        ]
-      }
-    />
   </View>
   <View
     style={
@@ -8170,17 +8113,6 @@ d’options
       }
     }
   >
-    <View
-      customHeight={16}
-      enable={true}
-      style={
-        [
-          {
-            "height": 16,
-          },
-        ]
-      }
-    />
     <View
       collapsable={false}
       height={80}
@@ -8216,38 +8148,22 @@ d’options
       />
     </View>
     <View
-      numberOfSpaces={2}
-      style={
-        [
-          {
-            "height": 8,
-          },
-        ]
-      }
-    />
-    <View
+      marginRight={24}
+      marginTop={16}
       style={
         [
           {
             "alignItems": "center",
-            "flexBasis": 0,
             "flexDirection": "row",
-            "flexGrow": 1,
-            "flexShrink": 1,
+            "justifyContent": "space-between",
+            "marginBottom": 8,
+            "marginLeft": 24,
+            "marginRight": 24,
+            "marginTop": 16,
           },
         ]
       }
     >
-      <View
-        numberOfSpaces={6}
-        style={
-          [
-            {
-              "width": 24,
-            },
-          ]
-        }
-      />
       <View
         accessibilityLabel="Revenir en arrière"
         accessibilityRole="button"
@@ -8370,47 +8286,37 @@ d’options
             },
           ]
         }
-      />
-      <Text
-        accessibilityHidden={true}
-        collapsable={false}
-        numberOfLines={2}
-        style={
-          {
-            "color": "#ffffff",
-            "flexShrink": 1,
-            "opacity": 0,
-            "textAlign": "center",
-          }
-        }
-        testID="venueHeaderName"
       >
         <Text
+          accessibilityHidden={true}
+          collapsable={false}
+          numberOfLines={2}
           style={
-            [
-              {
-                "color": "#161617",
-                "fontFamily": "Montserrat-Medium",
-                "fontSize": 16,
-                "lineHeight": 25.6,
-              },
-            ]
+            {
+              "color": "#ffffff",
+              "flexShrink": 1,
+              "opacity": 0,
+              "textAlign": "center",
+            }
           }
+          testID="venueHeaderName"
         >
-          Le Petit Rintintin 1
+          <Text
+            style={
+              [
+                {
+                  "color": "#161617",
+                  "fontFamily": "Montserrat-Medium",
+                  "fontSize": 16,
+                  "lineHeight": 25.6,
+                },
+              ]
+            }
+          >
+            Le Petit Rintintin 1
+          </Text>
         </Text>
-      </Text>
-      <View
-        style={
-          [
-            {
-              "flexBasis": 0,
-              "flexGrow": 1,
-              "flexShrink": 1,
-            },
-          ]
-        }
-      />
+      </View>
       <View
         accessibilityLabel="Partager"
         accessibilityRole="button"
@@ -8523,27 +8429,7 @@ d’options
           </View>
         </View>
       </View>
-      <View
-        numberOfSpaces={6}
-        style={
-          [
-            {
-              "width": 24,
-            },
-          ]
-        }
-      />
     </View>
-    <View
-      numberOfSpaces={2}
-      style={
-        [
-          {
-            "height": 8,
-          },
-        ]
-      }
-    />
   </View>
   <View
     style={
diff --git a/src/features/offer/components/OfferHeader/OfferHeader.tsx b/src/features/offer/components/OfferHeader/OfferHeader.tsx
index 569cd237cb6..305a79a4282 100644
--- a/src/features/offer/components/OfferHeader/OfferHeader.tsx
+++ b/src/features/offer/components/OfferHeader/OfferHeader.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 import { Animated } from 'react-native'
-import { useTheme } from 'styled-components/native'
+import styled, { useTheme } from 'styled-components/native'
 
 import { OfferResponseV2 } from 'api/gen'
 import { getSearchStackConfig } from 'features/navigation/SearchStackNavigator/helpers'
@@ -13,6 +13,7 @@ import { FavoriteButton } from 'ui/components/buttons/FavoriteButton'
 import { RoundedButton } from 'ui/components/buttons/RoundedButton'
 import { ContentHeader } from 'ui/components/headers/ContentHeader'
 import { useModal } from 'ui/components/modals/useModal'
+import { ViewGap } from 'ui/components/ViewGap/ViewGap'
 import { Spacer } from 'ui/theme'
 
 interface Props {
@@ -57,7 +58,7 @@ export function OfferHeader({ headerTransition, title, offer }: Readonly<Props>)
         onBackPress={goBack}
         LeftElement={<Spacer.Row numberOfSpaces={13} />}
         RightElement={
-          <React.Fragment>
+          <ButtonsWrapper gap={3}>
             <RoundedButton
               animationState={animationState}
               iconName="share"
@@ -65,9 +66,8 @@ export function OfferHeader({ headerTransition, title, offer }: Readonly<Props>)
               accessibilityLabel="Partager"
               finalColor={theme.colors.black}
             />
-            <Spacer.Row numberOfSpaces={3} />
             <FavoriteButton animationState={animationState} offerId={offer.id} />
-          </React.Fragment>
+          </ButtonsWrapper>
         }
       />
       {shareContent ? (
@@ -81,3 +81,8 @@ export function OfferHeader({ headerTransition, title, offer }: Readonly<Props>)
     </React.Fragment>
   )
 }
+
+const ButtonsWrapper = styled(ViewGap)({
+  flexDirection: 'row',
+  alignItems: 'center',
+})
diff --git a/src/ui/components/headers/ContentHeader.tsx b/src/ui/components/headers/ContentHeader.tsx
index 516cc8f59de..fa7246c5ce2 100644
--- a/src/ui/components/headers/ContentHeader.tsx
+++ b/src/ui/components/headers/ContentHeader.tsx
@@ -6,7 +6,7 @@ import styled, { useTheme } from 'styled-components/native'
 import { getAnimationState } from 'ui/animations/helpers/getAnimationState'
 import { BlurView } from 'ui/components/BlurView'
 import { RoundedButton } from 'ui/components/buttons/RoundedButton'
-import { Spacer, TypoDS } from 'ui/theme'
+import { TypoDS, getSpacing } from 'ui/theme'
 
 type AnimatedBlurHeaderFullProps = {
   headerTitle?: string
@@ -38,9 +38,10 @@ export const ContentHeader = ({
   const [ariaHiddenTitle, setAriaHiddenTitle] = useState(true)
   headerTransition.addListener((opacity) => setAriaHiddenTitle(opacity.value !== 1))
 
+  const marginTopHeader = Platform.OS === 'ios' ? top : top + getSpacing(2)
+
   return (
     <HeaderContainer style={containerStyle} height={headerHeight}>
-      <Spacer.TopScreen />
       {
         // There is an issue with the blur on Android: we chose not to render it and use a white background
         // https://github.com/Kureev/react-native-blur/issues/511
@@ -50,9 +51,7 @@ export const ContentHeader = ({
           </BlurNativeContainer>
         )
       }
-      <Spacer.Column numberOfSpaces={2} />
-      <Row>
-        <Spacer.Row numberOfSpaces={6} />
+      <Row marginRight={RightElement ? getSpacing(6) : getSpacing(16)} marginTop={marginTopHeader}>
         <RoundedButton
           animationState={animationState}
           iconName="back"
@@ -61,25 +60,17 @@ export const ContentHeader = ({
           finalColor={theme.colors.black}
           initialColor={theme.colors.black}
         />
-        {LeftElement ? <React.Fragment>{LeftElement}</React.Fragment> : null}
-        <Spacer.Flex />
-        <Title
-          testID={titleTestID}
-          style={{ opacity: customHeaderTitleTransition ?? headerTransition }} // Utilisation de l'interpolation effective
-          accessibilityHidden={ariaHiddenTitle}>
-          <Body>{headerTitle}</Body>
-        </Title>
-        <Spacer.Flex />
-        {RightElement ? (
-          <React.Fragment>
-            {RightElement}
-            <Spacer.Row numberOfSpaces={6} />
-          </React.Fragment>
-        ) : (
-          <Spacer.Row numberOfSpaces={16} />
-        )}
+        {LeftElement}
+        <TitleContainer>
+          <Title
+            testID={titleTestID}
+            style={{ opacity: customHeaderTitleTransition ?? headerTransition }} // Utilisation de l'interpolation effective
+            accessibilityHidden={ariaHiddenTitle}>
+            <Body>{headerTitle}</Body>
+          </Title>
+        </TitleContainer>
+        {RightElement}
       </Row>
-      <Spacer.Column numberOfSpaces={2} />
     </HeaderContainer>
   )
 }
@@ -108,6 +99,10 @@ const HeaderContainer = styled(Animated.View)<{ height: number }>(({ theme, heig
   borderBottomWidth: 1,
 }))
 
+const TitleContainer = styled.View({
+  flex: 1,
+})
+
 const Title = styled(Animated.Text).attrs({
   numberOfLines: 2,
 })(({ theme }) => ({
@@ -121,8 +116,15 @@ const Body = styled(TypoDS.Body)(({ theme }) => ({
   color: theme.colors.black,
 }))
 
-const Row = styled.View({
-  flex: 1,
-  flexDirection: 'row',
-  alignItems: 'center',
-})
+const Row = styled.View<{ marginRight: number; marginTop: number }>(
+  ({ marginRight, marginTop }) => ({
+    ...(Platform.OS === 'web' ? { flex: 1 } : {}),
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop,
+    marginBottom: getSpacing(2),
+    marginLeft: getSpacing(6),
+    marginRight,
+  })
+)