diff --git a/packages/webapp/src/components/PageForm/PageForm.tsx b/packages/webapp/src/components/PageForm/PageForm.tsx
index 2a37e8376..7d173359d 100644
--- a/packages/webapp/src/components/PageForm/PageForm.tsx
+++ b/packages/webapp/src/components/PageForm/PageForm.tsx
@@ -9,7 +9,7 @@ interface PageFormProps extends SystemProps {
 }
 
 /**
- *
+ * Page form layout.
  * @returns {React.ReactNode}
  */
 export const PageForm = ({ children, ...props }: PageFormProps) => {
@@ -22,22 +22,23 @@ export const PageForm = ({ children, ...props }: PageFormProps) => {
 PageForm.displayName = 'PageFormBody';
 
 /**
- *
+ * Page form body layout, by default the content body is scrollable.
  * @returns {React.ReactNode}
  */
 const PageFormBody: FC<{ children: React.ReactNode } & SystemProps> = ({
   children,
+  ...props
 }) => {
   return (
-    <x.div flex="1" overflow="auto">
-      {children}{' '}
+    <x.div flex="1" overflow="auto" {...props}>
+      {children}
     </x.div>
   );
 };
 PageFormBody.displayName = 'PageFormBody';
 
 /**
- *
+ * Page form footer.
  * @returns {React.ReactNode}
  */
 const PageFormFooter: FC<{ children: React.ReactNode } & SystemProps> = ({ children }) => {
diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.tsx
index 1266dee98..fafaad27f 100644
--- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.tsx
+++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.tsx
@@ -1,7 +1,6 @@
 // @ts-nocheck
 import React from 'react';
 import classNames from 'classnames';
-import styled from 'styled-components';
 
 import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
@@ -12,7 +11,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
 export default function MakeJournalFormFooter() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <MakeJournalFooterPaper>
+      <Paper p={'20px'}>
         <Row>
           <Col md={8}>
             <MakeJournalFormFooterLeft />
@@ -23,10 +22,7 @@ export default function MakeJournalFormFooter() {
             <MakeJournalFormFooterRight />
           </Col>
         </Row>
-      </MakeJournalFooterPaper>
+      </Paper>
     </div>
   );
 }
-const MakeJournalFooterPaper = styled(Paper)`
-  padding: 20px;
-`;
diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.tsx
index 4178c27ca..8c1c093ce 100644
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.tsx
@@ -1,7 +1,6 @@
 // @ts-nocheck
 import React from 'react';
 import classNames from 'classnames';
-import styled from 'styled-components';
 
 import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
@@ -12,7 +11,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
 export default function ExpenseFormFooter() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <ExpensesFooterPaper>
+      <Paper p={'20px'}>
         <Row>
           <Col md={8}>
             <ExpenseFormFooterLeft />
@@ -23,11 +22,7 @@ export default function ExpenseFormFooter() {
             <ExpenseFormFooterRight />
           </Col>
         </Row>
-      </ExpensesFooterPaper>
+      </Paper>
     </div>
   );
 }
-
-const ExpensesFooterPaper = styled(Paper)`
-  padding: 20px;
-`;
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx
index da530548b..b89c5b7d3 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx
@@ -13,7 +13,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
 export default function BillFormFooter() {
   return (
     <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <BillFooterPaper>
+      <Paper p={'20px'}>
         <Row>
           <Col md={8}>
             <BillFormFooterLeft />
@@ -24,11 +24,7 @@ export default function BillFormFooter() {
             <BillFormFooterRight />
           </Col>
         </Row>
-      </BillFooterPaper>
+      </Paper>
     </div>
   );
 }
-
-const BillFooterPaper = styled(Paper)`
-  padding: 20px;
-`;
diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx
index 7f91451f1..510d6f556 100644
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx
@@ -15,7 +15,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
 export default function VendorCreditNoteFormFooter() {
   return (
     <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <VendorCreditNoteFooterPaper>
+      <Paper p={'20px'}>
         <Row>
           <Col md={8}>
             <VendorCreditNoteFormFooterLeft />
@@ -26,11 +26,7 @@ export default function VendorCreditNoteFormFooter() {
             <VendorCreditNoteFormFooterRight />
           </Col>
         </Row>
-      </VendorCreditNoteFooterPaper>
+      </Paper>
     </div>
   );
 }
-
-const VendorCreditNoteFooterPaper = styled(Paper)`
-  padding: 20px;
-`;
diff --git a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFooter.tsx b/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFooter.tsx
index 8db56462e..9db847bf9 100644
--- a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFooter.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFooter.tsx
@@ -15,7 +15,7 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
 export default function PaymentMadeFooter() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <PaymentReceiveFooterPaper>
+      <Paper p={'20px'}>
         <Row>
           <Col md={8}>
             <PaymentMadeFormFooterLeft />
@@ -26,11 +26,7 @@ export default function PaymentMadeFooter() {
             <PaymentMadeFormFooterRight />
           </Col>
         </Row>
-      </PaymentReceiveFooterPaper>
+      </Paper>
     </div>
   );
 }
-
-const PaymentReceiveFooterPaper = styled(Paper)`
-  padding: 20px;
-`;
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/test.css b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/test.css
deleted file mode 100644
index e7a746fd1..000000000
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/test.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.dashboard__page{
-    overflow: hidden;
-    flex: 1;
-}
-
-dashboard__insider dashboard__insider--invoice-form{
-    overflow: hidden;
-    padding: 0;
-}
-
-page-form page-form--strip page-form--invoice{
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-}
-
-page-form form {
-    overflow: auto;
-    flex: 1;
-}
-
-page-form__footer {
-    padding-bottom: 20px;
-}
\ No newline at end of file
diff --git a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooter.tsx b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooter.tsx
index 8f67630f1..bc5847516 100644
--- a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooter.tsx
+++ b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooter.tsx
@@ -10,17 +10,13 @@ import { WarehouseTransferFormFooterLeft } from './WarehouseTransferFormFooterLe
 export default function WarehouseTransferFormFooter() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <WarehousesTransferFooterPaper>
+      <Paper p={'20px'}>
         <Row>
           <Col md={8}>
             <WarehouseTransferFormFooterLeft />
           </Col>
         </Row>
-      </WarehousesTransferFooterPaper>
+      </Paper>
     </div>
   );
 }
