diff --git a/packages/server/resources/views/modules/credit-note-regular.pug b/packages/server/resources/views/modules/credit-note-regular.pug
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/server/resources/views/modules/credit-note-standard.pug b/packages/server/resources/views/modules/credit-note-standard.pug
index cc3d95b5a..263dcc625 100644
--- a/packages/server/resources/views/modules/credit-note-standard.pug
+++ b/packages/server/resources/views/modules/credit-note-standard.pug
@@ -10,21 +10,37 @@ block head
       position: relative;
       box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
     }
+    .#{prefix}-header{
+      box-sizing: border-box;
+      display: flex;
+      flex-flow: wrap;
+      flex: 0 0 auto;
+      -webkit-box-align: start;
+      align-items: start;
+      -webkit-box-pack: start;
+      justify-content: flex-start;
+      gap: 10px;
+    }
+    .#{prefix}-header-details{
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 20px;
+      flex: 1 1 0%;
+    }
     .#{prefix}-big-title {
       font-size: 60px;
       margin: 0;
       line-height: 1;
-      margin-bottom: 25px;
       font-weight: 500;
       color: #333;
     }
-    .#{prefix}-logo-wrap {
-      height: 120px;
-      width: 120px;
-      position: absolute;
-      right: 26px;
-      top: 26px;
-      overflow: hidden;
+    .#{prefix}-logo-wrap img {
+      height: auto;
+      width: auto;
+      max-width: 400px;
+      max-height: 160px;
     }
     .#{prefix}-terms-list {
       display: flex;
@@ -132,22 +148,27 @@ block head
 
 block content
  div(class=`${prefix}-root`)
-  div(class=`${prefix}-big-title`) Credit Note
-
-  if showCompanyLogo && companyLogoUri
-    div(class=`${prefix}-logo-wrap`)
-      img(src=companyLogoUri alt=`Company Logo`)
   
-  div(class=`${prefix}-terms-list`)
-    if showCreditNoteNumber
-      div(class=`${prefix}-terms-item`)
-        div(class=`${prefix}-terms-item__label`) #{creditNoteNumberLabel}:
-        div(class=`${prefix}-terms-item__value`) #{creditNoteNumebr}
+  //- Header (includes big title, details and logo)
+  div(class=`${prefix}-header`)
+    //- Header details (includes big title and details)
+    div(class=`${prefix}-header-details`)
+      div(class=`${prefix}-big-title`) Credit Note
 
-    if showCreditNoteDate
-      div(class=`${prefix}-terms-item`)
-        div(class=`${prefix}-terms-item__label`) #{creditNoteDateLabel}:
-        div(class=`${prefix}-terms-item__value`) #{creditNoteDate}
+      div(class=`${prefix}-terms-list`)
+        if showCreditNoteNumber
+          div(class=`${prefix}-terms-item`)
+            div(class=`${prefix}-terms-item__label`) #{creditNoteNumberLabel}:
+            div(class=`${prefix}-terms-item__value`) #{creditNoteNumebr}
+
+        if showCreditNoteDate
+          div(class=`${prefix}-terms-item`)
+            div(class=`${prefix}-terms-item__label`) #{creditNoteDateLabel}:
+            div(class=`${prefix}-terms-item__value`) #{creditNoteDate}
+
+    if showCompanyLogo && companyLogoUri
+      div(class=`${prefix}-logo-wrap`)
+        img(src=companyLogoUri alt=`Company Logo`)
 
   div(class=`${prefix}-address-section`)
     if showCompanyAddress
diff --git a/packages/server/resources/views/modules/estimate-regular.pug b/packages/server/resources/views/modules/estimate-regular.pug
index 455a0372c..b99377c9e 100644
--- a/packages/server/resources/views/modules/estimate-regular.pug
+++ b/packages/server/resources/views/modules/estimate-regular.pug
@@ -10,21 +10,37 @@ block head
       position: relative;
       box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
     }
+    .#{prefix}-header {
+      box-sizing: border-box;
+      display: flex;
+      flex-flow: wrap;
+      flex: 0 0 auto;
+      -webkit-box-align: start;
+      align-items: start;
+      -webkit-box-pack: start;
+      justify-content: flex-start;
+      gap: 10px;
+    }
+    .#{prefix}-header-details {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 20px;
+      flex: 1 1 0%;
+    }
     .#{prefix}-big-title {
       font-size: 60px;
       margin: 0;
       line-height: 1;
-      margin-bottom: 25px;
       font-weight: 500;
       color: #333;
     }
