diff --git a/packages/webapp/package.json b/packages/webapp/package.json
index d06767340..574edc80c 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -106,6 +106,7 @@
     "react-router": "5.3.4",
     "react-router-breadcrumbs-hoc": "^3.2.10",
     "react-router-dom": "^5.3.3",
+    "react-router-dom-v5-compat": "6",
     "react-scripts": "5.0.1",
     "react-scroll-sync": "^0.7.1",
     "react-scrollbars-custom": "^4.0.21",
diff --git a/packages/webapp/src/components/Dashboard/BigcapitalLoading.tsx b/packages/webapp/src/components/Dashboard/BigcapitalLoading.tsx
index 60acf4ead..36225efb0 100644
--- a/packages/webapp/src/components/Dashboard/BigcapitalLoading.tsx
+++ b/packages/webapp/src/components/Dashboard/BigcapitalLoading.tsx
@@ -1,17 +1,16 @@
-// @ts-nocheck
-import React from 'react';
-import classNames from 'classnames';
 import { Icon } from '@/components';
+import classNames from 'classnames';
+import React from 'react';
 
 import '@/style/components/BigcapitalLoading.scss';
 
 /**
  * Bigcapital logo loading.
  */
-export default function BigcapitalLoading({ className }) {
+export default function BigcapitalLoading({ className }: { className: string }) {
   return (
     <div className={classNames('bigcapital-loading', className)}>
-      <div class="center">
+      <div className="center">
         <Icon icon="bigcapital" height={37} width={228} />
       </div>
     </div>
diff --git a/packages/webapp/src/components/Dashboard/DashboardBackLink.tsx b/packages/webapp/src/components/Dashboard/DashboardBackLink.tsx
index 2471a46e0..fe09a5943 100644
--- a/packages/webapp/src/components/Dashboard/DashboardBackLink.tsx
+++ b/packages/webapp/src/components/Dashboard/DashboardBackLink.tsx
@@ -13,17 +13,14 @@ function DashboardBackLink({ dashboardBackLink, breadcrumbs }) {
   const crumb = breadcrumbs[breadcrumbs.length - 2];
 
   const handleClick = (event) => {
-    const url =
-      typeof dashboardBackLink === 'string'
-        ? dashboardBackLink
-        : crumb.match.url;
+    const url = typeof dashboardBackLink === 'string' ? dashboardBackLink : crumb.match.url;
     history.push(url);
     event.preventDefault();
   };
 
   return (
     <If condition={dashboardBackLink && crumb}>
-      <div class="dashboard__back-link">
+      <div className="dashboard__back-link">
         <a href="#no-link" onClick={handleClick}>
           <Icon icon={'arrow-left'} iconSize={18} /> <T id={'back_to_list'} />
         </a>
diff --git a/packages/webapp/src/components/Dashboard/DashboardErrorBoundary.tsx b/packages/webapp/src/components/Dashboard/DashboardErrorBoundary.tsx
index 4e66ed51c..8a49ecd73 100644
--- a/packages/webapp/src/components/Dashboard/DashboardErrorBoundary.tsx
+++ b/packages/webapp/src/components/Dashboard/DashboardErrorBoundary.tsx
@@ -4,10 +4,14 @@ import { FormattedMessage as T, Icon } from '@/components';
 
 export default function DashboardErrorBoundary({}) {
   return (
-    <div class="dashboard__error-boundary">
-      <h1><T id={'sorry_about_that_something_went_wrong'} /></h1>
-      <p><T id={'if_the_problem_stuck_please_contact_us_as_soon_as_possible'} /></p>
+    <div className="dashboard__error-boundary">
+      <h1>
+        <T id={'sorry_about_that_something_went_wrong'} />
+      </h1>
+      <p>
+        <T id={'if_the_problem_stuck_please_contact_us_as_soon_as_possible'} />
+      </p>
       <Icon icon="bigcapital" height={30} width={160} />
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/packages/webapp/src/components/Dashboard/DashboardFooter.tsx b/packages/webapp/src/components/Dashboard/DashboardFooter.tsx
index 9928bf3da..4348a91ec 100644
--- a/packages/webapp/src/components/Dashboard/DashboardFooter.tsx
+++ b/packages/webapp/src/components/Dashboard/DashboardFooter.tsx
@@ -5,7 +5,7 @@ import { For } from '@/components';
 
 function FooterLinkItem({ title, link }) {
   return (
-    <div class="">
+    <div className="">
       <a href={link} target="_blank" rel="noopener noreferrer">
         {title}
       </a>
@@ -17,8 +17,8 @@ export default function DashboardFooter() {
   const footerLinks = getFooterLinks();
 
   return (
-    <div class="dashboard__footer">
-      <div class="footer-links">
+    <div className="dashboard__footer">
+      <div className="footer-links">
         <For render={FooterLinkItem} of={footerLinks} />
       </div>
     </div>
diff --git a/packages/webapp/src/components/Dashboard/DashboardPage.tsx b/packages/webapp/src/components/Dashboard/DashboardPage.tsx
index 4bf45336b..af17f43f7 100644
--- a/packages/webapp/src/components/Dashboard/DashboardPage.tsx
+++ b/packages/webapp/src/components/Dashboard/DashboardPage.tsx
@@ -77,17 +77,13 @@ function DashboardPage({
     return () => {
       resetResourceTypeUniversalSearch();
     };
-  }, [
-    defaultSearchResource,
-    resetResourceTypeUniversalSearch,
-    setResourceTypeUniversalSearch,
-  ]);
+  }, [defaultSearchResource, resetResourceTypeUniversalSearch, setResourceTypeUniversalSearch]);
 
   return (
     <div className={CLASSES.DASHBOARD_PAGE}>
       <Suspense
         fallback={
-          <div class="dashboard__fallback-loading">
+          <div className="dashboard__fallback-loading">
             <Spinner size={40} value={null} />
           </div>
         }
diff --git a/packages/webapp/src/components/Dashboard/DashboardPageContent.tsx b/packages/webapp/src/components/Dashboard/DashboardPageContent.tsx
index ed2acae18..b700ce7ef 100644
--- a/packages/webapp/src/components/Dashboard/DashboardPageContent.tsx
+++ b/packages/webapp/src/components/Dashboard/DashboardPageContent.tsx
@@ -5,5 +5,5 @@ import React from 'react';
  * Dashboard page content.
  */
 export function DashboardPageContent({ children }) {
-  return <div class="dashboard__page-content">{children}</div>;
+  return <div className="dashboard__page-content">{children}</div>;
 }
diff --git a/packages/webapp/src/components/Dashboard/DashboardTopbar/DashboardTopbar.tsx b/packages/webapp/src/components/Dashboard/DashboardTopbar/DashboardTopbar.tsx
index 549785a87..7ab3ebcab 100644
--- a/packages/webapp/src/components/Dashboard/DashboardTopbar/DashboardTopbar.tsx
+++ b/packages/webapp/src/components/Dashboard/DashboardTopbar/DashboardTopbar.tsx
@@ -1,15 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import { useHistory } from 'react-router';
-import {
-  Navbar,
-  NavbarGroup,
-  NavbarDivider,
-  Button,
-  Classes,
-  Tooltip,
-  Position,
-} from '@blueprintjs/core';
+import { Navbar, NavbarGroup, NavbarDivider, Button, Classes, Tooltip, Position } from '@blueprintjs/core';
 import { FormattedMessage as T, Icon, Hint, If } from '@/components';
 
 import DashboardTopbarUser from '@/components/Dashboard/TopbarUser';
@@ -53,28 +45,22 @@ function DashboardTopbar({
   };
 
   return (
-    <div class="dashboard__topbar" data-testId={'dashboard-topbar'}>
-      <div class="dashboard__topbar-left">
-        <div class="dashboard__topbar-sidebar-toggle">
+    <div className="dashboard__topbar" data-testId={'dashboard-topbar'}>
+      <div className="dashboard__topbar-left">
+        <div className="dashboard__topbar-sidebar-toggle">
           <Tooltip
-            content={
-              !sidebarExpended ? (
-                <T id={'open_sidebar'} />
-              ) : (
-                <T id={'close_sidebar'} />
-              )
-            }
+            content={!sidebarExpended ? <T id={'open_sidebar'} /> : <T id={'close_sidebar'} />}
             position={Position.RIGHT}
           >
             <DashboardHamburgerButton onClick={handleSidebarToggleBtn} />
           </Tooltip>
         </div>
 
-        <div class="dashboard__title">
+        <div className="dashboard__title">
           <h1>{pageTitle}</h1>
 
           <If condition={pageHint}>
-            <div class="dashboard__hint">
+            <div className="dashboard__hint">
               <Hint content={pageHint} />
             </div>
           </If>
@@ -88,28 +74,20 @@ function DashboardTopbar({
           </If>
         </div>
 
-        <div class="dashboard__breadcrumbs">
+        <div className="dashboard__breadcrumbs">
           <DashboardBreadcrumbs />
         </div>
         <DashboardBackLink />
       </div>
 
-      <div class="dashboard__topbar-right">
-        <Navbar class="dashboard__topbar-navbar">
+      <div className="dashboard__topbar-right">
+        <Navbar className="dashboard__topbar-navbar">
           <NavbarGroup>
-            <DashboardQuickSearchButton
-              onClick={() => openGlobalSearch(true)}
-            />
+            <DashboardQuickSearchButton onClick={() => openGlobalSearch(true)} />
             <QuickNewDropdown />
 
-            <Tooltip
-              content={<T id={'notifications'} />}
-              position={Position.BOTTOM}
-            >
-              <Button
-                className={Classes.MINIMAL}
-                icon={<Icon icon={'notification-24'} iconSize={20} />}
-              />
+            <Tooltip content={<T id={'notifications'} />} position={Position.BOTTOM}>
+              <Button className={Classes.MINIMAL} icon={<Icon icon={'notification-24'} iconSize={20} />} />
             </Tooltip>
 
             <Button
@@ -121,7 +99,7 @@ function DashboardTopbar({
           </NavbarGroup>
         </Navbar>
 
-        <div class="dashboard__topbar-user">
+        <div className="dashboard__topbar-user">
           <DashboardTopbarUser />
         </div>
       </div>
diff --git a/packages/webapp/src/components/Dashboard/DashboardTopbar/_components.tsx b/packages/webapp/src/components/Dashboard/DashboardTopbar/_components.tsx
index ffdb4021a..1ebc9e941 100644
--- a/packages/webapp/src/components/Dashboard/DashboardTopbar/_components.tsx
+++ b/packages/webapp/src/components/Dashboard/DashboardTopbar/_components.tsx
@@ -6,7 +6,7 @@ import { Icon, FormattedMessage as T } from '@/components';
 
 export function DashboardTopbarSubscriptionMessage() {
   return (
-    <div class="dashboard__topbar-subscription-msg">
+    <div className="dashboard__topbar-subscription-msg">
       <span>
         <T id={'dashboard.subscription_msg.period_over'} />
       </span>
@@ -17,14 +17,7 @@ export function DashboardTopbarSubscriptionMessage() {
 export function DashboardHamburgerButton({ ...props }) {
   return (
     <Button minimal={true} {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        role="img"
-        focusable="false"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" role="img" focusable="false">
         <title>
           <T id={'menu'} />
         </title>
@@ -58,4 +51,4 @@ export function DashboardQuickSearchButton({ ...rest }) {
       {...rest}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/packages/webapp/src/components/Dashboard/DashboardViewsTabs.tsx b/packages/webapp/src/components/Dashboard/DashboardViewsTabs.tsx
index a36986fc8..dd2ad82a9 100644
--- a/packages/webapp/src/components/Dashboard/DashboardViewsTabs.tsx
+++ b/packages/webapp/src/components/Dashboard/DashboardViewsTabs.tsx
@@ -28,17 +28,12 @@ export function DashboardViewsTabs({
   const [currentView, setCurrentView] = useState(initialViewSlug || 0);
 
   useEffect(() => {
-    if (
-      typeof currentViewSlug !== 'undefined' &&
-      currentViewSlug !== currentView
-    ) {
+    if (typeof currentViewSlug !== 'undefined' && currentViewSlug !== currentView) {
       setCurrentView(currentViewSlug || 0);
     }
   }, [currentView, setCurrentView, currentViewSlug]);
 
-  const throttledOnChange = useRef(
-    debounce((viewId) => saveInvoke(OnThrottledChange, viewId), throttleTime),
-  );
+  const throttledOnChange = useRef(debounce((viewId) => saveInvoke(OnThrottledChange, viewId), throttleTime));
 
   // Trigger `onChange` and `onThrottledChange` events.
   const triggerOnChange = (viewSlug) => {
@@ -60,7 +55,7 @@ export function DashboardViewsTabs({
   };
 
   return (
-    <div class="dashboard__views-tabs">
+    <div className="dashboard__views-tabs">
       <Tabs
         id="navbar"
         large={true}
@@ -75,10 +70,7 @@ export function DashboardViewsTabs({
           <Tab id={tab.slug} title={tab.name} />
         ))}
         <If condition={newViewTab}>
-          <Tooltip
-            content={<T id={'create_a_new_view'} />}
-            position={Position.RIGHT}
-          >
+          <Tooltip content={<T id={'create_a_new_view'} />} position={Position.RIGHT}>
             <Button
               className="button--new-view"
               icon={<Icon icon="plus" />}
diff --git a/packages/webapp/src/components/Dashboard/TopbarUser.tsx b/packages/webapp/src/components/Dashboard/TopbarUser.tsx
index 889bd3426..e84073236 100644
--- a/packages/webapp/src/components/Dashboard/TopbarUser.tsx
+++ b/packages/webapp/src/components/Dashboard/TopbarUser.tsx
@@ -1,14 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import {
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Button,
-  Popover,
-  Position,
-} from '@blueprintjs/core';
+import { Menu, MenuItem, MenuDivider, Button, Popover, Position } from '@blueprintjs/core';
 import { FormattedMessage as T } from '@/components';
 
 import { useAuthActions } from '@/hooks/state';
@@ -48,37 +41,27 @@ function DashboardTopbarUser({
             className={'menu-item--profile'}
             text={
               <div>
-                <div class="person">
+                <div className="person">
                   {user.first_name} {user.last_name}
                 </div>
-                <div class="org">
+                <div className="org">
                   <T id="organization_id" />: {user.tenant_id}
                 </div>
               </div>
             }
           />
           <MenuDivider />
-          <MenuItem
-            text={<T id={'keyboard_shortcuts'} />}
-            onClick={onKeyboardShortcut}
-          />
-          <MenuItem
-            text={<T id={'preferences'} />}
-            onClick={() => history.push('/preferences')}
-          />
+          <MenuItem text={<T id={'keyboard_shortcuts'} />} onClick={onKeyboardShortcut} />
+          <MenuItem text={<T id={'preferences'} />} onClick={() => history.push('/preferences')} />
           <MenuItem text={<T id={'logout'} />} onClick={onClickLogout} />
         </Menu>
       }
       position={Position.BOTTOM}
     >
       <Button>
-        <div className="user-text">
-          {firstLettersArgs(user.first_name, user.last_name)}
-        </div>
+        <div className="user-text">{firstLettersArgs(user.first_name, user.last_name)}</div>
       </Button>
     </Popover>
   );
 }
-export default compose(
-  withDialogActions,
-)(DashboardTopbarUser);
+export default compose(withDialogActions)(DashboardTopbarUser);
diff --git a/packages/webapp/src/components/Datatable/Cells.tsx b/packages/webapp/src/components/Datatable/Cells.tsx
index 6cc6f8083..327068015 100644
--- a/packages/webapp/src/components/Datatable/Cells.tsx
+++ b/packages/webapp/src/components/Datatable/Cells.tsx
@@ -2,5 +2,5 @@
 import React from 'react';
 
 export function CellTextSpan({ cell: { value } }) {
-  return (<span class="cell-text">{ value }</span>)
+  return <span className="cell-text">{value}</span>;
 }
diff --git a/packages/webapp/src/components/Datatable/Pagination.tsx b/packages/webapp/src/components/Datatable/Pagination.tsx
index 2dd1186ba..5602a9619 100644
--- a/packages/webapp/src/components/Datatable/Pagination.tsx
+++ b/packages/webapp/src/components/Datatable/Pagination.tsx
@@ -40,9 +40,7 @@ const getState = ({ currentPage, size, total }) => {
       endPage = currentPage + halfVisibleItems - 1;
     }
   }
-  const pages = [...Array(endPage + 1 - startPage).keys()].map(
-    (i) => startPage + i,
-  );
+  const pages = [...Array(endPage + 1 - startPage).keys()].map((i) => startPage + i);
 
   // Too large or small currentPage
   let correctCurrentpage = currentPage;
@@ -91,11 +89,7 @@ export function Pagination({
   onPageChange,
   onPageSizeChange,
 }) {
-  const [state, dispatch] = useReducer(
-    reducer,
-    { currentPage, total, size },
-    getState,
-  );
+  const [state, dispatch] = useReducer(reducer, { currentPage, total, size }, getState);
 
   useEffect(() => {
     dispatch({
@@ -107,8 +101,8 @@ export function Pagination({
   }, [total, size, currentPage]);
 
   return (
-    <div class="pagination">
-      <div class="pagination__buttons-group">
+    <div className="pagination">
+      <div className="pagination__buttons-group">
         <ButtonGroup>
           <Button
             disabled={state.currentPage <= 1}
@@ -139,13 +133,9 @@ export function Pagination({
                 onPageChange({ page, pageSize });
               }}
               minimal={true}
-              className={classNames(
-                'pagination__item',
-                'pagination__item--page',
-                {
-                  'is-active': state.currentPage === page,
-                },
-              )}
+              className={classNames('pagination__item', 'pagination__item--page', {
+                'is-active': state.currentPage === page,
+              })}
             >
               {page}
             </Button>
@@ -171,8 +161,8 @@ export function Pagination({
         </ButtonGroup>
       </div>
 
-      <div class="pagination__controls">
-        <div class="pagination__goto-control">
+      <div className="pagination__controls">
+        <div className="pagination__goto-control">
           Go to
           <HTMLSelect
             minimal={true}
@@ -188,7 +178,7 @@ export function Pagination({
           />
         </div>
 
-        <div class="pagination__pagesize-control">
+        <div className="pagination__pagesize-control">
           <T id={'page_size'} />
           <HTMLSelect
             minimal={true}
@@ -205,7 +195,7 @@ export function Pagination({
         </div>
       </div>
 
-      <div class="pagination__info">
+      <div className="pagination__info">
         {intl.get('showing_current_page_to_total', {
           currentPage: state.currentPage,
           totalPages: state.totalPages,
diff --git a/packages/webapp/src/components/Datatable/TableBody.tsx b/packages/webapp/src/components/Datatable/TableBody.tsx
index ef6f87df7..8ccd21795 100644
--- a/packages/webapp/src/components/Datatable/TableBody.tsx
+++ b/packages/webapp/src/components/Datatable/TableBody.tsx
@@ -1,11 +1,10 @@
 // @ts-nocheck
 
-
 export default function TableBody({}) {
   return (
     <ScrollSyncPane>
       <div {...getTableBodyProps()} className="tbody">
-        <div class="tbody-inner" style={{ minWidth: totalColumnsWidth }}></div>
+        <div className="tbody-inner" style={{ minWidth: totalColumnsWidth }}></div>
       </div>
     </ScrollSyncPane>
   );
diff --git a/packages/webapp/src/components/Datatable/TableFooter.tsx b/packages/webapp/src/components/Datatable/TableFooter.tsx
index a3dc711a3..072bbf50b 100644
--- a/packages/webapp/src/components/Datatable/TableFooter.tsx
+++ b/packages/webapp/src/components/Datatable/TableFooter.tsx
@@ -13,10 +13,12 @@ export default function TableFooter() {
   } = useContext(TableContext);
 
   // Can't contiunue if the footer is disabled.
-  if (!footer) { return null; }
-  
+  if (!footer) {
+    return null;
+  }
+
   return (
-    <div class="tfooter">
+    <div className="tfooter">
       {footerGroups.map((group) => (
         <div {...group.getFooterGroupProps({ className: 'tr' })}>
           {group.headers.map((column) => (
@@ -25,9 +27,7 @@ export default function TableFooter() {
                 className: classNames(column.className || '', 'td'),
               })}
             >
-              <div className={'cell-inner'}>
-                {column.render('Footer')}
-              </div>
+              <div className={'cell-inner'}>{column.render('Footer')}</div>
             </div>
           ))}
         </div>
diff --git a/packages/webapp/src/components/Datatable/TableHeader.tsx b/packages/webapp/src/components/Datatable/TableHeader.tsx
index 8d28c3b59..6eb2d4fbc 100644
--- a/packages/webapp/src/components/Datatable/TableHeader.tsx
+++ b/packages/webapp/src/components/Datatable/TableHeader.tsx
@@ -53,11 +53,8 @@ function TableHeaderCell({ column, index }) {
       </div>
 
       {column.canResize && (
-        <div
-          {...column.getResizerProps()}
-          className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
-        >
-          <div class="inner-resizer" />
+        <div {...column.getResizerProps()} className={`resizer ${column.isResizing ? 'isResizing' : ''}`}>
+          <div className="inner-resizer" />
         </div>
       )}
     </div>
@@ -80,12 +77,7 @@ function TableHeaderGroup({ headerGroup }) {
 export default function TableHeader() {
   const {
     table: { headerGroups, page },
-    props: {
-      TableHeaderSkeletonRenderer,
-      headerLoading,
-      progressBarLoading,
-      hideTableHeader,
-    },
+    props: { TableHeaderSkeletonRenderer, headerLoading, progressBarLoading, hideTableHeader },
   } = useContext(TableContext);
 
   // Can't contiunue if the thead is disabled.
diff --git a/packages/webapp/src/components/Datatable/TableHeaderSkeleton.tsx b/packages/webapp/src/components/Datatable/TableHeaderSkeleton.tsx
index 90e829825..fd0af3b87 100644
--- a/packages/webapp/src/components/Datatable/TableHeaderSkeleton.tsx
+++ b/packages/webapp/src/components/Datatable/TableHeaderSkeleton.tsx
@@ -33,7 +33,7 @@ export function TableSkeletonHeader({}) {
   } = useContext(TableContext);
 
   return (
-    <div class="thead">
+    <div className="thead">
       {headerGroups.map((headerGroup) => (
         <div
           {...headerGroup.getHeaderGroupProps({
diff --git a/packages/webapp/src/components/Datatable/TableIndeterminateCheckboxRow.tsx b/packages/webapp/src/components/Datatable/TableIndeterminateCheckboxRow.tsx
index 986708580..4655994cd 100644
--- a/packages/webapp/src/components/Datatable/TableIndeterminateCheckboxRow.tsx
+++ b/packages/webapp/src/components/Datatable/TableIndeterminateCheckboxRow.tsx
@@ -4,7 +4,7 @@ import { Checkbox } from '@blueprintjs/core';
 import { CellType } from '@/constants';
 export default function TableIndeterminateCheckboxRow({ row }) {
   return (
-    <div class="selection-checkbox">
+    <div className="selection-checkbox">
       <Checkbox {...row.getToggleRowSelectedProps()} />
     </div>
   );
diff --git a/packages/webapp/src/components/Datatable/TableLoading.tsx b/packages/webapp/src/components/Datatable/TableLoading.tsx
index f94d1765d..680c2032f 100644
--- a/packages/webapp/src/components/Datatable/TableLoading.tsx
+++ b/packages/webapp/src/components/Datatable/TableLoading.tsx
@@ -5,12 +5,10 @@ import { Spinner } from '@blueprintjs/core';
 /**
  * Table loading component.
  */
-export default function TableLoading({
-  spinnerProps
-}) {
+export default function TableLoading({ spinnerProps }) {
   return (
-    <div class="loading">
+    <div className="loading">
       <Spinner {...spinnerProps} />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/webapp/src/components/Datatable/TableNoResultsRow.tsx b/packages/webapp/src/components/Datatable/TableNoResultsRow.tsx
index 8a718d29e..cd369e097 100644
--- a/packages/webapp/src/components/Datatable/TableNoResultsRow.tsx
+++ b/packages/webapp/src/components/Datatable/TableNoResultsRow.tsx
@@ -11,12 +11,11 @@ export default function TableNoResultsRow() {
     props: { noResults },
   } = useContext(TableContext);
 
-  const noResultText =
-    noResults || intl.get('there_is_no_results_in_the_table');
+  const noResultText = noResults || intl.get('there_is_no_results_in_the_table');
 
   return (
     <div className={'tr no-results'}>
-      <div class="td">{noResultText}</div>
+      <div className="td">{noResultText}</div>
     </div>
   );
 }
diff --git a/packages/webapp/src/components/Datatable/TableRow.tsx b/packages/webapp/src/components/Datatable/TableRow.tsx
index 148ff3248..af2118797 100644
--- a/packages/webapp/src/components/Datatable/TableRow.tsx
+++ b/packages/webapp/src/components/Datatable/TableRow.tsx
@@ -17,12 +17,7 @@ function TableRowContextMenu({ children, row }) {
     table,
   } = useContext(TableContext);
 
-  const [
-    bindMenu,
-    bindMenuItem,
-    useContextTrigger,
-    { coords, setVisible, isVisible },
-  ] = useContextMenu();
+  const [bindMenu, bindMenuItem, useContextTrigger, { coords, setVisible, isVisible }] = useContextMenu();
 
   const [bindTrigger] = useContextTrigger({
     collect: () => 'Title',
@@ -33,15 +28,10 @@ function TableRowContextMenu({ children, row }) {
   }, [setVisible]);
 
   return (
-    <div class="tr-context" {...bindTrigger}>
+    <div className="tr-context" {...bindTrigger}>
       {children}
 
-      <ContextMenu
-        bindMenu={bindMenu}
-        isOpen={isVisible}
-        coords={coords}
-        onClosed={handleClose}
-      >
+      <ContextMenu bindMenu={bindMenu} isOpen={isVisible} coords={coords} onClosed={handleClose}>
         <ContextMenuContent {...table} row={row} />
       </ContextMenu>
     </div>
@@ -53,11 +43,7 @@ function TableRowContextMenu({ children, row }) {
  */
 export default function TableRow({ row, className, style }) {
   const {
-    props: {
-      TableCellRenderer,
-      rowClassNames,
-      ContextMenu: ContextMenuContent,
-    },
+    props: { TableCellRenderer, rowClassNames, ContextMenu: ContextMenuContent },
   } = useContext(TableContext);
 
   return (
@@ -72,18 +58,9 @@ export default function TableRow({ row, className, style }) {
         style,
       })}
     >
-      <ConditionalWrapper
-        condition={ContextMenuContent}
-        wrapper={TableRowContextMenu}
-        row={row}
-      >
+      <ConditionalWrapper condition={ContextMenuContent} wrapper={TableRowContextMenu} row={row}>
         {row.cells.map((cell, index) => (
-          <TableCellRenderer
-            key={index}
-            cell={cell}
-            row={row}
-            index={index + 1}
-          />
+          <TableCellRenderer key={index} cell={cell} row={row} index={index + 1} />
         ))}
       </ConditionalWrapper>
     </div>
diff --git a/packages/webapp/src/components/Datatable/TableTBody.tsx b/packages/webapp/src/components/Datatable/TableTBody.tsx
index a36b0c0c6..bfc23b7a0 100644
--- a/packages/webapp/src/components/Datatable/TableTBody.tsx
+++ b/packages/webapp/src/components/Datatable/TableTBody.tsx
@@ -3,19 +3,15 @@ import React, { useContext } from 'react';
 import { ScrollSyncPane } from 'react-scroll-sync';
 import TableContext from './TableContext';
 
-export default function TableTBody({
-  children
-}) {
+export default function TableTBody({ children }) {
   const {
-    table: { getTableBodyProps }
+    table: { getTableBodyProps },
   } = useContext(TableContext);
 
   return (
     <ScrollSyncPane>
       <div {...getTableBodyProps()} className="tbody">
-        <div class="tbody-inner">
-          { children }
-        </div>
+        <div className="tbody-inner">{children}</div>
       </div>
     </ScrollSyncPane>
   );
diff --git a/packages/webapp/src/components/Details/index.tsx b/packages/webapp/src/components/Details/index.tsx
index 9879fc7c0..2dfb5ba17 100644
--- a/packages/webapp/src/components/Details/index.tsx
+++ b/packages/webapp/src/components/Details/index.tsx
@@ -15,13 +15,7 @@ const useDetailsMenuContext = () => React.useContext(DetailsMenuContext);
 /**
  * Details menu.
  */
-export function DetailsMenu({
-  children,
-  direction = DIRECTION.VERTICAL,
-  textAlign,
-  minLabelSize,
-  className,
-}) {
+export function DetailsMenu({ children, direction = DIRECTION.VERTICAL, textAlign, minLabelSize, className }) {
   return (
     <div
       className={classNames(
@@ -34,9 +28,7 @@ export function DetailsMenu({
         className,
       )}
     >
-      <DetailsMenuContext.Provider value={{ minLabelSize }}>
-        {children}
-      </DetailsMenuContext.Provider>
+      <DetailsMenuContext.Provider value={{ minLabelSize }}>{children}</DetailsMenuContext.Provider>
     </div>
   );
 }
@@ -62,7 +54,7 @@ export function DetailItem({ label, children, name, align, className }) {
         style={{
           'min-width': minLabelSize,
         }}
-        class="detail-item__label"
+        className="detail-item__label"
       >
         {label}
       </div>
diff --git a/packages/webapp/src/components/Dragzone/index.tsx b/packages/webapp/src/components/Dragzone/index.tsx
index e964fb144..d27508880 100644
--- a/packages/webapp/src/components/Dragzone/index.tsx
+++ b/packages/webapp/src/components/Dragzone/index.tsx
@@ -71,7 +71,7 @@ export function Dragzone({
 
   return (
     <section className={classNames('dropzone-container', className)}>
-      {hint && <div class="dropzone-hint">{hint}</div>}
+      {hint && <div className="dropzone-hint">{hint}</div>}
 
       <div {...getRootProps({ className: 'dropzone' })}>
         <input {...getInputProps()} />
diff --git a/packages/webapp/src/components/Forms/InputPrepend.tsx b/packages/webapp/src/components/Forms/InputPrepend.tsx
index f6ff25202..47519ba39 100644
--- a/packages/webapp/src/components/Forms/InputPrepend.tsx
+++ b/packages/webapp/src/components/Forms/InputPrepend.tsx
@@ -2,9 +2,5 @@
 import React from 'react';
 
 export default function InputPrepend({ children }) {
-  return (
-    <div class="input-prepend">
-      { children }
-    </div>
-  );
-}
\ No newline at end of file
+  return <div className="input-prepend">{children}</div>;
+}
diff --git a/packages/webapp/src/components/Forms/InputPrependButton.tsx b/packages/webapp/src/components/Forms/InputPrependButton.tsx
index 5d8255383..5dbfe2098 100644
--- a/packages/webapp/src/components/Forms/InputPrependButton.tsx
+++ b/packages/webapp/src/components/Forms/InputPrependButton.tsx
@@ -3,18 +3,9 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { Button, Tooltip, Classes } from '@blueprintjs/core';
 
-export function InputPrependButton({
-  buttonProps = {},
-  tooltip = false,
-  tooltipProps = {},
-}) {
+export function InputPrependButton({ buttonProps = {}, tooltip = false, tooltipProps = {} }) {
   const appendButton = useMemo(
-    () => (
-      <Button
-        className={classNames('input-prepend__button', Classes.SMALL)}
-        {...buttonProps}
-      />
-    ),
+    () => <Button className={classNames('input-prepend__button', Classes.SMALL)} {...buttonProps} />,
     [buttonProps],
   );
 
@@ -23,9 +14,5 @@ export function InputPrependButton({
     [tooltipProps, appendButton],
   );
 
-  return (
-    <div class="input-prepend">
-      {tooltip ? appendButtonWithTooltip : appendButton}
-    </div>
-  );
+  return <div className="input-prepend">{tooltip ? appendButtonWithTooltip : appendButton}</div>;
 }
diff --git a/packages/webapp/src/components/Forms/InputPrependText.tsx b/packages/webapp/src/components/Forms/InputPrependText.tsx
index a1129a884..b21ade882 100644
--- a/packages/webapp/src/components/Forms/InputPrependText.tsx
+++ b/packages/webapp/src/components/Forms/InputPrependText.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 
 export function InputPrependText({ text, children }) {
   return (
-    <div class="input-group-prepend">
-      <span class="input-group-text">{text}</span>
+    <div className="input-group-prepend">
+      <span className="input-group-text">{text}</span>
     </div>
   );
 }
diff --git a/packages/webapp/src/components/Guards/EnsureUserEmailNotVerified.tsx b/packages/webapp/src/components/Guards/EnsureUserEmailNotVerified.tsx
index ac35b649f..c9fc95022 100644
--- a/packages/webapp/src/components/Guards/EnsureUserEmailNotVerified.tsx
+++ b/packages/webapp/src/components/Guards/EnsureUserEmailNotVerified.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { Redirect } from 'react-router-dom';
 import { useAuthUserVerified } from '@/hooks/state';
+import React, { useEffect } from 'react';
 
 interface EnsureUserEmailNotVerifiedProps {
   children: React.ReactNode;
@@ -9,16 +8,21 @@ interface EnsureUserEmailNotVerifiedProps {
 
 /**
  * Higher Order Component to ensure that the user's email is not verified.
- * If is verified, redirects to the inner setup page.
+ * If the email is verified, redirects to the specified page.
+ * TODO: Modernize this component to use react-router-dom for navigation later.
  */
-export function EnsureUserEmailNotVerified({
-  children,
-  redirectTo = '/',
-}: EnsureUserEmailNotVerifiedProps) {
+export function EnsureUserEmailNotVerified({ children, redirectTo = '/' }: EnsureUserEmailNotVerifiedProps) {
   const isAuthVerified = useAuthUserVerified();
 
-  if (isAuthVerified) {
-    return <Redirect to={{ pathname: redirectTo }} />;
-  }
+  useEffect(() => {
+    // Check if the user's email is verified
+    if (isAuthVerified) {
+      // Directly manipulate the window location for redirection
+      window.location.href = redirectTo;
+      // upgrade to react-router-dom later when v6+
+    }
+  }, [isAuthVerified, redirectTo]);
+
+  // Render children if no redirection is necessary
   return <>{children}</>;
 }
diff --git a/packages/webapp/src/components/Guards/EnsureUserEmailVerified.tsx b/packages/webapp/src/components/Guards/EnsureUserEmailVerified.tsx
index f24d93533..164f2c44f 100644
--- a/packages/webapp/src/components/Guards/EnsureUserEmailVerified.tsx
+++ b/packages/webapp/src/components/Guards/EnsureUserEmailVerified.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { Redirect } from 'react-router-dom';
 import { useAuthUserVerified } from '@/hooks/state';
+import React, { useEffect } from 'react';
 
 interface EnsureUserEmailVerifiedProps {
   children: React.ReactNode;
@@ -10,6 +9,7 @@ interface EnsureUserEmailVerifiedProps {
 /**
  * Higher Order Component to ensure that the user's email is verified.
  * If not verified, redirects to the email verification page.
+ * TODO: Modernize this component to use react-router-dom for navigation later.
  */
 export function EnsureUserEmailVerified({
   children,
@@ -17,8 +17,14 @@ export function EnsureUserEmailVerified({
 }: EnsureUserEmailVerifiedProps) {
   const isAuthVerified = useAuthUserVerified();
 
-  if (!isAuthVerified) {
-    return <Redirect to={{ pathname: redirectTo }} />;
-  }
+  useEffect(() => {
+    if (!isAuthVerified) {
+      // Directly manipulate the window location for redirection
+      window.location.href = redirectTo;
+      // upgrade to react-router-dom later when v6+
+    }
+  }, [isAuthVerified, redirectTo]);
+
+  // Render children if no redirection is necessary
   return <>{children}</>;
 }
diff --git a/packages/webapp/src/components/Hint/FieldHint.tsx b/packages/webapp/src/components/Hint/FieldHint.tsx
index 796600a85..53730a57a 100644
--- a/packages/webapp/src/components/Hint/FieldHint.tsx
+++ b/packages/webapp/src/components/Hint/FieldHint.tsx
@@ -16,14 +16,9 @@ interface HintProps {
 /**
  * Field hint.
  */
-export function FieldHint({
-  content,
-  position,
-  iconSize = 12,
-  tooltipProps,
-}: HintProps) {
+export function FieldHint({ content, position, iconSize = 12, tooltipProps }: HintProps) {
   return (
-    <span class="hint">
+    <span className="hint">
       <Tooltip content={content} position={position} {...tooltipProps}>
         <Icon icon="info-circle" iconSize={iconSize} />
       </Tooltip>
diff --git a/packages/webapp/src/components/Hint/FieldRequiredHint.tsx b/packages/webapp/src/components/Hint/FieldRequiredHint.tsx
index 896786595..6a0bfd73a 100644
--- a/packages/webapp/src/components/Hint/FieldRequiredHint.tsx
+++ b/packages/webapp/src/components/Hint/FieldRequiredHint.tsx
@@ -2,5 +2,5 @@
 import React from 'react';
 
 export function FieldRequiredHint() {
-  return <span class="required">*</span>;
+  return <span className="required">*</span>;
 }
diff --git a/packages/webapp/src/components/Hint/RequiredHint.tsx b/packages/webapp/src/components/Hint/RequiredHint.tsx
index 7cd208dd0..00a4b4ee0 100644
--- a/packages/webapp/src/components/Hint/RequiredHint.tsx
+++ b/packages/webapp/src/components/Hint/RequiredHint.tsx
@@ -2,5 +2,5 @@
 import React from 'react';
 
 export function RequiredHint() {
-  return <span class="required">*</span>;
+  return <span className="required">*</span>;
 }
diff --git a/packages/webapp/src/components/Icon/index.tsx b/packages/webapp/src/components/Icon/index.tsx
index beb5c9ba2..430a33e4a 100644
--- a/packages/webapp/src/components/Icon/index.tsx
+++ b/packages/webapp/src/components/Icon/index.tsx
@@ -15,11 +15,11 @@
  * limitations under the License.
  */
 
-import classNames from 'classnames';
-import * as React from 'react';
-import { Classes, Props } from '@blueprintjs/core';
 import IconSvgPaths from '@/static/json/icons';
+import { Classes, Props } from '@blueprintjs/core';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import * as React from 'react';
 export interface IconProps extends Props {
   color?: string;
   htmlTitle?: string;
@@ -28,6 +28,8 @@ export interface IconProps extends Props {
   style?: object;
   tagName?: keyof JSX.IntrinsicElements;
   title?: string;
+  height?: number;
+  width?: number;
 }
 
 export class Icon extends React.Component<IconProps> {
@@ -58,8 +60,7 @@ export class Icon extends React.Component<IconProps> {
     } = this.props;
 
     // choose which pixel grid is most appropriate for given icon size
-    const pixelGridSize =
-      iconSize >= Icon.SIZE_LARGE ? Icon.SIZE_LARGE : Icon.SIZE_STANDARD;
+    const pixelGridSize = iconSize >= Icon.SIZE_LARGE ? Icon.SIZE_LARGE : Icon.SIZE_STANDARD;
     const iconPath = this.getSvgPath(icon);
 
     if (!iconPath) {
@@ -69,12 +70,7 @@ export class Icon extends React.Component<IconProps> {
     // render path elements, or nothing if icon name is unknown.
     const paths = this.renderSvgPaths(iconPath.path);
 
-    const classes = classNames(
-      Classes.ICON,
-      Classes.iconClass(icon),
-      Classes.intentClass(intent),
-      className,
-    );
+    const classes = classNames(Classes.ICON, Classes.iconClass(icon), Classes.intentClass(intent), className);
     const viewBox = iconPath.viewBox;
 
     const computedHeight = height || iconSize;
@@ -87,13 +83,7 @@ export class Icon extends React.Component<IconProps> {
         className: classes,
         title: htmlTitle,
       },
-      <svg
-        fill={color}
-        data-icon={icon}
-        width={computedWidth}
-        height={computedHeight}
-        viewBox={viewBox}
-      >
+      <svg fill={color} data-icon={icon} width={computedWidth} height={computedHeight} viewBox={viewBox}>
         {title && <desc>{title}</desc>}
         {paths}
       </svg>,
@@ -112,9 +102,7 @@ export class Icon extends React.Component<IconProps> {
     if (pathStrings == null) {
       return null;
     }
-    return pathStrings.map((d, i) => (
-      <path key={i} d={d} className={`path-${i + 1}`} fillRule="evenodd" />
-    ));
+    return pathStrings.map((d, i) => <path key={i} d={d} className={`path-${i + 1}`} fillRule="evenodd" />);
   }
 }
 
diff --git a/packages/webapp/src/components/Indicator/LoadingIndicator.tsx b/packages/webapp/src/components/Indicator/LoadingIndicator.tsx
index 590d8e298..a5fe9fbad 100644
--- a/packages/webapp/src/components/Indicator/LoadingIndicator.tsx
+++ b/packages/webapp/src/components/Indicator/LoadingIndicator.tsx
@@ -2,12 +2,7 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { Spinner } from '@blueprintjs/core';
 
-export function LoadingIndicator({
-  loading,
-  spinnerSize = 40,
-  children,
-  mount = false,
-}) {
+export function LoadingIndicator({ loading, spinnerSize = 40, children, mount = false }) {
   const [rendered, setRendered] = useState(mount);
 
   useEffect(() => {
@@ -22,7 +17,7 @@ export function LoadingIndicator({
 
   const loadingComponent = useMemo(
     () => (
-      <div class="dashboard__loading-indicator">
+      <div className="dashboard__loading-indicator">
         <Spinner size={spinnerSize} value={null} />
       </div>
     ),
@@ -38,10 +33,7 @@ export function LoadingIndicator({
 
   // Render children component or not in loading and in mount mode rendering
   // anyway.
-  const renderComponent = useMemo(
-    () => (!loading || mount ? renderChildren : null),
-    [renderChildren, loading, mount],
-  );
+  const renderComponent = useMemo(() => (!loading || mount ? renderChildren : null), [renderChildren, loading, mount]);
   const maybeRenderComponent = rendered && children && renderComponent;
   const maybeRenderLoadingSpinner = loading && loadingComponent;
 
diff --git a/packages/webapp/src/components/MaterialProgressBar/index.tsx b/packages/webapp/src/components/MaterialProgressBar/index.tsx
index 30930bdf2..661c671d6 100644
--- a/packages/webapp/src/components/MaterialProgressBar/index.tsx
+++ b/packages/webapp/src/components/MaterialProgressBar/index.tsx
@@ -5,9 +5,9 @@ import '@/style/components/MaterialProgressBar.scss';
 
 export function MaterialProgressBar() {
   return (
-    <div class="progress-container">
-      <div class="progress-materializecss">
-        <div class="indeterminate"></div>
+    <div className="progress-container">
+      <div className="progress-materializecss">
+        <div className="indeterminate"></div>
       </div>
     </div>
   );
diff --git a/packages/webapp/src/components/Menu/MenuItemLabel.tsx b/packages/webapp/src/components/Menu/MenuItemLabel.tsx
index 9b1fb2d2f..22a647842 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="bp4-menu-item-labeler">{text}</span>;
+  return <span className="bp4-menu-item-labeler">{text}</span>;
 }
diff --git a/packages/webapp/src/components/PageForm/PageFormBigNumber.tsx b/packages/webapp/src/components/PageForm/PageFormBigNumber.tsx
index 5508b8fdb..ae6333087 100644
--- a/packages/webapp/src/components/PageForm/PageFormBigNumber.tsx
+++ b/packages/webapp/src/components/PageForm/PageFormBigNumber.tsx
@@ -9,9 +9,9 @@ import '@/style/components/BigAmount.scss';
 export function PageFormBigNumber({ label, amount, currencyCode }) {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
-      <div class="big-amount">
-        <span class="big-amount__label">{label}</span>
-        <h1 class="big-amount__number">
+      <div className="big-amount">
+        <span className="big-amount__label">{label}</span>
+        <h1 className="big-amount__number">
           <Money amount={amount} currency={currencyCode} />
         </h1>
       </div>
diff --git a/packages/webapp/src/components/Postbox/index.tsx b/packages/webapp/src/components/Postbox/index.tsx
index 8a3b26596..d6251b36a 100644
--- a/packages/webapp/src/components/Postbox/index.tsx
+++ b/packages/webapp/src/components/Postbox/index.tsx
@@ -6,12 +6,7 @@ import classNames from 'classnames';
 /**
  * Postbox.
  */
-export function Postbox({
-  defaultOpen = true,
-  toggable = true,
-  title,
-  children,
-}) {
+export function Postbox({ defaultOpen = true, toggable = true, title, children }) {
   const [isOpen, setIsOpen] = useState(defaultOpen);
 
   // Handle the title click.
@@ -23,18 +18,18 @@ export function Postbox({
 
   return (
     <div
-      class={classNames('postbox', {
+      className={classNames('postbox', {
         'is-toggable': toggable,
       })}
     >
-      <div class="postbox__header" onClick={handleTitleClick}>
-        <h5 class="postbox__title">{title}</h5>
+      <div className="postbox__header" onClick={handleTitleClick}>
+        <h5 className="postbox__title">{title}</h5>
 
-        <span class="postbox__toggle-indicator"></span>
+        <span className="postbox__toggle-indicator"></span>
       </div>
-      <div class="postbox__content">
+      <div className="postbox__content">
         <Collapse isOpen={isOpen}>
-          <div class="postbox__content-inner">{children}</div>
+          <div className="postbox__content-inner">{children}</div>
         </Collapse>
       </div>
     </div>
diff --git a/packages/webapp/src/components/Preferences/PreferencesSidebar.tsx b/packages/webapp/src/components/Preferences/PreferencesSidebar.tsx
index 4eeb08999..29c2a7c93 100644
--- a/packages/webapp/src/components/Preferences/PreferencesSidebar.tsx
+++ b/packages/webapp/src/components/Preferences/PreferencesSidebar.tsx
@@ -33,7 +33,7 @@ export default function PreferencesSidebar() {
 
   return (
     <PreferencesSidebarContainer>
-      <div class="preferences-sidebar__head">
+      <div className="preferences-sidebar__head">
         <h2>{<T id={'preferences'} />}</h2>
       </div>
 
diff --git a/packages/webapp/src/components/Preferences/PreferencesSidebarContainer.tsx b/packages/webapp/src/components/Preferences/PreferencesSidebarContainer.tsx
index defc70f96..5b823e89f 100644
--- a/packages/webapp/src/components/Preferences/PreferencesSidebarContainer.tsx
+++ b/packages/webapp/src/components/Preferences/PreferencesSidebarContainer.tsx
@@ -6,15 +6,10 @@ import { CLASSES } from '@/constants/classes';
 
 export default function PreferencesSidebarContainer({ children }) {
   return (
-    <div
-      className={classNames(
-        CLASSES.PREFERENCES_PAGE_SIDEBAR,
-        CLASSES.PREFERENCES_SIDEBAR,
-      )}
-    >
-      <div class="preferences-sidebar__wrapper">
+    <div className={classNames(CLASSES.PREFERENCES_PAGE_SIDEBAR, CLASSES.PREFERENCES_SIDEBAR)}>
+      <div className="preferences-sidebar__wrapper">
         <Scrollbar noDefaultStyles={true}>
-          <div class="preferences-sidebar__inner">{children}</div>
+          <div className="preferences-sidebar__inner">{children}</div>
         </Scrollbar>
       </div>
     </div>
diff --git a/packages/webapp/src/components/Preferences/PreferencesTopbar.tsx b/packages/webapp/src/components/Preferences/PreferencesTopbar.tsx
index d46f4d1b0..60087c860 100644
--- a/packages/webapp/src/components/Preferences/PreferencesTopbar.tsx
+++ b/packages/webapp/src/components/Preferences/PreferencesTopbar.tsx
@@ -20,45 +20,26 @@ import '@/style/pages/Preferences/Topbar.scss';
  */
 function PreferencesTopbar({ preferencesPageTitle }) {
   return (
-    <div
-      className={classNames(
-        CLASSES.PREFERENCES_PAGE_TOPBAR,
-        CLASSES.PREFERENCES_TOPBAR,
-      )}
-    >
-      <div class="preferences-topbar__title">
+    <div className={classNames(CLASSES.PREFERENCES_PAGE_TOPBAR, CLASSES.PREFERENCES_TOPBAR)}>
+      <div className="preferences-topbar__title">
         <h2>{preferencesPageTitle}</h2>
       </div>
-      <div class="preferences-topbar__actions">
+      <div className="preferences-topbar__actions">
         <Route pathname="/preferences">
           <Switch>
             <Route exact path={'/preferences/users'} component={UsersActions} />
-            <Route
-              exact
-              path={'/preferences/currencies'}
-              component={CurrenciesActions}
-            />
-            <Route
-              exact
-              path={'/preferences/warehouses'}
-              component={WarehousesActions}
-            />
-            <Route
-              exact
-              path={'/preferences/branches'}
-              component={BranchesActions}
-            />
+            <Route exact path={'/preferences/currencies'} component={CurrenciesActions} />
+            <Route exact path={'/preferences/warehouses'} component={WarehousesActions} />
+            <Route exact path={'/preferences/branches'} component={BranchesActions} />
           </Switch>
         </Route>
       </div>
 
-      <div class="preferences-topbar__user">
+      <div className="preferences-topbar__user">
         <DashboardTopbarUser />
       </div>
     </div>
   );
 }
 
-export default compose(
-  withDashboard(({ preferencesPageTitle }) => ({ preferencesPageTitle })),
-)(PreferencesTopbar);
+export default compose(withDashboard(({ preferencesPageTitle }) => ({ preferencesPageTitle })))(PreferencesTopbar);
diff --git a/packages/webapp/src/components/TotalLines/index.tsx b/packages/webapp/src/components/TotalLines/index.tsx
index ae97abd45..036c548f5 100644
--- a/packages/webapp/src/components/TotalLines/index.tsx
+++ b/packages/webapp/src/components/TotalLines/index.tsx
@@ -13,18 +13,9 @@ export const TotalLineTextStyle = {
   Bold: 'Bold',
 };
 
-export function TotalLines({
-  children,
-  amountColWidth,
-  labelColWidth,
-  className,
-}) {
+export function TotalLines({ children, amountColWidth, labelColWidth, className }) {
   return (
-    <TotalLinesRoot
-      className={className}
-      amountColWidth={amountColWidth}
-      labelColWidth={labelColWidth}
-    >
+    <TotalLinesRoot className={className} amountColWidth={amountColWidth} labelColWidth={labelColWidth}>
       {children}
     </TotalLinesRoot>
   );
@@ -32,13 +23,9 @@ export function TotalLines({
 
 export function TotalLine({ title, value, borderStyle, textStyle, className }) {
   return (
-    <TotalLineRoot
-      borderStyle={borderStyle}
-      textStyle={textStyle}
-      className={className}
-    >
-      <div class="title">{title}</div>
-      <div class="amount">{value}</div>
+    <TotalLineRoot borderStyle={borderStyle} textStyle={textStyle} className={className}>
+      <div className="title">{title}</div>
+      <div className="amount">{value}</div>
     </TotalLineRoot>
   );
 }
diff --git a/packages/webapp/src/components/UniversalSearch/UniversalSearch.tsx b/packages/webapp/src/components/UniversalSearch/UniversalSearch.tsx
index 9d65ef565..0ff9c7795 100644
--- a/packages/webapp/src/components/UniversalSearch/UniversalSearch.tsx
+++ b/packages/webapp/src/components/UniversalSearch/UniversalSearch.tsx
@@ -3,22 +3,12 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import classNames from 'classnames';
 import { isUndefined } from 'lodash';
-import {
-  Overlay,
-  InputGroup,
-  Tag,
-  MenuItem,
-  Spinner,
-  Intent,
-} from '@blueprintjs/core';
+import { Overlay, InputGroup, Tag, MenuItem, Spinner, Intent } from '@blueprintjs/core';
 import { QueryList } from '@blueprintjs/select';
 import { CLASSES } from '@/constants/classes';
 
 import { Icon, If, ListSelect, FormattedMessage as T } from '@/components';
-import {
-  UniversalSearchProvider,
-  useUniversalSearchContext,
-} from './UniversalSearchProvider';
+import { UniversalSearchProvider, useUniversalSearchContext } from './UniversalSearchProvider';
 import { filterItemsByResourceType } from './utils';
 import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
 
@@ -26,8 +16,7 @@ import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
  * Universal search input action.
  */
 function UniversalSearchInputRightElements({ onSearchTypeChange }) {
-  const { isLoading, searchType, defaultSearchResource, searchTypeOptions } =
-    useUniversalSearchContext();
+  const { isLoading, searchType, defaultSearchResource, searchTypeOptions } = useUniversalSearchContext();
 
   // Handle search type option change.
   const handleSearchTypeChange = (option) => {
@@ -67,28 +56,20 @@ function UniversalSearchInputRightElements({ onSearchTypeChange }) {
  * Universal search query list.
  */
 function UniversalSearchQueryList(props) {
-  const { isOpen, isLoading, onSearchTypeChange, searchType, ...restProps } =
-    props;
+  const { isOpen, isLoading, onSearchTypeChange, searchType, ...restProps } = props;
 
   return (
     <QueryList
       {...restProps}
       initialContent={null}
       renderer={(listProps) => (
-        <UniversalSearchBar
-          isOpen={isOpen}
-          onSearchTypeChange={onSearchTypeChange}
-          {...listProps}
-        />
+        <UniversalSearchBar isOpen={isOpen} onSearchTypeChange={onSearchTypeChange} {...listProps} />
       )}
       noResults={
         !isLoading ? (
           <MenuItem disabled={true} text={<T id={'no_results'} />} />
         ) : (
-          <MenuItem
-            disabled={true}
-            text={<T id={'universal_search.loading'} />}
-          />
+          <MenuItem disabled={true} text={<T id={'universal_search.loading'} />} />
         )
       }
     />
@@ -103,12 +84,11 @@ function UniversalQuerySearchActions() {
     <div className={classNames(CLASSES.UNIVERSAL_SEARCH_ACTIONS)}>
       <div className={classNames(CLASSES.UNIVERSAL_SEARCH_ACTION_SELECT)}>
         <Tag>ENTER</Tag>
-        <span class={'text'}>{intl.get('universal_search.enter_text')}</span>
+        <span className={'text'}>{intl.get('universal_search.enter_text')}</span>
       </div>
 
       <div className={classNames(CLASSES.UNIVERSAL_SEARCH_ACTION_CLOSE)}>
-        <Tag>ESC</Tag>{' '}
-        <span class={'text'}>{intl.get('universal_search.close_text')}</span>
+        <Tag>ESC</Tag> <span className={'text'}>{intl.get('universal_search.close_text')}</span>
       </div>
 
       <div className={classNames(CLASSES.UNIVERSAL_SEARCH_ACTION_ARROWS)}>
@@ -118,7 +98,7 @@ function UniversalQuerySearchActions() {
         <Tag>
           <Icon icon={'arrow-down-24'} iconSize={16} />
         </Tag>
-        <span class="text">{intl.get('universal_seach.navigate_text')}</span>
+        <span className="text">{intl.get('universal_seach.navigate_text')}</span>
       </div>
     </div>
   );
@@ -129,29 +109,17 @@ function UniversalQuerySearchActions() {
  */
 function UniversalSearchBar({ isOpen, onSearchTypeChange, ...listProps }) {
   const { handleKeyDown, handleKeyUp } = listProps;
-  const handlers = isOpen
-    ? { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }
-    : {};
+  const handlers = isOpen ? { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp } : {};
 
   return (
-    <div
-      className={classNames(
-        CLASSES.UNIVERSAL_SEARCH_OMNIBAR,
-        listProps.className,
-      )}
-      {...handlers}
-    >
+    <div className={classNames(CLASSES.UNIVERSAL_SEARCH_OMNIBAR, listProps.className)} {...handlers}>
       <InputGroup
         large={true}
         leftIcon={<Icon icon={'universal-search'} iconSize={20} />}
         placeholder={intl.get('universal_search.placeholder')}
         onChange={listProps.handleQueryChange}
         value={listProps.query}
-        rightElement={
-          <UniversalSearchInputRightElements
-            onSearchTypeChange={onSearchTypeChange}
-          />
-        }
+        rightElement={<UniversalSearchInputRightElements onSearchTypeChange={onSearchTypeChange} />}
         autoFocus={true}
       />
       {listProps.itemList}
@@ -175,15 +143,10 @@ export function UniversalSearch({
   ...queryListProps
 }) {
   // Search type state.
-  const [searchType, setSearchType] = React.useState(
-    defaultSearchResource || RESOURCES_TYPES.CUSTOMER,
-  );
+  const [searchType, setSearchType] = React.useState(defaultSearchResource || RESOURCES_TYPES.CUSTOMER);
   // Handle search resource type controlled mode.
   React.useEffect(() => {
-    if (
-      !isUndefined(searchResource) &&
-      searchResource !== defaultSearchResource
-    ) {
+    if (!isUndefined(searchResource) && searchResource !== defaultSearchResource) {
       setSearchType(searchResource);
     }
   }, [searchResource, defaultSearchResource]);
diff --git a/packages/webapp/src/containers/Accounts/components.tsx b/packages/webapp/src/containers/Accounts/components.tsx
index 5b9d2b31b..9f7507ac9 100644
--- a/packages/webapp/src/containers/Accounts/components.tsx
+++ b/packages/webapp/src/containers/Accounts/components.tsx
@@ -1,15 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import {
-  Position,
-  Classes,
-  Tooltip,
-  MenuItem,
-  Menu,
-  MenuDivider,
-  Intent,
-} from '@blueprintjs/core';
+import { Position, Classes, Tooltip, MenuItem, Menu, MenuDivider, Intent } from '@blueprintjs/core';
 import { Can, Icon, If } from '@/components';
 import { safeCallback } from '@/utils';
 import { AbilitySubject, AccountAction } from '@/constants/abilityOption';
@@ -113,7 +105,7 @@ export function BalanceCell({ cell }) {
       {/* <Money amount={account.amount} currency={account.currency_code} /> */}
     </span>
   ) : (
-    <span class="placeholder">—</span>
+    <span className="placeholder">—</span>
   );
 }
 
@@ -126,6 +118,6 @@ export function BankBalanceCell({ cell }) {
   return account.amount !== null ? (
     <span>{account.bank_balance_formatted}</span>
   ) : (
-    <span class="placeholder">—</span>
+    <span className="placeholder">—</span>
   );
 }
diff --git a/packages/webapp/src/containers/Accounts/utils.tsx b/packages/webapp/src/containers/Accounts/utils.tsx
index 6e535fd28..17e565032 100644
--- a/packages/webapp/src/containers/Accounts/utils.tsx
+++ b/packages/webapp/src/containers/Accounts/utils.tsx
@@ -13,9 +13,9 @@ import { transformTableStateToQuery, isBlank } from '@/utils';
 export const accountNameAccessor = (account) => {
   return (
     <span>
-      <span class={'account-name'}>{account.name}</span>
+      <span className={'account-name'}>{account.name}</span>
       <If condition={account.description}>
-        <span class={'account-desc'}>{account.description}</span>
+        <span className={'account-desc'}>{account.description}</span>
       </If>
     </span>
   );
diff --git a/packages/webapp/src/containers/CashFlow/CashFlowAccounts/components.tsx b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/components.tsx
index 1bbf58321..a61ea8ee9 100644
--- a/packages/webapp/src/containers/CashFlow/CashFlowAccounts/components.tsx
+++ b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/components.tsx
@@ -22,11 +22,7 @@ export const AccountCodeAccessor = (row) =>
 export const BalanceCell = ({ cell }) => {
   const account = cell.row.original;
 
-  return account.amount !== null ? (
-    <span>{account.formatted_amount}</span>
-  ) : (
-    <span class="placeholder">—</span>
-  );
+  return account.amount !== null ? <span>{account.formatted_amount}</span> : <span className="placeholder">—</span>;
 };
 
 /**
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.tsx
index ff82a3c2b..fc9b6fe6d 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.tsx
@@ -8,7 +8,7 @@ import { inputIntent } from '@/utils';
 
 export default function CustomerFormAfterPrimarySection({}) {
   return (
-    <div class="customer-form__after-primary-section-content">
+    <div className="customer-form__after-primary-section-content">
       {/*------------ Customer email -----------*/}
       <FastField name={'email'}>
         {({ field, meta: { error, touched } }) => (
@@ -25,29 +25,17 @@ export default function CustomerFormAfterPrimarySection({}) {
       </FastField>
 
       {/*------------ Phone number -----------*/}
-      <FormGroup
-        className={'form-group--phone-number'}
-        label={<T id={'phone_number'} />}
-        inline={true}
-      >
+      <FormGroup className={'form-group--phone-number'} label={<T id={'phone_number'} />} inline={true}>
         <ControlGroup>
           <FastField name={'personal_phone'}>
             {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                intent={inputIntent({ error, touched })}
-                placeholder={intl.get('personal')}
-                {...field}
-              />
+              <InputGroup intent={inputIntent({ error, touched })} placeholder={intl.get('personal')} {...field} />
             )}
           </FastField>
 
           <FastField name={'work_phone'}>
             {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                intent={inputIntent({ error, touched })}
-                placeholder={intl.get('work')}
-                {...field}
-              />
+              <InputGroup intent={inputIntent({ error, touched })} placeholder={intl.get('work')} {...field} />
             )}
           </FastField>
         </ControlGroup>
diff --git a/packages/webapp/src/containers/Dashboard/Sidebar/Sidebar.tsx b/packages/webapp/src/containers/Dashboard/Sidebar/Sidebar.tsx
index eda2f9011..04d34f123 100644
--- a/packages/webapp/src/containers/Dashboard/Sidebar/Sidebar.tsx
+++ b/packages/webapp/src/containers/Dashboard/Sidebar/Sidebar.tsx
@@ -39,5 +39,5 @@ function SidebarFooterVersion() {
   if (!REACT_APP_VERSION) {
     return null;
   }
-  return <div class="sidebar__version">v{REACT_APP_VERSION}</div>;
+  return <div className="sidebar__version">v{REACT_APP_VERSION}</div>;
 }
diff --git a/packages/webapp/src/containers/Dashboard/Sidebar/SidebarHead.tsx b/packages/webapp/src/containers/Dashboard/Sidebar/SidebarHead.tsx
index d51e04998..eb481e238 100644
--- a/packages/webapp/src/containers/Dashboard/Sidebar/SidebarHead.tsx
+++ b/packages/webapp/src/containers/Dashboard/Sidebar/SidebarHead.tsx
@@ -30,39 +30,27 @@ function SidebarHeadJSX({
           boundary={'window'}
           content={
             <Menu className={'menu--dashboard-organization'}>
-              <div class="org-item">
-                <div class="org-item__logo">
-                  {firstLettersArgs(...(organization.name || '').split(' '))}{' '}
-                </div>
-                <div class="org-item__name">{organization.name}</div>
+              <div className="org-item">
+                <div className="org-item__logo">{firstLettersArgs(...(organization.name || '').split(' '))} </div>
+                <div className="org-item__name">{organization.name}</div>
               </div>
             </Menu>
           }
           position={Position.BOTTOM}
           minimal={true}
         >
-          <Button
-            className="title"
-            rightIcon={<Icon icon={'caret-down-16'} size={16} />}
-          >
+          <Button className="title" rightIcon={<Icon icon={'caret-down-16'} size={16} />}>
             {organization.name}
           </Button>
         </Popover>
-        <span class="subtitle">{user.full_name}</span>
+        <span className="subtitle">{user.full_name}</span>
       </div>
 
       <div className="sidebar__head-logo">
-        <Icon
-          icon={'mini-bigcapital'}
-          width={28}
-          height={28}
-          className="bigcapital--alt"
-        />
+        <Icon icon={'mini-bigcapital'} width={28} height={28} className="bigcapital--alt" />
       </div>
     </div>
   );
 }
 
-export const SidebarHead = compose(
-  withCurrentOrganization(({ organization }) => ({ organization })),
-)(SidebarHeadJSX);
+export const SidebarHead = compose(withCurrentOrganization(({ organization }) => ({ organization })))(SidebarHeadJSX);
diff --git a/packages/webapp/src/containers/Dialogs/BranchActivateDialog/BranchActivateFormContent.tsx b/packages/webapp/src/containers/Dialogs/BranchActivateDialog/BranchActivateFormContent.tsx
index 1315d6caa..84f0166b0 100644
--- a/packages/webapp/src/containers/Dialogs/BranchActivateDialog/BranchActivateFormContent.tsx
+++ b/packages/webapp/src/containers/Dialogs/BranchActivateDialog/BranchActivateFormContent.tsx
@@ -12,11 +12,9 @@ export default function BranchActivateFormContent() {
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
-        <p class="paragraph">
-          {intl.getHTML('branch_activate.dialog_paragraph')}
-        </p>
+        <p className="paragraph">{intl.getHTML('branch_activate.dialog_paragraph')}</p>
 
-        <ul class="paragraph list">
+        <ul className="paragraph list">
           <li>{intl.get('branch_activate.dialog_paragraph.line_1')}</li>
           <li>{intl.get('branch_activate.dialog_paragraph.line_2')}</li>
         </ul>
diff --git a/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx b/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx
index 534450c08..86da2fbb3 100644
--- a/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx
+++ b/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx
@@ -24,9 +24,7 @@ function ContactDuplicateForm({
   const { dialogName, contactId } = useContactDuplicateFromContext();
 
   const validationSchema = Yup.object().shape({
-    contact_type: Yup.string()
-      .required()
-      .label(intl.get('contact_type_')),
+    contact_type: Yup.string().required().label(intl.get('contact_type_')),
   });
 
   const initialValues = {
@@ -47,15 +45,11 @@ function ContactDuplicateForm({
   };
 
   return (
-    <Formik
-      validationSchema={validationSchema}
-      initialValues={initialValues}
-      onSubmit={handleFormSubmit}
-    >
+    <Formik validationSchema={validationSchema} initialValues={initialValues} onSubmit={handleFormSubmit}>
       {({ isSubmitting }) => (
         <Form>
           <div className={Classes.DIALOG_BODY}>
-            <p class="paragraph">
+            <p className="paragraph">
               <T id={'are_you_sure_want_to_duplicate'} />
             </p>
 
@@ -71,9 +65,7 @@ function ContactDuplicateForm({
                 >
                   <ListSelect
                     items={Contacts}
-                    onItemSelect={({ path }) =>
-                      form.setFieldValue('contact_type', path)
-                    }
+                    onItemSelect={({ path }) => form.setFieldValue('contact_type', path)}
                     defaultText={<T id={'select_contact'} />}
                     textProp={'name'}
                     selectedItemProp={'name'}
@@ -91,11 +83,7 @@ function ContactDuplicateForm({
                 <T id={'cancel'} />
               </Button>
 
-              <Button
-                intent={Intent.PRIMARY}
-                type="submit"
-                disabled={isSubmitting}
-              >
+              <Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
                 <T id={'duplicate'} />
               </Button>
             </div>
diff --git a/packages/webapp/src/containers/Dialogs/CreditNotePdfPreviewDialog/CreditNotePdfPreviewDialogContent.tsx b/packages/webapp/src/containers/Dialogs/CreditNotePdfPreviewDialog/CreditNotePdfPreviewDialogContent.tsx
index 067853aeb..2e4b087d5 100644
--- a/packages/webapp/src/containers/Dialogs/CreditNotePdfPreviewDialog/CreditNotePdfPreviewDialogContent.tsx
+++ b/packages/webapp/src/containers/Dialogs/CreditNotePdfPreviewDialog/CreditNotePdfPreviewDialogContent.tsx
@@ -8,39 +8,22 @@ import { usePdfCreditNote } from '@/hooks/query';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { compose } from '@/utils';
 
-function CreditNotePdfPreviewDialogContent({
-  subscriptionForm: { creditNoteId },
-}) {
+function CreditNotePdfPreviewDialogContent({ subscriptionForm: { creditNoteId } }) {
   const { isLoading, pdfUrl } = usePdfCreditNote(creditNoteId);
-  
+
   return (
     <DialogContent>
-      <div class="dialog__header-actions">
-        <AnchorButton
-          href={pdfUrl}
-          target={'__blank'}
-          minimal={true}
-          outlined={true}
-        >
+      <div className="dialog__header-actions">
+        <AnchorButton href={pdfUrl} target={'__blank'} minimal={true} outlined={true}>
           <T id={'pdf_preview.preview.button'} />
         </AnchorButton>
 
-        <AnchorButton
-          href={pdfUrl}
-          download={'creditNote.pdf'}
-          minimal={true}
-          outlined={true}
-        >
+        <AnchorButton href={pdfUrl} download={'creditNote.pdf'} minimal={true} outlined={true}>
           <T id={'pdf_preview.download.button'} />
         </AnchorButton>
       </div>
 
-      <PdfDocumentPreview
-        height={760}
-        width={1000}
-        isLoading={isLoading}
-        url={pdfUrl}
-      />
+      <PdfDocumentPreview height={760} width={1000} isLoading={isLoading} url={pdfUrl} />
     </DialogContent>
   );
 }
diff --git a/packages/webapp/src/containers/Dialogs/EstimatePdfPreviewDialog/EstimatePdfPreviewDialogContent.tsx b/packages/webapp/src/containers/Dialogs/EstimatePdfPreviewDialog/EstimatePdfPreviewDialogContent.tsx
index 50aa219dd..1f5a00bc8 100644
--- a/packages/webapp/src/containers/Dialogs/EstimatePdfPreviewDialog/EstimatePdfPreviewDialogContent.tsx
+++ b/packages/webapp/src/containers/Dialogs/EstimatePdfPreviewDialog/EstimatePdfPreviewDialogContent.tsx
@@ -18,32 +18,17 @@ function EstimatePdfPreviewDialogContent({
 
   return (
     <DialogContent>
-      <div class="dialog__header-actions">
-        <AnchorButton
-          href={pdfUrl}
-          target={'__blank'}
-          minimal={true}
-          outlined={true}
-        >
+      <div className="dialog__header-actions">
+        <AnchorButton href={pdfUrl} target={'__blank'} minimal={true} outlined={true}>
           <T id={'pdf_preview.preview.button'} />
         </AnchorButton>
 
-        <AnchorButton
-          href={pdfUrl}
-          download={'estimate.pdf'}
-          minimal={true}
-          outlined={true}
-        >
+        <AnchorButton href={pdfUrl} download={'estimate.pdf'} minimal={true} outlined={true}>
           <T id={'pdf_preview.download.button'} />
         </AnchorButton>
       </div>
 
-      <PdfDocumentPreview
-        height={760}
-        width={1000}
-        isLoading={isLoading}
-        url={pdfUrl}
-      />
+      <PdfDocumentPreview height={760} width={1000} isLoading={isLoading} url={pdfUrl} />
     </DialogContent>
   );
 }
diff --git a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentQuantityFields.tsx b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentQuantityFields.tsx
index 650b006b0..a9ea32bdc 100644
--- a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentQuantityFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentQuantityFields.tsx
@@ -9,7 +9,7 @@ export default function InventoryAdjustmentQuantityFields() {
   const { values } = useFormikContext();
 
   return (
-    <div class="adjustment-fields">
+    <div className="adjustment-fields">
       <Choose>
         <Choose.When condition={values.type === 'decrement'}>
           <DecrementAdjustmentFields />
diff --git a/packages/webapp/src/containers/Dialogs/InvoicePdfPreviewDialog/InvoicePdfPreviewDialogContent.tsx b/packages/webapp/src/containers/Dialogs/InvoicePdfPreviewDialog/InvoicePdfPreviewDialogContent.tsx
index c31b643b0..9d41bab84 100644
--- a/packages/webapp/src/containers/Dialogs/InvoicePdfPreviewDialog/InvoicePdfPreviewDialogContent.tsx
+++ b/packages/webapp/src/containers/Dialogs/InvoicePdfPreviewDialog/InvoicePdfPreviewDialogContent.tsx
@@ -17,32 +17,17 @@ function InvoicePdfPreviewDialogContent({
 
   return (
     <DialogContent>
-      <div class="dialog__header-actions">
-        <AnchorButton
-          href={pdfUrl}
-          target={'__blank'}
-          minimal={true}
-          outlined={true}
-        >
+      <div className="dialog__header-actions">
+        <AnchorButton href={pdfUrl} target={'__blank'} minimal={true} outlined={true}>
           <T id={'pdf_preview.preview.button'} />
         </AnchorButton>
 
-        <AnchorButton
-          href={pdfUrl}
-          download={'invoice.pdf'}
-          minimal={true}
-          outlined={true}
-        >
+        <AnchorButton href={pdfUrl} download={'invoice.pdf'} minimal={true} outlined={true}>
           <T id={'pdf_preview.download.button'} />
         </AnchorButton>
       </div>
 
-      <PdfDocumentPreview
-        height={760}
-        width={1000}
-        isLoading={isLoading}
-        url={pdfUrl}
-      />
+      <PdfDocumentPreview height={760} width={1000} isLoading={isLoading} url={pdfUrl} />
     </DialogContent>
   );
 }
diff --git a/packages/webapp/src/containers/Dialogs/PaymentReceivePdfPreviewDialog/PaymentReceivePdfPreviewContent.tsx b/packages/webapp/src/containers/Dialogs/PaymentReceivePdfPreviewDialog/PaymentReceivePdfPreviewContent.tsx
index b76b9d658..b7d07854f 100644
--- a/packages/webapp/src/containers/Dialogs/PaymentReceivePdfPreviewDialog/PaymentReceivePdfPreviewContent.tsx
+++ b/packages/webapp/src/containers/Dialogs/PaymentReceivePdfPreviewDialog/PaymentReceivePdfPreviewContent.tsx
@@ -8,43 +8,24 @@ import { usePdfPaymentReceive } from '@/hooks/query';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { compose } from '@/utils';
 
-function PaymentReceivePdfPreviewDialogContent({
-  subscriptionForm: { paymentReceiveId },
-}) {
+function PaymentReceivePdfPreviewDialogContent({ subscriptionForm: { paymentReceiveId } }) {
   const { isLoading, pdfUrl } = usePdfPaymentReceive(paymentReceiveId);
 
   return (
     <DialogContent>
-      <div class="dialog__header-actions">
-        <AnchorButton
-          href={pdfUrl}
-          target={'__blank'}
-          minimal={true}
-          outlined={true}
-        >
+      <div className="dialog__header-actions">
+        <AnchorButton href={pdfUrl} target={'__blank'} minimal={true} outlined={true}>
           <T id={'pdf_preview.preview.button'} />
         </AnchorButton>
 
-        <AnchorButton
-          href={pdfUrl}
-          download={'payment.pdf'}
-          minimal={true}
-          outlined={true}
-        >
+        <AnchorButton href={pdfUrl} download={'payment.pdf'} minimal={true} outlined={true}>
           <T id={'pdf_preview.download.button'} />
         </AnchorButton>
       </div>
 
-      <PdfDocumentPreview
-        height={760}
-        width={1000}
-        isLoading={isLoading}
-        url={pdfUrl}
-      />
+      <PdfDocumentPreview height={760} width={1000} isLoading={isLoading} url={pdfUrl} />
     </DialogContent>
   );
 }
 
-export default compose(withDialogActions)(
-  PaymentReceivePdfPreviewDialogContent,
-);
+export default compose(withDialogActions)(PaymentReceivePdfPreviewDialogContent);
diff --git a/packages/webapp/src/containers/Dialogs/ReceiptPdfPreviewDialog/ReceiptPdfPreviewDialogContent.tsx b/packages/webapp/src/containers/Dialogs/ReceiptPdfPreviewDialog/ReceiptPdfPreviewDialogContent.tsx
index fea9394ff..cc80cdb18 100644
--- a/packages/webapp/src/containers/Dialogs/ReceiptPdfPreviewDialog/ReceiptPdfPreviewDialogContent.tsx
+++ b/packages/webapp/src/containers/Dialogs/ReceiptPdfPreviewDialog/ReceiptPdfPreviewDialogContent.tsx
@@ -17,32 +17,17 @@ function ReceiptPdfPreviewDialogContent({
 
   return (
     <DialogContent>
-      <div class="dialog__header-actions">
-        <AnchorButton
-          href={pdfUrl}
-          target={'__blank'}
-          minimal={true}
-          outlined={true}
-        >
+      <div className="dialog__header-actions">
+        <AnchorButton href={pdfUrl} target={'__blank'} minimal={true} outlined={true}>
           <T id={'pdf_preview.preview.button'} />
         </AnchorButton>
 
-        <AnchorButton
-          href={pdfUrl}
-          download={'receipt.pdf'}
-          minimal={true}
-          outlined={true}
-        >
+        <AnchorButton href={pdfUrl} download={'receipt.pdf'} minimal={true} outlined={true}>
           <T id={'pdf_preview.download.button'} />
         </AnchorButton>
       </div>
 
-      <PdfDocumentPreview
-        height={760}
-        width={1000}
-        isLoading={isLoading}
-        url={pdfUrl}
-      />
+      <PdfDocumentPreview height={760} width={1000} isLoading={isLoading} url={pdfUrl} />
     </DialogContent>
   );
 }
diff --git a/packages/webapp/src/containers/Dialogs/WarehouseActivateDialog/WarehouseActivateFormContent.tsx b/packages/webapp/src/containers/Dialogs/WarehouseActivateDialog/WarehouseActivateFormContent.tsx
index 155d762de..36f146647 100644
--- a/packages/webapp/src/containers/Dialogs/WarehouseActivateDialog/WarehouseActivateFormContent.tsx
+++ b/packages/webapp/src/containers/Dialogs/WarehouseActivateDialog/WarehouseActivateFormContent.tsx
@@ -12,11 +12,9 @@ export default function WarehouseActivateFormContent() {
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
-        <p class="paragraph">
-          {intl.getHTML('warehouse_activate.dialog_paragraph')}
-        </p>
+        <p className="paragraph">{intl.getHTML('warehouse_activate.dialog_paragraph')}</p>
 
-        <ul class="paragraph list">
+        <ul className="paragraph list">
           <li>{intl.get('warehouse_activate.dialog_paragraph.line_1')}</li>
           <li>{intl.get('warehouse_activate.dialog_paragraph.line_2')}</li>
         </ul>
diff --git a/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.tsx b/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.tsx
index f86440d69..f4b5854e8 100644
--- a/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.tsx
@@ -2,12 +2,7 @@
 import React from 'react';
 import { isEmpty } from 'lodash';
 
-import {
-  Icon,
-  DetailsMenu,
-  DetailItem,
-  FormattedMessage as T,
-} from '@/components';
+import { Icon, DetailsMenu, DetailItem, FormattedMessage as T } from '@/components';
 import { useAccountDrawerContext } from './AccountDrawerProvider';
 
 /**
@@ -19,11 +14,8 @@ export default function AccountDrawerHeader() {
   return (
     <div className={'account-drawer__content-header'}>
       <DetailsMenu>
-        <DetailItem
-          name={'closing-balance'}
-          label={<T id={'closing_balance'} />}
-        >
-          <h3 class={'big-number'}>{account.formatted_amount}</h3>
+        <DetailItem name={'closing-balance'} label={<T id={'closing_balance'} />}>
+          <h3 className={'big-number'}>{account.formatted_amount}</h3>
         </DetailItem>
 
         <DetailItem name={'account-type'} label={<T id={'account_type'} />}>
@@ -32,12 +24,7 @@ export default function AccountDrawerHeader() {
 
         <DetailItem name={'account-normal'} label={<T id={'account_normal'} />}>
           {account.account_normal_formatted}
-          <Icon
-            iconSize={14}
-            icon={`arrow-${
-              account.account_normal === 'credit' ? 'down' : 'up'
-            }`}
-          />
+          <Icon iconSize={14} icon={`arrow-${account.account_normal === 'credit' ? 'down' : 'up'}`} />
         </DetailItem>
 
         <DetailItem name={'code'} label={<T id={'code'} />}>
diff --git a/packages/webapp/src/containers/Drawers/BillDrawer/BillDetailHeader.tsx b/packages/webapp/src/containers/Drawers/BillDrawer/BillDetailHeader.tsx
index 34e0418a3..400749e9d 100644
--- a/packages/webapp/src/containers/Drawers/BillDrawer/BillDetailHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/BillDrawer/BillDetailHeader.tsx
@@ -30,7 +30,7 @@ export default function BillDetailHeader() {
       <CommercialDocTopHeader>
         <DetailsMenu>
           <AmountDetailItem label={intl.get('amount')}>
-            <h3 class="big-number">{bill.total_formatted}</h3>
+            <h3 className="big-number">{bill.total_formatted}</h3>
           </AmountDetailItem>
           <StatusDetailItem>
             <BillDetailsStatus bill={bill} />
@@ -47,36 +47,19 @@ export default function BillDetailHeader() {
               <FormatDate value={bill.due_date} />
             </DetailItem>
             <DetailItem label={intl.get('vendor_name')}>
-              <VendorDrawerLink vendorId={bill.vendor_id}>
-                {bill.vendor?.display_name}
-              </VendorDrawerLink>
+              <VendorDrawerLink vendorId={bill.vendor_id}>{bill.vendor?.display_name}</VendorDrawerLink>
             </DetailItem>
-            <DetailItem label={intl.get('bill.details.bill_number')}>
-              {defaultTo(bill.bill_number, '-')}
-            </DetailItem>
-            <ExchangeRateDetailItem
-              exchangeRate={bill?.exchange_rate}
-              toCurrency={bill?.currency_code}
-            />
+            <DetailItem label={intl.get('bill.details.bill_number')}>{defaultTo(bill.bill_number, '-')}</DetailItem>
+            <ExchangeRateDetailItem exchangeRate={bill?.exchange_rate} toCurrency={bill?.currency_code} />
           </DetailsMenu>
         </Col>
         <Col xs={6}>
-          <DetailsMenu
-            direction={'horizantal'}
-            minLabelSize={'140px'}
-            textAlign={'right'}
-          >
+          <DetailsMenu direction={'horizantal'} minLabelSize={'140px'} textAlign={'right'}>
             <DetailItem label={intl.get('due_amount')}>
               <strong>{bill.formatted_due_amount}</strong>
             </DetailItem>
-            <DetailItem
-              label={intl.get('reference')}
-              children={defaultTo(bill.reference_no, '--')}
-            />
-            <DetailItem
-              label={intl.get('bill.details.created_at')}
-              children={<FormatDate value={bill.created_at} />}
-            />
+            <DetailItem label={intl.get('reference')} children={defaultTo(bill.reference_no, '--')} />
+            <DetailItem label={intl.get('bill.details.created_at')} children={<FormatDate value={bill.created_at} />} />
           </DetailsMenu>
         </Col>
       </Row>
diff --git a/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.tsx b/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.tsx
index 3fc0477cd..399b2ab30 100644
--- a/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.tsx
@@ -23,7 +23,7 @@ export default function CashflowTransactionDrawerHeader() {
       <CommercialDocHeader>
         <DetailsMenu>
           <DetailItem name={'total'} label={<T id={'total'} />}>
-            <h3 class="big-number">{cashflowTransaction.formatted_amount}</h3>
+            <h3 className="big-number">{cashflowTransaction.formatted_amount}</h3>
           </DetailItem>
         </DetailsMenu>
       </CommercialDocHeader>
@@ -31,17 +31,11 @@ export default function CashflowTransactionDrawerHeader() {
       <Row>
         <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-            <DetailItem
-              name={'transaction_type'}
-              label={<T id={'cash_flow_drawer.label_transaction_type'} />}
-            >
+            <DetailItem name={'transaction_type'} label={<T id={'cash_flow_drawer.label_transaction_type'} />}>
               {cashflowTransaction.transaction_type_formatted}
             </DetailItem>
 
-            <DetailItem
-              name={'transaction_number'}
-              label={<T id={'cash_flow.drawer.label_transaction_no'} />}
-            >
+            <DetailItem name={'transaction_number'} label={<T id={'cash_flow.drawer.label_transaction_no'} />}>
               {cashflowTransaction.transaction_number}
             </DetailItem>
 
diff --git a/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTableFooter.tsx b/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTableFooter.tsx
index b46f6c0fe..a9a35f6bf 100644
--- a/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTableFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTableFooter.tsx
@@ -10,24 +10,24 @@ export default function CashflowTransactionDrawerTableFooter() {
 
   return (
     <div className="cashflow-drawer__content-footer">
-      <div class="total-lines">
-        <div class="total-lines__line total-lines__line--subtotal">
-          <div class="title">
+      <div className="total-lines">
+        <div className="total-lines__line total-lines__line--subtotal">
+          <div className="title">
             <T id={'manual_journal.details.subtotal'} />
           </div>
-          <div class="debit">
+          <div className="debit">
             <FormatNumber value={formatted_amount} />
           </div>
-          <div class="credit">
+          <div className="credit">
             <FormatNumber value={formatted_amount} />
           </div>
         </div>
-        <div class="total-lines__line total-lines__line--total">
-          <div class="title">
+        <div className="total-lines__line total-lines__line--total">
+          <div className="title">
             <T id={'manual_journal.details.total'} />
           </div>
-          <div class="debit">{formatted_amount}</div>
-          <div class="credit">{formatted_amount}</div>
+          <div className="debit">{formatted_amount}</div>
+          <div className="credit">{formatted_amount}</div>
         </div>
       </div>
     </div>
diff --git a/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.tsx b/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.tsx
index 0d1f30dea..0ac03a5d0 100644
--- a/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.tsx
@@ -32,7 +32,7 @@ export default function CreditNoteDetailHeader() {
       <CommercialDocTopHeader>
         <DetailsMenu>
           <AmountItem label={intl.get('amount')}>
-            <span class="big-number">{creditNote.formatted_amount}</span>
+            <span className="big-number">{creditNote.formatted_amount}</span>
           </AmountItem>
 
           <StatusItem>
@@ -44,15 +44,11 @@ export default function CreditNoteDetailHeader() {
       <Row>
         <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-            <DetailItem
-              label={intl.get('credit_note.drawer.label_credit_note_date')}
-            >
+            <DetailItem label={intl.get('credit_note.drawer.label_credit_note_date')}>
               <FormatDate value={creditNote.formatted_credit_note_date} />
             </DetailItem>
 
-            <DetailItem
-              label={intl.get('credit_note.drawer.label_credit_note_no')}
-            >
+            <DetailItem label={intl.get('credit_note.drawer.label_credit_note_no')}>
               {defaultTo(creditNote.credit_note_number, '-')}
             </DetailItem>
 
@@ -61,28 +57,16 @@ export default function CreditNoteDetailHeader() {
                 {creditNote.customer?.display_name}
               </CustomerDrawerLink>
             </DetailItem>
-            <ExchangeRateDetailItem
-              exchangeRate={creditNote?.exchange_rate}
-              toCurrency={creditNote?.currency_code}
-            />
+            <ExchangeRateDetailItem exchangeRate={creditNote?.exchange_rate} toCurrency={creditNote?.currency_code} />
           </DetailsMenu>
         </Col>
 
         <Col xs={6}>
-          <DetailsMenu
-            textAlign={'right'}
-            direction={'horizantal'}
-            minLabelSize={'180px'}
-          >
-            <DetailItem
-              label={intl.get('credit_note.drawer.label_credits_remaining')}
-            >
+          <DetailsMenu textAlign={'right'} direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem label={intl.get('credit_note.drawer.label_credits_remaining')}>
               <strong>{creditNote.formatted_credits_remaining}</strong>
             </DetailItem>
-            <DetailItem
-              label={intl.get('reference')}
-              children={defaultTo(creditNote.reference_no, '-')}
-            />
+            <DetailItem label={intl.get('reference')} children={defaultTo(creditNote.reference_no, '-')} />
             <DetailItem
               label={<T id={'credit_note.drawer.label_created_at'} />}
               children={<FormatDate value={creditNote.created_at} />}
diff --git a/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsHeader.tsx b/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsHeader.tsx
index b6ff8b4c6..f826e97b5 100644
--- a/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsHeader.tsx
@@ -17,32 +17,21 @@ export default function CustomerDetailsHeader() {
 
   return (
     <div className={clsx(Style.root_content)}>
-      <DetailsMenu
-        direction={'vertical'}
-        className={clsx(Style.root_content_primary)}
-      >
-        <DetailItem
-          name={'outstanding-receivable'}
-          label={<T id={'customer.drawer.label.outstanding_receivable'} />}
-        >
-          <h3 class="big-number">{customer.formatted_balance}</h3>
+      <DetailsMenu direction={'vertical'} className={clsx(Style.root_content_primary)}>
+        <DetailItem name={'outstanding-receivable'} label={<T id={'customer.drawer.label.outstanding_receivable'} />}>
+          <h3 className="big-number">{customer.formatted_balance}</h3>
         </DetailItem>
 
         <DetailItem
           label={<T id={'customer.drawer.label.customer_type'} />}
           name={'type'}
-          children={customer?.formatted_customer_type }
+          children={customer?.formatted_customer_type}
         />
-        <DetailItem label={<T id={'customer.drawer.label.unused_credits'} />}>
-          0
-        </DetailItem>
+        <DetailItem label={<T id={'customer.drawer.label.unused_credits'} />}>0</DetailItem>
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'} minLabelSize={'175px'}>
-        <DetailItem
-          label={<T id={'customer.drawer.label.customer_name'} />}
-          name={'name'}
-        >
+        <DetailItem label={<T id={'customer.drawer.label.customer_name'} />} name={'name'}>
           <strong>{customer?.display_name}</strong>
         </DetailItem>
 
@@ -50,19 +39,13 @@ export default function CustomerDetailsHeader() {
           label={<T id={'customer.drawer.label.company_name'} />}
           children={defaultTo(customer?.company_name, '--')}
         />
-        <DetailItem
-          label={<T id={'customer.drawer.label.email'} />}
-          children={defaultTo(customer?.email, '--')}
-        />
+        <DetailItem label={<T id={'customer.drawer.label.email'} />} children={defaultTo(customer?.email, '--')} />
         <DetailItem label={<T id={'customer.drawer.label.phone_number'} />}>
           <div>{customer?.personal_phone} </div>
           <div>{customer?.work_phone} </div>
         </DetailItem>
 
-        <DetailItem
-          label={<T id={'customer.drawer.label.website'} />}
-          children={defaultTo(customer?.website, '--')}
-        />
+        <DetailItem label={<T id={'customer.drawer.label.website'} />} children={defaultTo(customer?.website, '--')} />
         <DetailItem
           label={<T id={'customer.drawer.label.opening_balance'} />}
           children={customer?.formatted_opening_balance}
@@ -71,14 +54,8 @@ export default function CustomerDetailsHeader() {
           label={<T id={'customer.drawer.label.opening_balance_at'} />}
           children={customer?.formatted_opening_balance_at}
         />
-        <DetailItem
-          label={<T id={'customer.drawer.label.currency'} />}
-          children={customer?.currency_code}
-        />
-        <DetailItem
-          label={<T id={'customer.drawer.label.note'} />}
-          children={defaultTo(customer?.note, '--')}
-        />
+        <DetailItem label={<T id={'customer.drawer.label.currency'} />} children={customer?.currency_code} />
+        <DetailItem label={<T id={'customer.drawer.label.note'} />} children={defaultTo(customer?.note, '--')} />
       </DetailsMenu>
     </div>
   );
diff --git a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.tsx b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.tsx
index 7c07ee1db..3b5daa586 100644
--- a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.tsx
@@ -30,7 +30,7 @@ export default function EstimateDetailHeader() {
       <CommercialDocTopHeader>
         <DetailsMenu>
           <AmountEstimateDetail label={intl.get('amount')}>
-            <span class="big-number">{estimate.formatted_amount}</span>
+            <span className="big-number">{estimate.formatted_amount}</span>
           </AmountEstimateDetail>
 
           <EstimateStatusDetail>
@@ -53,32 +53,16 @@ export default function EstimateDetailHeader() {
               </CustomerDrawerLink>
             </DetailItem>
 
-            <DetailItem
-              label={intl.get('estimate_date')}
-              children={estimate.formatted_estimate_date}
-            />
+            <DetailItem label={intl.get('estimate_date')} children={estimate.formatted_estimate_date} />
 
-            <DetailItem
-              label={intl.get('expiration_date')}
-              children={estimate.formatted_expiration_date}
-            />
-            <ExchangeRateDetailItem
-              exchangeRate={estimate?.exchange_rate}
-              toCurrency={estimate?.currency_code}
-            />
+            <DetailItem label={intl.get('expiration_date')} children={estimate.formatted_expiration_date} />
+            <ExchangeRateDetailItem exchangeRate={estimate?.exchange_rate} toCurrency={estimate?.currency_code} />
           </DetailsMenu>
         </Col>
 
         <Col xs={6}>
-          <DetailsMenu
-            textAlign={'right'}
-            direction={'horizantal'}
-            minLabelSize={'180px'}
-          >
-            <DetailItem
-              label={intl.get('reference')}
-              children={defaultTo(estimate.reference, '-')}
-            />
+          <DetailsMenu textAlign={'right'} direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem label={intl.get('reference')} children={defaultTo(estimate.reference, '-')} />
             <DetailItem
               label={<T id={'estimate.details.created_at'} />}
               children={<FormatDate value={estimate.created_at} />}
diff --git a/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.tsx b/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.tsx
index 5adeaf9bc..646436b03 100644
--- a/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.tsx
@@ -29,7 +29,7 @@ export default function ExpenseDrawerHeader() {
       <CommercialDocTopHeader>
         <DetailsMenu>
           <DetailItem name={'amount'} label={<T id={'full_amount'} />}>
-            <h3 class="big-number">{expense.formatted_amount}</h3>
+            <h3 className="big-number">{expense.formatted_amount}</h3>
           </DetailItem>
 
           <StatusDetailItem>
@@ -49,22 +49,13 @@ export default function ExpenseDrawerHeader() {
               {defaultTo(expense.reference_no, '-')}
             </DetailItem>
 
-            <DetailItem label={<T id={'description'} />}>
-              {defaultTo(expense.description, '—')}
-            </DetailItem>
-            <ExchangeRateDetailItem
-              exchangeRate={expense?.exchange_rate}
-              toCurrency={expense?.currency_code}
-            />
+            <DetailItem label={<T id={'description'} />}>{defaultTo(expense.description, '—')}</DetailItem>
+            <ExchangeRateDetailItem exchangeRate={expense?.exchange_rate} toCurrency={expense?.currency_code} />
           </DetailsMenu>
         </Col>
 
         <Col xs={6}>
-          <DetailsMenu
-            textAlign={'right'}
-            direction={'horizantal'}
-            minLabelSize={'180px'}
-          >
+          <DetailsMenu textAlign={'right'} direction={'horizantal'} minLabelSize={'180px'}>
             <DetailItem label={<T id={'published_at'} />}>
               <FormatDate value={expense.published_at} />
             </DetailItem>
diff --git a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.tsx b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.tsx
index a79b6b22c..92ad1744d 100644
--- a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.tsx
@@ -30,7 +30,7 @@ export default function InvoiceDetailHeader() {
       <CommercialDocTopHeader>
         <DetailsMenu>
           <AmountDetailItem label={intl.get('amount')}>
-            <h3 class="big-number">{invoice.total_formatted}</h3>
+            <h3 className="big-number">{invoice.total_formatted}</h3>
           </AmountDetailItem>
 
           <StatusDetailItem label={''}>
@@ -51,27 +51,16 @@ export default function InvoiceDetailHeader() {
             </DetailItem>
 
             <DetailItem label={intl.get('customer_name')}>
-              <CustomerDrawerLink customerId={invoice.customer_id}>
-                {invoice.customer?.display_name}
-              </CustomerDrawerLink>
+              <CustomerDrawerLink customerId={invoice.customer_id}>{invoice.customer?.display_name}</CustomerDrawerLink>
             </DetailItem>
 
-            <DetailItem label={intl.get('invoice.details.invoice_no')}>
-              {invoice.invoice_no}
-            </DetailItem>
-            <ExchangeRateDetailItem
-              exchangeRate={invoice?.exchange_rate}
-              toCurrency={invoice?.currency_code}
-            />
+            <DetailItem label={intl.get('invoice.details.invoice_no')}>{invoice.invoice_no}</DetailItem>
+            <ExchangeRateDetailItem exchangeRate={invoice?.exchange_rate} toCurrency={invoice?.currency_code} />
           </DetailsMenu>
         </Col>
 
         <Col xs={6}>
-          <DetailsMenu
-            direction={'horizantal'}
-            minLabelSize={'180px'}
-            textAlign={'right'}
-          >
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'} textAlign={'right'}>
             <DetailItem label={intl.get('due_amount')}>
               <strong>{invoice.due_amount_formatted}</strong>
             </DetailItem>
@@ -80,10 +69,7 @@ export default function InvoiceDetailHeader() {
               <strong>{invoice.payment_amount_formatted}</strong>
             </DetailItem>
 
-            <DetailItem
-              label={intl.get('reference')}
-              children={defaultTo(invoice.reference_no, '--')}
-            />
+            <DetailItem label={intl.get('reference')} children={defaultTo(invoice.reference_no, '--')} />
             <DetailItem
               label={intl.get('invoice.details.created_at')}
               children={<FormatDate value={invoice.created_at} />}
diff --git a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.tsx b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.tsx
index 5e10c3507..a365c2dbf 100644
--- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.tsx
@@ -15,34 +15,16 @@ export default function ItemDetailHeader() {
 
   return (
     <Card>
-      <div class="item-drawer__content">
+      <div className="item-drawer__content">
         <DetailsMenu direction={'vertical'}>
-          <DetailItem
-            name={'name'}
-            label={intl.get('item_name')}
-            children={item.name}
-          />
-          <DetailItem
-            label={intl.get('sell_price')}
-            children={item.sell_price_formatted}
-            align={'right'}
-          />
-          <DetailItem
-            label={intl.get('cost_price')}
-            children={item.cost_price_formatted}
-            align={'right'}
-          />
+          <DetailItem name={'name'} label={intl.get('item_name')} children={item.name} />
+          <DetailItem label={intl.get('sell_price')} children={item.sell_price_formatted} align={'right'} />
+          <DetailItem label={intl.get('cost_price')} children={item.cost_price_formatted} align={'right'} />
         </DetailsMenu>
 
         <DetailsMenu direction={'horizantal'}>
-          <DetailItem
-            label={intl.get('item_type')}
-            children={item.type_formatted}
-          />
-          <DetailItem
-            label={intl.get('item_code')}
-            children={defaultTo(item.code, '-')}
-          />
+          <DetailItem label={intl.get('item_type')} children={item.type_formatted} />
+          <DetailItem label={intl.get('item_code')} children={defaultTo(item.code, '-')} />
           <If condition={item.type === 'inventory'}>
             <DetailItem name={'quantity'} label={intl.get('quantity_on_hand')}>
               <span
@@ -55,36 +37,18 @@ export default function ItemDetailHeader() {
               </span>
             </DetailItem>
           </If>
-          <DetailItem
-            label={intl.get('category_name')}
-            children={defaultTo(item.category?.name, '-')}
-          />
-          <DetailItem
-            label={intl.get('sell_account_id')}
-            children={defaultTo(item?.sell_account?.name, '-')}
-          />
-          <DetailItem
-            label={intl.get('cost_account_id')}
-            children={defaultTo(item.cost_account?.name, '-')}
-          />
-          <DetailItem
-            label={intl.get('item.details.sell_tax_rate')}
-            children={item?.sell_tax_rate?.name}
-          />
-          <DetailItem
-            label={intl.get('item.details.purchase_tax_rate')}
-            children={item?.purchase_tax_rate?.name}
-          />
+          <DetailItem label={intl.get('category_name')} children={defaultTo(item.category?.name, '-')} />
+          <DetailItem label={intl.get('sell_account_id')} children={defaultTo(item?.sell_account?.name, '-')} />
+          <DetailItem label={intl.get('cost_account_id')} children={defaultTo(item.cost_account?.name, '-')} />
+          <DetailItem label={intl.get('item.details.sell_tax_rate')} children={item?.sell_tax_rate?.name} />
+          <DetailItem label={intl.get('item.details.purchase_tax_rate')} children={item?.purchase_tax_rate?.name} />
           <If condition={item.type === 'inventory'}>
             <DetailItem
               label={intl.get('inventory_account')}
               children={defaultTo(item?.inventory_account?.name, '-')}
             />
           </If>
-          <DetailItem
-            label={intl.get('item.sell_description')}
-            children={defaultTo(item.sell_description, '-')}
-          />
+          <DetailItem label={intl.get('item.sell_description')} children={defaultTo(item.sell_description, '-')} />
           <DetailItem
             label={intl.get('item.purchase_description')}
             children={defaultTo(item.purchase_description, '-')}
diff --git a/packages/webapp/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.tsx b/packages/webapp/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.tsx
index c3a9c1dac..1e2409523 100644
--- a/packages/webapp/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.tsx
@@ -26,7 +26,7 @@ export default function ManualJournalDrawerHeader() {
       <CommercialDocTopHeader>
         <DetailsMenu>
           <DetailItem name={'total'} label={<T id={'total'} />}>
-            <h3 class="big-number">{manualJournal.formatted_amount}</h3>
+            <h3 className="big-number">{manualJournal.formatted_amount}</h3>
           </DetailItem>
 
           <StatusDetailItem>
@@ -54,9 +54,7 @@ export default function ManualJournalDrawerHeader() {
               {manualJournal.currency_code}
             </DetailItem>
 
-            <DetailItem label={<T id={'description'} />}>
-              {defaultTo(manualJournal.description, '—')}
-            </DetailItem>
+            <DetailItem label={<T id={'description'} />}>{defaultTo(manualJournal.description, '—')}</DetailItem>
           </DetailsMenu>
         </Col>
       </Row>
diff --git a/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.tsx b/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.tsx
index 102f62b53..21b90b060 100644
--- a/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.tsx
@@ -27,7 +27,7 @@ export default function PaymentMadeDetailHeader() {
       <CommercialDocTopHeader>
         <DetailsMenu>
           <DetailItem label={intl.get('amount')}>
-            <h3 class="big-number">{paymentMade.formatted_amount}</h3>
+            <h3 className="big-number">{paymentMade.formatted_amount}</h3>
           </DetailItem>
         </DetailsMenu>
       </CommercialDocTopHeader>
@@ -35,43 +35,22 @@ export default function PaymentMadeDetailHeader() {
       <Row>
         <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-            <DetailItem
-              label={intl.get('payment_date')}
-              children={<FormatDate value={paymentMade.payment_date} />}
-            />
+            <DetailItem label={intl.get('payment_date')} children={<FormatDate value={paymentMade.payment_date} />} />
             <DetailItem
               label={intl.get('payment_made.details.payment_number')}
               children={defaultTo(paymentMade.payment_number, '-')}
             />
             <DetailItem label={intl.get('vendor_name')}>
-              <VendorDrawerLink vendorId={paymentMade.vendor_id}>
-                {paymentMade.vendor?.display_name}
-              </VendorDrawerLink>
+              <VendorDrawerLink vendorId={paymentMade.vendor_id}>{paymentMade.vendor?.display_name}</VendorDrawerLink>
             </DetailItem>
-            <DetailItem
-              label={intl.get('payment_account')}
-              children={paymentMade.payment_account?.name}
-            />
-            <ExchangeRateDetailItem
-              exchangeRate={paymentMade?.exchange_rate}
-              toCurrency={paymentMade?.currency_code}
-            />
+            <DetailItem label={intl.get('payment_account')} children={paymentMade.payment_account?.name} />
+            <ExchangeRateDetailItem exchangeRate={paymentMade?.exchange_rate} toCurrency={paymentMade?.currency_code} />
           </DetailsMenu>
         </Col>
         <Col xs={6}>
-          <DetailsMenu
-            textAlign={'right'}
-            direction={'horizantal'}
-            minLabelSize={'180px'}
-          >
-            <DetailItem
-              label={intl.get('reference')}
-              children={defaultTo(paymentMade.reference, '-')}
-            />
-            <DetailItem
-              label={intl.get('created_at')}
-              children={<FormatDate value={paymentMade.created_at} />}
-            />
+          <DetailsMenu textAlign={'right'} direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem label={intl.get('reference')} children={defaultTo(paymentMade.reference, '-')} />
+            <DetailItem label={intl.get('created_at')} children={<FormatDate value={paymentMade.created_at} />} />
           </DetailsMenu>
         </Col>
       </Row>
diff --git a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.tsx b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.tsx
index df251fed2..084ab0f92 100644
--- a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.tsx
@@ -26,7 +26,7 @@ export default function PaymentReceiveDetailHeader() {
       <CommercialDocTopHeader>
         <DetailsMenu>
           <DetailItem label={intl.get('amount')}>
-            <h3 class="big-number">{paymentReceive.formatted_amount}</h3>
+            <h3 className="big-number">{paymentReceive.formatted_amount}</h3>
           </DetailItem>
         </DetailsMenu>
       </CommercialDocTopHeader>
@@ -48,10 +48,7 @@ export default function PaymentReceiveDetailHeader() {
               </CustomerDrawerLink>
             </DetailItem>
 
-            <DetailItem
-              label={intl.get('deposit_account')}
-              children={paymentReceive.deposit_account?.name}
-            />
+            <DetailItem label={intl.get('deposit_account')} children={paymentReceive.deposit_account?.name} />
             <ExchangeRateDetailItem
               exchangeRate={paymentReceive?.exchange_rate}
               toCurrency={paymentReceive?.currency_code}
@@ -60,19 +57,9 @@ export default function PaymentReceiveDetailHeader() {
         </Col>
 
         <Col xs={6}>
-          <DetailsMenu
-            textAlign={'right'}
-            direction={'horizantal'}
-            minLabelSize={'180px'}
-          >
-            <DetailItem
-              label={intl.get('reference')}
-              children={defaultTo(paymentReceive.reference_no, '-')}
-            />
-            <DetailItem
-              label={intl.get('created_at')}
-              children={<FormatDate value={paymentReceive.created_at} />}
-            />
+          <DetailsMenu textAlign={'right'} direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem label={intl.get('reference')} children={defaultTo(paymentReceive.reference_no, '-')} />
+            <DetailItem label={intl.get('created_at')} children={<FormatDate value={paymentReceive.created_at} />} />
           </DetailsMenu>
         </Col>
       </Row>
diff --git a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.tsx b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.tsx
index 2d350f660..caa68fd32 100644
--- a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.tsx
@@ -31,7 +31,7 @@ export default function ReceiptDetailHeader() {
       <CommercialDocTopHeader>
         <DetailsMenu>
           <AmountReceiptItem label={intl.get('amount')}>
-            <h3 class="big-number">{receipt.formatted_amount}</h3>
+            <h3 className="big-number">{receipt.formatted_amount}</h3>
           </AmountReceiptItem>
 
           <StatusReceiptItem>
@@ -48,38 +48,17 @@ export default function ReceiptDetailHeader() {
               children={defaultTo(receipt.receipt_number, '-')}
             />
             <DetailItem label={intl.get('customer_name')}>
-              <CustomerDrawerLink customerId={receipt.customer_id}>
-                {receipt.customer?.display_name}
-              </CustomerDrawerLink>
+              <CustomerDrawerLink customerId={receipt.customer_id}>{receipt.customer?.display_name}</CustomerDrawerLink>
             </DetailItem>
-            <DetailItem
-              label={intl.get('receipt_date')}
-              children={<FormatDate value={receipt.receipt_date} />}
-            />
-            <DetailItem
-              label={intl.get('closed_date')}
-              children={<FormatDate value={receipt.closed_at_date} />}
-            />
-            <ExchangeRateDetailItem
-              exchangeRate={receipt?.exchange_rate}
-              toCurrency={receipt?.currency_code}
-            />
+            <DetailItem label={intl.get('receipt_date')} children={<FormatDate value={receipt.receipt_date} />} />
+            <DetailItem label={intl.get('closed_date')} children={<FormatDate value={receipt.closed_at_date} />} />
+            <ExchangeRateDetailItem exchangeRate={receipt?.exchange_rate} toCurrency={receipt?.currency_code} />
           </DetailsMenu>
         </Col>
         <Col xs={6}>
-          <DetailsMenu
-            direction={'horizantal'}
-            minLabelSize={'180px'}
-            textAlign={'right'}
-          >
-            <DetailItem
-              label={intl.get('deposit_account')}
-              children={receipt.deposit_account?.name}
-            />
-            <DetailItem
-              label={intl.get('reference')}
-              children={defaultTo(receipt.reference_no, '--')}
-            />
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'} textAlign={'right'}>
+            <DetailItem label={intl.get('deposit_account')} children={receipt.deposit_account?.name} />
+            <DetailItem label={intl.get('reference')} children={defaultTo(receipt.reference_no, '--')} />
             <DetailItem
               label={intl.get('receipt.details.created_at')}
               children={<FormatDate value={receipt.created_at} />}
diff --git a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.tsx b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.tsx
index 8045da828..a42687ea4 100644
--- a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.tsx
@@ -29,7 +29,7 @@ export default function VendorCreditDetailHeader() {
       <CommercialDocTopHeader>
         <DetailsMenu>
           <AmountItem label={intl.get('amount')}>
-            <span class="big-number">{vendorCredit.formatted_amount}</span>
+            <span className="big-number">{vendorCredit.formatted_amount}</span>
           </AmountItem>
           <StatusItem>
             <VendorCreditDetailsStatus vendorCredit={vendorCredit} />
@@ -39,21 +39,15 @@ export default function VendorCreditDetailHeader() {
       <Row>
         <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-            <DetailItem
-              label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}
-            >
+            <DetailItem label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}>
               <FormatDate value={vendorCredit.formatted_vendor_credit_date} />
             </DetailItem>
-            <DetailItem
-              label={intl.get('vendor_credit.drawer.label_vendor_credit_no')}
-            >
+            <DetailItem label={intl.get('vendor_credit.drawer.label_vendor_credit_no')}>
               {defaultTo(vendorCredit.vendor_credit_number, '-')}
             </DetailItem>
 
             <DetailItem label={intl.get('vendor_name')}>
-              <VendorDrawerLink vendorId={vendorCredit.vendor_id}>
-                {vendorCredit.vendor?.display_name}
-              </VendorDrawerLink>
+              <VendorDrawerLink vendorId={vendorCredit.vendor_id}>{vendorCredit.vendor?.display_name}</VendorDrawerLink>
             </DetailItem>
             <ExchangeRateDetailItem
               exchangeRate={vendorCredit?.exchange_rate}
@@ -62,20 +56,11 @@ export default function VendorCreditDetailHeader() {
           </DetailsMenu>
         </Col>
         <Col xs={6}>
-          <DetailsMenu
-            textAlign={'right'}
-            direction={'horizantal'}
-            minLabelSize={'180px'}
-          >
-            <DetailItem
-              label={intl.get('vendor_credit.drawer.label_credits_remaining')}
-            >
+          <DetailsMenu textAlign={'right'} direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem label={intl.get('vendor_credit.drawer.label_credits_remaining')}>
               <strong>{vendorCredit.formatted_credits_remaining}</strong>
             </DetailItem>
-            <DetailItem
-              label={intl.get('reference')}
-              children={defaultTo(vendorCredit.reference_no, '-')}
-            />
+            <DetailItem label={intl.get('reference')} children={defaultTo(vendorCredit.reference_no, '-')} />
             <DetailItem
               label={<T id={'vendor_credit.drawer.label_created_at'} />}
               children={<FormatDate value={vendorCredit.created_at} />}
diff --git a/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsHeader.tsx b/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsHeader.tsx
index d40fb8449..4933f5816 100644
--- a/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsHeader.tsx
@@ -18,27 +18,16 @@ export default function VendorDetailsHeader() {
 
   return (
     <div className={clsx(Style.root_content)}>
-      <DetailsMenu
-        direction={'vertical'}
-        className={clsx(Style.root_content_primary)}
-      >
-        <DetailItem
-          name={'outstanding-payable'}
-          label={<T id={'vendor.drawer.label.outstanding_payable'} />}
-        >
-          <h3 class="big-number">{vendor.formatted_balance}</h3>
+      <DetailsMenu direction={'vertical'} className={clsx(Style.root_content_primary)}>
+        <DetailItem name={'outstanding-payable'} label={<T id={'vendor.drawer.label.outstanding_payable'} />}>
+          <h3 className="big-number">{vendor.formatted_balance}</h3>
         </DetailItem>
 
-        <DetailItem label={<T id={'vendor.drawer.label.unused_credits'} />}>
-          0
-        </DetailItem>
+        <DetailItem label={<T id={'vendor.drawer.label.unused_credits'} />}>0</DetailItem>
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'} minLabelSize={'175px'}>
-        <DetailItem
-          label={<T id={'vendor.drawer.label.vendor'} />}
-          name={'name'}
-        >
+        <DetailItem label={<T id={'vendor.drawer.label.vendor'} />} name={'name'}>
           <strong>{vendor?.display_name}</strong>
         </DetailItem>
 
@@ -46,19 +35,13 @@ export default function VendorDetailsHeader() {
           label={<T id={'vendor.drawer.label.company_name'} />}
           children={defaultTo(vendor?.company_name, '--')}
         />
-        <DetailItem
-          label={intl.get('email')}
-          children={defaultTo(vendor.email, '--')}
-        />
+        <DetailItem label={intl.get('email')} children={defaultTo(vendor.email, '--')} />
         <DetailItem label={<T id={'vendor.drawer.label.phone_number'} />}>
           <div>{vendor?.personal_phone} </div>
           <div>{vendor?.work_phone} </div>
         </DetailItem>
 
-        <DetailItem
-          label={<T id={'vendor.drawer.label.website'} />}
-          children={defaultTo(vendor?.website, '--')}
-        />
+        <DetailItem label={<T id={'vendor.drawer.label.website'} />} children={defaultTo(vendor?.website, '--')} />
         <DetailItem
           label={<T id={'vendor.drawer.label.opening_balance'} />}
           children={vendor?.formatted_opening_balance}
@@ -67,15 +50,8 @@ export default function VendorDetailsHeader() {
           label={<T id={'vendor.drawer.label.opening_balance_at'} />}
           children={vendor?.formatted_opening_balance_at}
         />
-        <DetailItem
-          label={<T id={'vendor.drawer.label.currency'} />}
-          children={vendor?.currency_code}
-        />
-        <DetailItem
-          label={<T id={'vendor.drawer.label.note'} />}
-          children={defaultTo(vendor?.note, '--')}
-
-        />
+        <DetailItem label={<T id={'vendor.drawer.label.currency'} />} children={vendor?.currency_code} />
+        <DetailItem label={<T id={'vendor.drawer.label.note'} />} children={defaultTo(vendor?.note, '--')} />
       </DetailsMenu>
     </div>
   );
diff --git a/packages/webapp/src/containers/Entries/withExRateItemEntriesPriceRecalc.tsx b/packages/webapp/src/containers/Entries/withExRateItemEntriesPriceRecalc.tsx
index eae5972af..a0ebe33ff 100644
--- a/packages/webapp/src/containers/Entries/withExRateItemEntriesPriceRecalc.tsx
+++ b/packages/webapp/src/containers/Entries/withExRateItemEntriesPriceRecalc.tsx
@@ -1,38 +1,45 @@
 import { useCurrentOrganization } from '@/hooks/state';
-// @ts-nocheck
 import { useFormikContext } from 'formik';
-import { useCallback, useEffect } from 'react';
+import React, { ComponentType, ReactNode, useCallback, useEffect } from 'react';
 import { useAutoExRateContext } from './AutoExchangeProvider';
 import { useUpdateEntriesOnExchangeRateChange } from './useUpdateEntriesOnExchangeRateChange';
 
+type WithExtraProps<P> = P & {
+  onRecalcConfirm?: ({ exchangeRate, oldExchangeRate }: { exchangeRate: number; oldExchangeRate: number }) => void;
+};
+
 /**
  * Re-calculate the item entries prices based on the old exchange rate.
  * @param {InvoiceExchangeRateInputFieldRoot} Component
  * @returns {JSX.Element}
  */
-export const withExchangeRateItemEntriesPriceRecalc = (Component) => (props) => {
-  const { setFieldValue } = useFormikContext();
-  const updateChangeExRate = useUpdateEntriesOnExchangeRateChange();
+export const withExchangeRateItemEntriesPriceRecalc =
+  <P extends {}>(Component: ComponentType<WithExtraProps<P>>) =>
+  (props: P) => {
+    const { setFieldValue } = useFormikContext();
+    const updateChangeExRate = useUpdateEntriesOnExchangeRateChange();
 
-  return (
-    <Component
-      onRecalcConfirm={({ exchangeRate, oldExchangeRate }) => {
-        setFieldValue('entries', updateChangeExRate(oldExchangeRate, exchangeRate));
-      }}
-      {...props}
-    />
-  );
-};
+    return (
+      // @ts-ignore - Ignore the type error for now, we'll fix later
+      <Component
+        {...props}
+        onRecalcConfirm={({ exchangeRate, oldExchangeRate }) => {
+          setFieldValue('entries', updateChangeExRate(oldExchangeRate, exchangeRate));
+        }}
+      />
+    );
+  };
 
 /**
  * Injects the loading props to the exchange rate field.
  * @param Component
  * @returns {}
  */
-export const withExchangeRateFetchingLoading = (Component) => (props) => {
+export const withExchangeRateFetchingLoading = (Component: JSX.IntrinsicAttributes) => (props: any) => {
   const { isAutoExchangeRateLoading } = useAutoExRateContext();
 
   return (
+    // @ts-ignore - Ignore the type error for now, we'll fix later
     <Component
       isLoading={isAutoExchangeRateLoading}
       inputGroupProps={{
@@ -48,6 +55,7 @@ export const withExchangeRateFetchingLoading = (Component) => (props) => {
  */
 export const useCustomerUpdateExRate = () => {
   const { setFieldValue, values } = useFormikContext();
+  // @ts-ignore - Ignore the type error for now, we'll fix later
   const { setAutoExRateCurrency } = useAutoExRateContext();
 
   const updateEntriesOnExChange = useUpdateEntriesOnExchangeRateChange();
@@ -62,13 +70,15 @@ export const useCustomerUpdateExRate = () => {
 
       // If the customer's currency code equals the same base currency.
       if (customer.currency_code === currentCompany.base_currency) {
-        setFieldValue('exchange_rate', DEFAULT_EX_RATE + '');
+        setFieldValue('exchange_rate', `${DEFAULT_EX_RATE}`);
+        // @ts-ignore - Ignore the type error for now, we'll fix later
         setFieldValue('entries', updateEntriesOnExChange(values.exchange_rate, DEFAULT_EX_RATE));
       } else {
         // Sets the currency code to fetch exchange rate of the given currency code.
         setAutoExRateCurrency(customer?.currency_code);
       }
     },
+    // @ts-ignore - Ignore the type error for now, we'll fix later
     [currentCompany.base_currency, setAutoExRateCurrency, setFieldValue, updateEntriesOnExChange, values.exchange_rate],
   );
 };
@@ -85,6 +95,7 @@ interface UseSyncExRateToFormProps {
  */
 export const useSyncExRateToForm = ({ onSynced }: UseSyncExRateToFormProps) => {
   const { setFieldValue, values } = useFormikContext();
+  // @ts-ignore - Ignore the type error for now, we'll fix later
   const { autoExRateCurrency, autoExchangeRate, isAutoExchangeRateLoading } = useAutoExRateContext();
   const updateEntriesOnExChange = useUpdateEntriesOnExchangeRateChange();
 
@@ -94,8 +105,8 @@ export const useSyncExRateToForm = ({ onSynced }: UseSyncExRateToFormProps) => {
       // Sets a default ex. rate to 1 in case the exchange rate service wasn't configured.
       // or returned an error from the server-side.
       const exchangeRate = autoExchangeRate?.exchange_rate || 1;
-
-      setFieldValue('exchange_rate', exchangeRate + '');
+      setFieldValue('exchange_rate', `${exchangeRate}`);
+      // @ts-ignore - Ignore the type error for now, we'll fix later
       setFieldValue('entries', updateEntriesOnExChange(values.exchange_rate, exchangeRate));
       onSynced?.();
     }
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx
index 3865f9519..ffed8692b 100644
--- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx
@@ -16,10 +16,7 @@ import withARAgingSummaryActions from './withARAgingSummaryActions';
 import { compose, transformToForm } from '@/utils';
 import { useFeatureCan } from '@/hooks/state';
 import { Features } from '@/constants';
-import {
-  getARAgingSummaryQuerySchema,
-  getDefaultARAgingSummaryQuery,
-} from './common';
+import { getARAgingSummaryQuerySchema, getDefaultARAgingSummaryQuery } from './common';
 
 /**
  * AR Aging Summary Report - Drawer Header.
@@ -69,32 +66,17 @@ function ARAgingSummaryHeader({
   const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
-    <ARAgingDrawerHeader
-      isOpen={isFilterDrawerOpen}
-      drawerProps={{ onClose: handleDrawerClose }}
-    >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-      >
+    <ARAgingDrawerHeader isOpen={isFilterDrawerOpen} drawerProps={{ onClose: handleDrawerClose }}>
+      <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<ARAgingSummaryHeaderGeneral />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<ARAgingSummaryHeaderGeneral />} />
             {isBranchesFeatureCan && (
-              <Tab
-                id="dimensions"
-                title={<T id={'dimensions'} />}
-                panel={<ARAgingSummaryHeaderDimensions />}
-              />
+              <Tab id="dimensions" title={<T id={'dimensions'} />} panel={<ARAgingSummaryHeaderDimensions />} />
             )}
           </Tabs>
 
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx
index d44d24fc5..4c712223a 100644
--- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx
@@ -18,10 +18,7 @@ import BalanceSheetHeaderDimensionsPanel from './BalanceSheetHeaderDimensionsPan
 import FinancialStatementHeader from '../../FinancialStatements/FinancialStatementHeader';
 
 import { compose, transformToForm } from '@/utils';
-import {
-  getBalanceSheetHeaderValidationSchema,
-  getDefaultBalanceSheetQuery,
-} from './utils';
+import { getBalanceSheetHeaderValidationSchema, getDefaultBalanceSheetQuery } from './utils';
 
 /**
  * Balance sheet header.
@@ -77,18 +74,10 @@ function BalanceSheetHeader({
         onClose: handleDrawerClose,
       }}
     >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-      >
+      <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<BalanceSheetHeaderGeneralPanal />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<BalanceSheetHeaderGeneralPanal />} />
             <Tab
               id="comparison"
               title={<T id={'balance_sheet.comparisons'} />}
@@ -103,7 +92,7 @@ function BalanceSheetHeader({
             )}
           </Tabs>
 
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.tsx b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.tsx
index 24ad29c21..20e145050 100644
--- a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.tsx
@@ -49,10 +49,7 @@ function CashFlowStatementHeader({
   const validationSchema = Yup.object().shape({
     dateRange: Yup.string().optional(),
     fromDate: Yup.date().required().label(intl.get('fromDate')),
-    toDate: Yup.date()
-      .min(Yup.ref('fromDate'))
-      .required()
-      .label(intl.get('toDate')),
+    toDate: Yup.date().min(Yup.ref('fromDate')).required().label(intl.get('toDate')),
     displayColumnsType: Yup.string(),
   });
 
@@ -73,32 +70,17 @@ function CashFlowStatementHeader({
   const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
-    <FinancialStatementHeader
-      isOpen={isFilterDrawerOpen}
-      drawerProps={{ onClose: handleDrawerClose }}
-    >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-      >
+    <FinancialStatementHeader isOpen={isFilterDrawerOpen} drawerProps={{ onClose: handleDrawerClose }}>
+      <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<CashFlowStatementGeneralPanel />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<CashFlowStatementGeneralPanel />} />
             {isBranchesFeatureCan && (
-              <Tab
-                id="dimensions"
-                title={<T id={'dimensions'} />}
-                panel={<CashFlowStatementDimensionsPanel />}
-              />
+              <Tab id="dimensions" title={<T id={'dimensions'} />} panel={<CashFlowStatementDimensionsPanel />} />
             )}
           </Tabs>
 
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx
index a2a32adad..638b87b06 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx
@@ -60,25 +60,14 @@ function CustomersBalanceSummaryHeader({
   };
 
   return (
-    <CustomerBalanceDrawerHeader
-      isOpen={customersBalanceDrawerFilter}
-      drawerProps={{ onClose: handleDrawerClose }}
-    >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-      >
+    <CustomerBalanceDrawerHeader isOpen={customersBalanceDrawerFilter} drawerProps={{ onClose: handleDrawerClose }}>
+      <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<CustomersBalanceSummaryGeneralPanel />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<CustomersBalanceSummaryGeneralPanel />} />
           </Tabs>
 
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx
index 3df138303..e705dec72 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx
@@ -13,10 +13,7 @@ import withCustomersTransactions from './withCustomersTransactions';
 import withCustomersTransactionsActions from './withCustomersTransactionsActions';
 
 import { compose, transformToForm } from '@/utils';
-import {
-  getCustomersTransactionsDefaultQuery,
-  getCustomersTransactionsQuerySchema,
-} from './_utils';
+import { getCustomersTransactionsDefaultQuery, getCustomersTransactionsQuerySchema } from './_utils';
 
 /**
  * Customers transactions header.
@@ -61,25 +58,14 @@ function CustomersTransactionsHeader({
   };
 
   return (
-    <CustomerTransactionsDrawerHeader
-      isOpen={isFilterDrawerOpen}
-      drawerProps={{ onClose: handleDrawerClose }}
-    >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-      >
+    <CustomerTransactionsDrawerHeader isOpen={isFilterDrawerOpen} drawerProps={{ onClose: handleDrawerClose }}>
+      <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<CustomersTransactionsHeaderGeneralPanel />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<CustomersTransactionsHeaderGeneralPanel />} />
           </Tabs>
 
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/FinancialReports.tsx b/packages/webapp/src/containers/FinancialStatements/FinancialReports.tsx
index bde19bad6..d3cdc64c3 100644
--- a/packages/webapp/src/containers/FinancialStatements/FinancialReports.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/FinancialReports.tsx
@@ -9,21 +9,21 @@ import '@/style/pages/FinancialStatements/FinancialSheets.scss';
 
 function FinancialReportsItem({ title, desc, link }) {
   return (
-    <div class="financial-reports__item">
-      <Link class="title" to={link}>
+    <div className="financial-reports__item">
+      <Link className="title" to={link}>
         {title}
       </Link>
-      <p class="desc">{desc}</p>
+      <p className="desc">{desc}</p>
     </div>
   );
 }
 
 function FinancialReportsSection({ sectionTitle, reports }) {
   return (
-    <div class="financial-reports__section">
-      <div class="section-title">{sectionTitle}</div>
+    <div className="financial-reports__section">
+      <div className="section-title">{sectionTitle}</div>
 
-      <div class="financial-reports__list">
+      <div className="financial-reports__list">
         <For render={FinancialReportsItem} of={reports} />
       </div>
     </div>
@@ -38,7 +38,7 @@ export default function FinancialReports() {
 
   return (
     <DashboardInsider name={'financial-reports'}>
-      <div class="financial-reports">
+      <div className="financial-reports">
         <For render={FinancialReportsSection} of={financialReportMenu} />
       </div>
     </DashboardInsider>
diff --git a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx
index f34ad4e75..75d267461 100644
--- a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx
@@ -6,10 +6,7 @@ import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
 
 import { FormattedMessage as T } from '@/components';
-import {
-  getDefaultGeneralLedgerQuery,
-  getGeneralLedgerQuerySchema,
-} from './common';
+import { getDefaultGeneralLedgerQuery, getGeneralLedgerQuerySchema } from './common';
 import { compose, transformToForm, saveInvoke } from '@/utils';
 
 import FinancialStatementHeader from '../FinancialStatementHeader';
@@ -72,32 +69,17 @@ function GeneralLedgerHeader({
   const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
-    <GeneralLedgerDrawerHeader
-      isOpen={isFilterDrawerOpen}
-      drawerProps={{ onClose: handleDrawerClose }}
-    >
-      <Formik
-        validationSchema={validationSchema}
-        initialValues={initialValues}
-        onSubmit={handleSubmit}
-      >
+    <GeneralLedgerDrawerHeader isOpen={isFilterDrawerOpen} drawerProps={{ onClose: handleDrawerClose }}>
+      <Formik validationSchema={validationSchema} initialValues={initialValues} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<GeneralLedgerHeaderGeneralPane />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<GeneralLedgerHeaderGeneralPane />} />
             {isBranchesFeatureCan && (
-              <Tab
-                id="dimensions"
-                title={<T id={'dimensions'} />}
-                panel={<GeneralLedgerHeaderDimensionsPanel />}
-              />
+              <Tab id="dimensions" title={<T id={'dimensions'} />} panel={<GeneralLedgerHeaderDimensionsPanel />} />
             )}
           </Tabs>
 
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx
index 42dca6892..6bc83f6d7 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx
@@ -15,10 +15,7 @@ import InventoryItemDetailsHeaderDimensionsPanel from './InventoryItemDetailsHea
 import withInventoryItemDetails from './withInventoryItemDetails';
 import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
 
-import {
-  getInventoryItemDetailsDefaultQuery,
-  getInventoryItemDetailsQuerySchema,
-} from './utils2';
+import { getInventoryItemDetailsDefaultQuery, getInventoryItemDetailsQuerySchema } from './utils2';
 import { compose, transformToForm } from '@/utils';
 import { useFeatureCan } from '@/hooks/state';
 import { Features } from '@/constants';
@@ -73,22 +70,11 @@ function InventoryItemDetailsHeader({
   const isWarehousesFeatureCan = featureCan(Features.Warehouses);
 
   return (
-    <InventoryItemDetailsDrawerHeader
-      isOpen={isFilterDrawerOpen}
-      drawerProps={{ onClose: handleDrawerClose }}
-    >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-      >
+    <InventoryItemDetailsDrawerHeader isOpen={isFilterDrawerOpen} drawerProps={{ onClose: handleDrawerClose }}>
+      <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<InventoryItemDetailsHeaderGeneralPanel />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<InventoryItemDetailsHeaderGeneralPanel />} />
             {(isBranchesFeatureCan || isWarehousesFeatureCan) && (
               <Tab
                 id="dimensions"
@@ -97,7 +83,7 @@ function InventoryItemDetailsHeader({
               />
             )}
           </Tabs>
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx
index 1d33315fc..0351caeb8 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx
@@ -16,10 +16,7 @@ import withInventoryValuationActions from './withInventoryValuationActions';
 import { compose, transformToForm } from '@/utils';
 import { useFeatureCan } from '@/hooks/state';
 import { Features } from '@/constants';
-import {
-  getInventoryValuationQuery,
-  getInventoryValuationQuerySchema,
-} from './utils';
+import { getInventoryValuationQuery, getInventoryValuationQuerySchema } from './utils';
 
 /**
  * inventory valuation header.
@@ -71,22 +68,11 @@ function InventoryValuationHeader({
   const isWarehousesFeatureCan = featureCan(Features.Warehouses);
 
   return (
-    <InventoryValuationDrawerHeader
-      isOpen={isFilterDrawerOpen}
-      drawerProps={{ onClose: handleDrawerClose }}
-    >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-      >
+    <InventoryValuationDrawerHeader isOpen={isFilterDrawerOpen} drawerProps={{ onClose: handleDrawerClose }}>
+      <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<InventoryValuationHeaderGeneralPanel />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<InventoryValuationHeaderGeneralPanel />} />
             {(isBranchesFeatureCan || isWarehousesFeatureCan) && (
               <Tab
                 id="dimensions"
@@ -95,7 +81,7 @@ function InventoryValuationHeader({
               />
             )}
           </Tabs>
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/Journal/JournalHeader.tsx b/packages/webapp/src/containers/FinancialStatements/Journal/JournalHeader.tsx
index 1274a7573..0e136c0c5 100644
--- a/packages/webapp/src/containers/FinancialStatements/Journal/JournalHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/Journal/JournalHeader.tsx
@@ -58,25 +58,14 @@ function JournalHeader({
   };
 
   return (
-    <JournalDrawerHeader
-      isOpen={journalSheetDrawerFilter}
-      drawerProps={{ onClose: handleDrawerClose }}
-    >
-      <Formik
-        initialValues={initialValues}
-        onSubmit={handleSubmit}
-        validationSchema={validationSchema}
-      >
+    <JournalDrawerHeader isOpen={journalSheetDrawerFilter} drawerProps={{ onClose: handleDrawerClose }}>
+      <Formik initialValues={initialValues} onSubmit={handleSubmit} validationSchema={validationSchema}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<JournalSheetHeaderGeneral />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<JournalSheetHeaderGeneral />} />
           </Tabs>
 
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx
index bfda8f7cc..e8fec4c72 100644
--- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx
@@ -62,22 +62,11 @@ function ProfitLossHeader({
   const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
-    <ProfitLossSheetHeader
-      isOpen={profitLossDrawerFilter}
-      drawerProps={{ onClose: handleDrawerClose }}
-    >
-      <Formik
-        validationSchema={validationSchema}
-        initialValues={initialValues}
-        onSubmit={handleSubmit}
-      >
+    <ProfitLossSheetHeader isOpen={profitLossDrawerFilter} drawerProps={{ onClose: handleDrawerClose }}>
+      <Formik validationSchema={validationSchema} initialValues={initialValues} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<ProfitLossSheetHeaderGeneralPane />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<ProfitLossSheetHeaderGeneralPane />} />
             <Tab
               id="comparison"
               title={<T id={'profit_loss_sheet.comparisons'} />}
@@ -92,7 +81,7 @@ function ProfitLossHeader({
             )}
           </Tabs>
 
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.tsx b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.tsx
index 66f37717b..d83f7c1eb 100644
--- a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.tsx
@@ -13,10 +13,7 @@ import withPurchasesByItems from './withPurchasesByItems';
 import withPurchasesByItemsActions from './withPurchasesByItemsActions';
 
 import { compose, transformToForm } from '@/utils';
-import {
-  getDefaultPurchasesByItemsQuery,
-  getPurchasesByItemsQuerySchema,
-} from './utils';
+import { getDefaultPurchasesByItemsQuery, getPurchasesByItemsQuerySchema } from './utils';
 
 /**
  * Purchases by items header.
@@ -59,24 +56,13 @@ function PurchasesByItemsHeader({
   };
 
   return (
-    <PurchasesByItemsDrawerHeader
-      isOpen={purchasesByItemsDrawerFilter}
-      drawerProps={{ onClose: handleDrawerClose }}
-    >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-      >
+    <PurchasesByItemsDrawerHeader isOpen={purchasesByItemsDrawerFilter} drawerProps={{ onClose: handleDrawerClose }}>
+      <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<PurchasesByItemsGeneralPanel />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<PurchasesByItemsGeneralPanel />} />
           </Tabs>
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossHeader.tsx b/packages/webapp/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossHeader.tsx
index bc882dad5..0706025d6 100644
--- a/packages/webapp/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossHeader.tsx
@@ -49,10 +49,7 @@ function RealizedGainOrLossHeader({
   const validationSchema = Yup.object().shape({
     dateRange: Yup.string().optional(),
     fromDate: Yup.date().required().label(intl.get('fromDate')),
-    toDate: Yup.date()
-      .min(Yup.ref('fromDate'))
-      .required()
-      .label(intl.get('toDate')),
+    toDate: Yup.date().min(Yup.ref('fromDate')).required().label(intl.get('toDate')),
     displayColumnsType: Yup.string(),
   });
 
@@ -69,25 +66,14 @@ function RealizedGainOrLossHeader({
   };
 
   return (
-    <FinancialStatementHeader
-      isOpen={isFilterDrawerOpen}
-      drawerProps={{ onClose: handleDrawerClose }}
-    >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-      >
+    <FinancialStatementHeader isOpen={isFilterDrawerOpen} drawerProps={{ onClose: handleDrawerClose }}>
+      <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<RealizedGainOrLossGeneralPanel />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<RealizedGainOrLossGeneralPanel />} />
           </Tabs>
 
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.tsx
index acdb67ee6..bc64128aa 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.tsx
@@ -13,10 +13,7 @@ import withSalesByItems from './withSalesByItems';
 import withSalesByItemsActions from './withSalesByItemsActions';
 
 import { compose, transformToForm } from '@/utils';
-import {
-  getDefaultSalesByItemsQuery,
-  getSalesByItemsQueryShema,
-} from './utils';
+import { getDefaultSalesByItemsQuery, getSalesByItemsQueryShema } from './utils';
 
 /**
  * Sales by items header.
@@ -66,24 +63,13 @@ function SalesByItemsHeader({
   };
 
   return (
-    <SalesByItemsDrawerHeader
-      isOpen={salesByItemsDrawerFilter}
-      drawerProps={{ onClose: handleDrawerClose }}
-    >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-      >
+    <SalesByItemsDrawerHeader isOpen={salesByItemsDrawerFilter} drawerProps={{ onClose: handleDrawerClose }}>
+      <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<SalesByItemsHeaderGeneralPanel />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<SalesByItemsHeaderGeneralPanel />} />
           </Tabs>
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryHeader.tsx b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryHeader.tsx
index 8e13e5e5e..08e541652 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryHeader.tsx
@@ -10,10 +10,7 @@ import { useFeatureCan } from '@/hooks/state';
 import FinancialStatementHeader from '../../FinancialStatements/FinancialStatementHeader';
 
 import { compose, transformToForm } from '@/utils';
-import {
-  getDefaultSalesTaxLiablitySummaryQuery,
-  getSalesTaxLiabilitySummaryQueryValidation,
-} from './utils';
+import { getDefaultSalesTaxLiablitySummaryQuery, getSalesTaxLiabilitySummaryQueryValidation } from './utils';
 import withSalesTaxLiabilitySummary from './withSalesTaxLiabilitySummary';
 import withSalesTaxLiabilitySummaryActions from './withSalesTaxLiabilitySummaryActions';
 import { SalesTaxLiabilitySummaryHeaderGeneral } from './SalesTaxLiabilitySummaryHeaderGeneralPanel';
@@ -72,21 +69,13 @@ function SalesTaxLiabilitySummaryHeader({
         onClose: handleDrawerClose,
       }}
     >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-      >
+      <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<SalesTaxLiabilitySummaryHeaderGeneral />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<SalesTaxLiabilitySummaryHeaderGeneral />} />
           </Tabs>
 
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx
index 7cb170509..a5b1dec94 100644
--- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx
@@ -37,10 +37,7 @@ function TrialBalanceSheetHeader({
   // Form validation schema.
   const validationSchema = Yup.object().shape({
     fromDate: Yup.date().required().label(intl.get('from_date')),
-    toDate: Yup.date()
-      .min(Yup.ref('fromDate'))
-      .required()
-      .label(intl.get('to_date')),
+    toDate: Yup.date().min(Yup.ref('fromDate')).required().label(intl.get('to_date')),
   });
   // Detarmines whether the feature is enabled.
   const { featureCan } = useFeatureCan();
@@ -80,32 +77,17 @@ function TrialBalanceSheetHeader({
   };
 
   return (
-    <TrialBalanceSheetDrawerHeader
-      isOpen={trialBalanceDrawerFilter}
-      drawerProps={{ onClose: handleDrawerClose }}
-    >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-      >
+    <TrialBalanceSheetDrawerHeader isOpen={trialBalanceDrawerFilter} drawerProps={{ onClose: handleDrawerClose }}>
+      <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<TrialBalanceSheetHeaderGeneralPanel />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<TrialBalanceSheetHeaderGeneralPanel />} />
             {isBranchesFeatureCan && (
-              <Tab
-                id="dimensions"
-                title={<T id={'dimensions'} />}
-                panel={<TrialBalanceSheetHeaderDimensionsPanel />}
-              />
+              <Tab id="dimensions" title={<T id={'dimensions'} />} panel={<TrialBalanceSheetHeaderDimensionsPanel />} />
             )}
           </Tabs>
 
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossHeader.tsx b/packages/webapp/src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossHeader.tsx
index 7235b0fe1..adbcf3cef 100644
--- a/packages/webapp/src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossHeader.tsx
@@ -49,10 +49,7 @@ function UnrealizedGainOrLossHeader({
   const validationSchema = Yup.object().shape({
     dateRange: Yup.string().optional(),
     fromDate: Yup.date().required().label(intl.get('fromDate')),
-    toDate: Yup.date()
-      .min(Yup.ref('fromDate'))
-      .required()
-      .label(intl.get('toDate')),
+    toDate: Yup.date().min(Yup.ref('fromDate')).required().label(intl.get('toDate')),
     displayColumnsType: Yup.string(),
   });
 
@@ -69,25 +66,14 @@ function UnrealizedGainOrLossHeader({
   };
 
   return (
-    <FinancialStatementHeader
-      isOpen={isFilterDrawerOpen}
-      drawerProps={{ onClose: handleDrawerClose }}
-    >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-      >
+    <FinancialStatementHeader isOpen={isFilterDrawerOpen} drawerProps={{ onClose: handleDrawerClose }}>
+      <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<UnrealizedGainOrLossGeneralPanel />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<UnrealizedGainOrLossGeneralPanel />} />
           </Tabs>
 
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.tsx
index df32211c0..57aead17d 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.tsx
@@ -13,10 +13,7 @@ import withVendorsTransaction from './withVendorsTransaction';
 import withVendorsTransactionsActions from './withVendorsTransactionsActions';
 
 import { compose, transformToForm } from '@/utils';
-import {
-  getVendorTransactionsQuerySchema,
-  getVendorsTransactionsDefaultQuery,
-} from './_utils';
+import { getVendorTransactionsQuerySchema, getVendorsTransactionsDefaultQuery } from './_utils';
 
 /**
  * Vendors transactions header.
@@ -60,25 +57,14 @@ function VendorsTransactionsHeader({
   };
 
   return (
-    <FinancialStatementHeader
-      isOpen={isFilterDrawerOpen}
-      drawerProps={{ onClose: handleDrawerClose }}
-    >
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-      >
+    <FinancialStatementHeader isOpen={isFilterDrawerOpen} drawerProps={{ onClose: handleDrawerClose }}>
+      <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
         <Form>
           <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
-            <Tab
-              id="general"
-              title={<T id={'general'} />}
-              panel={<VendorsTransactionsHeaderGeneralPanel />}
-            />
+            <Tab id="general" title={<T id={'general'} />} panel={<VendorsTransactionsHeaderGeneralPanel />} />
           </Tabs>
 
-          <div class="financial-header-drawer__footer">
+          <div className="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
diff --git a/packages/webapp/src/containers/Items/ItemFormBody.tsx b/packages/webapp/src/containers/Items/ItemFormBody.tsx
index 7e5782599..cfd711b58 100644
--- a/packages/webapp/src/containers/Items/ItemFormBody.tsx
+++ b/packages/webapp/src/containers/Items/ItemFormBody.tsx
@@ -1,22 +1,8 @@
 // @ts-nocheck
 import React from 'react';
 import { useFormikContext, FastField, ErrorMessage } from 'formik';
-import {
-  FormGroup,
-  Classes,
-  TextArea,
-  Checkbox,
-  ControlGroup,
-} from '@blueprintjs/core';
-import {
-  AccountsSelect,
-  MoneyInputGroup,
-  Col,
-  Row,
-  Hint,
-  InputPrependText,
-  FFormGroup,
-} from '@/components';
+import { FormGroup, Classes, TextArea, Checkbox, ControlGroup } from '@blueprintjs/core';
+import { AccountsSelect, MoneyInputGroup, Col, Row, Hint, InputPrependText, FFormGroup } from '@/components';
 import { FormattedMessage as T } from '@/components';
 
 import { useItemFormContext } from './ItemFormProvider';
@@ -42,7 +28,7 @@ function ItemFormBody({ organization: { base_currency } }) {
   const { values } = useFormikContext();
 
   return (
-    <div class="page-form__section page-form__section--selling-cost">
+    <div className="page-form__section page-form__section--selling-cost">
       <Row>
         <Col xs={6}>
           {/*------------- Purchasable checbox ------------- */}
@@ -64,11 +50,7 @@ function ItemFormBody({ organization: { base_currency } }) {
           </FastField>
 
           {/*------------- Selling price ------------- */}
-          <FastField
-            name={'sell_price'}
-            sellable={values.sellable}
-            shouldUpdate={sellPriceFieldShouldUpdate}
-          >
+          <FastField name={'sell_price'} sellable={values.sellable} shouldUpdate={sellPriceFieldShouldUpdate}>
             {({ form, field: { value }, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'selling_price'} />}
@@ -96,9 +78,7 @@ function ItemFormBody({ organization: { base_currency } }) {
           <FFormGroup
             label={<T id={'account'} />}
             name={'sell_account_id'}
-            labelInfo={
-              <Hint content={<T id={'item.field.sell_account.hint'} />} />
-            }
+            labelInfo={<Hint content={<T id={'item.field.sell_account.hint'} />} />}
             inline={true}
             items={accounts}
             sellable={values.sellable}
@@ -118,16 +98,8 @@ function ItemFormBody({ organization: { base_currency } }) {
           </FFormGroup>
 
           {/*------------- Sell Tax Rate ------------- */}
-          <FFormGroup
-            name={'sell_tax_rate_id'}
-            label={'Tax Rate'}
-            inline={true}
-          >
-            <TaxRatesSelect
-              name={'sell_tax_rate_id'}
-              items={taxRates}
-              allowCreate
-            />
+          <FFormGroup name={'sell_tax_rate_id'} label={'Tax Rate'} inline={true}>
+            <TaxRatesSelect name={'sell_tax_rate_id'} items={taxRates} allowCreate />
           </FFormGroup>
 
           <FastField
@@ -143,12 +115,7 @@ function ItemFormBody({ organization: { base_currency } }) {
                 helperText={<ErrorMessage name={'description'} />}
                 inline={true}
               >
-                <TextArea
-                  growVertically={true}
-                  height={280}
-                  {...field}
-                  disabled={!values.sellable}
-                />
+                <TextArea growVertically={true} height={280} {...field} disabled={!values.sellable} />
               </FormGroup>
             )}
           </FastField>
@@ -173,11 +140,7 @@ function ItemFormBody({ organization: { base_currency } }) {
           </FastField>
 
           {/*------------- Cost price ------------- */}
-          <FastField
-            name={'cost_price'}
-            purchasable={values.purchasable}
-            shouldUpdate={costPriceFieldShouldUpdate}
-          >
+          <FastField name={'cost_price'} purchasable={values.purchasable} shouldUpdate={costPriceFieldShouldUpdate}>
             {({ field, form, field: { value }, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'cost_price'} />}
@@ -208,9 +171,7 @@ function ItemFormBody({ organization: { base_currency } }) {
             items={accounts}
             shouldUpdate={costAccountFieldShouldUpdate}
             label={<T id={'account'} />}
-            labelInfo={
-              <Hint content={<T id={'item.field.cost_account.hint'} />} />
-            }
+            labelInfo={<Hint content={<T id={'item.field.cost_account.hint'} />} />}
             inline={true}
             fastField={true}
           >
@@ -259,12 +220,7 @@ function ItemFormBody({ organization: { base_currency } }) {
                 helperText={<ErrorMessage name={'description'} />}
                 inline={true}
               >
-                <TextArea
-                  growVertically={true}
-                  height={280}
-                  {...field}
-                  disabled={!values.purchasable}
-                />
+                <TextArea growVertically={true} height={280} {...field} disabled={!values.purchasable} />
               </FormGroup>
             )}
           </FastField>
diff --git a/packages/webapp/src/containers/Items/ItemFormFormik.tsx b/packages/webapp/src/containers/Items/ItemFormFormik.tsx
index 45bc74e92..c7a90e0b6 100644
--- a/packages/webapp/src/containers/Items/ItemFormFormik.tsx
+++ b/packages/webapp/src/containers/Items/ItemFormFormik.tsx
@@ -14,10 +14,7 @@ import ItemFormPrimarySection from './ItemFormPrimarySection';
 import ItemFormFloatingActions from './ItemFormFloatingActions';
 import ItemFormInventorySection from './ItemFormInventorySection';
 
-import {
-  transformSubmitRequestErrors,
-  useItemFormInitialValues,
-} from './utils';
+import { transformSubmitRequestErrors, useItemFormInitialValues } from './utils';
 import { useItemFormContext } from './ItemFormProvider';
 import { EditItemFormSchema, CreateItemFormSchema } from './ItemForm.schema';
 import { safeInvoke } from '@/utils';
@@ -34,15 +31,7 @@ export default function ItemFormFormik({
   className,
 }) {
   // Item form context.
-  const {
-    itemId,
-    item,
-    accounts,
-    createItemMutate,
-    editItemMutate,
-    submitPayload,
-    isNewMode,
-  } = useItemFormContext();
+  const { itemId, item, accounts, createItemMutate, editItemMutate, submitPayload, isNewMode } = useItemFormContext();
 
   // Initial values in create and edit mode.
   const initialValues = useItemFormInitialValues(item, initialValuesComponent);
@@ -58,9 +47,7 @@ export default function ItemFormFormik({
     const onSuccess = (response) => {
       AppToaster.show({
         message: intl.get(
-          isNewMode
-            ? 'the_item_has_been_created_successfully'
-            : 'the_item_has_been_edited_successfully',
+          isNewMode ? 'the_item_has_been_created_successfully' : 'the_item_has_been_edited_successfully',
           {
             number: itemId,
           },
@@ -90,9 +77,7 @@ export default function ItemFormFormik({
   };
 
   return (
-    <div
-      class={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_ITEM, className)}
-    >
+    <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_ITEM, className)}>
       <Formik
         enableReinitialize={true}
         validationSchema={isNewMode ? CreateItemFormSchema : EditItemFormSchema}
@@ -100,7 +85,7 @@ export default function ItemFormFormik({
         onSubmit={handleFormSubmit}
       >
         <Form>
-          <div class={classNames(CLASSES.PAGE_FORM_BODY)}>
+          <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
             <ItemFormPrimarySection />
             <ItemFormBody accounts={accounts} />
             <ItemFormInventorySection accounts={accounts} />
diff --git a/packages/webapp/src/containers/Items/ItemFormInventorySection.tsx b/packages/webapp/src/containers/Items/ItemFormInventorySection.tsx
index ce6874daf..748876edb 100644
--- a/packages/webapp/src/containers/Items/ItemFormInventorySection.tsx
+++ b/packages/webapp/src/containers/Items/ItemFormInventorySection.tsx
@@ -1,12 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import {
-  AccountsSelect,
-  FFormGroup,
-  FormattedMessage as T,
-  Col,
-  Row,
-} from '@/components';
+import { AccountsSelect, FFormGroup, FormattedMessage as T, Col, Row } from '@/components';
 
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 import { accountsFieldShouldUpdate } from './utils';
@@ -21,7 +15,7 @@ function ItemFormInventorySection({ organization: { base_currency } }) {
   const { accounts } = useItemFormContext();
 
   return (
-    <div class="page-form__section page-form__section--inventory">
+    <div className="page-form__section page-form__section--inventory">
       <h3>
         <T id={'inventory_information'} />
       </h3>
diff --git a/packages/webapp/src/containers/Items/ItemFormPrimarySection.tsx b/packages/webapp/src/containers/Items/ItemFormPrimarySection.tsx
index e822cf79e..f25b12c24 100644
--- a/packages/webapp/src/containers/Items/ItemFormPrimarySection.tsx
+++ b/packages/webapp/src/containers/Items/ItemFormPrimarySection.tsx
@@ -1,13 +1,6 @@
 // @ts-nocheck
 import React, { useEffect, useRef } from 'react';
-import {
-  FormGroup,
-  InputGroup,
-  RadioGroup,
-  Classes,
-  Radio,
-  Position,
-} from '@blueprintjs/core';
+import { FormGroup, InputGroup, RadioGroup, Classes, Radio, Position } from '@blueprintjs/core';
 import { ErrorMessage, FastField } from 'formik';
 import { CLASSES } from '@/constants/classes';
 import {
@@ -43,10 +36,10 @@ export default function ItemFormPrimarySection() {
 
   const itemTypeHintContent = (
     <>
-      <div class="mb1">
+      <div className="mb1">
         <FormattedHTMLMessage id={'services_that_you_provide_to_customers'} />
       </div>
-      <div class="mb1">
+      <div className="mb1">
         <FormattedHTMLMessage id={'products_you_buy_and_or_sell'} />
       </div>
     </>
@@ -63,10 +56,7 @@ export default function ItemFormPrimarySection() {
             labelInfo={
               <span>
                 <FieldRequiredHint />
-                <Hint
-                  content={itemTypeHintContent}
-                  position={Position.BOTTOM_LEFT}
-                />
+                <Hint content={itemTypeHintContent} position={Position.BOTTOM_LEFT} />
               </span>
             }
             className={'form-group--item-type'}
@@ -122,21 +112,13 @@ export default function ItemFormPrimarySection() {
                 helperText={<ErrorMessage name={'code'} />}
                 inline={true}
               >
-                <InputGroup
-                  medium={true}
-                  intent={inputIntent({ error, touched })}
-                  {...field}
-                />
+                <InputGroup medium={true} intent={inputIntent({ error, touched })} {...field} />
               </FormGroup>
             )}
           </FastField>
 
           {/*----------- Item category ----------*/}
-          <FastField
-            name={'category_id'}
-            categories={itemsCategories}
-            shouldUpdate={categoriesFieldShouldUpdate}
-          >
+          <FastField name={'category_id'} categories={itemsCategories} shouldUpdate={categoriesFieldShouldUpdate}>
             {({ form, field: { value }, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'category'} />}
diff --git a/packages/webapp/src/containers/Items/ItemsFooter.tsx b/packages/webapp/src/containers/Items/ItemsFooter.tsx
index 87bf354b2..b866491a4 100644
--- a/packages/webapp/src/containers/Items/ItemsFooter.tsx
+++ b/packages/webapp/src/containers/Items/ItemsFooter.tsx
@@ -3,14 +3,9 @@ import React from 'react';
 import { Intent, Button } from '@blueprintjs/core';
 import { FormattedMessage as T } from '@/components';
 
-export default function ItemFloatingFooter({
-  formik: { isSubmitting },
-  onSubmitClick,
-  onCancelClick,
-  itemDetail,
-}) {
+export default function ItemFloatingFooter({ formik: { isSubmitting }, onSubmitClick, onCancelClick, itemDetail }) {
   return (
-    <div class="form__floating-footer">
+    <div className="form__floating-footer">
       <Button
         intent={Intent.PRIMARY}
         disabled={isSubmitting}
diff --git a/packages/webapp/src/containers/Preferences/Currencies/CurrenciesActions.tsx b/packages/webapp/src/containers/Preferences/Currencies/CurrenciesActions.tsx
index 4340f504d..384b1fb69 100644
--- a/packages/webapp/src/containers/Preferences/Currencies/CurrenciesActions.tsx
+++ b/packages/webapp/src/containers/Preferences/Currencies/CurrenciesActions.tsx
@@ -11,12 +11,8 @@ function CurrenciesActions({ openDialog }) {
   }, [openDialog]);
 
   return (
-    <div class="users-actions">
-      <Button
-        icon={<Icon icon="plus" iconSize={12} />}
-        onClick={handleClickNewCurrency}
-        intent={Intent.PRIMARY}
-      >
+    <div className="users-actions">
+      <Button icon={<Icon icon="plus" iconSize={12} />} onClick={handleClickNewCurrency} intent={Intent.PRIMARY}>
         <T id={'new_currency'} />
       </Button>
     </div>
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 8a1f7325f..0e78f0507 100644
--- a/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/components.tsx
+++ b/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/components.tsx
@@ -4,10 +4,7 @@ import styled from 'styled-components';
 import { Field } from 'formik';
 import { Checkbox, Popover } from '@blueprintjs/core';
 
-import {
-  getPermissionsSchema,
-  ModulePermissionsStyle,
-} from '@/constants/permissionsSchema';
+import { getPermissionsSchema, ModulePermissionsStyle } from '@/constants/permissionsSchema';
 import { Card, If, ButtonLink, Choose, T } from '@/components';
 import {
   getSerivceColumnPermission,
@@ -25,25 +22,19 @@ const ModuleServiceContext = React.createContext();
  * Retrieves the module permissions provider.
  * @returns {React.JSX}
  */
-const useModulePermissionsProvider = () =>
-  React.useContext(ModulePermissionsContext);
+const useModulePermissionsProvider = () => React.useContext(ModulePermissionsContext);
 
 /**
  * Module permissions service context provider.
  */
-const useModulePermissionsServiceProvider = () =>
-  React.useContext(ModuleServiceContext);
+const useModulePermissionsServiceProvider = () => React.useContext(ModuleServiceContext);
 
 /**
  * Module permissions context state provider.
  * @returns {React.JSX}
  */
 function ModulePermissionsProvider({ module, children }) {
-  return (
-    <ModulePermissionsContext.Provider value={{ module }}>
-      {children}
-    </ModulePermissionsContext.Provider>
-  );
+  return <ModulePermissionsContext.Provider value={{ module }}>{children}</ModulePermissionsContext.Provider>;
 }
 
 /**
@@ -51,11 +42,7 @@ function ModulePermissionsProvider({ module, children }) {
  * @returns {React.JSX}
  */
 function ModulePermissionsServiceProvider({ service, children }) {
-  return (
-    <ModuleServiceContext.Provider value={{ service }}>
-      {children}
-    </ModuleServiceContext.Provider>
-  );
+  return <ModuleServiceContext.Provider value={{ service }}>{children}</ModuleServiceContext.Provider>;
 }
 
 /**
@@ -71,14 +58,11 @@ function PermissionBodyColumn({ column }) {
 
   // Display empty cell if the current column key has no related permissions.
   if (!permission) {
-    return <td class={'permission-checkbox'}></td>;
+    return <td className={'permission-checkbox'}></td>;
   }
   return (
-    <td class={'permission-checkbox'}>
-      <Field
-        name={`permissions.${service.subject}/${permission.key}`}
-        type="checkbox"
-      >
+    <td className={'permission-checkbox'}>
+      <Field name={`permissions.${service.subject}/${permission.key}`} type="checkbox">
         {({ field, form }) => (
           <PermissionCheckbox
             inline={true}
@@ -117,20 +101,13 @@ function ModuleExtraPermissionsPopover() {
 
       <ExtraPermissionsRoot>
         {extraPermissions.map((permission) => (
-          <Field
-            name={`permissions.${service.subject}/${permission.key}`}
-            type="checkbox"
-          >
+          <Field name={`permissions.${service.subject}/${permission.key}`} type="checkbox">
             {({ form, field }) => (
               <PermissionCheckbox
                 inline={true}
                 label={permission.label}
                 {...field}
-                onChange={handleCheckboxPermissionChange(
-                  form,
-                  permission,
-                  service,
-                )}
+                onChange={handleCheckboxPermissionChange(form, permission, service)}
               />
             )}
           </Field>
@@ -173,12 +150,12 @@ function ModulePermissionsTableHead() {
       <tr>
         <th></th>
         <If condition={serviceFullAccess}>
-          <th class={'full'}>
+          <th className={'full'}>
             <T id={'permissions.column.full_access'} />
           </th>
         </If>
         {columns.map((column) => (
-          <th class={'permission'}>{column.label}</th>
+          <th className={'permission'}>{column.label}</th>
         ))}
         <th></th>
       </tr>
@@ -199,15 +176,13 @@ function ModulePermissionsServiceFullAccess() {
 
   return (
     <If condition={module.serviceFullAccess}>
-      <td class="full-access-permission">
+      <td className="full-access-permission">
         <Field name={`serviceFullAccess.${service.subject}`} type="checkbox">
           {({ form, field }) => (
             <PermissionCheckbox
               inline={true}
               {...field}
-              indeterminate={
-                field.value === FULL_ACCESS_CHECKBOX_STATE.INDETARMINE
-              }
+              indeterminate={field.value === FULL_ACCESS_CHECKBOX_STATE.INDETARMINE}
               onChange={handleCheckboxFullAccessChange(service, form)}
             />
           )}
@@ -264,23 +239,16 @@ function ModuleVerticalTableCells() {
   const { service } = useModulePermissionsServiceProvider();
 
   return (
-    <td class={'permissions'}>
+    <td className={'permissions'}>
       {service.permissions.map((permission) => (
         <div>
-          <Field
-            name={`permissions.${service.subject}/${permission.key}`}
-            type="checkbox"
-          >
+          <Field name={`permissions.${service.subject}/${permission.key}`} type="checkbox">
             {({ form, field }) => (
               <PermissionCheckbox
                 inline={true}
                 label={permission.label}
                 {...field}
-                onChange={handleCheckboxPermissionChange(
-                  form,
-                  permission,
-                  service,
-                )}
+                onChange={handleCheckboxPermissionChange(form, permission, service)}
               />
             )}
           </Field>
@@ -304,7 +272,7 @@ function ModulePermissionsVerticalServices() {
           {module.services.map((service) => (
             <ModulePermissionsServiceProvider service={service}>
               <tr>
-                <td class={'service-label'}>{service.label} </td>
+                <td className={'service-label'}>{service.label} </td>
                 <ModuleVerticalTableCells />
               </tr>
             </ModulePermissionsServiceProvider>
@@ -325,9 +293,7 @@ function ModulePermissionsBody() {
   return (
     <ModulePermissionBodyRoot>
       <Choose>
-        <Choose.When
-          condition={module.type === ModulePermissionsStyle.Vertical}
-        >
+        <Choose.When condition={module.type === ModulePermissionsStyle.Vertical}>
           <ModulePermissionsVerticalServices />
         </Choose.When>
 
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx
index bd20a7c13..5f0e0e00c 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx
@@ -11,7 +11,7 @@ import { BillFormFooterRight } from './BillFormFooterRight';
 // Bill form floating actions.
 export default function BillFormFooter() {
   return (
-    <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
       <BillFooterPaper>
         <Row>
           <Col md={8}>
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx b/packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx
index b76a7f688..5638fee4f 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx
@@ -30,9 +30,7 @@ function BillUniversalSearchSelectComponent({
   return null;
 }
 
-export const BillUniversalSearchSelect = withDrawerActions(
-  BillUniversalSearchSelectComponent,
-);
+export const BillUniversalSearchSelect = withDrawerActions(BillUniversalSearchSelectComponent);
 
 /**
  * Status accessor.
@@ -41,21 +39,17 @@ export function BillStatus({ bill }) {
   return (
     <Choose>
       <Choose.When condition={bill.is_fully_paid && bill.is_open}>
-        <span class="fully-paid-text">
+        <span className="fully-paid-text">
           <T id={'paid'} />
         </span>
       </Choose.When>
       <Choose.When condition={bill.is_open}>
         <Choose>
           <Choose.When condition={bill.is_overdue}>
-            <span className={'overdue-status'}>
-              {intl.get('overdue_by', { overdue: bill.overdue_days })}
-            </span>
+            <span className={'overdue-status'}>{intl.get('overdue_by', { overdue: bill.overdue_days })}</span>
           </Choose.When>
           <Choose.Otherwise>
-            <span className={'due-status'}>
-              {intl.get('due_in', { due: bill.remaining_days })}
-            </span>
+            <span className={'due-status'}>{intl.get('due_in', { due: bill.remaining_days })}</span>
           </Choose.Otherwise>
         </Choose>
         <If condition={bill.is_partially_paid}>
@@ -67,7 +61,7 @@ export function BillStatus({ bill }) {
         </If>
       </Choose.When>
       <Choose.Otherwise>
-        <span class="draft">
+        <span className="draft">
           <T id={'draft'} />
         </span>
       </Choose.Otherwise>
@@ -78,26 +72,22 @@ export function BillStatus({ bill }) {
 /**
  * Bill universal search item.
  */
-export function BillUniversalSearchItem(
-  item,
-  { handleClick, modifiers, query },
-) {
+export function BillUniversalSearchItem(item, { handleClick, modifiers, query }) {
   return (
     <MenuItem
       active={modifiers.active}
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp4-text-muted">
-            {item.reference.bill_number}{' '}
-            <Icon icon={'caret-right-16'} iconSize={16} />
+          <span className="bp4-text-muted">
+            {item.reference.bill_number} <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_bill_date}
           </span>
         </div>
       }
       label={
         <>
-          <div class="amount">{item.reference.formatted_amount}</div>
+          <div className="amount">{item.reference.formatted_amount}</div>
           <BillStatus bill={item.reference} />
         </>
       }
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx
index 167f145aa..e05c7e4fb 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx
@@ -1,48 +1,18 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import {
-  Intent,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Tag,
-  ProgressBar,
-} from '@blueprintjs/core';
+import { Intent, Menu, MenuItem, MenuDivider, Tag, ProgressBar } from '@blueprintjs/core';
 import clsx from 'classnames';
-import {
-  FormatDateCell,
-  FormattedMessage as T,
-  Icon,
-  If,
-  Choose,
-  Can,
-} from '@/components';
-import {
-  formattedAmount,
-  safeCallback,
-  calculateStatus,
-} from '@/utils';
-import {
-  BillAction,
-  PaymentMadeAction,
-  AbilitySubject,
-} from '@/constants/abilityOption';
+import { FormatDateCell, FormattedMessage as T, Icon, If, Choose, Can } from '@/components';
+import { formattedAmount, safeCallback, calculateStatus } from '@/utils';
+import { BillAction, PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
 import { CLASSES } from '@/constants';
 
 /**
  * Actions menu.
  */
 export function ActionsMenu({
-  payload: {
-    onEdit,
-    onOpen,
-    onDelete,
-    onQuick,
-    onConvert,
-    onViewDetails,
-    onAllocateLandedCost,
-  },
+  payload: { onEdit, onOpen, onDelete, onQuick, onConvert, onViewDetails, onAllocateLandedCost },
   row: { original },
 }) {
   return (
@@ -54,11 +24,7 @@ export function ActionsMenu({
       />
       <Can I={BillAction.Edit} a={AbilitySubject.Bill}>
         <MenuDivider />
-        <MenuItem
-          icon={<Icon icon="pen-18" />}
-          text={intl.get('edit_bill')}
-          onClick={safeCallback(onEdit, original)}
-        />
+        <MenuItem icon={<Icon icon="pen-18" />} text={intl.get('edit_bill')} onClick={safeCallback(onEdit, original)} />
         <MenuItem
           icon={<Icon icon="convert_to" />}
           text={intl.get('bill.convert_to_credit_note')}
@@ -111,21 +77,17 @@ export function StatusAccessor(bill) {
           <span className={'fully-paid-icon'}>
             <Icon icon="small-tick" iconSize={18} />
           </span>
-          <span class="fully-paid-text">
+          <span className="fully-paid-text">
             <T id={'paid'} />
           </span>
         </Choose.When>
         <Choose.When condition={bill.is_open}>
           <Choose>
             <Choose.When condition={bill.is_overdue}>
-              <span className={'overdue-status'}>
-                {intl.get('overdue_by', { overdue: bill.overdue_days })}
-              </span>
+              <span className={'overdue-status'}>{intl.get('overdue_by', { overdue: bill.overdue_days })}</span>
             </Choose.When>
             <Choose.Otherwise>
-              <span className={'due-status'}>
-                {intl.get('due_in', { due: bill.remaining_days })}
-              </span>
+              <span className={'due-status'}>{intl.get('due_in', { due: bill.remaining_days })}</span>
             </Choose.Otherwise>
           </Choose>
           <If condition={bill.is_partially_paid}>
diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx
index cce9d88c5..dcb70399d 100644
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx
@@ -13,7 +13,7 @@ import { VendorCreditNoteFormFooterRight } from './VendorCreditNoteFormFooterRig
  */
 export default function VendorCreditNoteFormFooter() {
   return (
-    <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
       <VendorCreditNoteFooterPaper>
         <Row>
           <Col md={8}>
diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx
index a360ab617..2e4949bf5 100644
--- a/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx
@@ -30,9 +30,7 @@ function VendorCreditUniversalSearchSelectComponent({
   return null;
 }
 
-export const VendorCreditUniversalSearchSelect = withDrawerActions(
-  VendorCreditUniversalSearchSelectComponent,
-);
+export const VendorCreditUniversalSearchSelect = withDrawerActions(VendorCreditUniversalSearchSelectComponent);
 
 /**
  * Status accessor.
@@ -64,26 +62,22 @@ function VendorCreditUniversalSearchStatus({ receipt }) {
 /**
  * Credit note universal search item.
  */
-export function VendorCreditUniversalSearchItem(
-  item,
-  { handleClick, modifiers, query },
-) {
+export function VendorCreditUniversalSearchItem(item, { handleClick, modifiers, query }) {
   return (
     <MenuItem
       active={modifiers.active}
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp4-text-muted">
-            {item.reference.vendor_credit_number}{' '}
-            <Icon icon={'caret-right-16'} iconSize={16} />
+          <span className="bp4-text-muted">
+            {item.reference.vendor_credit_number} <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_vendor_credit_date}
           </span>
         </div>
       }
       label={
         <>
-          <div class="amount">{item.reference.formatted_amount}</div>
+          <div className="amount">{item.reference.formatted_amount}</div>
           <VendorCreditUniversalSearchStatus receipt={item.reference} />
         </>
       }
diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.tsx
index 7c9fd5c47..7ad3e58cb 100644
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.tsx
@@ -26,11 +26,11 @@ function PaymentMadeFormHeader() {
         <PaymentMadeFormHeaderFields />
 
         <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
-          <div class="big-amount">
-            <span class="big-amount__label">
+          <div className="big-amount">
+            <span className="big-amount__label">
               <T id={'amount_received'} />
             </span>
-            <h1 class="big-amount__number">
+            <h1 className="big-amount__number">
               <Money amount={amountPaid} currency={currency_code} />
             </h1>
           </div>
diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx
index 890401038..a16384deb 100644
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx
@@ -27,17 +27,12 @@ function PaymentMadeUniversalSearchSelectComponent({
   return null;
 }
 
-export const PaymentMadeUniversalSearchSelect = withDrawerActions(
-  PaymentMadeUniversalSearchSelectComponent,
-);
+export const PaymentMadeUniversalSearchSelect = withDrawerActions(PaymentMadeUniversalSearchSelectComponent);
 
 /**
  * Payment made universal search item.
  */
-export function PaymentMadeUniversalSearchItem(
-  { text, label, reference },
-  { handleClick, modifiers, query },
-) {
+export function PaymentMadeUniversalSearchItem({ text, label, reference }, { handleClick, modifiers, query }) {
   return (
     <MenuItem
       active={modifiers.active}
@@ -45,7 +40,7 @@ export function PaymentMadeUniversalSearchItem(
         <div>
           <div>{highlightText(text, query)}</div>
 
-          <span class="bp4-text-muted">
+          <span className="bp4-text-muted">
             {reference.payment_number && (
               <>
                 {highlightText(reference.payment_number, query)}
@@ -56,7 +51,7 @@ export function PaymentMadeUniversalSearchItem(
           </span>
         </div>
       }
-      label={<div class="amount">{label}</div>}
+      label={<div className="amount">{label}</div>}
       onClick={handleClick}
       className={'universal-search__item--payment-made'}
     />
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx
index 8407a4f39..b195bdc4d 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx
@@ -29,9 +29,7 @@ function CreditNoteUniversalSearchSelectComponent({
   return null;
 }
 
-export const CreditNoteUniversalSearchSelect = withDrawerActions(
-  CreditNoteUniversalSearchSelectComponent,
-);
+export const CreditNoteUniversalSearchSelect = withDrawerActions(CreditNoteUniversalSearchSelectComponent);
 
 /**
  * Status accessor.
@@ -63,26 +61,22 @@ function CreditNoteUniversalSearchStatus({ receipt }) {
 /**
  * Credit note universal search item.
  */
-export function CreditNoteUniversalSearchItem(
-  item,
-  { handleClick, modifiers, query },
-) {
+export function CreditNoteUniversalSearchItem(item, { handleClick, modifiers, query }) {
   return (
     <MenuItem
       active={modifiers.active}
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp4-text-muted">
-            {item.reference.credit_note_number}{' '}
-            <Icon icon={'caret-right-16'} iconSize={16} />
+          <span className="bp4-text-muted">
+            {item.reference.credit_note_number} <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_credit_note_date}
           </span>
         </div>
       }
       label={
         <>
-          <div class="amount">{item.reference.formatted_amount}</div>
+          <div className="amount">{item.reference.formatted_amount}</div>
           <CreditNoteUniversalSearchStatus receipt={item.reference} />
         </>
       }
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx
index 073f33631..0ad7abe9a 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx
@@ -27,9 +27,7 @@ function EstimateUniversalSearchSelectComponent({
   return null;
 }
 
-export const EstimateUniversalSearchSelect = withDrawerActions(
-  EstimateUniversalSearchSelectComponent,
-);
+export const EstimateUniversalSearchSelect = withDrawerActions(EstimateUniversalSearchSelectComponent);
 
 /**
  * Status accessor.
@@ -37,26 +35,22 @@ export const EstimateUniversalSearchSelect = withDrawerActions(
 export const EstimateStatus = ({ estimate }) => (
   <Choose>
     <Choose.When condition={estimate.is_delivered && estimate.is_approved}>
-      <span class="approved">
+      <span className="approved">
         <T id={'approved'} />
       </span>
     </Choose.When>
     <Choose.When condition={estimate.is_delivered && estimate.is_rejected}>
-      <span class="reject">
+      <span className="reject">
         <T id={'rejected'} />
       </span>
     </Choose.When>
-    <Choose.When
-      condition={
-        estimate.is_delivered && !estimate.is_rejected && !estimate.is_approved
-      }
-    >
-      <span class="delivered">
+    <Choose.When condition={estimate.is_delivered && !estimate.is_rejected && !estimate.is_approved}>
+      <span className="delivered">
         <T id={'delivered'} />
       </span>
     </Choose.When>
     <Choose.Otherwise>
-      <span class="draft">
+      <span className="draft">
         <T id={'draft'} />
       </span>
     </Choose.Otherwise>
@@ -66,26 +60,22 @@ export const EstimateStatus = ({ estimate }) => (
 /**
  * Estimate universal search item.
  */
-export function EstimateUniversalSearchItem(
-  item,
-  { handleClick, modifiers, query },
-) {
+export function EstimateUniversalSearchItem(item, { handleClick, modifiers, query }) {
   return (
     <MenuItem
       active={modifiers.active}
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp4-text-muted">
-            {item.reference.estimate_number}{' '}
-            <Icon icon={'caret-right-16'} iconSize={16} />
+          <span className="bp4-text-muted">
+            {item.reference.estimate_number} <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_estimate_date}
           </span>
         </div>
       }
       label={
         <>
-          <div class="amount">{item.reference.formatted_amount}</div>
+          <div className="amount">{item.reference.formatted_amount}</div>
           <EstimateStatus estimate={item.reference} />
         </>
       }
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx
index a86141612..a5e023ca4 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx
@@ -28,9 +28,7 @@ function InvoiceUniversalSearchSelectComponent({
   return null;
 }
 
-export const InvoiceUniversalSearchSelect = withDrawerActions(
-  InvoiceUniversalSearchSelectComponent,
-);
+export const InvoiceUniversalSearchSelect = withDrawerActions(InvoiceUniversalSearchSelectComponent);
 
 /**
  * Invoice status.
@@ -39,7 +37,7 @@ function InvoiceStatus({ customer }) {
   return (
     <Choose>
       <Choose.When condition={customer.is_fully_paid && customer.is_delivered}>
-        <span class="status status-success">
+        <span className="status status-success">
           <T id={'paid'} />
         </span>
       </Choose.When>
@@ -52,14 +50,12 @@ function InvoiceStatus({ customer }) {
             </span>
           </Choose.When>
           <Choose.Otherwise>
-            <span className={'status status-warning'}>
-              {intl.get('due_in', { due: customer.remaining_days })}
-            </span>
+            <span className={'status status-warning'}>{intl.get('due_in', { due: customer.remaining_days })}</span>
           </Choose.Otherwise>
         </Choose>
       </Choose.When>
       <Choose.Otherwise>
-        <span class="status status--gray">
+        <span className="status status--gray">
           <T id={'draft'} />
         </span>
       </Choose.Otherwise>
@@ -70,26 +66,22 @@ function InvoiceStatus({ customer }) {
 /**
  * Universal search invoice item.
  */
-export function InvoiceUniversalSearchItem(
-  item,
-  { handleClick, modifiers, query },
-) {
+export function InvoiceUniversalSearchItem(item, { handleClick, modifiers, query }) {
   return (
     <MenuItem
       active={modifiers.active}
       text={
         <div>
           <div>{highlightText(item.text, query)}</div>
-          <span class="bp4-text-muted">
-            {highlightText(item.reference.invoice_no, query)}{' '}
-            <Icon icon={'caret-right-16'} iconSize={16} />
+          <span className="bp4-text-muted">
+            {highlightText(item.reference.invoice_no, query)} <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.invoice_date_formatted}
           </span>
         </div>
       }
       label={
         <>
-          <div class="amount">{item.reference.total_formatted}</div>
+          <div className="amount">{item.reference.total_formatted}</div>
           <InvoiceStatus customer={item.reference} />
         </>
       }
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx
index 2739ad9e5..dadefedd5 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx
@@ -1,31 +1,12 @@
 // @ts-nocheck
 import React from 'react';
-import {
-  Intent,
-  Tag,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  ProgressBar,
-} from '@blueprintjs/core';
+import { Intent, Tag, Menu, MenuItem, MenuDivider, ProgressBar } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import clsx from 'classnames';
 import { CLASSES } from '@/constants/classes';
-import {
-  FormatDateCell,
-  FormattedMessage as T,
-  AppToaster,
-  Choose,
-  If,
-  Icon,
-  Can,
-} from '@/components';
+import { FormatDateCell, FormattedMessage as T, AppToaster, Choose, If, Icon, Can } from '@/components';
 import { formattedAmount, safeCallback, calculateStatus } from '@/utils';
-import {
-  SaleInvoiceAction,
-  PaymentReceiveAction,
-  AbilitySubject,
-} from '@/constants/abilityOption';
+import { SaleInvoiceAction, PaymentReceiveAction, AbilitySubject } from '@/constants/abilityOption';
 
 export function InvoiceStatus({ invoice }) {
   return (
@@ -34,7 +15,7 @@ export function InvoiceStatus({ invoice }) {
         <span className={'fully-paid-icon'}>
           <Icon icon="small-tick" iconSize={18} />
         </span>
-        <span class="fully-paid-text">
+        <span className="fully-paid-text">
           <T id={'paid'} />
         </span>
       </Choose.When>
@@ -42,19 +23,15 @@ export function InvoiceStatus({ invoice }) {
       <Choose.When condition={invoice.is_delivered}>
         <Choose>
           <Choose.When condition={invoice.is_overdue}>
-            <span className={'overdue-status'}>
-              {intl.get('overdue_by', { overdue: invoice.overdue_days })}
-            </span>
+            <span className={'overdue-status'}>{intl.get('overdue_by', { overdue: invoice.overdue_days })}</span>
           </Choose.When>
           <Choose.Otherwise>
-            <span className={'due-status'}>
-              {intl.get('due_in', { due: invoice.remaining_days })}
-            </span>
+            <span className={'due-status'}>{intl.get('due_in', { due: invoice.remaining_days })}</span>
           </Choose.Otherwise>
         </Choose>
 
         <If condition={invoice.is_partially_paid}>
-          <span class="partial-paid">
+          <span className="partial-paid">
             {intl.get('day_partially_paid', {
               due: formattedAmount(invoice.due_amount, invoice.currency_code),
             })}
@@ -85,51 +62,28 @@ export const statusAccessor = (row) => {
 };
 
 export const handleDeleteErrors = (errors) => {
-  if (
-    errors.find(
-      (error) => error.type === 'INVOICE_HAS_ASSOCIATED_PAYMENT_ENTRIES',
-    )
-  ) {
+  if (errors.find((error) => error.type === 'INVOICE_HAS_ASSOCIATED_PAYMENT_ENTRIES')) {
     AppToaster.show({
       message: intl.get('the_invoice_cannot_be_deleted'),
       intent: Intent.DANGER,
     });
   }
-  if (
-    errors.find(
-      (error) => error.type === 'INVOICE_AMOUNT_SMALLER_THAN_PAYMENT_AMOUNT',
-    )
-  ) {
+  if (errors.find((error) => error.type === 'INVOICE_AMOUNT_SMALLER_THAN_PAYMENT_AMOUNT')) {
     AppToaster.show({
       message: intl.get('the_payment_amount_that_received'),
       intent: Intent.DANGER,
     });
   }
-  if (
-    errors.find(
-      (error) => error.type === 'SALE_INVOICE_HAS_APPLIED_TO_CREDIT_NOTES',
-    )
-  ) {
+  if (errors.find((error) => error.type === 'SALE_INVOICE_HAS_APPLIED_TO_CREDIT_NOTES')) {
     AppToaster.show({
-      message: intl.get(
-        'invoices.error.you_couldn_t_delete_sale_invoice_that_has_reconciled',
-      ),
+      message: intl.get('invoices.error.you_couldn_t_delete_sale_invoice_that_has_reconciled'),
       intent: Intent.DANGER,
     });
   }
 };
 
 export function ActionsMenu({
-  payload: {
-    onEdit,
-    onDeliver,
-    onDelete,
-    onConvert,
-    onQuick,
-    onViewDetails,
-    onPrint,
-    onSendMail
-  },
+  payload: { onEdit, onDeliver, onDelete, onConvert, onQuick, onViewDetails, onPrint, onSendMail },
   row: { original },
 }) {
   return (
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.tsx
index d7e44fadf..ac6a01718 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.tsx
@@ -34,18 +34,15 @@ function PaymentReceiveFormBigTotal() {
   } = useFormikContext();
 
   // Calculates the total payment amount from due amount.
-  const paymentFullAmount = useMemo(
-    () => sumBy(entries, 'payment_amount'),
-    [entries],
-  );
+  const paymentFullAmount = useMemo(() => sumBy(entries, 'payment_amount'), [entries]);
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
-      <div class="big-amount">
-        <span class="big-amount__label">
+      <div className="big-amount">
+        <span className="big-amount__label">
           <T id={'amount_received'} />
         </span>
-        <h1 class="big-amount__number">
+        <h1 className="big-amount__number">
           <Money amount={paymentFullAmount} currency={currency_code} />
         </h1>
       </div>
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.tsx
index 1a7eded91..66d19fa54 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.tsx
@@ -4,10 +4,7 @@ import intl from 'react-intl-universal';
 import { MenuItem } from '@blueprintjs/core';
 
 import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
-import {
-  AbilitySubject,
-  PaymentReceiveAction,
-} from '@/constants/abilityOption';
+import { AbilitySubject, PaymentReceiveAction } from '@/constants/abilityOption';
 import { highlightText } from '@/utils';
 import { Icon } from '@/components';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
@@ -32,17 +29,12 @@ function PaymentReceiveUniversalSearchSelectComponent({
   return null;
 }
 
-export const PaymentReceiveUniversalSearchSelect = withDrawerActions(
-  PaymentReceiveUniversalSearchSelectComponent,
-);
+export const PaymentReceiveUniversalSearchSelect = withDrawerActions(PaymentReceiveUniversalSearchSelectComponent);
 
 /**
  * Payment receive universal search item.
  */
-export function PaymentReceiveUniversalSearchItem(
-  item,
-  { handleClick, modifiers, query },
-) {
+export function PaymentReceiveUniversalSearchItem(item, { handleClick, modifiers, query }) {
   return (
     <MenuItem
       active={modifiers.active}
@@ -50,14 +42,13 @@ export function PaymentReceiveUniversalSearchItem(
         <div>
           <div>{highlightText(item.text, query)}</div>
 
-          <span class="bp4-text-muted">
-            {highlightText(item.reference.payment_receive_no, query)}{' '}
-            <Icon icon={'caret-right-16'} iconSize={16} />
+          <span className="bp4-text-muted">
+            {highlightText(item.reference.payment_receive_no, query)} <Icon icon={'caret-right-16'} iconSize={16} />
             {highlightText(item.reference.formatted_payment_date, query)}
           </span>
         </div>
       }
-      label={<div class="amount">{item.reference.formatted_amount}</div>}
+      label={<div className="amount">{item.reference.formatted_amount}</div>}
       onClick={handleClick}
       className={'universal-search__item--invoice'}
     />
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx
index abaea4004..436f09a84 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx
@@ -28,9 +28,7 @@ function ReceiptUniversalSearchSelectComponent({
   return null;
 }
 
-export const ReceiptUniversalSearchSelect = withDrawerActions(
-  ReceiptUniversalSearchSelectComponent,
-);
+export const ReceiptUniversalSearchSelect = withDrawerActions(ReceiptUniversalSearchSelectComponent);
 
 /**
  * Status accessor.
@@ -39,13 +37,13 @@ function ReceiptStatus({ receipt }) {
   return (
     <Choose>
       <Choose.When condition={receipt.is_closed}>
-        <span class="closed">
+        <span className="closed">
           <T id={'closed'} />
         </span>
       </Choose.When>
 
       <Choose.Otherwise>
-        <span class="draft">
+        <span className="draft">
           <T id={'draft'} />
         </span>
       </Choose.Otherwise>
@@ -56,26 +54,22 @@ function ReceiptStatus({ receipt }) {
 /**
  * Receipt universal search item.
  */
-export function ReceiptUniversalSearchItem(
-  item,
-  { handleClick, modifiers, query },
-) {
+export function ReceiptUniversalSearchItem(item, { handleClick, modifiers, query }) {
   return (
     <MenuItem
       active={modifiers.active}
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp4-text-muted">
-            {item.reference.receipt_number}{' '}
-            <Icon icon={'caret-right-16'} iconSize={16} />
+          <span className="bp4-text-muted">
+            {item.reference.receipt_number} <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_receipt_date}
           </span>
         </div>
       }
       label={
         <>
-          <div class="amount">{item.reference.formatted_amount}</div>
+          <div className="amount">{item.reference.formatted_amount}</div>
           <ReceiptStatus receipt={item.reference} />
         </>
       }
diff --git a/packages/webapp/src/containers/Setup/SetupCongratsPage.tsx b/packages/webapp/src/containers/Setup/SetupCongratsPage.tsx
index 9b3baaeaf..5ee61c575 100644
--- a/packages/webapp/src/containers/Setup/SetupCongratsPage.tsx
+++ b/packages/webapp/src/containers/Setup/SetupCongratsPage.tsx
@@ -22,26 +22,21 @@ function SetupCongratsPage({ setOrganizationSetupCompleted }) {
   };
 
   return (
-    <div class="setup-congrats">
-      <div class="setup-congrats__workflow-pic">
+    <div className="setup-congrats">
+      <div className="setup-congrats__workflow-pic">
         <WorkflowIcon width="280" height="330" />
       </div>
 
-      <div class="setup-congrats__text">
+      <div className="setup-congrats__text">
         <h1>
           <T id={'setup.congrats.title'} />
         </h1>
 
-        <p class="paragraph">
+        <p className="paragraph">
           <T id={'setup.congrats.description'} />
         </p>
 
-        <Button
-          intent={Intent.PRIMARY}
-          type="submit"
-          loading={isReloading}
-          onClick={handleBtnClick}
-        >
+        <Button intent={Intent.PRIMARY} type="submit" loading={isReloading} onClick={handleBtnClick}>
           <T id={'setup.congrats.go_to_dashboard'} />
         </Button>
       </div>
diff --git a/packages/webapp/src/containers/Setup/SetupInitializingForm.tsx b/packages/webapp/src/containers/Setup/SetupInitializingForm.tsx
index a348a4876..eebf832c3 100644
--- a/packages/webapp/src/containers/Setup/SetupInitializingForm.tsx
+++ b/packages/webapp/src/containers/Setup/SetupInitializingForm.tsx
@@ -15,10 +15,7 @@ import '@/style/pages/Setup/Initializing.scss';
 /**
  * Setup initializing step form.
  */
-function SetupInitializingForm({
-  setOrganizationSetupCompleted,
-  organization,
-}) {
+function SetupInitializingForm({ setOrganizationSetupCompleted, organization }) {
   const { refetch, isSuccess } = useCurrentOrganization({ enabled: false });
 
   // Job done state.
@@ -47,7 +44,7 @@ function SetupInitializingForm({
   }, [setOrganizationSetupCompleted, isJobDone, isSuccess]);
 
   return (
-    <div class="setup-initializing-form">
+    <div className="setup-initializing-form">
       {failed ? (
         <SetupInitializingFailed />
       ) : running || queued || isJobFetching ? (
@@ -74,12 +71,12 @@ export default R.compose(
  */
 function SetupInitializingFailed() {
   return (
-    <div class="setup-initializing__content">
+    <div className="setup-initializing__content">
       <div className={'setup-initializing-form__title'}>
         <h1>
           <T id={'setup.initializing.something_went_wrong'} />
         </h1>
-        <p class="paragraph">
+        <p className="paragraph">
           <T id={'setup.initializing.please_refresh_the_page'} />
         </p>
       </div>
@@ -92,7 +89,7 @@ function SetupInitializingFailed() {
  */
 function SetupInitializingRunning() {
   return (
-    <div class="setup-initializing__content">
+    <div className="setup-initializing__content">
       <ProgressBar intent={Intent.PRIMARY} value={null} />
 
       <div className={'setup-initializing-form__title'}>
@@ -112,15 +109,13 @@ function SetupInitializingRunning() {
  */
 function SetupInitializingCompleted() {
   return (
-    <div class="setup-initializing__content">
+    <div className="setup-initializing__content">
       <div className={'setup-initializing-form__title'}>
         <h1>
           <T id={'setup.initializing.waiting_to_redirect'} />
         </h1>
-        <p class="paragraph">
-          <T
-            id={'setup.initializing.refresh_the_page_if_redirect_not_worked'}
-          />
+        <p className="paragraph">
+          <T id={'setup.initializing.refresh_the_page_if_redirect_not_worked'} />
         </p>
       </div>
     </div>
diff --git a/packages/webapp/src/containers/Setup/SetupLeftSection.tsx b/packages/webapp/src/containers/Setup/SetupLeftSection.tsx
index 300103ed7..fef169be6 100644
--- a/packages/webapp/src/containers/Setup/SetupLeftSection.tsx
+++ b/packages/webapp/src/containers/Setup/SetupLeftSection.tsx
@@ -10,7 +10,7 @@ import { useAuthActions } from '@/hooks/state';
  */
 function FooterLinkItem({ title, link }) {
   return (
-    <div class="content__links-item">
+    <div className="content__links-item">
       <a href={link} target="_blank">
         {title}
       </a>
@@ -56,7 +56,7 @@ function SetupLeftSectionHeader() {
       </p>
 
       <div className={'content__organization'}>
-        <span class="signout">
+        <span className="signout">
           <a onClick={onClickLogout} href="#">
             <T id={'sign_out'} />
           </a>
@@ -74,12 +74,7 @@ export default function SetupLeftSection() {
     <section className={'setup-page__left-section'}>
       <div className={'content'}>
         <div className={'content__logo'}>
-          <Icon
-            icon="bigcapital"
-            className={'bigcapital--alt'}
-            height={37}
-            width={190}
-          />
+          <Icon icon="bigcapital" className={'bigcapital--alt'} height={37} width={190} />
         </div>
         <SetupLeftSectionHeader />
         <SetupLeftSectionFooter />
diff --git a/packages/webapp/src/containers/Setup/SetupWizardContent.tsx b/packages/webapp/src/containers/Setup/SetupWizardContent.tsx
index 58d7726c1..0e7a9d37c 100644
--- a/packages/webapp/src/containers/Setup/SetupWizardContent.tsx
+++ b/packages/webapp/src/containers/Setup/SetupWizardContent.tsx
@@ -16,12 +16,9 @@ interface SetupWizardContentProps {
 /**
  * Setup wizard content.
  */
-export default function SetupWizardContent({
-  stepIndex,
-  stepId,
-}: SetupWizardContentProps) {
+export default function SetupWizardContent({ stepIndex, stepId }: SetupWizardContentProps) {
   return (
-    <div class="setup-page__content">
+    <div className="setup-page__content">
       <Stepper
         active={stepIndex}
         classNames={{
diff --git a/packages/webapp/src/containers/Setup/WizardSetupPage.tsx b/packages/webapp/src/containers/Setup/WizardSetupPage.tsx
index d61eb39bd..cfe1d01ab 100644
--- a/packages/webapp/src/containers/Setup/WizardSetupPage.tsx
+++ b/packages/webapp/src/containers/Setup/WizardSetupPage.tsx
@@ -7,9 +7,9 @@ import '@/style/pages/Setup/SetupPage.scss';
 
 export default function WizardSetupPage() {
   return (
-    <div class="setup-page">
+    <div className="setup-page">
       <SetupLeftSection />
       <SetupRightSection />
     </div>
   );
-};
\ No newline at end of file
+}
diff --git a/packages/webapp/src/containers/Subscriptions/BillingPaymentMethod.tsx b/packages/webapp/src/containers/Subscriptions/BillingPaymentMethod.tsx
index ec65c64fc..02e8fdf22 100644
--- a/packages/webapp/src/containers/Subscriptions/BillingPaymentMethod.tsx
+++ b/packages/webapp/src/containers/Subscriptions/BillingPaymentMethod.tsx
@@ -6,9 +6,13 @@ import { PaymentMethodTabs } from './SubscriptionTabs';
 
 export default ({ formik, title, description }) => {
   return (
-    <section class="billing-plans__section">
-      <h1 className="title"><T id={'setup.plans.payment_methods.title'} /></h1>
-      <p className="paragraph"><T id={'setup.plans.payment_methods.description' } /></p>
+    <section className="billing-plans__section">
+      <h1 className="title">
+        <T id={'setup.plans.payment_methods.title'} />
+      </h1>
+      <p className="paragraph">
+        <T id={'setup.plans.payment_methods.description'} />
+      </p>
 
       <PaymentMethodTabs formik={formik} />
     </section>
diff --git a/packages/webapp/src/containers/Subscriptions/BillingPeriodsInput.tsx b/packages/webapp/src/containers/Subscriptions/BillingPeriodsInput.tsx
index eceda78ad..ce66d5902 100644
--- a/packages/webapp/src/containers/Subscriptions/BillingPeriodsInput.tsx
+++ b/packages/webapp/src/containers/Subscriptions/BillingPeriodsInput.tsx
@@ -10,9 +10,7 @@ import withPlan from './withPlan';
 /**
  * Sunscription periods enhanced.
  */
-const SubscriptionPeriodsEnhanced = R.compose(
-  withPlan(({ plan }) => ({ plan })),
-)(({ plan, ...restProps }) => {
+const SubscriptionPeriodsEnhanced = R.compose(withPlan(({ plan }) => ({ plan })))(({ plan, ...restProps }) => {
   if (!plan) return null;
 
   return <SubscriptionPeriods periods={plan.periods} {...restProps} />;
@@ -23,11 +21,11 @@ const SubscriptionPeriodsEnhanced = R.compose(
  */
 export default function BillingPeriods() {
   return (
-    <section class="billing-plans__section">
-      <h1 class="title">
+    <section className="billing-plans__section">
+      <h1 className="title">
         <T id={'setup.plans.select_period.title'} />
       </h1>
-      <div class="description">
+      <div className="description">
         <p className="paragraph">
           <T id={'setup.plans.select_period.description'} />
         </p>
diff --git a/packages/webapp/src/containers/Subscriptions/BillingPlansForm.tsx b/packages/webapp/src/containers/Subscriptions/BillingPlansForm.tsx
index fc2c319cc..a96424373 100644
--- a/packages/webapp/src/containers/Subscriptions/BillingPlansForm.tsx
+++ b/packages/webapp/src/containers/Subscriptions/BillingPlansForm.tsx
@@ -15,7 +15,7 @@ import withSubscriptions from './withSubscriptions';
  */
 export default function BillingPlansForm() {
   return (
-    <div class="billing-plans">
+    <div className="billing-plans">
       <BillingPlansInput />
       <BillingPeriodsInput />
       <BillingPaymentMethodWhenSubscriptionInactive />
diff --git a/packages/webapp/src/containers/Subscriptions/BillingPlansInput.tsx b/packages/webapp/src/containers/Subscriptions/BillingPlansInput.tsx
index d7bdfa23e..54d2aade5 100644
--- a/packages/webapp/src/containers/Subscriptions/BillingPlansInput.tsx
+++ b/packages/webapp/src/containers/Subscriptions/BillingPlansInput.tsx
@@ -11,11 +11,11 @@ import { compose } from '@/utils';
  */
 function BillingPlans({ plans, title, description, selectedOption }) {
   return (
-    <section class="billing-plans__section">
-      <h1 class="title">
+    <section className="billing-plans__section">
+      <h1 className="title">
         <T id={'setup.plans.select_plan.title'} />
       </h1>
-      <div class="description">
+      <div className="description">
         <p className="paragraph">
           <T id={'setup.plans.select_plan.description'} />
         </p>
diff --git a/packages/webapp/src/containers/UniversalSearch/DashboardUniversalSearch.tsx b/packages/webapp/src/containers/UniversalSearch/DashboardUniversalSearch.tsx
index 38cc6a4be..8157a6cc3 100644
--- a/packages/webapp/src/containers/UniversalSearch/DashboardUniversalSearch.tsx
+++ b/packages/webapp/src/containers/UniversalSearch/DashboardUniversalSearch.tsx
@@ -42,10 +42,7 @@ function DashboardUniversalSearch({
 
   // Sync default search type with default universal resource type.
   React.useEffect(() => {
-    if (
-      !isUndefined(defaultUniversalResourceType) &&
-      defaultSearchType !== defaultUniversalResourceType
-    ) {
+    if (!isUndefined(defaultUniversalResourceType) && defaultSearchType !== defaultUniversalResourceType) {
       setSearchType(defaultUniversalResourceType);
       setDefaultSearchType(defaultUniversalResourceType);
     }
@@ -104,7 +101,7 @@ function DashboardUniversalSearch({
   }
 
   return (
-    <div class="dashboard__universal-search">
+    <div className="dashboard__universal-search">
       <UniversalSearch
         isOpen={globalSearchShow}
         isLoading={isSearchFetching}
diff --git a/packages/webapp/src/containers/UniversalSearch/components.tsx b/packages/webapp/src/containers/UniversalSearch/components.tsx
index 66ac23631..4f7358db1 100644
--- a/packages/webapp/src/containers/UniversalSearch/components.tsx
+++ b/packages/webapp/src/containers/UniversalSearch/components.tsx
@@ -17,11 +17,7 @@ function UniversalSearchItemDetail(item, { handleClick, modifiers, query }) {
         <div>
           <div>{highlightText(item.text, query)}</div>
 
-          {item.subText && (
-            <span class="bp4-text-muted">
-              {highlightText(item.subText, query)}
-            </span>
-          )}
+          {item.subText && <span className="bp4-text-muted">{highlightText(item.subText, query)}</span>}
         </div>
       }
       label={item.label ? highlightText(item.label, query) : ''}
@@ -37,9 +33,7 @@ function UniversalSearchItemDetail(item, { handleClick, modifiers, query }) {
  * @returns
  */
 export const DashboardUniversalSearchItem = (props, actions) => {
-    const itemRenderer = getUniversalSearchBind(props._type, 'itemRenderer');
+  const itemRenderer = getUniversalSearchBind(props._type, 'itemRenderer');
 
-    return typeof itemRenderer !== 'undefined'
-      ? itemRenderer(props, actions)
-      : UniversalSearchItemDetail(props, actions);
-  };
+  return typeof itemRenderer !== 'undefined' ? itemRenderer(props, actions) : UniversalSearchItemDetail(props, actions);
+};
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.tsx
index 79a607576..d69cd87cb 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.tsx
@@ -10,10 +10,8 @@ import { inputIntent } from '@/utils';
  * Vendor form  after primary section.
  */
 function VendorFormAfterPrimarySection() {
-  
-
   return (
-    <div class="customer-form__after-primary-section-content">
+    <div className="customer-form__after-primary-section-content">
       {/*------------ Vendor email -----------*/}
       <FastField name={'email'}>
         {({ field, meta: { error, touched } }) => (
@@ -30,28 +28,16 @@ function VendorFormAfterPrimarySection() {
       </FastField>
 
       {/*------------ Phone number -----------*/}
-      <FormGroup
-        className={'form-group--phone-number'}
-        label={<T id={'phone_number'} />}
-        inline={true}
-      >
+      <FormGroup className={'form-group--phone-number'} label={<T id={'phone_number'} />} inline={true}>
         <ControlGroup>
           <FastField name={'work_phone'}>
             {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                intent={inputIntent({ error, touched })}
-                placeholder={intl.get('work')}
-                {...field}
-              />
+              <InputGroup intent={inputIntent({ error, touched })} placeholder={intl.get('work')} {...field} />
             )}
           </FastField>
           <FastField name={'personal_phone'}>
             {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                intent={inputIntent({ error, touched })}
-                placeholder={intl.get('mobile')}
-                {...field}
-              />
+              <InputGroup intent={inputIntent({ error, touched })} placeholder={intl.get('mobile')} {...field} />
             )}
           </FastField>
         </ControlGroup>
diff --git a/packages/webapp/src/containers/Views/ViewForm.tsx b/packages/webapp/src/containers/Views/ViewForm.tsx
index 18d438fe7..3b39df591 100644
--- a/packages/webapp/src/containers/Views/ViewForm.tsx
+++ b/packages/webapp/src/containers/Views/ViewForm.tsx
@@ -4,18 +4,7 @@ import { useFormik } from 'formik';
 import { FormattedMessage as T } from '@/components';
 
 import { useHistory } from 'react-router-dom';
-import {
-  InputGroup,
-  FormGroup,
-  Intent,
-  Button,
-  MenuItem,
-  Classes,
-  HTMLSelect,
-  Menu,
-  H5,
-  H6,
-} from '@blueprintjs/core';
+import { InputGroup, FormGroup, Intent, Button, MenuItem, Classes, HTMLSelect, Menu, H5, H6 } from '@blueprintjs/core';
 import { Row, Col } from 'react-grid-system';
 import { ReactSortable } from 'react-sortablejs';
 import * as Yup from 'yup';
@@ -49,20 +38,13 @@ function ViewForm({
     };
   }, [changePageSubtitle, resourceMetadata.label]);
 
-  const [draggedColumns, setDraggedColumn] = useState([
-    ...(viewMeta && viewMeta.columns ? viewMeta.columns : []),
-  ]);
+  const [draggedColumns, setDraggedColumn] = useState([...(viewMeta && viewMeta.columns ? viewMeta.columns : [])]);
 
-  const draggedColumnsIds = useMemo(
-    () => draggedColumns.map((c) => c.id),
-    [draggedColumns],
-  );
+  const draggedColumnsIds = useMemo(() => draggedColumns.map((c) => c.id), [draggedColumns]);
 
   const [availableColumns, setAvailableColumns] = useState([
     ...(viewMeta && viewMeta.columns
-      ? resourceColumns.filter(
-          (column) => draggedColumnsIds.indexOf(column.id) === -1,
-        )
+      ? resourceColumns.filter((column) => draggedColumnsIds.indexOf(column.id) === -1)
       : resourceColumns),
   ]);
 
@@ -124,15 +106,7 @@ function ViewForm({
     [initialEmptyForm, viewMeta, resourceName],
   );
 
-  const {
-    values,
-    errors,
-    touched,
-    setFieldValue,
-    getFieldProps,
-    handleSubmit,
-    isSubmitting,
-  } = useFormik({
+  const { values, errors, touched, setFieldValue, getFieldProps, handleSubmit, isSubmitting } = useFormik({
     enableReinitialize: true,
     validationSchema: validationSchema,
     initialValues: {
@@ -155,9 +129,7 @@ function ViewForm({
             message: 'the_view_has_been_edited',
             intent: Intent.SUCCESS,
           });
-          history.push(
-            `${resourceMetadata.baseRoute}/${viewMeta.id}/custom_view`,
-          );
+          history.push(`${resourceMetadata.baseRoute}/${viewMeta.id}/custom_view`);
           setSubmitting(false);
         });
       } else {
@@ -166,9 +138,7 @@ function ViewForm({
             message: 'the_view_has_been_submit',
             intent: Intent.SUCCESS,
           });
-          history.push(
-            `${resourceMetadata.baseRoute}/${viewMeta.id}/custom_view`,
-          );
+          history.push(`${resourceMetadata.baseRoute}/${viewMeta.id}/custom_view`);
           setSubmitting(false);
         });
       }
@@ -193,10 +163,7 @@ function ViewForm({
     [],
   );
 
-  const whenConditionalsItems = useMemo(
-    () => [{ value: '', label: 'When' }],
-    [],
-  );
+  const whenConditionalsItems = useMemo(() => [{ value: '', label: 'When' }], []);
 
   // Compatotors items.
   const compatatorsItems = useMemo(
@@ -268,18 +235,16 @@ function ViewForm({
   };
 
   return (
-    <div class="view-form">
+    <div className="view-form">
       <form onSubmit={handleSubmit}>
-        <div class="view-form--name-section">
+        <div className="view-form--name-section">
           <Row>
             <Col sm={8}>
               <FormGroup
                 label={<T id={'view_name'} />}
                 className={'form-group--name'}
                 intent={errors.name && touched.name && Intent.DANGER}
-                helperText={
-                  <ErrorMessage {...{ errors, touched }} name={'name'} />
-                }
+                helperText={<ErrorMessage {...{ errors, touched }} name={'name'} />}
                 inline={true}
                 fill={true}
               >
@@ -296,26 +261,18 @@ function ViewForm({
         <H5 className="mb2">Define the conditionals</H5>
 
         {values.roles.map((role, index) => (
-          <Row class="view-form__role-conditional">
-            <Col sm={2} class="flex">
-              <div class="mr2 pt1 condition-number">{index + 1}</div>
+          <Row className="view-form__role-conditional">
+            <Col sm={2} className="flex">
+              <div className="mr2 pt1 condition-number">{index + 1}</div>
               {index === 0 ? (
-                <HTMLSelect
-                  options={whenConditionalsItems}
-                  className={Classes.FILL}
-                />
+                <HTMLSelect options={whenConditionalsItems} className={Classes.FILL} />
               ) : (
-                <HTMLSelect
-                  options={conditionalsItems}
-                  className={Classes.FILL}
-                />
+                <HTMLSelect options={conditionalsItems} className={Classes.FILL} />
               )}
             </Col>
 
             <Col sm={2}>
-              <FormGroup
-                intent={hasError(`roles[${index}].field_key`) && Intent.DANGER}
-              >
+              <FormGroup intent={hasError(`roles[${index}].field_key`) && Intent.DANGER}>
                 <HTMLSelect
                   options={resourceFieldsOptions}
                   value={role.field_key}
@@ -326,9 +283,7 @@ function ViewForm({
             </Col>
 
             <Col sm={2}>
-              <FormGroup
-                intent={hasError(`roles[${index}].comparator`) && Intent.DANGER}
-              >
+              <FormGroup intent={hasError(`roles[${index}].comparator`) && Intent.DANGER}>
                 <HTMLSelect
                   options={compatatorsItems}
                   value={role.comparator}
@@ -338,14 +293,9 @@ function ViewForm({
               </FormGroup>
             </Col>
 
-            <Col sm={5} class="flex">
-              <FormGroup
-                intent={hasError(`roles[${index}].value`) && Intent.DANGER}
-              >
-                <InputGroup
-                  placeholder={intl.get('value')}
-                  {...getFieldProps(`roles[${index}].value`)}
-                />
+            <Col sm={5} className="flex">
+              <FormGroup intent={hasError(`roles[${index}].value`) && Intent.DANGER}>
+                <InputGroup placeholder={intl.get('value')} {...getFieldProps(`roles[${index}].value`)} />
               </FormGroup>
 
               <Button
@@ -361,41 +311,24 @@ function ViewForm({
         ))}
 
         <div className={'view-form__role-conditions-actions'}>
-          <Button
-            minimal={true}
-            intent={Intent.PRIMARY}
-            onClick={onClickNewRole}
-          >
+          <Button minimal={true} intent={Intent.PRIMARY} onClick={onClickNewRole}>
             <T id={'new_conditional'} />
           </Button>
         </div>
 
-        <div class="view-form--logic-expression-section">
+        <div className="view-form--logic-expression-section">
           <Row>
             <Col sm={8}>
               <FormGroup
                 label={intl.get('Logic Expression')}
                 className={'form-group--logic-expression'}
-                intent={
-                  errors.logic_expression &&
-                  touched.logic_expression &&
-                  Intent.DANGER
-                }
-                helperText={
-                  <ErrorMessage
-                    {...{ errors, touched }}
-                    name="logic_expression"
-                  />
-                }
+                intent={errors.logic_expression && touched.logic_expression && Intent.DANGER}
+                helperText={<ErrorMessage {...{ errors, touched }} name="logic_expression" />}
                 inline={true}
                 fill={true}
               >
                 <InputGroup
-                  intent={
-                    errors.logic_expression &&
-                    touched.logic_expression &&
-                    Intent.DANGER
-                  }
+                  intent={errors.logic_expression && touched.logic_expression && Intent.DANGER}
                   fill={true}
                   {...getFieldProps('logic_expression')}
                 />
@@ -406,20 +339,16 @@ function ViewForm({
 
         <H5 className={'mb2'}>Columns Preferences</H5>
 
-        <div class="dragable-columns">
+        <div className="dragable-columns">
           <Row gutterWidth={14}>
             <Col sm={4} className="dragable-columns__column">
               <H6 className="dragable-columns__title">Available Columns</H6>
 
               <InputGroup placeholder={intl.get('search')} leftIcon="search" />
 
-              <div class="dragable-columns__items">
+              <div className="dragable-columns__items">
                 <Menu>
-                  <ReactSortable
-                    list={availableColumns}
-                    setList={setAvailableColumns}
-                    group="shared-group-name"
-                  >
+                  <ReactSortable list={availableColumns} setList={setAvailableColumns} group="shared-group-name">
                     {availableColumns.map((field) => (
                       <MenuItem key={field.id} text={field.label} />
                     ))}
@@ -429,20 +358,12 @@ function ViewForm({
             </Col>
 
             <Col sm={1}>
-              <div class="dragable-columns__arrows">
+              <div className="dragable-columns__arrows">
                 <div>
-                  <Icon
-                    icon="arrow-circle-left"
-                    iconSize={30}
-                    color="#cecece"
-                  />
+                  <Icon icon="arrow-circle-left" iconSize={30} color="#cecece" />
                 </div>
-                <div class="mt2">
-                  <Icon
-                    icon="arrow-circle-right"
-                    iconSize={30}
-                    color="#cecece"
-                  />
+                <div className="mt2">
+                  <Icon icon="arrow-circle-right" iconSize={30} color="#cecece" />
                 </div>
               </div>
             </Col>
@@ -451,13 +372,9 @@ function ViewForm({
               <H6 className="dragable-columns__title">Selected Columns</H6>
               <InputGroup placeholder={intl.get('search')} leftIcon="search" />
 
-              <div class="dragable-columns__items">
+              <div className="dragable-columns__items">
                 <Menu>
-                  <ReactSortable
-                    list={draggedColumns}
-                    setList={setDraggedColumn}
-                    group="shared-group-name"
-                  >
+                  <ReactSortable list={draggedColumns} setList={setDraggedColumn} group="shared-group-name">
                     {draggedColumns.map((field) => (
                       <MenuItem key={field.id} text={field.label} />
                     ))}
@@ -468,25 +385,17 @@ function ViewForm({
           </Row>
         </div>
 
-        <div class="form__floating-footer">
+        <div className="form__floating-footer">
           <Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
             <T id={'submit'} />
           </Button>
 
-          <Button
-            intent={Intent.NONE}
-            className="ml1"
-            onClick={handleClickCancelBtn}
-          >
+          <Button intent={Intent.NONE} className="ml1" onClick={handleClickCancelBtn}>
             <T id={'cancel'} />
           </Button>
 
           <If condition={viewMeta && viewMeta.id}>
-            <Button
-              intent={Intent.DANGER}
-              onClick={onClickDeleteView}
-              className={'right mr2'}
-            >
+            <Button intent={Intent.DANGER} onClick={onClickDeleteView} className={'right mr2'}>
               <T id={'delete'} />
             </Button>
           </If>
diff --git a/packages/website/src/components/Topbar.tsx b/packages/website/src/components/Topbar.tsx
index 0a4ce3b4a..88a3edadb 100644
--- a/packages/website/src/components/Topbar.tsx
+++ b/packages/website/src/components/Topbar.tsx
@@ -29,7 +29,7 @@ function NavLink({ children, href, target, className }: NavLinkProps) {
         target={target}
         className={clsx(
           'inline-block lg:h-[32px] lg:leading-[32px] lg:px-[14px] font-medium  hover:text-indigo border-b-[rgba(24,34,77,0.15)] border-b border-solid lg:border-0 w-full h-[45px] leading-[45px]',
-          className
+          className,
         )}
       >
         {children}
@@ -46,17 +46,10 @@ interface NavButtonProps {
   target?: string;
 }
 
-function NavButton({
-  variant = 'solid',
-  children,
-  href,
-  target,
-  className,
-}: NavButtonProps) {
+function NavButton({ variant = 'solid', children, href, target, className }: NavButtonProps) {
   const commonStyle =
     'inline-block lg:h-[32px] lg:leading-[32px] h-[45px] leading-[45px] px-[14px] font-medium  rounded-full w-full';
-  const outlineStyle =
-    'hover:text-indigo border border-1-darkblue-600  hover:bg-darkblue-600 hover:text-white';
+  const outlineStyle = 'hover:text-indigo border border-1-darkblue-600  hover:bg-darkblue-600 hover:text-white';
 
   const solidStyle =
     'bg-indigo text-white lg:px-[14px] font-medium border-b-[rgba(24,34,77,0.15)] border-b border-solid lg:border-0 ';
@@ -72,7 +65,7 @@ function NavButton({
             [solidStyle]: variant === 'solid',
           },
           commonStyle,
-          className
+          className,
         )}
       >
         {children}
@@ -118,13 +111,10 @@ export function TopBar({ beforeNavbar, afterNavbar }: TopBarProps) {
           </div>
 
           <div
-            className={clsx(
-              'pt-6 lg:pt-0 lg:flex flex-grow items-center lg:block',
-              {
-                hidden: !toggle,
-                block: toggle,
-              }
-            )}
+            className={clsx('pt-6 lg:pt-0 lg:flex flex-grow items-center lg:block', {
+              hidden: !toggle,
+              block: toggle,
+            })}
           >
             <div className="flex flex-col lg:flex-row ml-auto items-stretch lg:items-center">
               <NavItem className={'pb-2 lg:pb-0'}>
@@ -157,7 +147,7 @@ export function TopBar({ beforeNavbar, afterNavbar }: TopBarProps) {
               {/* 
               <NavItem className={'d-none d-lg-block'}>
                 <a
-                  class="btn btn-outline-secondary"
+                  className="btn btn-outline-secondary"
                   href={'https://app.bigcapital.ly/'}
                 >
                   Sign In
@@ -165,11 +155,7 @@ export function TopBar({ beforeNavbar, afterNavbar }: TopBarProps) {
               </NavItem> */}
 
               <NavItem className={'hidden lg:block lg:ml-4'}>
-                <NavButton
-                  className={'px-6'}
-                  variant={'solid'}
-                  href={AppUrl.SignUp}
-                >
+                <NavButton className={'px-6'} variant={'solid'} href={AppUrl.SignUp}>
                   Sign Up
                 </NavButton>
               </NavItem>