diff --git a/packages/webapp/src/components/Card/index.tsx b/packages/webapp/src/components/Card/index.tsx
index 3cda38d67..8bd314db6 100644
--- a/packages/webapp/src/components/Card/index.tsx
+++ b/packages/webapp/src/components/Card/index.tsx
@@ -18,10 +18,10 @@ export const CardFooterActions = styled.div`
   border-top: 1px solid #e0e7ea;
   margin-top: 30px;
 
-  .bp3-button {
+  .bp4-button {
     min-width: 70px;
 
-    + .bp3-button {
+    + .bp4-button {
       margin-left: 10px;
     }
   }
diff --git a/packages/webapp/src/components/Dashboard/DashboardRowsHeightButton/style.module.scss b/packages/webapp/src/components/Dashboard/DashboardRowsHeightButton/style.module.scss
index 15f602aab..28ddc83d0 100644
--- a/packages/webapp/src/components/Dashboard/DashboardRowsHeightButton/style.module.scss
+++ b/packages/webapp/src/components/Dashboard/DashboardRowsHeightButton/style.module.scss
@@ -1,6 +1,6 @@
 
 .menu{
-  :global .bp3-heading{
+  :global .bp4-heading{
     font-weight: 400;
     opacity: 0.5;
     font-size: 12px;
diff --git a/packages/webapp/src/components/Datatable/DatatableEditable.tsx b/packages/webapp/src/components/Datatable/DatatableEditable.tsx
index 300559b30..fc95110d4 100644
--- a/packages/webapp/src/components/Datatable/DatatableEditable.tsx
+++ b/packages/webapp/src/components/Datatable/DatatableEditable.tsx
@@ -21,7 +21,7 @@ export function DataTableEditable({
 }
 
 const DatatableEditableRoot = styled.div`
-  .bp3-form-group {
+  .bp4-form-group {
     margin-bottom: 0;
   }
   .table {
@@ -69,17 +69,17 @@ const DatatableEditableRoot = styled.div`
       }
       .tr {
         &:hover .td,
-        .bp3-input {
+        .bp4-input {
           background-color: transparent;
         }
-        .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
-        .form-group--select-list .bp3-button {
+        .bp4-form-group:not(.bp4-intent-danger) .bp4-input,
+        .form-group--select-list .bp4-button {
           border-color: #ffffff;
           color: #222;
           border-radius: 3px;
           text-align: inherit;
         }
-        .bp3-form-group:not(.bp3-intent-danger) .bp3-input {
+        .bp4-form-group:not(.bp4-intent-danger) .bp4-input {
           border-radius: 2px;
           padding-left: 14px;
           padding-right: 14px;
@@ -88,7 +88,7 @@ const DatatableEditableRoot = styled.div`
             box-shadow: 0 0 0 2px #116cd0;
           }
         }
