diff --git a/src/components/Drawer/DrawerHeaderContent.js b/src/components/Drawer/DrawerHeaderContent.js
index 634e8786b..15cba78c8 100644
--- a/src/components/Drawer/DrawerHeaderContent.js
+++ b/src/components/Drawer/DrawerHeaderContent.js
@@ -1,11 +1,10 @@
 import React from 'react';
-import { FeatureCan, FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from 'components';
 import { Classes, Icon, H4, Button } from '@blueprintjs/core';
 
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import styled from 'styled-components';
-import { Features } from 'common';
 import { compose } from 'utils';
 
 /**
@@ -35,9 +34,7 @@ function DrawerHeaderContent(props) {
       <Icon icon={icon} iconSize={Icon.SIZE_LARGE} />
       <H4>
         {title}
-        <FeatureCan feature={Features.Branches}>
-          <Subtitle>{subTitle}</Subtitle>
-        </FeatureCan>
+        <Subtitle>{subTitle}</Subtitle>
       </H4>
 
       <Button
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
index 9e6e7631d..de44e4f10 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
@@ -1,23 +1,31 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
+import { Features } from 'common';
 import { useInvoice } from 'hooks/query';
+import { useFeatureCan } from 'hooks/state';
 
 const InvoiceDetailDrawerContext = React.createContext();
 /**
  * Invoice detail provider.
  */
 function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
   // Fetch sale invoice details.
   const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
     enabled: !!invoiceId,
   });
 
+  // const isFeatureCan = featureCan(Features.Branches);
+
   // Provider.
   const provider = {
     invoiceId,
     invoice,
   };
+
   return (
     <DrawerLoading loading={isInvoiceLoading}>
       <DrawerHeaderContent
@@ -25,7 +33,13 @@ function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
         title={intl.get('invoice_details.drawer.title', {
           invoiceNumber: invoice.invoice_no,
         })}
-        subTitle={`Branch: ${invoice.branch?.name}`}
+        subTitle={
+          featureCan(Features.Branches)
+            ? intl.get('invoice_details.drawer.subtitle', {
+                value: invoice.branch?.name,
+              })
+            : null
+        }
       />
       <InvoiceDetailDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 73c9f75cc..413c073a9 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -914,6 +914,8 @@
   "enter_an_item": "Enter an item...",
   "due_amount": "Due Amount",
   "invoice_details.drawer.title": "Invoice details ({invoiceNumber})",
+  "invoice_details.drawer.subtitle": "Branch: {value}",
+
   "setting_your_auto_generated_estimate_number": "Setting your auto-generated estimate number",
   "setting_your_auto_generated_journal_number": "Setting your auto-generated journal number",
   "setting_your_auto_generated_invoice_number": "Setting your auto-generated invoice number",