diff --git a/src/pages/AddOnDetails.tsx b/src/pages/AddOnDetails.tsx
index 66029ca88..43708b693 100644
--- a/src/pages/AddOnDetails.tsx
+++ b/src/pages/AddOnDetails.tsx
@@ -64,8 +64,8 @@ const AddOnDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderInlineBreadcrumbBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group className="overflow-hidden">
           <Button
             icon="arrow-left"
             variant="quaternary"
@@ -88,7 +88,7 @@ const AddOnDetails = () => {
             </Typography>
           )}
           <Typography variant="bodyHl" color="textSecondary" noWrap></Typography>
-        </HeaderInlineBreadcrumbBlock>
+        </PageHeader.Group>
 
         {shouldShowActions && (
           <Popper
@@ -133,7 +133,8 @@ const AddOnDetails = () => {
             )}
           </Popper>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
+
       {isAddOnLoading ? (
         <DetailsHeaderSkeleton />
       ) : (
@@ -208,15 +209,6 @@ const AddOnDetails = () => {
 
 export default AddOnDetails
 
-const HeaderInlineBreadcrumbBlock = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${theme.spacing(3)};
-
-  /* Prevent long name to not overflow in header */
-  overflow: hidden;
-`
-
 const Container = styled.section`
   display: flex;
   flex-direction: column;
diff --git a/src/pages/AddOnsList.tsx b/src/pages/AddOnsList.tsx
index d0dddab99..af167ae7d 100644
--- a/src/pages/AddOnsList.tsx
+++ b/src/pages/AddOnsList.tsx
@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client'
 import { useRef } from 'react'
 import { generatePath, useNavigate } from 'react-router-dom'
-import styled from 'styled-components'
 
 import { DeleteAddOnDialog, DeleteAddOnDialogRef } from '~/components/addOns/DeleteAddOnDialog'
 import {
@@ -27,7 +26,7 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useDebouncedSearch } from '~/hooks/useDebouncedSearch'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
 import { usePermissions } from '~/hooks/usePermissions'
-import { PageHeader, theme } from '~/styles'
+import { PageHeader } from '~/styles'
 
 gql`
   fragment AddOnItem on AddOn {
@@ -71,11 +70,11 @@ const AddOnsList = () => {
 
   return (
     <>
-      <Header withSide>
+      <PageHeader.Wrapper className="gap-4 *:whitespace-pre" withSide>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate('text_629728388c4d2300e2d3809b')}
         </Typography>
-        <HeaderRigthBlock>
+        <PageHeader.Group>
           <SearchInput
             onChange={debouncedSearch}
             placeholder={translate('text_63bee4e10e2d53912bfe4db8')}
@@ -85,8 +84,8 @@ const AddOnsList = () => {
               {translate('text_629728388c4d2300e2d38085')}
             </ButtonLink>
           )}
-        </HeaderRigthBlock>
-      </Header>
+        </PageHeader.Group>
+      </PageHeader.Wrapper>
 
       <InfiniteScroll
         onBottom={() => {
@@ -235,23 +234,4 @@ const AddOnsList = () => {
   )
 }
 
-const Header = styled(PageHeader)`
-  > * {
-    white-space: pre;
-
-    &:first-child {
-      margin-right: ${theme.spacing(4)};
-    }
-  }
-`
-
-const HeaderRigthBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > :first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 export default AddOnsList
diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
index bf245c982..e17097f36 100644
--- a/src/pages/Analytics.tsx
+++ b/src/pages/Analytics.tsx
@@ -48,11 +48,12 @@ const Analytics = () => {
 
   return (
     <>
-      <PageHeader withSide>
+      <PageHeader.Wrapper withSide>
         <Typography variant="bodyHl" color="grey700" noWrap>
           {translate('text_6553885df387fd0097fd7384')}
         </Typography>
-        <PageHeaderRight>
+
+        <PageHeader.Group>
           <Popper
             maxHeight={452}
             PopperProps={{ placement: 'bottom-end' }}
@@ -137,8 +138,8 @@ const Analytics = () => {
             setPeriodScope={setPeriodScope}
             premiumWarningDialogRef={premiumWarningDialogRef}
           />
-        </PageHeaderRight>
-      </PageHeader>
+        </PageHeader.Group>
+      </PageHeader.Wrapper>
 
       {!isPremium && !!currentUser && (
         <UpgradeBlock>
@@ -202,12 +203,6 @@ const Analytics = () => {
 
 export default Analytics
 
-const PageHeaderRight = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${theme.spacing(3)};
-`
-
 const ContentWrapper = styled.div`
   display: grid;
   grid-template-columns: 1fr;
diff --git a/src/pages/BillableMetricsList.tsx b/src/pages/BillableMetricsList.tsx
index ff6728f20..a0b61bcf0 100644
--- a/src/pages/BillableMetricsList.tsx
+++ b/src/pages/BillableMetricsList.tsx
@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client'
 import { useRef } from 'react'
 import { generatePath, useNavigate } from 'react-router-dom'
-import styled from 'styled-components'
 
 import {
   DeleteBillableMetricDialog,
@@ -22,7 +21,7 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useDebouncedSearch } from '~/hooks/useDebouncedSearch'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
 import { usePermissions } from '~/hooks/usePermissions'
-import { PageHeader, theme } from '~/styles'
+import { PageHeader } from '~/styles'
 
 gql`
   fragment BillableMetricItem on BillableMetric {
@@ -63,11 +62,11 @@ const BillableMetricsList = () => {
 
   return (
     <>
-      <Header withSide>
+      <PageHeader.Wrapper className="gap-4 *:whitespace-pre" withSide>
         <Typography variant="bodyHl" color="textSecondary">
           {translate('text_623b497ad05b960101be3438')}
         </Typography>
-        <HeaderRigthBlock>
+        <PageHeader.Group>
           <SearchInput
             onChange={debouncedSearch}
             placeholder={translate('text_63ba9ee977a67c9693f50aea')}
@@ -77,8 +76,8 @@ const BillableMetricsList = () => {
               {translate('text_623b497ad05b960101be343a')}
             </ButtonLink>
           )}
-        </HeaderRigthBlock>
-      </Header>
+        </PageHeader.Group>
+      </PageHeader.Wrapper>
 
       <InfiniteScroll
         onBottom={() => {
@@ -193,23 +192,4 @@ const BillableMetricsList = () => {
   )
 }
 
-const Header = styled(PageHeader)`
-  > * {
-    white-space: pre;
-
-    &:first-child {
-      margin-right: ${theme.spacing(4)};
-    }
-  }
-`
-
-const HeaderRigthBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > :first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 export default BillableMetricsList
diff --git a/src/pages/CouponDetails.tsx b/src/pages/CouponDetails.tsx
index c269d1ac2..40f505e05 100644
--- a/src/pages/CouponDetails.tsx
+++ b/src/pages/CouponDetails.tsx
@@ -119,8 +119,8 @@ const CouponDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderInlineBreadcrumbBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group className="overflow-hidden">
           <Button
             icon="arrow-left"
             variant="quaternary"
@@ -143,7 +143,7 @@ const CouponDetails = () => {
             </Typography>
           )}
           <Typography variant="bodyHl" color="textSecondary" noWrap></Typography>
-        </HeaderInlineBreadcrumbBlock>
+        </PageHeader.Group>
 
         {shouldShowActions && (
           <Popper
@@ -213,7 +213,7 @@ const CouponDetails = () => {
             )}
           </Popper>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
       {isCouponLoading ? (
         <DetailsHeaderSkeleton />
       ) : (
@@ -402,15 +402,6 @@ const CouponDetails = () => {
 
 export default CouponDetails
 
-const HeaderInlineBreadcrumbBlock = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${theme.spacing(3)};
-
-  /* Prevent long name to not overflow in header */
-  overflow: hidden;
-`
-
 const Container = styled.section`
   display: flex;
   flex-direction: column;
diff --git a/src/pages/CouponsList.tsx b/src/pages/CouponsList.tsx
index 98cf48619..a3769b39c 100644
--- a/src/pages/CouponsList.tsx
+++ b/src/pages/CouponsList.tsx
@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client'
 import { useRef } from 'react'
 import { generatePath, useNavigate } from 'react-router-dom'
-import styled from 'styled-components'
 
 import { CouponCaption } from '~/components/coupons/CouponCaption'
 import { DeleteCouponDialog, DeleteCouponDialogRef } from '~/components/coupons/DeleteCouponDialog'
@@ -31,7 +30,7 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useDebouncedSearch } from '~/hooks/useDebouncedSearch'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
 import { usePermissions } from '~/hooks/usePermissions'
-import { PageHeader, theme } from '~/styles'
+import { PageHeader } from '~/styles'
 
 gql`
   fragment CouponItem on Coupon {
@@ -86,11 +85,11 @@ const CouponsList = () => {
 
   return (
     <>
-      <Header withSide>
+      <PageHeader.Wrapper className="gap-4 *:whitespace-pre" withSide>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate('text_62865498824cc10126ab2956')}
         </Typography>
-        <HeaderRigthBlock>
+        <PageHeader.Group>
           <SearchInput
             onChange={debouncedSearch}
             placeholder={translate('text_63beebbf4f60e2f553232782')}
@@ -100,8 +99,8 @@ const CouponsList = () => {
               {translate('text_62865498824cc10126ab2954')}
             </ButtonLink>
           )}
-        </HeaderRigthBlock>
-      </Header>
+        </PageHeader.Group>
+      </PageHeader.Wrapper>
 
       <InfiniteScroll
         onBottom={() => {
@@ -245,23 +244,4 @@ const CouponsList = () => {
   )
 }
 
-const Header = styled(PageHeader)`
-  > * {
-    white-space: pre;
-
-    &:first-child {
-      margin-right: ${theme.spacing(4)};
-    }
-  }
-`
-
-const HeaderRigthBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > :first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 export default CouponsList
diff --git a/src/pages/CreateAddOn.tsx b/src/pages/CreateAddOn.tsx
index 872425938..2a7ba6ecd 100644
--- a/src/pages/CreateAddOn.tsx
+++ b/src/pages/CreateAddOn.tsx
@@ -152,7 +152,7 @@ const CreateAddOn = () => {
 
   return (
     <div>
-      <PageHeader>
+      <PageHeader.Wrapper>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate(isEdition ? 'text_629728388c4d2300e2d37fc2' : 'text_629728388c4d2300e2d37fbc')}
         </Typography>
@@ -167,7 +167,7 @@ const CreateAddOn = () => {
                 : navigate(ADD_ONS_ROUTE)
           }
         />
-      </PageHeader>
+      </PageHeader.Wrapper>
       <Content>
         <Main>
           <div>
diff --git a/src/pages/CreateBillableMetric.tsx b/src/pages/CreateBillableMetric.tsx
index 410c2e4b9..61a7246a6 100644
--- a/src/pages/CreateBillableMetric.tsx
+++ b/src/pages/CreateBillableMetric.tsx
@@ -252,7 +252,7 @@ const CreateBillableMetric = () => {
 
   return (
     <div>
-      <PageHeader>
+      <PageHeader.Wrapper>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate(isEdition ? 'text_62582fb4675ece01137a7e44' : 'text_623b42ff8ee4e000ba87d0ae')}
         </Typography>
@@ -265,7 +265,7 @@ const CreateBillableMetric = () => {
               : navigate(BILLABLE_METRICS_ROUTE)
           }
         />
-      </PageHeader>
+      </PageHeader.Wrapper>
       <Content>
         <Main>
           <div>
diff --git a/src/pages/CreateCoupon.tsx b/src/pages/CreateCoupon.tsx
index d2702093b..1475a4443 100644
--- a/src/pages/CreateCoupon.tsx
+++ b/src/pages/CreateCoupon.tsx
@@ -221,7 +221,7 @@ const CreateCoupon = () => {
 
   return (
     <div>
-      <PageHeader>
+      <PageHeader.Wrapper>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate(isEdition ? 'text_6287a9bdac160c00b2e0fbe7' : 'text_62876e85e32e0300e18030e7')}
         </Typography>
@@ -232,7 +232,7 @@ const CreateCoupon = () => {
             formikProps.dirty ? warningDialogRef.current?.openDialog() : couponCloseRedirection()
           }
         />
-      </PageHeader>
+      </PageHeader.Wrapper>
       <Content>
         <Main>
           <div>
diff --git a/src/pages/CreateCreditNote.tsx b/src/pages/CreateCreditNote.tsx
index c9d205da3..33cd389a6 100644
--- a/src/pages/CreateCreditNote.tsx
+++ b/src/pages/CreateCreditNote.tsx
@@ -270,7 +270,7 @@ const CreateCreditNote = () => {
 
   return (
     <div>
-      <PageHeader>
+      <PageHeader.Wrapper>
         {loading ? (
           <div>
             <Skeleton variant="text" className="w-30" />
@@ -297,7 +297,7 @@ const CreateCreditNote = () => {
                 )
           }
         />
-      </PageHeader>
+      </PageHeader.Wrapper>
       <Content>
         <Main>
           <div>
diff --git a/src/pages/CreateInvoice.tsx b/src/pages/CreateInvoice.tsx
index 602f1d014..fe8a5cba6 100644
--- a/src/pages/CreateInvoice.tsx
+++ b/src/pages/CreateInvoice.tsx
@@ -459,7 +459,7 @@ const CreateInvoice = () => {
 
   return (
     <>
-      <PageHeader>
+      <PageHeader.Wrapper>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate('text_6453819268763979024acfe9')}
         </Typography>
@@ -473,7 +473,7 @@ const CreateInvoice = () => {
             }
           />
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
       <PageWrapper>
         <CenteredWrapper>
           <Card className="gap-8">
diff --git a/src/pages/CreatePlan.tsx b/src/pages/CreatePlan.tsx
index 9902915b7..13caac488 100644
--- a/src/pages/CreatePlan.tsx
+++ b/src/pages/CreatePlan.tsx
@@ -174,7 +174,7 @@ const CreatePlan = () => {
 
   return (
     <div>
-      <PageHeader>
+      <PageHeader.Wrapper>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate(isEdition ? 'text_625fd165963a7b00c8f59767' : 'text_624453d52e945301380e4988')}
         </Typography>
@@ -186,7 +186,7 @@ const CreatePlan = () => {
           }
           data-test="close-create-plan-button"
         />
-      </PageHeader>
+      </PageHeader.Wrapper>
       <Content>
         <Main>
           <MainMinimumContent>
diff --git a/src/pages/CreateSubscription.tsx b/src/pages/CreateSubscription.tsx
index 8d0bb6517..334b9e457 100644
--- a/src/pages/CreateSubscription.tsx
+++ b/src/pages/CreateSubscription.tsx
@@ -498,7 +498,7 @@ const CreateSubscription = () => {
 
   return (
     <PageContainer>
-      <PageHeader>
+      <PageHeader.Wrapper>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {pageHeaderTitle}
         </Typography>
@@ -548,7 +548,7 @@ const CreateSubscription = () => {
             data-test="close-create-subscription-button"
           />
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
       <Container>
         <SubscriptionAside
           $isResponsive={isResponsive}
diff --git a/src/pages/CreateTax.tsx b/src/pages/CreateTax.tsx
index 48d9d1368..025ac2324 100644
--- a/src/pages/CreateTax.tsx
+++ b/src/pages/CreateTax.tsx
@@ -68,7 +68,7 @@ const CreateTaxRate = () => {
 
   return (
     <div>
-      <PageHeader>
+      <PageHeader.Wrapper>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate(isEdition ? 'text_645bb193927b375079d289b5' : 'text_645bb193927b375079d289af')}
         </Typography>
@@ -81,7 +81,7 @@ const CreateTaxRate = () => {
               : onClose()
           }
         />
-      </PageHeader>
+      </PageHeader.Wrapper>
       <Content>
         <Main>
           <div>
diff --git a/src/pages/CreditNoteDetails.tsx b/src/pages/CreditNoteDetails.tsx
index 9ad6c85b3..edf219e5e 100644
--- a/src/pages/CreditNoteDetails.tsx
+++ b/src/pages/CreditNoteDetails.tsx
@@ -328,8 +328,8 @@ const CreditNoteDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderLeft>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <Button
             icon="arrow-left"
             variant="quaternary"
@@ -356,7 +356,7 @@ const CreditNoteDetails = () => {
               {creditNote?.number}
             </Typography>
           )}
-        </HeaderLeft>
+        </PageHeader.Group>
 
         {!hasError && !loading && (
           <Popper
@@ -449,7 +449,7 @@ const CreditNoteDetails = () => {
             )}
           </Popper>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
       {hasError ? (
         <GenericPlaceholder
           title={translate('text_634812d6f16b31ce5cbf4111')}
@@ -1065,15 +1065,6 @@ const CreditNoteDetails = () => {
 
 export default CreditNoteDetails
 
-const HeaderLeft = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const Content = styled.div`
   padding: ${theme.spacing(8)} ${theme.spacing(12)} ${theme.spacing(20)};
 
diff --git a/src/pages/CustomerDetails.tsx b/src/pages/CustomerDetails.tsx
index a6d84c4e1..85cf8c304 100644
--- a/src/pages/CustomerDetails.tsx
+++ b/src/pages/CustomerDetails.tsx
@@ -138,8 +138,8 @@ const CustomerDetails = () => {
 
   return (
     <div>
-      <PageHeader withSide>
-        <HeaderInlineBreadcrumbBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group className="-m-1 overflow-hidden p-1">
           <Button
             icon="arrow-left"
             variant="quaternary"
@@ -157,8 +157,8 @@ const CustomerDetails = () => {
               {customerName}
             </Typography>
           )}
-        </HeaderInlineBreadcrumbBlock>
-        <HeaderInlineActionsBlock>
+        </PageHeader.Group>
+        <PageHeader.Group className="shrink-0">
           <Button
             className="shrink-0"
             startIcon="outside"
@@ -300,8 +300,8 @@ const CustomerDetails = () => {
               )}
             </Popper>
           )}
-        </HeaderInlineActionsBlock>
-      </PageHeader>
+        </PageHeader.Group>
+      </PageHeader.Wrapper>
       {(error || !data?.customer) && !loading ? (
         <GenericPlaceholder
           title={translate('text_6250304370f0f700a8fdc270')}
@@ -472,25 +472,6 @@ const CustomerDetails = () => {
   )
 }
 
-const HeaderInlineBreadcrumbBlock = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${theme.spacing(3)};
-
-  /* Prevent long name to not overflow in header */
-  overflow: hidden;
-  /* As overflow is hidden, prevent focus ring to be cropped */
-  padding: 4px;
-  margin: -4px;
-`
-
-const HeaderInlineActionsBlock = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${theme.spacing(3)};
-  flex-shrink: 0;
-`
-
 const Content = styled.div`
   display: grid;
   grid-template-areas:
diff --git a/src/pages/CustomerDraftInvoicesList.tsx b/src/pages/CustomerDraftInvoicesList.tsx
index 25ec0a76b..1736bb2d8 100644
--- a/src/pages/CustomerDraftInvoicesList.tsx
+++ b/src/pages/CustomerDraftInvoicesList.tsx
@@ -78,8 +78,8 @@ const CustomerDraftInvoicesList = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderLeft>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <Button
             icon="arrow-left"
             variant="quaternary"
@@ -95,8 +95,8 @@ const CustomerDraftInvoicesList = () => {
           <Typography variant="bodyHl" color="textSecondary">
             {translate('text_638f74bb4d41e3f1d0201647')}
           </Typography>
-        </HeaderLeft>
-      </PageHeader>
+        </PageHeader.Group>
+      </PageHeader.Wrapper>
       <Wrapper>
         {customerLoading ? (
           <MainInfos>
@@ -149,15 +149,6 @@ const CustomerDraftInvoicesList = () => {
   )
 }
 
-const HeaderLeft = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const ListHeader = styled.div`
   height: ${NAV_HEIGHT}px;
   display: flex;
diff --git a/src/pages/CustomerInvoiceDetails.tsx b/src/pages/CustomerInvoiceDetails.tsx
index 5dd7cabe9..8bcd5f379 100644
--- a/src/pages/CustomerInvoiceDetails.tsx
+++ b/src/pages/CustomerInvoiceDetails.tsx
@@ -573,8 +573,8 @@ const CustomerInvoiceDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderLeft>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <Button icon="arrow-left" variant="quaternary" onClick={() => goToPreviousRoute()} />
           {loading ? (
             <Skeleton variant="text" className="w-30" />
@@ -583,7 +583,7 @@ const CustomerInvoiceDetails = () => {
               {number}
             </Typography>
           )}
-        </HeaderLeft>
+        </PageHeader.Group>
         {!hasError && !loading && (
           <Popper
             PopperProps={{ placement: 'bottom-end' }}
@@ -846,7 +846,7 @@ const CustomerInvoiceDetails = () => {
             }}
           </Popper>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
       {!!errorMessage ? (
         <Alert fullWidth className="md:px-12" type="warning">
           <Stack>
@@ -953,15 +953,6 @@ const CustomerInvoiceDetails = () => {
   )
 }
 
-const HeaderLeft = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const Content = styled.div`
   padding: ${theme.spacing(8)} ${theme.spacing(12)} ${theme.spacing(20)};
 
diff --git a/src/pages/CustomerRequestOverduePayment/index.tsx b/src/pages/CustomerRequestOverduePayment/index.tsx
index 9f739e16d..b5277593d 100644
--- a/src/pages/CustomerRequestOverduePayment/index.tsx
+++ b/src/pages/CustomerRequestOverduePayment/index.tsx
@@ -183,7 +183,7 @@ const CustomerRequestOverduePayment: FC = () => {
 
   return (
     <>
-      <PageHeader>
+      <PageHeader.Wrapper>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate(
             'text_66b258f62100490d0eb5ca73',
@@ -205,7 +205,7 @@ const CustomerRequestOverduePayment: FC = () => {
             navigate(generatePath(CUSTOMER_DETAILS_ROUTE, { customerId: customerId ?? '' }))
           }
         />
-      </PageHeader>
+      </PageHeader.Wrapper>
 
       <main className="height-minus-nav-footer overflow-auto md:height-minus-nav md:flex md:overflow-auto">
         <section className="bg-white md:height-minus-nav-footer md:shrink md:grow md:basis-1/2 md:overflow-auto">
diff --git a/src/pages/CustomersList.tsx b/src/pages/CustomersList.tsx
index 7d63ed9db..7302bf19d 100644
--- a/src/pages/CustomersList.tsx
+++ b/src/pages/CustomersList.tsx
@@ -70,7 +70,7 @@ const CustomersList = () => {
 
   return (
     <div>
-      <PageHeader withSide className="gap-4 whitespace-pre">
+      <PageHeader.Wrapper withSide className="gap-4 whitespace-pre">
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate('text_624efab67eb2570101d117a5')}
         </Typography>
@@ -85,7 +85,7 @@ const CustomersList = () => {
             </Button>
           )}
         </div>
-      </PageHeader>
+      </PageHeader.Wrapper>
 
       <InfiniteScroll
         onBottom={() => {
diff --git a/src/pages/InvoicesPage.tsx b/src/pages/InvoicesPage.tsx
index bd32de1e2..34973e2bf 100644
--- a/src/pages/InvoicesPage.tsx
+++ b/src/pages/InvoicesPage.tsx
@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client'
 import { useMemo, useRef } from 'react'
 import { generatePath, useParams, useSearchParams } from 'react-router-dom'
-import styled from 'styled-components'
 
 import CreditNotesTable from '~/components/creditNote/CreditNotesTable'
 import { Button, NavigationTab, Typography } from '~/components/designSystem'
@@ -43,7 +42,7 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useDebouncedSearch } from '~/hooks/useDebouncedSearch'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
 import { usePermissions } from '~/hooks/usePermissions'
-import { PageHeader, theme } from '~/styles'
+import { PageHeader } from '~/styles'
 
 gql`
   query getInvoicesList(
@@ -319,12 +318,12 @@ const InvoicesPage = () => {
 
   return (
     <>
-      <PageHeader withSide>
+      <PageHeader.Wrapper withSide>
         <Typography variant="bodyHl" color="grey700">
           {translate('text_63ac86d797f728a87b2f9f85')}
         </Typography>
 
-        <HeaderRigthBlock>
+        <PageHeader.Group>
           {tab === InvoiceListTabEnum.invoices ? (
             <>
               <SearchInput
@@ -372,8 +371,8 @@ const InvoicesPage = () => {
               {translate('text_63ac86d797f728a87b2f9fc4')}
             </Button>
           )}
-        </HeaderRigthBlock>
-      </PageHeader>
+        </PageHeader.Group>
+      </PageHeader.Wrapper>
       <NavigationTab
         className="px-4 md:px-12"
         tabs={[
@@ -473,9 +472,3 @@ const InvoicesPage = () => {
 }
 
 export default InvoicesPage
-
-const HeaderRigthBlock = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${theme.spacing(3)};
-`
diff --git a/src/pages/PlanDetails.tsx b/src/pages/PlanDetails.tsx
index d0bd455f4..72537b10c 100644
--- a/src/pages/PlanDetails.tsx
+++ b/src/pages/PlanDetails.tsx
@@ -77,8 +77,8 @@ const PlanDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderInlineBreadcrumbBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group className="overflow-hidden">
           <Button
             icon="arrow-left"
             variant="quaternary"
@@ -106,7 +106,7 @@ const PlanDetails = () => {
             </Typography>
           )}
           <Typography variant="bodyHl" color="textSecondary" noWrap></Typography>
-        </HeaderInlineBreadcrumbBlock>
+        </PageHeader.Group>
         {shouldShowActions && (
           <Popper
             PopperProps={{ placement: 'bottom-end' }}
@@ -159,7 +159,7 @@ const PlanDetails = () => {
             )}
           </Popper>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
       <PlanBlockWrapper>
         <Avatar variant="connector" size="large">
           <Icon name="board" color="dark" size="large" />
@@ -248,15 +248,6 @@ const TabContentWrapper = styled.div`
   max-width: 672px;
 `
 
-const HeaderInlineBreadcrumbBlock = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${theme.spacing(3)};
-
-  /* Prevent long name to not overflow in header */
-  overflow: hidden;
-`
-
 const PlanBlockWrapper = styled.div`
   display: flex;
   gap: ${theme.spacing(4)};
diff --git a/src/pages/PlansList.tsx b/src/pages/PlansList.tsx
index 912abc54d..08041464d 100644
--- a/src/pages/PlansList.tsx
+++ b/src/pages/PlansList.tsx
@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client'
 import { useRef } from 'react'
 import { generatePath, useNavigate } from 'react-router-dom'
-import styled from 'styled-components'
 
 import {
   Avatar,
@@ -20,7 +19,7 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useDebouncedSearch } from '~/hooks/useDebouncedSearch'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
 import { usePermissions } from '~/hooks/usePermissions'
-import { PageHeader, theme } from '~/styles'
+import { PageHeader } from '~/styles'
 
 import { PlanDetailsTabsOptionsEnum } from './PlanDetails'
 
@@ -68,11 +67,11 @@ const PlansList = () => {
 
   return (
     <>
-      <Header withSide>
+      <PageHeader.Wrapper className="gap-4 *:whitespace-pre" withSide>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate('text_62442e40cea25600b0b6d84a')}
         </Typography>
-        <HeaderRigthBlock>
+        <PageHeader.Group>
           <SearchInput
             onChange={debouncedSearch}
             placeholder={translate('text_63bee1cc88d85f04deb0d63c')}
@@ -82,8 +81,8 @@ const PlansList = () => {
               {translate('text_62442e40cea25600b0b6d84c')}
             </ButtonLink>
           )}
-        </HeaderRigthBlock>
-      </Header>
+        </PageHeader.Group>
+      </PageHeader.Wrapper>
 
       <InfiniteScroll
         onBottom={() => {
@@ -239,23 +238,4 @@ const PlansList = () => {
   )
 }
 
-const Header = styled(PageHeader)`
-  > * {
-    white-space: pre;
-
-    &:first-child {
-      margin-right: ${theme.spacing(4)};
-    }
-  }
-`
-
-const HeaderRigthBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > :first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 export default PlansList
diff --git a/src/pages/SubscriptionDetails.tsx b/src/pages/SubscriptionDetails.tsx
index d2a37ccc2..c58ab3c0a 100644
--- a/src/pages/SubscriptionDetails.tsx
+++ b/src/pages/SubscriptionDetails.tsx
@@ -80,8 +80,8 @@ const SubscriptionDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderInlineBreadcrumbBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group className="overflow-hidden">
           <Button
             icon="arrow-left"
             variant="quaternary"
@@ -109,7 +109,7 @@ const SubscriptionDetails = () => {
               })}
             </Typography>
           )}
-        </HeaderInlineBreadcrumbBlock>
+        </PageHeader.Group>
         {!isSubscriptionLoading && (
           <Popper
             PopperProps={{ placement: 'bottom-end' }}
@@ -198,7 +198,7 @@ const SubscriptionDetails = () => {
             )}
           </Popper>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
       <PlanBlockWrapper>
         <Avatar variant="connector" size="large">
           <Icon name="clock" color="dark" size="large" />
@@ -319,15 +319,6 @@ const TabContentWrapper = styled.div`
   max-width: 672px;
 `
 
-const HeaderInlineBreadcrumbBlock = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${theme.spacing(3)};
-
-  /* Prevent long name to not overflow in header */
-  overflow: hidden;
-`
-
 const PlanBlockWrapper = styled.div`
   display: flex;
   gap: ${theme.spacing(4)};
diff --git a/src/pages/WalletForm/WalletForm.tsx b/src/pages/WalletForm/WalletForm.tsx
index ebb233252..3cda7cf4f 100644
--- a/src/pages/WalletForm/WalletForm.tsx
+++ b/src/pages/WalletForm/WalletForm.tsx
@@ -284,7 +284,7 @@ const WalletForm = () => {
 
   return (
     <>
-      <PageHeader>
+      <PageHeader.Wrapper>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate(
             formType === FORM_TYPE_ENUM.edition
@@ -302,7 +302,7 @@ const WalletForm = () => {
           }
           data-test="close-create-plan-button"
         />
-      </PageHeader>
+      </PageHeader.Wrapper>
 
       <Content>
         <Main>
diff --git a/src/pages/__devOnly/DesignSystem.tsx b/src/pages/__devOnly/DesignSystem.tsx
index b9d754ca9..2037c78a1 100644
--- a/src/pages/__devOnly/DesignSystem.tsx
+++ b/src/pages/__devOnly/DesignSystem.tsx
@@ -139,12 +139,12 @@ const DesignSystem = () => {
 
   return (
     <>
-      <PageHeader withSide>
+      <PageHeader.Wrapper withSide>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           Design System components
         </Typography>
         <Typography variant="caption">Only visible in dev mode</Typography>
-      </PageHeader>
+      </PageHeader.Wrapper>
       <NavigationTab
         className="px-12"
         name="Design system tab switcher"
diff --git a/src/pages/developers/WebhookLogs.tsx b/src/pages/developers/WebhookLogs.tsx
index c2002ae38..a84a00836 100644
--- a/src/pages/developers/WebhookLogs.tsx
+++ b/src/pages/developers/WebhookLogs.tsx
@@ -132,7 +132,7 @@ const WebhookLogs = () => {
 
   return (
     <div role="grid" tabIndex={-1} onKeyDown={onKeyDown}>
-      <PageHeader withSide>
+      <PageHeader.Wrapper withSide>
         <Header>
           <Button
             icon="arrow-left"
@@ -157,7 +157,7 @@ const WebhookLogs = () => {
           onChange={debouncedSearch}
           placeholder={translate('text_63e27c56dfe64b846474ef49')}
         />
-      </PageHeader>
+      </PageHeader.Wrapper>
       {!!error && !loading && !isLoading ? (
         <GenericPlaceholder
           title={translate('text_63e27c56dfe64b846474ef3a')}
diff --git a/src/pages/settings/AdyenIntegrationDetails.tsx b/src/pages/settings/AdyenIntegrationDetails.tsx
index 8fa32455f..4f1003822 100644
--- a/src/pages/settings/AdyenIntegrationDetails.tsx
+++ b/src/pages/settings/AdyenIntegrationDetails.tsx
@@ -108,8 +108,8 @@ const AdyenIntegrationDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={ADYEN_INTEGRATION_ROUTE}
             type="button"
@@ -122,7 +122,7 @@ const AdyenIntegrationDetails = () => {
               {adyenPaymentProvider?.name}
             </Typography>
           )}
-        </HeaderBlock>
+        </PageHeader.Group>
         {(canEditIntegration || canDeleteIntegration) && (
           <Popper
             PopperProps={{ placement: 'bottom-end' }}
@@ -169,7 +169,7 @@ const AdyenIntegrationDetails = () => {
             )}
           </Popper>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
       <MainInfos>
         {loading ? (
           <>
@@ -339,10 +339,10 @@ const AdyenIntegrationDetails = () => {
           </InlineTitle>
 
           {loading ? (
-            <HeaderBlock>
+            <div className="flex flex-col gap-3">
               <Skeleton variant="connectorAvatar" size="big" className="mr-4" />
               <Skeleton variant="text" className="w-60" />
-            </HeaderBlock>
+            </div>
           ) : (
             <>
               {!adyenPaymentProvider?.successRedirectUrl ? (
@@ -438,15 +438,6 @@ const AdyenIntegrationDetails = () => {
   )
 }
 
-const HeaderBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const MainInfos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/pages/settings/AdyenIntegrations.tsx b/src/pages/settings/AdyenIntegrations.tsx
index 3d442dcd3..90fe3afa8 100644
--- a/src/pages/settings/AdyenIntegrations.tsx
+++ b/src/pages/settings/AdyenIntegrations.tsx
@@ -94,8 +94,8 @@ const AdyenIntegrations = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={INTEGRATIONS_ROUTE}
             type="button"
@@ -108,7 +108,7 @@ const AdyenIntegrations = () => {
               {translate('text_645d071272418a14c1c76a6d')}
             </Typography>
           )}
-        </HeaderBlock>
+        </PageHeader.Group>
 
         {canCreateIntegration && (
           <Button
@@ -120,7 +120,8 @@ const AdyenIntegrations = () => {
             {translate('text_65846763e6140b469140e235')}
           </Button>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
+
       <MainInfos>
         {loading ? (
           <>
@@ -263,15 +264,6 @@ const AdyenIntegrations = () => {
   )
 }
 
-const HeaderBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const MainInfos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/pages/settings/AnrokIntegrationDetails.tsx b/src/pages/settings/AnrokIntegrationDetails.tsx
index 28d4aa533..07311a565 100644
--- a/src/pages/settings/AnrokIntegrationDetails.tsx
+++ b/src/pages/settings/AnrokIntegrationDetails.tsx
@@ -112,8 +112,8 @@ const AnrokIntegrationDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={ANROK_INTEGRATION_ROUTE}
             type="button"
@@ -126,7 +126,7 @@ const AnrokIntegrationDetails = () => {
               {anrokIntegration?.name}
             </Typography>
           )}
-        </HeaderBlock>
+        </PageHeader.Group>
         <Popper
           PopperProps={{ placement: 'bottom-end' }}
           opener={
@@ -167,7 +167,7 @@ const AnrokIntegrationDetails = () => {
             </MenuPopper>
           )}
         </Popper>
-      </PageHeader>
+      </PageHeader.Wrapper>
       <MainInfos>
         {loading ? (
           <>
@@ -224,15 +224,6 @@ const AnrokIntegrationDetails = () => {
   )
 }
 
-const HeaderBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const MainInfos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/pages/settings/AnrokIntegrations.tsx b/src/pages/settings/AnrokIntegrations.tsx
index 9df7e3eaa..7242bc56e 100644
--- a/src/pages/settings/AnrokIntegrations.tsx
+++ b/src/pages/settings/AnrokIntegrations.tsx
@@ -84,8 +84,8 @@ const AnrokIntegrations = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={INTEGRATIONS_ROUTE}
             type="button"
@@ -98,7 +98,7 @@ const AnrokIntegrations = () => {
               {translate('text_6668821d94e4da4dfd8b3834')}
             </Typography>
           )}
-        </HeaderBlock>
+        </PageHeader.Group>
         <Button
           variant="primary"
           onClick={() => {
@@ -107,7 +107,7 @@ const AnrokIntegrations = () => {
         >
           {translate('text_65846763e6140b469140e235')}
         </Button>
-      </PageHeader>
+      </PageHeader.Wrapper>
       <MainInfos>
         {loading ? (
           <>
@@ -243,15 +243,6 @@ const AnrokIntegrations = () => {
   )
 }
 
-const HeaderBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const MainInfos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/pages/settings/Authentication/OktaAuthenticationDetails.tsx b/src/pages/settings/Authentication/OktaAuthenticationDetails.tsx
index 04793f320..871f95549 100644
--- a/src/pages/settings/Authentication/OktaAuthenticationDetails.tsx
+++ b/src/pages/settings/Authentication/OktaAuthenticationDetails.tsx
@@ -86,8 +86,8 @@ const OktaAuthenticationDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={AUTHENTICATION_ROUTE}
             type="button"
@@ -100,7 +100,7 @@ const OktaAuthenticationDetails = () => {
               {translate('text_664c732c264d7eed1c74fda2')}
             </Typography>
           )}
-        </HeaderBlock>
+        </PageHeader.Group>
         <Popper
           PopperProps={{ placement: 'bottom-end' }}
           opener={
@@ -142,7 +142,7 @@ const OktaAuthenticationDetails = () => {
             </MenuPopper>
           )}
         </Popper>
-      </PageHeader>
+      </PageHeader.Wrapper>
       <MainInfos>
         {loading ? (
           <>
@@ -225,15 +225,6 @@ const OktaAuthenticationDetails = () => {
   )
 }
 
-const HeaderBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const MainInfos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/pages/settings/EmailScenarioConfig.tsx b/src/pages/settings/EmailScenarioConfig.tsx
index cbb4c8cfd..640253370 100644
--- a/src/pages/settings/EmailScenarioConfig.tsx
+++ b/src/pages/settings/EmailScenarioConfig.tsx
@@ -74,8 +74,8 @@ const EmailScenarioConfig = () => {
 
   return (
     <Container>
-      <PageHeader withSide>
-        <HeaderLeft>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <Button
             icon="arrow-left"
             variant="quaternary"
@@ -88,7 +88,7 @@ const EmailScenarioConfig = () => {
           <Typography color="grey700" noWrap>
             {translate(translationsKey.header)}
           </Typography>
-        </HeaderLeft>
+        </PageHeader.Group>
 
         {hasPermissions(['organizationEmailsUpdate']) && (
           <HeaderRight>
@@ -110,7 +110,7 @@ const EmailScenarioConfig = () => {
             {!isPremium && <Icon name="sparkles" />}
           </HeaderRight>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
       <Title>
         {loading ? (
           <>
@@ -269,16 +269,6 @@ const Container = styled.div`
   overflow: auto;
 `
 
-const HeaderLeft = styled.div`
-  display: flex;
-  align-items: center;
-  min-width: 0;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const Title = styled.div`
   display: flex;
   padding: ${theme.spacing(8)} ${theme.spacing(12)};
diff --git a/src/pages/settings/GocardlessIntegrationDetails.tsx b/src/pages/settings/GocardlessIntegrationDetails.tsx
index f0a3a0b54..9031be77a 100644
--- a/src/pages/settings/GocardlessIntegrationDetails.tsx
+++ b/src/pages/settings/GocardlessIntegrationDetails.tsx
@@ -109,8 +109,8 @@ const GocardlessIntegrationDetails = () => {
 
   return (
     <div>
-      <PageHeader withSide>
-        <HeaderBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={GOCARDLESS_INTEGRATION_ROUTE}
             type="button"
@@ -123,7 +123,7 @@ const GocardlessIntegrationDetails = () => {
               {gocardlessPaymentProvider?.name}
             </Typography>
           )}
-        </HeaderBlock>
+        </PageHeader.Group>
         {(canEditIntegration || canDeleteIntegration) && (
           <Popper
             PopperProps={{ placement: 'bottom-end' }}
@@ -201,7 +201,7 @@ const GocardlessIntegrationDetails = () => {
             )}
           </Popper>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
       <MainInfos>
         {loading ? (
           <>
@@ -359,10 +359,10 @@ const GocardlessIntegrationDetails = () => {
           </InlineTitle>
 
           {loading ? (
-            <HeaderBlock>
+            <div className="flex items-center gap-3">
               <Skeleton variant="connectorAvatar" size="big" className="mr-4" />
               <Skeleton variant="text" className="w-60" />
-            </HeaderBlock>
+            </div>
           ) : (
             <>
               {!gocardlessPaymentProvider?.successRedirectUrl ? (
@@ -458,15 +458,6 @@ const GocardlessIntegrationDetails = () => {
   )
 }
 
-const HeaderBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const MainInfos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/pages/settings/GocardlessIntegrationOauthCallback.tsx b/src/pages/settings/GocardlessIntegrationOauthCallback.tsx
index 9aa31b9e2..9ec90a483 100644
--- a/src/pages/settings/GocardlessIntegrationOauthCallback.tsx
+++ b/src/pages/settings/GocardlessIntegrationOauthCallback.tsx
@@ -79,8 +79,8 @@ const GocardlessIntegrationOauthCallback = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             disabled={loading}
             to={INTEGRATIONS_ROUTE}
@@ -94,8 +94,8 @@ const GocardlessIntegrationOauthCallback = () => {
               {translate('text_634ea0ecc6147de10ddb6625')}
             </Typography>
           )}
-        </HeaderBlock>
-      </PageHeader>
+        </PageHeader.Group>
+      </PageHeader.Wrapper>
       <MainInfos>
         {loading ? (
           <>
@@ -139,15 +139,6 @@ const GocardlessIntegrationOauthCallback = () => {
   )
 }
 
-const HeaderBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const MainInfos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/pages/settings/GocardlessIntegrations.tsx b/src/pages/settings/GocardlessIntegrations.tsx
index b6e93018d..27ff72afc 100644
--- a/src/pages/settings/GocardlessIntegrations.tsx
+++ b/src/pages/settings/GocardlessIntegrations.tsx
@@ -94,8 +94,8 @@ const GocardlessIntegrations = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={INTEGRATIONS_ROUTE}
             type="button"
@@ -108,7 +108,7 @@ const GocardlessIntegrations = () => {
               {translate('text_634ea0ecc6147de10ddb6625')}
             </Typography>
           )}
-        </HeaderBlock>
+        </PageHeader.Group>
 
         {canCreateIntegration && (
           <Button
@@ -120,7 +120,7 @@ const GocardlessIntegrations = () => {
             {translate('text_65846763e6140b469140e235')}
           </Button>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
       <MainInfos>
         {loading ? (
           <>
@@ -263,15 +263,6 @@ const GocardlessIntegrations = () => {
   )
 }
 
-const HeaderBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const MainInfos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/pages/settings/HubspotIntegrationDetails.tsx b/src/pages/settings/HubspotIntegrationDetails.tsx
index 4d0973cb3..859a9832d 100644
--- a/src/pages/settings/HubspotIntegrationDetails.tsx
+++ b/src/pages/settings/HubspotIntegrationDetails.tsx
@@ -103,8 +103,8 @@ const HubspotIntegrationDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <div className="flex items-center gap-3">
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={HUBSPOT_INTEGRATION_ROUTE}
             type="button"
@@ -117,7 +117,7 @@ const HubspotIntegrationDetails = () => {
               {hubspotIntegration?.name}
             </Typography>
           )}
-        </div>
+        </PageHeader.Group>
         <Popper
           PopperProps={{ placement: 'bottom-end' }}
           opener={
@@ -160,7 +160,7 @@ const HubspotIntegrationDetails = () => {
             </MenuPopper>
           )}
         </Popper>
-      </PageHeader>
+      </PageHeader.Wrapper>
       <div className="container">
         <section className="flex items-center py-8">
           {loading ? (
diff --git a/src/pages/settings/HubspotIntegrations.tsx b/src/pages/settings/HubspotIntegrations.tsx
index bd69f68ed..293de8641 100644
--- a/src/pages/settings/HubspotIntegrations.tsx
+++ b/src/pages/settings/HubspotIntegrations.tsx
@@ -72,8 +72,8 @@ const HubspotIntegrations = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <div className="flex items-center gap-3">
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={INTEGRATIONS_ROUTE}
             type="button"
@@ -86,11 +86,11 @@ const HubspotIntegrations = () => {
               {translate('text_1727189568053s79ks5q07tr')}
             </Typography>
           )}
-        </div>
+        </PageHeader.Group>
         <Button variant="primary" onClick={() => addHubspotDialogRef.current?.openDialog()}>
           {translate('text_65846763e6140b469140e235')}
         </Button>
-      </PageHeader>
+      </PageHeader.Wrapper>
       <div className="container">
         <section className="flex items-center py-8">
           {loading ? (
diff --git a/src/pages/settings/LagoTaxManagementIntegration.tsx b/src/pages/settings/LagoTaxManagementIntegration.tsx
index 5755afa49..4213e90d4 100644
--- a/src/pages/settings/LagoTaxManagementIntegration.tsx
+++ b/src/pages/settings/LagoTaxManagementIntegration.tsx
@@ -92,8 +92,8 @@ const LagoTaxManagementIntegration = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={INTEGRATIONS_ROUTE}
             type="button"
@@ -106,7 +106,7 @@ const LagoTaxManagementIntegration = () => {
               {translate('text_657078c28394d6b1ae1b9713')}
             </Typography>
           )}
-        </HeaderBlock>
+        </PageHeader.Group>
         {hasPermissions(['organizationIntegrationsDelete']) && (
           <Button
             variant="secondary"
@@ -116,7 +116,7 @@ const LagoTaxManagementIntegration = () => {
             {translate('text_657078c28394d6b1ae1b971b')}
           </Button>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
       <MainInfos>
         {loading ? (
           <>
@@ -201,10 +201,10 @@ const LagoTaxManagementIntegration = () => {
           </InlineTitle>
 
           {loading ? (
-            <HeaderBlock>
+            <div className="flex items-center gap-3">
               <Skeleton variant="connectorAvatar" size="big" className="mr-4" />
               <Skeleton variant="text" className="w-60" />
-            </HeaderBlock>
+            </div>
           ) : (
             <>
               {taxesData?.taxes?.collection.map((tax) => (
@@ -253,15 +253,6 @@ const LagoTaxManagementIntegration = () => {
   )
 }
 
-const HeaderBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const MainInfos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/pages/settings/NetsuiteIntegrationDetails.tsx b/src/pages/settings/NetsuiteIntegrationDetails.tsx
index 01ee89365..431dfd095 100644
--- a/src/pages/settings/NetsuiteIntegrationDetails.tsx
+++ b/src/pages/settings/NetsuiteIntegrationDetails.tsx
@@ -112,8 +112,8 @@ const NetsuiteIntegrationDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={NETSUITE_INTEGRATION_ROUTE}
             type="button"
@@ -126,7 +126,7 @@ const NetsuiteIntegrationDetails = () => {
               {netsuiteIntegration?.name}
             </Typography>
           )}
-        </HeaderBlock>
+        </PageHeader.Group>
         <Popper
           PopperProps={{ placement: 'bottom-end' }}
           opener={
@@ -167,7 +167,7 @@ const NetsuiteIntegrationDetails = () => {
             </MenuPopper>
           )}
         </Popper>
-      </PageHeader>
+      </PageHeader.Wrapper>
       <MainInfos>
         {loading ? (
           <>
@@ -224,15 +224,6 @@ const NetsuiteIntegrationDetails = () => {
   )
 }
 
-const HeaderBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const MainInfos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/pages/settings/NetsuiteIntegrations.tsx b/src/pages/settings/NetsuiteIntegrations.tsx
index 278209988..088a49e8a 100644
--- a/src/pages/settings/NetsuiteIntegrations.tsx
+++ b/src/pages/settings/NetsuiteIntegrations.tsx
@@ -84,8 +84,8 @@ const NetsuiteIntegrations = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={INTEGRATIONS_ROUTE}
             type="button"
@@ -98,7 +98,7 @@ const NetsuiteIntegrations = () => {
               {translate('text_661ff6e56ef7e1b7c542b239')}
             </Typography>
           )}
-        </HeaderBlock>
+        </PageHeader.Group>
         <Button
           variant="primary"
           onClick={() => {
@@ -107,7 +107,7 @@ const NetsuiteIntegrations = () => {
         >
           {translate('text_65846763e6140b469140e235')}
         </Button>
-      </PageHeader>
+      </PageHeader.Wrapper>
       <MainInfos>
         {loading ? (
           <>
@@ -243,15 +243,6 @@ const NetsuiteIntegrations = () => {
   )
 }
 
-const HeaderBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const MainInfos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/pages/settings/SalesforceIntegrationDetails.tsx b/src/pages/settings/SalesforceIntegrationDetails.tsx
index 87f033aaa..c78577612 100644
--- a/src/pages/settings/SalesforceIntegrationDetails.tsx
+++ b/src/pages/settings/SalesforceIntegrationDetails.tsx
@@ -103,8 +103,8 @@ const SalesforceIntegrationDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <div className="flex items-center gap-3">
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={SALESFORCE_INTEGRATION_ROUTE}
             type="button"
@@ -117,7 +117,7 @@ const SalesforceIntegrationDetails = () => {
               {salesforceIntegration?.name}
             </Typography>
           )}
-        </div>
+        </PageHeader.Group>
         <Popper
           PopperProps={{ placement: 'bottom-end' }}
           opener={
@@ -160,7 +160,7 @@ const SalesforceIntegrationDetails = () => {
             </MenuPopper>
           )}
         </Popper>
-      </PageHeader>
+      </PageHeader.Wrapper>
       <div className="container">
         <section className="flex items-center py-8">
           {loading ? (
diff --git a/src/pages/settings/SalesforceIntegrations.tsx b/src/pages/settings/SalesforceIntegrations.tsx
index 6bf6e444f..00d5895d3 100644
--- a/src/pages/settings/SalesforceIntegrations.tsx
+++ b/src/pages/settings/SalesforceIntegrations.tsx
@@ -75,8 +75,8 @@ const SalesforceIntegrations = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <div className="flex items-center gap-3">
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={INTEGRATIONS_ROUTE}
             type="button"
@@ -89,11 +89,11 @@ const SalesforceIntegrations = () => {
               {translate('text_1731507195246vu9kt6xnhv6')}
             </Typography>
           )}
-        </div>
+        </PageHeader.Group>
         <Button variant="primary" onClick={() => addSalesforceDialogRef.current?.openDialog()}>
           {translate('text_65846763e6140b469140e235')}
         </Button>
-      </PageHeader>
+      </PageHeader.Wrapper>
       <div className="container">
         <section className="flex items-center py-8">
           {loading ? (
diff --git a/src/pages/settings/StripeIntegrationDetails.tsx b/src/pages/settings/StripeIntegrationDetails.tsx
index 967f44a07..bb2ec8cd3 100644
--- a/src/pages/settings/StripeIntegrationDetails.tsx
+++ b/src/pages/settings/StripeIntegrationDetails.tsx
@@ -107,8 +107,8 @@ const StripeIntegrationDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={STRIPE_INTEGRATION_ROUTE}
             type="button"
@@ -121,7 +121,7 @@ const StripeIntegrationDetails = () => {
               {stripePaymentProvider?.name}
             </Typography>
           )}
-        </HeaderBlock>
+        </PageHeader.Group>
         {(canEditIntegration || canDeleteIntegration) && (
           <Popper
             PopperProps={{ placement: 'bottom-end' }}
@@ -169,7 +169,7 @@ const StripeIntegrationDetails = () => {
             )}
           </Popper>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
       <MainInfos>
         {loading ? (
           <>
@@ -408,15 +408,6 @@ const StripeIntegrationDetails = () => {
   )
 }
 
-const HeaderBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const MainInfos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/pages/settings/StripeIntegrations.tsx b/src/pages/settings/StripeIntegrations.tsx
index b875f288d..00635c1bd 100644
--- a/src/pages/settings/StripeIntegrations.tsx
+++ b/src/pages/settings/StripeIntegrations.tsx
@@ -94,8 +94,8 @@ const StripeIntegrations = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={INTEGRATIONS_ROUTE}
             type="button"
@@ -108,7 +108,7 @@ const StripeIntegrations = () => {
               {translate('text_62b1edddbf5f461ab971277d')}
             </Typography>
           )}
-        </HeaderBlock>
+        </PageHeader.Group>
 
         {canCreateIntegration && (
           <Button
@@ -120,7 +120,7 @@ const StripeIntegrations = () => {
             {translate('text_65846763e6140b469140e235')}
           </Button>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
       <MainInfos>
         {loading ? (
           <>
@@ -264,15 +264,6 @@ const StripeIntegrations = () => {
   )
 }
 
-const HeaderBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const MainInfos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/pages/settings/XeroIntegrationDetails.tsx b/src/pages/settings/XeroIntegrationDetails.tsx
index 34b31a3e4..39536c4c6 100644
--- a/src/pages/settings/XeroIntegrationDetails.tsx
+++ b/src/pages/settings/XeroIntegrationDetails.tsx
@@ -105,8 +105,8 @@ const XeroIntegrationDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={XERO_INTEGRATION_ROUTE}
             type="button"
@@ -119,7 +119,7 @@ const XeroIntegrationDetails = () => {
               {xeroIntegration?.name}
             </Typography>
           )}
-        </HeaderBlock>
+        </PageHeader.Group>
         <Popper
           PopperProps={{ placement: 'bottom-end' }}
           opener={
@@ -160,7 +160,7 @@ const XeroIntegrationDetails = () => {
             </MenuPopper>
           )}
         </Popper>
-      </PageHeader>
+      </PageHeader.Wrapper>
       <MainInfos>
         {loading ? (
           <>
@@ -217,15 +217,6 @@ const XeroIntegrationDetails = () => {
   )
 }
 
-const HeaderBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const MainInfos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/pages/settings/XeroIntegrations.tsx b/src/pages/settings/XeroIntegrations.tsx
index a23e65ee0..761b69942 100644
--- a/src/pages/settings/XeroIntegrations.tsx
+++ b/src/pages/settings/XeroIntegrations.tsx
@@ -81,8 +81,8 @@ const XeroIntegrations = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group>
           <ButtonLink
             to={INTEGRATIONS_ROUTE}
             type="button"
@@ -95,7 +95,7 @@ const XeroIntegrations = () => {
               {translate('text_6672ebb8b1b50be550eccaf8')}
             </Typography>
           )}
-        </HeaderBlock>
+        </PageHeader.Group>
         <Button
           variant="primary"
           onClick={() => {
@@ -104,7 +104,7 @@ const XeroIntegrations = () => {
         >
           {translate('text_65846763e6140b469140e235')}
         </Button>
-      </PageHeader>
+      </PageHeader.Wrapper>
       <MainInfos>
         {loading ? (
           <>
@@ -240,15 +240,6 @@ const XeroIntegrations = () => {
   )
 }
 
-const HeaderBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > *:first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 const MainInfos = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/styles/designSystem/PageHeader.tsx b/src/styles/designSystem/PageHeader.tsx
index 5cb49a185..7080ccd20 100644
--- a/src/styles/designSystem/PageHeader.tsx
+++ b/src/styles/designSystem/PageHeader.tsx
@@ -2,7 +2,11 @@ import { FC, PropsWithChildren } from 'react'
 
 import { tw } from '../utils'
 
-export const PageHeader: FC<PropsWithChildren<{ withSide?: boolean; className?: string }>> = ({
+/**
+ * Page Header - Main Wrapper
+ * @param withSide - If true, adds padding to the left and right for burger menu
+ */
+const PageHeaderWrapper: FC<PropsWithChildren<{ withSide?: boolean; className?: string }>> = ({
   children,
   className,
   withSide,
@@ -20,3 +24,16 @@ export const PageHeader: FC<PropsWithChildren<{ withSide?: boolean; className?:
     {children}
   </div>
 )
+
+/**
+ * Page Header - Section group inside main wrapper
+ */
+const PageHeaderGroup: FC<PropsWithChildren<{ className?: string }>> = ({
+  children,
+  className,
+}) => <div className={tw('flex items-center gap-3', className)}>{children}</div>
+
+export const PageHeader = {
+  Wrapper: PageHeaderWrapper,
+  Group: PageHeaderGroup,
+}