-        .form-group--select-list .bp3-button {
+        .form-group--select-list .bp4-button {
           padding-left: 6px;
           padding-right: 6px;
 
@@ -97,16 +97,16 @@ const DatatableEditableRoot = styled.div`
           }
         }
         .form-group--select-list,
-        .bp3-form-group {
-          &.bp3-intent-danger {
-            .bp3-button:not(.bp3-minimal),
-            .bp3-input {
+        .bp4-form-group {
+          &.bp4-intent-danger {
+            .bp4-button:not(.bp4-minimal),
+            .bp4-input {
               border-color: #f7b6b6;
             }
           }
         }
         .td.actions {
-          .bp3-button {
+          .bp4-button {
             color: #80858f;
           }
         }
diff --git a/packages/webapp/src/components/Dialog/DialogFooterActions.tsx b/packages/webapp/src/components/Dialog/DialogFooterActions.tsx
index 8de8439f6..b6e64bb24 100644
--- a/packages/webapp/src/components/Dialog/DialogFooterActions.tsx
+++ b/packages/webapp/src/components/Dialog/DialogFooterActions.tsx
@@ -35,7 +35,7 @@ const DialogFooterActionsRoot = styled.div`
   ${(props) =>
     props.alignment === 'right' ? 'margin-left: auto;' : 'margin-right: auto;'};
 
-  .bp3-button {
+  .bp4-button {
     margin-left: 5px;
     margin-left: 5px;
   }
diff --git a/packages/webapp/src/components/Drawer/DrawerMainTabs.tsx b/packages/webapp/src/components/Drawer/DrawerMainTabs.tsx
index ff33a1d79..77ae36811 100644
--- a/packages/webapp/src/components/Drawer/DrawerMainTabs.tsx
+++ b/packages/webapp/src/components/Drawer/DrawerMainTabs.tsx
@@ -17,8 +17,8 @@ export function DrawerMainTabs({ children, ...restProps }) {
 }
 
 const DrawerMainTabsRoot = styled.div`
-  .bp3-tabs {
-    .bp3-tab-list {
+  .bp4-tabs {
+    .bp4-tab-list {
       position: relative;
       background-color: #fff;
       padding: 0 15px;
@@ -28,7 +28,7 @@ const DrawerMainTabsRoot = styled.div`
         margin-right: 25px;
       }
 
-      &.bp3-large > .bp3-tab {
+      &.bp4-large > .bp4-tab {
         font-size: 15px;
         color: #7f8596;
         margin: 0 1rem;
@@ -38,13 +38,13 @@ const DrawerMainTabsRoot = styled.div`
           color: #0052cc;
         }
       }
-      .bp3-tab-indicator-wrapper .bp3-tab-indicator {
+      .bp4-tab-indicator-wrapper .bp4-tab-indicator {
         height: 2px;
         bottom: -2px;
       }
     }
 
-    .bp3-tab-panel {
+    .bp4-tab-panel {
       margin-top: 0;
 
       .card {
diff --git a/packages/webapp/src/components/ExchangeRate/ExchangeRateMutedField.tsx b/packages/webapp/src/components/ExchangeRate/ExchangeRateMutedField.tsx
index 77c4489d8..9441f1c9a 100644
--- a/packages/webapp/src/components/ExchangeRate/ExchangeRateMutedField.tsx
+++ b/packages/webapp/src/components/ExchangeRate/ExchangeRateMutedField.tsx
@@ -60,8 +60,8 @@ export function ExchangeRateMutedField({
 }
 
 const ExchangeRateFormGroup = styled(FormGroup)`
-  &.bp3-form-group {
-    label.bp3-label {
+  &.bp4-form-group {
+    label.bp4-label {
       font-size: 12px;
       opacity: 0.7;
       line-height: 1;
@@ -79,7 +79,7 @@ const ExchangeRateButton = styled.div`
   position: relative;
   padding-right: 28px;
 
-  .bp3-button {
+  .bp4-button {
     position: absolute;
     right: 0;
   }
@@ -88,7 +88,7 @@ const ExchangeRateButton = styled.div`
 const ExchangeRateFormGroupContent = styled.div`
   padding: 5px 0;
 
-  .bp3-form-group {
+  .bp4-form-group {
     padding: 2px;
     margin: 2px 4px !important;
   }
diff --git a/packages/webapp/src/components/Forms/Select.tsx b/packages/webapp/src/components/Forms/Select.tsx
index 6916e115c..205f23f85 100644
--- a/packages/webapp/src/components/Forms/Select.tsx
+++ b/packages/webapp/src/components/Forms/Select.tsx
@@ -26,7 +26,7 @@ const SelectButton = styled(Button)`
   position: relative;
   padding-right: 30px;
 
-  &:not(.is-selected):not([class*='bp3-intent-']):not(.bp3-minimal) {
+  &:not(.is-selected):not([class*='bp4-intent-']):not(.bp4-minimal) {
     color: #5c7080;
   }
   &:after {
@@ -46,13 +46,13 @@ const SelectButton = styled(Button)`
     margin-right: 12px;
     border-radius: 1px;
   }
-  &:not([class*='bp3-intent-']):not(.bp3-disabled) {
+  &:not([class*='bp4-intent-']):not(.bp4-disabled) {
     &,
     &:hover {
       background: #fff;
     }
   }
-  .bp3-intent-danger & {
+  .bp4-intent-danger & {
     border-color: #db3737;
   }
 `;
diff --git a/packages/webapp/src/components/Menu/MenuItemLabel.tsx b/packages/webapp/src/components/Menu/MenuItemLabel.tsx
index 5cc880467..9b1fb2d2f 100644
--- a/packages/webapp/src/components/Menu/MenuItemLabel.tsx
+++ b/packages/webapp/src/components/Menu/MenuItemLabel.tsx
@@ -2,5 +2,5 @@
 import React from 'react';
 
 export function MenuItemLabel({ text }) {
-  return <span class="bp3-menu-item-labeler">{text}</span>;
+  return <span class="bp4-menu-item-labeler">{text}</span>;
 }
diff --git a/packages/webapp/src/components/PageForm/FormTopbar.tsx b/packages/webapp/src/components/PageForm/FormTopbar.tsx
index e4108069d..060ecbb55 100644
--- a/packages/webapp/src/components/PageForm/FormTopbar.tsx
+++ b/packages/webapp/src/components/PageForm/FormTopbar.tsx
@@ -18,16 +18,16 @@ const FormTopBarRoot = styled(Navbar)`
   height: 35px;
   padding: 0 20px;
 
-  .bp3-navbar-group {
+  .bp4-navbar-group {
     height: 35px;
   }
-  .bp3-navbar-divider {
+  .bp4-navbar-divider {
     border-left-color: #d2dce2;
   }
-  .bp3-skeleton {
+  .bp4-skeleton {
     max-height: 10px;
   }
-  .bp3-button {
+  .bp4-button {
     &:hover {
       background: rgba(167, 182, 194, 0.12);
       color: #32304a;
diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx
index 924f569d6..8912f1de8 100644
--- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx
@@ -22,12 +22,12 @@ export function MakeJournalFormFooterLeft() {
 }
 
 const DescriptionFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
-    .bp3-label {
+  &.bp4-form-group {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
diff --git a/packages/webapp/src/containers/Authentication/_components.tsx b/packages/webapp/src/containers/Authentication/_components.tsx
index 0199ad254..8e2da305c 100644
--- a/packages/webapp/src/containers/Authentication/_components.tsx
+++ b/packages/webapp/src/containers/Authentication/_components.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
 import { Spinner } from '@blueprintjs/core';
@@ -39,7 +40,7 @@ export const AuthInsiderCopyright = styled.div`
   color: #666;
   margin-top: 1.2rem;
 
-  .bp3-icon-bigcapital {
+  .bp4-icon-bigcapital {
     svg {
       path {
         fill: #a3a3a3;
@@ -65,11 +66,11 @@ export const AuthFooterLink = styled.p`
 export const AuthSubmitButton = styled(Button)`
   margin-top: 20px;
 
-  &.bp3-intent-primary {
+  &.bp4-intent-primary {
     background-color: #0052cc;
 
     &:disabled,
-    &.bp3-disabled {
+    &.bp4-disabled {
       background-color: rgba(0, 82, 204, 0.4);
     }
   }
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx
index 375dd3736..02a03c3a8 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx
@@ -178,7 +178,7 @@ const AccountSwitchItemUpdatedAt = styled.div`
 `;
 
 const AccountSwitchButtonBase = styled(Button)`
-  .bp3-button-text {
+  .bp4-button-text {
     margin-right: 5px;
   }
 `;
diff --git a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx
index 4613a5d26..a2b4f546a 100644
--- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx
@@ -53,7 +53,7 @@ export const ItemManuTransaction = ({ onChange }) => {
 };
 
 const ItemSwitchButton = styled(Button)`
-  .bp3-button-text {
+  .bp4-button-text {
     display: flex;
     color: #727983;
   }
diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx
index 4104fecb4..e6dc5443d 100644
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx
@@ -20,12 +20,12 @@ export function ExpenseFormFooterLeft() {
   );
 }
 const DescriptionFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
-    .bp3-label {
+  &.bp4-form-group {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx
index f935a39ee..a16565498 100644
--- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx
@@ -110,7 +110,7 @@ export default compose(
 )(APAgingSummaryHeader);
 
 const APAgingDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 520px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx
index 2dcb33c32..3865f9519 100644
--- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx
@@ -116,7 +116,7 @@ export default compose(
 )(ARAgingSummaryHeader);
 
 const ARAgingDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 520px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx
index 310a3c059..d44d24fc5 100644
--- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx
@@ -125,7 +125,7 @@ export default compose(
 )(BalanceSheetHeader);
 
 const BalanceSheetFinancialHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 520px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx
index dc1896510..3a65b88af 100644
--- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx
@@ -159,7 +159,7 @@ export default function BalanceSheetHeaderComparisonPanal() {
 }
 
 const BalanceSheetComparisonWrap = styled.div`
-  .bp3-form-group {
+  .bp4-form-group {
     margin-bottom: 3px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx
index 2ceaf1c1d..a2a32adad 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx
@@ -100,7 +100,7 @@ export default compose(
 )(CustomersBalanceSummaryHeader);
 
 const CustomerBalanceDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx
index 3f9104d73..3df138303 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx
@@ -101,7 +101,7 @@ export default compose(
 )(CustomersTransactionsHeader);
 
 const CustomerTransactionsDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx b/packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx
index 5f1847ce5..741b25f7f 100644
--- a/packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx
@@ -47,7 +47,7 @@ export default function FinancialStatementsFilter({
       {({ form: { setFieldValue }, field: { value } }) => (
         <FormGroup
           label={label}
-          className="form-group--select-list bp3-fill"
+          className="form-group--select-list bp4-fill"
           inline={false}
         >
           <ListSelect
diff --git a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx
index 831c24f5f..f34ad4e75 100644
--- a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx
@@ -120,7 +120,7 @@ export default compose(
 )(GeneralLedgerHeader);
 
 const GeneralLedgerDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 520px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx
index 31821760c..42dca6892 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx
@@ -119,7 +119,7 @@ export default compose(
 )(InventoryItemDetailsHeader);
 
 const InventoryItemDetailsDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 400px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx
index 1dd9d86c4..1d33315fc 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx
@@ -117,7 +117,7 @@ export default compose(
 )(InventoryValuationHeader);
 
 const InventoryValuationDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/Journal/JournalHeader.tsx b/packages/webapp/src/containers/FinancialStatements/Journal/JournalHeader.tsx
index 6ee58ed06..1274a7573 100644
--- a/packages/webapp/src/containers/FinancialStatements/Journal/JournalHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/Journal/JournalHeader.tsx
@@ -98,7 +98,7 @@ export default compose(
 )(JournalHeader);
 
 const JournalDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 350px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx
index a21dc523f..bfda8f7cc 100644
--- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx
@@ -114,7 +114,7 @@ export default R.compose(
 )(ProfitLossHeader);
 
 const ProfitLossSheetHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 520px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.tsx
index c637e6ebc..62b2c8059 100644
--- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.tsx
@@ -191,7 +191,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
 }
 
 const ProfitLossSheetComparisonWrap = styled.div`
-  .bp3-form-group {
+  .bp4-form-group {
     margin-bottom: 3px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/ProjectProfitabilitySummary/ProjectProfitabilitySummaryHeader.tsx b/packages/webapp/src/containers/FinancialStatements/ProjectProfitabilitySummary/ProjectProfitabilitySummaryHeader.tsx
index f834ad911..179b3d12d 100644
--- a/packages/webapp/src/containers/FinancialStatements/ProjectProfitabilitySummary/ProjectProfitabilitySummaryHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProjectProfitabilitySummary/ProjectProfitabilitySummaryHeader.tsx
@@ -109,7 +109,7 @@ export default compose(
 )(ProjectProfitabilitySummaryHeader);
 
 const ProjectProfitabilityDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 520px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.tsx b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.tsx
index 935a6eaa6..66f37717b 100644
--- a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.tsx
@@ -98,7 +98,7 @@ export default compose(
 )(PurchasesByItemsHeader);
 
 const PurchasesByItemsDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.tsx
index f0c024b04..acdb67ee6 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.tsx
@@ -105,7 +105,7 @@ export default compose(
 )(SalesByItemsHeader);
 
 const SalesByItemsDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryHeader.tsx b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryHeader.tsx
index 42213c2ee..8e13e5e5e 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryHeader.tsx
@@ -108,7 +108,7 @@ export default compose(
 )(SalesTaxLiabilitySummaryHeader);
 
 const SalesTaxSummaryFinancialHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 320px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx b/packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx
index 31026f17e..8abf29b35 100644
--- a/packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx
@@ -18,7 +18,7 @@ export default function SelectsListColumnsBy(props) {
           {({ form, field: { value }, meta: { error, touched } }) => (
             <FormGroup
               label={<T id={'display_report_columns'} />}
-              className="form-group-display-columns-by form-group--select-list bp3-fill"
+              className="form-group-display-columns-by form-group--select-list bp4-fill"
               inline={false}
               {...formGroupProps}
             >
diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx
index 092a5e640..7cb170509 100644
--- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx
@@ -127,7 +127,7 @@ export default compose(
 )(TrialBalanceSheetHeader);
 
 const TrialBalanceSheetDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.tsx
index c5aef9f42..038af2152 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.tsx
@@ -102,7 +102,7 @@ export default compose(
 )(VendorsBalanceSummaryHeader);
 
 const VendorBalanceDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;
diff --git a/packages/webapp/src/containers/Preferences/Branches/BranchesDataTable.tsx b/packages/webapp/src/containers/Preferences/Branches/BranchesDataTable.tsx
index 982109f20..efb077055 100644
--- a/packages/webapp/src/containers/Preferences/Branches/BranchesDataTable.tsx
+++ b/packages/webapp/src/containers/Preferences/Branches/BranchesDataTable.tsx
@@ -87,7 +87,7 @@ const BranchesTable = styled(DataTable)`
     min-height: 38px;
 
     .td.td-name {
-      .bp3-icon {
+      .bp4-icon {
         margin: 0;
         margin-left: 2px;
         vertical-align: top;
diff --git a/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx b/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
index 23860d3f4..a4eb2e106 100644
--- a/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
+++ b/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
@@ -221,10 +221,10 @@ const CardFooterActions = styled.div`
   border-top: 1px solid #e0e7ea;
   margin-top: 30px;
 
-  .bp3-button {
+  .bp4-button {
     min-width: 70px;
 
-    + .bp3-button {
+    + .bp4-button {
       margin-left: 10px;
     }
   }
diff --git a/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.tsx b/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.tsx
index 06e7214f9..3d8e117a6 100644
--- a/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.tsx
+++ b/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.tsx
@@ -49,7 +49,7 @@ const RoleFormFloatingActionsRoot = styled.div`
   border-top: 1px solid #d2dde2;
   box-shadow: 0px -1px 4px 0px rgb(0 0 0 / 5%);
 
-  .bp3-button {
+  .bp4-button {
     margin-right: 10px;
   }
 `;
diff --git a/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/components.tsx b/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/components.tsx
index ec00d0b5b..8a1f7325f 100644
--- a/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/components.tsx
+++ b/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/components.tsx
@@ -374,7 +374,7 @@ export const RolesPermissionList = () => {
 };
 
 const PermissionCheckbox = styled(Checkbox)`
-  &.bp3-control.bp3-checkbox .bp3-control-indicator {
+  &.bp4-control.bp4-checkbox .bp4-control-indicator {
     border-radius: 2px;
     border-color: #555;
 
@@ -454,7 +454,7 @@ const ModulePermissionsTableRoot = styled.table`
     }
 
     tr td {
-      .bp3-control.bp3-inline {
+      .bp4-control.bp4-inline {
         margin: 0;
       }
 
diff --git a/packages/webapp/src/containers/Preferences/Warehouses/components.tsx b/packages/webapp/src/containers/Preferences/Warehouses/components.tsx
index 54be5740c..7c46280bd 100644
--- a/packages/webapp/src/containers/Preferences/Warehouses/components.tsx
+++ b/packages/webapp/src/containers/Preferences/Warehouses/components.tsx
@@ -150,7 +150,7 @@ export const WarehouseTitle = styled.div`
   font-weight: 500;
   line-height: 1;
 
-  .bp3-icon {
+  .bp4-icon {
     margin: 0;
     margin-left: 2px;
     vertical-align: top;
diff --git a/packages/webapp/src/containers/Projects/containers/EstimatedExpenseFormDialog/index.tsx b/packages/webapp/src/containers/Projects/containers/EstimatedExpenseFormDialog/index.tsx
index 9734a8067..b144220a1 100644
--- a/packages/webapp/src/containers/Projects/containers/EstimatedExpenseFormDialog/index.tsx
+++ b/packages/webapp/src/containers/Projects/containers/EstimatedExpenseFormDialog/index.tsx
@@ -40,17 +40,17 @@ function EstimatedExpenseFormDialog({
 export default compose(withDialogRedux())(EstimatedExpenseFormDialog);
 
 const EstimateExpenseFormDialogRoot = styled(Dialog)`
-  .bp3-dialog-body {
-    .bp3-form-group {
+  .bp4-dialog-body {
+    .bp4-form-group {
       margin-bottom: 15px;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 `;
diff --git a/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFloatingActions.tsx b/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFloatingActions.tsx
index cb8142e39..93fa70837 100644
--- a/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFloatingActions.tsx
+++ b/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFloatingActions.tsx
@@ -48,7 +48,7 @@ function ProjectEntriesFormFloatingActions({
 export default compose(withDialogActions)(ProjectEntriesFormFloatingActions);
 
 const SaveButton = styled(Button)`
-  &.bp3-button {
+  &.bp4-button {
     margin-left: 0px;
   }
 `;
diff --git a/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/components.tsx b/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/components.tsx
index 21da1a3fd..0705960f0 100644
--- a/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/components.tsx
+++ b/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/components.tsx
@@ -102,8 +102,8 @@ const BillableEntryFooter = styled.div`
 `;
 
 const BillableEntryButton = styled(Button)`
-  &.bp3-button.bp3-small,
-  &.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal).bp3-small {
+  &.bp4-button.bp4-small,
+  &.bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal).bp4-small {
     font-size: 12px;
     color: #2172ed;
     background: transparent;
diff --git a/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/index.tsx b/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/index.tsx
index 25cf0d7e4..ae68c61e6 100644
--- a/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/index.tsx
+++ b/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/index.tsx
@@ -41,18 +41,18 @@ function ProjectBillableEntriesFormDialog({
 export default compose(withDialogRedux())(ProjectBillableEntriesFormDialog);
 
 const ProjectBillableEntriesFormDialogRoot = styled(Dialog)`
-  .bp3-dialog-body {
-    .bp3-form-group {
+  .bp4-dialog-body {
+    .bp4-form-group {
       margin-bottom: 15px;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
     }
   }
-  .bp3-dialog-footer {
-    .bp3-dialog-footer-actions {
+  .bp4-dialog-footer {
+    .bp4-dialog-footer-actions {
       display: flex;
       justify-content: flex-start;
     }
diff --git a/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx b/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx
index f0e07a7ce..3dd9f9431 100644
--- a/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx
+++ b/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx
@@ -48,8 +48,8 @@ export default function ProjectDetailTabs() {
 }
 
 const ProjectTabsContent = styled.div`
-  .bp3-tabs {
-    .bp3-tab-list {
+  .bp4-tabs {
+    .bp4-tab-list {
       padding: 0 20px;
       background-color: #fff;
       border-bottom: 1px solid #d2dce2;
@@ -58,7 +58,7 @@ const ProjectTabsContent = styled.div`
         margin-right: 0;
       }
 
-      &.bp3-large > .bp3-tab {
+      &.bp4-large > .bp4-tab {
         font-size: 15px;
         font-weight: 400;
         color: #7f8596;
@@ -69,12 +69,12 @@ const ProjectTabsContent = styled.div`
           color: #0052cc;
         }
       }
-      .bp3-tab-indicator-wrapper .bp3-tab-indicator {
+      .bp4-tab-indicator-wrapper .bp4-tab-indicator {
         height: 2px;
         bottom: -2px;
       }
     }
-    .bp3-tab-panel {
+    .bp4-tab-panel {
       /* margin: 20px 32px; */
       /* margin: 20px; */
       /* margin-top: 20px;
diff --git a/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectTasks/components.tsx b/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectTasks/components.tsx
index ee108a4ff..742ba5d0d 100644
--- a/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectTasks/components.tsx
+++ b/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectTasks/components.tsx
@@ -109,13 +109,13 @@ const TaskTimeFull = styled.div`
 `;
 
 const TaskProgressBar = styled(ProgressBar)`
-  &.bp3-progress-bar {
+  &.bp4-progress-bar {
     display: block;
     flex-shrink: 0;
     height: 4px;
     max-width: 150px;
     &,
-    .bp3-progress-meter {
+    .bp4-progress-meter {
       border-radius: 4px;
     }
   }
diff --git a/packages/webapp/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx b/packages/webapp/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx
index 7f733ac0d..321dc3292 100644
--- a/packages/webapp/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx
+++ b/packages/webapp/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx
@@ -76,10 +76,10 @@ export const FinancialCardText = styled.div`
   color: #7b8195;
 `;
 export const FinancialCardProgressBar = styled(ProgressBar)`
-  &.bp3-progress-bar {
+  &.bp4-progress-bar {
     height: 3px;
     &,
-    .bp3-progress-meter {
+    .bp4-progress-meter {
       border-radius: 0;
     }
   }
diff --git a/packages/webapp/src/containers/Projects/containers/ProjectExpenseForm/index.tsx b/packages/webapp/src/containers/Projects/containers/ProjectExpenseForm/index.tsx
index 79c72836d..86a7d6ee2 100644
--- a/packages/webapp/src/containers/Projects/containers/ProjectExpenseForm/index.tsx
+++ b/packages/webapp/src/containers/Projects/containers/ProjectExpenseForm/index.tsx
@@ -40,17 +40,17 @@ function ProjectExpenseFormDialog({
 export default compose(withDialogRedux())(ProjectExpenseFormDialog);
 
 const ProjectExpenseFormDialogRoot = styled(Dialog)`
-  .bp3-dialog-body {
-    .bp3-form-group {
+  .bp4-dialog-body {
+    .bp4-form-group {
       margin-bottom: 15px;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 `;
diff --git a/packages/webapp/src/containers/Projects/containers/ProjectFormDialog/index.tsx b/packages/webapp/src/containers/Projects/containers/ProjectFormDialog/index.tsx
index e21d1577a..fc06bd86a 100644
--- a/packages/webapp/src/containers/Projects/containers/ProjectFormDialog/index.tsx
+++ b/packages/webapp/src/containers/Projects/containers/ProjectFormDialog/index.tsx
@@ -43,17 +43,17 @@ function ProjectFormDialog({
 export default compose(withDialogRedux())(ProjectFormDialog);
 
 const ProjectFormDialogRoot = styled(Dialog)`
-  .bp3-dialog-body {
-    .bp3-form-group {
+  .bp4-dialog-body {
+    .bp4-form-group {
       margin-bottom: 0;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 `;
diff --git a/packages/webapp/src/containers/Projects/containers/ProjectInvoicingFormDialog/index.tsx b/packages/webapp/src/containers/Projects/containers/ProjectInvoicingFormDialog/index.tsx
index 281b46001..9ce252bb4 100644
--- a/packages/webapp/src/containers/Projects/containers/ProjectInvoicingFormDialog/index.tsx
+++ b/packages/webapp/src/containers/Projects/containers/ProjectInvoicingFormDialog/index.tsx
@@ -34,22 +34,22 @@ function ProjectInvoicingFormDialog({ dialogName, payload: {}, isOpen }) {
 export default compose(withDialogRedux())(ProjectInvoicingFormDialog);
 
 const ProjectInvoicingFormDialogRoot = styled(Dialog)`
-  .bp3-dialog-body {
-    .bp3-form-group {
+  .bp4-dialog-body {
+    .bp4-form-group {
       margin-bottom: 15px;
       margin-top: 15px;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
     }
 
-    label.bp3-control.bp3-checkbox {
+    label.bp4-control.bp4-checkbox {
       margin-top: 15px;
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 `;
diff --git a/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx b/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx
index f34ba14dc..437da4cda 100644
--- a/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx
+++ b/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx
@@ -113,7 +113,7 @@ function ProjectTimeEntryFormFields() {
 export default ProjectTimeEntryFormFields;
 
 const DurationInputGroup = styled(FInputGroup)`
-  .bp3-input {
+  .bp4-input {
     width: 150px;
   }
 `;
diff --git a/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx b/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx
index 994d0f561..d500954a2 100644
--- a/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx
+++ b/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx
@@ -47,18 +47,18 @@ function ProjectTimeEntryFormDialog({
 export default compose(withDialogRedux())(ProjectTimeEntryFormDialog);
 
 const ProjectTimeEntryFormDialogRoot = styled(Dialog)`
-  .bp3-dialog-body {
-    .bp3-form-group {
+  .bp4-dialog-body {
+    .bp4-form-group {
       margin-bottom: 0;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
     }
     .form-group {
       &--description {
-        .bp3-form-content {
+        .bp4-form-content {
           textarea {
             width: 100%;
             min-width: 100%;
@@ -68,7 +68,7 @@ const ProjectTimeEntryFormDialogRoot = styled(Dialog)`
       }
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 `;
diff --git a/packages/webapp/src/containers/Projects/containers/ProjectsLanding/components.tsx b/packages/webapp/src/containers/Projects/containers/ProjectsLanding/components.tsx
index 5facc30f9..4dcef8cbd 100644
--- a/packages/webapp/src/containers/Projects/containers/ProjectsLanding/components.tsx
+++ b/packages/webapp/src/containers/Projects/containers/ProjectsLanding/components.tsx
@@ -195,13 +195,13 @@ const ProjectStatusTaskAmount = styled.div`
 `;
 
 const ProjectProgressBar = styled(ProgressBar)`
-  &.bp3-progress-bar {
+  &.bp4-progress-bar {
     display: block;
     flex-shrink: 0;
     height: 3px;
     max-width: 110px;
     &,
-    .bp3-progress-meter {
+    .bp4-progress-meter {
       border-radius: 0;
     }
   }
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx
index 57b0ca946..77c529b87 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx
@@ -22,12 +22,12 @@ export function BillFormFooterLeft() {
 }
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
-    .bp3-label {
+  &.bp4-form-group {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx b/packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx
index 963216455..b76a7f688 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx
@@ -88,7 +88,7 @@ export function BillUniversalSearchItem(
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {item.reference.bill_number}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_bill_date}
diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx
index 6266d42dd..beb3f4966 100644
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx
@@ -22,12 +22,12 @@ export function VendorCreditNoteFormFooterLeft() {
 }
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
-    .bp3-label {
+  &.bp4-form-group {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx
index f87f4182b..fa82987e3 100644
--- a/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx
@@ -74,7 +74,7 @@ export function VendorCreditUniversalSearchItem(
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {item.reference.vendor_credit_number}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_vendor_credit_date}
diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx
index 8c119e60c..699859923 100644
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx
@@ -28,14 +28,14 @@ export function PaymentMadeFormFooterLeft() {
 }
 
 const InternalNoteFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
     margin-bottom: 40px;
 
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx
index baf3f56d2..f1cdc60ce 100644
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx
@@ -44,7 +44,7 @@ export function PaymentMadeUniversalSearchItem(
         <div>
           <div>{highlightText(text, query)}</div>
 
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {reference.payment_number && (
               <>
                 {highlightText(reference.payment_number, query)}
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.tsx
index 32735f836..2b86b1319 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.tsx
@@ -34,26 +34,26 @@ export function CreditNoteFormFooterLeft() {
 }
 
 const CreditNoteMsgFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
     margin-bottom: 40px;
 
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
 `;
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
-    .bp3-label {
+  &.bp4-form-group {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx
index f3b4abffb..2c495f802 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx
@@ -73,7 +73,7 @@ export function CreditNoteUniversalSearchItem(
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {item.reference.credit_note_number}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_credit_note_date}
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.tsx
index 0c6267117..20968e4b1 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.tsx
@@ -34,26 +34,26 @@ export function EstimateFormFooterLeft() {
 }
 
 const EstimateMsgFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
     margin-bottom: 40px;
 
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
 `;
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
-    .bp3-label {
+  &.bp4-form-group {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx
index fd69ce7ae..073f33631 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx
@@ -76,7 +76,7 @@ export function EstimateUniversalSearchItem(
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {item.reference.estimate_number}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_estimate_date}
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormActions.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormActions.tsx
index e185455f9..bf21e0fad 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormActions.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormActions.tsx
@@ -60,7 +60,7 @@ const InclusiveFormGroup = styled(FFormGroup)`
   margin-bottom: 0;
   margin-left: auto;
 
-  &.bp3-form-group.bp3-inline label.bp3-label {
+  &.bp4-form-group.bp4-inline label.bp4-label {
     line-height: 1.25;
     opacity: 0.6;
     margin-right: 8px;
@@ -68,7 +68,7 @@ const InclusiveFormGroup = styled(FFormGroup)`
 `;
 
 const InclusiveSelect = styled(FSelect)`
-  .bp3-button {
+  .bp4-button {
     padding-right: 24px;
   }
 `;
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx
index 982de7a7e..14ff7d721 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx
@@ -35,26 +35,26 @@ export function InvoiceFormFooterLeft() {
 }
 
 const InvoiceMsgFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
     margin-bottom: 40px;
 
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
 `;
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
-    .bp3-label {
+  &.bp4-form-group {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx
index d2b9124d4..84a8858e4 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx
@@ -80,7 +80,7 @@ export function InvoiceUniversalSearchItem(
       text={
         <div>
           <div>{highlightText(item.text, query)}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {highlightText(item.reference.invoice_no, query)}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_invoice_date}
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx
index 8c139e655..2010cdb96 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx
@@ -26,12 +26,12 @@ export function PaymentReceiveFormFootetLeft() {
 }
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
-    .bp3-label {
+  &.bp4-form-group {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.tsx
index 34d940e57..1a7eded91 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.tsx
@@ -50,7 +50,7 @@ export function PaymentReceiveUniversalSearchItem(
         <div>
           <div>{highlightText(item.text, query)}</div>
 
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {highlightText(item.reference.payment_receive_no, query)}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {highlightText(item.reference.formatted_payment_date, query)}
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.tsx
index 433217e40..04f797b52 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.tsx
@@ -36,26 +36,26 @@ export function ReceiptFormFooterLeft() {
 }
 
 const ReceiptMsgFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
     margin-bottom: 40px;
 
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
 `;
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
-    .bp3-label {
+  &.bp4-form-group {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx
index 698b4304d..ec050da8f 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx
@@ -66,7 +66,7 @@ export function ReceiptUniversalSearchItem(
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {item.reference.receipt_number}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_receipt_date}
diff --git a/packages/webapp/src/containers/TransactionsLocking/components.tsx b/packages/webapp/src/containers/TransactionsLocking/components.tsx
index 63ceeb26c..f7ae32a54 100644
--- a/packages/webapp/src/containers/TransactionsLocking/components.tsx
+++ b/packages/webapp/src/containers/TransactionsLocking/components.tsx
@@ -372,7 +372,7 @@ const TransLockingIcon = styled.div`
   border-radius: 8px;
   color: #93a1ba;
 
-  .bp3-icon {
+  .bp4-icon {
     position: relative;
     top: 1px;
   }
@@ -381,7 +381,7 @@ const TransLockingIcon = styled.div`
 export const TransLockingActions = styled.div`
   display: flex;
 
-  .bp3-divider {
+  .bp4-divider {
     margin: 2px;
   }
 `;
diff --git a/packages/webapp/src/containers/UniversalSearch/components.tsx b/packages/webapp/src/containers/UniversalSearch/components.tsx
index c080be0d3..66ac23631 100644
--- a/packages/webapp/src/containers/UniversalSearch/components.tsx
+++ b/packages/webapp/src/containers/UniversalSearch/components.tsx
@@ -18,7 +18,7 @@ function UniversalSearchItemDetail(item, { handleClick, modifiers, query }) {
           <div>{highlightText(item.text, query)}</div>
 
           {item.subText && (
-            <span class="bp3-text-muted">
+            <span class="bp4-text-muted">
               {highlightText(item.subText, query)}
             </span>
           )}
diff --git a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx
index 0ecb61a79..d42b1be93 100644
--- a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx
@@ -22,12 +22,12 @@ export function WarehouseTransferFormFooterLeft() {
 }
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
-    .bp3-label {
+  &.bp4-form-group {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
diff --git a/packages/webapp/src/style/App.scss b/packages/webapp/src/style/App.scss
index 039cc6080..a37a32c1a 100644
--- a/packages/webapp/src/style/App.scss
+++ b/packages/webapp/src/style/App.scss
@@ -1,7 +1,18 @@
 @import './normalize.scss';
-
 @import './Base.scss';
 
+$svg-icon-map: (
+  '16px/small-minus.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1z' fill='%23fff'/",
+  '16px/small-tick.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0 0 12 5z' fill='%23fff'/",
+  '16px/chevron-right.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M10.71 7.29l-4-4a1.003 1.003 0 0 0-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z' fill='%235C7080'/",
+  '16px/more.svg': "g fill='%235C7080'%3E%3Ccircle cx='2' cy='8.03' r='2'/%3E%3Ccircle cx='14' cy='8.03' r='2'/%3E%3Ccircle cx='8' cy='8.03' r='2'/%3E%3C/g",
+);
+
+@function svg-icon($inline-svg, $fill-color) {
+  @return url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3C"+ map-get($svg-icon-map, $inline-svg) + "%3E%3C/svg%3E")
+}
+
+
 // Blueprint framework.
 @import '@blueprintjs/core/src/blueprint.scss';
 @import '@blueprintjs/datetime/src/blueprint-datetime.scss';
@@ -51,56 +62,56 @@ body.hide-scrollbar .Pane2 {
   overflow: hidden;
 }
 
-.bp3-fill {
+.bp4-fill {
 
-  .bp3-popover-wrapper,
-  .bp3-popover-target {
+  .bp4-popover-wrapper,
+  .bp4-popover-target {
     display: block;
     width: 100%;
   }
 
-  .bp3-button {
+  .bp4-button {
     width: 100%;
     justify-content: start;
   }
 }
 
-.bp3-datepicker-caption .bp3-html-select::after {
+.bp4-datepicker-caption .bp4-html-select::after {
   margin-right: 6px;
 }
 
-.bp3-select-popover .bp3-menu,
-.bp3-multi-select-popover .bp3-menu {
+.bp4-select-popover .bp4-menu,
+.bp4-multi-select-popover .bp4-menu {
   max-height: 300px;
   overflow: auto;
 }
 
-.bp3-form-group .bp3-label {
+.bp4-form-group .bp4-label {
   .hint {
-    .bp3-popover-wrapper {
+    .bp4-popover-wrapper {
       display: inline;
     }
   }
 
-  &:not(.bp3-inline) .hint .bp3-popover-target {
+  &:not(.bp4-inline) .hint .bp4-popover-target {
     display: inline;
     margin-left: 0;
   }
 }
 
-.bp3-popover.bp3-tooltip {
+.bp4-popover.bp4-tooltip {
   max-width: 300px;
 }
 
-.bp3-timezone-picker {
-  .bp3-button {
+.bp4-timezone-picker {
+  .bp4-button {
     [icon='caret-down'] {
       display: none;
     }
   }
 }
 
-.bp3-progress-bar.bp3-intent-primary .bp3-progress-meter {
+.bp4-progress-bar.bp4-intent-primary .bp4-progress-meter {
   background-color: #0066ff;
 }
 
@@ -183,7 +194,7 @@ body.hide-scrollbar .Pane2 {
 
 .ReactVirtualized__List {}
 
-.bp3-drawer {
+.bp4-drawer {
   box-shadow: 0 0 0;
   background-color: #fbfbfb;
 
@@ -194,7 +205,7 @@ body.hide-scrollbar .Pane2 {
 
 // RTL Icons.
 html[dir='rtl'] {
-  .bp3-icon-caret-right {
+  .bp4-icon-caret-right {
     transform: scaleX(-1);
   }
 }
@@ -205,12 +216,12 @@ html[lang^='ar'] {
   }
 }
 
-.bp3-popover2 {
+.bp4-popover2 {
   box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02), 0 2px 4px rgba(16, 22, 26, 0.1),
     0 8px 24px rgba(16, 22, 26, 0.1);
 }
 
-.bp3-tooltip2 .bp3-popover2-arrow:before {
+.bp4-tooltip2 .bp4-popover2-arrow:before {
   box-shadow: 0 0 0;
 }
 
@@ -230,38 +241,38 @@ html[lang^='ar'] {
     z-index: 9999999;
     margin: 6px;
 
-    .bp3-button {
+    .bp4-button {
       border-color: rgba(0, 0, 0, 0.25);
       color: rgb(25, 32, 37);
       min-height: 30px;
       padding-left: 14px;
       padding-right: 14px;
 
-      &+.bp3-button {
+      &+.bp4-button {
         margin-left: 8px;
       }
     }
   }
 
-  .bp3-dialog {
+  .bp4-dialog {
     &-body {
       &:not(.loading) {
         margin: 0;
       }
 
-      >.bp3-spinner {
+      >.bp4-spinner {
         margin: 20px 0;
       }
     }
   }
 }
 
-.bp3-drawer {
+.bp4-drawer {
   border-left: 1px solid #00115e;
 }
 
 .drawer-portal {
-  .bp3-overlay-backdrop {
+  .bp4-overlay-backdrop {
     background: rgba(0, 10, 30, 0.05);
   }
 }
diff --git a/packages/webapp/src/style/components/Alert.scss b/packages/webapp/src/style/components/Alert.scss
index 502d5da40..149c7329a 100644
--- a/packages/webapp/src/style/components/Alert.scss
+++ b/packages/webapp/src/style/components/Alert.scss
@@ -1,6 +1,6 @@
-.bp3-alert{
-  .bp3-alert-footer{
-    .bp3-button{
+.bp4-alert{
+  .bp4-alert-footer{
+    .bp4-button{
       min-width: 70px;
     }
   }
diff --git a/packages/webapp/src/style/components/CloudSpinner.scss b/packages/webapp/src/style/components/CloudSpinner.scss
index d300db262..f4ab62a0c 100644
--- a/packages/webapp/src/style/components/CloudSpinner.scss
+++ b/packages/webapp/src/style/components/CloudSpinner.scss
@@ -14,7 +14,7 @@
     z-index: 999;
   }
 
-  .bp3-spinner{
+  .bp4-spinner{
     position: absolute;
     z-index: 999999;
     left: 50%;
@@ -22,7 +22,7 @@
     margin-top: -20px;
     margin-left: -20px;
   }
-  &:not(.is-loading) .bp3-spinner{
+  &:not(.is-loading) .bp4-spinner{
     display: none;
   }
 }
diff --git a/packages/webapp/src/style/components/DataTable/DataTable.scss b/packages/webapp/src/style/components/DataTable/DataTable.scss
index 2dbd1c1af..ba4defb1c 100644
--- a/packages/webapp/src/style/components/DataTable/DataTable.scss
+++ b/packages/webapp/src/style/components/DataTable/DataTable.scss
@@ -64,7 +64,7 @@
         }
       }
 
-      .bp3-context-menu-popover-target {
+      .bp4-context-menu-popover-target {
         z-index: 100;
       }
 
@@ -96,7 +96,7 @@
         border-right: 0;
       }
 
-      .bp3-control {
+      .bp4-control {
         margin-bottom: 0;
       }
 
@@ -124,7 +124,7 @@
         }
       }
 
-      .bp3-control.bp3-checkbox .bp3-control-indicator {
+      .bp4-control.bp4-checkbox .bp4-control-indicator {
         cursor: auto;
 
         &,
@@ -134,10 +134,10 @@
         }
       }
 
-      .bp3-control.bp3-checkbox {
+      .bp4-control.bp4-checkbox {
 
-        input:checked~.bp3-control-indicator,
-        input:indeterminate~.bp3-control-indicator {
+        input:checked~.bp4-control-indicator,
+        input:indeterminate~.bp4-control-indicator {
           border-color: #0052ff;
         }
       }
@@ -198,7 +198,7 @@
           text-overflow: ellipsis;
         }
 
-        .bp3-form-group {
+        .bp4-form-group {
           width: 100%;
         }
 
@@ -238,7 +238,7 @@
           color: #425361;
         }
 
-        .bp3-icon-more-h-16 {
+        .bp4-icon-more-h-16 {
           margin-top: 2px;
         }
       }
diff --git a/packages/webapp/src/style/components/DataTable/DataTableEditable.scss b/packages/webapp/src/style/components/DataTable/DataTableEditable.scss
index d5dc2c865..42b4be560 100644
--- a/packages/webapp/src/style/components/DataTable/DataTableEditable.scss
+++ b/packages/webapp/src/style/components/DataTable/DataTableEditable.scss
@@ -1,6 +1,6 @@
 .datatable-editor {
   
-  .bp3-form-group {
+  .bp4-form-group {
     margin-bottom: 0;
   }
   .table {
@@ -58,11 +58,11 @@
 
         &.landed-cost{
           
-          .bp3-control{
+          .bp4-control{
             margin-top: 0;
             margin-left: 34px;
           }
-          .bp3-control-indicator{
+          .bp4-control-indicator{
             height: 18px;
             width: 18px;
             border-color: #dbdbdb;
@@ -70,13 +70,13 @@
         }
       }
       .tr {
-        .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
-        .form-group--select-list .bp3-button {
+        .bp4-form-group:not(.bp4-intent-danger) .bp4-input,
+        .form-group--select-list .bp4-button {
           border-color: #ffffff;
           color: #222;
           border-radius: 3px;
         }
-        .bp3-form-group:not(.bp3-intent-danger) .bp3-input {
+        .bp4-form-group:not(.bp4-intent-danger) .bp4-input {
           border-radius: 2px;
           padding-left: 4px;
           padding-right: 4px;
@@ -85,7 +85,7 @@
             box-shadow: 0 0 0 2px #116cd0;
           }
         }
-        .form-group--select-list .bp3-button {
+        .form-group--select-list .bp4-button {
           padding-left: 6px;
           padding-right: 6px;
 
@@ -94,10 +94,10 @@
           }
         }
         .form-group--select-list,
-        .bp3-form-group {
-          &.bp3-intent-danger {
-            .bp3-button:not(.bp3-minimal),
-            .bp3-input {
+        .bp4-form-group {
+          &.bp4-intent-danger {
+            .bp4-button:not(.bp4-minimal),
+            .bp4-input {
               border-color: #f7b6b6;
             }
           }
@@ -110,7 +110,7 @@
         }
 
         .td.actions {
-          .bp3-button {
+          .bp4-button {
             background-color: transparent;
             color: #e66d6d;
 
@@ -135,7 +135,7 @@
         }
         .td {
           &.note {
-            .bp3-form-group {
+            .bp4-form-group {
               width: 100%;
             }
           }
@@ -159,7 +159,7 @@
     }
 
     .actions.td {
-      .bp3-button {
+      .bp4-button {
         background: transparent;
         margin: 0;
       }
@@ -186,7 +186,7 @@
 
   .table {
     .tbody {
-      .tr .td.actions .bp3-button {
+      .tr .td.actions .bp4-button {
         background-color: transparent;
         color: #e66d6d;
 
@@ -200,13 +200,13 @@
   &__actions {
     margin-top: 12px;
 
-    .bp3-button {
+    .bp4-button {
       padding-left: 10px;
       padding-right: 10px;
     }
 
     .button--clear-lines {
-      &.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+      &.bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) {
         background-color: #fcefef;
 
         &:hover{
diff --git a/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss b/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss
index d2dc44c16..928b44442 100644
--- a/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss
+++ b/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss
@@ -28,10 +28,10 @@
   &_actions {
     margin-top: 26px;
 
-    :global .bp3-button {
+    :global .bp4-button {
       min-height: 36px;
 
-      & + .bp3-button {
+      & + .bp4-button {
         margin-left: 10px;
       }
     }
diff --git a/packages/webapp/src/style/components/DataTable/Pagination.scss b/packages/webapp/src/style/components/DataTable/Pagination.scss
index e6719a729..d256a82f7 100644
--- a/packages/webapp/src/style/components/DataTable/Pagination.scss
+++ b/packages/webapp/src/style/components/DataTable/Pagination.scss
@@ -4,7 +4,7 @@
   padding: 20px 14px;
   font-size: 13px;
 
-  .bp3-button{
+  .bp4-button{
     background: transparent;
     padding: 5px;
   }
@@ -13,7 +13,7 @@
     min-width: 24px;
     min-height: 24px;
 
-    &:not([class*="bp3-intent-"]){
+    &:not([class*="bp4-intent-"]){
       color: #666666; 
       border-radius: 5px;
 
@@ -22,22 +22,22 @@
       }
     }
 
-    .bp3-icon{
+    .bp4-icon{
       margin-right: 4px;
       color: #666666;
     }
 
-    .pagination .pagination__buttons-group .bp3-button-group &{
+    .pagination .pagination__buttons-group .bp4-button-group &{
       border-radius: 5px;
     }
     &--next,
     &--previous{
 
-      &.bp3-button{
+      &.bp4-button{
         padding-left: 10px;
         padding-right: 10px;
 
-        .bp3-icon {
+        .bp4-icon {
 
           [dir="rtl"] & {
             transform: scale(-1);
@@ -48,21 +48,21 @@
     }
 
     &.is-active{
-      &.bp3-intent-primary:disabled,
-      &.bp3-intent-primary.bp3-disabled{
+      &.bp4-intent-primary:disabled,
+      &.bp4-intent-primary.bp4-disabled{
         background-color: #E6EFFB;
       }
 
-      &:not([class*="bp3-intent-"]) {
+      &:not([class*="bp4-intent-"]) {
       }
-      .bp3-button-text{        
+      .bp4-button-text{        
         color: #000;
       }
     }
 
     &--next{
 
-      .bp3-icon{
+      .bp4-icon{
         order: 1;
         margin-right: 0;
         margin-left: 4px;
@@ -82,7 +82,7 @@
     align-items: center;
     margin-left: auto;
 
-    .bp3-html-select{
+    .bp4-html-select{
       margin-left: 6px;
 
       select{
diff --git a/packages/webapp/src/style/components/Dialog/Dialog.scss b/packages/webapp/src/style/components/Dialog/Dialog.scss
index 0c0beb7c1..9098e7825 100644
--- a/packages/webapp/src/style/components/Dialog/Dialog.scss
+++ b/packages/webapp/src/style/components/Dialog/Dialog.scss
@@ -10,7 +10,7 @@
 
   &-body{
     &.is-loading{
-      .bp3-spinner{
+      .bp4-spinner{
         padding-top: 10px;
         margin-bottom: -10px;
       } 
diff --git a/packages/webapp/src/style/components/Drawer.scss b/packages/webapp/src/style/components/Drawer.scss
index b93794d18..b3ec3ecfc 100644
--- a/packages/webapp/src/style/components/Drawer.scss
+++ b/packages/webapp/src/style/components/Drawer.scss
@@ -1,16 +1,16 @@
 @import '../Base.scss';
 
-.bp3-drawer {
-  .bp3-drawer-header {
+.bp4-drawer {
+  .bp4-drawer-header {
     margin-bottom: 2px;
     background-color: #FFF;
 
-    .bp3-heading {
+    .bp4-heading {
       font-weight: 500;
     }
 
-    .bp3-heading,
-    .bp3-icon {
+    .bp4-heading,
+    .bp4-icon {
       color: #354152;
     }
   }
@@ -25,8 +25,8 @@
   }
 
   &__main-tabs{
-    .bp3-tabs {
-      .bp3-tab-list {
+    .bp4-tabs {
+      .bp4-tab-list {
         position: relative;
         background-color: #fff;
   
@@ -43,7 +43,7 @@
           margin-right: 25px;
         }
   
-        &.bp3-large > .bp3-tab {
+        &.bp4-large > .bp4-tab {
           font-size: 15px;
           color: #555;
           margin: 0 0.8rem;
@@ -55,7 +55,7 @@
         }
       }
   
-      .bp3-tab-panel {
+      .bp4-tab-panel {
         margin-top: 0;
   
         .card {
diff --git a/packages/webapp/src/style/components/Drawers/AccountDrawer.scss b/packages/webapp/src/style/components/Drawers/AccountDrawer.scss
index aaaff51ed..31897719b 100644
--- a/packages/webapp/src/style/components/Drawers/AccountDrawer.scss
+++ b/packages/webapp/src/style/components/Drawers/AccountDrawer.scss
@@ -22,7 +22,7 @@
 
       &--account-normal{
 
-        .bp3-icon{
+        .bp4-icon{
           position: relative;
           top: -2px;
           margin-left: 2px;
diff --git a/packages/webapp/src/style/components/Drawers/DrawerTemplate.scss b/packages/webapp/src/style/components/Drawers/DrawerTemplate.scss
index 60e63bc8c..4983223ef 100644
--- a/packages/webapp/src/style/components/Drawers/DrawerTemplate.scss
+++ b/packages/webapp/src/style/components/Drawers/DrawerTemplate.scss
@@ -116,14 +116,14 @@
   }
 }
 
-.bp3-drawer.bp3-position-right {
+.bp4-drawer.bp4-position-right {
   bottom: 0;
   right: 0;
   top: 0;
   overflow: auto;
   height: 100%;
 
-  .bp3-drawer-header .bp3-heading {
+  .bp4-drawer-header .bp4-heading {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/packages/webapp/src/style/components/Drawers/ViewDetail/ViewDetail.scss b/packages/webapp/src/style/components/Drawers/ViewDetail/ViewDetail.scss
index aa5acbfc7..36eaeef55 100644
--- a/packages/webapp/src/style/components/Drawers/ViewDetail/ViewDetail.scss
+++ b/packages/webapp/src/style/components/Drawers/ViewDetail/ViewDetail.scss
@@ -1,8 +1,8 @@
 @import '../../../Base.scss';
 
 .view-detail-drawer {
-  .bp3-tabs {
-    .bp3-tab-list {
+  .bp4-tabs {
+    .bp4-tab-list {
       position: relative;
       background-color: #fff;
 
@@ -19,7 +19,7 @@
         margin-right: 25px;
       }
 
-      &.bp3-large > .bp3-tab {
+      &.bp4-large > .bp4-tab {
         font-size: 15px;
         color: #555;
         margin: 0 0.8rem;
@@ -31,7 +31,7 @@
       }
     }
 
-    .bp3-tab-panel {
+    .bp4-tab-panel {
       margin-top: 0;
 
       .card {
diff --git a/packages/webapp/src/style/components/Hint.scss b/packages/webapp/src/style/components/Hint.scss
index 7e8de0e37..8654fe428 100644
--- a/packages/webapp/src/style/components/Hint.scss
+++ b/packages/webapp/src/style/components/Hint.scss
@@ -3,14 +3,14 @@
   position: relative;
   top: -1px;
 
-  .bp3-icon {
+  .bp4-icon {
     color: #a1b2c5;
   }
 
-  .bp3-popover-target:hover .bp3-icon {
+  .bp4-popover-target:hover .bp4-icon {
     color: #90a1b5;
   }
-  .bp3-icon {
+  .bp4-icon {
     vertical-align: middle;
   }
 }
diff --git a/packages/webapp/src/style/components/Menu.scss b/packages/webapp/src/style/components/Menu.scss
index f332e71d9..203d65737 100644
--- a/packages/webapp/src/style/components/Menu.scss
+++ b/packages/webapp/src/style/components/Menu.scss
@@ -1,4 +1,4 @@
-.bp3-menu-item {
+.bp4-menu-item {
 
     .menu-item-space {
         width: 6px;
diff --git a/packages/webapp/src/style/components/Overlay.scss b/packages/webapp/src/style/components/Overlay.scss
index c5cdc5f0b..be474f16e 100644
--- a/packages/webapp/src/style/components/Overlay.scss
+++ b/packages/webapp/src/style/components/Overlay.scss
@@ -1,6 +1,6 @@
 
 
 
-.bp3-overlay-backdrop {
+.bp4-overlay-backdrop {
     background-color: rgba(0, 10, 30, 0.7);
   }
\ No newline at end of file
diff --git a/packages/webapp/src/style/components/PageForm.scss b/packages/webapp/src/style/components/PageForm.scss
index 509c46b21..bbbc74548 100644
--- a/packages/webapp/src/style/components/PageForm.scss
+++ b/packages/webapp/src/style/components/PageForm.scss
@@ -15,15 +15,15 @@
     border-top: 1px solid rgb(210, 221, 226);
     box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
 
-    .bp3-button-group{
+    .bp4-button-group{
       
-      .bp3-button{
+      .bp4-button{
         &:not(:last-child),
-        &.bp3-popover-wrapper:not(:last-child) {
+        &.bp4-popover-wrapper:not(:last-child) {
           border-right: 1px solid rgba(92, 112, 127, 0.3);
           margin-right: 0;
 
-          &.bp3-intent-primary{
+          &.bp4-intent-primary{
             border-right: 1px solid rgba(255, 255, 255, 0.3);
           }
         }
@@ -34,11 +34,11 @@
     #{$self}__header-fields {
       width: 85%;
 
-      .bp3-form-group{
+      .bp4-form-group{
         margin-bottom: 16px;
       }
 
-      > .bp3-form-group:last-of-type{
+      > .bp4-form-group:last-of-type{
         margin-bottom: 0;
       }
     }
@@ -47,7 +47,7 @@
       padding: 25px 32px;
       border-bottom: 1px solid #d2dce2;
 
-      .bp3-form-group.bp3-inline label.bp3-label {
+      .bp4-form-group.bp4-inline label.bp4-label {
         font-weight: 500;
       }
     }
@@ -61,7 +61,7 @@
       padding-left: 32px;
       padding-right: 32px;
 
-      label.bp3-label{
+      label.bp4-label{
         font-weight: 500;
       }
     }
diff --git a/packages/webapp/src/style/components/SidebarOverlay.scss b/packages/webapp/src/style/components/SidebarOverlay.scss
index c6f83b92c..e0deb0bc8 100644
--- a/packages/webapp/src/style/components/SidebarOverlay.scss
+++ b/packages/webapp/src/style/components/SidebarOverlay.scss
@@ -93,7 +93,7 @@
 .sidebar-overlay-transition {
   transform: translateX(-100%);
 
-  &.bp3-overlay {
+  &.bp4-overlay {
 
     &-appear,
     &-enter {
diff --git a/packages/webapp/src/style/components/Toast.scss b/packages/webapp/src/style/components/Toast.scss
index ff6a35d43..5b1ac1d97 100644
--- a/packages/webapp/src/style/components/Toast.scss
+++ b/packages/webapp/src/style/components/Toast.scss
@@ -1,3 +1,3 @@
-.bp3-toast {
+.bp4-toast {
   box-shadow: none;
 }
\ No newline at end of file
diff --git a/packages/webapp/src/style/components/UniversalSearch.scss b/packages/webapp/src/style/components/UniversalSearch.scss
index 01aaa5fe5..e6c0b8689 100644
--- a/packages/webapp/src/style/components/UniversalSearch.scss
+++ b/packages/webapp/src/style/components/UniversalSearch.scss
@@ -11,14 +11,14 @@
   width: 500px;
   z-index: 20;
 
-  &.bp3-overlay-appear,
-  &.bp3-overlay-enter {
+  &.bp4-overlay-appear,
+  &.bp4-overlay-enter {
     filter: blur(20px);
     opacity: 0.2;
   }
 
-  &.bp3-overlay-appear-active,
-  &.bp3-overlay-enter-active {
+  &.bp4-overlay-appear-active,
+  &.bp4-overlay-enter-active {
     filter: blur(0);
     opacity: 1;
     transition-delay: 0;
@@ -27,12 +27,12 @@
     transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
   }
 
-  &.bp3-overlay-exit {
+  &.bp4-overlay-exit {
     filter: blur(0);
     opacity: 1;
   }
 
-  &.bp3-overlay-exit-active {
+  &.bp4-overlay-exit-active {
     filter: blur(20px);
     opacity: 0.2;
     transition-delay: 0;
@@ -42,8 +42,8 @@
   }
 
   &__omnibar {
-    .bp3-input-group {
-      .bp3-icon {
+    .bp4-input-group {
+      .bp4-icon {
         svg {
           stroke: currentColor;
           fill: none;
@@ -54,7 +54,7 @@
       }
     }
 
-    .bp3-input-group .bp3-input {
+    .bp4-input-group .bp4-input {
       border: 0;
       box-shadow: 0 0 0 0;
       height: 50px;
@@ -62,15 +62,15 @@
       font-size: 20px;
     }
 
-    .bp3-input-group.bp3-large .bp3-input:not(:first-child) {
+    .bp4-input-group.bp4-large .bp4-input:not(:first-child) {
       padding-left: 50px !important;
     }
-    .bp3-input-group.bp3-large .bp3-input:not(:last-child) {
+    .bp4-input-group.bp4-large .bp4-input:not(:last-child) {
       padding-right: 130px !important;
     }
 
-    .bp3-input-group {
-      .bp3-icon {
+    .bp4-input-group {
+      .bp4-icon {
         margin: 16px;
         color: #5c707f;
 
@@ -81,25 +81,25 @@
       }
     }
 
-    .bp3-menu {
+    .bp4-menu {
       border-top: 1px solid #d3dce2;
       max-height: calc(60vh - 20px);
       overflow: auto;
 
-      .bp3-menu-item {
-        .bp3-text-muted {
+      .bp4-menu-item {
+        .bp4-text-muted {
           font-size: 12px;
 
-          .bp3-icon {
+          .bp4-icon {
             color: #8499a7;
           }
         }
-        &.bp3-intent-primary {
-          &.bp3-active {
+        &.bp4-intent-primary {
+          &.bp4-active {
             background-color: rgb(235, 241, 246);
             color: #252b30;
 
-            .bp3-menu-item-label {
+            .bp4-menu-item-label {
               color: #5c7080;
             }
           }
@@ -112,7 +112,7 @@
       }
     }
 
-    .bp3-input-action {
+    .bp4-input-action {
       height: 100%;
       display: flex;
       flex-direction: row;
@@ -121,7 +121,7 @@
   }
 
   &__type-select-overlay {
-    .bp3-button {
+    .bp4-button {
       margin: 0 !important;
     }
   }
@@ -140,12 +140,12 @@
       margin-left: 14px;
     }
 
-    .bp3-tag {
+    .bp4-tag {
       background: #708392;
     }
 
     &--arrows {
-      .bp3-tag {
+      .bp4-tag {
         padding: 0;
         text-align: center;
         line-height: 16px;
@@ -173,7 +173,7 @@
     display: flex;
     margin: 10px;
 
-    .bp3-spinner {
+    .bp4-spinner {
       margin-right: 6px;
     }
   }
@@ -202,6 +202,6 @@
   }
 }
 
-.universal-search-overlay .bp3-overlay-backdrop {
+.universal-search-overlay .bp4-overlay-backdrop {
   background: rgba(0, 10, 30, 0.3);
 }
diff --git a/packages/webapp/src/style/components/dragzone.scss b/packages/webapp/src/style/components/dragzone.scss
index a1c7ff0a5..8a07ffb96 100644
--- a/packages/webapp/src/style/components/dragzone.scss
+++ b/packages/webapp/src/style/components/dragzone.scss
@@ -58,7 +58,7 @@
     left: -5px;
     visibility: hidden;
 
-    .bp3-icon {
+    .bp4-icon {
       position: relative;
       top: -3px;
       left: 0px;
diff --git a/packages/webapp/src/style/containers/Dashboard/Sidebar.scss b/packages/webapp/src/style/containers/Dashboard/Sidebar.scss
index 38e1be39e..c98031b94 100644
--- a/packages/webapp/src/style/containers/Dashboard/Sidebar.scss
+++ b/packages/webapp/src/style/containers/Dashboard/Sidebar.scss
@@ -66,18 +66,18 @@
         outline: 0;
         font-size: 15px;
 
-        &:not([class*="bp3-intent-"]):not(.bp3-minimal) {
+        &:not([class*="bp4-intent-"]):not(.bp4-minimal) {
           color: rgb(255, 255, 255);
         }
 
         &:hover,
         &:focus,
         &:active,
-        &.bp3-active {
+        &.bp4-active {
           background: transparent;
         }
 
-        .bp3-button-text {
+        .bp4-button-text {
           margin-right: 4px;
           text-overflow: ellipsis;
           overflow: hidden;
@@ -90,8 +90,8 @@
         }
       }
 
-      .bp3-popover-wrapper,
-      .bp3-popover-target {
+      .bp4-popover-wrapper,
+      .bp4-popover-target {
         max-width: 100%;
         display: inline-block;
       }
@@ -145,7 +145,7 @@
       font-weight: 400;
 
       &:hover,
-      &.bp3-active {
+      &.bp4-active {
         background: $sidebar-submenu-item-bg-color;
         color: $sidebar-menu-item-color-active;
       }
@@ -183,7 +183,7 @@
         }
       }
 
-      &:hover .bp3-button.menu-item__add-btn {
+      &:hover .bp4-button.menu-item__add-btn {
         display: inline-block;
       }
     }
@@ -202,12 +202,12 @@
           color: $sidebar-submenu-item-color;
 
           &:hover,
-          &.bp3-active {
+          &.bp4-active {
             background: transparent;
             color: $sidebar-submenu-item-hover-color;
           }
 
-          &.bp3-active {
+          &.bp4-active {
             font-weight: 500;
           }
         }
@@ -296,7 +296,7 @@
     }
   }
 
-  .bp3-button.menu-item__add-btn {
+  .bp4-button.menu-item__add-btn {
     width: auto;
     padding: 2px;
     margin-right: 0px;
@@ -306,8 +306,8 @@
     display: none;
     vertical-align: top;
 
-    &:not([class*='bp3-intent-']):not(.bp3-minimal):not(:disabled) {
-      .bp3-icon {
+    &:not([class*='bp4-intent-']):not(.bp4-minimal):not(:disabled) {
+      .bp4-icon {
         color: rgba(255, 255, 255, 0.4);
       }
 
@@ -322,13 +322,13 @@
       &:hover {
         background-color: rgba(255, 255, 255, 0.12);
 
-        .bp3-icon {
+        .bp4-icon {
           color: rgba(255, 255, 255, 0.6);
         }
       }
     }
 
-    .bp3-icon {
+    .bp4-icon {
       margin: 0;
       display: block;
     }
diff --git a/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss b/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss
index 57b718450..46814703b 100644
--- a/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss
+++ b/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss
@@ -13,7 +13,7 @@
   &.is-hidden {
     visibility: hidden;
   }
-  .bp3-drawer {
+  .bp4-drawer {
     box-shadow: 0 0 0 transparent;
     max-height: 550px;
     height: 100%;
@@ -26,26 +26,26 @@
       flex: 1 0 0;
       height: 100%;
     }
-    .bp3-drawer-backdrop {
+    .bp4-drawer-backdrop {
       background-color: rgba(2, 9, 19, 0.65);
     }
   }
 
-  .bp3-button.button--submit-filter {
+  .bp4-button.button--submit-filter {
     min-height: 34px;
     padding-left: 16px;
     padding-right: 16px;
   }
   .radio-group---accounting-basis {
-    .bp3-label {
+    .bp4-label {
       margin-bottom: 12px;
     }
   }
 
-  .bp3-tabs {
+  .bp4-tabs {
     height: 100%;
 
-    &.bp3-vertical > .bp3-tab-panel {
+    &.bp4-vertical > .bp4-tab-panel {
       flex: 1 0 0;
       border-top: 24px solid transparent;
       padding-left: 20px;
@@ -55,10 +55,10 @@
     }
   }
 
-  .bp3-tabs.bp3-vertical {
+  .bp4-tabs.bp4-vertical {
     flex: 1 0 0;
 
-    .bp3-tab-list {
+    .bp4-tab-list {
       width: 220px;
       border-right: 1px solid #c3cdd5;
       padding-top: 10px;
@@ -66,17 +66,17 @@
       > *:not(:last-child) {
         margin-right: 0;
       }
-      .bp3-tab-indicator-wrapper {
+      .bp4-tab-indicator-wrapper {
         width: 100%;
 
-        .bp3-tab-indicator {
+        .bp4-tab-indicator {
           border-left: 3px solid #0350f8;
           background-color: #edf5ff;
           border-radius: 0;
         }
       }
 
-      .bp3-tab {
+      .bp4-tab {
         color: #333;
         line-height: 45px;
         border-radius: 0;
@@ -105,8 +105,8 @@
       padding-right: 0.85rem;
     }
   }
-  .bp3-popover-target {
-    .bp3-tag-input {
+  .bp4-popover-target {
+    .bp4-tag-input {
       height: auto;
     }
   }
diff --git a/packages/webapp/src/style/objects/buttons.scss b/packages/webapp/src/style/objects/buttons.scss
index b8c0f2086..7dbffe7f8 100644
--- a/packages/webapp/src/style/objects/buttons.scss
+++ b/packages/webapp/src/style/objects/buttons.scss
@@ -1,35 +1,35 @@
 
 
-.bp3-button {
+.bp4-button {
   min-width: 32px;
   min-height: 32px;
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.bp3-button:not([class*='bp3-intent-']) {
+.bp4-button:not([class*='bp4-intent-']) {
   color: #33304a;
 }
 
-.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+.bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) {
   color: #555555;
   box-shadow: 0 0 0 transparent;
 
-  &.bp3-small {
+  &.bp4-small {
     font-size: 13px;
     min-height: 29px;
   }
 }
 
-.bp3-button-group.bp3-minimal .bp3-button {
+.bp4-button-group.bp4-minimal .bp4-button {
   background-color: transparent;
 }
 
-.bp3-button {
-  &.bp3-intent-primary,
-  &.bp3-intent-success,
-  &.bp3-intent-danger,
-  &.bp3-intent-warning {
+.bp4-button {
+  &.bp4-intent-primary,
+  &.bp4-intent-success,
+  &.bp4-intent-danger,
+  &.bp4-intent-warning {
     &,
     &:hover {
       box-shadow: 0 0 0 transparent;
diff --git a/packages/webapp/src/style/objects/form.scss b/packages/webapp/src/style/objects/form.scss
index 80ca55605..c56b838f9 100644
--- a/packages/webapp/src/style/objects/form.scss
+++ b/packages/webapp/src/style/objects/form.scss
@@ -14,7 +14,7 @@
 }
 
 // Form form.
-label.bp3-label {
+label.bp4-label {
   color: #353535;
   font-weight: 400;
 
@@ -22,7 +22,7 @@ label.bp3-label {
     color: red;
   }
 
-  .bp3-form-group.bp3-inline & {
+  .bp4-form-group.bp4-inline & {
     margin: 0 10px 0 0;
     line-height: 1.6;
     padding-top: calc(0.3rem + 1px);
@@ -40,38 +40,38 @@ label.bp3-label {
   color: #333;
 
   &:focus,
-  &.bp3-active {
+  &.bp4-active {
     box-shadow: 0 0 0 1px #116cd0;
     border-color: #116cd0;
   }
 
-  &.bp3-disabled,
+  &.bp4-disabled,
   &:disabled {
     background: #e9ecef;
   }
 
-  &.bp3-intent-danger {
+  &.bp4-intent-danger {
     box-shadow: 0 0 0 transparent;
     border-color: #db3737;
 
     &:focus,
-    &.bp3-active {
+    &.bp4-active {
       box-shadow: 0 0 0 1px #db3737;
       border-color: #db3737;
     }
   }
 }
 
-.bp3-input-group{
+.bp4-input-group{
 
-  &.bp3-intent-danger{
+  &.bp4-intent-danger{
     
-    .bp3-input{
+    .bp4-input{
       box-shadow: 0 0 0 transparent;
       border-color: #db3737;
 
       &:focus,
-      &.bp3-active {
+      &.bp4-active {
         box-shadow: 0 0 0 1px #db3737;
         border-color: #db3737;
       }
@@ -134,7 +134,7 @@ label.bp3-label {
     border-radius: 0.25rem;
     height: 100%;
 
-    .bp3-form-group & {
+    .bp4-form-group & {
       padding: 0.25rem 0.5rem;
       font-size: 0.875rem;
       line-height: 1.5;
@@ -143,12 +143,12 @@ label.bp3-label {
   }
 }
 
-.bp3-form-group {
-  .bp3-input-group {
+.bp4-form-group {
+  .bp4-input-group {
     flex: 1 1 auto;
   }
 
-  .bp3-control-group {
+  .bp4-control-group {
     >.input-group-prepend:first-child .input-group-text {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
@@ -157,12 +157,12 @@ label.bp3-label {
 }
 
 .#{$ns}-html-select {
-  .bp3-icon-double-caret-vertical {
+  .bp4-icon-double-caret-vertical {
     display: none;
   }
 }
 
-.bp3-datepicker-caption select {
+.bp4-datepicker-caption select {
 
   &,
   &:hover {
@@ -190,7 +190,7 @@ label.bp3-label {
 
 .form-group--select-list {
 
-  .form-group--select-list.bp3-intent-danger & {
+  .form-group--select-list.bp4-intent-danger & {
     & {
       border-color: #db3737;
     }
@@ -202,7 +202,7 @@ label.bp3-label {
     padding-right: 25px;
     justify-content: start;
 
-    &:not([class*="bp3-intent-"]):not(.bp3-minimal) {
+    &:not([class*="bp4-intent-"]):not(.bp4-minimal) {
 
       &,
       &:hover {
@@ -222,41 +222,41 @@ label.bp3-label {
     }
   }
 
-  &.bp3-fill {
+  &.bp4-fill {
     width: 100%;
   }
 
-  .bp3-popover-target.bp3-popover-open {
+  .bp4-popover-target.bp4-popover-open {
 
     .#{$ns}-button {
 
-      &:not([class*="bp3-intent-"]):not(.bp3-minimal):not(:disabled),
-      &:not([class*="bp3-intent-"]):not(.bp3-minimal):hover:not(:disabled) {
+      &:not([class*="bp4-intent-"]):not(.bp4-minimal):not(:disabled),
+      &:not([class*="bp4-intent-"]):not(.bp4-minimal):hover:not(:disabled) {
         background-color: #fafafa;
       }
     }
   }
 
-  .bp3-popover-target {
-    .bp3-icon {
+  .bp4-popover-target {
+    .bp4-icon {
       position: absolute;
       top: 0;
       left: 0;
       margin: 7px;
 
-      +.bp3-button-text {
+      +.bp4-button-text {
         padding-left: 20px;
       }
     }
 
-    .bp3-button {
+    .bp4-button {
       padding-left: 10px;
       color: #333;
     }
   }
 
-  &.bp3-intent-danger {
-    .bp3-button:not(.bp3-minimal) {
+  &.bp4-intent-danger {
+    .bp4-button:not(.bp4-minimal) {
       border-color: #db3737;
     }
   }
@@ -265,13 +265,13 @@ label.bp3-label {
 .select-list--fill-popover {
   position: relative;
 
-  .bp3-transition-container,
-  .bp3-popover {
+  .bp4-transition-container,
+  .bp4-popover {
     min-width: 100%;
   }
 }
 
-.select-list--tooltip-items .bp3-popover-target {
+.select-list--tooltip-items .bp4-popover-target {
   display: block;
 }
 
@@ -347,7 +347,7 @@ label.bp3-label {
     }
   }
 
-  &.bp3-large .#{$ns}-control-indicator {
+  &.bp4-large .#{$ns}-control-indicator {
     width: 20px;
     height: 20px;
 
@@ -417,7 +417,7 @@ label.bp3-label {
     }
 
     input:indeterminate~.#{$ns}-control-indicator {
-      background-image: escape-svg($form-check-input-indeterminate-bg-image);
+      // background-image: escape-svg($form-check-input-indeterminate-bg-image);
       border-color: $form-check-input-checked-bg-color;
       background-color: $form-check-input-checked-bg-color;
       box-shadow: 0 0 0 0 transparent;
@@ -471,14 +471,14 @@ label.bp3-label {
   }
 }
 
-.bp3-menu-item::before,
-.bp3-menu-item>.bp3-icon {
+.bp4-menu-item::before,
+.bp4-menu-item>.bp4-icon {
   color: #4b5d6b;
 }
 
-.bp3-control-group {
+.bp4-control-group {
   .input-prepend {
-    &:not(.bp3-fixed) {
+    &:not(.bp4-fixed) {
       flex: 0;
     }
 
@@ -499,13 +499,13 @@ label.bp3-label {
       border: 1px solid #ced4da;
       border-radius: 0 3px 3px 0;
 
-      .bp3-icon {
+      .bp4-icon {
         color: #848da0;
       }
     }
   }
 }
 
-.bp3-control.bp3-checkbox .bp3-control-indicator{
+.bp4-control.bp4-checkbox .bp4-control-indicator{
   border-color: #666;
 }
\ No newline at end of file
diff --git a/packages/webapp/src/style/objects/switch.scss b/packages/webapp/src/style/objects/switch.scss
index 16bd2d8c3..9363c1aeb 100644
--- a/packages/webapp/src/style/objects/switch.scss
+++ b/packages/webapp/src/style/objects/switch.scss
@@ -1,5 +1,5 @@
-.bp3-control.bp3-switch {
-  .bp3-control-indicator {
+.bp4-control.bp4-switch {
+  .bp4-control-indicator {
 
     &:before {
       box-shadow: none;
diff --git a/packages/webapp/src/style/pages/Accounts/AccountFormDialog.scss b/packages/webapp/src/style/pages/Accounts/AccountFormDialog.scss
index 13c081287..e072041b1 100644
--- a/packages/webapp/src/style/pages/Accounts/AccountFormDialog.scss
+++ b/packages/webapp/src/style/pages/Accounts/AccountFormDialog.scss
@@ -3,21 +3,21 @@
 // Account Form Dialog.
 // ----------------------------
 .dialog--account-form {
-  &:not(.dialog--loading) .bp3-dialog-body {
+  &:not(.dialog--loading) .bp4-dialog-body {
     margin-bottom: 30px;
   }
 
-  .bp3-dialog-body {
-    .bp3-form-group.bp3-inline {
-      .bp3-label {
+  .bp4-dialog-body {
+    .bp4-form-group.bp4-inline {
+      .bp4-label {
         min-width: 140px;
       }
-      .bp3-form-content {
+      .bp4-form-content {
         width: 250px;
       }
 
       &.form-group--description {
-        .bp3-form-content {
+        .bp4-form-content {
           width: 280px;
         }
         textarea {
@@ -35,7 +35,7 @@
     .form-group--subaccount {
       margin-bottom: 16px;
 
-      .bp3-icon-info-circle {
+      .bp4-icon-info-circle {
         color: #a1b2c5;
         position: relative;
         top: -2px;
diff --git a/packages/webapp/src/style/pages/Accounts/List.scss b/packages/webapp/src/style/pages/Accounts/List.scss
index 314dec53b..12d67344d 100644
--- a/packages/webapp/src/style/pages/Accounts/List.scss
+++ b/packages/webapp/src/style/pages/Accounts/List.scss
@@ -17,13 +17,13 @@
         }
 
         .account_name {
-          .bp3-popover-wrapper--inactive-semafro {
+          .bp4-popover-wrapper--inactive-semafro {
             margin-left: 8px;
             margin-right: 6px;
             float: right;
             border: 0;
           }
-          .bp3-popover-wrapper--account-desc {
+          .bp4-popover-wrapper--account-desc {
             border-bottom-color: #bbb;
           }
           .inactive-semafro {
@@ -43,10 +43,10 @@
           display: block;
         }
         .normal {
-          .bp3-popover-wrapper {
+          .bp4-popover-wrapper {
             width: 100%;
           }
-          .bp3-tooltip-indicator {
+          .bp4-tooltip-indicator {
             cursor: initial;
             border-bottom: 0;
           }
diff --git a/packages/webapp/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss b/packages/webapp/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss
index d0b23d633..71a87b4aa 100644
--- a/packages/webapp/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss
+++ b/packages/webapp/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss
@@ -2,25 +2,25 @@
 .dialog--allocate-landed-cost-form {
   width: 700px;
 
-  .bp3-dialog-body {
-    .bp3-form-group{
+  .bp4-dialog-body {
+    .bp4-form-group{
       margin-bottom: 18px;
     }
-    .bp3-form-group.bp3-inline {
-      .bp3-label {
+    .bp4-form-group.bp4-inline {
+      .bp4-label {
         min-width: 165px;
       }
-      .bp3-form-content {
+      .bp4-form-content {
         width: 300px;
       }
 
-      &:not(.dialog--loading) .bp3-dialog-body {
+      &:not(.dialog--loading) .bp4-dialog-body {
         margin-bottom: 30px;
       }
     }
   }
 
-  .bp3-dialog-footer{
+  .bp4-dialog-footer{
     padding-top: 10px;
   }
 
@@ -45,10 +45,10 @@
           border-left: 1px solid #ececec;
         }
 
-        .bp3-form-group{
+        .bp4-form-group{
           margin-bottom: 0;
 
-          &:not(.bp3-intent-danger) .bp3-input{
+          &:not(.bp4-intent-danger) .bp4-input{
             border: 1px solid #d0dfe2;
 
             &:focus{
diff --git a/packages/webapp/src/style/pages/BadDebt/BadDebtDialog.scss b/packages/webapp/src/style/pages/BadDebt/BadDebtDialog.scss
index a83fcc41b..7c37270d8 100644
--- a/packages/webapp/src/style/pages/BadDebt/BadDebtDialog.scss
+++ b/packages/webapp/src/style/pages/BadDebt/BadDebtDialog.scss
@@ -1,23 +1,23 @@
 .dialog--bad-debt {
   max-width: 400px;
 
-  .bp3-dialog-body {
-    .bp3-form-group {
+  .bp4-dialog-body {
+    .bp4-form-group {
       margin-bottom: 15px;
       margin-top: 15px;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
     }
 
-    .bp3-callout {
+    .bp4-callout {
       font-size: 13px;
     }
     .form-group {
       &--reason {
-        .bp3-form-content {
+        .bp4-form-content {
           textarea {
             width: 100%;
             min-width: 100%;
@@ -28,7 +28,7 @@
     }
   }
 
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 }
diff --git a/packages/webapp/src/style/pages/Billing/BillingPage.scss b/packages/webapp/src/style/pages/Billing/BillingPage.scss
index be72d6ef8..09cac5b8f 100644
--- a/packages/webapp/src/style/pages/Billing/BillingPage.scss
+++ b/packages/webapp/src/style/pages/Billing/BillingPage.scss
@@ -5,10 +5,10 @@
   margin-top: 40px;
   max-width: 820px;
 
-  .bp3-tab-list{
+  .bp4-tab-list{
     border-bottom: 2px solid #d7e1e7;
 
-    .bp3-tab[aria-disabled="true"]{
+    .bp4-tab[aria-disabled="true"]{
       color: rgba(92, 112, 128, 0.7);
     }
   }
diff --git a/packages/webapp/src/style/pages/Bills/List.scss b/packages/webapp/src/style/pages/Bills/List.scss
index 55b52b0af..ec3f40ea0 100644
--- a/packages/webapp/src/style/pages/Bills/List.scss
+++ b/packages/webapp/src/style/pages/Bills/List.scss
@@ -44,12 +44,12 @@
         .fully-paid-text {
           font-size: 13.5px;
         }
-        .bp3-progress-bar {
+        .bp4-progress-bar {
           height: 3px;
           max-width: 180px;
 
           &,
-          .bp3-progress-meter {
+          .bp4-progress-meter {
             border-radius: 0;
           }
         }
diff --git a/packages/webapp/src/style/pages/Bills/PageForm.scss b/packages/webapp/src/style/pages/Bills/PageForm.scss
index df8a23c28..847f8f5f5 100644
--- a/packages/webapp/src/style/pages/Bills/PageForm.scss
+++ b/packages/webapp/src/style/pages/Bills/PageForm.scss
@@ -20,18 +20,18 @@ body.page-bill-edit{
     &-fields{
       flex: 1 0 0;
     }
-    .bp3-form-group{
+    .bp4-form-group{
       margin-bottom: 18px;
     }
-    .bp3-label{
+    .bp4-label{
       min-width: 140px;
     }
-    .bp3-form-content{
+    .bp4-form-content{
       width: 100%;
     }
 
-    .bp3-form-group{
-      &.bp3-inline{
+    .bp4-form-group{
+      &.bp4-inline{
         max-width: 440px; 
       }
 
@@ -40,7 +40,7 @@ body.page-bill-edit{
         &--expiration-date{
           max-width: 340px;
 
-          .bp3-label{
+          .bp4-label{
             min-width: 120px;
           }
         }
diff --git a/packages/webapp/src/style/pages/Branches/BranchFormDialog.scss b/packages/webapp/src/style/pages/Branches/BranchFormDialog.scss
index 9dd06954f..e3caccb89 100644
--- a/packages/webapp/src/style/pages/Branches/BranchFormDialog.scss
+++ b/packages/webapp/src/style/pages/Branches/BranchFormDialog.scss
@@ -1,20 +1,20 @@
 .dialog--branch-form {
   width: 650px;
 
-  .bp3-dialog-body {
-    .bp3-form-group {
+  .bp4-dialog-body {
+    .bp4-form-group {
       margin-bottom: 15px;
     }
-    .bp3-form-group.bp3-inline {
-      .bp3-label {
+    .bp4-form-group.bp4-inline {
+      .bp4-label {
         font-size: 13px;
         margin-bottom: 3px;
         min-width: 150px;
       }
-      .bp3-form-content {
+      .bp4-form-content {
         width: 278px;
       }
-      .bp3-control-group > * {
+      .bp4-control-group > * {
         flex-shrink: unset;
         padding-right: 5px;
         padding-left: 5px;
@@ -28,13 +28,13 @@
       }
 
       &.form-group--branch_address {
-        .bp3-form-content {
+        .bp4-form-content {
           width: 388px;
         }
       }
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 }
diff --git a/packages/webapp/src/style/pages/CashFlow/CashFlowAccounts/List.scss b/packages/webapp/src/style/pages/CashFlow/CashFlowAccounts/List.scss
index 50f834183..cf48b27d9 100644
--- a/packages/webapp/src/style/pages/CashFlow/CashFlowAccounts/List.scss
+++ b/packages/webapp/src/style/pages/CashFlow/CashFlowAccounts/List.scss
@@ -13,14 +13,14 @@
         }
 
         .account_name {
-          .bp3-popover-wrapper--inactive-semafro {
+          .bp4-popover-wrapper--inactive-semafro {
             margin-left: 8px;
             margin-right: 6px;
             float: right;
             border: 0;
           }
 
-          .bp3-popover-wrapper--account-desc {
+          .bp4-popover-wrapper--account-desc {
             border-bottom-color: #bbb;
           }
 
diff --git a/packages/webapp/src/style/pages/CashFlow/CashflowTransactionForm.scss b/packages/webapp/src/style/pages/CashFlow/CashflowTransactionForm.scss
index d034edc91..0d4395419 100644
--- a/packages/webapp/src/style/pages/CashFlow/CashflowTransactionForm.scss
+++ b/packages/webapp/src/style/pages/CashFlow/CashflowTransactionForm.scss
@@ -6,12 +6,12 @@
     padding: 0 0px 16px 0px;
     border-bottom: 2px solid #e9e9e9;
 
-    .bp3-form-group{
+    .bp4-form-group{
       margin-bottom: 0;
     }
   }
 
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 }
diff --git a/packages/webapp/src/style/pages/ContactDuplicate/ContactDuplicateDialog.scss b/packages/webapp/src/style/pages/ContactDuplicate/ContactDuplicateDialog.scss
index 89ae4b723..27bca225f 100644
--- a/packages/webapp/src/style/pages/ContactDuplicate/ContactDuplicateDialog.scss
+++ b/packages/webapp/src/style/pages/ContactDuplicate/ContactDuplicateDialog.scss
@@ -1,22 +1,22 @@
 .dialog--contact-duplicate {
-  .bp3-dialog-body {
+  .bp4-dialog-body {
     > .paragraph {
       margin-bottom: 1rem;
     }
-    .bp3-form-group {
+    .bp4-form-group {
       margin-bottom: 1.4rem;
 
-      .bp3-label {
+      .bp4-label {
         font-size: 13px;
       }
     }
-    .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+    .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) {
       width: 260px;
     }
   }
 
-  .bp3-dialog-footer {
-    .bp3-dialog-footer-actions .bp3-button {
+  .bp4-dialog-footer {
+    .bp4-dialog-footer-actions .bp4-button {
       margin-left: 8px;
       min-width: 65px;
     }
diff --git a/packages/webapp/src/style/pages/CreditNote/List.scss b/packages/webapp/src/style/pages/CreditNote/List.scss
index 087b2f910..b6d29bac4 100644
--- a/packages/webapp/src/style/pages/CreditNote/List.scss
+++ b/packages/webapp/src/style/pages/CreditNote/List.scss
@@ -11,7 +11,7 @@
     }
     .table-size--small {
       .status.td {
-        .bp3-progress-bar {
+        .bp4-progress-bar {
           height: 3px;
         }
       }
diff --git a/packages/webapp/src/style/pages/CreditNote/PageForm.scss b/packages/webapp/src/style/pages/CreditNote/PageForm.scss
index 8da43b9aa..dbc9ce728 100644
--- a/packages/webapp/src/style/pages/CreditNote/PageForm.scss
+++ b/packages/webapp/src/style/pages/CreditNote/PageForm.scss
@@ -19,15 +19,15 @@ body.page-credit-note-edit {
       flex: 1 0 0;
     }
 
-    .bp3-label {
+    .bp4-label {
       min-width: 150px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       width: 100%;
     }
 
-    .bp3-form-group {
-      &.bp3-inline {
+    .bp4-form-group {
+      &.bp4-inline {
         max-width: 450px;
       }
     }
diff --git a/packages/webapp/src/style/pages/Currency/CurrencyFormDialog.scss b/packages/webapp/src/style/pages/Currency/CurrencyFormDialog.scss
index ae1ab9d6f..3d74660cd 100644
--- a/packages/webapp/src/style/pages/Currency/CurrencyFormDialog.scss
+++ b/packages/webapp/src/style/pages/Currency/CurrencyFormDialog.scss
@@ -1,22 +1,22 @@
 .dialog--currency-form {
-  .bp3-dialog-body {
+  .bp4-dialog-body {
     margin-bottom: 30px;
 
-    .bp3-form-group.bp3-inline {
-      .bp3-label {
+    .bp4-form-group.bp4-inline {
+      .bp4-label {
         min-width: 140px;
       }
-      .bp3-form-content {
+      .bp4-form-content {
         width: 250px;
       }
     }
-    .bp3-dialog-header {
+    .bp4-dialog-header {
       height: 170px;
     }
   }
 
-  .bp3-dialog-footer{
-    .bp3-button{
+  .bp4-dialog-footer{
+    .bp4-button{
       min-width: 75px;
     }
   }
diff --git a/packages/webapp/src/style/pages/CustomerOpeningBalance/CustomerOpeningBalance.scss b/packages/webapp/src/style/pages/CustomerOpeningBalance/CustomerOpeningBalance.scss
index 1aeb28e83..1d1788bf9 100644
--- a/packages/webapp/src/style/pages/CustomerOpeningBalance/CustomerOpeningBalance.scss
+++ b/packages/webapp/src/style/pages/CustomerOpeningBalance/CustomerOpeningBalance.scss
@@ -1,19 +1,19 @@
 .dialog--customer-opening-balance {
   max-width: 400px;
 
-  .bp3-dialog-body {
-    .bp3-form-group {
+  .bp4-dialog-body {
+    .bp4-form-group {
       margin-bottom: 15px;
       margin-top: 15px;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: px;
         font-size: 13px;
       }
     }
   }
 
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 }
diff --git a/packages/webapp/src/style/pages/Customers/Form.scss b/packages/webapp/src/style/pages/Customers/Form.scss
index 3d9e1389f..912bed69f 100644
--- a/packages/webapp/src/style/pages/Customers/Form.scss
+++ b/packages/webapp/src/style/pages/Customers/Form.scss
@@ -15,20 +15,20 @@
     max-width: 1000px;
   }
 
-  .bp3-form-group {
+  .bp4-form-group {
     max-width: 500px;
 
-    .bp3-control {
+    .bp4-control {
       margin-top: 8px;
       margin-bottom: 8px;
     }
 
-    &.bp3-inline {
-      .bp3-label {
+    &.bp4-inline {
+      .bp4-label {
         min-width: 150px;
       }
     }
-    .bp3-form-content {
+    .bp4-form-content {
       width: 100%;
     }
   }
@@ -36,7 +36,7 @@
   .form-group--contact_name {
     max-width: 600px;
 
-    .bp3-control-group > * {
+    .bp4-control-group > * {
       flex-shrink: unset;
 
       &:not(:last-child) {
@@ -52,16 +52,16 @@
     }
   }
 
-  .bp3-form-group {
+  .bp4-form-group {
     margin-bottom: 14px;
   }
 
-  .bp3-tab-panel {
+  .bp4-tab-panel {
     margin-top: 26px;
   }
 
   .form-group--phone-number {
-    .bp3-control-group > * {
+    .bp4-control-group > * {
       flex-shrink: unset;
       padding-right: 5px;
       padding-left: 5px;
@@ -88,20 +88,20 @@
     // Tab panels.
     .tab-panel {
       &--address {
-        .bp3-form-group {
+        .bp4-form-group {
           max-width: 440px;
 
-          &.bp3-inline {
-            .bp3-label {
+          &.bp4-inline {
+            .bp4-label {
               min-width: 145px;
             }
           }
 
-          .bp3-form-content {
+          .bp4-form-content {
             width: 100%;
           }
 
-          textarea.bp3-input {
+          textarea.bp4-input {
             max-width: 100%;
             width: 100%;
             min-height: 50px;
@@ -110,7 +110,7 @@
       }
       &--note {
         .form-group--note {
-          .bp3-form-group {
+          .bp4-form-group {
             max-width: 600px;
           }
           textarea {
@@ -126,8 +126,8 @@
     }
   }
 
-  .bp3-tabs {
-    .bp3-tab-list {
+  .bp4-tabs {
+    .bp4-tab-list {
       position: relative;
 
       &:before {
@@ -142,7 +142,7 @@
       > *:not(:last-child) {
         margin-right: 25px;
       }
-      &.bp3-large > .bp3-tab {
+      &.bp4-large > .bp4-tab {
         font-size: 15px;
       }
     }
diff --git a/packages/webapp/src/style/pages/Dashboard/Dashboard.scss b/packages/webapp/src/style/pages/Dashboard/Dashboard.scss
index 931d18f60..b23b7ce3e 100644
--- a/packages/webapp/src/style/pages/Dashboard/Dashboard.scss
+++ b/packages/webapp/src/style/pages/Dashboard/Dashboard.scss
@@ -59,16 +59,16 @@ $dashboard-views-bar-height: 44px;
         }
       }
 
-      .bp3-navbar-divider {
+      .bp4-navbar-divider {
         margin: 0 8px;
       }
 
       .form-group-quick-new-downDrop {
-        .bp3-popover-target .bp3-button {
+        .bp4-popover-target .bp4-button {
           color: #1552c8;
         }
 
-        .bp3-button::after {
+        .bp4-button::after {
           content: none;
         }
       }
@@ -79,7 +79,7 @@ $dashboard-views-bar-height: 44px;
       align-items: center;
       margin-right: 14px;
 
-      .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+      .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) {
         padding: 0;
         background-size: contain;
         border-radius: 50%;
@@ -157,7 +157,7 @@ $dashboard-views-bar-height: 44px;
   &__actions-bar {
     border-bottom: 2px solid #e1e2e8;
 
-    .bp3-navbar-divider {
+    .bp4-navbar-divider {
       border-left-color: rgb(199, 214, 219);
     }
 
@@ -185,8 +185,8 @@ $dashboard-views-bar-height: 44px;
           color: #32304a;
         }
 
-        &.bp3-minimal:active,
-        &.bp3-minimal.bp3-active {
+        &.bp4-minimal:active,
+        &.bp4-minimal.bp4-active {
           background: #a7b6c21f;
           color: #32304a;
         }
@@ -194,7 +194,7 @@ $dashboard-views-bar-height: 44px;
         &.has-active-filters {
 
           &,
-          &.bp3-active,
+          &.bp4-active,
           &:active {
             background: #eafbe4;
           }
@@ -241,25 +241,25 @@ $dashboard-views-bar-height: 44px;
         }
       }
 
-      .bp3-control.bp3-switch {
+      .bp4-control.bp4-switch {
         margin-bottom: 0;
         margin-left: 8px;
         color: #3d3b53;
 
-        .bp3-control-indicator {
+        .bp4-control-indicator {
           height: 16px;
           min-width: 1.8em;
         }
 
-        .bp3-control-indicator::before {
+        .bp4-control-indicator::before {
           box-shadow: 0 0 0;
         }
 
-        input~.bp3-control-indicator {
+        input~.bp4-control-indicator {
           background: rgba(167, 182, 194, 0.55);
         }
 
-        input:checked~.bp3-control-indicator {
+        input:checked~.bp4-control-indicator {
           background: #0069ff;
         }
       }
@@ -361,7 +361,7 @@ $dashboard-views-bar-height: 44px;
     height: 100%;
     background-color: #fbfbfb;
 
-    .bp3-spinner {
+    .bp4-spinner {
       margin: auto;
     }
   }
@@ -485,7 +485,7 @@ $dashboard-views-bar-height: 44px;
       opacity: 0.8;
     }
 
-    .bp3-icon {
+    .bp4-icon {
       margin-top: 6px;
 
       path {
@@ -549,15 +549,15 @@ $dashboard-views-bar-height: 44px;
   height: $dashboard-views-bar-height;
   padding: 0 20px;
 
-  .bp3-navbar-group {
+  .bp4-navbar-group {
     height: $dashboard-views-bar-height;
   }
 
-  .bp3-tab[aria-selected='true'] {
+  .bp4-tab[aria-selected='true'] {
     box-shadow: inset 0 -2px 0 #0052cc;
   }
 
-  .bp3-button {
+  .bp4-button {
     &:hover {
       background: rgba(167, 182, 194, 0.12);
       color: #32304a;
@@ -578,7 +578,7 @@ $dashboard-views-bar-height: 44px;
   background-color: #fff;
   width: 600px;
 
-  .bp3-input {
+  .bp4-input {
     padding-left: 40px !important;
   }
 }
diff --git a/packages/webapp/src/style/pages/ExchangeRate/ExchangeRateDialog.scss b/packages/webapp/src/style/pages/ExchangeRate/ExchangeRateDialog.scss
index 033896ad3..ef7301933 100644
--- a/packages/webapp/src/style/pages/ExchangeRate/ExchangeRateDialog.scss
+++ b/packages/webapp/src/style/pages/ExchangeRate/ExchangeRateDialog.scss
@@ -1,12 +1,12 @@
 
 .dialog--exchangeRate-form {
 
-  .bp3-dialog-body {
-    .bp3-form-group.bp3-inline {
-      .bp3-label {
+  .bp4-dialog-body {
+    .bp4-form-group.bp4-inline {
+      .bp4-label {
         min-width: 140px;
       }
-      .bp3-form-content {
+      .bp4-form-content {
         width: 250px;
       }
     }
diff --git a/packages/webapp/src/style/pages/Expense/PageForm.scss b/packages/webapp/src/style/pages/Expense/PageForm.scss
index 6aaf1fade..5112dfe77 100644
--- a/packages/webapp/src/style/pages/Expense/PageForm.scss
+++ b/packages/webapp/src/style/pages/Expense/PageForm.scss
@@ -22,18 +22,18 @@
       flex: 1 0 0;
     }
 
-    .bp3-label {
+    .bp4-label {
       min-width: 140px;
     }
 
-    .bp3-form-content {
+    .bp4-form-content {
       width: 100%;
     }
 
-    .bp3-form-group {
+    .bp4-form-group {
       margin-bottom: 18px;
 
-      &.bp3-inline {
+      &.bp4-inline {
         max-width: 440px;
       }
     }
@@ -50,12 +50,12 @@
 
           &.landed-cost {
 
-            .bp3-control {
+            .bp4-control {
               margin-top: 0;
               margin-left: 34px;
             }
 
-            .bp3-control-indicator {
+            .bp4-control-indicator {
               height: 18px;
               width: 18px;
               border-color: #e0e0e0;
diff --git a/packages/webapp/src/style/pages/FinancialStatements/CashFlowStatement.scss b/packages/webapp/src/style/pages/FinancialStatements/CashFlowStatement.scss
index d6fc85b7a..263a4efe3 100644
--- a/packages/webapp/src/style/pages/FinancialStatements/CashFlowStatement.scss
+++ b/packages/webapp/src/style/pages/FinancialStatements/CashFlowStatement.scss
@@ -8,7 +8,7 @@
 
 .financial-statement--cash-flow {
   .financial-header-drawer {
-    .bp3-drawer {
+    .bp4-drawer {
       max-height: 450px;
     }
   }
diff --git a/packages/webapp/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss b/packages/webapp/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss
index df41bc845..e02af2439 100644
--- a/packages/webapp/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss
+++ b/packages/webapp/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss
@@ -37,7 +37,7 @@
 
 .financial-statement--balance-summary {
   .financial-header-drawer {
-    .bp3-drawer {
+    .bp4-drawer {
       // max-height: 350px;
       max-height: 415px;
     }
diff --git a/packages/webapp/src/style/pages/FinancialStatements/InventoryItemDetails.scss b/packages/webapp/src/style/pages/FinancialStatements/InventoryItemDetails.scss
index dc7031f84..c08a707b7 100644
--- a/packages/webapp/src/style/pages/FinancialStatements/InventoryItemDetails.scss
+++ b/packages/webapp/src/style/pages/FinancialStatements/InventoryItemDetails.scss
@@ -21,7 +21,7 @@
 
 .number-format-dropdown {
   .toggles-fields {
-    .bp3-form-group:first-child {
+    .bp4-form-group:first-child {
       display: none;
     }
   }
@@ -33,7 +33,7 @@
 
 .financial-statement--inventory-details {
   .financial-header-drawer {
-    .bp3-drawer {
+    .bp4-drawer {
       max-height: 350px;
     }
   }
diff --git a/packages/webapp/src/style/pages/FinancialStatements/Journal.scss b/packages/webapp/src/style/pages/FinancialStatements/Journal.scss
index 26cca5b7d..8e86c281b 100644
--- a/packages/webapp/src/style/pages/FinancialStatements/Journal.scss
+++ b/packages/webapp/src/style/pages/FinancialStatements/Journal.scss
@@ -2,7 +2,7 @@
 .financial-statement--journal{
 
   .financial-header-drawer{
-    .bp3-drawer{
+    .bp4-drawer{
       max-height: 350px;
     }
   }
diff --git a/packages/webapp/src/style/pages/FinancialStatements/NumberFormatDropdown.scss b/packages/webapp/src/style/pages/FinancialStatements/NumberFormatDropdown.scss
index de6107dd9..a0a59d08a 100644
--- a/packages/webapp/src/style/pages/FinancialStatements/NumberFormatDropdown.scss
+++ b/packages/webapp/src/style/pages/FinancialStatements/NumberFormatDropdown.scss
@@ -4,20 +4,20 @@
   width: 300px;
   padding: 15px;
 
-  .bp3-form-group{
+  .bp4-form-group{
     margin-bottom: 6px;
 
-    label.bp3-label{
+    label.bp4-label{
       font-size: 13px;
       margin-bottom: 4px;
       font-weight: 500;
     }
-    .bp3-button{
+    .bp4-button{
       min-height: 28px;
       min-width: 28px;
     }
   }
-  .bp3-control.bp3-inline{
+  .bp4-control.bp4-inline{
     margin-bottom: 0;
     margin-top: 0;
   }
@@ -28,15 +28,15 @@
     text-align: right;  
     padding-top: 10px;
 
-    .bp3-button.bp3-small,
-    .bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal).bp3-small{
+    .bp4-button.bp4-small,
+    .bp4-button:not([class*="bp4-intent-"]):not(.bp4-minimal).bp4-small{
       min-width: 65px;
       height: 26px;
       min-height: 26px;
     }
   }
 
-  .bp3-control .bp3-control-indicator{
+  .bp4-control .bp4-control-indicator{
     height: 16px;
     width: 16px;
   }
diff --git a/packages/webapp/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss b/packages/webapp/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss
index 348cf69bd..f1e7a4e5a 100644
--- a/packages/webapp/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss
+++ b/packages/webapp/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss
@@ -20,7 +20,7 @@
 .financial-statement--sales-by-items,
 .financial-statement--purchases-by-items {
   .financial-header-drawer {
-    .bp3-drawer {
+    .bp4-drawer {
       // max-height: 400px;
       max-height: 450px;
     }
@@ -29,7 +29,7 @@
 
 .financial-statement--inventory-valuation {
   .financial-header-drawer {
-    .bp3-drawer {
+    .bp4-drawer {
       max-height: 400px;
     }
   }
diff --git a/packages/webapp/src/style/pages/ItemCategory/ItemCategoryDialog.scss b/packages/webapp/src/style/pages/ItemCategory/ItemCategoryDialog.scss
index 2ef5363b3..aebe5647d 100644
--- a/packages/webapp/src/style/pages/ItemCategory/ItemCategoryDialog.scss
+++ b/packages/webapp/src/style/pages/ItemCategory/ItemCategoryDialog.scss
@@ -2,19 +2,19 @@
 
 .dialog--category-form{
 
-  .bp3-dialog-body{    
-    .bp3-form-group.bp3-inline{
+  .bp4-dialog-body{    
+    .bp4-form-group.bp4-inline{
 
-      .bp3-label{
+      .bp4-label{
         min-width: 140px;
       }
-      .bp3-form-content{
+      .bp4-form-content{
         width: 250px;
       }
 
       &.form-group--description{
 
-        .bp3-form-content{
+        .bp4-form-content{
           width: 280px;
 
           textarea{
@@ -27,10 +27,10 @@
       }
     }
   }
-  .bp3-dialog-footer{
+  .bp4-dialog-footer{
     margin-top: 30px;
 
-    .bp3-button{
+    .bp4-button{
       min-width: 75px;
     }
   }
diff --git a/packages/webapp/src/style/pages/Items/Form.scss b/packages/webapp/src/style/pages/Items/Form.scss
index 31575856d..9f147e1bd 100644
--- a/packages/webapp/src/style/pages/Items/Form.scss
+++ b/packages/webapp/src/style/pages/Items/Form.scss
@@ -16,16 +16,16 @@
   }
 
   #{$self}__body {
-    .bp3-form-group {
+    .bp4-form-group {
       max-width: 500px;
       margin-bottom: 14px;
 
-      &.bp3-inline {
-        .bp3-label {
+      &.bp4-inline {
+        .bp4-label {
           min-width: 140px;
         }
       }
-      .bp3-form-content {
+      .bp4-form-content {
         width: 100%;
       }
     }
@@ -36,7 +36,7 @@
       margin-bottom: 1.4rem;
     }
 
-    .bp3-control {
+    .bp4-control {
       h3 {
         display: inline;
         margin-bottom: 0;
@@ -61,7 +61,7 @@
     max-width: 850px;
     margin-bottom: 1rem;
 
-    .bp3-form-group {
+    .bp4-form-group {
       max-width: 400px;
     }
 
@@ -83,7 +83,7 @@
     }
   }
 
-  .bp3-tooltip-indicator {
+  .bp4-tooltip-indicator {
     border-bottom: 1px dashed #d0d0d0;
   }
 }
diff --git a/packages/webapp/src/style/pages/Items/ItemAdjustmentDialog.scss b/packages/webapp/src/style/pages/Items/ItemAdjustmentDialog.scss
index fdfb3cdf3..b0590791e 100644
--- a/packages/webapp/src/style/pages/Items/ItemAdjustmentDialog.scss
+++ b/packages/webapp/src/style/pages/Items/ItemAdjustmentDialog.scss
@@ -1,15 +1,15 @@
 .dialog--adjustment-item {
-  .bp3-form-group {
+  .bp4-form-group {
     margin-bottom: 15px;
 
-    label.bp3-label {
+    label.bp4-label {
       font-size: 13px;
       margin-bottom: 3px;
     }
   }
   .form-group {
     &--adjustment-reasons {
-      .bp3-form-content {
+      .bp4-form-content {
         textarea {
           width: 100%;
           min-width: 100%;
@@ -29,9 +29,9 @@
     padding-bottom: 12px;
     border-bottom: 2px solid #e9e9e9;
     
-    .bp3-input-group{
+    .bp4-input-group{
 
-      .bp3-input{
+      .bp4-input{
         padding-left: 8px;
         padding-right: 8px;
       }
@@ -47,7 +47,7 @@
         padding-left: 0.3rem;
         padding-right: 0.3rem;
 
-        .bp3-form-group {
+        .bp4-form-group {
           margin-bottom: 0;
         }
         &--quantity-on-hand,
@@ -73,7 +73,7 @@
     }
   }
 
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 }
diff --git a/packages/webapp/src/style/pages/Items/List.scss b/packages/webapp/src/style/pages/Items/List.scss
index 5be7f2fed..57f7b4b64 100644
--- a/packages/webapp/src/style/pages/Items/List.scss
+++ b/packages/webapp/src/style/pages/Items/List.scss
@@ -7,13 +7,13 @@
     .table {
       .tbody {
         .item_type.td {
-          .bp3-tag {
+          .bp4-tag {
             font-size: 13px;
           }
         }
         .tr.inactive .td {
 
-          &.normal .bp3-icon {
+          &.normal .bp4-icon {
             color: #9eaab6;
           }
         }
diff --git a/packages/webapp/src/style/pages/ManualJournal/JournalNumberDialog.scss b/packages/webapp/src/style/pages/ManualJournal/JournalNumberDialog.scss
index a6968de65..4f4870f17 100644
--- a/packages/webapp/src/style/pages/ManualJournal/JournalNumberDialog.scss
+++ b/packages/webapp/src/style/pages/ManualJournal/JournalNumberDialog.scss
@@ -4,12 +4,12 @@
   .paragraph {
     margin-bottom: 20px;
   }
-  .bp3-form-group{
+  .bp4-form-group{
     margin-bottom: 10px;
   }
 
-  .bp3-dialog-footer-actions{
-    .bp3-button{
+  .bp4-dialog-footer-actions{
+    .bp4-button{
       min-width: 75px;
     }
   }
diff --git a/packages/webapp/src/style/pages/ManualJournal/List.scss b/packages/webapp/src/style/pages/ManualJournal/List.scss
index df30f4d0f..f2d714764 100644
--- a/packages/webapp/src/style/pages/ManualJournal/List.scss
+++ b/packages/webapp/src/style/pages/ManualJournal/List.scss
@@ -8,7 +8,7 @@
       //   padding: 0.8rem 0.5rem;
       // }
       .td.amount {
-        .bp3-popover-target {
+        .bp4-popover-target {
           border-bottom: 1px solid #e7e7e7;
 
           > span {
@@ -17,10 +17,10 @@
         }
       }
       .note {
-        .bp3-icon {
+        .bp4-icon {
           color: #666;
         }
-        .bp3-tooltip-indicator {
+        .bp4-tooltip-indicator {
           cursor: initial;
           border-bottom: 0;
         }
diff --git a/packages/webapp/src/style/pages/ManualJournal/MakeJournal.scss b/packages/webapp/src/style/pages/ManualJournal/MakeJournal.scss
index 1490e7642..51996af3e 100644
--- a/packages/webapp/src/style/pages/ManualJournal/MakeJournal.scss
+++ b/packages/webapp/src/style/pages/ManualJournal/MakeJournal.scss
@@ -12,17 +12,17 @@
       flex: 1 0 0;
     }
     
-    .bp3-label{
+    .bp4-label{
       min-width: 140px;
     }
-    .bp3-form-content{
+    .bp4-form-content{
       width: 100%;
     }
 
-    .bp3-form-group{
+    .bp4-form-group{
       margin-bottom: 18px;
 
-      &.bp3-inline{
+      &.bp4-inline{
         max-width: 440px; 
       }
     }
diff --git a/packages/webapp/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss b/packages/webapp/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss
index f4e334703..5e511cab7 100644
--- a/packages/webapp/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss
+++ b/packages/webapp/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss
@@ -1,12 +1,12 @@
 .dialog--notify-vis-sms {
   width: 800px;
 
-  .bp3-dialog-body {
-    .bp3-form-group {
+  .bp4-dialog-body {
+    .bp4-form-group {
       margin-bottom: 15px;
       margin-top: 15px;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
@@ -14,7 +14,7 @@
 
     .form-group {
       &--sms_message {
-        .bp3-form-content {
+        .bp4-form-content {
           textarea {
             width: 100%;
             min-width: 100%;
@@ -25,7 +25,7 @@
     }
   }
 
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 }
diff --git a/packages/webapp/src/style/pages/PaymentMade/PageForm.scss b/packages/webapp/src/style/pages/PaymentMade/PageForm.scss
index b730fb844..49e2ce062 100644
--- a/packages/webapp/src/style/pages/PaymentMade/PageForm.scss
+++ b/packages/webapp/src/style/pages/PaymentMade/PageForm.scss
@@ -15,17 +15,17 @@ body.page-payment-made-edit{
   $self: '.page-form';
 
   #{$self}__header{
-    .bp3-label{
+    .bp4-label{
       min-width: 160px;
     }
-    .bp3-form-content{
+    .bp4-form-content{
       width: 100%;
     }
 
-    .bp3-form-group{
+    .bp4-form-group{
       margin-bottom: 18px;
 
-      &.bp3-inline{
+      &.bp4-inline{
         max-width: 470px; 
       }
       button.receive-full-amount{
diff --git a/packages/webapp/src/style/pages/PaymentReceive/PageForm.scss b/packages/webapp/src/style/pages/PaymentReceive/PageForm.scss
index 1fdc4859d..b191ba85f 100644
--- a/packages/webapp/src/style/pages/PaymentReceive/PageForm.scss
+++ b/packages/webapp/src/style/pages/PaymentReceive/PageForm.scss
@@ -16,18 +16,18 @@ body.page-payment-receive-edit{
   $self: '.page-form';
 
   #{$self}__header {
-    .bp3-label {
+    .bp4-label {
       min-width: 160px;
     }
 
-    .bp3-form-content {
+    .bp4-form-content {
       width: 100%;
     }
 
-    .bp3-form-group {
+    .bp4-form-group {
       margin-bottom: 18px;
 
-      &.bp3-inline {
+      &.bp4-inline {
         max-width: 470px;
       }
 
diff --git a/packages/webapp/src/style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss b/packages/webapp/src/style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss
index ad208a3a9..5aba5f8aa 100644
--- a/packages/webapp/src/style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss
+++ b/packages/webapp/src/style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss
@@ -1,8 +1,8 @@
 .dialog--quick-payment-receive {
-    .bp3-form-group {
+    .bp4-form-group {
       margin-bottom: 15px;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
@@ -10,7 +10,7 @@
 
     .form-group {
       &--statement {
-        .bp3-form-content {
+        .bp4-form-content {
           textarea {
             width: 100%;
             min-width: 100%;
@@ -21,6 +21,6 @@
     }
   }
 
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
 }
diff --git a/packages/webapp/src/style/pages/Preferences/Accounting.scss b/packages/webapp/src/style/pages/Preferences/Accounting.scss
index 80708b761..9b9866f9c 100644
--- a/packages/webapp/src/style/pages/Preferences/Accounting.scss
+++ b/packages/webapp/src/style/pages/Preferences/Accounting.scss
@@ -9,10 +9,10 @@
       border-top: 1px solid #e0e7ea;
       margin-top: 30px;
 
-      .bp3-button {
+      .bp4-button {
         min-width: 65px;
 
-        + .bp3-button {
+        + .bp4-button {
           margin-left: 10px;
         }
       }
@@ -24,20 +24,20 @@
       min-width: 250px;
     }
   }
-  .bp3-form-group {
-    .bp3-form-helper-text {
+  .bp4-form-group {
+    .bp4-form-helper-text {
       margin-top: 7px;
     }
 
-    label.bp3-label {
+    label.bp4-label {
       margin-bottom: 7px;
     }
   }
-  .bp3-form-group.accounts-checkbox {
-    .bp3-form-group.bp3-inline {
+  .bp4-form-group.accounts-checkbox {
+    .bp4-form-group.bp4-inline {
       margin-bottom: 7px;
     }
-    .bp3-control.bp3-inline {
+    .bp4-control.bp4-inline {
       margin-bottom: 0;
     }
   }
diff --git a/packages/webapp/src/style/pages/Preferences/GeneralForm.scss b/packages/webapp/src/style/pages/Preferences/GeneralForm.scss
index 283ea9fae..9b874c463 100644
--- a/packages/webapp/src/style/pages/Preferences/GeneralForm.scss
+++ b/packages/webapp/src/style/pages/Preferences/GeneralForm.scss
@@ -4,17 +4,17 @@
 //---------------------------------
 .preferences-page__inside-content--general {
 
-  .bp3-form-group {
+  .bp4-form-group {
     max-width: 650px;
     margin-bottom: 24px;
 
-    .bp3-label {
+    .bp4-label {
       min-width: 190px;
       font-weight: 600;
       color: #38414e;
     }
 
-    .bp3-form-content {
+    .bp4-form-content {
       width: 100%;
     }
   }
diff --git a/packages/webapp/src/style/pages/Preferences/Roles/Form.scss b/packages/webapp/src/style/pages/Preferences/Roles/Form.scss
index 1b375407e..32461e986 100644
--- a/packages/webapp/src/style/pages/Preferences/Roles/Form.scss
+++ b/packages/webapp/src/style/pages/Preferences/Roles/Form.scss
@@ -11,26 +11,26 @@
       border-top: 1px solid #e0e7ea;
       margin-top: 30px;
 
-      .bp3-button {
+      .bp4-button {
         min-width: 65px;
 
-        + .bp3-button {
+        + .bp4-button {
           margin-left: 10px;
         }
       }
     }
   }
 
-  .bp3-form-group {
+  .bp4-form-group {
     max-width: 600px;
     margin-bottom: 14px;
 
-    &.bp3-inline {
-      .bp3-label {
+    &.bp4-inline {
+      .bp4-label {
         min-width: 150px;
       }
     }
-    .bp3-form-content {
+    .bp4-form-content {
       width: 100%;
     }
 
diff --git a/packages/webapp/src/style/pages/Preferences/SMSIntegration.scss b/packages/webapp/src/style/pages/Preferences/SMSIntegration.scss
index d2a52edf0..f2eff4bcf 100644
--- a/packages/webapp/src/style/pages/Preferences/SMSIntegration.scss
+++ b/packages/webapp/src/style/pages/Preferences/SMSIntegration.scss
@@ -30,8 +30,8 @@
       }
     }
   }
-  .bp3-tabs {
-    .bp3-tab-panel {
+  .bp4-tabs {
+    .bp4-tab-panel {
       margin-top: 0;
     }
   }
diff --git a/packages/webapp/src/style/pages/Preferences/Topbar.scss b/packages/webapp/src/style/pages/Preferences/Topbar.scss
index 17b6c5b91..5653a0eec 100644
--- a/packages/webapp/src/style/pages/Preferences/Topbar.scss
+++ b/packages/webapp/src/style/pages/Preferences/Topbar.scss
@@ -27,7 +27,7 @@
     align-items: center;
     margin-right: 14px;
 
-    .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+    .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) {
       padding: 0;
       background-size: contain;
       background-color: #eed1f2;
@@ -55,7 +55,7 @@
     margin-right: 15px;
     border-right: 1px solid #e5e5e5;
 
-    .bp3-button + .bp3-button {
+    .bp4-button + .bp4-button {
       margin-left: 10px;
     }
   }
diff --git a/packages/webapp/src/style/pages/Preferences/Users.scss b/packages/webapp/src/style/pages/Preferences/Users.scss
index c9a3726e7..420ce0f48 100644
--- a/packages/webapp/src/style/pages/Preferences/Users.scss
+++ b/packages/webapp/src/style/pages/Preferences/Users.scss
@@ -24,8 +24,8 @@
       border-bottom: 0;
     }
   }
-  .bp3-tabs {
-    .bp3-tab-panel {
+  .bp4-tabs {
+    .bp4-tab-panel {
       margin-top: 0;
     }
   }
diff --git a/packages/webapp/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss b/packages/webapp/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss
index 0d793aaca..14c1a3633 100644
--- a/packages/webapp/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss
+++ b/packages/webapp/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss
@@ -1,11 +1,11 @@
 .dialog--reconcile-credit-form {
   width: 850px;
 
-  .bp3-callout {
+  .bp4-callout {
     font-size: 14px;
   }
 
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     display: flex;
     justify-content: flex-start;
     padding-top: 10px;
diff --git a/packages/webapp/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss b/packages/webapp/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss
index 8d8e7239f..5fd6e4845 100644
--- a/packages/webapp/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss
+++ b/packages/webapp/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss
@@ -17,10 +17,10 @@
       }
 
       .tbody {
-        .bp3-form-group {
+        .bp4-form-group {
           margin-bottom: 0;
 
-          &:not(.bp3-intent-danger) .bp3-input {
+          &:not(.bp4-intent-danger) .bp4-input {
             border: 1px solid #d0dfe2;
 
             &:focus {
@@ -33,11 +33,11 @@
     }
   }
 
-  .bp3-callout {
+  .bp4-callout {
     font-size: 14px;
   }
 
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     display: flex;
     justify-content: flex-start;
     padding-top: 10px;
diff --git a/packages/webapp/src/style/pages/ReferenceNumber/ReferenceNumber.scss b/packages/webapp/src/style/pages/ReferenceNumber/ReferenceNumber.scss
index 2e8d889ce..270ea5493 100644
--- a/packages/webapp/src/style/pages/ReferenceNumber/ReferenceNumber.scss
+++ b/packages/webapp/src/style/pages/ReferenceNumber/ReferenceNumber.scss
@@ -1,18 +1,18 @@
 .reference-number-form {
 
-    .bp3-dialog-body {
+    .bp4-dialog-body {
 
         .paragraph {
             margin-bottom: 22px;
         }
 
-        .bp3-control {
+        .bp4-control {
             margin-bottom: 16px;
         }
     }
 
-    .bp3-dialog-footer {
-        .bp3-button[type='submit'] {
+    .bp4-dialog-footer {
+        .bp4-button[type='submit'] {
             min-width: 80px;
         }
     }
diff --git a/packages/webapp/src/style/pages/RefundCreditNote/RefundCreditNote.scss b/packages/webapp/src/style/pages/RefundCreditNote/RefundCreditNote.scss
index b94467894..4d892b314 100644
--- a/packages/webapp/src/style/pages/RefundCreditNote/RefundCreditNote.scss
+++ b/packages/webapp/src/style/pages/RefundCreditNote/RefundCreditNote.scss
@@ -1,12 +1,12 @@
 .dialog--refund-credit-note {
-  .bp3-dialog-body {
-    .bp3-form-group {
+  .bp4-dialog-body {
+    .bp4-form-group {
       margin-bottom: 13px;
     }
 
     .form-group {
       &--description {
-        .bp3-form-content {
+        .bp4-form-content {
           textarea {
             width: 100%;
             min-width: 100%;
@@ -17,7 +17,7 @@
     }
   }
 
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 }
\ No newline at end of file
diff --git a/packages/webapp/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss b/packages/webapp/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss
index 6e023f2dc..d832eb295 100644
--- a/packages/webapp/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss
+++ b/packages/webapp/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss
@@ -1,14 +1,14 @@
 .dialog--refund-vendor-credit {
   max-width: 450px;
 
-  .bp3-dialog-body {
-    .bp3-form-group {
+  .bp4-dialog-body {
+    .bp4-form-group {
       margin-bottom: 13px;
     }
 
     .form-group {
       &--description {
-        .bp3-form-content {
+        .bp4-form-content {
           textarea {
             width: 100%;
             min-width: 100%;
@@ -18,7 +18,7 @@
       }
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 }
diff --git a/packages/webapp/src/style/pages/SMSMessage/SMSMessage.scss b/packages/webapp/src/style/pages/SMSMessage/SMSMessage.scss
index bd9b46c90..8721f92f5 100644
--- a/packages/webapp/src/style/pages/SMSMessage/SMSMessage.scss
+++ b/packages/webapp/src/style/pages/SMSMessage/SMSMessage.scss
@@ -1,10 +1,10 @@
 .dialog--sms-message {
   width: 800px;
 
-  .bp3-form-group {
+  .bp4-form-group {
     margin-bottom: 15px;
 
-    label.bp3-label {
+    label.bp4-label {
       font-size: 13px;
       margin-bottom: 6px;
     }
@@ -12,7 +12,7 @@
 
   .form-group {
     &--message_text {
-      .bp3-form-content {
+      .bp4-form-content {
         textarea {
           width: 100%;
           min-width: 100%;
@@ -23,7 +23,7 @@
     }
   }
 
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 }
diff --git a/packages/webapp/src/style/pages/SaleEstimate/PageForm.scss b/packages/webapp/src/style/pages/SaleEstimate/PageForm.scss
index 0fe8385d1..f9d50a745 100644
--- a/packages/webapp/src/style/pages/SaleEstimate/PageForm.scss
+++ b/packages/webapp/src/style/pages/SaleEstimate/PageForm.scss
@@ -21,17 +21,17 @@ body.page-estimate-edit{
       flex: 1 0 0;
     }
 
-    .bp3-label {
+    .bp4-label {
       min-width: 140px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       width: 100%;
     }
 
-    .bp3-form-group {
+    .bp4-form-group {
       margin-bottom: 18px;
 
-      &.bp3-inline {
+      &.bp4-inline {
         max-width: 440px;
       }
     }
diff --git a/packages/webapp/src/style/pages/SaleInvoice/List.scss b/packages/webapp/src/style/pages/SaleInvoice/List.scss
index 03e62e64a..f1bee53e7 100644
--- a/packages/webapp/src/style/pages/SaleInvoice/List.scss
+++ b/packages/webapp/src/style/pages/SaleInvoice/List.scss
@@ -44,12 +44,12 @@
         .fully-paid-text {
           font-size: 13.5px;
         }
-        .bp3-progress-bar {
+        .bp4-progress-bar {
           height: 3px;
           max-width: 180px;
 
           &,
-          .bp3-progress-meter {
+          .bp4-progress-meter {
             border-radius: 0;
           }
         }
diff --git a/packages/webapp/src/style/pages/SaleInvoice/PageForm.scss b/packages/webapp/src/style/pages/SaleInvoice/PageForm.scss
index 44b9c607f..42b2266b3 100644
--- a/packages/webapp/src/style/pages/SaleInvoice/PageForm.scss
+++ b/packages/webapp/src/style/pages/SaleInvoice/PageForm.scss
@@ -19,16 +19,16 @@ body.page-invoice-edit {
       flex: 1 0 0;
     }
 
-    .bp3-label {
+    .bp4-label {
       min-width: 150px;
     }
 
-    .bp3-form-content {
+    .bp4-form-content {
       width: 100%;
     }
 
-    .bp3-form-group {
-      &.bp3-inline {
+    .bp4-form-group {
+      &.bp4-inline {
         max-width: 450px;
       }
     }
@@ -41,10 +41,10 @@ body.page-invoice-edit {
         max-width: 470px;
 
         &--due-date {
-          .bp3-form-group {
+          .bp4-form-group {
             margin: 0px 15px 15px;
 
-            .bp3-label {
+            .bp4-label {
               min-width: 100px;
             }
           }
@@ -89,7 +89,7 @@ body.page-invoice-edit {
     color: #ffffff;
   }
 
-  .bp3-progress-bar {
+  .bp4-progress-bar {
     background: rgba(92, 112, 128, 0.2);
     border-radius: 40px;
     display: block;
diff --git a/packages/webapp/src/style/pages/SaleReceipt/PageForm.scss b/packages/webapp/src/style/pages/SaleReceipt/PageForm.scss
index 27daf23ff..f5faebc5d 100644
--- a/packages/webapp/src/style/pages/SaleReceipt/PageForm.scss
+++ b/packages/webapp/src/style/pages/SaleReceipt/PageForm.scss
@@ -21,16 +21,16 @@ body.page-receipt-edit{
     &-fields{
       flex: 1 0 0;
     }
-    .bp3-label{
+    .bp4-label{
       min-width: 150px;
     }
-    .bp3-form-content{
+    .bp4-form-content{
       width: 100%;
     }
-    .bp3-form-group{
+    .bp4-form-group{
       margin-bottom: 18px;
 
-      &.bp3-inline{
+      &.bp4-inline{
         max-width: 450px; 
       }
     }
diff --git a/packages/webapp/src/style/pages/Setup/Congrats.scss b/packages/webapp/src/style/pages/Setup/Congrats.scss
index d2aaef755..d5fb935aa 100644
--- a/packages/webapp/src/style/pages/Setup/Congrats.scss
+++ b/packages/webapp/src/style/pages/Setup/Congrats.scss
@@ -19,7 +19,7 @@
       opacity: 0.85;
       margin-bottom: 14px;
     }
-    .bp3-button {
+    .bp4-button {
       height: 38px;
       padding-left: 25px;
       padding-right: 25px;
diff --git a/packages/webapp/src/style/pages/Setup/Initializing.scss b/packages/webapp/src/style/pages/Setup/Initializing.scss
index 863ce85fb..1575c0aed 100644
--- a/packages/webapp/src/style/pages/Setup/Initializing.scss
+++ b/packages/webapp/src/style/pages/Setup/Initializing.scss
@@ -5,7 +5,7 @@
   margin: 0 auto;
   padding: 16% 0 0;
 
-  .bp3-progress-bar {
+  .bp4-progress-bar {
     background: rgba(92, 112, 128, 0.2);
     border-radius: 40px;
     display: block;
@@ -15,7 +15,7 @@
     width: 80%;
     margin: 0 auto;
 
-    .bp3-progress-meter {
+    .bp4-progress-meter {
       background-color: #809cb3;
     }
   }
diff --git a/packages/webapp/src/style/pages/Setup/Organization.scss b/packages/webapp/src/style/pages/Setup/Organization.scss
index 02ceff63a..dd5623f6e 100644
--- a/packages/webapp/src/style/pages/Setup/Organization.scss
+++ b/packages/webapp/src/style/pages/Setup/Organization.scss
@@ -12,32 +12,32 @@
       font-weight: 600;
     }
   }
-  .bp3-form-group {
+  .bp4-form-group {
     margin-bottom: 24px;
 
-    .bp3-input-group {
-      .bp3-input {
+    .bp4-input-group {
+      .bp4-input {
         height: 38px;
       }
 
     }
-    .bp3-input,
-    .form-group--select-list .bp3-button{
+    .bp4-input,
+    .form-group--select-list .bp4-button{
       font-size: 15px;
     }
   }
 
-  label.bp3-label{
+  label.bp4-label{
     color: #20242e;
   }
 
-  .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+  .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) {
     width: 100%;
     height: 38px;
     padding: 8px;
   }
 
-  .bp3-text-muted {
+  .bp4-text-muted {
     color: #000000;
   }
 
@@ -50,14 +50,14 @@
   }
 
   .register-org-button {
-    .bp3-button {
+    .bp4-button {
       background-color: #1c2448;
       height: 40px;
       font-size: 15px;
       width: 100%;
 
       &:disabled,
-      &.bp3-loading{
+      &.bp4-loading{
         background-color: rgba(28, 36, 72, 0.5);
       }
     }
diff --git a/packages/webapp/src/style/pages/Setup/PaymentViaVoucherDialog.scss b/packages/webapp/src/style/pages/Setup/PaymentViaVoucherDialog.scss
index 722f2abcd..3548f7ca5 100644
--- a/packages/webapp/src/style/pages/Setup/PaymentViaVoucherDialog.scss
+++ b/packages/webapp/src/style/pages/Setup/PaymentViaVoucherDialog.scss
@@ -2,7 +2,7 @@
 
 .dialog--payment-via-voucher{
   
-  .bp3-dialog-body{
+  .bp4-dialog-body{
     p{
       margin-bottom: 20px;
     }
@@ -11,11 +11,11 @@
     }
   }
 
-  .bp3-dialog-footer-actions{ 
+  .bp4-dialog-footer-actions{ 
     button{
       min-width: 80px;
 
-      &.bp3-intent-primary{
+      &.bp4-intent-primary{
         min-width: 90px;
       }
     }
diff --git a/packages/webapp/src/style/pages/Subscription/BillingPlans.scss b/packages/webapp/src/style/pages/Subscription/BillingPlans.scss
index f5d2bbe5c..01bc82922 100644
--- a/packages/webapp/src/style/pages/Subscription/BillingPlans.scss
+++ b/packages/webapp/src/style/pages/Subscription/BillingPlans.scss
@@ -15,19 +15,19 @@
       margin-top: 0;
       margin-bottom: 12px;
     }
-    .bp3-tab-list {
+    .bp4-tab-list {
       border-bottom: 2px solid #e6e6e6;
       width: 95%;
   
-      .bp3-tab-indicator-wrapper .bp3-tab-indicator{
+      .bp4-tab-indicator-wrapper .bp4-tab-indicator{
         bottom: -2px;
       }
     }
-    .bp3-tab-panel{
+    .bp4-tab-panel{
       margin-top: 26px;
     }
     .subscribe-button {
-      .bp3-button {
+      .bp4-button {
         background-color: #0063ff;
         min-height: 41px;
         width: 240px;
@@ -41,19 +41,19 @@
 
   .license-container {
 
-    .bp3-button{
+    .bp4-button{
       margin-top: 14px;
       padding: 0 30px;
     }
     .form-group-license_code{
       margin-top: 20px;
     }
-    .bp3-form-content {
-      .bp3-input-group {
+    .bp4-form-content {
+      .bp4-input-group {
         display: block;
         position: relative;
       }
-      .bp3-input {
+      .bp4-input {
         position: relative;
         width: 59%;
         height: 41px;
diff --git a/packages/webapp/src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss b/packages/webapp/src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss
index a8d8bc7e6..9f7fdbb76 100644
--- a/packages/webapp/src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss
+++ b/packages/webapp/src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss
@@ -1,11 +1,11 @@
 .dialog--transaction--locking {
   max-width: 450px;
 
-  .bp3-form-group {
+  .bp4-form-group {
     margin-bottom: 10px;
     margin-top: 10px;
 
-    label.bp3-label {
+    label.bp4-label {
       font-size: 13px;
       margin-bottom: 3px;
     }
@@ -13,7 +13,7 @@
 
   .form-group {
     &--reason {
-      .bp3-form-content {
+      .bp4-form-content {
         textarea {
           width: 100%;
           min-height: 85px;
@@ -23,7 +23,7 @@
       }
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     display: flex;
     justify-content: flex-start;
     // padding-top: 10px;
diff --git a/packages/webapp/src/style/pages/Users/InviteFormDialog.scss b/packages/webapp/src/style/pages/Users/InviteFormDialog.scss
index c4c3911cc..32a18eb80 100644
--- a/packages/webapp/src/style/pages/Users/InviteFormDialog.scss
+++ b/packages/webapp/src/style/pages/Users/InviteFormDialog.scss
@@ -1,15 +1,15 @@
 .dialog--invite-form {
   width: 450px;
 
-  .bp3-dialog-body {
-    .bp3-form-group.bp3-inline {
-      .bp3-label {
+  .bp4-dialog-body {
+    .bp4-form-group.bp4-inline {
+      .bp4-label {
         min-width: 70px;
       }
-      .bp3-form-content {
+      .bp4-form-content {
         width: 250px;
 
-        .bp3-dialog-footer-actions {
+        .bp4-dialog-footer-actions {
           margin-right: 20px;
           display: flex;
           justify-content: flex-end;
@@ -20,12 +20,12 @@
 }
 
 .dialog--invite-user {
-  .bp3-dialog-body {
-    .bp3-form-group.bp3-inline {
-      .bp3-label {
+  .bp4-dialog-body {
+    .bp4-form-group.bp4-inline {
+      .bp4-label {
         min-width: 140px;
       }
-      .bp3-form-content {
+      .bp4-form-content {
         width: 250px;
       }
     }
diff --git a/packages/webapp/src/style/pages/Users/UserFormDialog.scss b/packages/webapp/src/style/pages/Users/UserFormDialog.scss
index 767701724..f02570ef7 100644
--- a/packages/webapp/src/style/pages/Users/UserFormDialog.scss
+++ b/packages/webapp/src/style/pages/Users/UserFormDialog.scss
@@ -1,32 +1,32 @@
 .dialog--user-form {
   width: 450px;
 
-  .bp3-form-group {
+  .bp4-form-group {
     margin-bottom: 15px;
   }
-  .bp3-dialog-body {
+  .bp4-dialog-body {
     margin-bottom: 30px;
 
-    .bp3-form-group.bp3-inline {
-      .bp3-label {
+    .bp4-form-group.bp4-inline {
+      .bp4-label {
         min-width: 140px;
       }
-      .bp3-form-content {
+      .bp4-form-content {
         width: 250px;
       }
     }
-    .bp3-dialog-header {
+    .bp4-dialog-header {
       height: 170px;
     }
   }
 
-  .bp3-callout {
+  .bp4-callout {
     font-size: 13px;
     margin-bottom: 20px;
   }
 
-  .bp3-dialog-footer {
-    .bp3-button {
+  .bp4-dialog-footer {
+    .bp4-button {
       min-width: 75px;
     }
   }
diff --git a/packages/webapp/src/style/pages/VendorOpeningBalance/VendorOpeningBalance.scss b/packages/webapp/src/style/pages/VendorOpeningBalance/VendorOpeningBalance.scss
index 30c5b7124..e796cec09 100644
--- a/packages/webapp/src/style/pages/VendorOpeningBalance/VendorOpeningBalance.scss
+++ b/packages/webapp/src/style/pages/VendorOpeningBalance/VendorOpeningBalance.scss
@@ -1,19 +1,19 @@
 .dialog--vendor-opening-balance {
   max-width: 400px;
 
-  .bp3-dialog-body {
-    .bp3-form-group {
+  .bp4-dialog-body {
+    .bp4-form-group {
       margin-bottom: 15px;
       margin-top: 15px;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: px;
         font-size: 13px;
       }
     }
   }
 
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 }
diff --git a/packages/webapp/src/style/pages/Vendors/Form.scss b/packages/webapp/src/style/pages/Vendors/Form.scss
index 6a341d76c..8449a125c 100644
--- a/packages/webapp/src/style/pages/Vendors/Form.scss
+++ b/packages/webapp/src/style/pages/Vendors/Form.scss
@@ -15,20 +15,20 @@
     max-width: 1000px;
   }
 
-  .bp3-form-group {
+  .bp4-form-group {
     max-width: 500px;
 
-    .bp3-control {
+    .bp4-control {
       margin-top: 8px;
       margin-bottom: 8px;
     }
 
-    &.bp3-inline {
-      .bp3-label {
+    &.bp4-inline {
+      .bp4-label {
         min-width: 150px;
       }
     }
-    .bp3-form-content {
+    .bp4-form-content {
       width: 100%;
     }
   }
@@ -36,7 +36,7 @@
   .form-group--contact_name {
     max-width: 600px;
 
-    .bp3-control-group > * {
+    .bp4-control-group > * {
       flex-shrink: unset;
 
       &:not(:last-child) {
@@ -52,16 +52,16 @@
     }
   }
 
-  .bp3-form-group {
+  .bp4-form-group {
     margin-bottom: 14px;
   }
 
-  .bp3-tab-panel {
+  .bp4-tab-panel {
     margin-top: 26px;
   }
 
   .form-group--phone-number {
-    .bp3-control-group > * {
+    .bp4-control-group > * {
       flex-shrink: unset;
       padding-right: 5px;
       padding-left: 5px;
@@ -88,20 +88,20 @@
     // Tab panels.
     .tab-panel {
       &--address {
-        .bp3-form-group {
+        .bp4-form-group {
           max-width: 440px;
 
-          &.bp3-inline {
-            .bp3-label {
+          &.bp4-inline {
+            .bp4-label {
               min-width: 145px;
             }
           }
 
-          .bp3-form-content {
+          .bp4-form-content {
             width: 100%;
           }
 
-          textarea.bp3-input {
+          textarea.bp4-input {
             max-width: 100%;
             width: 100%;
             min-height: 50px;
@@ -110,7 +110,7 @@
       }
       &--note {
         .form-group--note {
-          .bp3-form-group {
+          .bp4-form-group {
             max-width: 600px;
           }
           textarea {
@@ -126,8 +126,8 @@
     }
   }
 
-  .bp3-tabs {
-    .bp3-tab-list {
+  .bp4-tabs {
+    .bp4-tab-list {
       position: relative;
 
       &:before {
@@ -143,7 +143,7 @@
         margin-right: 25px;
       }
 
-      &.bp3-large > .bp3-tab {
+      &.bp4-large > .bp4-tab {
         font-size: 15px;
         color: #555;
 
diff --git a/packages/webapp/src/style/pages/VendorsCreditNote/List.scss b/packages/webapp/src/style/pages/VendorsCreditNote/List.scss
index 5119f3081..8c5e5ae37 100644
--- a/packages/webapp/src/style/pages/VendorsCreditNote/List.scss
+++ b/packages/webapp/src/style/pages/VendorsCreditNote/List.scss
@@ -11,7 +11,7 @@
     }
     .table-size--small {
       .status.td {
-        .bp3-progress-bar {
+        .bp4-progress-bar {
           height: 3px;
         }
       }
diff --git a/packages/webapp/src/style/pages/VendorsCreditNote/PageForm.scss b/packages/webapp/src/style/pages/VendorsCreditNote/PageForm.scss
index 79be9954b..4831a2ab7 100644
--- a/packages/webapp/src/style/pages/VendorsCreditNote/PageForm.scss
+++ b/packages/webapp/src/style/pages/VendorsCreditNote/PageForm.scss
@@ -19,15 +19,15 @@ body.page-vendor-credit-note-edit {
       flex: 1 0 0;
     }
 
-    .bp3-label {
+    .bp4-label {
       min-width: 150px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       width: 100%;
     }
 
-    .bp3-form-group {
-      &.bp3-inline {
+    .bp4-form-group {
+      &.bp4-inline {
         max-width: 450px;
       }
     }
diff --git a/packages/webapp/src/style/pages/WarehouseTransfers/PageForm.scss b/packages/webapp/src/style/pages/WarehouseTransfers/PageForm.scss
index 27fe8d405..c41fb81ac 100644
--- a/packages/webapp/src/style/pages/WarehouseTransfers/PageForm.scss
+++ b/packages/webapp/src/style/pages/WarehouseTransfers/PageForm.scss
@@ -19,15 +19,15 @@ body.page-warehouse-transfer-edit {
       flex: 1 0 0;
     }
 
-    .bp3-label {
+    .bp4-label {
       min-width: 150px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       width: 100%;
     }
 
-    .bp3-form-group {
-      &.bp3-inline {
+    .bp4-form-group {
+      &.bp4-inline {
         max-width: 450px;
       }
     }
diff --git a/packages/webapp/src/style/pages/Warehouses/warehouseFormDialog.scss b/packages/webapp/src/style/pages/Warehouses/warehouseFormDialog.scss
index 5a9a4433a..7ee26daf3 100644
--- a/packages/webapp/src/style/pages/Warehouses/warehouseFormDialog.scss
+++ b/packages/webapp/src/style/pages/Warehouses/warehouseFormDialog.scss
@@ -1,16 +1,16 @@
 .dialog--warehouse-form {
   width: 650px;
 
-  .bp3-dialog-body {
-    .bp3-form-group.bp3-inline {
-      .bp3-label {
+  .bp4-dialog-body {
+    .bp4-form-group.bp4-inline {
+      .bp4-label {
         font-size: 13px;
         min-width: 140px;
       }
-      .bp3-form-content {
+      .bp4-form-content {
         width: 388px;
       }
-      .bp3-control-group > * {
+      .bp4-control-group > * {
         flex-shrink: unset;
         padding-right: 5px;
         padding-left: 5px;
@@ -24,13 +24,13 @@
       }
       &.form-group--warehouse_name,
       &.form-group--phone_number {
-        .bp3-form-content {
+        .bp4-form-content {
           width: 278px;
         }
       }
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 }
diff --git a/packages/webapp/src/style/pages/keyboardShortcuts/KeyboardShortcutDialog.scss b/packages/webapp/src/style/pages/keyboardShortcuts/KeyboardShortcutDialog.scss
index 05a0f9969..7e0b149e4 100644
--- a/packages/webapp/src/style/pages/keyboardShortcuts/KeyboardShortcutDialog.scss
+++ b/packages/webapp/src/style/pages/keyboardShortcuts/KeyboardShortcutDialog.scss
@@ -31,8 +31,8 @@
     text-align: right;
     margin: 0px 15px;
 
-    .bp3-button.bp3-small,
-    .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal).bp3-small {
+    .bp4-button.bp4-small,
+    .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal).bp4-small {
       min-width: 65px;
       height: 26px;
       min-height: 26px;
diff --git a/packages/webapp/src/style/pages/register-organizaton.scss b/packages/webapp/src/style/pages/register-organizaton.scss
index cf30a8958..9044785c1 100644
--- a/packages/webapp/src/style/pages/register-organizaton.scss
+++ b/packages/webapp/src/style/pages/register-organizaton.scss
@@ -29,9 +29,9 @@
     margin-bottom: 20px;
   }
 
-  .bp3-form-group {
-    .bp3-input-group {
-      .bp3-input {
+  .bp4-form-group {
+    .bp4-input-group {
+      .bp4-input {
         position: relative;
         width: 619px;
         height: 38px;
@@ -41,7 +41,7 @@
 
   .form-group--base-currency,
   .form-group--language {
-    .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+    .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) {
       min-width: 300px;
       min-height: 38px;
     }
@@ -49,16 +49,16 @@
   .form-group--language {
     margin-left: 18px;
   }
-  .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+  .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) {
     min-width: 619px;
     min-height: 38px;
   }
 
   .form-group--time-zone {
-    .bp3-text-muted {
+    .bp4-text-muted {
       color: #000000;
     }
-    .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+    .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) {
       background: #fff;
       box-shadow: 0 0 0 transparent;
       border: 1px solid #ced4da;
@@ -74,7 +74,7 @@
     border-bottom: 3px solid #f5f5f5;
   }
   .register-org-button {
-    .bp3-button {
+    .bp4-button {
       background-color: #0052cc;
       width: 174px;
       min-height: 40px;
diff --git a/packages/webapp/src/style/pages/view-form.scss b/packages/webapp/src/style/pages/view-form.scss
index 3f185b8a9..34743a300 100644
--- a/packages/webapp/src/style/pages/view-form.scss
+++ b/packages/webapp/src/style/pages/view-form.scss
@@ -18,7 +18,7 @@
     background: #fbfafa;
     margin-bottom: 22px;
 
-    .bp3-form-group.bp3-inline{
+    .bp4-form-group.bp4-inline{
       margin-bottom: 0;
     }
   }
@@ -71,7 +71,7 @@
   .dragable-columns{
     &__column{
 
-      .bp3-input-group .bp3-input{
+      .bp4-input-group .bp4-input{
         border-radius: 3px 3px 0 0;
       }
 
@@ -91,7 +91,7 @@
   &__role-conditional{
     margin-top: 1rem;
 
-    .bp3-form-group{
+    .bp4-form-group{
       margin-bottom: 0;
     }
   }
diff --git a/packages/webapp/src/style/variables.scss b/packages/webapp/src/style/variables.scss
index 21fe0ded6..41f427703 100644
--- a/packages/webapp/src/style/variables.scss
+++ b/packages/webapp/src/style/variables.scss
@@ -1,6 +1,7 @@
-@import '@blueprintjs/core/src/common/_variables.scss';
+@import "@blueprintjs/colors/lib/scss/colors";
+@import '@blueprintjs/core/src/common/variables';
 
-$ns: bp3;
+$ns: bp4;
 
 $pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
   0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
@@ -43,8 +44,7 @@ $sidebar-submenu-item-bg-color: rgba(255, 255, 255, 0.2);
 
 $form-check-input-checked-color: #fff;
 $form-check-input-checked-bg-color: $blue1;
-$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M12,5c-0.28,0-0.53,0.11-0.71,0.29L7,9.59L4.71,7.29C4.53,7.11,4.28,7,4,7C3.45,7,3,7.45,3,8c0,0.28,0.11,0.53,0.29,0.71l3,3C6.47,11.89,6.72,12,7,12s0.53-0.11,0.71-0.29l5-5C12.89,6.53,13,6.28,13,6C13,5.45,12.55,5,12,5z'/></g></g></svg>") !default;
-$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M11,7H5C4.45,7,4,7.45,4,8c0,0.55,0.45,1,1,1h6c0.55,0,1-0.45,1-1C12,7.45,11.55,7,11,7z'/></g></g></svg>") !default;
+$form-check-input-checked-bg-image: "" !default;
 
 // z-indexs
 $zindex-dashboard-splash-screen: 39;
diff --git a/packages/webapp/src/style/views/filter-dropdown.scss b/packages/webapp/src/style/views/filter-dropdown.scss
index d3a7d9eac..a703fe1de 100644
--- a/packages/webapp/src/style/views/filter-dropdown.scss
+++ b/packages/webapp/src/style/views/filter-dropdown.scss
@@ -19,43 +19,43 @@
     display: flex;
     padding: 6px 12px;
 
-    .bp3-input{
+    .bp4-input{
       padding: 0 6px;
     }
-    .form-group--select-list .bp3-popover-target .bp3-button{
+    .form-group--select-list .bp4-popover-target .bp4-button{
       padding-left: 6px;
     } 
 
-    .bp3-html-select::after,
-    .form-group--select-list .bp3-button::after{
+    .bp4-html-select::after,
+    .form-group--select-list .bp4-button::after{
       margin-right: 6px;
       border-top-color: #c5c5c5;
     }
-    .bp3-html-select,
-    .bp3-input,
-    .form-group--select-list .bp3-button{
+    .bp4-html-select,
+    .bp4-input,
+    .form-group--select-list .bp4-button{
       
       &:not(:focus){
         border-color: #d3d9de;
       }
     }
 
-    .form-group--select-list .bp3-button{
+    .form-group--select-list .bp4-button{
       padding-right: 20px;
     }
-    .bp3-form-group{
+    .bp4-form-group{
       margin-bottom: 0;
       padding-right: 10px;
 
-      .bp3-control.bp3-checkbox{
+      .bp4-control.bp4-checkbox{
         margin-left: 20px;
       }
 
-      .bp3-popover-wrapper{
+      .bp4-popover-wrapper{
         width: 100%;
       }
 
-      .bp3-button{
+      .bp4-button{
         text-overflow: ellipsis;
         overflow: visible;
         white-space: nowrap;
@@ -84,7 +84,7 @@
     .button--remove{
       margin-left: -6px;
 
-      .bp3-icon{
+      .bp4-icon{
         color: #929aa0;
       }
     }
@@ -96,15 +96,15 @@
   }
 }
 
-.bp3-popover{
+.bp4-popover{
 
   &,
-  & .bp3-popover-content{
+  & .bp4-popover-content{
     border-radius: 5px;
   }
 }
 
-.bp3-menu-item{
+.bp4-menu-item{
   .text-hint{
     font-size: 11px;
     line-height: 1.3;