diff --git a/client/src/containers/Sales/Estimate/EstimateFormHeader.js b/client/src/containers/Sales/Estimate/EstimateFormHeader.js
index eb5b6d40f..d20013e09 100644
--- a/client/src/containers/Sales/Estimate/EstimateFormHeader.js
+++ b/client/src/containers/Sales/Estimate/EstimateFormHeader.js
@@ -6,6 +6,7 @@ import {
   Position,
   MenuItem,
   Classes,
+  ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
@@ -168,27 +169,29 @@ function EstimateFormHeader({
             <ErrorMessage name="estimate_number" {...{ errors, touched }} />
           }
         >
-          <InputGroup
-            intent={
-              errors.estimate_number && touched.estimate_number && Intent.DANGER
-            }
-            minimal={true}
-            rightElement={
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handleEstimateNumberChange,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: 'Setting your auto-generated estimate number',
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />
-            }
-            {...getFieldProps('estimate_number')}
-            onBlur={handleEstimateNumberChanged}
-          />
+          <ControlGroup fill={true}>
+            <InputGroup
+              intent={
+                errors.estimate_number &&
+                touched.estimate_number &&
+                Intent.DANGER
+              }
+              minimal={true}
+              {...getFieldProps('estimate_number')}
+              onBlur={handleEstimateNumberChanged}
+            />
+            <InputPrependButton
+              buttonProps={{
+                onClick: handleEstimateNumberChange,
+                icon: <Icon icon={'settings-18'} />,
+              }}
+              tooltip={true}
+              tooltipProps={{
+                content: 'Setting your auto-generated estimate number',
+                position: Position.BOTTOM_LEFT,
+              }}
+            />
+          </ControlGroup>
         </FormGroup>
 
         {/* ----------- Reference ----------- */}
diff --git a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
index 6dd7305f7..a6295ac9d 100644
--- a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
+++ b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
@@ -4,7 +4,7 @@ import {
   InputGroup,
   Intent,
   Position,
-  MenuItem,
+  ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
@@ -140,7 +140,7 @@ function InvoiceFormHeader({
             </FormGroup>
           </Col>
         </Row>
-        
+
         {/* ----------- Invoice number ----------- */}
         <FormGroup
           label={<T id={'invoice_no'} />}
@@ -151,25 +151,25 @@ function InvoiceFormHeader({
             <ErrorMessage name="invoice_no" {...{ errors, touched }} />
           }
         >
-          <InputGroup
-            intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
-            minimal={true}
-            rightElement={
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handleInvoiceNumberChange,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: 'Setting your auto-generated invoice number',
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />
-            }
-            {...getFieldProps('invoice_no')}
-            onBlur={handleInvoiceNumberChanged}
-          />
+          <ControlGroup fill={true}>
+            <InputGroup
+              intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
+              minimal={true}
+              {...getFieldProps('invoice_no')}
+              onBlur={handleInvoiceNumberChanged}
+            />
+            <InputPrependButton
+              buttonProps={{
+                onClick: handleInvoiceNumberChange,
+                icon: <Icon icon={'settings-18'} />,
+              }}
+              tooltip={true}
+              tooltipProps={{
+                content: 'Setting your auto-generated invoice number',
+                position: Position.BOTTOM_LEFT,
+              }}
+            />
+          </ControlGroup>
         </FormGroup>
 
         {/* ----------- Reference ----------- */}
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
index 79766ff04..cd6d5ec7d 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
@@ -4,7 +4,7 @@ import {
   InputGroup,
   Intent,
   Position,
-  MenuItem,
+  ControlGroup,
 } from '@blueprintjs/core';
 
 import { DateInput } from '@blueprintjs/datetime';
@@ -186,30 +186,29 @@ function PaymentReceiveFormHeader({
               />
             }
           >
-            <InputGroup
-              intent={
-                errors.payment_receive_no &&
-                touched.payment_receive_no &&
-                Intent.DANGER
-              }
-              minimal={true}
-              rightElement={
-                <InputPrependButton
-                  buttonProps={{
-                    onClick: handlePaymentReceiveNumberChange,
-                    icon: <Icon icon={'settings-18'} />,
-                  }}
-                  tooltip={true}
-                  tooltipProps={{
-                    content:
-                      'Setting your auto-generated Payment Receive number',
-                    position: Position.BOTTOM_LEFT,
-                  }}
-                />
-              }
-              {...getFieldProps('payment_receive_no')}
-              onBlur={handlePaymentReceiveNumberChanged}
-            />
+            <ControlGroup fill={true}>
+              <InputGroup
+                intent={
+                  errors.payment_receive_no &&
+                  touched.payment_receive_no &&
+                  Intent.DANGER
+                }
+                minimal={true}
+                {...getFieldProps('payment_receive_no')}
+                onBlur={handlePaymentReceiveNumberChanged}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handlePaymentReceiveNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: 'Setting your auto-generated Payment Receive number',
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
           </FormGroup>
 
           {/* ------------ Deposit account ------------ */}
diff --git a/client/src/containers/Sales/Receipt/ReceiptForm.js b/client/src/containers/Sales/Receipt/ReceiptForm.js
index e90bf2399..265792f70 100644
--- a/client/src/containers/Sales/Receipt/ReceiptForm.js
+++ b/client/src/containers/Sales/Receipt/ReceiptForm.js
@@ -9,7 +9,7 @@ import React, {
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import moment from 'moment';
-import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
+import { Intent, FormGroup, TextArea, ControlGroup } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick, sumBy } from 'lodash';
 import classNames from 'classnames';
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormHeader.js b/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
index d68dfc47f..dfcbde93c 100644
--- a/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
+++ b/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
@@ -1,5 +1,11 @@
 import React, { useMemo, useCallback, useState } from 'react';
-import { FormGroup, InputGroup, Intent, Position } from '@blueprintjs/core';
+import {
+  FormGroup,
+  InputGroup,
+  Intent,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
 
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
@@ -153,27 +159,27 @@ function ReceiptFormHeader({
             <ErrorMessage name="receipt_number" {...{ errors, touched }} />
           }
         >
-          <InputGroup
-            intent={
-              errors.receipt_number && touched.receipt_number && Intent.DANGER
-            }
-            minimal={true}
-            rightElement={
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handleReceiptNumberChange,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: 'Setting your auto-generated receipt number',
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />
-            }
-            {...getFieldProps('receipt_number')}
-            onBlur={handleReceiptNumberChanged}
-          />
+          <ControlGroup fill={true}>
+            <InputGroup
+              intent={
+                errors.receipt_number && touched.receipt_number && Intent.DANGER
+              }
+              minimal={true}
+              {...getFieldProps('receipt_number')}
+              onBlur={handleReceiptNumberChanged}
+            />
+            <InputPrependButton
+              buttonProps={{
+                onClick: handleReceiptNumberChange,
+                icon: <Icon icon={'settings-18'} />,
+              }}
+              tooltip={true}
+              tooltipProps={{
+                content: 'Setting your auto-generated receipt number',
+                position: Position.BOTTOM_LEFT,
+              }}
+            />
+          </ControlGroup>
         </FormGroup>
 
         {/* ----------- Reference ----------- */}
diff --git a/client/src/style/objects/form.scss b/client/src/style/objects/form.scss
index 0fb0ed6e8..ab4894926 100644
--- a/client/src/style/objects/form.scss
+++ b/client/src/style/objects/form.scss
@@ -344,20 +344,14 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
   color: #4b5d6b;
 }
 
-.bp3-input-group{
-  display: flex;
-
-  .bp3-input:not(:last-child) {
-    border-radius: 3px 0 0 3px;
-    border-right-width: 0;
-  }
-
-  .bp3-input-action{
-    position: relative;
-  }
+.bp3-control-group{
 
   .input-prepend{
 
+    &:not(.bp3-fixed){
+      flex: 0;
+    }
+
     &__text,
     &__button{
       display: flex;
diff --git a/client/src/style/pages/customer.scss b/client/src/style/pages/customer.scss
index 4adc67368..b2a935365 100644
--- a/client/src/style/pages/customer.scss
+++ b/client/src/style/pages/customer.scss
@@ -16,6 +16,11 @@
   .bp3-form-group{
     max-width: 500px;
 
+    .bp3-control{
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+
     &.bp3-inline{
 
       .bp3-label{