-
-const WarehousesTransferFooterPaper = styled(Paper)`
-  padding: 20px;
-`;
diff --git a/packages/webapp/src/style/components/PageForm.scss b/packages/webapp/src/style/components/PageForm.scss
index 3752cf041..f029f5654 100644
--- a/packages/webapp/src/style/components/PageForm.scss
+++ b/packages/webapp/src/style/components/PageForm.scss
@@ -4,11 +4,11 @@
 //   > .page-form__floating-actions
 .page-form {
   $self: '.page-form';
-  // padding-bottom: 20px;
+  padding-bottom: 20px;
 
   &__floating-actions {
-    // position: fixed;
-    // bottom: 0;
+    position: fixed;
+    bottom: 0;
     width: 100%;
     background: #fff;
     padding: 14px 18px;
diff --git a/packages/webapp/src/style/pages/CreditNote/PageForm.scss b/packages/webapp/src/style/pages/CreditNote/PageForm.scss
deleted file mode 100644
index dbc9ce728..000000000
--- a/packages/webapp/src/style/pages/CreditNote/PageForm.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-body.page-credit-note-new,
-body.page-credit-note-edit {
-  .dashboard__footer {
-    display: none;
-  }
-}
-
-.dashboard__insider--credit-note-form {
-  padding-bottom: 64px;
-}
-
-.page-form--credit-note {
-  $self: '.page-form';
-
-  #{$self}__header {
-    display: flex;
-
-    &-fields {
-      flex: 1 0 0;
-    }
-
-    .bp4-label {
-      min-width: 150px;
-    }
-    .bp4-form-content {
-      width: 100%;
-    }
-
-    .bp4-form-group {
-      &.bp4-inline {
-        max-width: 450px;
-      }
-    }
-    .col--credit-note-date {
-      max-width: 435px;
-    }
-  }
-  #{$self}__footer {
-    .form-group--note,
-    .form-group--terms_conditions {
-      max-width: 450px;
-      width: 100%;
-
-      textarea {
-        width: 100%;
-        min-height: 60px;
-      }
-    }
-  }
-}
diff --git a/packages/webapp/src/style/pages/SaleEstimate/PageForm.scss b/packages/webapp/src/style/pages/SaleEstimate/PageForm.scss
deleted file mode 100644
index f9d50a745..000000000
--- a/packages/webapp/src/style/pages/SaleEstimate/PageForm.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-
-body.page-estimate-new,
-body.page-estimate-edit{
-
-  .dashboard__footer{
-    display: none;
-  }
-}
-
-.dashboard__insider--estimate-form{
-  padding-bottom: 64px;
-}
-
-.page-form--estimate {
-  $self: '.page-form';
-
-  #{$self}__header {
-    display: flex;
-
-    &-fields {
-      flex: 1 0 0;
-    }
-
-    .bp4-label {
-      min-width: 140px;
-    }
-    .bp4-form-content {
-      width: 100%;
-    }
-
-    .bp4-form-group {
-      margin-bottom: 18px;
-
-      &.bp4-inline {
-        max-width: 440px;
-      }
-    }
-    .col--invoice-date {
-      max-width: 435px;
-    }
-  }
-
-  #{$self}__footer {
-    .form-group--customer_note,
-    .form-group--terms_conditions {
-      max-width: 450px;
-      width: 100%;
-
-      textarea {
-        width: 100%;
-        min-height: 60px;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/webapp/src/style/pages/SaleInvoice/PageForm.scss b/packages/webapp/src/style/pages/SaleInvoice/PageForm.scss
deleted file mode 100644
index aa1ed8bb3..000000000
--- a/packages/webapp/src/style/pages/SaleInvoice/PageForm.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-body.page-invoice-new,
-body.page-invoice-edit {
-  .dashboard__footer {
-    display: none;
-  }
-}
-
-.dashboard__insider--invoice-form {
-  // padding-bottom: 64px;
-}
-
-.page-form--invoice {
-  $self: '.page-form';
-
-  #{$self}__header {
-    display: flex;
-
-    &-fields {
-      flex: 1 0 0;
-    }
-
-    .bp4-label {
-      min-width: 150px;
-    }
-
-    .bp4-form-content {
-      width: 100%;
-    }
-
-    .bp4-form-group {
-      &.bp4-inline {
-        max-width: 450px;
-      }
-    }
-
-    .row {
-      display: flex;
-      flex-wrap: nowrap;
-
-      .col {
-        max-width: 470px;
-
-        &--due-date {
-          .bp4-form-group {
-            margin: 0px 15px 15px;
-
-            .bp4-label {
-              min-width: 100px;
-            }
-          }
-        }
-      }
-    }
-
-    .col--invoice-date {
-      max-width: 435px;
-    }
-  }
-
-  #{$self}__footer {
-
-    .form-group--invoice_message,
-    .form-group--terms_conditions {
-      max-width: 450px;
-      width: 100%;
-
-      textarea {
-        width: 100%;
-        min-height: 60px;
-      }
-    }
-  }
-}
-
-.status-accessor {
-  span {
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 1.5;
-  }
-
-  .fully-paid-status {
-    height: 19px;
-    width: 19px;
-    display: inline-block;
-    background: #2ba01d;
-    border-radius: 50%;
-    margin-right: 6px;
-    color: #ffffff;
-  }
-
-  .bp4-progress-bar {
-    background: rgba(92, 112, 128, 0.2);
-    border-radius: 40px;
-    display: block;
-    height: 5px;
-    overflow: hidden;
-    position: relative;
-    margin-top: 5px;
-    width: 80%;
-  }
-
-  &.overdue-status {}
-
-  &.remaining-status {}
-}
\ No newline at end of file
diff --git a/packages/webapp/src/style/pages/SaleReceipt/PageForm.scss b/packages/webapp/src/style/pages/SaleReceipt/PageForm.scss
deleted file mode 100644
index f5faebc5d..000000000
--- a/packages/webapp/src/style/pages/SaleReceipt/PageForm.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-
-
-body.page-receipt-new,
-body.page-receipt-edit{
-
-  .dashboard__footer{
-    display: none;
-  }
-}
-
-.dashboard__insider--receipt-form{
-  padding-bottom: 64px;
-}
-
-.page-form--receipt{
-  $self: '.page-form';
-
-  #{$self}__header{
-    display: flex;
-
-    &-fields{
-      flex: 1 0 0;
-    }
-    .bp4-label{
-      min-width: 150px;
-    }
-    .bp4-form-content{
-      width: 100%;
-    }
-    .bp4-form-group{
-      margin-bottom: 18px;
-
-      &.bp4-inline{
-        max-width: 450px; 
-      }
-    }
-  }
-
-  #{$self}__footer{
-    .form-group--receipt_message,
-    .form-group--statement{
-      max-width: 450px;
-      width: 100%;
-
-      textarea{
-        width: 100%;
-        min-height: 50px;
-      }
-    }
-  }
-}
\ No newline at end of file