-    .#{prefix}-logo-wrap {
-      height: 120px;
-      width: 120px;
-      position: absolute;
-      right: 26px;
-      top: 26px;
-      overflow: hidden;
+    .#{prefix}-logo-wrap img {
+      height: auto;
+      width: auto;
+      max-width: 400px;
+      max-height: 160px;
     }
     .#{prefix}-terms {
       display: flex;
@@ -131,26 +147,35 @@ block head
 
 block content 
   div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`)
-    h1(class=`${prefix}-big-title`) Estimate
 
-    if showCompanyLogo && companyLogoUri
-      div(class=`${prefix}-logo-wrap`)
-        img(alt="Company logo", src=companyLogoUri)
+    //- Header (invluces big title, details and logo)
+    div(class=`${prefix}-header`)
 
-    //- Terms List
-    div(class=`${prefix}-terms`)
-      if showEstimateNumber
-        div(class=`${prefix}-terms-item`)
-          div(class=`${prefix}-terms-item__label`) #{estimateNumberLabel}
-          div(class=`${prefix}-terms-item__value`) #{estimateNumebr}
-      if showEstimateDate
-        div(class=`${prefix}-terms-item`)
-          div(class=`${prefix}-terms-item__label`) #{estimateDateLabel}
-          div(class=`${prefix}-terms-item__value`) #{estimateDate}
-      if showExpirationDate
-        div(class=`${prefix}-terms-item`)
-          div(class=`${prefix}-terms-item__label`) #{expirationDateLabel}
-          div(class=`${prefix}-terms-item__value`) #{expirationDate}
+      //- Header details (includes big title and details )
+      div(class=`${prefix}-header-details`)            
+        h1(class=`${prefix}-big-title`) Estimate
+
+        //- Terms List
+        div(class=`${prefix}-terms`)
+          if showEstimateNumber
+            div(class=`${prefix}-terms-item`)
+              div(class=`${prefix}-terms-item__label`) #{estimateNumberLabel}
+              div(class=`${prefix}-terms-item__value`) #{estimateNumebr}
+
+          if showEstimateDate
+            div(class=`${prefix}-terms-item`)
+              div(class=`${prefix}-terms-item__label`) #{estimateDateLabel}
+              div(class=`${prefix}-terms-item__value`) #{estimateDate}
+
+          if showExpirationDate
+            div(class=`${prefix}-terms-item`)
+              div(class=`${prefix}-terms-item__label`) #{expirationDateLabel}
+              div(class=`${prefix}-terms-item__value`) #{expirationDate}
+
+      //- Company logo
+      if showCompanyLogo && companyLogoUri
+        div(class=`${prefix}-logo-wrap`)
+          img(alt="Company logo", src=companyLogoUri)
 
     //- Addresses (Group section)
     div(class=`${prefix}-addresses`)
diff --git a/packages/server/resources/views/modules/invoice-standard.pug b/packages/server/resources/views/modules/invoice-standard.pug
index 121ae7492..72a9704a2 100644
--- a/packages/server/resources/views/modules/invoice-standard.pug
+++ b/packages/server/resources/views/modules/invoice-standard.pug
@@ -10,21 +10,37 @@ block head
       position: relative;
       box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
     }
+    .#{prefix}-header{
+      box-sizing: border-box;
+      display: flex;
+      flex-flow: wrap;
+      flex: 0 0 auto;
+      -webkit-box-align: start;
+      align-items: start;
+      -webkit-box-pack: start;
+      justify-content: flex-start;
+      gap: 10px;
+    }
+    .#{prefix}-header-details{
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 20px;
+      flex: 1 1 0%;
+    }
     .#{prefix}-big-title {
       font-size: 60px;
       margin: 0;
       line-height: 1;
-      margin-bottom: 25px;
       font-weight: 500;
       color: #333;
     }
-    .#{prefix}-logo-wrap {
-      height: 120px;
-      width: 120px;
-      position: absolute;
-      right: 26px;
-      top: 26px;
-      overflow: hidden;
+    .#{prefix}-logo-wrap img {
+      height: auto;
+      width: auto;
+      max-width: 400px;
+      max-height: 160px;
     }
     .#{prefix}-details {
       display: flex;
@@ -138,30 +154,35 @@ block head
 block content
   //- block head
   div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`)
-  
-    //- Title and company logo
-    h1(class=`${prefix}-big-title`) Invoice
 
