diff --git a/src/components/CommercialDoc/index.js b/src/components/CommercialDoc/index.js
index e065ffe97..fc2d191c4 100644
--- a/src/components/CommercialDoc/index.js
+++ b/src/components/CommercialDoc/index.js
@@ -19,3 +19,7 @@ export const CommercialDocEntriesTable = styled(DataTable)`
     border-bottom: 1px solid #d2dce2;
   }
 `;
+
+export const CommercialDocFooter = styled.div`
+  margin-top: 25px;
+`
\ No newline at end of file
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
index 2243d1b26..5dfac3407 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
@@ -1,52 +1,33 @@
 import React from 'react';
-import styled from 'styled-components';
 
-import {
-  T,
-  TotalLines,
-  FormatNumber,
-  TotalLine,
-  TotalLineBorderStyle,
-  TotalLineTextStyle,
-} from 'components';
+import { CommercialDocFooter, If, DetailsMenu, DetailItem } from 'components';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
 /**
  * Invoice details footer.
+ * @returns {React.JSX}
  */
 export function InvoiceDetailFooter() {
   const { invoice } = useInvoiceDetailDrawerContext();
 
+  if (!invoice.terms_conditions && !invoice.invoice_message) {
+    return null;
+  }
   return (
-    <InvoiceDetailsFooterRoot>
-      <InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
-        <TotalLine
-          title={<T id={'invoice.details.subtotal'} />}
-          value={<FormatNumber value={invoice.balance} />}
-          borderStyle={TotalLineBorderStyle.SingleDark}
-        />
-        <TotalLine
-          title={<T id={'invoice.details.total'} />}
-          value={invoice.formatted_amount}
-          borderStyle={TotalLineBorderStyle.DoubleDark}
-          textStyle={TotalLineTextStyle.Bold}
-        />
-        <TotalLine
-          title={<T id={'invoice.details.payment_amount'} />}
-          value={invoice.formatted_payment_amount}
-        />
-        <TotalLine
-          title={<T id={'invoice.details.due_amount'} />}
-          value={invoice.formatted_due_amount}
-          textStyle={TotalLineTextStyle.Bold}
-        />
-      </InvoiceTotalLines>
-    </InvoiceDetailsFooterRoot>
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <If condition={invoice.terms_conditions}>
+          <DetailItem label={'Terms & Conditions'}>
+            {invoice.terms_conditions}
+          </DetailItem>
+        </If>
+
+        <If condition={invoice.invoice_message}>
+          <DetailItem label={'Invoice Message'}>
+            {invoice.invoice_message}
+          </DetailItem>
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
   );
 }
-
-const InvoiceDetailsFooterRoot = styled.div``;
-
-const InvoiceTotalLines = styled(TotalLines)`
-  margin-left: auto;
-`;
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js
index 591327b7b..e9b0dd72d 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js
@@ -4,6 +4,7 @@ import { CommercialDocBox } from 'components';
 
 import InvoiceDetailHeader from './InvoiceDetailHeader';
 import InvoiceDetailTable from './InvoiceDetailTable';
+import { InvoiceDetailTableFooter } from './InvoiceDetailTableFooter';
 import { InvoiceDetailFooter } from './InvoiceDetailFooter';
 
 /**
@@ -14,6 +15,7 @@ export default function InvoiceDetailTab() {
     <CommercialDocBox>
       <InvoiceDetailHeader />
       <InvoiceDetailTable />
+      <InvoiceDetailTableFooter />
       <InvoiceDetailFooter />
     </CommercialDocBox>
   );
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.js
new file mode 100644
index 000000000..994c109ef
--- /dev/null
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  FormatNumber,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+/**
+ * Invoice details footer.
+ */
+export function InvoiceDetailTableFooter() {
+  const { invoice } = useInvoiceDetailDrawerContext();
+
+  return (
+    <InvoiceDetailsFooterRoot>
+      <InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'invoice.details.subtotal'} />}
+          value={<FormatNumber value={invoice.balance} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'invoice.details.total'} />}
+          value={invoice.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+        <TotalLine
+          title={<T id={'invoice.details.payment_amount'} />}
+          value={invoice.formatted_payment_amount}
+        />
+        <TotalLine
+          title={<T id={'invoice.details.due_amount'} />}
+          value={invoice.formatted_due_amount}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </InvoiceTotalLines>
+    </InvoiceDetailsFooterRoot>
+  );
+}
+
+const InvoiceDetailsFooterRoot = styled.div``;
+
+const InvoiceTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;