diff --git a/src/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.module.scss b/src/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.module.scss
index 6ca842c4b0..89c8a8f45d 100644
--- a/src/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.module.scss
+++ b/src/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.module.scss
@@ -1,5 +1,7 @@
 .container {
   width: 100%;
+  max-width: toRem(656);
+  margin: 0 auto;
   box-sizing: border-box;
 
   // Ensure all child elements take full width
@@ -15,8 +17,6 @@
   border-radius: var(--g-inputRadius);
   padding: toRem(24);
   width: 100%;
-  max-width: toRem(656);
-  margin: 0 auto;
   box-sizing: border-box;
 }
 
diff --git a/src/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.tsx b/src/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.tsx
index 761a3443c2..969252a28b 100644
--- a/src/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.tsx
+++ b/src/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.tsx
@@ -172,7 +172,7 @@ export const PayrollReceiptsPresentation = ({
   )
 
   const renderBreakdownSection = () => (
-    <Flex flexDirection="column" gap={16}>
+    <Flex flexDirection="column" gap={16} alignItems="stretch">
       <DataTable
         label={t('sections.debitedLabel')}
         columns={[
@@ -197,7 +197,7 @@ export const PayrollReceiptsPresentation = ({
   )
 
   const renderTaxBreakdown = () => (
-    <Flex flexDirection="column" gap={16}>
+    <Flex flexDirection="column" gap={16} alignItems="stretch">
       <DataTable
         label={t('sections.taxLabel')}
         columns={[
@@ -248,7 +248,7 @@ export const PayrollReceiptsPresentation = ({
     )
 
     return (
-      <Flex flexDirection="column" gap={16}>
+      <Flex flexDirection="column" gap={16} alignItems="stretch">
         {isMobile && <Heading as="h2">{t('sections.employeesLabel')}</Heading>}
         <DataView
           label={t('sections.employeesLabel')}