-    if showCompanyLogo && companyLogoUri
-      div(class=`${prefix}-logo-wrap`)
-        img(alt="Company logo", src=companyLogoUri)
+    //- Header (includes big title, details and logo )
+    div(class=`${prefix}-header`)
+      //- Header details (includes big title and details )
+      div(class=`${prefix}-header-details`)
+        //- Title and company logo
+        h1(class=`${prefix}-big-title`) Invoice
 
-    //- Invoice details
-    div(class=`${prefix}-details`)
-      if showInvoiceNumber
-        div(class=`${prefix}-detail`)
-          div(class=`${prefix}-detail__label`) #{invoiceNumberLabel}
-          div(class=`${prefix}-detail__value`) #{invoiceNumber}
+        //- Invoice details
+        div(class=`${prefix}-details`)
+          if showInvoiceNumber
+            div(class=`${prefix}-detail`)
+              div(class=`${prefix}-detail__label`) #{invoiceNumberLabel}
+              div(class=`${prefix}-detail__value`) #{invoiceNumber}
 
-      if showDateIssue
-        div(class=`${prefix}-detail`)
-          div(class=`${prefix}-detail__label`) #{dateIssueLabel}
-          div(class=`${prefix}-detail__value`) #{dateIssue}
+          if showDateIssue
+            div(class=`${prefix}-detail`)
+              div(class=`${prefix}-detail__label`) #{dateIssueLabel}
+              div(class=`${prefix}-detail__value`) #{dateIssue}
 
-      if showDueDate
-        div(class=`${prefix}-detail`)
-          div(class=`${prefix}-detail__label`) #{dueDateLabel}
-          div(class=`${prefix}-detail__value`) #{dueDate}
+          if showDueDate
+            div(class=`${prefix}-detail`)
+              div(class=`${prefix}-detail__label`) #{dueDateLabel}
+              div(class=`${prefix}-detail__value`) #{dueDate}
+
+      //- Company logo
+      if showCompanyLogo && companyLogoUri
+        div(class=`${prefix}-logo-wrap`)
+          img(alt="Company logo", src=companyLogoUri)
 
     //- Address section
     div(class=`${prefix}-address-root`)
diff --git a/packages/server/resources/views/modules/payment-receipt-regular.pug b/packages/server/resources/views/modules/payment-receipt-regular.pug
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/server/resources/views/modules/payment-receive-standard.pug b/packages/server/resources/views/modules/payment-receive-standard.pug
index bfdf9cea0..cc893c868 100644
--- a/packages/server/resources/views/modules/payment-receive-standard.pug
+++ b/packages/server/resources/views/modules/payment-receive-standard.pug
@@ -10,22 +10,38 @@ block head
       font-size: 12px;
       position: relative;
       box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
+    }
+        .#{prefix}-header{
+      box-sizing: border-box;
+      display: flex;
+      flex-flow: wrap;
+      flex: 0 0 auto;
+      -webkit-box-align: start;
+      align-items: start;
+      -webkit-box-pack: start;
+      justify-content: flex-start;
+      gap: 10px;
+    }
+    .#{prefix}-header-details{
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 20px;
+      flex: 1 1 0%;
     }
     .#{prefix}-big-title{ 
       font-size: 60px;
       margin: 0;
       line-height: 1;
-      margin-bottom: 25px;
       font-weight: 500;
       color: #333;
     }
-    .#{prefix}-logo-wrap{ 
-      height: 120px;
-      width: 120px;
-      position: absolute;
-      right: 26px;
-      top: 26px;
-      overflow: hidden;
+    .#{prefix}-logo-wrap img {
+      height: auto;
+      width: auto;
+      max-width: 400px;
+      max-height: 160px;
     }
     .#{prefix}-terms-list{ 
       display: flex;
@@ -120,23 +136,26 @@ block head
     }
 block content
   div(class=`${prefix}-root`)
-    div(class=`${prefix}-big-title`) Payment
+    //- Header (includes big title, details and logo )
+    div(class=`${prefix}-header`)
+      //- Header details (includes big title and details )
+      div(class=`${prefix}-header-details`)
+        div(class=`${prefix}-big-title`) Payment
+        div(class=`${prefix}-terms-list`)
+          if showPaymentReceivedNumber
+            div(class=`${prefix}-terms-item`)
+              div(class=`${prefix}-terms-item__label`) #{paymentReceivedNumberLabel}
+              div(class=`${prefix}-terms-item__value`) #{paymentReceivedNumebr}
 
-    if showCompanyLogo && companyLogoUri
-      div(class=`${prefix}-logo-wrap`)
-        img(src=companyLogoUri alt="Company Logo")
-    
-    div(class=`${prefix}-terms-list`)
-      if showPaymentReceivedNumber
-        div(class=`${prefix}-terms-item`)
-          div(class=`${prefix}-terms-item__label`) #{paymentReceivedNumberLabel}
-          div(class=`${prefix}-terms-item__value`) #{paymentReceivedNumebr}
+          if showPaymentReceivedDate
+            div(class=`${prefix}-terms-item`)
+              div(class=`${prefix}-terms-item__label`) #{paymentReceivedDateLabel}
+              div(class=`${prefix}-terms-item__value`) #{paymentReceivedDate}
 
-      if showPaymentReceivedDate
-        div(class=`${prefix}-terms-item`)
-          div(class=`${prefix}-terms-item__label`) #{paymentReceivedDateLabel}
-          div(class=`${prefix}-terms-item__value`) #{paymentReceivedDate}
-    
+      if showCompanyLogo && companyLogoUri
+        div(class=`${prefix}-logo-wrap`)
+          img(src=companyLogoUri alt="Company Logo")
+        
     div(class=`${prefix}-addresses`)
       if showCompanyAddress
         div(class=`${prefix}-address-from`)
diff --git a/packages/server/resources/views/modules/purchase-invoice-regular.pug b/packages/server/resources/views/modules/purchase-invoice-regular.pug
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/server/resources/views/modules/receipt-regular.pug b/packages/server/resources/views/modules/receipt-regular.pug
index 1c986c805..7833ebaa0 100644
--- a/packages/server/resources/views/modules/receipt-regular.pug
+++ b/packages/server/resources/views/modules/receipt-regular.pug
@@ -10,19 +10,33 @@ block head
       position: relative;
       box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
     }
-    .#{prefix}-logo-wrap {
-      height: 120px;
-      width: 120px;
-      position: absolute;
-      right: 26px;
-      top: 26px;
-      overflow: hidden;
+    .#{prefix}-header{
+      box-sizing: border-box;
+      display: flex;
+      flex-flow: wrap;
+      flex: 0 0 auto;
+      align-items: start;
+      justify-content: flex-start;
+      gap: 10px;
+    }
+    .#{prefix}-header-details{
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 20px;
+      flex: 1 1 0%;
+    }
+    .#{prefix}-logo-wrap img {
+      height: auto;
+      width: auto;
+      max-width: 400px;
+      max-height: 160px;
     }
     .#{prefix}-big-title {
       font-size: 60px;
       margin: 0;
       line-height: 1;
-      margin-bottom: 25px;
       font-weight: 500;
       color: #333;      
     }
@@ -124,25 +138,30 @@ block head
 block content 
   //- block head
   div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`)
-  
-    //- Title and company logo
-    h1(class=`${prefix}-big-title`) Receipt
 
-    //- Company Logo
-    if showCompanyLogo && companyLogoUri
-      div(class=`${prefix}-logo-wrap`)
-        img(src=companyLogoUri alt=`Company Logo`)
+    //- Header (includes big title, details and logo )
+    div(class=`${prefix}-header`)
+      //- Header details (includes big title and details )
+      div(class=`${prefix}-header-details`)
+        //- Title and company logo
+        h1(class=`${prefix}-big-title`) Receipt
 
-    //- Terms List
-    div(class=`${prefix}-terms-list`)
-      if showReceiptNumber
-        div(class=`${prefix}-terms-item`)
-          span(class=`${prefix}-terms-item__label`)= receiptNumberLabel
-          span(class=`${prefix}-terms-item__value`)= receiptNumber
-      if showReceiptDate
-        div(class=`${prefix}-terms-item`)
-          span(class=`${prefix}-terms-item__label`)= receiptDateLabel
-          span(class=`${prefix}-terms-item__value`)= receiptDate
+        //- Terms List
+        div(class=`${prefix}-terms-list`)
+          if showReceiptNumber
+            div(class=`${prefix}-terms-item`)
+              span(class=`${prefix}-terms-item__label`)= receiptNumberLabel
+              span(class=`${prefix}-terms-item__value`)= receiptNumber
+
+          if showReceiptDate
+            div(class=`${prefix}-terms-item`)
+              span(class=`${prefix}-terms-item__label`)= receiptDateLabel
+              span(class=`${prefix}-terms-item__value`)= receiptDate
+
+      //- Company logo
+      if showCompanyLogo && companyLogoUri
+        div(class=`${prefix}-logo-wrap`)
+          img(src=companyLogoUri alt=`Company Logo`)
 
     //- Address Section
     div(class=`${prefix}-address-section`)