From d9a716a46febae24a75d78ec08368a5c449cb1ea Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 4 Aug 2025 12:25:27 +0200
Subject: [PATCH] wip darkmode

---
 .../server/src/modules/App/App.controller.ts  |   3 +-
 .../modules/CreditNotes/models/CreditNote.ts  |   3 +-
 packages/webapp/public/index.html             |   4 +-
 .../AdvancedFilterCompatatorField.tsx         |   8 +-
 .../AdvancedFilter/AdvancedFilterDropdown.tsx | 111 ++--
 .../webapp/src/components/Alert/index.tsx     |  21 +-
 .../AppContentShell.module.scss               |   2 +-
 .../src/components/Aside/Aside.module.scss    |   6 +-
 .../webapp/src/components/Aside/Aside.tsx     |   5 +-
 .../src/components/BankAccounts/index.tsx     |  21 +-
 .../src/components/Button/ButtonLink.tsx      |   2 +-
 packages/webapp/src/components/Card/index.tsx |   9 +-
 .../src/components/CommercialDoc/index.tsx    |   6 +-
 .../components/ContentTabs/ContentTabs.tsx    |  15 +-
 .../Dashboard/BigcapitalLoading.tsx           |  15 +-
 .../components/Dashboard/GlobalHotkeys.tsx    |  14 +
 .../Datatable/DatatableEditable.tsx           |  43 +-
 .../Drawer/DrawerActionBar.module.scss        |  22 +
 .../components/Drawer/DrawerActionsBar.tsx    |  13 +-
 .../components/Drawer/DrawerHeaderContent.tsx |   5 +-
 .../src/components/Drawer/DrawerMainTabs.tsx  |  22 +-
 .../src/components/DrawersContainer.tsx       |   1 -
 .../components/Dropzone/Dropzone.module.css   |  13 +-
 .../src/components/Dropzone/Dropzone.tsx      |  12 +-
 .../FinancialSheet/StyledFinancialSheet.tsx   |  13 +-
 .../src/components/Forms/BlueprintFormik.tsx  |   2 +
 .../webapp/src/components/Forms/Select.tsx    |  16 +-
 .../src/components/Icons/BigcapitalAlt.tsx    |  23 +
 .../NumberFormatFields.tsx                    | 164 ++----
 .../src/components/PageForm/FormTopbar.tsx    |  15 +-
 .../src/components/PageForm/PageForm.tsx      |  10 +-
 .../src/components/Paper/Paper.module.scss    |  14 +
 .../webapp/src/components/Paper/Paper.tsx     |   6 +-
 .../webapp/src/components/Stepper/Stepper.tsx |   6 +-
 .../src/components/Stepper/StepperStep.tsx    |  14 +-
 .../TagsControl/TagsControl.module.scss       |   7 +-
 .../src/components/TotalLines/index.tsx       |  28 +-
 .../MakeJournalEntriesHeaderFields.tsx        |  50 +-
 .../MakeJournalFormFooterRight.tsx            |   5 +-
 .../UploadAttachmentButton.module.scss        |   7 +-
 .../Authentication/Authentication.tsx         |  10 +-
 .../containers/Authentication/_components.tsx |  19 +-
 .../BrandingTemplatesActionsBar.tsx           |   6 +-
 .../AccountTransactionsDataTable.tsx          |   2 +-
 .../AccountTransactionsDetailsBar.tsx         |   9 +-
 .../AccountsTransactionsAll.tsx               |   4 +-
 .../AccountTransactionsCard.tsx               |   4 +-
 .../TagButton.module.scss                     |  23 +-
 .../BankAccountDataTable.module.scss          |   4 +-
 .../CategorizeTransactionFormFooter.tsx       |   2 +-
 .../CategorizeTransactionAside.module.scss    |  16 +-
 .../CategorizeTransactionTabs.module.scss     |   4 +-
 .../MatchTransactionCheckbox.module.scss      |  52 +-
 ...tchingReconcileTransactionForm.module.scss |   2 +-
 .../Dashboard/Sidebar/SidebarMenu.tsx         |  11 +-
 .../InviteUserFormContent.tsx                 |  46 +-
 .../AccountDrawer/AccountDrawerActionBar.tsx  |   6 +-
 .../CustomerDetailsActionsBar.tsx             |   5 +-
 .../InvoiceGLEntriesTable.tsx                 |   4 +-
 .../ItemDetailDrawer/ItemDetailActionsBar.tsx |   6 +-
 .../PaymentMadeDetailActionsBar.tsx           |   7 +-
 .../VendorDetailsActionsBar.tsx               |   6 +-
 .../ElementCustomize.module.scss              |   4 +-
 .../ElementCustomizeHeader.module.scss        |   6 +-
 .../ElementCustomizeHeader.tsx                |   5 +-
 .../ElementCustomizePreview.tsx               |   6 +-
 .../ElementCustomizePreviewContent.tsx        |   7 +-
 .../ElementCustomizeTabs.module.scss          |   2 +-
 .../components/CompanyLogoUpload.module.scss  |  12 +-
 .../ExpenseForm/ExpenseFormFooterRight.tsx    |  10 +-
 .../ExpenseForm/ExpenseFormHeaderFields.tsx   |  50 +-
 .../APAgingSummary/APAgingSummaryTable.tsx    |  14 +-
 .../ARAgingSummary/ARAgingSummaryTable.tsx    |  15 +-
 .../BalanceSheet/BalanceSheetTable.tsx        |  20 +-
 .../CashFlowStatementTable.tsx                |  19 +-
 .../CustomersBalanceSummaryTable.tsx          |  25 +-
 .../CustomersTransactionsTable.tsx            |  15 +-
 .../FinancialReportPage.tsx                   |   2 +-
 .../FinancialStatementsFilter.tsx             |  49 +-
 .../GeneralLedger/GeneralLedgerTable.tsx      |  16 +-
 .../InventoryItemDetailsTable.tsx             |  20 +-
 .../Journal/JournalTable.tsx                  |  13 +-
 .../ProfitLossSheet/ProfitLossSheetTable.tsx  |  15 +-
 .../PurchasesByItemsTable.tsx                 |  19 +-
 .../SalesByItems/SalesByItemsTable.tsx        |  20 +-
 .../SelectDisplayColumnsBy.tsx                |  49 +-
 .../TrialBalanceSheetTable.tsx                |  16 +-
 .../VendorsBalanceSummaryTable.tsx            |  25 +-
 .../VendorsTransactionsTable.tsx              |  18 +-
 .../Import/ImportDropzone.module.css          |  17 +-
 .../src/containers/Import/ImportDropzone.tsx  |   2 +-
 .../Import/ImportFileFooterActions.tsx        |   2 +-
 .../Import/ImportSampleDownload.module.scss   |  28 +-
 .../Import/ImportStepper.module.scss          |   5 +-
 .../ItemsCategories/ItemCategoriesImport.tsx  |   2 +-
 .../PaymentMethods/PaymentMethodSelect.tsx    |   2 +-
 .../PreferencesBrandingFormContent.tsx        |  10 +-
 .../PreferencesCreditNotesForm.tsx            |   5 +-
 .../Estimates/PreferencesEstimatesForm.tsx    |   5 +-
 .../Preferences/General/GeneralForm.tsx       |   5 +-
 .../Invoices/PreferencesInvoicesForm.tsx      |   5 +-
 .../PaymentMethods/StripePaymentMethod.tsx    |   7 +-
 .../StripePreSetupDialogContent.tsx           |   2 +-
 .../Preferences/PreferencesPageLoader.tsx     |   7 +-
 .../Receipts/PreferencesReceiptsForm.tsx      |   5 +-
 .../Bills/BillForm/BillFormFooterRight.tsx    |   5 +-
 .../VendorCreditNoteFormFooterRight.tsx       |   5 +-
 .../PaymentMadeFormFooterRight.tsx            |   5 +-
 .../CreditNoteFormFooterRight.tsx             |   5 +-
 .../CreditNoteForm/CreditNoteFormHeader.tsx   |  15 +-
 .../Estimates/EstimateForm/EstimateForm.tsx   |  24 +-
 .../EstimateForm/EstimateFormFooterRight.tsx  |   5 +-
 .../EstimateForm/EstimateFormHeader.tsx       |  15 +-
 .../EstimateSnedMailFields.tsx                |   6 +-
 .../SendMailViewDrawer/SendMailViewHeader.tsx |  15 +-
 .../SendMailViewDrawer/SendMailViewLayout.tsx |  16 +-
 .../SendMailViewMessageField.tsx              |   4 +-
 .../SendMailViewPreviewHeader.tsx             |   8 +-
 .../SendMailViewPreviewTabs.tsx               |  15 +-
 .../CompanyLogoUpload.module.scss             |   4 +-
 .../InvoiceCustomizeGeneralFields.module.scss |  17 +-
 .../InvoiceCustomizeGeneralFields.tsx         |  14 +-
 .../InvoiceCustomize/InvoiceCustomizeTabs.tsx |   8 +-
 .../InvoiceCustomize/Overlay.module.scss      |  10 +-
 .../InvoiceForm/AdjustmentTotalLine.tsx       |  17 +-
 .../InvoiceForm/DiscountTotalLine.tsx         |  19 +-
 .../InvoiceForm/InvoiceFloatingActions.tsx    |   4 +-
 .../InvoiceForm/InvoiceFormFooterRight.tsx    |   5 +-
 .../InvoiceForm/InvoiceFormHeader.module.scss |  10 +
 .../InvoiceForm/InvoiceFormHeader.tsx         |   4 +-
 .../InvoiceSendMailFields.tsx                 |   6 +-
 .../InvoiceSendMailHeaderPreview.tsx          |  10 +-
 .../PaymentReceiveFormFootetRight.tsx         |   5 +-
 .../PaymentReceiveFormHeader.tsx              |  15 +-
 .../PaymentReceivePaymentNoField.tsx          | 135 +++--
 .../PaymentReceivedMailFields.tsx             |   6 +-
 .../ReceiptForm/ReceiptFormFooterRight.tsx    |   5 +-
 .../ReceiptForm/ReceiptFormHeader.tsx         |  15 +-
 .../ReceiptSendMailFormFields.tsx             |   6 +-
 .../TransactionsLockingHeader.tsx             |   2 +-
 .../TransactionsLocking/components.tsx        |  10 +-
 packages/webapp/src/hooks/useDarkMode.ts      |   3 +
 packages/webapp/src/icons/More.tsx            |   6 +-
 packages/webapp/src/icons/StripeLogo.tsx      |   2 +-
 packages/webapp/src/style/App.scss            |   4 +-
 packages/webapp/src/style/_variables.scss     | 473 +++++++++++++++++-
 .../src/style/components/BigAmount.scss       |  10 +-
 .../style/components/BigcapitalLoading.scss   |   2 +-
 .../style/components/DataTable/DataTable.scss |  71 +--
 .../DataTableEmptyStatus.module.scss          |   4 +-
 .../webapp/src/style/components/Details.scss  |   4 +-
 .../webapp/src/style/components/Drawer.scss   |  79 +--
 .../style/components/Drawers/ItemDrawer.scss  |   5 +-
 .../style/components/MaterialProgressBar.scss |   2 +-
 .../webapp/src/style/components/Menu.scss     |   4 +-
 .../webapp/src/style/components/Overlay.scss  |   2 +-
 .../webapp/src/style/components/PageForm.scss |  27 +-
 .../src/style/components/SidebarOverlay.scss  |  18 +-
 .../src/style/components/UniversalSearch.scss |  20 +-
 .../style/containers/Dashboard/Sidebar.scss   |  21 +-
 .../FinancialStatements/DrawerHeader.scss     |  30 +-
 .../webapp/src/style/objects/buttons.scss     |   5 +-
 packages/webapp/src/style/objects/form.scss   |  28 +-
 .../src/style/pages/Dashboard/Dashboard.scss  | 103 ++--
 .../FinancialStatements/FinancialSheets.scss  |  10 +-
 .../style/pages/Preferences/GeneralForm.scss  |   3 +-
 .../src/style/pages/Preferences/Page.scss     |   2 +-
 .../src/style/pages/Preferences/Sidebar.scss  |  21 +-
 .../src/style/pages/Preferences/Topbar.scss   |   6 +-
 .../src/style/views/filter-dropdown.scss      |   4 +-
 170 files changed, 2006 insertions(+), 1018 deletions(-)
 create mode 100644 packages/webapp/src/components/Drawer/DrawerActionBar.module.scss
 create mode 100644 packages/webapp/src/components/Icons/BigcapitalAlt.tsx
 create mode 100644 packages/webapp/src/components/Paper/Paper.module.scss
 create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.module.scss
 create mode 100644 packages/webapp/src/hooks/useDarkMode.ts

diff --git a/packages/server/src/modules/App/App.controller.ts b/packages/server/src/modules/App/App.controller.ts
index 27fd20110..24fa19368 100644
--- a/packages/server/src/modules/App/App.controller.ts
+++ b/packages/server/src/modules/App/App.controller.ts
@@ -1,5 +1,4 @@
-import { Controller, Get } from '@nestjs/common';
-import { AppService } from './App.service';
+import { Controller } from '@nestjs/common';
 
 @Controller()
 export class AppController {}
diff --git a/packages/server/src/modules/CreditNotes/models/CreditNote.ts b/packages/server/src/modules/CreditNotes/models/CreditNote.ts
index 15ad3a78a..cf969a5b1 100644
--- a/packages/server/src/modules/CreditNotes/models/CreditNote.ts
+++ b/packages/server/src/modules/CreditNotes/models/CreditNote.ts
@@ -1,5 +1,5 @@
+import { Model, raw } from 'objection';
 import { DiscountType } from '@/common/types/Discount';
-import { BaseModel } from '@/models/Model';
 import { Branch } from '@/modules/Branches/models/Branch.model';
 import { Customer } from '@/modules/Customers/models/Customer';
 import { ExportableModel } from '@/modules/Export/decorators/ExportableModel.decorator';
@@ -8,7 +8,6 @@ import { TenantBaseModel } from '@/modules/System/models/TenantBaseModel';
 import { InjectModelMeta } from '@/modules/Tenancy/TenancyModels/decorators/InjectModelMeta.decorator';
 import { ItemEntry } from '@/modules/TransactionItemEntry/models/ItemEntry';
 import { Warehouse } from '@/modules/Warehouses/models/Warehouse.model';
-import { mixin, Model, raw } from 'objection';
 import { CreditNoteMeta } from './CreditNote.meta';
 import { InjectModelDefaultViews } from '@/modules/Views/decorators/InjectModelDefaultViews.decorator';
 import { CreditNoteDefaultViews } from '../constants';
diff --git a/packages/webapp/public/index.html b/packages/webapp/public/index.html
index 1af330a07..e177a81a6 100644
--- a/packages/webapp/public/index.html
+++ b/packages/webapp/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html dir="ltr" lang="en">
   <head>
     <meta charset="utf-8" />
@@ -31,7 +31,7 @@
     -->
     <title>Bigcapital</title>
   </head>
-  <body>
+  <body class="bp4-dark">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <div id="nprogress"></div>
diff --git a/packages/webapp/src/components/AdvancedFilter/AdvancedFilterCompatatorField.tsx b/packages/webapp/src/components/AdvancedFilter/AdvancedFilterCompatatorField.tsx
index 7f15db95f..4ea11e8e5 100644
--- a/packages/webapp/src/components/AdvancedFilter/AdvancedFilterCompatatorField.tsx
+++ b/packages/webapp/src/components/AdvancedFilter/AdvancedFilterCompatatorField.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import { Classes } from '@blueprintjs/core';
-import { ListSelect } from '../Select';
+import { FSelect } from '../Forms';
 import { getConditionTypeCompatators } from './utils';
 
 export default function DynamicFilterCompatatorField({
@@ -11,9 +11,9 @@ export default function DynamicFilterCompatatorField({
   const options = getConditionTypeCompatators(dataType);
 
   return (
-    <ListSelect
-      textProp={'label'}
-      selectedItemProp={'value'}
+    <FSelect
+      textAccessor={'label'}
+      valueAccessor={'value'}
       items={options}
       className={Classes.FILL}
       filterable={false}
diff --git a/packages/webapp/src/components/AdvancedFilter/AdvancedFilterDropdown.tsx b/packages/webapp/src/components/AdvancedFilter/AdvancedFilterDropdown.tsx
index c7b2fa2d0..e0572ef1e 100644
--- a/packages/webapp/src/components/AdvancedFilter/AdvancedFilterDropdown.tsx
+++ b/packages/webapp/src/components/AdvancedFilter/AdvancedFilterDropdown.tsx
@@ -1,16 +1,16 @@
 // @ts-nocheck
 import React from 'react';
 import { Formik, FastField, FieldArray } from 'formik';
-import {
-  Button,
-  FormGroup,
-  Classes,
-  InputGroup,
-  MenuItem,
-} from '@blueprintjs/core';
+import { Button, Classes, InputGroup, MenuItem } from '@blueprintjs/core';
 import { get, first, defaultTo, isEqual, isEmpty } from 'lodash';
 import intl from 'react-intl-universal';
-import { Choose, Icon, FormattedMessage as T, ListSelect } from '@/components';
+import {
+  Choose,
+  Icon,
+  FormattedMessage as T,
+  FSelect,
+  FFormGroup,
+} from '@/components';
 import { useUpdateEffect } from '@/hooks';
 import {
   AdvancedFilterDropdownProvider,
@@ -58,38 +58,31 @@ function FilterConditionField() {
   const conditionFieldPath = getConditionFieldPath('condition');
 
   return (
-    <FastField name={conditionFieldPath}>
-      {({ form, field }) => (
-        <FormGroup className={'form-group--condition'}>
-          <Choose>
-            <Choose.When condition={conditionIndex === 0}>
-              <InputGroup disabled value={intl.get('filter.when')} />
-            </Choose.When>
+    <FFormGroup className={'form-group--condition'} name={conditionFieldPath}>
+      <Choose>
+        <Choose.When condition={conditionIndex === 0}>
+          <InputGroup disabled value={intl.get('filter.when')} />
+        </Choose.When>
 
-            <Choose.Otherwise>
-              <ListSelect
-                selectedItem={field.value}
-                textProp={'label'}
-                selectedItemProp={'value'}
-                labelProp={'text'}
-                items={conditionalsOptions}
-                className={Classes.FILL}
-                filterable={false}
-                onItemSelect={(option) => {
-                  form.setFieldValue(conditionFieldPath, option.value);
-                }}
-                popoverProps={{
-                  inline: true,
-                  minimal: true,
-                  captureDismiss: true,
-                }}
-                itemRenderer={ConditionItemRenderer}
-              />
-            </Choose.Otherwise>
-          </Choose>
-        </FormGroup>
-      )}
-    </FastField>
+        <Choose.Otherwise>
+          <FSelect
+            name={conditionFieldPath}
+            textAccessor={'label'}
+            valueAccessor={'value'}
+            labelAccessor={'text'}
+            items={conditionalsOptions}
+            filterable={false}
+            popoverProps={{
+              inline: true,
+              minimal: true,
+              captureDismiss: true,
+            }}
+            itemRenderer={ConditionItemRenderer}
+            className={Classes.FILL}
+          />
+        </Choose.Otherwise>
+      </Choose>
+    </FFormGroup>
   );
 }
 
@@ -103,20 +96,18 @@ function FilterCompatatorFilter() {
   const fieldType = get(fieldMeta, 'fieldType');
 
   return (
-    <FastField name={comparatorFieldPath}>
-      {({ form, field }) => (
-        <FormGroup className={'form-group--comparator'}>
-          <AdvancedFilterCompatatorField
-            dataType={fieldType}
-            className={Classes.FILL}
-            selectedItem={field.value}
-            onItemSelect={(option) => {
-              form.setFieldValue(comparatorFieldPath, option.value);
-            }}
-          />
-        </FormGroup>
-      )}
-    </FastField>
+    <FFormGroup
+      name={comparatorFieldPath}
+      className={'form-group--comparator'}
+      fastField
+    >
+      <AdvancedFilterCompatatorField
+        name={comparatorFieldPath}
+        dataType={fieldType}
+        className={Classes.FILL}
+        fastField
+      />
+    </FFormGroup>
   );
 }
 
@@ -169,11 +160,11 @@ function FilterFieldsField() {
   return (
     <FastField name={fieldPath}>
       {({ field, form }) => (
-        <FormGroup className={'form-group--fieldKey'}>
-          <ListSelect
+        <FFormGroup className={'form-group--fieldKey'} name={fieldPath}>
+          <FSelect
             selectedItem={field.value}
-            textProp={'label'}
-            selectedItemProp={'value'}
+            textAccessor={'label'}
+            valueAccessor={'value'}
             items={transformFieldsToOptions(fields)}
             className={Classes.FILL}
             onItemSelect={(option) => {
@@ -188,7 +179,7 @@ function FilterFieldsField() {
               captureDismiss: true,
             }}
           />
-        </FormGroup>
+        </FFormGroup>
       )}
     </FastField>
   );
@@ -219,7 +210,7 @@ function FilterValueField() {
       shouldUpdate={shouldFilterValueFieldUpdate}
     >
       {({ form: { setFieldValue }, field }) => (
-        <FormGroup className={'form-group--value'}>
+        <FFormGroup className={'form-group--value'} name={valueFieldPath}>
           <AdvancedFilterValueField
             isFocus={conditionIndex === 0}
             value={field.value}
@@ -231,7 +222,7 @@ function FilterValueField() {
               setFieldValue(valueFieldPath, value);
             }}
           />
-        </FormGroup>
+        </FFormGroup>
       )}
     </FastField>
   );
diff --git a/packages/webapp/src/components/Alert/index.tsx b/packages/webapp/src/components/Alert/index.tsx
index 0bde33523..f63efb99d 100644
--- a/packages/webapp/src/components/Alert/index.tsx
+++ b/packages/webapp/src/components/Alert/index.tsx
@@ -15,6 +15,7 @@ export function Alert({ title, description, children, intent, className }) {
 
 const AlertRoot = styled.div`
   border: 1px solid rgb(223, 227, 230);
+  background: var(--color-alert-default-background);
   padding: 12px;
   border-radius: 6px;
   margin-bottom: 20px;
@@ -22,40 +23,40 @@ const AlertRoot = styled.div`
   ${(props) =>
     props.intent === 'danger' &&
     `
-    border-color: rgb(249, 198, 198);
-    background: rgb(255, 248, 248);
+    border-color: var(--color-alert-danger-border);
+    background: var(--color-alert-danger-background);
 
     ${AlertDesc} {
-      color: #d95759;
+      color: var(--color-alert-danger-description-text);
     }
     ${AlertTitle} {
-      color: rgb(205, 43, 49);
+      color: var(--color-alert-danger-title-text);
     }
   `}
 
   ${(props) =>
     props.intent === 'primary' &&
     `
-    background: #fff;
-    border-color: #98a8ee;
+    background: var(--color-alert-primary-background);
+    border-color: var(--color-alert-primary-border);
 
     ${AlertTitle} {
-      color: #1a3bd4;
+      color: var(--color-alert-primary-title-text);
     }
     ${AlertDesc} {
-      color: #455883;
+      color: var(--color-alert-primary-description-text);
     }
   `}
 `;
 
 export const AlertTitle = styled.h3`
-  color: rgb(17, 24, 28);
+  color: var(--color-alert-default-title-text);
   margin-bottom: 4px;
   font-size: 14px;
   font-weight: 600;
 `;
 
 export const AlertDesc = styled.p`
-  color: rgb(104, 112, 118);
+  color: var(--color-alert-default-description-text);
   margin: 0;
 `;
diff --git a/packages/webapp/src/components/AppShell/AppContentShell/AppContentShell.module.scss b/packages/webapp/src/components/AppShell/AppContentShell/AppContentShell.module.scss
index 7d3364303..7f8960ace 100644
--- a/packages/webapp/src/components/AppShell/AppContentShell/AppContentShell.module.scss
+++ b/packages/webapp/src/components/AppShell/AppContentShell/AppContentShell.module.scss
@@ -14,7 +14,7 @@
   width: var(--aside-width);
   min-width: var(--aside-min-width);
   height: 100dvh;
-  border-left: 1px solid rgba(17, 20, 24, 0.15);
+  border-left: 1px solid var(--color-app-shell-divider);
   height: inherit;
   overflow: auto;
   display: flex;
diff --git a/packages/webapp/src/components/Aside/Aside.module.scss b/packages/webapp/src/components/Aside/Aside.module.scss
index 73ee0e299..ffeceb60a 100644
--- a/packages/webapp/src/components/Aside/Aside.module.scss
+++ b/packages/webapp/src/components/Aside/Aside.module.scss
@@ -6,8 +6,8 @@
 
 .title{
   align-items: center;
-  background: #fff;
-  border-bottom: 1px solid #E1E2E9;
+  background: var(--color-aside-background);
+  border-bottom: 1px solid var(--color-aside-divider);
   display: flex;
   flex: 0 0 auto;
   min-height: 40px;
@@ -20,6 +20,6 @@
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
-  background-color: #fff;
+  background-color: var(--color-aside-title-background);
   overflow-y: auto;
 }
\ No newline at end of file
diff --git a/packages/webapp/src/components/Aside/Aside.tsx b/packages/webapp/src/components/Aside/Aside.tsx
index a9f8e25e9..20ebc24f6 100644
--- a/packages/webapp/src/components/Aside/Aside.tsx
+++ b/packages/webapp/src/components/Aside/Aside.tsx
@@ -28,7 +28,6 @@ export function Aside({
     <Box className={clsx(styles.root, className, classNames?.root)}>
       <Group position="apart" className={clsx(styles.title, classNames?.title)}>
         {title}
-
         {hideCloseButton !== true && (
           <Button
             aria-label="Close"
@@ -45,13 +44,13 @@ export function Aside({
   );
 }
 
-interface AsideContentProps extends BoxProps {}
+interface AsideContentProps extends BoxProps { }
 
 function AsideContent({ ...props }: AsideContentProps) {
   return <Box {...props} className={clsx(styles.content, props?.className)} />;
 }
 
-interface AsideFooterProps extends BoxProps {}
+interface AsideFooterProps extends BoxProps { }
 
 function AsideFooter({ ...props }: AsideFooterProps) {
   return <Box {...props} />;
diff --git a/packages/webapp/src/components/BankAccounts/index.tsx b/packages/webapp/src/components/BankAccounts/index.tsx
index e83c3946c..0fb5284ca 100644
--- a/packages/webapp/src/components/BankAccounts/index.tsx
+++ b/packages/webapp/src/components/BankAccounts/index.tsx
@@ -104,13 +104,14 @@ const BankAccountWrap = styled.div`
   display: flex;
   flex-direction: column;
   border-radius: 3px;
-  background: #fff;
+  background: var(--color-bank-account-card-background);
   margin: 8px;
-  border: 1px solid #c8cad0;
+  border: 1px solid var(--color-bank-account-card-border);
   transition: all 0.1s ease-in-out;
+  color: var(--color-bank-account-card-text);
 
   &:hover {
-    border-color: #0153cc;
+    border-color: var(--color-bank-account-card-hover-border);
   }
 `;
 
@@ -124,7 +125,7 @@ const BankAccountTitle = styled.div`
   font-size: 15px;
   font-style: inherit;
   letter-spacing: -0.003em;
-  color: rgb(23, 43, 77);
+  // color: rgb(23, 43, 77);
   white-space: nowrap;
   font-weight: 600;
   line-height: 1;
@@ -137,7 +138,7 @@ const BankAccountTitle = styled.div`
 const BnakAccountCode = styled.div`
   font-size: 11px;
   margin-top: 4px;
-  color: rgb(23, 43, 77);
+  color: var(--color-bank-account-code-text);
   display: inline-block;
 `;
 
@@ -145,7 +146,7 @@ const BankAccountBalanceWrap = styled.div`
   display: flex;
   flex-direction: column;
   margin-top: auto;
-  border-top: 1px solid #dfdfdf;
+  border-top: 1px solid var(--color-bank-account-card-border);
   padding: 10px 12px;
 `;
 
@@ -153,7 +154,7 @@ const BankAccountBalanceAmount = styled.div`
   font-size: 16px;
   font-weight: 600;
   line-height: 1;
-  color: #57657e;
+  // color: #57657e;
 `;
 
 const BankAccountBalanceLabel = styled.div`
@@ -167,7 +168,7 @@ const BankAccountBalanceLabel = styled.div`
 const MetaLineWrap = styled.div`
   font-size: 11px;
   display: flex;
-  color: #2f3c58;
+  // color: #2f3c58;
 
   &:not(:first-of-type) {
     margin-top: 6px;
@@ -178,7 +179,7 @@ const MetaLineTitle = styled.div``;
 const MetaLineValue = styled.div`
   box-sizing: border-box;
   font-style: inherit;
-  background: rgb(223, 225, 230);
+  background: var(--color-bank-account-card-tag-background);
   line-height: initial;
   align-content: center;
   padding: 0px 2px;
@@ -187,9 +188,9 @@ const MetaLineValue = styled.div`
   text-transform: none;
   width: 30px;
   min-width: 30px;
+  // color: rgb(23, 43, 77);
   height: 16px;
   text-align: center;
-  color: rgb(23, 43, 77);
   font-size: 11px;
   margin-left: auto;
 `;
diff --git a/packages/webapp/src/components/Button/ButtonLink.tsx b/packages/webapp/src/components/Button/ButtonLink.tsx
index 198dafb29..10001cfb2 100644
--- a/packages/webapp/src/components/Button/ButtonLink.tsx
+++ b/packages/webapp/src/components/Button/ButtonLink.tsx
@@ -2,7 +2,7 @@
 import styled from 'styled-components';
 
 export const ButtonLink = styled.button`
-  color: #0052cc;
+  color: var(--color-primary);
   border: 0;
   background: transparent;
   cursor: pointer;
diff --git a/packages/webapp/src/components/Card/index.tsx b/packages/webapp/src/components/Card/index.tsx
index da2c64b43..856b39602 100644
--- a/packages/webapp/src/components/Card/index.tsx
+++ b/packages/webapp/src/components/Card/index.tsx
@@ -13,13 +13,16 @@ export function Card({ className, style, children }) {
 const CardRoot = styled.div`
   padding: 15px;
   margin: 15px;
-  background: #fff;
-  border: 1px solid #d2dce2;
+  background: var(--color-card-background);
+  border: 1px solid var(--color-card-border);
 `;
 
 export const CardFooterActions = styled.div`
+  --x-color-border: #e0e7ea;
+  --x-color-border: rgba(255, 255, 255, 0.25);
+
   padding-top: 16px;
-  border-top: 1px solid #e0e7ea;
+  border-top: 1px solid var(--x-color-border);
   margin-top: 30px;
 
   .bp4-button {
diff --git a/packages/webapp/src/components/CommercialDoc/index.tsx b/packages/webapp/src/components/CommercialDoc/index.tsx
index 8fbcb4842..04e744f66 100644
--- a/packages/webapp/src/components/CommercialDoc/index.tsx
+++ b/packages/webapp/src/components/CommercialDoc/index.tsx
@@ -3,6 +3,10 @@ import { Card } from '../Card';
 import { DataTable } from '../Datatable';
 
 export const CommercialDocBox = styled(Card)`
+  --x-background-color: var(--x-white);
+  --x-background-color: var(--color-dark-gray2);
+  
+  background-color: var(--x-background-color);
   padding: 22px 20px;
 `;
 
@@ -16,7 +20,7 @@ export const CommercialDocTopHeader = styled.div`
 
 export const CommercialDocEntriesTable = styled(DataTable)`
   .tbody .tr:last-child .td {
-    border-bottom: 1px solid #d2dce2;
+    border-bottom-width: 1px;
   }
 `;
 
diff --git a/packages/webapp/src/components/ContentTabs/ContentTabs.tsx b/packages/webapp/src/components/ContentTabs/ContentTabs.tsx
index f752918f2..4d8d0b2b5 100644
--- a/packages/webapp/src/components/ContentTabs/ContentTabs.tsx
+++ b/packages/webapp/src/components/ContentTabs/ContentTabs.tsx
@@ -12,8 +12,9 @@ interface ContentTabItemRootProps {
 }
 const ContentTabItemRoot = styled.button<ContentTabItemRootProps>`
   flex: 1 0;
-  background: #fff;
-  border: 1px solid #e1e2e8;
+  background: var(--color-card-background);
+  border: 1px solid var(--color-content-tab-border);
+  color: var(--color-content-tab-text);
   border-radius: 5px;
   padding: 11px;
   text-align: left;
@@ -28,32 +29,30 @@ const ContentTabItemRoot = styled.button<ContentTabItemRootProps>`
   ${(props) =>
     props.active &&
     `
-      border-color: #1552c8;
+      border-color: var(--color-content-tab-active-border);
+      color: var(--color-content-tab-active-text);
       box-shadow: 0 0 0 0.25px #1552c8;
 
       ${ContentTabTitle} {
-        color: #1552c8;
         font-weight: 500;
       }
       ${ContentTabDesc} {
-        color: #1552c8;        
       }
     `}
   &:hover,
   &:active {
-    border-color: #1552c8;
+    border-color: var(--color-content-tab-hover-border);
   }
 `;
 const ContentTabTitle = styled('h3')`
   font-size: 14px;
   font-weight: 400;
-  color: #2f343c;
 `;
 const ContentTabDesc = styled('p')`
   margin: 0;
-  color: #5f6b7c;
   margin-top: 4px;
   font-size: 12px;
+  opacity: 0.7;
 `;
 
 interface ContentTabsItemProps {
diff --git a/packages/webapp/src/components/Dashboard/BigcapitalLoading.tsx b/packages/webapp/src/components/Dashboard/BigcapitalLoading.tsx
index 60acf4ead..4f951573b 100644
--- a/packages/webapp/src/components/Dashboard/BigcapitalLoading.tsx
+++ b/packages/webapp/src/components/Dashboard/BigcapitalLoading.tsx
@@ -4,15 +4,28 @@ import classNames from 'classnames';
 import { Icon } from '@/components';
 
 import '@/style/components/BigcapitalLoading.scss';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 /**
  * Bigcapital logo loading.
  */
 export default function BigcapitalLoading({ className }) {
+  const isDarkmode = useIsDarkMode();
+
   return (
     <div className={classNames('bigcapital-loading', className)}>
       <div class="center">
-        <Icon icon="bigcapital" height={37} width={228} />
+        {isDarkmode ? (
+          <Icon
+            icon="bigcapital-alt"
+            height={37}
+            width={228}
+            color="#fff"
+            className="bigcapital-logo"
+          />
+        ) : (
+          <Icon icon="bigcapital" height={37} width={228} />
+        )}
       </div>
     </div>
   );
diff --git a/packages/webapp/src/components/Dashboard/GlobalHotkeys.tsx b/packages/webapp/src/components/Dashboard/GlobalHotkeys.tsx
index 6ec3fd02b..3b1b83d68 100644
--- a/packages/webapp/src/components/Dashboard/GlobalHotkeys.tsx
+++ b/packages/webapp/src/components/Dashboard/GlobalHotkeys.tsx
@@ -9,6 +9,17 @@ import withUniversalSearchActions from '@/containers/UniversalSearch/withUnivers
 
 import { compose } from '@/utils';
 
+// Toggle dark/light mode by toggling 'bp4-dark' class on body
+const handleToggleDarkMode = () => {
+  const body = document.body;
+
+  if (body.classList.contains('bp4-dark')) {
+    body.classList.remove('bp4-dark');
+  } else {
+    body.classList.add('bp4-dark');
+  }
+};
+
 function GlobalHotkeys({
   // #withDashboardActions
   toggleSidebarExpand,
@@ -55,6 +66,9 @@ function GlobalHotkeys({
       openGlobalSearch();
     }, 0);
   });
+  useHotkeys('shift+h', () => {
+    handleToggleDarkMode();
+  });
 
   return <div></div>;
 }
diff --git a/packages/webapp/src/components/Datatable/DatatableEditable.tsx b/packages/webapp/src/components/Datatable/DatatableEditable.tsx
index fc95110d4..aecd7dde0 100644
--- a/packages/webapp/src/components/Datatable/DatatableEditable.tsx
+++ b/packages/webapp/src/components/Datatable/DatatableEditable.tsx
@@ -21,30 +21,52 @@ export function DataTableEditable({
 }
 
 const DatatableEditableRoot = styled.div`
+  --x-table-background: #fff;
+  --x-table-border: #d2dce2;
+
+  --x-table-background: var(--color-dark-gray1);
+  --x-table-border: rgba(255, 255, 255, 0.1);
+
+  --x-table-head-border: #d2dce2;
+  --x-table-head-background: #f2f3fb;
+
+  --x-table-head-background: var(--color-dark-gray2);
+  --x-table-head-border: rgba(255, 255, 255, 0.1);
+
+
+
+  --x-table-head-text: #415060;
+  --x-table-head-text: rgba(--color-light-gray1);
+
+  --x-color-table-body-input-text: #222;
+  --x-color-table-body-input-text: var(--color-light-gray2);
+
+  --x-color-table-cell-border: #d8d8d8;
+  --x-color-table-cell-border: rgba(255, 255, 255, 0.1);
+  
   .bp4-form-group {
     margin-bottom: 0;
   }
   .table {
-    border: 1px solid #d2dce2;
+    border: 1px solid var(--x-table-border);
+    background-color: var(--x-table-background);
     border-radius: 5px;
-    background-color: #fff;
 
     .th,
     .td {
-      border-left: 1px solid #e2e2e2;
+      border-left: 1px solid var(--x-table-border);
 
       &:first-of-type {
         border-left: 0;
       }
     }
-
     .thead {
       .tr .th {
         padding: 9px 14px;
-        background-color: #f2f3fb;
+        background-color: var(--x-table-head-background);
         font-size: 13px;
-        color: #415060;
-        border-bottom: 1px solid #d2dce2;
+        color: var(--x-table-head-text);
+        border-bottom: 1px solid var(--x-table-head-border);
 
         &,
         .inner-resizer {
@@ -55,7 +77,7 @@ const DatatableEditableRoot = styled.div`
     .tbody {
       .tr .td {
         border-bottom: 0;
-        border-bottom: 1px solid #d8d8d8;
+        border-bottom: 1px solid var(--x-color-table-cell-border);
         min-height: 38px;
         padding: 4px 14px;
 
@@ -74,8 +96,9 @@ const DatatableEditableRoot = styled.div`
         }
         .bp4-form-group:not(.bp4-intent-danger) .bp4-input,
         .form-group--select-list .bp4-button {
-          border-color: #ffffff;
-          color: #222;
+          border-color: transparent;
+          box-shadow: 0 0 0;
+          color: var(--x-color-table-body-input-text);
           border-radius: 3px;
           text-align: inherit;
         }
diff --git a/packages/webapp/src/components/Drawer/DrawerActionBar.module.scss b/packages/webapp/src/components/Drawer/DrawerActionBar.module.scss
new file mode 100644
index 000000000..00a45c809
--- /dev/null
+++ b/packages/webapp/src/components/Drawer/DrawerActionBar.module.scss
@@ -0,0 +1,22 @@
+
+
+.root {
+  --x-color-background: var(--color-white);
+  --x-color-background: transparent;
+
+  --x-color-border: var(--color-dark-gray1);
+  --x-color-border: rgba(255, 255, 255, 0.2);
+
+  &:global(.bp4-navbar){
+    background-color: var(--x-color-background);
+    box-shadow: 0 1px 0 var(--x-color-border);
+  }
+  &:global(.bp4-navbar),
+  :global(.bp4-navbar-group){
+    height: 45px;
+  }
+  :global(.bp4-navbar-divider){
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+}
\ No newline at end of file
diff --git a/packages/webapp/src/components/Drawer/DrawerActionsBar.tsx b/packages/webapp/src/components/Drawer/DrawerActionsBar.tsx
index 13ecc12de..9450d98bd 100644
--- a/packages/webapp/src/components/Drawer/DrawerActionsBar.tsx
+++ b/packages/webapp/src/components/Drawer/DrawerActionsBar.tsx
@@ -1,13 +1,8 @@
 // @ts-nocheck
 import React from 'react';
-import styled from 'styled-components';
+import { Navbar } from '@blueprintjs/core';
+import styles from './DrawerActionBar.module.scss';
 
-import { DashboardActionsBar } from '../Dashboard';
-
-export function DrawerActionsBar({ ...props }) {
-  return <DrawerActionsBarRoot {...props} />;
+export function DrawerActionsBar({ children, ...props }) {
+  return <Navbar className={styles.root}>{children}</Navbar>;
 }
-
-const DrawerActionsBarRoot = styled(DashboardActionsBar)`
-  border-bottom: 1px solid #d9d9da;
-`;
diff --git a/packages/webapp/src/components/Drawer/DrawerHeaderContent.tsx b/packages/webapp/src/components/Drawer/DrawerHeaderContent.tsx
index 60b19b948..0953fc984 100644
--- a/packages/webapp/src/components/Drawer/DrawerHeaderContent.tsx
+++ b/packages/webapp/src/components/Drawer/DrawerHeaderContent.tsx
@@ -64,7 +64,10 @@ function SubTitle({ children }) {
 }
 
 const SubTitleHead = styled.div`
-  color: #666;
+  --x-color-text: #666;
+  --x-color-text: rgba(255, 255, 255, 0.6);
+
+  color: var(--x-color-text);
   font-size: 12px;
   font-weight: 400;
   line-height: 1;
diff --git a/packages/webapp/src/components/Drawer/DrawerMainTabs.tsx b/packages/webapp/src/components/Drawer/DrawerMainTabs.tsx
index 77ae36811..3e6295fcb 100644
--- a/packages/webapp/src/components/Drawer/DrawerMainTabs.tsx
+++ b/packages/webapp/src/components/Drawer/DrawerMainTabs.tsx
@@ -18,24 +18,36 @@ export function DrawerMainTabs({ children, ...restProps }) {
 
 const DrawerMainTabsRoot = styled.div`
   .bp4-tabs {
+    --x-tab-list-background: #fff;
+    --x-tab-list-border: #e1e2e8;
+    --x-tab-item-text: #7f8596;
+
+    --x-tab-list-background: transparent;
+    --x-tab-list-border: rgba(255, 255, 255, 0.2);
+    --x-tab-item-text: var(--color-light-gray1);
+
+    --x-tab-item-height: 36px;
+
     .bp4-tab-list {
       position: relative;
-      background-color: #fff;
+      background-color: var(--x-tab-list-background);
       padding: 0 15px;
-      border-bottom: 2px solid #e1e2e8;
+      border-bottom: 2px solid var(--x-tab-list-border);
 
       > *:not(:last-child) {
         margin-right: 25px;
       }
-
+      .bp4-tab {
+        color: var(--x-tab-item-text);
+        line-height: var(--x-tab-item-height);
+      }
       &.bp4-large > .bp4-tab {
         font-size: 15px;
-        color: #7f8596;
         margin: 0 1rem;
 
         &[aria-selected='true'],
         &:not([aria-disabled='true']):hover {
-          color: #0052cc;
+          color: var(--color-primary);
         }
       }
       .bp4-tab-indicator-wrapper .bp4-tab-indicator {
diff --git a/packages/webapp/src/components/DrawersContainer.tsx b/packages/webapp/src/components/DrawersContainer.tsx
index 677be4c13..05d2b3413 100644
--- a/packages/webapp/src/components/DrawersContainer.tsx
+++ b/packages/webapp/src/components/DrawersContainer.tsx
@@ -29,7 +29,6 @@ import { ReceiptCustomizeDrawer } from '@/containers/Sales/Receipts/ReceiptCusto
 import { CreditNoteCustomizeDrawer } from '@/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer';
 import { PaymentReceivedCustomizeDrawer } from '@/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeDrawer';
 import { BrandingTemplatesDrawer } from '@/containers/BrandingTemplates/BrandingTemplatesDrawer';
-
 import { DRAWERS } from '@/constants/drawers';
 import { InvoiceSendMailDrawer } from '@/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailDrawer';
 import { EstimateSendMailDrawer } from '@/containers/Sales/Estimates/EstimateSendMailDrawer';
diff --git a/packages/webapp/src/components/Dropzone/Dropzone.module.css b/packages/webapp/src/components/Dropzone/Dropzone.module.css
index 907edbf30..a1a18826c 100644
--- a/packages/webapp/src/components/Dropzone/Dropzone.module.css
+++ b/packages/webapp/src/components/Dropzone/Dropzone.module.css
@@ -1,11 +1,19 @@
 .root {
+  --color-dropzone-background: #fff;
+  --color-dropzone-border: #c5cbd3;
+
+  --color-dropzone-background: rgba(255, 255, 255, 0.05);
+  --color-dropzone-border: rgba(255, 255, 255, 0.1);
+
   padding: 20px;
-  border: 2px dotted #c5cbd3;
   border-radius: 6px;
   min-height: 200px;
   display: flex;
   flex-direction: column;
-  background: #fff;
+  border-style: dotted;
+  border-width: 2px;
+  border-color: var(--color-dropzone-border);
+  background: var(--color-dropzone-background);
   position: relative;
   transition: background-color 0.3s ease, border-color 0.3s ease;
 
@@ -13,6 +21,7 @@
     border-color: rgb(0, 82, 204);
     background: rgba(0, 82, 204, 0.05);
   }
+
   &.dropzoneReject {
     border-color: #AC2F33;
     background: rgba(172, 47, 51, 0.05)
diff --git a/packages/webapp/src/components/Dropzone/Dropzone.tsx b/packages/webapp/src/components/Dropzone/Dropzone.tsx
index bc0d45b46..73cbeda13 100644
--- a/packages/webapp/src/components/Dropzone/Dropzone.tsx
+++ b/packages/webapp/src/components/Dropzone/Dropzone.tsx
@@ -13,18 +13,18 @@ import {
 import { DropzoneProvider } from './DropzoneProvider';
 import { DropzoneAccept, DropzoneIdle, DropzoneReject } from './DropzoneStatus';
 import { Box } from '../Layout';
-import styles from './Dropzone.module.css';
 import { CloudLoadingIndicator } from '../Indicator';
+import styles from './Dropzone.module.css';
 
 export type DropzoneStylesNames = 'root' | 'inner';
 export type DropzoneVariant = 'filled' | 'light';
 export type DropzoneCssVariables = {
   root:
-    | '--dropzone-radius'
-    | '--dropzone-accept-color'
-    | '--dropzone-accept-bg'
-    | '--dropzone-reject-color'
-    | '--dropzone-reject-bg';
+  | '--dropzone-radius'
+  | '--dropzone-accept-color'
+  | '--dropzone-accept-bg'
+  | '--dropzone-reject-color'
+  | '--dropzone-reject-bg';
 };
 
 export interface DropzoneProps {
diff --git a/packages/webapp/src/components/FinancialSheet/StyledFinancialSheet.tsx b/packages/webapp/src/components/FinancialSheet/StyledFinancialSheet.tsx
index f949f4487..44a80f37d 100644
--- a/packages/webapp/src/components/FinancialSheet/StyledFinancialSheet.tsx
+++ b/packages/webapp/src/components/FinancialSheet/StyledFinancialSheet.tsx
@@ -2,7 +2,7 @@
 import styled from 'styled-components';
 
 export const FinancialSheetRoot = styled.div`
-  border: 2px solid #f0f0f0;
+  border: 2px solid var(--color-financial-sheet-card-border);
   border-radius: 10px;
   min-width: 640px;
   width: auto;
@@ -12,7 +12,6 @@ export const FinancialSheetRoot = styled.div`
   min-height: 400px;
   display: flex;
   flex-direction: column;
-  background: #fff;
 
   ${(props) =>
     props.fullWidth &&
@@ -29,7 +28,7 @@ export const FinancialSheetRoot = styled.div`
 
   ${FinancialSheetTitle} {
     font-size: 18px;
-    color: #333;
+    color: var(--color-financial-sheet-minimal-title-text);
   }
   ${FinancialSheetTitle} + ${FinancialSheetDate} {
     margin-top: 8px;
@@ -44,7 +43,7 @@ export const FinancialSheetTitle = styled.h1`
   margin: 0;
   font-weight: 400;
   font-size: 20px;
-  color: #464646;
+  color: var(--color-financial-sheet-title-text);
   text-align: center;
 `;
 
@@ -53,18 +52,18 @@ export const FinancialSheetType = styled.h6`
   margin: 0;
   font-size: 16px;
   font-weight: 400;
-  color: #666;
+  color: var(--color-financial-sheet-type-text);
   margin-top: 6px;
 `;
 
 export const FinancialSheetDate = styled.div`
   text-align: center;
-  color: #666;
+  color: var(--color-financial-sheet-date-text);
   margin-top: 6px;
 `;
 
 export const FinancialSheetFooter = styled.div`
-  color: #888;
+  color: var(--color-financial-sheet-footer-text);
   text-align: center;
   margin-top: auto;
   padding-top: 18px;
diff --git a/packages/webapp/src/components/Forms/BlueprintFormik.tsx b/packages/webapp/src/components/Forms/BlueprintFormik.tsx
index 93313abcf..6650bac54 100644
--- a/packages/webapp/src/components/Forms/BlueprintFormik.tsx
+++ b/packages/webapp/src/components/Forms/BlueprintFormik.tsx
@@ -9,6 +9,7 @@ import {
   Switch,
   EditableText,
   TextArea,
+  HTMLSelect,
 } from '@blueprintjs-formik/core';
 import { MultiSelect, SuggestField } from '@blueprintjs-formik/select';
 import { DateInput } from '@blueprintjs-formik/datetime';
@@ -27,4 +28,5 @@ export {
   SuggestField as FSuggest,
   TextArea as FTextArea,
   DateInput as FDateInput,
+  HTMLSelect as FHTMLSelect,
 };
diff --git a/packages/webapp/src/components/Forms/Select.tsx b/packages/webapp/src/components/Forms/Select.tsx
index 93d6fc8ed..6e826b77d 100644
--- a/packages/webapp/src/components/Forms/Select.tsx
+++ b/packages/webapp/src/components/Forms/Select.tsx
@@ -18,16 +18,23 @@ export function FSelect({ ...props }) {
 }
 
 const SelectButton = styled(Button)`
+  --x-color-select-background: #fff;
+  --x-color-select-border: #ced4da;
+  --x-color-select-caret: #8d8d8d;
+
+  --x-color-select-background: rgba(17, 20, 24, 0.3);
+  --x-color-select-border: rgba(255, 255, 255, 0.15);
+  --x-color-select-caret: rgba(255, 255, 255, 0.25);
+  
   outline: none;
   box-shadow: 0 0 0 transparent;
-  border: 1px solid #ced4da;
+  border: 1px solid var(--x-color-select-border);
   position: relative;
   padding-right: 30px;
 
   &.bp4-small {
     padding-right: 24px;
   }
-
   &:not(.is-selected):not([class*='bp4-intent-']):not(.bp4-minimal) {
     color: #8f99a8;
   }
@@ -36,10 +43,9 @@ const SelectButton = styled(Button)`
     display: inline-block;
     width: 0;
     height: 0;
-
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
-    border-top: 5px solid #8d8d8d;
+    border-top: 5px solid var(--x-color-select-caret);
 
     position: absolute;
     right: 0;
@@ -51,7 +57,7 @@ const SelectButton = styled(Button)`
   &:not([class*='bp4-intent-']):not(.bp4-disabled) {
     &,
     &:hover {
-      background: #fff;
+      background: var(--x-color-select-background);
     }
   }
   .bp4-intent-danger & {
diff --git a/packages/webapp/src/components/Icons/BigcapitalAlt.tsx b/packages/webapp/src/components/Icons/BigcapitalAlt.tsx
new file mode 100644
index 000000000..dbb68cf32
--- /dev/null
+++ b/packages/webapp/src/components/Icons/BigcapitalAlt.tsx
@@ -0,0 +1,23 @@
+
+interface BigcapitalAltProps extends React.SVGProps<SVGSVGElement> {
+}
+
+export function BigcapitalAlt(props: BigcapitalAltProps) {
+  return (
+    <svg data-icon="bigcapital-alt" width="214" height="37" viewBox="0 0 309.09 42.89" {...props}>
+      <desc>bigcapital</desc>
+      <path fill="currentColor" d="M56,3.16,61.33,8.5,31.94,37.9l-5.35-5.35Z" fill-rule="evenodd"></path>
+      <path fill="currentColor" d="M29.53,6.94l5.35,5.34L5.49,41.67.14,36.33l15.8-15.8Z" fill-rule="evenodd"></path>
+      <path fill="currentColor" d="M94.36,38.87H79.62v-31H94c6.33,0,10.22,3.15,10.22,8V16a7.22,7.22,0,0,1-4.07,6.69c3.58,1.37,5.8,3.45,5.8,7.61v.09C106,36,101.35,38.87,94.36,38.87Zm3.1-21.81c0-2-1.59-3.19-4.47-3.19H86.26v6.55h6.29c3,0,4.91-1,4.91-3.28Zm1.72,12.39c0-2.08-1.54-3.37-5-3.37H86.26V32.9h8.1c3,0,4.82-1.06,4.82-3.36Z" fill-rule="evenodd"></path>
+      <path fill="currentColor" d="M110.56,12.54v-6h7.08v6Zm.18,26.33V15.15h6.72V38.87Z" fill-rule="evenodd"></path>
+      <path fill="currentColor" d="M134,46a22.55,22.55,0,0,1-10.49-2.47l2.3-5a15.52,15.52,0,0,0,8,2.17c4.61,0,6.78-2.21,6.78-6.46V33.08c-2,2.39-4.16,3.85-7.75,3.85-5.53,0-10.53-4-10.53-11.07v-.09c0-7.08,5.09-11.06,10.53-11.06a9.63,9.63,0,0,1,7.66,3.54v-3.1h6.72V33.52C147.2,42.46,142.78,46,134,46Zm6.6-20.27a5.79,5.79,0,0,0-11.56,0v.09a5.42,5.42,0,0,0,5.76,5.49,5.49,5.49,0,0,0,5.8-5.49Z" fill-rule="evenodd"></path>
+      <path fill="currentColor" d="M164,39.41a12.11,12.11,0,0,1-12.35-12.26v-.09a12.18,12.18,0,0,1,12.44-12.35c4.47,0,7.25,1.5,9.47,4l-4.12,4.43a6.93,6.93,0,0,0-5.4-2.61c-3.36,0-5.75,3-5.75,6.46v.09c0,3.63,2.34,6.55,6,6.55,2.26,0,3.8-1,5.44-2.53l3.94,4A12,12,0,0,1,164,39.41Z" fill-rule="evenodd"></path>
+      <path fill="currentColor" d="M191.51,38.87V36.31a9.15,9.15,0,0,1-7.17,3c-4.47,0-8.15-2.57-8.15-7.26V32c0-5.18,3.94-7.57,9.56-7.57a16.74,16.74,0,0,1,5.8,1V25c0-2.79-1.72-4.34-5.09-4.34a17.57,17.57,0,0,0-6.55,1.28l-1.68-5.13a21,21,0,0,1,9.21-1.9c7.34,0,10.57,3.8,10.57,10.22V38.87Zm.13-9.55a10.3,10.3,0,0,0-4.29-.89c-2.88,0-4.65,1.15-4.65,3.27v.09c0,1.82,1.5,2.88,3.67,2.88,3.15,0,5.27-1.73,5.27-4.16Z" fill-rule="evenodd"></path>
+      <path fill="currentColor" d="M217.49,39.32a9.1,9.1,0,0,1-7.39-3.54V46h-6.73V15.15h6.73v3.41a8.7,8.7,0,0,1,7.39-3.85c5.53,0,10.8,4.34,10.8,12.26v.09C228.29,35,223.11,39.32,217.49,39.32ZM221.56,27c0-3.94-2.66-6.55-5.8-6.55S210,23,210,27v.09c0,3.94,2.61,6.55,5.75,6.55s5.8-2.57,5.8-6.55Z" fill-rule="evenodd"></path>
+      <path fill="currentColor" d="M232.93,12.54v-6H240v6Zm.18,26.33V15.15h6.73V38.87Z" fill-rule="evenodd"></path>
+      <path fill="currentColor" d="M253.73,39.27c-4.11,0-6.9-1.63-6.9-7.12V20.91H244V15.15h2.83V9.09h6.73v6.06h5.57v5.76h-5.57V31c0,1.55.66,2.3,2.16,2.3A6.84,6.84,0,0,0,259,32.5v5.4A9.9,9.9,0,0,1,253.73,39.27Z" fill-rule="evenodd"></path>
+      <path fill="currentColor" d="M277.55,38.87V36.31a9.15,9.15,0,0,1-7.18,3c-4.46,0-8.14-2.57-8.14-7.26V32c0-5.18,3.94-7.57,9.56-7.57a16.74,16.74,0,0,1,5.8,1V25c0-2.79-1.73-4.34-5.09-4.34A17.57,17.57,0,0,0,266,21.92l-1.68-5.13a20.94,20.94,0,0,1,9.2-1.9c7.35,0,10.58,3.8,10.58,10.22V38.87Zm.13-9.55a10.31,10.31,0,0,0-4.3-.89c-2.87,0-4.64,1.15-4.64,3.27v.09c0,1.82,1.5,2.88,3.67,2.88,3.14,0,5.27-1.73,5.27-4.16Z" fill-rule="evenodd"></path>
+      <path fill="currentColor" d="M289.72,38.87V6.57h6.72v32.3Z" fill-rule="evenodd"></path>
+      <path fill="currentColor" d="M302.06,38.87V31.79h7.17v7.08Z" fill-rule="evenodd"></path></svg>
+  );
+}
\ No newline at end of file
diff --git a/packages/webapp/src/components/NumberFormatDropdown/NumberFormatFields.tsx b/packages/webapp/src/components/NumberFormatDropdown/NumberFormatFields.tsx
index ce2fb57bc..02be7dbac 100644
--- a/packages/webapp/src/components/NumberFormatDropdown/NumberFormatFields.tsx
+++ b/packages/webapp/src/components/NumberFormatDropdown/NumberFormatFields.tsx
@@ -1,139 +1,83 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
-import { FormGroup, Checkbox, Switch } from '@blueprintjs/core';
-import { CLASSES } from '@/constants/classes';
-import { ListSelect } from '@/components';
+import { FSelect, FFormGroup, FSwitch } from '@/components';
 import { FormattedMessage as T } from '@/components';
-import { inputIntent } from '@/utils';
 import {
   moneyFormat,
   negativeFormat,
   decimalPlaces,
 } from '@/constants/numberFormatsOptions';
-import classNames from 'classnames';
 
 /**
  *  Number Formats Fields.
  */
-export default function NumberFormatFields({}) {
+export default function NumberFormatFields() {
   return (
     <div className={'number-format-dropdown__content'}>
       {/*------------ Negative formats -----------*/}
-      <FastField name={'negativeFormat'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'negative_format'} />}
-            helperText={<ErrorMessage name="negativeFormat" />}
-            intent={inputIntent({ error, touched })}
-            className={classNames(CLASSES.FILL)}
-          >
-            <ListSelect
-              items={negativeFormat}
-              onItemSelect={(format) => {
-                form.setFieldValue('negativeFormat', format.key);
-              }}
-              filterable={false}
-              selectedItem={value}
-              selectedItemProp={'key'}
-              textProp={'text'}
-              popoverProps={{ minimal: true, captureDismiss: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'negativeFormat'} label={<T id={'negative_format'} />}>
+        <FSelect
+          name={'negativeFormat'}
+          items={negativeFormat}
+          valueAccessor={'key'}
+          textAccessor={'text'}
+          popoverProps={{ minimal: true, captureDismiss: true }}
+          filterable
+        />
+      </FFormGroup>
 
       {/*------------ Decimal places -----------*/}
-      <FastField name={'precision'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'decimal_places'} />}
-            helperText={<ErrorMessage name="format_money" />}
-            intent={inputIntent({ error, touched })}
-            className={classNames(CLASSES.FILL)}
-          >
-            <ListSelect
-              items={decimalPlaces}
-              onItemSelect={(format) => {
-                form.setFieldValue('precision', format.key);
-              }}
-              filterable={false}
-              selectedItem={value}
-              selectedItemProp={'key'}
-              textProp={'text'}
-              popoverProps={{ minimal: true, captureDismiss: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'precision'} label={<T id={'decimal_places'} />}>
+        <FSelect
+          name={'precision'}
+          items={decimalPlaces}
+          filterable={false}
+          valueAccessor={'key'}
+          textAccessor={'text'}
+          popoverProps={{ minimal: true, captureDismiss: true }}
+        />
+      </FFormGroup>
 
       {/*------------ Money formats -----------*/}
-      <FastField name={'formatMoney'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'money_format'} />}
-            helperText={<ErrorMessage name="formatMoney" />}
-            intent={inputIntent({ error, touched })}
-            className={classNames('form-group--money-format', CLASSES.FILL)}
-          >
-            <ListSelect
-              items={moneyFormat}
-              onItemSelect={(format) => {
-                form.setFieldValue('formatMoney', format.key);
-              }}
-              filterable={false}
-              selectedItem={value}
-              selectedItemProp={'key'}
-              textProp={'text'}
-              popoverProps={{ minimal: true, captureDismiss: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'formatMoney'} label={<T id={'money_format'} />}>
+        <FSelect
+          name={'formatMoney'}
+          items={moneyFormat}
+          filterable={false}
+          valueAccessor={'key'}
+          textAccessor={'text'}
+          popoverProps={{ minimal: true, captureDismiss: true }}
+        />
+      </FFormGroup>
 
       <div className="toggles-fields">
         {/*------------ show zero -----------*/}
-        <FastField name={'showZero'} type={'checkbox'}>
-          {({ field }) => (
-            <FormGroup inline={true}>
-              <Switch
-                inline={true}
-                small={true}
-                label={<T id={'show_zero'} />}
-                name={'showZero'}
-                {...field}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup name={'showZero'} inline={true}>
+          <FSwitch
+            name={'showZero'}
+            inline={true}
+            small={true}
+            label={<T id={'show_zero'} />}
+          />
+        </FFormGroup>
 
         {/*------------ show negative in red-----------*/}
-        <FastField name={'showInRed'} type={'checkbox'}>
-          {({ field }) => (
-            <FormGroup inline={true}>
-              <Switch
-                inline={true}
-                label={<T id={'show_negative_in_red'} />}
-                name={'showInRed'}
-                {...field}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup name={'showInRed'} inline={true}>
+          <FSwitch
+            name={'showInRed'}
+            inline={true}
+            label={<T id={'show_negative_in_red'} />}
+          />
+        </FFormGroup>
 
         {/*------------ Divide on 1000 -----------*/}
-        <FastField name={'divideOn1000'} type={'checkbox'}>
-          {({ field }) => (
-            <FormGroup inline={true}>
-              <Switch
-                inline={true}
-                label={<T id={'divide_on_1000'} />}
-                name={'divideOn1000'}
-                {...field}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup name={'divideOn1000'} inline={true}>
+          <FSwitch
+            name={'divideOn1000'}
+            inline={true}
+            label={<T id={'divide_on_1000'} />}
+          />
+        </FFormGroup>
       </div>
     </div>
   );
diff --git a/packages/webapp/src/components/PageForm/FormTopbar.tsx b/packages/webapp/src/components/PageForm/FormTopbar.tsx
index 060ecbb55..015ab32a8 100644
--- a/packages/webapp/src/components/PageForm/FormTopbar.tsx
+++ b/packages/webapp/src/components/PageForm/FormTopbar.tsx
@@ -13,11 +13,22 @@ export function FormTopbar({ className, children }) {
 }
 
 const FormTopBarRoot = styled(Navbar)`
-  box-shadow: 0 0 0;
-  border-bottom: 1px solid #c7d5db;
+  --color-form-topbar-background: #fff;
+  --color-form-topbar-border: #c7d5db;
+
+  --color-form-topbar-background: var(--color-dark-gray1);
+  --color-form-topbar-border: rgba(255, 255, 255, 0.15);
+
   height: 35px;
   padding: 0 20px;
 
+  &,
+  .bp4-dark & {
+    border-bottom: 1px solid var(--color-form-topbar-border);
+    background-color: var(--color-form-topbar-background);
+    box-shadow: 0 0 0;
+  }
+
   .bp4-navbar-group {
     height: 35px;
   }
diff --git a/packages/webapp/src/components/PageForm/PageForm.tsx b/packages/webapp/src/components/PageForm/PageForm.tsx
index cc58a57f8..3764889af 100644
--- a/packages/webapp/src/components/PageForm/PageForm.tsx
+++ b/packages/webapp/src/components/PageForm/PageForm.tsx
@@ -48,10 +48,16 @@ const PageFormFooter: FC<{ children: React.ReactNode } & SystemProps> = ({ child
 PageFormFooter.displayName = 'PageFormFooter';
 
 const footerActionsStyle = `
+  --x-color-background: #fff;
+  --x-color-border: rgb(210, 221, 226);
+
+  --x-color-background: var(--color-dark-gray1);
+  --x-color-border: rgba(255, 255, 255, 0.1);
+
   width: 100%;
-  background: #fff;
+  background: var(--x-color-background);
   padding: 14px 20px;
-  border-top: 1px solid rgb(210, 221, 226);
+  border-top: 1px solid var(--x-color-border);
   box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
 
   .bp4-button-group{
diff --git a/packages/webapp/src/components/Paper/Paper.module.scss b/packages/webapp/src/components/Paper/Paper.module.scss
new file mode 100644
index 000000000..c114b8eda
--- /dev/null
+++ b/packages/webapp/src/components/Paper/Paper.module.scss
@@ -0,0 +1,14 @@
+
+
+.root{
+  --x-color-background: #fff;
+  --x-color-border: #d2dce2;
+
+  --x-color-background: var(--color-dark-gray1);
+  --x-color-border: rgba(255, 255, 255, 0.1);
+  
+  background-color: var(--x-color-background);
+  border: 1px solid var(--x-color-border);
+  padding: 10px;
+
+}
\ No newline at end of file
diff --git a/packages/webapp/src/components/Paper/Paper.tsx b/packages/webapp/src/components/Paper/Paper.tsx
index 91c9c7d2d..1b5ce8188 100644
--- a/packages/webapp/src/components/Paper/Paper.tsx
+++ b/packages/webapp/src/components/Paper/Paper.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { x, SystemProps } from '@xstyled/emotion';
+import clsx from 'classnames';
+import styles from './Paper.module.scss';
 
 interface PaperProps extends SystemProps {
   children: React.ReactNode;
@@ -8,10 +10,8 @@ interface PaperProps extends SystemProps {
 export const Paper = ({ children, ...props }: PaperProps) => {
   return (
     <x.div
-      background={'white'}
-      p={'10px'}
-      border={'1px solid #d2dce2'}
       {...props}
+      className={clsx(styles.root)}
     >
       {children}
     </x.div>
diff --git a/packages/webapp/src/components/Stepper/Stepper.tsx b/packages/webapp/src/components/Stepper/Stepper.tsx
index 448398628..71bd0e648 100644
--- a/packages/webapp/src/components/Stepper/Stepper.tsx
+++ b/packages/webapp/src/components/Stepper/Stepper.tsx
@@ -41,8 +41,8 @@ export function Stepper({
       active === index
         ? StepperStepState.Progress
         : active > index
-        ? StepperStepState.Completed
-        : StepperStepState.Inactive;
+          ? StepperStepState.Completed
+          : StepperStepState.Inactive;
 
     const shouldAllowSelect = () => {
       if (typeof onStepClick !== 'function') {
@@ -105,7 +105,7 @@ const StepsContent = styled(Box)`
 const StepSeparator = styled.div`
   flex: 1;
   display: block;
-  border-color: #c5cbd3;
+  border-color: var(--color-stepper-separator);
   border-top-style: solid;
   border-top-width: 1px;
 `;
diff --git a/packages/webapp/src/components/Stepper/StepperStep.tsx b/packages/webapp/src/components/Stepper/StepperStep.tsx
index 2103e5b81..3b281018c 100644
--- a/packages/webapp/src/components/Stepper/StepperStep.tsx
+++ b/packages/webapp/src/components/Stepper/StepperStep.tsx
@@ -74,21 +74,27 @@ const StepIcon = styled.span`
   border-radius: 24px;
   text-align: center;
   background-color: ${(props) =>
-    props.isCompleted || props.isActive ? 'rgb(0, 82, 204)' : '#9e9e9e'};
-  color: #fff;
+    props.isCompleted || props.isActive
+      ? 'var(--color-stepper-step-active-background)'
+      : 'var(--color-stepper-step-background)'};
+  color: var(--color-stepper-step-text);
   margin: auto;
   font-size: 12px;
 `;
 
 const StepTitle = styled.div`
   color: ${(props) =>
-    props.isCompleted || props.isActive ? 'rgb(0, 82, 204)' : '#738091'};
+    props.isCompleted || props.isActive
+      ? 'var(--color-stepper-step-title-active-text)'
+      : 'var(--color-stepper-step-title-text)'};
 `;
 const StepDescription = styled.div`
   font-size: 12px;
   margin-top: 10px;
   color: ${(props) =>
-    props.isCompleted || props.isActive ? 'rgb(0, 82, 204)' : '#738091'};
+    props.isCompleted || props.isActive
+      ? 'var(--color-stepper-step-description-active-text)'
+      : 'var(--color-stepper-step-description-text)'};
 `;
 
 const StepIconWrap = styled.div`
diff --git a/packages/webapp/src/components/TagsControl/TagsControl.module.scss b/packages/webapp/src/components/TagsControl/TagsControl.module.scss
index 0e5f626d6..5e5c33b55 100644
--- a/packages/webapp/src/components/TagsControl/TagsControl.module.scss
+++ b/packages/webapp/src/components/TagsControl/TagsControl.module.scss
@@ -1,4 +1,9 @@
+
+
 .root{
+  --color-minimum-border: #e1e2e8;
+  --color-minimum-border: rgba(255, 255, 255, 0.2);
+
   display: flex;
   flex-direction: row;
   gap: 10px;
@@ -9,7 +14,7 @@
 
   &:global(.bp4-minimal:not([class*='bp4-intent-'])) {
     background: #fff;
-    border: 1px solid #e1e2e8;
+    border: 1px solid var(--color-minimum-border);
 
     &:global(.bp4-interactive:hover) {
       background-color: rgba(143, 153, 168, 0.05);
diff --git a/packages/webapp/src/components/TotalLines/index.tsx b/packages/webapp/src/components/TotalLines/index.tsx
index cc9379fe1..367c420a1 100644
--- a/packages/webapp/src/components/TotalLines/index.tsx
+++ b/packages/webapp/src/components/TotalLines/index.tsx
@@ -64,32 +64,38 @@ export const TotalLinesRoot = styled.div`
 `;
 
 export const TotalLinePrimitive = styled.div`
+  --x-color-divider: #d2dde2;
+  --x-color-divider-dark: #000;
+
+  --x-color-divider: rgba(255, 255, 255, 0.1);
+  --x-color-divider-dark: rgba(255, 255, 255, 0.2);
+
   display: table-row;
 
   .amount,
   .title {
     display: table-cell;
     padding: 8px;
-    border-bottom: 1px solid #d2dde2;
+    border-bottom: 1px solid var(--x-color-divider);
 
     ${(props) =>
-      props.borderStyle === TotalLineBorderStyle.DoubleDark &&
-      `
-      border-bottom: 3px double #000;
+    props.borderStyle === TotalLineBorderStyle.DoubleDark &&
+    `
+      border-bottom: 3px double var(--x-color-divider-dark);
     `}
     ${(props) =>
-      props.borderStyle === TotalLineBorderStyle.SingleDark &&
-      `
-      border-bottom: 1px double #000;
+    props.borderStyle === TotalLineBorderStyle.SingleDark &&
+    `
+      border-bottom: 1px double var(--x-color-divider-dark);
     `}
     ${(props) =>
-      props.borderStyle === TotalLineBorderStyle.None &&
-      `
+    props.borderStyle === TotalLineBorderStyle.None &&
+    `
       border-bottom-color: transparent;
     `}
     ${(props) =>
-      props.textStyle === TotalLineTextStyle.Bold &&
-      `
+    props.textStyle === TotalLineTextStyle.Bold &&
+    `
       font-weight: 600;
     `}
   }
diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx
index 9a1f81a30..0ec19b932 100644
--- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx
+++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import { InputGroup, FormGroup, Position } from '@blueprintjs/core';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
 import classNames from 'classnames';
 
@@ -16,12 +16,12 @@ import {
   Hint,
   FieldRequiredHint,
   Icon,
-  CurrencySelectList,
+  FSelect,
   FormattedMessage as T,
+  FFormGroup,
 } from '@/components';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
 import { JournalExchangeRateInputField } from './components';
-import { currenciesFieldShouldUpdate } from './utils';
 import { MakeJournalTransactionNoField } from './MakeJournalTransactionNoField';
 
 /**
@@ -29,6 +29,7 @@ import { MakeJournalTransactionNoField } from './MakeJournalTransactionNoField';
  */
 export default function MakeJournalEntriesHeader({}) {
   const { currencies } = useMakeJournalFormContext();
+  const form = useFormikContext();
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
@@ -105,29 +106,30 @@ export default function MakeJournalEntriesHeader({}) {
       </FastField>
 
       {/*------------ Currency  -----------*/}
-      <FastField
+      <FFormGroup
         name={'currency_code'}
-        currencies={currencies}
-        shouldUpdate={currenciesFieldShouldUpdate}
+        label={<T id={'currency'} />}
+        inline
+        fastField
       >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'currency'} />}
-            className={classNames('form-group--currency', CLASSES.FILL)}
-            inline={true}
-          >
-            <CurrencySelectList
-              currenciesList={currencies}
-              selectedCurrencyCode={value}
-              onCurrencySelected={(currencyItem) => {
-                form.setFieldValue('currency_code', currencyItem.currency_code);
-                form.setFieldValue('exchange_rate', '');
-              }}
-              defaultSelectText={value}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+        <FSelect
+          name={'currency_code'}
+          items={currencies}
+          onItemChange={(currencyItem) => {
+            form.setFieldValue('currency_code', currencyItem.currency_code);
+            form.setFieldValue('exchange_rate', '');
+          }}
+          popoverProps={{
+            inline: true,
+            minimal: true,
+            captureDismiss: true,
+          }}
+          valueAccessor={'currency_code'}
+          labelAccessor={'currency_name'}
+          textAccessor={'currency_code'}
+          fastField
+        />
+      </FFormGroup>
 
       {/* ----------- Exchange rate ----------- */}
       <JournalExchangeRateInputField
diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.tsx
index 59c8f6e0d..b8d46a8ff 100644
--- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.tsx
@@ -34,6 +34,9 @@ export function MakeJournalFormFooterRight() {
 }
 
 const MakeJouranlTotalLines = styled(TotalLines)`
+  --x-color-text: #555;
+  --x-color-text: var(--color-light-gray4);
+
   width: 100%;
-  color: #555555;
+  color: var(--x-color-text);
 `;
diff --git a/packages/webapp/src/containers/Attachments/UploadAttachmentButton.module.scss b/packages/webapp/src/containers/Attachments/UploadAttachmentButton.module.scss
index 1fc37bfc4..9ca910ddb 100644
--- a/packages/webapp/src/containers/Attachments/UploadAttachmentButton.module.scss
+++ b/packages/webapp/src/containers/Attachments/UploadAttachmentButton.module.scss
@@ -4,11 +4,16 @@
 }
 
 .attachmentButton:not([class*=bp4-intent-]) {
+  --x-background-color: #fff;
+  --x-border-color: rgb(206, 212, 218);
+
+  --x-border-color: rgba(255, 255, 255, 0.1);
+
   &,
   &:hover{
     background-color: #fff;
   }
-  border: 1px solid rgb(206, 212, 218);
+  border: 1px solid var(--x-border-color);
 }
 
 .attachmentField :global .bp4-label{
diff --git a/packages/webapp/src/containers/Authentication/Authentication.tsx b/packages/webapp/src/containers/Authentication/Authentication.tsx
index e82856b04..ab8781190 100644
--- a/packages/webapp/src/containers/Authentication/Authentication.tsx
+++ b/packages/webapp/src/containers/Authentication/Authentication.tsx
@@ -11,14 +11,22 @@ import { Box, Icon, FormattedMessage as T } from '@/components';
 import { AuthMetaBootProvider } from './AuthMetaBoot';
 
 import '@/style/pages/Authentication/Auth.scss';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
+import { BigcapitalAlt } from '@/components/Icons/BigcapitalAlt';
 
 export function Authentication() {
+  const isDarkMode = useIsDarkMode();
+
   return (
     <BodyClassName className={'authentication'}>
       <AuthPage>
         <AuthInsider>
           <AuthLogo>
-            <Icon icon="bigcapital" height={37} width={214} />
+            {isDarkMode ? (
+              <BigcapitalAlt color={"rgba(255, 255, 255, 0.6)"} height={37} width={214} />
+            ) : (
+              <Icon icon="bigcapital" height={37} width={214} />
+            )}
           </AuthLogo>
 
           <AuthMetaBootProvider>
diff --git a/packages/webapp/src/containers/Authentication/_components.tsx b/packages/webapp/src/containers/Authentication/_components.tsx
index 8e2da305c..b6d69d1b8 100644
--- a/packages/webapp/src/containers/Authentication/_components.tsx
+++ b/packages/webapp/src/containers/Authentication/_components.tsx
@@ -27,10 +27,16 @@ export const AuthInsiderContent = styled.div`
   position: relative;
 `;
 export const AuthInsiderCard = styled.div`
-  border: 1px solid #d5d5d5;
+  --x-color-background: #fff;
+  --x-color-background: var(--color-dark-gray2);
+
+  --x-color-border: #d5d5d5;
+  --x-color-border: rgba(255, 255, 255, 0.1);
+
+  border: 1px solid var(--x-color-border);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
   padding: 26px 22px;
-  background: #ffff;
+  background: var(--x-color-background);
   border-radius: 3px;
 `;
 
@@ -59,7 +65,10 @@ export const AuthFooterLinks = styled.div`
 `;
 
 export const AuthFooterLink = styled.p`
-  color: #666;
+  --x-color-text: #666;
+  --x-color-text: rgba(255, 255, 255, 0.75);
+
+  color: var(--x-color-text);
   margin: 0;
 `;
 
@@ -67,11 +76,11 @@ export const AuthSubmitButton = styled(Button)`
   margin-top: 20px;
 
   &.bp4-intent-primary {
-    background-color: #0052cc;
+    // background-color: #0052cc;
 
     &:disabled,
     &.bp4-disabled {
-      background-color: rgba(0, 82, 204, 0.4);
+      // background-color: rgba(0, 82, 204, 0.4);
     }
   }
 `;
diff --git a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx
index a7e5ccfbf..ca9499de2 100644
--- a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx
+++ b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React, { useMemo } from 'react';
 import { Button, NavbarGroup, Intent } from '@blueprintjs/core';
-import { DashboardActionsBar, Icon } from '@/components';
+import { DrawerActionsBar, Icon } from '@/components';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import {
   getButtonLabelFromResource,
@@ -26,7 +26,7 @@ function BrandingTemplateActionsBarRoot({ openDrawer }) {
   const label = useMemo(() => getButtonLabelFromResource(resource), [resource]);
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Button
           intent={Intent.PRIMARY}
@@ -37,7 +37,7 @@ function BrandingTemplateActionsBarRoot({ openDrawer }) {
           {label}
         </Button>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 export const BrandingTemplateActionsBar = compose(withDrawerActions)(
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx
index be86c6628..ef72fba46 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx
@@ -166,7 +166,7 @@ const DashboardConstrantTable = styled(DataTable)`
   .table {
     .thead {
       .th {
-        background: #fff;
+        // background: #fff;
         letter-spacing: 1px;
         text-transform: uppercase;
         font-size: 13px;
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx
index 253ea3d7d..42e146c8e 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx
@@ -173,13 +173,14 @@ const DetailsBarSkeletonBase = styled.div`
 
 const AccountBalanceItemWrap = styled.div`
   margin-left: 18px;
-  color: #5f6d86;
+  // color: #5f6d86;
 `;
 
 const AccountTransactionDetailsWrap = styled.div`
   display: flex;
-  background: #fff;
-  border-bottom: 1px solid #d2dce2;
+  background: var(--color-bank-transactions-details-bar-background);
+  color: var(--color-bank-transactions-details-bar-text);
+  border-bottom: 1px solid var(--color-bank-transactions-details-bar-divider);
   padding: 0 22px;
   height: 42px;
   align-items: center;
@@ -192,7 +193,7 @@ const AccountSwitchText = styled.div`
 const AccountBalanceAmount = styled.span`
   font-weight: 600;
   display: inline-block;
-  color: rgb(31, 50, 85);
+  // color: rgb(31, 50, 85);
   margin-left: 10px;
 `;
 
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountsTransactionsAll.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountsTransactionsAll.tsx
index 298ea845d..4799ce55e 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountsTransactionsAll.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountsTransactionsAll.tsx
@@ -11,10 +11,10 @@ const Box = styled.div`
 `;
 
 const CashflowTransactionsTableCard = styled.div`
-  border: 2px solid #f0f0f0;
+  background: var(--color-bank-transactions-content-background);
+  border: 2px solid var(--color-bank-transactions-content-border);
   border-radius: 10px;
   padding: 30px 18px;
-  background: #fff;
   flex: 0 1;
 `;
 
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsCard.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsCard.tsx
index 47fd0b7f9..5f31e50c1 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsCard.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsCard.tsx
@@ -2,9 +2,9 @@ import styled from 'styled-components';
 
 
 export const AccountTransactionsCard = styled.div`
-  border: 2px solid #f0f0f0;
+  border: 2px solid var(--color-bank-transactions-content-border);
+  background: var(--color-bank-transactions-content-background);
   border-radius: 10px;
   padding: 30px 18px;
-  background: #fff;
   flex: 0 1;
 `;
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss
index 9bbc4f8d7..6f9e2e546 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss
@@ -1,11 +1,24 @@
-.root{
+.root {
+  --color-background: #fff;
+  --color-background: #c5cbd3;
+
+  --color-border: #e1e2e8;
+  --color-border: rgba(255, 255, 255, 0.2);
+
+  --color-text: var(--color-dark-gray1);
+
   min-height: 26px;
   border-radius: 15px;
   font-size: 13px;
   padding: 0 10px;
 
-  &:global(.bp4-button:not([class*=bp4-intent-]):not(.bp4-minimal)) {
-    background: #fff;
-    border: 1px solid #e1e2e8;
+  &:global(.bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal)) {
+    background: var(--color-background);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+
+    & :global(.bp4-icon) {
+      color: var(--color-text);
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss b/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss
index c7a9e0aaf..3272620ce 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/components/BankAccountDataTable.module.scss
@@ -2,7 +2,7 @@
   :global .table{    
     .thead {
       .th {
-        background: #fff;
+        // background: #fff;
         text-transform: uppercase;
         letter-spacing: 1px;
         font-size: 13px;
@@ -22,7 +22,7 @@
 
     .tbody-inner {
       .tr .td{
-        border-bottom: 1px solid #ececec;
+        border-bottom-width: 1px;
       }
     }
   }
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionFormFooter.tsx b/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionFormFooter.tsx
index 780731692..431e15831 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionFormFooter.tsx
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionFormFooter.tsx
@@ -45,6 +45,6 @@ export const CategorizeTransactionFormFooter = R.compose(withBankingActions)(
 );
 
 const Root = styled.div`
-  border-top: 1px solid #c7d5db;
+  border-top: 1px solid var(--color-aside-divider);
   padding: 14px 20px;
 `;
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss
index bc6646aa5..3e8358f07 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss
@@ -5,17 +5,13 @@
   padding-bottom: 60px;
 }
 
-.transaction {
-  
-}
-
 .matchBar{
   padding: 12px 14px;
-  background: #fff;
-  border-bottom: 1px solid #E1E2E9; 
+  background: var(--color-bank-transaction-matching-aside-header);
+  border-bottom: 1px solid var(--color-bank-transaction-matching-divider); 
   
   &:not(:first-of-type) {
-    border-top: 1px solid #E1E2E9; 
+    border-top: 1px solid var(--color-bank-transaction-matching-divider); 
   }
 }
 
@@ -25,16 +21,16 @@
 }
 
 .footer {
-  background-color: #fff;
+  background-color: var(--color-bank-transaction-matching-aside-footer);
 }
 
 .footerActions {
   padding: 14px 16px;
-  border-top: 1px solid #d8d9d9;
+  border-top: 1px solid var(--color-bank-transaction-matching-divider);
 }
 
 .footerTotal {
   padding: 8px 16px;
-  border-top: 1px solid #d8d9d9;
+  border-top: 1px solid var(--color-bank-transaction-matching-divider);
   line-height: 24px;
 }
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.module.scss b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.module.scss
index 279b58051..f8a5ab52d 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.module.scss
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.module.scss
@@ -7,8 +7,8 @@
   height: calc(100dvh - 144px);
 }
 .tabs :global .bp4-tab-list{
-  background: #fff;
-  border-bottom: 1px solid #c7d5db;
+  // background: #fff;
+  border-bottom: 1px solid var(--color-aside-divider);
   padding: 0 22px;
 }
 
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss
index bdf743164..202ea0e23 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss
@@ -1,52 +1,68 @@
+.root {
+  --item-background: #fff;
+  --item-background: var(--color-dark-gray4);
 
-.root{
-  background: #fff;
+  --item-border: #d6dbe3;
+  --item-border: rgba(255, 255, 255, 0.2);
+
+  --item-active-border: #88abdb;
+
+  --item-label-text: #252a33;
+  --item-label-text: var(--color-light-gray4);
+
+  --item-date-text: #5c7080;
+  --item-date-text: var(--color-light-gray1);
+
+  background: var(--item-background);
   border-radius: 5px;
-  border: 1px solid #D6DBE3;
+  border: 1px solid var(--item-border);
   padding: 10px 16px;
   cursor: pointer;
 
-  &.active{
-    border-color: #88ABDB;
+  &.active {
+    border-color: var(--item-active-border);
     box-shadow: 0 0 0 2px rgba(136, 171, 219, 0.2);
 
     .label,
     .date {
-      color: rgb(21, 82, 200),
+      color: rgb(21, 82, 200);
     }
   }
-  &:hover:not(.active){
+  &:hover:not(.active) {
     border-color: #c0c0c0;
   }
 }
 
-.checkbox:global(.bp4-control.bp4-checkbox){
+.checkbox:global(.bp4-control.bp4-checkbox) {
   margin: 0;
 }
-.checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator{
-  box-shadow: 0 0 0 1px #CBCBCB;
+.checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator {
+  box-shadow: 0 0 0 1px #cbcbcb;
 }
-.checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator{
+.checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator {
   margin-right: 4px;
   margin-left: 0;
   height: 16px;
   width: 16px;
 }
 
-.checkbox:global(.bp4-control.bp4-checkbox) :global input:checked ~ .bp4-control-indicator{
-  box-shadow:  0 0 0 1px #0069ff;
+.checkbox:global(.bp4-control.bp4-checkbox)
+  :global
+  input:checked
+  ~ .bp4-control-indicator {
+  box-shadow: 0 0 0 1px #0069ff;
 }
 
 .label {
-  color: #252A33;
-  font-size: 15px; 
+  color: var(--item-label-text);
+  font-size: 15px;
 }
 .label :global strong {
   font-weight: 500;
-  font-variant-numeric:tabular-nums;
+  font-variant-numeric: tabular-nums;
 }
 
 .date {
   font-size: 12px;
-  color: #5C7080;
-}
\ No newline at end of file
+  color: var(--item-date-text);
+}
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionForm.module.scss b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionForm.module.scss
index 65dd9e684..672dd1a3e 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionForm.module.scss
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionForm.module.scss
@@ -11,7 +11,7 @@
 
 .footer {
   padding: 11px 20px;
-  border-top: 1px solid #ced4db;
+  border-top: 1px solid var(--color-aside-divider);
 }
 
 .form{
diff --git a/packages/webapp/src/containers/Dashboard/Sidebar/SidebarMenu.tsx b/packages/webapp/src/containers/Dashboard/Sidebar/SidebarMenu.tsx
index 55cf0ab97..c1b05a5c2 100644
--- a/packages/webapp/src/containers/Dashboard/Sidebar/SidebarMenu.tsx
+++ b/packages/webapp/src/containers/Dashboard/Sidebar/SidebarMenu.tsx
@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import { Menu } from '@blueprintjs/core';
+import { Intent, Menu } from '@blueprintjs/core';
 
 import { MenuItem, MenuItemLabel } from '@/components';
 import { ISidebarMenuItemType } from '@/containers/Dashboard/Sidebar/interfaces';
@@ -20,10 +20,9 @@ function SidebarMenuItem({ item, index }) {
       text={item.text}
       disabled={item.disabled}
       dropdownType={item.dropdownType || 'collapse'}
-      caretIconSize={16}
       onClick={item.onClick}
       active={isActive}
-      hasSubmenu={item.hasChildren}
+      intent={Intent.NONE}
     />
   );
 }
@@ -43,9 +42,9 @@ function SidebarMenuItemComposer({ item, index }) {
   return SidebarMenuItem.ItemTypes.indexOf(item.type) !== -1 ? (
     <SidebarMenuItem item={item} index={index} />
   ) : // Group item type.
-  item.type === ISidebarMenuItemType.Group ? (
-    <MenuItemLabel text={item.text} />
-  ) : null;
+    item.type === ISidebarMenuItemType.Group ? (
+      <MenuItemLabel text={item.text} />
+    ) : null;
 }
 
 /**
diff --git a/packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.tsx b/packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.tsx
index a4867a99b..3fc3f4178 100644
--- a/packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.tsx
+++ b/packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.tsx
@@ -1,17 +1,16 @@
 // @ts-nocheck
 import React from 'react';
-import { FormGroup, InputGroup, Intent, Button } from '@blueprintjs/core';
-import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
+import { Intent, Button } from '@blueprintjs/core';
+import { Form, useFormikContext } from 'formik';
 import {
-  ListSelect,
+  FSelect,
   FieldRequiredHint,
   FormattedMessage as T,
   FFormGroup,
   FInputGroup,
 } from '@/components';
 import { CLASSES } from '@/constants/classes';
-import classNames from 'classnames';
-import { compose, inputIntent } from '@/utils';
+import { compose } from '@/utils';
 import { useInviteUserFormContext } from './InviteUserFormProvider';
 
 import withDialogActions from '@/containers/Dialog/withDialogActions';
@@ -42,30 +41,19 @@ function InviteUserFormContent({
           <FInputGroup name={'email'} />
         </FFormGroup>
         {/* ----------- Role name ----------- */}
-        <FastField name={'role_id'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'invite_user.label.role_name'} />}
-              labelInfo={<FieldRequiredHint />}
-              helperText={<ErrorMessage name="role_id" />}
-              className={classNames(CLASSES.FILL, 'form-group--role_name')}
-              intent={inputIntent({ error, touched })}
-            >
-              <ListSelect
-                items={roles}
-                onItemSelect={({ id }) => {
-                  form.setFieldValue('role_id', id);
-                }}
-                selectedItem={value}
-                selectedItemProp={'id'}
-                textProp={'name'}
-                // labelProp={'id '}
-                popoverProps={{ minimal: true }}
-                intent={inputIntent({ error, touched })}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup
+          name={'role_id'}
+          label={<T id={'invite_user.label.role_name'} />}
+          labelInfo={<FieldRequiredHint />}
+        >
+          <FSelect
+            name={'role_id'}
+            items={roles}
+            valueAccessor={'id'}
+            textAccessor={'name'}
+            popoverProps={{ minimal: true }}
+          />
+        </FFormGroup>
       </div>
 
       <div className={CLASSES.DIALOG_FOOTER}>
diff --git a/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.tsx b/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.tsx
index bce3d1991..a4b356f42 100644
--- a/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.tsx
+++ b/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.tsx
@@ -13,10 +13,10 @@ import {
   Position,
 } from '@blueprintjs/core';
 import {
-  DashboardActionsBar,
   Icon,
   Can,
   FormattedMessage as T,
+  DrawerActionsBar,
 } from '@/components';
 
 import { AccountAction, AbilitySubject } from '@/constants/abilityOption';
@@ -72,7 +72,7 @@ function AccountDrawerActionBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
           <Button
@@ -137,7 +137,7 @@ function AccountDrawerActionBar({
           </>
         )}
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 export default compose(
diff --git a/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx b/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx
index edaf98c3b..4323be445 100644
--- a/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx
@@ -27,6 +27,7 @@ import {
   Can,
   Icon,
   FormattedMessage as T,
+  DrawerActionsBar,
 } from '@/components';
 import { CustomerMoreMenuItem } from './utils';
 import {
@@ -91,7 +92,7 @@ function CustomerDetailsActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Popover
           content={
@@ -163,7 +164,7 @@ function CustomerDetailsActionsBar({
           }}
         />
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 
diff --git a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.tsx b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.tsx
index 086df3472..30fcea77d 100644
--- a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.tsx
+++ b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.tsx
@@ -42,4 +42,6 @@ export default function InvoiceGLEntriesTable() {
 
 const InvoiceGLEntriesDatatable = styled(JournalEntriesTable)``;
 
-const InvoiceGLEntriesRoot = styled(Card)``;
+const InvoiceGLEntriesRoot = styled(Card)`
+  
+`;
diff --git a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx
index 6303e707c..73f870ca6 100644
--- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx
@@ -16,10 +16,10 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import {
-  DashboardActionsBar,
   Icon,
   FormattedMessage as T,
   Can,
+  DrawerActionsBar,
 } from '@/components';
 import { ItemDetailActionsMoreBtn } from './ItemDetailActionsMoreBtn';
 
@@ -53,7 +53,7 @@ function ItemDetailActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Can I={ItemAction.Edit} a={AbilitySubject.Item}>
           <Button
@@ -75,7 +75,7 @@ function ItemDetailActionsBar({
         </Can>
         <ItemDetailActionsMoreBtn />
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 
diff --git a/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.tsx b/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.tsx
index 8e70ff369..9607b73db 100644
--- a/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.tsx
@@ -17,10 +17,10 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import {
-  DashboardActionsBar,
   Can,
   Icon,
   FormattedMessage as T,
+  DrawerActionsBar,
 } from '@/components';
 import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
 import { compose } from '@/utils';
@@ -52,7 +52,7 @@ function PaymentMadeDetailActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Can I={PaymentMadeAction.Edit} a={AbilitySubject.PaymentMade}>
           <Button
@@ -62,6 +62,7 @@ function PaymentMadeDetailActionsBar({
             onClick={handleEditPaymentMade}
           />
         </Can>
+
         <Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
           <NavbarDivider />
           <Button
@@ -73,7 +74,7 @@ function PaymentMadeDetailActionsBar({
           />
         </Can>
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 
diff --git a/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.tsx b/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.tsx
index d6839dab3..581df1d29 100644
--- a/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.tsx
@@ -24,8 +24,8 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';
 import {
   Can,
   Icon,
-  DashboardActionsBar,
   FormattedMessage as T,
+  DrawerActionsBar,
 } from '@/components';
 import { VendorMoreMenuItem } from './utils';
 import {
@@ -80,7 +80,7 @@ function VendorDetailsActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <DrawerActionsBar>
       <NavbarGroup>
         <Popover
           content={
@@ -135,7 +135,7 @@ function VendorDetailsActionsBar({
           }}
         />
       </NavbarGroup>
-    </DashboardActionsBar>
+    </DrawerActionsBar>
   );
 }
 
diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomize.module.scss b/packages/webapp/src/containers/ElementCustomize/ElementCustomize.module.scss
index 8fd643511..e6f04a463 100644
--- a/packages/webapp/src/containers/ElementCustomize/ElementCustomize.module.scss
+++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomize.module.scss
@@ -1,5 +1,5 @@
 .root {
-  background: #fff;
+  background: var(--color-element-customize-background);
 }
 
 .mainFields{
@@ -15,7 +15,7 @@
 
 .footerActions{
   padding: 10px 16px;
-  border-top: 1px solid #d9d9d9;
+  border-top: 1px solid var(--color-element-customize-divider);
   flex-flow: row-reverse;
 }
 
diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.module.scss b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.module.scss
index 9d4dd1f36..10c697bd1 100644
--- a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.module.scss
+++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.module.scss
@@ -2,13 +2,13 @@
 .root {
   align-items: center;
   border-radius: 0;
-  box-shadow: 0 1px 0 rgba(17, 20, 24, .15);
+  box-shadow: 0 1px 0 var(--color-element-customize-divider);
   display: flex;
   flex: 0 0 auto;
   min-height: 55px;
   padding: 5px 5px 5px 20px;
   position: relative;
-  background-color: #fff;
+  background-color: var(--color-element-customize-header-background);
   z-index: 1;
 }
 
@@ -16,5 +16,5 @@
   margin: 0;
   font-size: 20px;
   font-weight: 500;
-  color: #666;
+  color: var(--color-element-customize-header-title-text);
 }
\ No newline at end of file
diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.tsx
index 1800ca78f..417e0e487 100644
--- a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.tsx
+++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.tsx
@@ -1,6 +1,7 @@
 import { Button, Classes } from '@blueprintjs/core';
 import { Group, Icon } from '@/components';
 import styles from './ElementCustomizeHeader.module.scss';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 interface ElementCustomizeHeaderProps {
   label?: string;
@@ -15,6 +16,8 @@ export function ElementCustomizeHeader({
   onClose,
   children,
 }: ElementCustomizeHeaderProps) {
+  const isDarkmode = useIsDarkMode();
+
   const handleClose = () => {
     onClose && onClose();
   };
@@ -25,7 +28,7 @@ export function ElementCustomizeHeader({
         <Button
           aria-label="Close"
           className={Classes.DIALOG_CLOSE_BUTTON}
-          icon={<Icon icon={'smallCross'} color={'#000'} />}
+          icon={<Icon icon={'smallCross'} color={isDarkmode ? '#fff' : '#000'} />}
           minimal={true}
           onClick={handleClose}
           style={{ marginLeft: 'auto' }}
diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreview.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreview.tsx
index 975d820b0..8abe06730 100644
--- a/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreview.tsx
+++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreview.tsx
@@ -15,7 +15,11 @@ function ElementCustomizePreviewRoot({ closeDrawer }) {
   return (
     <Stack
       spacing={0}
-      style={{ borderLeft: '1px solid #D9D9D9', height: '100vh', flex: '1 1' }}
+      style={{
+        borderLeft: '1px solid var(--color-element-customize-divider)',
+        height: '100vh',
+        flex: '1 1',
+      }}
     >
       <ElementCustomizeHeader
         label={'Preview'}
diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx
index 134f74bba..908793db1 100644
--- a/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx
+++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx
@@ -5,7 +5,12 @@ export function ElementCustomizePreviewContent() {
   const { PaperTemplate } = useElementCustomizeContext();
 
   return (
-    <Stack backgroundColor="#F5F5F5" overflow="auto" flex="1 1 0%" spacing={0}>
+    <Stack
+      backgroundColor="var(--color-element-customize-preview-background)"
+      overflow="auto"
+      flex="1 1 0%"
+      spacing={0}
+    >
       {PaperTemplate}
     </Stack>
   );
diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.module.scss b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.module.scss
index 73229611d..ffb3e0175 100644
--- a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.module.scss
+++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.module.scss
@@ -8,7 +8,7 @@
 .content{
   padding: 5px;
   flex: 1;
-  border-right: 1px solid #E1E1E1;
+  border-right: 1px solid var(--color-element-customize-divider);
 }
 
 .tabsList{
diff --git a/packages/webapp/src/containers/ElementCustomize/components/CompanyLogoUpload.module.scss b/packages/webapp/src/containers/ElementCustomize/components/CompanyLogoUpload.module.scss
index dd74e7b72..81053a047 100644
--- a/packages/webapp/src/containers/ElementCustomize/components/CompanyLogoUpload.module.scss
+++ b/packages/webapp/src/containers/ElementCustomize/components/CompanyLogoUpload.module.scss
@@ -1,10 +1,16 @@
 .root {
+  --x-border-color: #E1E1E1;
+  --x-border-color: rgba(225, 225, 225, 0.15);
+  --x-color-placeholder-text: #738091;
+  --x-color-placeholder-text: rgba(225, 225, 225, 0.65);
+  
   min-height: 120px;
   height: 120px;
   padding: 10px;
-  border: 1px solid;
   display: flex;
-  border: 1px solid #E1E1E1;
+  border-style: solid;
+  border-color: var(--x-border-color);
+  border-width: 1px;;
   position: relative;
   display: flex;
   justify-content: center;
@@ -25,7 +31,7 @@
 }
 
 .contentPrePreview {
-  color: #738091;
+  color: var(--x-color-placeholder-text);
   font-size: 13px;
   height: 100%;
   justify-content: center;
diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx
index 0eb41999e..c162f653b 100644
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx
@@ -8,10 +8,7 @@ import {
   TotalLineBorderStyle,
   TotalLineTextStyle,
 } from '@/components';
-import {
-  useExpenseSubtotalFormatted,
-  useExpenseTotalFormatted,
-} from './utils';
+import { useExpenseSubtotalFormatted, useExpenseTotalFormatted } from './utils';
 
 export function ExpenseFormFooterRight() {
   const totalFormatted = useExpenseTotalFormatted();
@@ -34,6 +31,9 @@ export function ExpenseFormFooterRight() {
 }
 
 const ExpensesTotalLines = styled(TotalLines)`
+  --x-color-text: #555555;
+  --x-color-text: var(--color-light-gray4);
+
   width: 100%;
-  color: #555555;
+  color: var(--x-color-text);
 `;
diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx
index b5c4ffb69..5ad0a7898 100644
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx
@@ -3,7 +3,11 @@ import React from 'react';
 import { FormGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage } from 'formik';
-import { CustomersSelect, FInputGroup, FormattedMessage as T } from '@/components';
+import {
+  CustomersSelect,
+  FInputGroup,
+  FormattedMessage as T,
+} from '@/components';
 import classNames from 'classnames';
 import { CLASSES } from '@/constants/classes';
 import {
@@ -14,8 +18,8 @@ import {
 } from '@/utils';
 import { customersFieldShouldUpdate, accountsFieldShouldUpdate } from './utils';
 import {
-  CurrencySelectList,
   FFormGroup,
+  FSelect,
   AccountsSelect,
   FieldRequiredHint,
   Hint,
@@ -75,30 +79,24 @@ export default function ExpenseFormHeader() {
         />
       </FFormGroup>
 
-      <FastField name={'currency_code'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'currency'} />}
-            className={classNames(
-              'form-group--select-list',
-              'form-group--currency',
-              Classes.FILL,
-            )}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="currency_code" />}
-            inline={true}
-          >
-            <CurrencySelectList
-              currenciesList={currencies}
-              selectedCurrencyCode={value}
-              onCurrencySelected={(currencyItem) => {
-                form.setFieldValue('currency_code', currencyItem.currency_code);
-              }}
-              defaultSelectText={value}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'currency_code'}
+        label={<T id={'currency'} />}
+        className={classNames(Classes.FILL)}
+        inline={true}
+        fastField={true}
+      >
+        <FSelect
+          name={'currency_code'}
+          items={currencies}
+          valueAccessor={'currency_code'}
+          textAccessor={'currency_code'}
+          labelAccessor={'currency_code'}
+          popoverProps={{ minimal: true }}
+          fill={true}
+          fastField={true}
+        />
+      </FFormGroup>
 
       {/* ----------- Exchange rate ----------- */}
       <ExpensesExchangeRateInputField
diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx
index 115a8a887..53267b7ea 100644
--- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx
@@ -47,16 +47,21 @@ export default function APAgingSummaryTable({
 }
 
 const APAgingSummaryDataTable = styled(ReportDataTable)`
+  --color-table-text-color: var(--color-light-gray1);
+  --color-table-total-text-color: var(--color-light-gray4);
+  --color-table-total-border-top: #bbb;
+  --color-table-total-border-top: var(--color-dark-gray5);
+
   .table {
     .tbody .tr {
       .td {
-        border-bottom: 0;
+        border-bottom-width: 0;
         padding-top: 0.32rem;
         padding-bottom: 0.32rem;
       }
       &:not(.no-results) {
         .td {
-          border-bottom: 0;
+          border-bottom-width: 0;
           padding-top: 0.4rem;
           padding-bottom: 0.4rem;
         }
@@ -67,8 +72,9 @@ const APAgingSummaryDataTable = styled(ReportDataTable)`
           font-weight: 500;
 
           .td {
-            border-top: 1px solid #bbb;
-            border-bottom: 3px double #333;
+            border-top: 1px solid var(--color-table-total-border-top);
+            border-bottom-width: 3px;
+            border-bottom-style: double;
           }
         }
       }
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx
index 2cde74a37..0d04ea3ed 100644
--- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx
@@ -47,17 +47,21 @@ export default function ReceivableAgingSummaryTable({
 }
 
 const ARAgingSummaryDataTable = styled(ReportDataTable)`
+  --color-table-text-color: var(--color-light-gray1);
+  --color-table-total-text-color: var(--color-light-gray4);
+  --color-table-total-border-top: #bbb;
+  --color-table-total-border-top: var(--color-dark-gray5);
+
   .table {
     .tbody .tr {
       .td {
-        border-bottom: 0;
+        border-bottom-width: 0;
         padding-top: 0.32rem;
         padding-bottom: 0.32rem;
       }
-
       &:not(.no-results) {
         .td {
-          border-bottom: 0;
+          border-bottom-width: 0;
           padding-top: 0.4rem;
           padding-bottom: 0.4rem;
         }
@@ -68,8 +72,9 @@ const ARAgingSummaryDataTable = styled(ReportDataTable)`
           font-weight: 500;
 
           .td {
-            border-top: 1px solid #bbb;
-            border-bottom: 3px double #333;
+            border-top: 1px solid var(--color-table-total-border-top);
+            border-bottom-width: 3px;
+            border-bottom-style: double;
           }
         }
       }
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx
index f10da57ba..d895acec1 100644
--- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx
@@ -55,13 +55,16 @@ export default function BalanceSheetTable({
 }
 
 const BalanceSheetDataTable = styled(ReportDataTable)`
+  --color-table-text-color: var(--color-light-gray1);
+  --color-table-total-text-color: var(--color-light-gray4);
+
   .table {
     .tbody .tr {
       .td {
-        border-bottom: 0;
+        border-bottom-width: 0;
         padding-top: 0.32rem;
         padding-bottom: 0.32rem;
-        color: #252A31;
+        color: var(--color-table-text-color);
       }
       &.is-expanded {
         .td:not(.name) .cell-inner {
@@ -70,19 +73,22 @@ const BalanceSheetDataTable = styled(ReportDataTable)`
       }
       &.row_type--TOTAL {
         .td {
+          color: var(--color-table-total-text-color);
           font-weight: 500;
-          border-top: 1px solid #bbb;
-          color: #000;
+          border-top-width: 1px;
+          border-top-style: solid;
         }
       }
-
       &:last-of-type .td {
-        border-bottom: 1px solid #bbb;
+        border-bottom-width: 1px;
+        border-bottom-style: solid;
       }
       &.row_type--TOTAL.row-id--ASSETS,
       &.row_type--TOTAL.row-id--LIABILITY_EQUITY {
         .td {
-          border-bottom: 3px double #000;
+          color: var(--color-table-total-text-color);
+          border-bottom-width: 3px;
+          border-bottom-style: double;
         }
       }
     }
diff --git a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.tsx b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.tsx
index 1b8bb3dd3..bfcd62793 100644
--- a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.tsx
@@ -57,25 +57,28 @@ const CashflowStatementDataTable = styled(DataTable)`
     .tbody {
       .tr:not(.no-results) {
         .td {
-          border-bottom: 0;
+          border-bottom-width: 0;
           padding-top: 0.32rem;
           padding-bottom: 0.32rem;
-          color: #252a31;
         }
         &.row_type--ACCOUNTS {
-          border-top: 1px solid #bbb;
+          .td {
+            border-top-width: 1px;
+            border-top-style: solid;
+          }
         }
         &.row-id--CASH_END_PERIOD {
-          border-bottom: 3px double #333;
+          .td {
+            border-bottom-width: 3px;
+            border-bottom-style: double;
+          }
         }
         &.row_type--TOTAL {
           font-weight: 500;
 
-          .td {
-            color: #000;
-          }
           &:not(:first-child) .td {
-            border-top: 1px solid #bbb;
+            border-top-width: 1px;
+            border-top-style: solid;
           }
         }
       }
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.tsx
index 69fb340c7..c82bb01f9 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.tsx
@@ -43,21 +43,34 @@ export default function CustomersBalanceSummaryTable({
 }
 
 const CustomerBalanceDataTable = styled(ReportDataTable)`
+  --x-table-total-border-bottom-color: #000;
+  --x-table-total-border-top-color: #bbb;
+  --x-table-total-border-bottom-color: var(
+    --color-datatable-constrant-cell-border
+  );
+  --x-table-total-border-top-color: var(
+    --color-datatable-constrant-cell-border
+  );
+
   .table {
     .tbody {
       .tr:not(.no-results) {
         .td {
-          border-bottom: 0;
+          border-bottom-width: 0;
           padding-top: 0.4rem;
           padding-bottom: 0.4rem;
         }
-
         &.row_type--TOTAL {
-          font-weight: 500;
-
           .td {
-            border-top: 1px solid #bbb;
-            border-bottom: 3px double #333;
+            font-weight: 500;
+            border-top-width: 1px;
+            font-weight: 500;
+            border-top-width: 1px;
+            border-top-style: solid;
+            border-top-color: var(--x-table-total-border-top-color);
+            border-bottom-style: double;
+            border-bottom-width: 3px;
+            border-bottom-color: var(--x-table-total-border-bottom-color);
           }
         }
       }
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.tsx
index cded74fe6..9d765834e 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.tsx
@@ -57,6 +57,11 @@ export default function CustomersTransactionsTable({
 }
 
 const CustomersTransactionsDataTable = styled(DataTable)`
+  --color-table-border-left-color: #ececec;
+  --color-table-customer-border-color: #ddd;
+  --color-table-border-left-color: var(--color-dark-gray4);
+  --color-table-customer-border-color: var(--color-dark-gray4);
+
   .table {
     .tbody {
       .tr .td {
@@ -64,10 +69,10 @@ const CustomersTransactionsDataTable = styled(DataTable)`
         padding-bottom: 0.36rem;
       }
       .tr:not(.no-results) .td:not(:first-of-type) {
-        border-left: 1px solid #ececec;
+        border-left: 1px solid var(--color-table-border-left-color);
       }
       .tr:last-child .td {
-        border-bottom: 1px solid #e0e0e0;
+        border-bottom-width: 1px;
       }
 
       .tr.row_type {
@@ -83,7 +88,7 @@ const CustomersTransactionsDataTable = styled(DataTable)`
             }
           }
           &:not(:first-child).is-expanded .td {
-            border-top: 1px solid #ddd;
+            border-top: 1px solid var(--color-table-customer-border-color);
           }
         }
         &--OPENING_BALANCE,
@@ -97,12 +102,12 @@ const CustomersTransactionsDataTable = styled(DataTable)`
             }
           }
           &:not(:first-child).is-expanded .td {
-            border-top: 1px solid #ddd;
+            border-top: 1px solid var(--color-table-customer-border-color);
           }
         }
         &--CUSTOMER:last-child {
           .td {
-            border-bottom: 1px solid #ddd;
+            border-bottom: 1px solid var(--color-table-customer-border-color);
           }
         }
       }
diff --git a/packages/webapp/src/containers/FinancialStatements/FinancialReportPage.tsx b/packages/webapp/src/containers/FinancialStatements/FinancialReportPage.tsx
index b62dba6a6..3cef4d64b 100644
--- a/packages/webapp/src/containers/FinancialStatements/FinancialReportPage.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/FinancialReportPage.tsx
@@ -21,9 +21,9 @@ export const FinancialComputeAlert = styled.div`
   position: relative;
   padding: 8px 20px;
   border-radius: 2px;
-  background-color: #fdecda;
   color: #342515;
   font-size: 13px;
+  background-color: var(--color-financial-report-background);
 
   button {
     font-size: 12px;
diff --git a/packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx b/packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx
index 741b25f7f..6f2b6a69a 100644
--- a/packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx
@@ -1,15 +1,18 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField } from 'formik';
 import {
   PopoverInteractionKind,
   Tooltip,
   MenuItem,
   Position,
-  FormGroup,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { ListSelect, MODIFIER, FormattedMessage as T } from '@/components';
+import {
+  FFormGroup,
+  FSelect,
+  MODIFIER,
+  FormattedMessage as T,
+} from '@/components';
 import { CLASSES } from '@/constants/classes';
 import { filterAccountsOptions } from './constants';
 
@@ -19,13 +22,11 @@ const SUBMENU_POPOVER_MODIFIERS = {
   preventOverflow: { boundariesElement: 'viewport', padding: 40 },
 };
 
-
 export default function FinancialStatementsFilter({
   items = filterAccountsOptions,
   label = <T id={'filter_accounts'} />,
   ...restProps
 }) {
-
   const filterRenderer = (item, { handleClick, modifiers, query }) => {
     return (
       <Tooltip
@@ -43,29 +44,19 @@ export default function FinancialStatementsFilter({
   };
 
   return (
-    <FastField name={'filterByOption'}>
-      {({ form: { setFieldValue }, field: { value } }) => (
-        <FormGroup
-          label={label}
-          className="form-group--select-list bp4-fill"
-          inline={false}
-        >
-          <ListSelect
-            items={items}
-            itemRenderer={filterRenderer}
-            popoverProps={{ minimal: true }}
-            filterable={false}
-            selectedItem={value}
-            selectedItemProp={'key'}
-            textProp={'name'}
-            onItemSelect={(item) => {
-              setFieldValue('filterByOption', item.key);
-            }}
-            className={classNames(CLASSES.SELECT_LIST_FILL_POPOVER)}
-            {...restProps}
-          />
-        </FormGroup>
-      )}
-    </FastField>
+    <FFormGroup name={'filterByOption'} label={label} inline={false}>
+      <FSelect
+        name={'filterByOption'}
+        items={items}
+        itemRenderer={filterRenderer}
+        popoverProps={{ minimal: true }}
+        filterable={false}
+        textAccessor={'name'}
+        labelAccessor={'name'}
+        valueAccessor={'key'}
+        className={classNames(CLASSES.SELECT_LIST_FILL_POPOVER)}
+        {...restProps}
+      />
+    </FFormGroup>
   );
 }
diff --git a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx
index 6566a2773..404fb3ef0 100644
--- a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx
@@ -69,6 +69,14 @@ export default function GeneralLedgerTable({ companyName }) {
 }
 
 const GeneralLedgerDataTable = styled(ReportDataTable)`
+  --color-table-text-color: var(--color-light-gray1);
+  --color-table-total-text-color: #000;
+  --color-table-total-text-color: var(--color-light-gray4);
+  --color-table-border-color: #ececec;
+  --color-table-border-color: var(--color-dark-gray4);
+  --color-table-total-border-color: #ddd;
+  --color-table-total-border-color: var(--color-dark-gray4);
+
   .tbody {
     .tr .td {
       padding-top: 0.2rem;
@@ -80,10 +88,10 @@ const GeneralLedgerDataTable = styled(ReportDataTable)`
       }
     }
     .tr:not(.no-results) .td:not(:first-of-type) {
-      border-left: 1px solid #ececec;
+      border-left: 1px solid var(--color-table-border-color);
     }
     .tr:last-child .td {
-      border-bottom: 1px solid #ececec;
+      border-bottom: 1px solid var(--color-table-border-color);
     }
     .tr.row_type {
       &--ACCOUNT {
@@ -100,7 +108,7 @@ const GeneralLedgerDataTable = styled(ReportDataTable)`
       &--OPENING_BALANCE,
       &--CLOSING_BALANCE {
         .td {
-          color: #000;
+          color: var(--color-table-total-text-color);
         }
         .date {
           font-weight: 500;
@@ -118,7 +126,7 @@ const GeneralLedgerDataTable = styled(ReportDataTable)`
           font-weight: 500;
         }
         .td {
-          border-top: 1px solid #ddd;
+          border-top: 1px solid var(--color-table-total-border-color);
         }
       }
     }
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx
index 16a65e16d..41d16ea1c 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx
@@ -56,6 +56,13 @@ export function InventoryItemDetailsTable({
 }
 
 const InventoryItemDetailsDataTable = styled(ReportDataTable)`
+  --color-table-text: var(--color-light-gray1);
+  --color-table-total-text: var(--color-light-gray4);
+  --color-table-border: #ececec;
+  --color-report-table-border: var(--color-dark-gray4);
+  --color-table-total-border: #ddd;
+  --color-table-total-border: var(--color-dark-gray4);;
+
   .table {
     .tbody {
       .tr .td {
@@ -64,20 +71,17 @@ const InventoryItemDetailsDataTable = styled(ReportDataTable)`
       }
 
       .tr:not(.no-results) .td:not(:first-of-type) {
-        border-left: 1px solid #ececec;
+        border-left: 1px solid var(--color-report-table-border);
       }
-
       .tr:last-child .td {
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid var(--color-table-total-border);
       }
-
       .tr.row_type {
         &--ITEM {
           .td {
             &.transaction_type {
               border-left-color: transparent;
             }
-
             &.date {
               .cell-inner {
                 white-space: nowrap;
@@ -86,7 +90,7 @@ const InventoryItemDetailsDataTable = styled(ReportDataTable)`
             }
           }
           &:not(:first-child).is-expanded .td {
-            border-top: 1px solid #ddd;
+            border-top: 1px solid var(--color-table-total-border);
           }
         }
 
@@ -94,6 +98,10 @@ const InventoryItemDetailsDataTable = styled(ReportDataTable)`
         &--OPENING_ENTRY,
         &--CLOSING_ENTRY {
           font-weight: 500;
+
+          .td {
+            color: var(--color-table-total-text);
+          }
         }
 
         &--ITEM {
diff --git a/packages/webapp/src/containers/FinancialStatements/Journal/JournalTable.tsx b/packages/webapp/src/containers/FinancialStatements/Journal/JournalTable.tsx
index 104d66386..63196f0f0 100644
--- a/packages/webapp/src/containers/FinancialStatements/Journal/JournalTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/Journal/JournalTable.tsx
@@ -65,14 +65,20 @@ export function JournalTable({ companyName }) {
 }
 
 const JournalDataTable = styled(ReportDataTable)`
+  --color-table-text-color: var(--color-light-gray1);
+  --color-table-total-text-color: var(--color-light-gray4);
+  --color-table-border-color: var(--color-dark-gray4);
+  --color-table-total-border-color: #dbdbdb;
+  --color-table-total-border-color: var(--color-table-border-color);
+
   .table {
     .tbody {
       .tr:not(.no-results) .td {
         padding: 0.3rem 0.4rem;
-        color: #000;
+        color: var(--color-table-text-color);
         border-bottom-color: transparent;
+        border-left: 1px solid var(--color-table-border-color);
         min-height: 28px;
-        border-left: 1px solid #ececec;
 
         &:first-of-type {
           border-left: 0;
@@ -80,11 +86,12 @@ const JournalDataTable = styled(ReportDataTable)`
       }
       .tr:not(.no-results):last-child {
         .td {
-          border-bottom: 1px solid #dbdbdb;
+          border-bottom: 1px solid var(--color-table-total-border-color);
         }
       }
       .tr.row_type--TOTAL{
         font-weight: 600;
+        color: var(--color-table-total-text-color);
       }
       .tr:not(.no-results) {
         height: 28px;
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx
index 7abef5dc4..79d6accf2 100644
--- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx
@@ -55,13 +55,16 @@ export default function ProfitLossSheetTable({
 }
 
 const ProfitLossDataTable = styled(ReportDataTable)`
+  --color-table-text-color: var(--color-light-gray1);
+  --color-table-total-text-color: var(--color-light-gray4);
+
   .table {
     .tbody .tr {
       .td {
-        border-bottom: 0;
+        border-bottom-width: 0;
         padding-top: 0.32rem;
         padding-bottom: 0.32rem;
-        color: #252A31;
+        color: var(--color-table-text-color);
       }
       &.is-expanded {
         .td:not(.name) .cell-inner {
@@ -71,12 +74,14 @@ const ProfitLossDataTable = styled(ReportDataTable)`
       &.row_type--TOTAL {
         .td {
           font-weight: 500;
-          border-top: 1px solid #bbb;
-          color: #000;
+          border-top-width: 1px;
+          border-top-style: solid;
+          color: var(--color-table-total-text-color);
         }
       }
       &:last-of-type .td {
-        border-bottom: 3px double #000;
+        border-bottom-width: 3px;
+        border-bottom-style: double;
       }
     }
   }
diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.tsx b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.tsx
index bbfb5260b..28659d404 100644
--- a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.tsx
@@ -52,16 +52,31 @@ const PurchasesByItemsSheet = styled(FinancialSheet)`
 `;
 
 const PurchasesByItemsDataTable = styled(ReportDataTable)`
+  --x-table-total-border-bottom-color: #000;
+  --x-table-total-border-top-color: #bbb;
+  --x-table-total-border-bottom-color: var(
+    --color-datatable-constrant-cell-border
+  );
+  --x-table-total-border-top-color: var(
+    --color-datatable-constrant-cell-border
+  );
+
   .table {
     .tbody {
       .tr .td {
+        border-bottom-width: 0;
         padding-top: 0.36rem;
         padding-bottom: 0.36rem;
       }
       .tr.row_type--TOTAL .td {
-        border-top: 1px solid #bbb;
+        border-top-width: 1px;
         font-weight: 500;
-        border-bottom: 3px double #000;
+        border-top-width: 1px;
+        border-top-style: solid;
+        border-top-color: var(--x-table-total-border-top-color);
+        border-bottom-style: double;
+        border-bottom-width: 3px;
+        border-bottom-color: var(--x-table-total-border-bottom-color);
       }
     }
   }
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx
index a3e439707..8e3d8cc32 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx
@@ -52,17 +52,31 @@ const SalesByItemsSheet = styled(FinancialSheet)`
 `;
 
 const SalesByItemsDataTable = styled(ReportDataTable)`
+  --x-table-total-border-bottom-color: #000;
+  --x-table-total-border-top-color: #bbb;
+  --x-table-total-border-bottom-color: var(
+    --color-datatable-constrant-cell-border
+  );
+  --x-table-total-border-top-color: var(
+    --color-datatable-constrant-cell-border
+  );
+
   .table {
     .tbody {
       .tr .td {
-        border-bottom: 0;
+        border-bottom-width: 0;
         padding-top: 0.4rem;
         padding-bottom: 0.4rem;
       }
       .tr.row_type--TOTAL .td {
-        border-top: 1px solid #bbb;
+        border-top-width: 1px;
         font-weight: 500;
-        border-bottom: 3px double #000;
+        border-top-width: 1px;
+        border-top-style: solid;
+        border-top-color: var(--x-table-total-border-top-color);
+        border-bottom-style: double;
+        border-bottom-width: 3px;
+        border-bottom-color: var(--x-table-total-border-bottom-color);
       }
     }
   }
diff --git a/packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx b/packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx
index 8abf29b35..cca387d4e 100644
--- a/packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx
@@ -1,8 +1,12 @@
 // @ts-nocheck
 import React from 'react';
-import { FormGroup } from '@blueprintjs/core';
-import { FastField } from 'formik';
-import { Row, Col, ListSelect, FormattedMessage as T } from '@/components';
+import {
+  Row,
+  Col,
+  FSelect,
+  FormattedMessage as T,
+  FFormGroup,
+} from '@/components';
 import { displayColumnsByOptions } from './constants';
 
 /**
@@ -14,29 +18,22 @@ export default function SelectsListColumnsBy(props) {
   return (
     <Row>
       <Col xs={4}>
-        <FastField name={'displayColumnsType'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'display_report_columns'} />}
-              className="form-group-display-columns-by form-group--select-list bp4-fill"
-              inline={false}
-              {...formGroupProps}
-            >
-              <ListSelect
-                items={displayColumnsByOptions}
-                filterable={false}
-                selectedItem={value}
-                selectedItemProp={'key'}
-                textProp={'name'}
-                onItemSelect={(item) => {
-                  form.setFieldValue('displayColumnsType', item.key);
-                }}
-                popoverProps={{ minimal: true }}
-                {...selectListProps}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup
+          name={'displayColumnsType'}
+          label={<T id={'display_report_columns'} />}
+          inline={false}
+          {...formGroupProps}
+        >
+          <FSelect
+            name={'displayColumnsType'}
+            items={displayColumnsByOptions}
+            valueAccessor={'key'}
+            textAccessor={'name'}
+            filterable={false}
+            popoverProps={{ minimal: true }}
+            {...selectListProps}
+          />
+        </FFormGroup>
       </Col>
     </Row>
   );
diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx
index d3c630bb5..dff5a9f4f 100644
--- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx
@@ -48,20 +48,24 @@ export default function TrialBalanceSheetTable({ companyName }) {
 }
 
 const TrialBalanceDataTable = styled(ReportDataTable)`
+  --color-table-text-color: var(--color-light-gray1);
+  --color-table-total-text-color: var(--color-light-gray4);
+
   .table {
     .tbody {
       .tr .td {
-        border-bottom: 0;
+        border-bottom-width: 0;
         padding-top: 0.36rem;
         padding-bottom: 0.36rem;
-      }
-      .balance.td {
-        border-top-color: #000;
+        color: var(--color-table-text-color);
       }
       .tr.row_type--TOTAL .td {
-        border-top: 1px solid #bbb;
         font-weight: 500;
-        border-bottom: 3px double #000;
+        color: var(--color-table-total-text-color);
+        border-top-width: 1px;
+        border-top-style: solid;
+        border-bottom-width: 3px;
+        border-bottom-style: double;
       }
     }
   }
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.tsx
index dc2ac5561..0c7a6e069 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.tsx
@@ -44,21 +44,34 @@ export default function VendorsBalanceSummaryTable({
 const VendorBalanceFinancialSheet = styled(FinancialSheet)``;
 
 const VendorBalanceDataTable = styled(ReportDataTable)`
+  --x-table-total-border-bottom-color: #333;
+  --x-table-total-border-top-color: #bbb;
+  --x-table-total-border-bottom-color: var(
+    --color-datatable-constrant-cell-border
+  );
+  --x-table-total-border-top-color: var(
+    --color-datatable-constrant-cell-border
+  );
+
   .table {
     .tbody {
       .tr:not(.no-results) {
         .td {
-          border-bottom: 0;
+          border-bottom-width: 0;
           padding-top: 0.4rem;
           padding-bottom: 0.4rem;
         }
-
         &.row_type--TOTAL {
-          font-weight: 500;
-
           .td {
-            border-top: 1px solid #bbb;
-            border-bottom: 3px double #333;
+            font-weight: 500;
+            border-top-width: 1px;
+            font-weight: 500;
+            border-top-width: 1px;
+            border-top-style: solid;
+            border-top-color: var(--x-table-total-border-top-color);
+            border-bottom-style: double;
+            border-bottom-width: 3px;
+            border-bottom-color: var(--x-table-total-border-bottom-color);
           }
         }
       }
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.tsx
index 6131da6b1..35d0c4ea7 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.tsx
@@ -60,19 +60,23 @@ export default function VendorsTransactionsTable({
 }
 
 const VendorsTransactionsDataTable = styled(DataTable)`
+  --color-table-border-left-color: #ececec;
+  --color-table-customer-border-color: #ddd;
+  --color-table-border-left-color: var(--color-dark-gray4);
+  --color-table-customer-border-color: var(--color-dark-gray4);
+
   .table {
     .tbody {
       .tr .td {
         padding-top: 0.2rem;
         padding-bottom: 0.2rem;
       }
-      .tr:not(.no-results) .td {
-        border-left: 1px solid #ececec;
+      .tr:not(.no-results) .td:not(:first-of-type) {
+        border-left: 1px solid var(--color-table-border-left-color);
       }
       .tr:last-child .td {
-        border-bottom: 1px solid #e0e0e0;
+        border-bottom-width: 1px;
       }
-
       .tr.row_type {
         &--VENDOR {
           .td {
@@ -81,7 +85,7 @@ const VendorsTransactionsDataTable = styled(DataTable)`
             }
           }
           &:not(:first-child).is-expanded .td {
-            border-top: 1px solid #ddd;
+            border-top: 1px solid var(--color-table-customer-border-color);
           }
         }
         &--OPENING_BALANCE,
@@ -95,12 +99,12 @@ const VendorsTransactionsDataTable = styled(DataTable)`
             }
           }
           &:not(:first-child).is-expanded .td {
-            border-top: 1px solid #ddd;
+            border-top: 1px solid var(--color-table-customer-border-color);
           }
         }
         &--VENDOR:last-child {
           .td {
-            border-bottom: 1px solid #ddd;
+            border-bottom: 1px solid var(--color-table-customer-border-color);
           }
         }
       }
diff --git a/packages/webapp/src/containers/Import/ImportDropzone.module.css b/packages/webapp/src/containers/Import/ImportDropzone.module.css
index 1644fb37a..ca5008c96 100644
--- a/packages/webapp/src/containers/Import/ImportDropzone.module.css
+++ b/packages/webapp/src/containers/Import/ImportDropzone.module.css
@@ -1,32 +1,35 @@
 
 .root {
-  
+  --color-import-dropzone-title-text: #5F6B7C;
+  --color-import-dropzone-subtitle-text: #8F99A8;
+  --color-import-dropzone-hint-text: #8F99A8;
+
+  --color-import-dropzone-title-text: var(--color-light-gray2);
+  --color-import-dropzone-subtitle-text: var(--color-light-gray1);
+  --color-import-dropzone-hint-text: rgba(255, 255, 255, 0.4);
 }
 
 .title{
-  color: #5F6B7C;
+  color: var(--color-import-dropzone-title-text);
   font-weight: 600;
 }
-
 .iconWrap{
   color: #8F99A8;
 }
 .subtitle {
-  color: #8F99A8;
+  color: var(--color-import-dropzone-subtitle-text);
 }
 .dropzoneContent{
   text-align: center;
   margin: auto;  
 }
-
 .buttons-wrap {
   margin-top: 12px;
 }
-
 .dropzoneHint{
   display: flex;
   font-size: 12px;
   margin-top: 6px;
-  color: #8F99A8;
+  color: var(--color-import-dropzone-hint-text);
   justify-content: space-between;
 }
\ No newline at end of file
diff --git a/packages/webapp/src/containers/Import/ImportDropzone.tsx b/packages/webapp/src/containers/Import/ImportDropzone.tsx
index 43ff50b8c..d19a8b879 100644
--- a/packages/webapp/src/containers/Import/ImportDropzone.tsx
+++ b/packages/webapp/src/containers/Import/ImportDropzone.tsx
@@ -9,7 +9,7 @@ export function ImportDropzone() {
   const { hideAlerts } = useAlertsManager();
 
   return (
-    <Stack spacing={0}>
+    <Stack spacing={0} className={styles.root}>
       <Field id={'file'} name={'file'} type="file">
         {({ form }) => (
           <ImportDropzoneField
diff --git a/packages/webapp/src/containers/Import/ImportFileFooterActions.tsx b/packages/webapp/src/containers/Import/ImportFileFooterActions.tsx
index 15b96acbe..d2775964a 100644
--- a/packages/webapp/src/containers/Import/ImportFileFooterActions.tsx
+++ b/packages/webapp/src/containers/Import/ImportFileFooterActions.tsx
@@ -4,8 +4,8 @@ import { Group } from '@/components';
 import { CLASSES } from '@/constants';
 import { Button, Intent } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
-import styles from './ImportFileActions.module.scss';
 import { useImportFileContext } from './ImportFileProvider';
+import styles from './ImportFileActions.module.scss';
 
 export function ImportFileUploadFooterActions() {
   const { isSubmitting } = useFormikContext();
diff --git a/packages/webapp/src/containers/Import/ImportSampleDownload.module.scss b/packages/webapp/src/containers/Import/ImportSampleDownload.module.scss
index ee230449c..096fe2c92 100644
--- a/packages/webapp/src/containers/Import/ImportSampleDownload.module.scss
+++ b/packages/webapp/src/containers/Import/ImportSampleDownload.module.scss
@@ -1,23 +1,31 @@
+.root {
+  --color-sample-download-background: #fff;
+  --color-sample-download-border: #d3d8de;
+  --color-sample-download-title-text: #5f6b7c;
+  --color-sample-download-desc-text: #8f99a8;
 
+  --color-sample-download-background: var(--color-dark-gray3);
+  --color-sample-download-border: var(--color-dark-gray5);
+  --color-sample-download-title-text: var(--color-light-gray1);
+  --color-sample-download-desc-text: var(--color-light-gray1);
 
-.root{
-  background: #fff;
-  border: 1px solid #D3D8DE;
+  background: var(--color-sample-download-background);
+  border: 1px solid var(--color-sample-download-border);
   border-radius: 5px;
-  padding: 16px; 
+  padding: 16px;
 }
-.description{
+.description {
   margin: 0;
   margin-top: 6px;
-  color: #8F99A8;
+  color: var(--color-sample-download-desc-text);
 }
-.title{
-  color: #5F6B7C;
+.title {
+  color: var(--color-sample-download-title-text);
   font-weight: 600;
   font-size: 14px;
 }
 
-.buttonWrap{
+.buttonWrap {
   flex: 25% 0;
   text-align: right;
-}
\ No newline at end of file
+}
diff --git a/packages/webapp/src/containers/Import/ImportStepper.module.scss b/packages/webapp/src/containers/Import/ImportStepper.module.scss
index 2971a3632..9b8a62da8 100644
--- a/packages/webapp/src/containers/Import/ImportStepper.module.scss
+++ b/packages/webapp/src/containers/Import/ImportStepper.module.scss
@@ -1,7 +1,10 @@
 .content {
+  --border-color: #DCE0E5;
+  --border-color: var(--color-dark-gray5);
+
   margin-top: 0;
   margin-bottom: 0;
-  border-top: 1px solid #DCE0E5;
+  border-top: 1px solid var(--border-color);
 }
 
 .root {
diff --git a/packages/webapp/src/containers/ItemsCategories/ItemCategoriesImport.tsx b/packages/webapp/src/containers/ItemsCategories/ItemCategoriesImport.tsx
index 02819cbac..2de6684e1 100644
--- a/packages/webapp/src/containers/ItemsCategories/ItemCategoriesImport.tsx
+++ b/packages/webapp/src/containers/ItemsCategories/ItemCategoriesImport.tsx
@@ -19,7 +19,7 @@ export default function ItemCategoriesImport() {
         onImportSuccess={handleImportSuccess}
         onCancelClick={handleCancelBtnClick}
         exampleTitle="Item Categories Example"
-        />
+      />
     </DashboardInsider>
   );
 }
diff --git a/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx b/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx
index 75a7172b9..89ad30966 100644
--- a/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx
+++ b/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx
@@ -1,4 +1,4 @@
-import { FCheckbox, Group } from '@/components';
+import { Group } from '@/components';
 import { useUncontrolled } from '@/hooks/useUncontrolled';
 import { Checkbox, Text } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
diff --git a/packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingFormContent.tsx b/packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingFormContent.tsx
index 3fd8d2c1a..7d928192d 100644
--- a/packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingFormContent.tsx
+++ b/packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingFormContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Button, Classes, Intent, Text } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
 import { FFormGroup, Group, Stack } from '@/components';
@@ -5,6 +6,7 @@ import { FColorInput } from '@/components/Forms/FColorInput';
 import { CompanyLogoUpload } from '@/containers/ElementCustomize/components/CompanyLogoUpload';
 import { PreferencesBrandingFormValues } from './_types';
 import styles from './PreferencesBranding.module.scss';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 export function PreferencesBrandingFormContent() {
   return (
@@ -31,9 +33,15 @@ export function PreferencesBrandingFormContent() {
 
 export function PreferencesBrandingFormFooter() {
   const { isSubmitting } = useFormikContext();
+  const isDarkMode = useIsDarkMode();
 
   return (
-    <Group style={{ padding: '12px 0', borderTop: '1px solid #e1e1e1' }}>
+    <Group
+      style={{
+        padding: '12px 0',
+        borderTop: `1px solid ${isDarkMode ? 'rgba(255, 255, 255, 0.25)' : '#e1e1e1'}`,
+      }}
+    >
       <Button intent={Intent.PRIMARY} type={'submit'} loading={isSubmitting}>
         Submit
       </Button>
diff --git a/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx b/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx
index 649ffa557..315d4ab9d 100644
--- a/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx
+++ b/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx
@@ -60,8 +60,11 @@ export function PreferencesCreditNotesForm({ isSubmitting }) {
 }
 
 const CardFooterActions = styled.div`
+  --x-color-border: #e0e7ea;
+  --x-color-border: rgba(255, 255, 255, 0.25);
+
   padding-top: 16px;
-  border-top: 1px solid #e0e7ea;
+  border-top: 1px solid var(--x-color-border);
   margin-top: 30px;
 
   .bp4-button {
diff --git a/packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx b/packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx
index 7e17acc10..678627ddf 100644
--- a/packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx
@@ -60,8 +60,11 @@ export function PreferencesEstimatesForm({ isSubmitting }) {
 }
 
 const CardFooterActions = styled.div`
+  --x-color-border: #e0e7ea;
+  --x-color-border: rgba(255, 255, 255, 0.25);
+
   padding-top: 16px;
-  border-top: 1px solid #e0e7ea;
+  border-top: 1px solid var(--x-color-border);
   margin-top: 30px;
 
   .bp4-button {
diff --git a/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx b/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
index a1949d5f0..3f8cee7c2 100644
--- a/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
+++ b/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
@@ -271,8 +271,11 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
 }
 
 const CardFooterActions = styled.div`
+  --x-color-border: #e0e7ea;
+  --x-color-border: rgba(255, 255, 255, 0.15);
+
   padding-top: 16px;
-  border-top: 1px solid #e0e7ea;
+  border-top: 1px solid var(--x-color-border);
   margin-top: 30px;
 
   .bp4-button {
diff --git a/packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx b/packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx
index 9237c58e8..c4e861e91 100644
--- a/packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx
@@ -60,8 +60,11 @@ export function PreferencesInvoicesForm({ isSubmitting }) {
 }
 
 const CardFooterActions = styled.div`
+  --x-color-border: #e0e7ea;
+  --x-color-border: rgba(255, 255, 255, 0.25);
+
   padding-top: 16px;
-  border-top: 1px solid #e0e7ea;
+  border-top: 1px solid var(--x-color-border);
   margin-top: 30px;
 
   .bp4-button {
diff --git a/packages/webapp/src/containers/Preferences/PaymentMethods/StripePaymentMethod.tsx b/packages/webapp/src/containers/Preferences/PaymentMethods/StripePaymentMethod.tsx
index 6f44ba44d..2b380aa15 100644
--- a/packages/webapp/src/containers/Preferences/PaymentMethods/StripePaymentMethod.tsx
+++ b/packages/webapp/src/containers/Preferences/PaymentMethods/StripePaymentMethod.tsx
@@ -24,11 +24,13 @@ import {
 import { DRAWERS } from '@/constants/drawers';
 import { MoreIcon } from '@/icons/More';
 import { STRIPE_PRICING_LINK } from './constants';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 export function StripePaymentMethod() {
   const { openDialog } = useDialogActions();
   const { openDrawer } = useDrawerActions();
   const { openAlert } = useAlertActions();
+  const isDarkMode = useIsDarkMode();
 
   const { paymentMethodsState } = usePaymentMethodsBoot();
   const stripeState = paymentMethodsState?.stripe;
@@ -63,8 +65,9 @@ export function StripePaymentMethod() {
     <Card style={{ margin: 0 }}>
       <Group position="apart">
         <Group>
-          <StripeLogo />
-
+          <StripeLogo
+            color={isDarkMode ? 'rgba(255, 255, 255, 0.85)' : '#0A2540'}
+          />
           <Group spacing={10}>
             {isStripeEnabled && (
               <Tag minimal intent={Intent.SUCCESS}>
diff --git a/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialogContent.tsx b/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialogContent.tsx
index 0fa2d7511..b1bc38352 100644
--- a/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialogContent.tsx
+++ b/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialogContent.tsx
@@ -92,5 +92,5 @@ const PaymentFeatureIcon = styled('span')`
   position: absolute;
   left: 12px;
   top: 2px;
-  color: #0052cc;
+  color: var(--color-primary);
 `;
diff --git a/packages/webapp/src/containers/Preferences/PreferencesPageLoader.tsx b/packages/webapp/src/containers/Preferences/PreferencesPageLoader.tsx
index 25e8b5eb1..34304aa83 100644
--- a/packages/webapp/src/containers/Preferences/PreferencesPageLoader.tsx
+++ b/packages/webapp/src/containers/Preferences/PreferencesPageLoader.tsx
@@ -1,15 +1,18 @@
 // @ts-nocheck
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 import ContentLoader from 'react-content-loader';
 
 export default function PreferencesPageLoader(props) {
+  const isDarkmode = useIsDarkMode();
+
   return (
     <ContentLoader
       speed={2}
       width={400}
       height={250}
       viewBox="0 0 400 250"
-      backgroundColor="#f3f3f3"
-      foregroundColor="#e6e6e6"
+      backgroundColor={isDarkmode ? 'rgba(255, 255, 255, 0.15)' : '#f3f3f3'}
+      foregroundColor={isDarkmode ? 'rgba(255, 255, 255, 0.3)' : '#e6e6e6'}
       {...props}
     >
       <rect x="0" y="82" rx="2" ry="2" width="200" height="20" />
diff --git a/packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx b/packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx
index 42836de51..b72673a5d 100644
--- a/packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx
@@ -60,8 +60,11 @@ export function PreferencesReceiptsForm({ isSubmitting }) {
 }
 
 const CardFooterActions = styled.div`
+  --x-color-border: #e0e7ea;
+  --x-color-border: rgba(255, 255, 255, 0.25);
+
   padding-top: 16px;
-  border-top: 1px solid #e0e7ea;
+  border-top: 1px solid var(--x-color-border);
   margin-top: 30px;
 
   .bp4-button {
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterRight.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterRight.tsx
index 293e63818..caf5e611c 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterRight.tsx
@@ -79,6 +79,9 @@ export function BillFormFooterRight() {
 }
 
 const BillTotalLines = styled(TotalLines)`
+  --x-color-text: #555;
+  --x-color-text: var(--color-light-gray4);
+
   width: 100%;
-  color: #555555;
+  color: var(--x-color-text);
 `;
diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.tsx
index 5448139b3..33b1da575 100644
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.tsx
@@ -46,6 +46,9 @@ export function VendorCreditNoteFormFooterRight() {
 }
 
 const VendorCreditNoteTotalLines = styled(TotalLines)`
+  --x-color-text: #555;
+  --x-color-text: var(--color-light-gray4);
+
   width: 100%;
-  color: #555555;
+  color: var(--x-color-text);
 `;
diff --git a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormFooterRight.tsx b/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormFooterRight.tsx
index 5f1de27df..a903889c5 100644
--- a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormFooterRight.tsx
@@ -41,6 +41,9 @@ export function PaymentMadeFormFooterRight() {
 }
 
 const PaymentMadeTotalLines = styled(TotalLines)`
+  --x-color-text: #555;
+  --x-color-text: var(--color-light-gray4);
+
   width: 100%;
-  color: #555555;
+  color: var(--x-color-text);
 `;
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterRight.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterRight.tsx
index e6b381283..faffbcb04 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterRight.tsx
@@ -50,6 +50,9 @@ export function CreditNoteFormFooterRight() {
 }
 
 const CreditNoteTotalLines = styled(TotalLines)`
+  --x-color-text: #555555;
+  --x-color-text: var(--color-light-gray4);
+
   width: 100%;
-  color: #555555;
+  color: var(--x-color-text);
 `;
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx
index 9a3f450e1..115417b0d 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx
@@ -4,19 +4,30 @@ import intl from 'react-intl-universal';
 import CreditNoteFormHeaderFields from './CreditNoteFormHeaderFields';
 import { Group, PageFormBigNumber } from '@/components';
 import { useCreditNoteTotalFormatted } from './utils';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 /**
  * Credit note header.
  */
 function CreditNoteFormHeader() {
+  const isDarkMode = useIsDarkMode();
+
   return (
     <Group
       position="apart"
       align={'flex-start'}
       display="flex"
-      bg="white"
       p="25px 32px"
-      borderBottom="1px solid #d2dce2"
+      bg="var(--x-credit-note-form-header-background)"
+      borderBottom="1px solid var(--x-credit-note-form-header-border)"
+      style={{
+        '--x-credit-note-form-header-background': isDarkMode
+          ? 'var(--color-dark-gray1)'
+          : 'var(--color-white)',
+        '--x-credit-note-form-header-border': isDarkMode
+          ? 'rgba(255, 255, 255, 0.1)'
+          : '#d2dce2',
+      }}
     >
       <CreditNoteFormHeaderFields />
       <CreditNoteFormBigNumber />
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx
index dcc117900..6652ce3ae 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx
@@ -37,7 +37,7 @@ import {
 } from './utils';
 import { PageForm } from '@/components/PageForm';
 
-/**6
+/**
  * Estimate form.
  */
 function EstimateForm({
@@ -70,18 +70,18 @@ function EstimateForm({
     ...(!isEmpty(estimate)
       ? { ...transformToEditForm(estimate) }
       : {
-          ...defaultEstimate,
-          // If the auto-increment mode is enabled, take the next estimate
-          // number from the settings.
-          ...(estimateAutoIncrementMode && {
-            estimate_number: estimateNumber,
-          }),
-          entries: orderingLinesIndexes(defaultEstimate.entries),
-          currency_code: base_currency,
-          terms_conditions: defaultTo(estimateTermsConditions, ''),
-          note: defaultTo(estimateCustomerNotes, ''),
-          pdf_template_id: saleEstimateState?.defaultTemplateId,
+        ...defaultEstimate,
+        // If the auto-increment mode is enabled, take the next estimate
+        // number from the settings.
+        ...(estimateAutoIncrementMode && {
+          estimate_number: estimateNumber,
         }),
+        entries: orderingLinesIndexes(defaultEstimate.entries),
+        currency_code: base_currency,
+        terms_conditions: defaultTo(estimateTermsConditions, ''),
+        note: defaultTo(estimateCustomerNotes, ''),
+        pdf_template_id: saleEstimateState?.defaultTemplateId,
+      }),
   };
 
   // Handles form submit.
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.tsx
index c3ff4d13d..0ea997f55 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.tsx
@@ -42,6 +42,9 @@ export function EstimateFormFooterRight() {
 }
 
 const EstimateTotalLines = styled(TotalLines)`
+  --x-color-text: #555;
+  --x-color-text: var(--color-light-gray4);
+
   width: 100%;
-  color: #555555;
+  color: var(--x-color-text);
 `;
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx
index a8d924784..1a622a2c7 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx
@@ -5,16 +5,27 @@ import intl from 'react-intl-universal';
 import EstimateFormHeaderFields from './EstimateFormHeaderFields';
 import { Group, PageFormBigNumber } from '@/components';
 import { useEstimateTotalFormatted } from './utils';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 // Estimate form top header.
 function EstimateFormHeader() {
+  const isDarkMode = useIsDarkMode();
+
   return (
     <Group
       position="apart"
       align={'flex-start'}
-      bg="white"
       p="25px 32px"
-      borderBottom="1px solid #d2dce2"
+      bg="var(--x-estimate-form-header-background)"
+      borderBottom="1px solid var(--x-estimate-form-header-border)"
+      style={{
+        '--x-estimate-form-header-background': isDarkMode
+          ? 'var(--color-dark-gray1)'
+          : 'var(--color-white)',
+        '--x-estimate-form-header-border': isDarkMode
+          ? 'rgba(255, 255, 255, 0.1)'
+          : '#d2dce2',
+      }}
     >
       <EstimateFormHeaderFields />
       <EstimateFormBigTotal />
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSnedMailFields.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSnedMailFields.tsx
index 6cd0672b8..fffa42e10 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSnedMailFields.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSnedMailFields.tsx
@@ -7,6 +7,7 @@ import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useDrawerActions } from '@/hooks/state';
 import { useSendEstimateFormatArgsOptions } from './hooks';
 import { useSendMailItems } from '../SendMailViewDrawer/hooks';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 
 export function EstimateSendMailFields() {
@@ -41,6 +42,7 @@ function EstimateSendMailFooter() {
   const { isSubmitting } = useFormikContext();
   const { name } = useDrawerContext();
   const { closeDrawer } = useDrawerActions();
+  const isDarkmode = useIsDarkMode();
 
   const handleClose = () => {
     closeDrawer(name);
@@ -50,7 +52,9 @@ function EstimateSendMailFooter() {
     <Group
       py={'12px'}
       px={'16px'}
-      borderTop="1px solid #d8d8d9"
+      borderTopWidth={'1px'}
+      borderTopColor={isDarkmode ? 'rgba(255, 255, 255, 0.2)' : '#d8d8d9'}
+      borderTopStyle={'solid'}
       position={'apart'}
     >
       <Group spacing={10} ml={'auto'}>
diff --git a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewHeader.tsx b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewHeader.tsx
index 98a9c6584..cf701411a 100644
--- a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewHeader.tsx
@@ -3,6 +3,7 @@ import { x } from '@xstyled/emotion';
 import { Group, Icon } from '@/components';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useDrawerActions } from '@/hooks/state';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 interface SendMailViewHeaderProps {
   label?: string;
@@ -16,6 +17,7 @@ export function SendMailViewHeader({
 }: SendMailViewHeaderProps) {
   const { name } = useDrawerContext();
   const { closeDrawer } = useDrawerActions();
+  const isDarkmode = useIsDarkMode();
 
   const handleClose = () => {
     closeDrawer(name);
@@ -24,14 +26,19 @@ export function SendMailViewHeader({
     <Group
       p={'10px'}
       pl={'30px'}
-      bg="white"
+      bg={isDarkmode ? "var(--color-dark-gray2)" : "white"}
       alignItems={'center'}
-      boxShadow={'0 1px 0 rgba(17, 20, 24, .15)'}
+      boxShadow={`0 1px 0 ${isDarkmode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(17, 20, 24, .15)'}`}
       zIndex={1}
       style={{ position: 'relative' }}
     >
       {label && (
-        <x.h1 margin={0} fontSize={20} fontWeight={500} color={'#666'}>
+        <x.h1
+          margin={0}
+          fontSize={20}
+          fontWeight={500}
+          color={isDarkmode ? 'rgba(255, 255, 255, 0.75)' : '#666'}
+        >
           {label}
         </x.h1>
       )}
@@ -39,7 +46,7 @@ export function SendMailViewHeader({
         <Button
           aria-label="Close"
           className={Classes.DIALOG_CLOSE_BUTTON}
-          icon={<Icon icon={'smallCross'} color={'#000'} />}
+          icon={<Icon icon={'smallCross'} color={isDarkmode ? 'rgba(255, 255, 255, 0.85)' : '#000'} />}
           minimal={true}
           onClick={handleClose}
           style={{ marginLeft: 'auto' }}
diff --git a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewLayout.tsx b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewLayout.tsx
index 4615f11fc..c7b2eb479 100644
--- a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewLayout.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewLayout.tsx
@@ -1,4 +1,5 @@
 import { Group, Stack } from '@/components';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 import React from 'react';
 
 interface SendMailViewLayoutProps {
@@ -12,23 +13,32 @@ export function SendMailViewLayout({
   fields,
   preview,
 }: SendMailViewLayoutProps) {
+  const isDarkMode = useIsDarkMode();
+
   return (
     <Stack spacing={0} flex={1} overflow="hidden">
       {header}
 
       <Group flex={1} overflow="auto" spacing={0} alignItems={'stretch'}>
         <Stack
-          bg="white"
+          bg={isDarkMode ? "var(--color-dark-gray2)" : "white"}
           flex={'1'}
           maxWidth="720px"
           maxHeight="100%"
           spacing={0}
-          borderRight="1px solid #dcdcdd"
+          borderRightWidth={1}
+          borderRightStyle="solid"
+          borderRightColor={isDarkMode ? "rgba(255, 255, 255, 0.2)" : "#dcdcdd"}
         >
           {fields}
         </Stack>
 
-        <Stack bg="#F5F5F5" flex={'1'} maxHeight={'100%'} minWidth="850px">
+        <Stack
+          bg={isDarkMode ? "var(--color-dark-gray2)" : "#F5F5F5"}
+          flex={'1'}
+          maxHeight={'100%'}
+          minWidth="850px"
+        >
           {preview}
         </Stack>
       </Group>
diff --git a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewMessageField.tsx b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewMessageField.tsx
index c9df847d7..ad9d6e420 100644
--- a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewMessageField.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewMessageField.tsx
@@ -7,6 +7,7 @@ import { FormGroupProps, TextAreaProps } from '@blueprintjs-formik/core';
 import { css } from '@emotion/css';
 import { FFormGroup, FSelect, FTextArea, Group, Stack } from '@/components';
 import { InvoiceSendMailFormValues } from '../../Invoices/InvoiceSendMailDrawer/_types';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 interface SendMailViewMessageFieldProps {
   argsOptions?: Array<SelectOptionProps>;
@@ -22,6 +23,7 @@ export function SendMailViewMessageField({
 }: SendMailViewMessageFieldProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const { setFieldValue } = useFormikContext<InvoiceSendMailFormValues>();
+  const isDarkmode = useIsDarkMode();
 
   const handleTextareaChange = useCallback(
     (item: SelectOptionProps) => {
@@ -58,7 +60,7 @@ export function SendMailViewMessageField({
     <FFormGroup label={'Message'} name={'message'} {...formGroupProps}>
       <Stack spacing={0}>
         <Group
-          border={'1px solid #ced4da'}
+          border={`1px solid ${isDarkmode ? 'rgba(255, 255, 255, 0.2)' : '#ced4da'}`}
           borderBottom={0}
           borderRadius={'3px 3px 0 0'}
         >
diff --git a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewHeader.tsx b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewHeader.tsx
index c33c9fb68..51a4c1ee1 100644
--- a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewHeader.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { x } from '@xstyled/emotion';
 import { Box, Group, Stack } from '@/components';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 interface SendViewPreviewHeaderProps {
   companyName?: string;
@@ -22,11 +23,14 @@ export function SendViewPreviewHeader({
     [from],
   );
   const formattedToAddresses = useMemo(() => formatAddresses(to || []), [to]);
+  const isDarkmode = useIsDarkMode();
 
   return (
     <Stack
-      bg={'white'}
-      borderBottom={'1px solid #dcdcdd'}
+      bg={isDarkmode ? 'var(--color-dark-gray2)' : 'white'}
+      borderBottomWidth={'1px'}
+      borderBottomStyle={'solid'}
+      borderBottomColor={isDarkmode ? 'rgba(255, 255, 255, 0.2)' : '#dcdcdd'}
       padding={'22px 30px'}
       spacing={8}
       position={'sticky'}
diff --git a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewTabs.tsx b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewTabs.tsx
index ae9441d78..ff1fd05d2 100644
--- a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewTabs.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewTabs.tsx
@@ -13,6 +13,15 @@ export function SendMailViewPreviewTabs({
       id={'preview'}
       defaultSelectedTabId={'payment-page'}
       className={css`
+          --x-color-background: var(--color-white);
+          --x-color-background: var(--color-dark-gray2);
+
+          --x-color-border: #dcdcdd;
+          --x-color-border: rgba(255, 255, 255, 0.2);
+
+          --x-color-tab-text: #5f6b7c;
+          --x-color-tab-text: rgba(255, 255,255, 0.6);
+
           overflow: hidden;
           flex: 1 1;
           display: flex;
@@ -20,14 +29,14 @@ export function SendMailViewPreviewTabs({
 
           .bp4-tab-list {
             padding: 0 20px;
-            background: #fff;
-            border-bottom: 1px solid #dcdcdd;
+            background: var(--x-color-background);
+            border-bottom: 1px solid var(--x-color-border);
           }
           .bp4-tab {
             line-height: 40px;
           }
           .bp4-tab:not([aria-selected='true']) {
-            color: #5f6b7c;
+            color: var(--x-color-tab-text);
           }
           .bp4-tab-indicator-wrapper .bp4-tab-indicator {
             height: 2px;
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/CompanyLogoUpload.module.scss b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/CompanyLogoUpload.module.scss
index 929214b60..f260a699f 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/CompanyLogoUpload.module.scss
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/CompanyLogoUpload.module.scss
@@ -1,5 +1,5 @@
 .root {
-  border: 1px solid #e1e1e1;
+  // border: 1px solid #e1e1e1;
   border-radius: 8px;
   min-height: 120px;
   padding: 10px;
@@ -17,7 +17,7 @@
 
 .title{
   font-size: 13px;
-  color: #738091;
+  // color: #738091;
 }
 
 .removeButton{
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.module.scss b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.module.scss
index e11e108a5..a2f1e64bb 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.module.scss
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.module.scss
@@ -1,3 +1,16 @@
-.showCompanyLogoField{
+.showCompanyLogoField {
   font-size: 14px;
-}
\ No newline at end of file
+}
+
+.customizePayment {
+  --color-background: #fbfbfb;
+  --color-divider: #e1e1e1;
+
+  --color-background: transparent;
+  --color-divider: rgba(255, 255, 255, 0.2);
+
+  background-color: var(--background);
+  border: 1px solid var(--color-divider);
+  padding: 10px;
+  border-radius: 5px;
+}
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
index ea53835ec..91330a8a5 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
@@ -17,6 +17,7 @@ import { BrandingCompanyLogoUploadField } from '@/containers/ElementCustomize/co
 import { MANAGE_LINK_URL } from './constants';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useDrawerActions } from '@/hooks/state';
+import styles from './InvoiceCustomizeGeneralFields.module.scss';
 
 export function InvoiceCustomizeGeneralField() {
   const isTemplateNameFilled = useIsTemplateNamedFilled();
@@ -28,7 +29,8 @@ export function InvoiceCustomizeGeneralField() {
           General Branding
         </h2>
         <p className={Classes.TEXT_MUTED}>
-          Set your company logo and branding colors to be automatically applied to your invoices.
+          Set your company logo and branding colors to be automatically applied
+          to your invoices.
         </p>
       </Stack>
 
@@ -106,15 +108,7 @@ function InvoiceCustomizePaymentManage() {
   };
 
   return (
-    <Group
-      style={{
-        backgroundColor: '#FBFBFB',
-        border: '1px solid #E1E1E1',
-        padding: 10,
-        borderRadius: 5,
-      }}
-      position={'apart'}
-    >
+    <Group className={styles.customizePayment} position={'apart'}>
       <Group spacing={10}>
         <CreditCardIcon fill={'#7D8897'} height={16} width={16} />
         <Text>Accept payment methods</Text>
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx
index 7fddc6a48..cd583a3f1 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { Tabs, TabsProps } from '@blueprintjs/core';
 
-interface InvoiceCustomizeTabsProps extends TabsProps {}
+interface InvoiceCustomizeTabsProps extends TabsProps { }
 
 export function InvoiceCustomizeTabs(props: InvoiceCustomizeTabsProps) {
   return (
@@ -14,14 +14,14 @@ export function InvoiceCustomizeTabs(props: InvoiceCustomizeTabsProps) {
 
         .bp4-tab-list {
           padding: 0 20px;
-          background: #fff;
-          border-bottom: 1px solid #dcdcdd;
+          background: var(--color-element-customize-header-tabs-background);
+          border-bottom: 1px solid var(--color-element-customize-divider);
         }
         .bp4-tab {
           line-height: 40px;
         }
         .bp4-tab:not([aria-selected='true']) {
-          color: #5f6b7c;
+          color: var(--color-ekement-customize-header-tabs-text);
         }
         .bp4-tab-indicator-wrapper .bp4-tab-indicator {
           height: 2px;
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/Overlay.module.scss b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/Overlay.module.scss
index dd9ece2b3..6439743be 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/Overlay.module.scss
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/Overlay.module.scss
@@ -2,10 +2,14 @@
 
 .root {
   position: relative;
+  
+  &.visible {
+    opacity: 0.4;
 
-  &.visible::before{
-    background: rgba(255, 255, 255, 0.75);
-    z-index: 2;
+    &::before {
+      background: transparent;
+      z-index: 2;
+    }
   }
   &::before{
     content: "";
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx
index 36f533909..f0507cc70 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx
@@ -7,6 +7,7 @@ import {
   FInputGroup,
   TotalLinePrimitive,
 } from '@/components';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 const inputGroupCss = css`
   & .bp4-input {
@@ -26,12 +27,19 @@ interface AdjustmentTotalLineProps {
 export function AdjustmentTotalLine({
   adjustmentAmount,
 }: AdjustmentTotalLineProps) {
+  const isDarkMode = useIsDarkMode();
+
   return (
     <TotalLinePrimitive>
       <x.div
         display={'table-cell'}
         padding={'8px'}
-        borderBottom={'1px solid rgb(210, 221, 226)'}
+        borderBottom={'1px solid var(--x-border-bottom-color)'}
+        style={{
+          '--x-border-bottom-color': isDarkMode
+            ? 'rgba(255, 255, 255, 0.1)'
+            : 'rgb(210, 221, 226)',
+        }}
       >
         <x.div
           display={'flex'}
@@ -64,9 +72,14 @@ export function AdjustmentTotalLine({
 
       <x.div
         display={'table-cell'}
-        borderBottom={'1px solid rgb(210, 221, 226)'}
         textAlign={'right'}
         padding={'8px'}
+        borderBottom={'1px solid var(--x-border-bottom-color)'}
+        style={{
+          '--x-border-bottom-color': isDarkMode
+            ? 'rgba(255, 255, 255, 0.1)'
+            : 'rgb(210, 221, 226)',
+        }}
       >
         {adjustmentAmount}
       </x.div>
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx
index a2a1d84dc..da5d09127 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx
@@ -8,6 +8,7 @@ import {
   TotalLinePrimitive,
 } from '@/components';
 import { Button } from '@blueprintjs/core';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 const inputGroupCss = css`
   & .bp4-input {
@@ -48,9 +49,18 @@ export function DiscountTotalLine({
     { text: '%', value: 'percentage', label: 'Percentage' },
   ];
 
+  const isDarkMode = useIsDarkMode();
+
   return (
     <TotalLinePrimitive>
-      <TotalLinePrimitive.Title borderBottom={'1px solid rgb(210, 221, 226)'}>
+      <TotalLinePrimitive.Title
+        borderBottom={'1px solid var(--x-border-bottom-color)'}
+        style={{
+          '--x-border-bottom-color': isDarkMode
+            ? 'rgba(255, 255, 255, 0.1)'
+            : 'rgb(210, 221, 226)',
+        }}
+      >
         <x.div
           display={'flex'}
           alignItems={'center'}
@@ -82,7 +92,12 @@ export function DiscountTotalLine({
 
       <TotalLinePrimitive.Amount
         textAlign={'right'}
-        borderBottom={'1px solid rgb(210, 221, 226)'}
+        borderBottom={'1px solid var(--x-border-bottom-color)'}
+        style={{
+          '--x-border-bottom-color': isDarkMode
+            ? 'rgba(255, 255, 255, 0.1)'
+            : 'rgb(210, 221, 226)',
+        }}
       >
         {discountAmount}
       </TotalLinePrimitive.Amount>
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
index 5038c081a..73e94a073 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
@@ -23,12 +23,14 @@ import {
 import { PageForm } from '@/components/PageForm';
 import { MoreIcon } from '@/icons/More';
 import { DRAWERS } from '@/constants/drawers';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 /**
  * Invoice floating actions bar.
  */
 export default function InvoiceFloatingActions() {
   const history = useHistory();
+  const isDarkMode = useIsDarkMode();
   const { openDrawer } = useDrawerActions();
 
   // Formik context.
@@ -245,7 +247,7 @@ export default function InvoiceFloatingActions() {
             </Menu>
           }
         >
-          <Button minimal icon={<MoreIcon height={'14px'} width={'14px'} />} />
+          <Button minimal icon={<MoreIcon fill={isDarkMode ? "#fff" : "#000"} height={'14px'} width={'14px'} />} />
         </Popover>
       </Group>
     </PageForm.FooterActions>
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx
index 52a24805f..b22c66861 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx
@@ -82,6 +82,9 @@ export function InvoiceFormFooterRight() {
 }
 
 const InvoiceTotalLines = styled(TotalLines)`
+  --x-color-text: #555;
+  --x-color-text: var(--color-light-gray4);
+
   width: 100%;
-  color: #555555;
+  color: var(--x-color-text);
 `;
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.module.scss b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.module.scss
new file mode 100644
index 000000000..6c0610e71
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.module.scss
@@ -0,0 +1,10 @@
+.root {
+  --color-invoice-form-header-background: #fff;
+  --color-invoice-form-header-border: #d2dce2;
+
+  --color-invoice-form-header-background: var(--color-dark-gray1);
+  --color-invoice-form-header-border: rgba(255, 255, 255, 0.1);
+
+  border-bottom: 1px solid var(--color-invoice-form-header-border);
+  background-color: var(--color-invoice-form-header-background);
+}
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx
index ae63a1012..2295241f4 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx
@@ -4,6 +4,7 @@ import intl from 'react-intl-universal';
 import { Group, PageFormBigNumber } from '@/components';
 import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
 import { useInvoiceTotalFormatted } from './utils';
+import styles from './InvoiceFormHeader.module.scss';
 
 /**
  * Invoice form header section.
@@ -13,9 +14,8 @@ function InvoiceFormHeader() {
     <Group
       position="apart"
       align={'flex-start'}
-      bg="white"
       p="25px 32px"
-      borderBottom="1px solid #d2dce2"
+      className={styles.root}
     >
       <InvoiceFormHeaderFields />
       <InvoiceFormBigTotal />
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
index 86863e1a1..a9c0fa4f2 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
@@ -6,6 +6,7 @@ import { useDrawerActions } from '@/hooks/state';
 import { useInvoiceMailItems, useSendInvoiceFormatArgsOptions } from './_hooks';
 import { SendMailViewToAddressField } from '../../Estimates/SendMailViewDrawer/SendMailViewToAddressField';
 import { SendMailViewMessageField } from '../../Estimates/SendMailViewDrawer/SendMailViewMessageField';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 export function InvoiceSendMailFields() {
   const items = useInvoiceMailItems();
@@ -39,6 +40,7 @@ function InvoiceSendMailFooter() {
   const { isSubmitting } = useFormikContext();
   const { name } = useDrawerContext();
   const { closeDrawer } = useDrawerActions();
+  const isDarkMode = useIsDarkMode();
 
   const handleClose = () => {
     closeDrawer(name);
@@ -48,7 +50,9 @@ function InvoiceSendMailFooter() {
     <Group
       py={'12px'}
       px={'16px'}
-      borderTop="1px solid #d8d8d9"
+      borderTopWidth={1}
+      borderTopStyle="solid"
+      borderTopColor={isDarkMode ? 'rgba(255, 255, 255, 0.2)' : "#d8d8d9"}
       position={'apart'}
     >
       <Group spacing={10} ml={'auto'}>
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeaderPreview.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeaderPreview.tsx
index 7c0541328..f6e99610d 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeaderPreview.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeaderPreview.tsx
@@ -3,17 +3,19 @@ import { x } from '@xstyled/emotion';
 import { Box, Group, Stack } from '@/components';
 import { useSendInvoiceMailForm, useSendInvoiceMailSubject } from './_hooks';
 import { useInvoiceSendMailBoot } from './InvoiceSendMailContentBoot';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 export function InvoiceSendMailHeaderPreview() {
   const mailSubject = useSendInvoiceMailSubject();
   const { invoiceMailState } = useInvoiceSendMailBoot();
   const toAddresses = useMailHeaderToAddresses();
   const fromAddresses = useMailHeaderFromAddresses();
+  const isDarkmode = useIsDarkMode();
 
   return (
     <Stack
-      bg={'white'}
-      borderBottom={'1px solid #dcdcdd'}
+      bg={isDarkmode ? 'var(--color-dark-gray2)' : 'white'}
+      borderBottom={'1px solid var(--color-element-customize-divider)'}
       padding={'22px 30px'}
       spacing={8}
       position={'sticky'}
@@ -46,10 +48,10 @@ export function InvoiceSendMailHeaderPreview() {
           <Stack spacing={2}>
             <Group spacing={2}>
               <Box fontWeight={600}>{invoiceMailState?.companyName} </Box>
-              <Box color={'#738091'}>{fromAddresses}</Box>
+              <Box color={isDarkmode ? 'rgba(255, 255, 255, 0.6)' : '#738091'}>{fromAddresses}</Box>
             </Group>
 
-            <Box fontSize={'sm'} color={'#738091'}>
+            <Box fontSize={'sm'} color={isDarkmode ? 'rgba(255, 255, 255, 0.6)' : '#738091'}>
               Send to: {invoiceMailState?.customerName} {toAddresses};
             </Box>
           </Stack>
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx
index 2cee6c9f7..b687401d1 100644
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx
@@ -40,6 +40,9 @@ export function PaymentReceiveFormFootetRight() {
 }
 
 const PaymentReceiveTotalLines = styled(TotalLines)`
+  --x-color-text: #555;
+  --x-color-text: var(--color-light-gray4);
+
   width: 100%;
-  color: #555555;
+  color: var(--x-color-text);
 `;
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx
index d0596564f..aad641087 100644
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx
@@ -7,18 +7,29 @@ import { FormattedMessage as T } from '@/components';
 
 import { CLASSES } from '@/constants/classes';
 import PaymentReceiveHeaderFields from './PaymentReceiveHeaderFields';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 /**
  * Payment receive form header.
  */
 function PaymentReceiveFormHeader() {
+  const isDarkMode = useIsDarkMode();
+
   return (
     <Group
       position="apart"
       align={'flex-start'}
-      bg="white"
       p="25px 32px"
-      borderBottom="1px solid #d2dce2"
+      bg="var(--x-header-background)"
+      borderBottom="1px solid var(--x-header-border)"
+      style={{
+        '--x-header-background': isDarkMode
+          ? 'var(--color-dark-gray1)'
+          : 'var(--color-white)',
+        '--x-header-border': isDarkMode
+          ? 'rgba(255, 255, 255, 0.1)'
+          : '#d2dce2',
+      }}
     >
       <PaymentReceiveHeaderFields />
       <PaymentReceiveFormBigTotal />
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceivePaymentNoField.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceivePaymentNoField.tsx
index 00b77ac5e..d6f058f75 100644
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceivePaymentNoField.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceivePaymentNoField.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Position, ControlGroup } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
 import * as R from 'ramda';
@@ -23,77 +23,72 @@ export const PaymentReceivePaymentNoField = R.compose(
     paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
   })),
   withDialogActions,
-)(
-  ({
-    // #withDialogActions
-    openDialog,
+)(({
+  // #withDialogActions
+  openDialog,
 
-    // #withSettings
-    paymentReceiveAutoIncrement,
-  }) => {
-    const { values, setFieldValue } = useFormikContext();
+  // #withSettings
+  paymentReceiveAutoIncrement,
+}) => {
+  const { values, setFieldValue } = useFormikContext();
 
-    // Handle click open payment receive number dialog.
-    const handleClickOpenDialog = () => {
-      openDialog('payment-receive-number-form');
-    };
-    // Handle payment number field blur.
-    const handlePaymentNoBlur = (event) => {
-      const newValue = event.target.value;
+  // Handle click open payment receive number dialog.
+  const handleClickOpenDialog = () => {
+    openDialog('payment-receive-number-form');
+  };
+  // Handle payment number field blur.
+  const handlePaymentNoBlur = (event) => {
+    const newValue = event.target.value;
 
-      // Show the confirmation dialog if the value has changed and auto-increment
-      // mode is enabled.
-      if (
-        values.payment_receive_no !== newValue &&
-        paymentReceiveAutoIncrement
-      ) {
-        openDialog('payment-receive-number-form', {
-          initialFormValues: {
-            onceManualNumber: newValue,
-            incrementMode: 'manual-transaction',
-          },
-        });
-      }
-      // Setting the payment number to the form will be manually in case
-      // auto-increment is disable.
-      if (!paymentReceiveAutoIncrement) {
-        setFieldValue('payment_receive_no', newValue);
-        setFieldValue('payment_receive_no_manually', newValue);
-      }
-    };
-    return (
-      <FFormGroup
-        name={'payment_receive_no'}
-        label={<T id={'payment_received_no'} />}
-        inline={true}
-        labelInfo={<FieldRequiredHint />}
-      >
-        <ControlGroup fill={true}>
-          <FInputGroup
-            name={'payment_receive_no'}
-            minimal={true}
-            value={values.payment_receive_no}
-            asyncControl={true}
-            onBlur={handlePaymentNoBlur}
-            onChange={() => {}}
-          />
-          <InputPrependButton
-            buttonProps={{
-              onClick: handleClickOpenDialog,
-              icon: <Icon icon={'settings-18'} />,
-            }}
-            tooltip={true}
-            tooltipProps={{
-              content: (
-                <T id={'setting_your_auto_generated_payment_receive_number'} />
-              ),
-              position: Position.BOTTOM_LEFT,
-            }}
-          />
-        </ControlGroup>
-      </FFormGroup>
-    );
-  },
-);
+    // Show the confirmation dialog if the value has changed and auto-increment
+    // mode is enabled.
+    if (values.payment_receive_no !== newValue && paymentReceiveAutoIncrement) {
+      openDialog('payment-receive-number-form', {
+        initialFormValues: {
+          onceManualNumber: newValue,
+          incrementMode: 'manual-transaction',
+        },
+      });
+    }
+    // Setting the payment number to the form will be manually in case
+    // auto-increment is disable.
+    if (!paymentReceiveAutoIncrement) {
+      setFieldValue('payment_receive_no', newValue);
+      setFieldValue('payment_receive_no_manually', newValue);
+    }
+  };
+  return (
+    <FFormGroup
+      name={'payment_receive_no'}
+      label={<T id={'payment_received_no'} />}
+      inline={true}
+      labelInfo={<FieldRequiredHint />}
+    >
+      <ControlGroup fill={true}>
+        <FInputGroup
+          name={'payment_receive_no'}
+          minimal={true}
+          value={values.payment_receive_no}
+          asyncControl={true}
+          onBlur={handlePaymentNoBlur}
+          onChange={() => {}}
+        />
+        <InputPrependButton
+          buttonProps={{
+            onClick: handleClickOpenDialog,
+            icon: <Icon icon={'settings-18'} />,
+          }}
+          tooltip={true}
+          tooltipProps={{
+            content: (
+              <T id={'setting_your_auto_generated_payment_receive_number'} />
+            ),
+            position: Position.BOTTOM_LEFT,
+          }}
+        />
+      </ControlGroup>
+    </FFormGroup>
+  );
+});
 
 PaymentReceivePaymentNoField.displayName = 'PaymentReceivePaymentNoField';
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailFields.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailFields.tsx
index 8c442e556..440757512 100644
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailFields.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailFields.tsx
@@ -8,6 +8,7 @@ import { SendMailViewToAddressField } from '../../Estimates/SendMailViewDrawer/S
 import { SendMailViewMessageField } from '../../Estimates/SendMailViewDrawer/SendMailViewMessageField';
 import { usePaymentReceivedFormatArgsOptions, } from './_hooks';
 import { useSendMailItems } from '../../Estimates/SendMailViewDrawer/hooks';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 export function PaymentReceivedSendMailFields() {
   const argsOptions = usePaymentReceivedFormatArgsOptions();
@@ -41,6 +42,7 @@ function PaymentReceivedSendMailFooter() {
   const { isSubmitting } = useFormikContext();
   const { name } = useDrawerContext();
   const { closeDrawer } = useDrawerActions();
+  const isDarkMode = useIsDarkMode();
 
   const handleClose = () => {
     closeDrawer(name);
@@ -50,7 +52,9 @@ function PaymentReceivedSendMailFooter() {
     <Group
       py={'12px'}
       px={'16px'}
-      borderTop="1px solid #d8d8d9"
+      borderTopWidth={1}
+      borderTopStyle={'solid'}
+      borderTopColor={isDarkMode ? 'rgba(255, 255, 255, 0.2)' : '#d8d8d9'}
       position={'apart'}
     >
       <Group spacing={10} ml={'auto'}>
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.tsx
index e4b5043fe..d7a6e9d1e 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.tsx
@@ -66,6 +66,9 @@ export function ReceiptFormFooterRight() {
 }
 
 const ReceiptTotalLines = styled(TotalLines)`
+  --x-color-text: #555;
+  --x-color-text: var(--color-light-gray4);
+
   width: 100%;
-  color: #555555;
+  color: var(--x-color-text);
 `;
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx
index 997e4f66f..809c5b985 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx
@@ -4,6 +4,7 @@ import intl from 'react-intl-universal';
 import { Group, PageFormBigNumber } from '@/components';
 import ReceiptFormHeaderFields from './ReceiptFormHeaderFields';
 import { useReceiptTotalFormatted } from './utils';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 
 /**
  * Receipt form header section.
@@ -12,14 +13,24 @@ function ReceiptFormHeader({
   // #ownProps
   onReceiptNumberChanged,
 }) {
+  const isDarkMode = useIsDarkMode();
+
   return (
     <Group
       position="apart"
       align={'flex-start'}
       display="flex"
-      bg="white"
       p="25px 32px"
-      borderBottom="1px solid #d2dce2"
+      bg="var(--x-header-background)"
+      borderBottom="1px solid var(--x-header-border)"
+      style={{
+        '--x-header-background': isDarkMode
+          ? 'var(--color-dark-gray1)'
+          : 'var(--color-white)',
+        '--x-header-border': isDarkMode
+          ? 'rgba(255, 255, 255, 0.1)'
+          : '#d2dce2',
+      }}
     >
       <ReceiptFormHeaderFields
         onReceiptNumberChanged={onReceiptNumberChanged}
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailFormFields.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailFormFields.tsx
index b91ae9c30..99b6335fd 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailFormFields.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailFormFields.tsx
@@ -7,6 +7,7 @@ import { useDrawerActions } from "@/hooks/state";
 import { useDrawerContext } from "@/components/Drawer/DrawerProvider";
 import { useSendReceiptFormatArgsOptions } from "./_hooks";
 import { useSendMailItems } from "../../Estimates/SendMailViewDrawer/hooks";
+import { useIsDarkMode } from "@/hooks/useDarkMode";
 
 export function ReceiptSendMailFormFields() {
   const argsOptions = useSendReceiptFormatArgsOptions();
@@ -40,6 +41,7 @@ function ReceiptSendMailFooter() {
   const { isSubmitting } = useFormikContext();
   const { name } = useDrawerContext();
   const { closeDrawer } = useDrawerActions();
+  const isDarkmode = useIsDarkMode();
 
   const handleClose = () => {
     closeDrawer(name);
@@ -49,7 +51,9 @@ function ReceiptSendMailFooter() {
     <Group
       py={'12px'}
       px={'16px'}
-      borderTop="1px solid #d8d8d9"
+      borderTopWidth={'1px'}
+      borderTopColor={isDarkmode ? 'rgba(255, 255, 255, 0.2)' : '#d8d8d9'}
+      borderTopStyle={'solid'}
       position={'apart'}
     >
       <Group spacing={10} ml={'auto'}>
diff --git a/packages/webapp/src/containers/TransactionsLocking/TransactionsLockingHeader.tsx b/packages/webapp/src/containers/TransactionsLocking/TransactionsLockingHeader.tsx
index 40dd1e736..68b3d707a 100644
--- a/packages/webapp/src/containers/TransactionsLocking/TransactionsLockingHeader.tsx
+++ b/packages/webapp/src/containers/TransactionsLocking/TransactionsLockingHeader.tsx
@@ -102,6 +102,6 @@ const LockAllAlert = styled(Alert)`
   background: transparent;
 
   ${AlertDesc} {
-    color: #1f3255;
+    // color: #1f3255;
   }
 `;
diff --git a/packages/webapp/src/containers/TransactionsLocking/components.tsx b/packages/webapp/src/containers/TransactionsLocking/components.tsx
index f7ae32a54..1b52f6535 100644
--- a/packages/webapp/src/containers/TransactionsLocking/components.tsx
+++ b/packages/webapp/src/containers/TransactionsLocking/components.tsx
@@ -83,7 +83,7 @@ export function TransactionLockingSkeletonList() {
  * Transactions locking skeleton item.
  * @returns {React.JSX}
  */
-export const TransactionLockingItemSkeleton = ({}) => {
+export const TransactionLockingItemSkeleton = ({ }) => {
   return (
     <TransactionLockingWrapp>
       <TransLockingInner>
@@ -329,16 +329,16 @@ const TransactionLockingWrapp = styled.div`
   display: flex;
   align-items: center;
   border-radius: 6px;
-  border: 1px solid #c4d2d7;
+  border: 1px solid var(--color-transaction-locking-item-border);
   padding: 16px 18px;
   margin-bottom: 25px;
-  background: #fff;
+  background: var(--color-transaction-locking-item-background);
   box-shadow: 0 4px 20px -5px rgb(0 8 36 / 5%);
 
   ${(props) =>
     props.isEnabled &&
     `
-    border-color: #fc8483; 
+    border-color: var(--color-transaction-locking-item-enabled-border);
 
     ${TransLockingIcon} {
       color: #ef6d6d;
@@ -364,7 +364,7 @@ const TransLockingItemDesc = styled.p`
 `;
 
 const TransLockingIcon = styled.div`
-  border: 1px solid #d2dde2;
+  border: 1px solid var(--color-transaction-locking-item-icon-border);
   height: 45px;
   width: 45px;
   text-align: center;
diff --git a/packages/webapp/src/hooks/useDarkMode.ts b/packages/webapp/src/hooks/useDarkMode.ts
new file mode 100644
index 000000000..bc8787d10
--- /dev/null
+++ b/packages/webapp/src/hooks/useDarkMode.ts
@@ -0,0 +1,3 @@
+export const useIsDarkMode = () => {
+  return true;
+};
diff --git a/packages/webapp/src/icons/More.tsx b/packages/webapp/src/icons/More.tsx
index 25445daab..90b84ef98 100644
--- a/packages/webapp/src/icons/More.tsx
+++ b/packages/webapp/src/icons/More.tsx
@@ -18,9 +18,9 @@ export const MoreIcon: React.FC<MoreIconProps> = ({ size = 16, ...props }) => (
     {...props}
   >
     <g id="more_3_">
-      <circle cx="2" cy="8.03" r="2" />
-      <circle cx="14" cy="8.03" r="2" />
-      <circle cx="8" cy="8.03" r="2" />
+      <circle fill="currentColor" cx="2" cy="8.03" r="2" />
+      <circle fill="currentColor" cx="14" cy="8.03" r="2" />
+      <circle fill="currentColor" cx="8" cy="8.03" r="2" />
     </g>
   </svg>
 );
diff --git a/packages/webapp/src/icons/StripeLogo.tsx b/packages/webapp/src/icons/StripeLogo.tsx
index d8f5b8418..7f0e118f1 100644
--- a/packages/webapp/src/icons/StripeLogo.tsx
+++ b/packages/webapp/src/icons/StripeLogo.tsx
@@ -22,7 +22,7 @@ export const StripeLogo: React.FC<StripeLogoProps> = ({
       fillRule="evenodd"
       clipRule="evenodd"
       d="M69.6155 15.5857C69.6155 10.7127 67.2309 6.86761 62.6732 6.86761C58.0963 6.86761 55.3271 10.7127 55.3271 15.5476C55.3271 21.2771 58.5963 24.1705 63.2886 24.1705C65.5771 24.1705 67.3078 23.6565 68.6155 22.9332V19.1262C67.3078 19.7734 65.8078 20.1731 63.904 20.1731C62.0386 20.1731 60.3848 19.5259 60.1732 17.2798H69.5771C69.5771 17.0323 69.6155 16.0425 69.6155 15.5857ZM60.1155 13.7773C60.1155 11.6264 61.4425 10.7317 62.654 10.7317C63.8271 10.7317 65.0771 11.6264 65.0771 13.7773H60.1155ZM47.904 6.86761C46.0194 6.86761 44.8078 7.74322 44.1348 8.35234L43.8848 7.17217H39.654V29.367L44.4617 28.3582L44.4809 22.9712C45.1732 23.4662 46.1925 24.1705 47.8848 24.1705C51.3271 24.1705 54.4617 21.4294 54.4617 15.3953C54.4425 9.87514 51.2694 6.86761 47.904 6.86761ZM46.7502 19.9827C45.6155 19.9827 44.9425 19.583 44.4809 19.0881L44.4617 12.0261C44.9617 11.4741 45.654 11.0934 46.7502 11.0934C48.5002 11.0934 49.7117 13.035 49.7117 15.5285C49.7117 18.0792 48.5194 19.9827 46.7502 19.9827ZM33.0386 5.74454L37.8655 4.71665V0.852539L33.0386 1.8614V5.74454ZM33.0386 7.1912H37.8655V23.8469H33.0386V7.1912ZM27.8655 8.5998L27.5578 7.1912H23.404V23.8469H28.2117V12.5591C29.3463 11.0934 31.2694 11.3599 31.8655 11.5693V7.1912C31.2502 6.96278 29.0002 6.54401 27.8655 8.5998ZM18.2502 3.0606L13.5578 4.05042L13.5386 19.2975C13.5386 22.1147 15.6732 24.1895 18.5194 24.1895C20.0963 24.1895 21.2502 23.904 21.8848 23.5613V19.6972C21.2694 19.9447 18.2309 20.8203 18.2309 18.0031V11.2457H21.8848V7.1912H18.2309L18.2502 3.0606ZM5.25015 12.0261C5.25015 11.2837 5.86554 10.9982 6.88477 10.9982C8.34631 10.9982 10.1925 11.436 11.654 12.2165V7.74322C10.0578 7.11506 8.48092 6.86761 6.88477 6.86761C2.98092 6.86761 0.384766 8.88532 0.384766 12.2545C0.384766 17.5082 7.69246 16.6706 7.69246 18.9358C7.69246 19.8114 6.92323 20.097 5.8463 20.097C4.25015 20.097 2.21169 19.4498 0.596304 18.5742V23.1045C2.38477 23.8659 4.19246 24.1895 5.8463 24.1895C9.8463 24.1895 12.5963 22.2289 12.5963 18.8216C12.5771 13.1492 5.25015 14.158 5.25015 12.0261Z"
-      fill="#0A2540"
+      fill="currentColor"
     />
   </svg>
 );
diff --git a/packages/webapp/src/style/App.scss b/packages/webapp/src/style/App.scss
index 0d6ee076c..ae15825c5 100644
--- a/packages/webapp/src/style/App.scss
+++ b/packages/webapp/src/style/App.scss
@@ -40,6 +40,8 @@
 
 .App {
   min-width: 1100px;
+  min-height: 100vh;
+  background-color: $app-bg;
 }
 
 // =======
@@ -254,7 +256,7 @@ html[lang^='ar'] {
 }
 
 .bp4-drawer {
-  border-left: 1px solid #00115e;
+  border-left: 1px solid var(--color-drawer-border-left);
 }
 
 .drawer-portal {
diff --git a/packages/webapp/src/style/_variables.scss b/packages/webapp/src/style/_variables.scss
index 55e071a6f..ade67159e 100644
--- a/packages/webapp/src/style/_variables.scss
+++ b/packages/webapp/src/style/_variables.scss
@@ -1,14 +1,446 @@
-@import "@blueprintjs/colors/lib/scss/colors";
+@import '@blueprintjs/colors/lib/scss/colors';
 @import '@blueprintjs/core/src/common/variables';
 
 $ns: bp4;
 
-$pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
-  0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
+:root {
+  --color-primary: #8abbff;
+  --color-danger: red;
+
+  --color-dark-gray5: #404854;
+  --color-dark-gray4: #383e47;
+  --color-dark-gray3: #2f343c;
+  --color-dark-gray2: #252a31;
+  --color-dark-gray1: #1c2127;
+
+  --color-light-gray1: #d3d8de;
+  --color-light-gray2: #dce0e5;
+  --color-light-gray3: #e5e8eb;
+  --color-light-gray4: #edeff2;
+  --color-light-gray5: #f6f7f9;
+
+  --color-white: #fff;
+  --color-black: #000;
+
+  --color-muted-text: #abb3bf;
+
+  // Alerts
+  --color-alert-default-background: transparent;
+  --color-alert-default-description-text: var(--color-light-gray4);
+  --color-alert-default-title-text: var(--color-light-gray2);
+
+  // Alert danger.
+  --color-alert-danger-background: transparent;
+  --color-alert-danger-border: #2d72d2;
+  --color-alert-danger-description-text: var(--color-light-gray1);
+  --color-alert-danger-title-text: #8abbff;
+
+  // Alert primary
+  --color-alert-primary-background: transparent;
+  --color-alert-primary-border: #2d72d2;
+  --color-alert-primary-title-text: #8abbff;
+  --color-alert-primary-description-text: var(--color-light-gray1);
+
+  // Background
+  --color-ui-background-primary: var(--color-base-sand-0);
+  --color-ui-background-secondary: var(--color-base-sand-10);
+  --color-ui-background-tertiary: var(--color-base-sand-20);
+
+  // Input
+  --color-ui-input-border: #ced4da;
+  --color-ui-input-border: rgba(255, 255, 255, 0.15);
+
+  --color-ui-input-background: rgba(17, 20, 24, 0.3);
+
+  --color-ui-input-group-prepend-background: #e9ecef;
+  --color-ui-input-group-prepend-color: #495057; 
+  --color-ui-input-group-prepend-border: #ced4da;
+
+  --color-ui-input-group-prepend-background: var(--color-dark-gray3);
+  --color-ui-input-group-prepend-color: rgba(255, 255, 255, 0.6); 
+  --color-ui-input-group-prepend-border: rgba(255, 255, 255, 0.15);
+
+  --color-ui-html-select-background: #fff;
+  --color-ui-html-select-border: #ced4da;
+
+  --color-ui-menu-select-item-hover-background: #edeff2;
+  --color-ui-menu-select-item-hover-background: rgba(143, 153, 168, .15);
+  --color-ui-menu-select-item-active-background: var(--color-primary);
+
+  // # Splash screen.
+  --color-splash-screen-background: #fff;
+  --color-splash-screen-background: var(--color-dark-gray1);
+
+  // # Sidebar.
+  --color-sidebar-toggle: #6b8193;
+  --color-sidebar-toggle: rgba(255, 255, 255, 0.5);
+  --color-sidebar-background: var(--color-dark-gray3);
+  --color-sidebar-text: var(--color-white);
+  --color-sidebar-scrollbars-background: rgba(255, 255, 255, 0.25);
+  --color-sidebar-menu-item-text: #ffff;
+  --color-sidebar-menu-item-hover-background: var(--color-dark-gray5);
+  --color-sidebar-menu-item-text-hover: #fff;
+  --color-sidebar-menu-item-active-background: var(--color-dark-gray5);
+  --color-sidebar-menu-item-active-text: #fff;
+  --color-sidebar-menu-item-focus-background: #01143e;
+  --color-sidebar-menu-label-color: rgba(255, 255, 255, 0.4);
+
+  // Sidebar overlay.
+  --color-sidebar-overlay-background: var(--color-dark-gray5);
+  --color-sidebar-overlay-hover-background: var(--color-dark-gray3);
+  --color-sidebar-overlay-item-text: var(--color-white);
+  --color-sidebar-overlay-item-hover-text: var(--color-white);
+  --color-sidebar-overlay-divider-background: rgba(255, 255, 255, 0.15);
+  --color-sidebar-overlay-label-text: rgba(255, 255, 255, 0.5);
+  --color-sidebar-overlay-label-border: var(
+    --color-sidebar-overlay-divider-background
+  );
+  --color-sidebar-overlay-backdrop: rgba(17, 20, 24, 0.25);
+}
+
+.bp4-dark :root {
+  --color-primary: #8abbff;
+  --color-danger: red;
+
+  --color-dark-gray5: #404854;
+  --color-dark-gray4: #383e47;
+  --color-dark-gray3: #2f343c;
+  --color-dark-gray2: #252a31;
+  --color-dark-gray1: #1c2127;
+
+  --color-light-gray1: #d3d8de;
+  --color-light-gray2: #dce0e5;
+  --color-light-gray3: #e5e8eb;
+  --color-light-gray4: #edeff2;
+  --color-light-gray5: #f6f7f9;
+
+  --color-white: #fff;
+  --color-black: #000;
+
+  --color-muted-text: #abb3bf;
+
+  // Alerts
+  --color-alert-default-background: transparent;
+  --color-alert-default-description-text: var(--color-light-gray4);
+  --color-alert-default-title-text: var(--color-light-gray2);
+
+  --color-alert-danger-background: transparent;
+  --color-alert-danger-border: #2d72d2;
+  --color-alert-danger-description-text: var(--color-light-gray1);
+  --color-alert-danger-title-text: #8abbff;
+
+  --color-alert-primary-background: transparent;
+  --color-alert-primary-border: #2d72d2;
+  --color-alert-primary-title-text: #8abbff;
+  --color-alert-primary-description-text: var(--color-light-gray1);
+
+  // Background
+  --color-ui-background-primary: var(--color-base-sand-0);
+  --color-ui-background-secondary: var(--color-base-sand-10);
+  --color-ui-background-tertiary: var(--color-base-sand-20);
+
+  // Input
+  --color-ui-input-border: #ced4da;
+  --color-ui-input-border: rgba(255, 255, 255, 0.15);
+
+  --color-ui-input-background: rgba(17, 20, 24, 0.3);
+
+  --color-ui-input-group-prepend-background: #e9ecef;
+  --color-ui-input-group-prepend-color: #495057; 
+  --color-ui-input-group-prepend-border: #ced4da;
+
+  --color-ui-input-group-prepend-background: var(--color-dark-gray3);
+  --color-ui-input-group-prepend-color: rgba(255, 255, 255, 0.6); 
+  --color-ui-input-group-prepend-border: rgba(255, 255, 255, 0.15);
+
+  --color-ui-html-select-background: #fff;
+  --color-ui-html-select-border: #ced4da;
+
+  --color-ui-menu-select-item-hover-background: #edeff2;
+  --color-ui-menu-select-item-hover-background: rgba(143, 153, 168, .15);
+  --color-ui-menu-select-item-active-background: var(--color-primary);
+
+  // Splash screen.
+  --color-splash-screen-background: #fff;
+  --color-splash-screen-background: var(--color-dark-gray1);
+
+  // Main Dashboard.
+  --color-dashboard-insider-background: var(--color-dark-gray1);
+  --color-dashboard-topbar-background: var(--color-dark-gray1);
+  --color-dashboard-topbar-border-color: transparent;
+  --color-dashboard-datatable-background: var(--color-dark-gray1);
+  --color-dashboard-datatable-border: var(--color-dark-gray3);
+
+  // Dashboard error boundary.
+  --color-dashboard-error-boundary-title-text: #2c3a5d;
+  --color-dashboard-error-boundary-description-text: #1f3255;
+
+  --color-dashboard-error-boundary-title-text: rgba(255, 255, 255, 0.75);
+  --color-dashboard-error-boundary-description-text: rgba(255, 255, 255, 0.6);
+  --color-dashboard-error-boundary-logo: #a1afca;
+  --color-dashboard-error-boundary-logo: rgba(255, 255, 255, 0.45);
+
+  --color-dashboard-navbar-background: var(--color-dark-gray1);
+  --color-dashboard-navbar-item-text: var(--color-light-gray3);
+
+  --color-dashboard-navbar-item-hover-text: #32304a;
+  --color-dashboard-navbar-item-hover-background: rgba(167, 182, 194, 0.12);
+
+  --color-dashboard-navbar-item-hover-text: var(--color-light-gray5);
+  --color-dashboard-navbar-item-hover-background: var(--color-dark-gray3);
+  
+  --color-dashboard-navbar-item-active-text: #32304a;
+  --color-dashboard-navbar-item-active-background: #a7b6c21f;
+
+  --color-dashboard-navbar-item-active-text: var(--color-light-gray5);
+  --color-dashboard-navbar-item-active-background: var(--color-dark-gray3);
+
+  --color-dashboard-navbar-item-icon: #32304a;
+  
+  --color-dashboard-topbar-title-text: var(--color-white);
+
+  --color-dashboard-actionsbar-border: var(--color-dark-gray4);
+  --color-dashboard-actionsbar-divider: rgba(255, 255, 255, 0.2);
+
+  // Datatable
+  --color-datatable-head-background: var(--color-dark-gray3);
+  --color-datatable-head-text: var(--color-white);
+  --color-datatable-head-border: var(--color-dark-gray4);
+  --color-datatable-cell-hover-background: var(--color-dark-gray3);
+  --color-datatable-cell-border: var(--color-dark-gray4);
+  --color-datatable-cell-focus-border: rgba(0, 82, 204, 0.7);
+  --color-datatable-cell-focus-border: var(--color-primary);
+  --color-datatable-no-results-text: #777;
+  --color-datatable-no-results-text: rgba(255, 255, 255, 0.5);
+
+  --color-datatable-caret: rgba(255, 255, 255, 0.25);
+  --color-datatable-caret-hover: rgba(255, 255, 255, 0.25);
+
+  // Sidebar
+  --color-sidebar-toggle: #6b8193;
+  --color-sidebar-toggle: rgba(255, 255, 255, 0.5);
+  --color-sidebar-background: var(--color-dark-gray3);
+  --color-sidebar-text: var(--color-white);
+  --color-sidebar-scrollbars-background: rgba(255, 255, 255, 0.25);
+
+  --color-sidebar-menu-item-text: #ffff;
+
+  --color-sidebar-menu-item-hover-background: var(--color-dark-gray5);
+  --color-sidebar-menu-item-text-hover: #fff;
+
+  --color-sidebar-menu-item-active-background: var(--color-dark-gray5);
+  --color-sidebar-menu-item-active-text: #fff;
+
+  --color-sidebar-menu-item-focus-background: #01143e;
+  --color-sidebar-menu-label-color: rgba(255, 255, 255, 0.4);
+
+  // Sidebar overlay
+  --color-sidebar-overlay-background: var(--color-dark-gray5);
+  --color-sidebar-overlay-hover-background: var(--color-dark-gray3);
+  --color-sidebar-overlay-item-text: var(--color-white);
+  --color-sidebar-overlay-item-hover-text: var(--color-white);
+  --color-sidebar-overlay-divider-background: rgba(255, 255, 255, 0.15);
+  --color-sidebar-overlay-label-text: rgba(255, 255, 255, 0.5);
+  --color-sidebar-overlay-label-border: var(
+    --color-sidebar-overlay-divider-background
+  );
+  --color-sidebar-overlay-backdrop: rgba(17, 20, 24, 0.25);
+
+  --color-financial-report-background: var(--color-dark-gray2);
+
+  --color-datatable-text: var(--color-white);
+
+  --color-datatable-constrant-text: var(--color-light-gray2);
+  --color-datatable-constrant-cell-border: var(--color-dark-gray5);
+
+  --color-datatable-constrant-head-text: var(--color-light-gray2);
+  --color-datatable-constrant-head-border: var(--color-dark-gray5);
+
+  --color-card-background: var(--color-dark-gray4);
+  --color-card-border: #d2dce2;
+  --color-card-border: rgba(255, 255, 255, 0.2);
+
+  // Bank accounts.
+  --color-bank-account-card-background: var(--color-card-background);
+  --color-bank-account-card-text: var(--color-light-gray5);
+  --color-bank-account-card-border: #c8cad0;
+  --color-bank-account-card-border: rgba(255, 255, 255, 0.2);
+  --color-bank-account-card-hover-border: #0153cc;
+
+  --color-bank-account-card-tag-background: rgb(223, 225, 230);
+  --color-bank-account-card-tag-background: rgba(255, 255, 255, 0.2);
+
+  --color-bank-account-code-text: rgb(23, 43, 77);
+  --color-bank-account-code-text: var(--color-muted-text);
+
+  --color-bank-transactions-details-bar-background: var(--color-dark-gray1);
+  --color-bank-transactions-details-bar-text: var(--color-light-gray2);
+  --color-bank-transactions-details-bar-divider: var(--color-dark-gray5);
+
+  --color-bank-transactions-content-background: #fff;
+  --color-bank-transactions-content-background: var(--color-dark-gray1);
+
+  --color-bank-transactions-content-border: #f0f0f0;
+  --color-bank-transactions-content-border: var(--color-dark-gray2);
+
+  // Bank account transactions.
+  --color-bank-transactions-datatable-card-background: var(--color-dark-gray1);
+  --color-bank-transactions-datatable-card-border: #f0f0f0;
+
+  --color-bank-transaction-matching-aside: red;
+  --color-bank-transaction-matching-divider: var(--color-dark-gray4);
+  --color-bank-transaction-matching-aside-header: var(--white);
+  --color-bank-transaction-matching-aside-header: var(--color-dark-gray1);
+  --color-bank-transaction-matching-aside-footer: var(--color-dark-gray1);
+
+  --color-sidebar-preferences-background: var(--color-dark-gray1);
+  --color-sidebar-preferences-border: #c6d0d9;
+  --color-sidebar-preferences-border: rgba(255, 255, 255, 0.25);
+
+  // Sidebar preferences. 
+  --color-sidebar-preferences-item-background: transparent;
+  --color-sidebar-preferences-item-text: #fff;
+
+  --color-sidebar-preferences-item-hover-background: var(--color-dark-gray4);
+  --color-sidebar-preferences-item-hover-text: #fff;
+
+  --color-preferences-sidebar-head-border: #bbcbd0;
+  --color-preferences-sidebar-head-text: #3b3b4c;
+
+  --color-preferences-sidebar-head-border: rgba(255, 255, 255, 0.25);
+  --color-preferences-sidebar-head-text: rgba(255, 255, 255, 0.85);
+
+  --color-preferences-topbar-background: var(--color-dark-gray1);
+  --color-preferences-topbar-border: var(--color-dark-gray3);
+  --color-preferences-topbar-title: rgba(255, 255, 255, 0.85);
+
+  --color-preferences-content-background: var(--color-dark-gray2);
+
+  // Financial sheet.
+  --color-financial-sheet-card-border: var(--color-dark-gray5);
+  --color-financial-sheet-title-text: var(--color-light-gray1);
+  --color-financial-sheet-type-text: var(--color-light-gray1);
+  --color-financial-sheet-date-text: var(--color-light-gray1);
+  --color-financial-sheet-footer-text: var(--color-light-gray1);
+  --color-financial-sheet-minimal-title-text: var(--color-white);
+
+  // Transaction locking.
+  --color-transaction-locking-item-background: var(--color-dark-gray2);
+  --color-transaction-locking-item-border: var(--color-dark-gray3);
+  --color-transaction-locking-item-icon-border: var(--color-dark-gray5);
+  --color-transaction-locking-item-enabled-border: var(--color-dark-gray5);
+
+  // Reports items.
+  --color-report-section-title-text: var(var(--color-light-gray1));
+  --color-report-item-background: var(--color-dark-gray3);
+  --color-report-item-border: var(--color-dark-gray5);
+  --color-report-item-top-border: var(--color-dark-gray5);
+  --color-report-item-text: var(--color-light-gray2);
+
+  --color-financial-report-drawer-tab-text: var(--color-light-gray3);
+
+  --color-element-customize-header-background: var(--color-dark-gray2);
+  --color-element-customize-header-title-text: var(--color-light-gray4);
+
+  --color-element-customize-background: var(--color-dark-gray2);
+  --color-element-customize-preview-background: var(--color-dark-gray5);
+
+  --color-element-customize-header-tabs-background: var(--color-dark-gray2);
+  --color-ekement-customize-header-tabs-text: #5f6b7c;
+  --color-ekement-customize-header-tabs-text: var(--color-muted-text);
+
+  --color-element-customize-divider: var(--color-dark-gray5);
+
+  // Universal search
+  --color-universal-search-background: var(--color-dark-gray3);
+  --color-universal-search-footer-divider: var(--color-dark-gray4);
+  --color-universal-search-tag-background: #708392;
+  --color-universal-search-tag-background: var(--color-dark-gray4);
+  --color-universal-search-menu-border: #d3dce2;
+  --color-universal-search-menu-border: rgba(255, 255, 255, 0.15);
+
+  --color-datatable-empty-status-title: #2c3a5d;
+  --color-datatable-empty-status-description: #1f3255;
+
+  --color-datatable-empty-status-title: var(--color-light-gray4);
+  --color-datatable-empty-status-description: var(--color-light-gray5);
+
+  --color-content-tab-background: var(--color-dark-gray4);
+
+  --color-content-tab-border: #e1e2e8;
+  --color-content-tab-border: rgba(255, 255, 255, 0.15);
+
+  --color-content-tab-hover-border: rgba(255, 255, 255, 0.3);
+  --color-content-tab-active-border: var(--color-primary);
+
+  --color-content-tab-text: #2f343c;
+  --color-content-tab-text: var(--color-light-gray1);
+
+  --color-content-tab-active-text: #1552c8;
+  --color-content-tab-active-text: var(--color-light-gray1);
+
+  --color-aside-background: #fff;
+  --color-aside-background: var(--color-dark-gray2);
+
+  --color-aside-title-background: #fff;
+  --color-aside-title-background: var(--color-dark-gray1);
+
+  --color-aside-divider: #E1E2E9;
+  --color-aside-divider: var(--color-dark-gray5);
+
+  --color-app-shell-divider: var(--color-dark-gray5);
+
+  --color-select-button-background: #fff;
+  --color-select-button-border: #fff; 
+
+  --color-stepper-step-background: #9e9e9e;
+  --color-stepper-step-active-background: rgb(0, 82, 204);
+  --color-stepper-separator: #c5cbd3;
+  --color-stepper-step-text: #fff;
+
+  --color-stepper-step-title-text: #738091;
+  --color-stepper-step-title-active-text: var(--color-primary);
+
+  --color-stepper-step-description-text: #738091;
+  --color-stepper-step-description-active-text: var(--color-primary);
+
+  --color-stepper-step-title-text: var(--color-light-gray1);
+  --color-stepper-step-title-active-text: var(--color-primary);
+
+  --color-stepper-step-description-text: var(--color-light-gray1);
+  --color-stepper-step-description-active-text: var(--color-primary);
+
+  --color-stepper-step-background: var(--color-dark-gray4);
+  --color-stepper-step-active-background: var(--color-dark-gray5);
+  --color-stepper-separator: var(--color-dark-gray4);
+  --color-stepper-step-text: #fff;  
+
+  --color-drawer-border-left: var(--color-primary);
+  --color-drawer-border-left: transparent;
+
+  --color-drawer-header-background: #fff;
+  --color-drawer-header-background: transparent;
+
+  --color-drawer-header-border: rgba(255, 255, 255, 0.2);
+
+  --color-drawer-header-text: #354152;
+  --color-drawer-header-text: #fff;
+
+  --color-drawer-insider-background: #fbfbfb;
+  --color-drawer-insider-background: transparent;
+  --color-drawer-tabs-background: #fff;
+  --color-drawer-tabs-background: transparent;
+}
+
+$pt-popover-box-shadow:
+  0 0 0 1px rgba(16, 22, 26, 0.02),
+  0 2px 4px rgba(16, 22, 26, 0.1),
+  0 8px 24px rgba(16, 22, 26, 0.1);
 
 $blue1: #0069ff;
 $blue2: #0052ff;
 $blue3: rgb(0, 82, 204);
+
 $pt-link-color: $blue3;
 $pt-intent-primary: $blue1;
 $menu-item-color-hover: $light-gray4;
@@ -17,9 +449,19 @@ $menu-item-color-active: $light-gray3;
 $breadcrumbs-collapsed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#6B8193' enable-background='new 0 0 16 16' xml:space='preserve'><g><circle cx='2' cy='8.03' r='2'/><circle cx='14' cy='8.03' r='2'/><circle cx='8' cy='8.03' r='2'/></g></svg>");
 
 $sidebar-zindex: 16;
-$pt-font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont,
-  Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue,
-  Icons16, sans-serif;
+$pt-font-family:
+  'Noto Sans',
+  -apple-system,
+  BlinkMacSystemFont,
+  Segoe UI,
+  Roboto,
+  Oxygen,
+  Ubuntu,
+  Cantarell,
+  Open Sans,
+  Helvetica Neue,
+  Icons16,
+  sans-serif;
 
 $button-box-shadow: 0 0 0 !default;
 $button-box-shadow-active: 0 0 0 !default;
@@ -30,13 +472,15 @@ $button-background-color-disabled: #e9ecef !default;
 $button-background-color: #e6effb !default;
 $button-background-color-hover: #cfdcee !default;
 
-$sidebar-background: #01115e;
-$sidebar-text-color: #fff;
+$app-bg: var(--color-dark-gray1);
+
+$sidebar-background: var(--color-sidebar-background);
+$sidebar-text-color: var(--sidebar-text-color);
 $sidebar-width: 100%;
-$sidebar-menu-item-color: rgb(255, 255, 255);
-$sidebar-menu-item-color-active: rgb(255, 255, 255);
+$sidebar-menu-item-color: var(--color-sidebar-menu-item-color);
+$sidebar-menu-item-color-active: var(--color-sidebar-menu-item-active-color);
 $sidebar-popover-submenu-bg: rgb(1, 20, 62);
-$sidebar-menu-label-color: rgba(255, 255, 255, 0.5);
+$sidebar-menu-label-color: var(--color-sidebar-menu-label-color);
 $sidebar-submenu-item-color: rgba(255, 255, 255, 0.85);
 $sidebar-submenu-item-hover-color: rgb(255, 255, 255);
 $sidebar-logo-opacity: 0.5;
@@ -55,4 +499,9 @@ $zindex-toast: 40;
 $control-checked-background-color: #0069ff !default;
 $control-checked-background-color-hover: #0069ff !default;
 $control-checked-background-color-active: #0069ff !default;
-$control-box-shadow: inset 0 0 0 1px #666 !default;
\ No newline at end of file
+$control-box-shadow: inset 0 0 0 1px #666 !default;
+
+// Drawer
+$drawer-background-color: $white !default;
+$dark-drawer-background-color: $dark-gray2 !default;
+
diff --git a/packages/webapp/src/style/components/BigAmount.scss b/packages/webapp/src/style/components/BigAmount.scss
index 034b5f6b6..df9f4276a 100644
--- a/packages/webapp/src/style/components/BigAmount.scss
+++ b/packages/webapp/src/style/components/BigAmount.scss
@@ -1,9 +1,15 @@
 
 .big-amount{
+  --x-color-amount-text: #343463;
+  --x-color-label-text: #5d6f90;
+
+  --x-color-label-text: var(--color-light-gray1);
+  --x-color-amount-text: var(--color-light-gray2);
+
   text-align: right;
 
   &__label{
-    color: #5d6f90;
+    color: var(--x-color-label-text);
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: 14px;
@@ -14,7 +20,7 @@
     white-space: nowrap;
     font-weight: 500;
     margin-top: 6px;
-    color: #343463;
+    color: var(--x-color-amount-text);
     line-height: 1;
     font-size: 34px;
   }
diff --git a/packages/webapp/src/style/components/BigcapitalLoading.scss b/packages/webapp/src/style/components/BigcapitalLoading.scss
index c387b5b13..47f776325 100644
--- a/packages/webapp/src/style/components/BigcapitalLoading.scss
+++ b/packages/webapp/src/style/components/BigcapitalLoading.scss
@@ -5,7 +5,7 @@
   width: 100%;
   position: fixed;
   display: flex;
-  background: #fff;
+  background: var(--color-splash-screen-background);
   z-index: $zindex-dashboard-splash-screen;
 
   .center {
diff --git a/packages/webapp/src/style/components/DataTable/DataTable.scss b/packages/webapp/src/style/components/DataTable/DataTable.scss
index a96d7a003..e24ef2d74 100644
--- a/packages/webapp/src/style/components/DataTable/DataTable.scss
+++ b/packages/webapp/src/style/components/DataTable/DataTable.scss
@@ -8,7 +8,7 @@
     border-spacing: 0;
     min-width: 100%;
     display: block;
-    color: #101219;
+    // color: #101219;
 
     .thead .thead-inner,
     .tbody .tbody-inner {
@@ -20,11 +20,11 @@
 
       .th {
         padding: 0.68rem 0.5rem;
-        background: #f5f5f5;
+        background: var(--color-datatable-head-background);
         font-size: 14px;
-        color: #424853;
+        color: var(--color-datatable-head-text);
         font-weight: 400;
-        border-bottom: 1px solid #d2dde2;
+        border-bottom: 1px solid var(--color-datatable-head-border);
 
         > div {
           overflow: hidden;
@@ -61,7 +61,7 @@
 
       &:last-child {
         .td {
-          border-bottom: 0;
+          border-bottom-width: 0;
         }
       }
 
@@ -116,7 +116,7 @@
         .inner-resizer {
           height: 100%;
           width: 1px;
-          border-left: 1px solid #e6e6e6;
+          border-left: 1px solid var(--color-datatable-head-border);
           margin: 0 auto;
         }
 
@@ -135,12 +135,15 @@
         }
       }
 
-      .bp4-control.bp4-checkbox input:not(:checked):not(:indeterminate) ~ .bp4-control-indicator{
-        box-shadow: inset 0 0 0 1px #C5CBD3;
+      .bp4-control.bp4-checkbox
+        input:not(:checked):not(:indeterminate)
+        ~ .bp4-control-indicator {
+        // box-shadow: inset 0 0 0 1px #c5cbd3;
       }
 
       .skeleton {
-        animation: skeleton-fade-in 0.3s linear forwards,
+        animation:
+          skeleton-fade-in 0.3s linear forwards,
           skeleton-glow 1s linear infinite alternate;
 
         animation-delay: 0s, 0.3s;
@@ -175,15 +178,14 @@
       overflow: auto;
 
       .tbody-inner {
-        >.loading {
+        > .loading {
           padding-top: 40px;
         }
       }
 
       .tr .td {
-        border-bottom: 1px solid #ececec;
+        border-bottom: 1px solid var(--color-datatable-cell-border);
         align-items: center;
-        
 
         .placeholder {
           color: #a0a0a0;
@@ -206,13 +208,13 @@
           }
         }
         &:focus {
-          outline: 1px solid rgba(0, 82, 204, 0.7);
+          outline: 1px solid var(--color-datatable-cell-focus-border);
           outline-offset: -1px;
         }
       }
 
       .tr:hover .td {
-        background: #f3f7fc;
+        background: var(--color-datatable-cell-hover-background);
       }
 
       .tr.is-context-menu-active .td {
@@ -244,10 +246,10 @@
         .td {
           flex-direction: column;
           padding: 18px 20px;
-          color: #777;
+          color: var(--color-datatable-no-results-text);
           align-items: center;
           font-size: 14px;
-          border-bottom: 0;
+          border-bottom-width: 0;
 
           &:hover {
             background: transparent;
@@ -255,7 +257,7 @@
         }
       }
 
-      >.loading {
+      > .loading {
         padding-top: 50px;
       }
     }
@@ -276,9 +278,9 @@
           height: 0;
           border-top: 5px solid transparent;
           border-bottom: 5px solid transparent;
-          border-left: 8px solid #acacac;
+          border-left: 8px solid var(--color-datatable-caret);
           display: block;
-          transition: all 0.1s cubic-bezier(.4, 1, .75, .9);
+          transition: all 0.1s cubic-bezier(0.4, 1, 0.75, 0.9);
 
           &.is-expanded {
             transform: rotate(90deg);
@@ -287,7 +289,7 @@
 
         &:hover {
           .expand-arrow {
-            border-left-color: #7d8593;
+            border-left-color: var(--color-datatable-caret-hover);
           }
         }
       }
@@ -299,7 +301,6 @@
     }
 
     &-size {
-
       &--medium {
         .tbody .tr {
           background-size: red;
@@ -334,7 +335,6 @@
   }
 
   &.has-sticky {
-
     .thead,
     .tfoot {
       position: sticky;
@@ -358,9 +358,11 @@
       position: sticky;
     }
 
-    [data-sticky-last-left-td] {}
+    [data-sticky-last-left-td] {
+    }
 
-    [data-sticky-first-right-td] {}
+    [data-sticky-first-right-td] {
+    }
   }
 
   &.has-virtualized-rows {
@@ -378,25 +380,24 @@
 .table-constrant,
 .table--constrant {
   .table {
-    color: #000;
-
     .thead {
       .tr:first-of-type .th {
-        border-top: 1px solid #000000;
+        border-top: 1px solid var(--color-datatable-constrant-head-border);
       }
     }
-
     .thead .th {
-      background: #fff;
-      color: #000;
-      border-bottom: 1px solid #000000;
+      background: transparent;
+      color: var(--color-datatable-constrant-head-text);
+      border-bottom: 1px solid var(--color-datatable-constrant-head-border);
       padding: 0.5rem;
     }
-
+    
     .tbody .tr .td {
-      background: #fff;
+      background: transparent;
       padding: 0.5rem 0.5rem;
-      border-bottom: 0;
+      border-bottom-width: 0;
+      color: var(--color-datatable-constrant-text);
+      border-color: var(--color-datatable-constrant-cell-border);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss b/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss
index 928b44442..458997547 100644
--- a/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss
+++ b/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss
@@ -7,7 +7,7 @@
 
   &_title {
     font-size: 20px;
-    color: #2c3a5d;
+    color: var(--color-datatable-empty-status-title);
     font-weight: 600;
     margin-left: auto;
     margin-bottom: 10px;
@@ -21,7 +21,7 @@
   }
   &_desc {
     font-size: 16px;
-    color: #1f3255;
+    color: var(--color-datatable-empty-status-description);
     opacity: 0.8;
     line-height: 1.6;
   }
diff --git a/packages/webapp/src/style/components/Details.scss b/packages/webapp/src/style/components/Details.scss
index 16495a04d..9341df0a6 100644
--- a/packages/webapp/src/style/components/Details.scss
+++ b/packages/webapp/src/style/components/Details.scss
@@ -1,4 +1,6 @@
 .details-menu {
+  --color-detail-item-label: #727983;
+  --color-detail-item-label: rgba(255, 255, 255, 0.65);
 
   &--vertical {
     display: flex;
@@ -41,7 +43,7 @@
     display: flex;
 
     &__label {
-      color: #727983;
+      color: var(--color-detail-item-label);
       font-weight: 500;
     }
 
diff --git a/packages/webapp/src/style/components/Drawer.scss b/packages/webapp/src/style/components/Drawer.scss
index 832a3d601..72a190df7 100644
--- a/packages/webapp/src/style/components/Drawer.scss
+++ b/packages/webapp/src/style/components/Drawer.scss
@@ -1,17 +1,19 @@
 @import '../_base.scss';
 
 .bp4-drawer {
+  
+
   .bp4-drawer-header {
     margin-bottom: 2px;
-    background-color: #FFF;
+    background-color: var(--color-drawer-header-background);
+    box-shadow: 0 1px 0 var(--color-drawer-header-border);
 
     .bp4-heading {
       font-weight: 500;
     }
-
     .bp4-heading,
     .bp4-icon {
-      color: #354152;
+      color: var(--color-drawer-header-text);
     }
   }
 }
@@ -20,48 +22,47 @@
   &__insider{
     display: flex;
     flex-direction: column;
+    background-color: var(--color-drawer-insider-background);
     flex: 1 0 0;
-    background-color: #fbfbfb;
   }
-
-  &__main-tabs{
-    .bp4-tabs {
-      .bp4-tab-list {
-        position: relative;
-        background-color: #fff;
+  // &__main-tabs{
+  //   .bp4-tabs {
+  //     .bp4-tab-list {
+  //       position: relative;
+  //       background-color: var(--color-drawer-tabs-background);
   
-        &:before {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          width: 100%;
-          height: 2px;
-          background: #e1e2e8;
-        }
+  //       &:before {
+  //         content: '';
+  //         position: absolute;
+  //         bottom: 0;
+  //         width: 100%;
+  //         height: 2px;
+  //         background: #e1e2e8;
+  //       }
   
-        > *:not(:last-child) {
-          margin-right: 25px;
-        }
+  //       > *:not(:last-child) {
+  //         margin-right: 25px;
+  //       }
   
-        &.bp4-large > .bp4-tab {
-          font-size: 15px;
-          color: #555;
-          margin: 0 0.8rem;
+  //       &.bp4-large > .bp4-tab {
+  //         font-size: 15px;
+  //         color: #555;
+  //         margin: 0 0.8rem;
   
-          &[aria-selected='true'],
-          &:not([aria-disabled='true']):hover {
-            color: $pt-link-color;
-          }
-        }
-      }
+  //         &[aria-selected='true'],
+  //         &:not([aria-disabled='true']):hover {
+  //           color: $pt-link-color;
+  //         }
+  //       }
+  //     }
   
-      .bp4-tab-panel {
-        margin-top: 0;
+  //     .bp4-tab-panel {
+  //       margin-top: 0;
   
-        .card {
-          margin: 15px;
-        }
-      }
-    }  
-  }
+  //       .card {
+  //         margin: 15px;
+  //       }
+  //     }
+  //   }  
+  // }
 }
\ No newline at end of file
diff --git a/packages/webapp/src/style/components/Drawers/ItemDrawer.scss b/packages/webapp/src/style/components/Drawers/ItemDrawer.scss
index e39dda44c..c4edc5107 100644
--- a/packages/webapp/src/style/components/Drawers/ItemDrawer.scss
+++ b/packages/webapp/src/style/components/Drawers/ItemDrawer.scss
@@ -24,8 +24,11 @@
     }
 
     .details-menu--vertical {
+      --x-border-color: #e2e2e2;
+      --x-border-color: rgba(255, 255, 255, 0.2);
+
       padding-bottom: 15px;
-      border-bottom: 1px solid #e2e2e2;
+      border-bottom: 1px solid var(--x-border-color);
     }
 
     .details-menu--horizantal {
diff --git a/packages/webapp/src/style/components/MaterialProgressBar.scss b/packages/webapp/src/style/components/MaterialProgressBar.scss
index cf8bea94c..634e1c1e3 100644
--- a/packages/webapp/src/style/components/MaterialProgressBar.scss
+++ b/packages/webapp/src/style/components/MaterialProgressBar.scss
@@ -35,7 +35,7 @@ progress[value] {
   overflow: hidden;
 
   .indeterminate {
-    background-color: #002fff;
+    background-color: var(--color-primary);
 
     &:before {
       content: '';
diff --git a/packages/webapp/src/style/components/Menu.scss b/packages/webapp/src/style/components/Menu.scss
index 203d65737..df1075588 100644
--- a/packages/webapp/src/style/components/Menu.scss
+++ b/packages/webapp/src/style/components/Menu.scss
@@ -1,5 +1,7 @@
 .bp4-menu-item {
-
+    &:hover{
+        background-color: var(--color-ui-menu-select-item-hover-background);
+    }
     .menu-item-space {
         width: 6px;
         display: inline-block;
diff --git a/packages/webapp/src/style/components/Overlay.scss b/packages/webapp/src/style/components/Overlay.scss
index be474f16e..89a136f4d 100644
--- a/packages/webapp/src/style/components/Overlay.scss
+++ b/packages/webapp/src/style/components/Overlay.scss
@@ -2,5 +2,5 @@
 
 
 .bp4-overlay-backdrop {
-    background-color: rgba(0, 10, 30, 0.7);
+    // background-color: rgba(0, 10, 30, 0.7);
   }
\ No newline at end of file
diff --git a/packages/webapp/src/style/components/PageForm.scss b/packages/webapp/src/style/components/PageForm.scss
index f029f5654..9e43cec75 100644
--- a/packages/webapp/src/style/components/PageForm.scss
+++ b/packages/webapp/src/style/components/PageForm.scss
@@ -3,17 +3,34 @@
 //   > .page-form__content
 //   > .page-form__floating-actions
 .page-form {
+  --color-page-form-background: #fff;
+
+  --color-page-form-header-background: #fff;
+  --color-page-form-header-border: #d2dce2;
+
+  --color-page-form-header-background: var(--color-dark-gray1);
+  --color-page-form-header-border: rgba(255, 255, 255, 0.1);
+  
   $self: '.page-form';
   padding-bottom: 20px;
+  
 
   &__floating-actions {
+    --color-page-form-floating-actions-background: #fff;
+    --color-page-form-floating-actions-border: rgb(210, 221, 226);
+    --color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05);
+
+    --color-page-form-floating-actions-background: var(--color-dark-gray1);
+    --color-page-form-floating-actions-border: var(--color-dark-gray5);
+    --color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05);
+
     position: fixed;
     bottom: 0;
     width: 100%;
-    background: #fff;
     padding: 14px 18px;
-    border-top: 1px solid rgb(210, 221, 226);
-    box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
+    background: var(--color-page-form-floating-actions-background);
+    border-top: 1px solid var(--color-page-form-floating-actions-border);
+    box-shadow: 0px -1px 4px 0px var(--color-page-form-floating-actions-shadow);
 
     .bp4-button-group{
       
@@ -43,9 +60,9 @@
       }
     }
     #{$self}__header {
-      background-color: #FFF;
+      background-color: var(--color-page-form-header-background);
+      border-bottom: 1px solid var(--color-page-form-header-border);
       padding: 25px 32px;
-      border-bottom: 1px solid #d2dce2;
 
       .bp4-form-group.bp4-inline label.bp4-label {
         font-weight: 500;
diff --git a/packages/webapp/src/style/components/SidebarOverlay.scss b/packages/webapp/src/style/components/SidebarOverlay.scss
index e0deb0bc8..eba3e9454 100644
--- a/packages/webapp/src/style/components/SidebarOverlay.scss
+++ b/packages/webapp/src/style/components/SidebarOverlay.scss
@@ -1,5 +1,5 @@
 .sidebar-overlay {
-  background: #fff;
+  background: var(--color-sidebar-overlay-background);
   height: 100%;
   width: 225px;
   outline: 0;
@@ -11,7 +11,6 @@
   }
 
   .ScrollbarsCustom-Track {
-
     &.ScrollbarsCustom-TrackY,
     &.ScrollbarsCustom-TrackX {
       background: rgba(0, 0, 0, 0);
@@ -19,7 +18,6 @@
   }
 
   .ScrollbarsCustom-Thumb {
-
     &.ScrollbarsCustom-ThumbX,
     &.ScrollbarsCustom-ThumbY {
       background: rgba(0, 0, 0, 0);
@@ -34,7 +32,6 @@
 
   &:hover {
     .ScrollbarsCustom-Thumb {
-
       &.ScrollbarsCustom-ThumbX,
       &.ScrollbarsCustom-ThumbY {
         background: rgba(0, 0, 0, 0.5);
@@ -48,7 +45,7 @@
 
   &__item {
     font-size: 15px;
-    color: #00102b;
+    color: var(--color-sidebar-overlay-item-text);
 
     a {
       color: inherit;
@@ -58,7 +55,8 @@
 
       &:hover,
       &:focus {
-        background: #f3f3f3;
+        color: var(--color-sidebar-overlay-item-text-hover);
+        background-color: var(--color-sidebar-overlay-hover-background);
       }
     }
   }
@@ -66,7 +64,7 @@
   &__divider {
     height: 1px;
     margin: 6px 0;
-    background: #e2e5ec;
+    background: var(--color-sidebar-overlay-divider-background);
   }
 
   &__label {
@@ -74,8 +72,8 @@
     font-size: 12px;
     padding: 14px 20px 10px;
     letter-spacing: 1px;
-    color: #707a85;
-    border-bottom: 1px solid #e2e5ec;
+    color: var(--color-sidebar-overlay-label-text);
+    border-bottom: 1px solid var(--color-sidebar-overlay-label-border);
     margin-bottom: 6px;
 
     html[lang^="ar"] & {
@@ -127,6 +125,6 @@
 }
 
 .sidebar-overlay-backdrop {
-  background-color: rgba(0, 10, 30, 0.15);
+  background-color: var(--color-sidebar-overlay-backdrop);
   z-index: 14;
 }
\ No newline at end of file
diff --git a/packages/webapp/src/style/components/UniversalSearch.scss b/packages/webapp/src/style/components/UniversalSearch.scss
index e6c0b8689..3f07a8b49 100644
--- a/packages/webapp/src/style/components/UniversalSearch.scss
+++ b/packages/webapp/src/style/components/UniversalSearch.scss
@@ -2,9 +2,10 @@
   position: fixed;
   filter: blur(0);
   opacity: 1;
-  background-color: #fff;
+  background-color: var(--color-universal-search-background);
   border-radius: 3px;
-  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2),
+  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),
+    0 4px 8px rgba(16, 22, 26, 0.2),
     0 18px 46px 6px rgba(16, 22, 26, 0.2);
   left: calc(50% - 250px);
   top: 20vh;
@@ -16,7 +17,6 @@
     filter: blur(20px);
     opacity: 0.2;
   }
-
   &.bp4-overlay-appear-active,
   &.bp4-overlay-enter-active {
     filter: blur(0);
@@ -26,12 +26,10 @@
     transition-property: filter, opacity;
     transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
   }
-
   &.bp4-overlay-exit {
     filter: blur(0);
     opacity: 1;
   }
-
   &.bp4-overlay-exit-active {
     filter: blur(20px);
     opacity: 0.2;
@@ -61,7 +59,6 @@
       line-height: 50px;
       font-size: 20px;
     }
-
     .bp4-input-group.bp4-large .bp4-input:not(:first-child) {
       padding-left: 50px !important;
     }
@@ -82,7 +79,7 @@
     }
 
     .bp4-menu {
-      border-top: 1px solid #d3dce2;
+      border-top: 1px solid var(--color-universal-search-menu-border);
       max-height: calc(60vh - 20px);
       overflow: auto;
 
@@ -128,7 +125,7 @@
 
   &__footer {
     padding: 12px 12px;
-    border-top: 1px solid #d3dce2;
+    border-top: 1px solid var(--color-universal-search-footer-divider);
   }
 
   &__actions {
@@ -141,9 +138,8 @@
     }
 
     .bp4-tag {
-      background: #708392;
+      background: var(--color-universal-search-tag-background);
     }
-
     &--arrows {
       .bp4-tag {
         padding: 0;
@@ -201,7 +197,3 @@
     }
   }
 }
-
-.universal-search-overlay .bp4-overlay-backdrop {
-  background: rgba(0, 10, 30, 0.3);
-}
diff --git a/packages/webapp/src/style/containers/Dashboard/Sidebar.scss b/packages/webapp/src/style/containers/Dashboard/Sidebar.scss
index b0c3b1605..5ec199c87 100644
--- a/packages/webapp/src/style/containers/Dashboard/Sidebar.scss
+++ b/packages/webapp/src/style/containers/Dashboard/Sidebar.scss
@@ -1,15 +1,13 @@
 @import 'src/style/_base.scss';
 
 .sidebar {
-  background: $sidebar-background;
-  width: $sidebar-width;
-  color: $sidebar-text-color;
+  background: var(--color-sidebar-background);
+  width: 100%;
   height: 100%;
   z-index: $sidebar-zindex;
   position: relative;
 
   .ScrollbarsCustom-Track {
-
     &.ScrollbarsCustom-TrackY,
     &.ScrollbarsCustom-TrackX {
       background: rgba(0, 0, 0, 0);
@@ -17,7 +15,6 @@
   }
 
   .ScrollbarsCustom-Thumb {
-
     &.ScrollbarsCustom-ThumbX,
     &.ScrollbarsCustom-ThumbY {
       background: rgba(0, 0, 0, 0);
@@ -32,10 +29,9 @@
 
   &:hover {
     .ScrollbarsCustom-Thumb {
-
       &.ScrollbarsCustom-ThumbX,
       &.ScrollbarsCustom-ThumbY {
-        background: rgba(255, 255, 255, 0.25);
+        background: var(--color-sidebar-scrollbars-background);
       }
     }
   }
@@ -138,7 +134,7 @@
     padding-bottom: 2rem;
 
     .#{$ns}-menu-item {
-      color: $sidebar-menu-item-color;
+      color: var(--color-sidebar-menu-item-text);
       border-radius: 0;
       padding: 8px 20px;
       font-size: 15px;
@@ -146,13 +142,12 @@
 
       &:hover,
       &.bp4-active {
-        background: $sidebar-submenu-item-bg-color;
-        color: $sidebar-menu-item-color-active;
+        background: var(--color-sidebar-menu-item-hover-background);
+        color: var(--color-sidebar-menu-item-text-hover);
       }
-
       &:focus,
       &:active {
-        background: #01143e;
+        background: var(--color-sidebar-menu-item-focus-background);
       }
 
       >.#{$ns}-icon {
@@ -169,7 +164,7 @@
 
       &-labeler {
         display: block;
-        color: $sidebar-menu-label-color;
+        color: var(--color-sidebar-menu-label-color);
         font-size: 11px;
         padding: 8px 20px;
         margin-top: 4px;
diff --git a/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss b/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss
index 46814703b..9c454e009 100644
--- a/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss
+++ b/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss
@@ -2,6 +2,17 @@
 // Financial sheet - Drawer header.
 // --------------------
 .financial-header-drawer {
+  --x-color-background: var(--color-dark-gray1);
+  --x-color-backdrop-background: rgba(2, 9, 19, 0.65);
+
+  --x-color-tabs-border: var(--color-dark-gray2);
+  --x-color-tabs-tab-item-background: var(--color-dark-gray3);
+  --x-color-tabs-indicator-background: var(--color-dark-gray2);
+  --x-color-tabs-indicator-border: var(--color-primary);
+
+  --x-color-footer-background: var(--color-dark-gray3);
+  --x-color-footer-border: var(--color-dark-gray1);
+
   padding: 25px 26px 25px;
   position: absolute;
   top: 101px;
@@ -18,8 +29,11 @@
     max-height: 550px;
     height: 100%;
     padding-bottom: 49px;
-    background-color: #fff;
 
+    &,
+    .bp4-dark & {
+      background-color: var(--x-color-background);
+    }
     > form {
       display: flex;
       flex-direction: column;
@@ -27,7 +41,7 @@
       height: 100%;
     }
     .bp4-drawer-backdrop {
-      background-color: rgba(2, 9, 19, 0.65);
+      background-color: var(--x-color-backdrop-background);
     }
   }
 
@@ -60,7 +74,7 @@
 
     .bp4-tab-list {
       width: 220px;
-      border-right: 1px solid #c3cdd5;
+      border-right: 1px solid var(--color-dark-gray2);
       padding-top: 10px;
 
       > *:not(:last-child) {
@@ -70,14 +84,14 @@
         width: 100%;
 
         .bp4-tab-indicator {
-          border-left: 3px solid #0350f8;
-          background-color: #edf5ff;
+          border-left: 3px solid var(--x-color-tabs-indicator-border);
+          background-color: var(--x-color-tabs-indicator-background);
           border-radius: 0;
         }
       }
 
       .bp4-tab {
-        color: #333;
+        color: var(--color-financial-report-drawer-tab-text);
         line-height: 45px;
         border-radius: 0;
         padding-left: 14px;
@@ -88,8 +102,8 @@
   }
 
   &__footer {
-    background-color: #ecf0f3;
-    border-top: 1px solid #c3cdd5;
+    background-color: var(--x-color-footer-background);
+    border-top: 1px solid var(--x-color-footer-border);
     padding: 8px;
     padding-left: 230px;
     position: absolute;
diff --git a/packages/webapp/src/style/objects/buttons.scss b/packages/webapp/src/style/objects/buttons.scss
index 1dafb416d..aefb1d846 100644
--- a/packages/webapp/src/style/objects/buttons.scss
+++ b/packages/webapp/src/style/objects/buttons.scss
@@ -1,6 +1,9 @@
 
 
 .bp4-button {
+  --color-button-color: #555;
+  --color-button-color: var(--color-light-gray3);
+
   min-width: 32px;
   min-height: 32px;
   padding-left: 12px;
@@ -12,7 +15,7 @@
 }
 
 .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) {
-  color: #555555;
+  color: var(--color-button-color);
   box-shadow: 0 0 0 transparent;
 
   &.bp4-small {
diff --git a/packages/webapp/src/style/objects/form.scss b/packages/webapp/src/style/objects/form.scss
index 2d7602922..21b442a58 100644
--- a/packages/webapp/src/style/objects/form.scss
+++ b/packages/webapp/src/style/objects/form.scss
@@ -29,13 +29,16 @@ label.bp4-label {
 
 // Form input.
 .#{$ns}-input {
-  box-shadow: 0 0 0 transparent;
-  border: 1px solid #ced4da;
+  border: 1px solid var(--color-ui-input-border);
   border-radius: 2px;
   height: 32px;
   line-height: 32px;
   color: #333;
 
+  &,
+  .bp4-dark & {
+    box-shadow: 0 0 0 transparent;
+  }
   &:focus,
   &.bp4-active {
     box-shadow: 0 0 0 1px #116cd0;
@@ -102,12 +105,14 @@ label.bp4-label {
   border-radius: 2px;
 
   &,
-  &:hover {
-    background: #fff;
+  &:hover,
+  .bp4-dark &,
+  .bp4-dark &:hover {
     box-shadow: none;
-    border: 1px solid #ced4da;
+    background-color: var(--color-ui-input-background);
+    border: 1px solid var(--color-ui-input-border);
   }
-
+  
   &:focus {
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
     border-color: #80bdff;
@@ -123,11 +128,11 @@ label.bp4-label {
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
-    color: #495057;
+    color: var(--color-ui-input-group-prepend-color);
     text-align: center;
     white-space: nowrap;
-    background-color: #e9ecef;
-    border: 1px solid #ced4da;
+    background-color: var(--color-ui-input-group-prepend-background);
+    border: 1px solid var(--color-ui-input-group-prepend-border);
     border-radius: 0.25rem;
     height: 100%;
 
@@ -144,7 +149,6 @@ label.bp4-label {
   .bp4-input-group {
     flex: 1 1 auto;
   }
-
   .bp4-control-group {
     >.input-group-prepend:first-child .input-group-text {
       border-top-right-radius: 0;
@@ -295,8 +299,8 @@ label.bp4-label {
       color: #495057;
       text-align: center;
       white-space: nowrap;
-      background-color: #e9ecef;
-      border: 1px solid #ced4da;
+      background-color: var(--color-ui-input-group-prepend-background);
+      border: 1px solid var(--color-ui-input-group-prepend-border);
       border-radius: 0 3px 3px 0;
 
       .bp4-icon {
diff --git a/packages/webapp/src/style/pages/Dashboard/Dashboard.scss b/packages/webapp/src/style/pages/Dashboard/Dashboard.scss
index 02a7c0049..7116a4648 100644
--- a/packages/webapp/src/style/pages/Dashboard/Dashboard.scss
+++ b/packages/webapp/src/style/pages/Dashboard/Dashboard.scss
@@ -10,23 +10,26 @@ $dashboard-views-bar-height: 44px;
     min-height: 60px;
     display: flex;
     justify-content: space-between;
-    background-color: #fff;
-    border-bottom: 1px solid #c7d5db;
+    background-color: var(--color-dashboard-topbar-background);
+    border-bottom: 1px solid var(--color-dashboard-topbar-border-color);
 
     &-right,
     &-left {
       display: flex;
     }
 
-    &-actions {}
+    &-actions {
+    }
 
     &-sidebar-toggle {
       display: flex;
       align-items: center;
       margin-left: 2px;
 
-      .#{$ns}-button {
-        color: #6b8193;
+      .bp4-button.bp4-minimal {
+        &,
+        .bp4-dark & {
+          color: var(--color-sidebar-toggle);
 
         &,
         &:hover,
@@ -38,6 +41,7 @@ $dashboard-views-bar-height: 44px;
         }
       }
     }
+  }
 
     &-navbar {
       display: flex;
@@ -126,6 +130,13 @@ $dashboard-views-bar-height: 44px;
         background: $light-gray2;
       }
 
+      .bp4-dark & {
+        background: var(--color-dark-gray4);
+
+        &:hover {
+          background: var(--color-dark-gray5);
+        }
+      }
       &::before {
         background: escape-svg($breadcrumbs-collapsed-icon) center center;
         width: 15px;
@@ -155,16 +166,17 @@ $dashboard-views-bar-height: 44px;
   }
 
   &__actions-bar {
-    border-bottom: 2px solid #e1e2e8;
+    border-bottom: 2px solid var(--color-dashboard-actionsbar-border);
 
     .bp4-navbar-divider {
-      border-left-color: rgb(199, 214, 219);
+      border-left-color: var(--color-dashboard-actionsbar-divider);
     }
 
     .#{$ns}-navbar {
       box-shadow: none;
       padding-left: 12px;
       padding-right: 12px;
+      background-color: var(--color-dashboard-navbar-background);
 
       &,
       &-group {
@@ -177,25 +189,23 @@ $dashboard-views-bar-height: 44px;
       }
 
       .#{$ns}-button {
-        color: #32304a;
+        color: var(--color-dashboard-navbar-item-text);
         padding: 8px 12px;
 
         &:hover {
-          background: rgba(167, 182, 194, 0.12);
-          color: #32304a;
+          background: var(--color-dashboard-navbar-item-hover-background);
+          color: var(--color-dashboard-navbar-item-hover-text);
         }
-
         &.bp4-minimal:active,
         &.bp4-minimal.bp4-active {
-          background: #a7b6c21f;
-          color: #32304a;
+          background: var(--color-dashboard-navbar-item-active-background);
+          color: var(--color-dashboard-navbar-item-active-text);
         }
-        &.bp4-disabled{
+        &.bp4-disabled {
           background: transparent;
           color: rgba(50, 48, 74, 0.4);
         }
         &.has-active-filters {
-
           &,
           &.bp4-active,
           &:active {
@@ -204,22 +214,21 @@ $dashboard-views-bar-height: 44px;
         }
 
         .#{$ns}-icon {
-          color: #32304a;
+          // color: var(--color-dashboard-navbar-item-icon);
         }
 
         &.#{$ns}-minimal.#{$ns}-intent-danger {
           color: rgb(194, 48, 48);
 
-          &:not(.bp4-disabled)
-          &:hover,
+          &:not(.bp4-disabled) &:hover,
           &:focus {
             background: rgba(219, 55, 55, 0.1);
           }
-          &.bp4-disabled{
+          &.bp4-disabled {
             color: rgb(194, 48, 48, 0.6);
           }
         }
-        &.#{$ns}-minimal.#{$ns}-intent-success{
+        &.#{$ns}-minimal.#{$ns}-intent-success {
           color: #1c6e42;
 
           &:hover,
@@ -229,14 +238,14 @@ $dashboard-views-bar-height: 44px;
           }
         }
 
-        &.#{$ns}-minimal.#{$ns}-intent-warning{
+        &.#{$ns}-minimal.#{$ns}-intent-warning {
           color: #cc7e25;
         }
-        &.#{$ns}-minimal.#{$ns}-intent-primary{
+        &.#{$ns}-minimal.#{$ns}-intent-primary {
           color: #223fc5;
-          
+
           &:hover,
-          &:focus{
+          &:focus {
             color: #223fc5;
             background: rgba(34, 63, 197, 0.08);
           }
@@ -273,7 +282,7 @@ $dashboard-views-bar-height: 44px;
       .bp4-control.bp4-switch {
         margin-bottom: 0;
         margin-left: 8px;
-        color: #3d3b53;
+        color: var(--color-dashboard-navbar-item-text);
 
         .bp4-control-indicator {
           height: 16px;
@@ -284,11 +293,11 @@ $dashboard-views-bar-height: 44px;
           box-shadow: 0 0 0;
         }
 
-        input~.bp4-control-indicator {
+        input ~ .bp4-control-indicator {
           background: rgba(167, 182, 194, 0.55);
         }
 
-        input:checked~.bp4-control-indicator {
+        input:checked ~ .bp4-control-indicator {
           background: #0069ff;
         }
       }
@@ -308,12 +317,13 @@ $dashboard-views-bar-height: 44px;
 
     h1 {
       font-size: 22px;
-      color: #48485c;
+      color: var(--color-dashboard-topbar-title-text);
       font-weight: 500;
       margin: 0;
     }
 
-    h3 {}
+    h3 {
+    }
 
     .button--view-edit {
       svg {
@@ -335,9 +345,11 @@ $dashboard-views-bar-height: 44px;
     margin-left: 4px;
   }
 
-  &__subtitle {}
+  &__subtitle {
+  }
 
-  &__insider {}
+  &__insider {
+  }
 
   &__offline-badge {
     display: flex;
@@ -360,7 +372,7 @@ $dashboard-views-bar-height: 44px;
     height: 100%;
     min-width: 850px;
 
-    .sidebar--mini-sidebar+& {
+    .sidebar--mini-sidebar + & {
       margin-left: 50px;
       width: calc(100% - 50px);
     }
@@ -370,9 +382,9 @@ $dashboard-views-bar-height: 44px;
     display: flex;
     flex-direction: column;
     flex: 1 0 0;
-    background-color: #fbfbfb;
+    background-color: var(--color-dashboard-insider-background);
 
-    >.dashboard__loading-indicator {
+    > .dashboard__loading-indicator {
       margin-top: auto;
       margin-bottom: auto;
     }
@@ -402,10 +414,8 @@ $dashboard-views-bar-height: 44px;
 
     .bigcapital-datatable {
       .table {
-
         .thead,
         .tbody {
-
           .th.selection,
           .td.selection {
             padding-left: 16px;
@@ -435,9 +445,9 @@ $dashboard-views-bar-height: 44px;
     display: flex;
     flex: 1 0 0;
     flex-direction: column;
-    background: #fff;
+    background: var(--color-dashboard-datatable-background);
     margin: 22px 32px;
-    border: 1px solid #d2dce2;
+    border: 1px solid var(--color-dashboard-datatable-border);
 
     .bigcapital-datatable {
       display: flex;
@@ -460,7 +470,8 @@ $dashboard-views-bar-height: 44px;
     }
   }
 
-  &__preferences-topbar {}
+  &__preferences-topbar {
+  }
 
   &__footer {
     margin-top: auto;
@@ -470,7 +481,7 @@ $dashboard-views-bar-height: 44px;
     .footer-links {
       text-align: center;
 
-      >div {
+      > div {
         font-size: 12px;
         margin-right: 20px;
         display: inline;
@@ -505,20 +516,18 @@ $dashboard-views-bar-height: 44px;
       font-size: 26px;
       font-weight: 600;
       margin: 0px 0 10px;
-      color: #2c3a5d;
+      color: var(--color-dashboard-error-boundary-title-text);
     }
-
     p {
       font-size: 16px;
-      color: #1f3255;
+      color: var(--color-dashboard-error-boundary-description-text);
       opacity: 0.8;
     }
-
     .bp4-icon {
       margin-top: 6px;
 
       path {
-        fill: #a1afca;
+        fill: var(--color-dashboard-error-boundary-logo);
       }
     }
   }
@@ -602,7 +611,9 @@ $dashboard-views-bar-height: 44px;
   left: calc(50% - 250px);
   z-index: 21;
   border-radius: 3px;
-  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2),
+  box-shadow:
+    0 0 0 1px rgba(16, 22, 26, 0.1),
+    0 4px 8px rgba(16, 22, 26, 0.2),
     0 18px 46px 6px rgba(16, 22, 26, 0.2);
   background-color: #fff;
   width: 600px;
diff --git a/packages/webapp/src/style/pages/FinancialStatements/FinancialSheets.scss b/packages/webapp/src/style/pages/FinancialStatements/FinancialSheets.scss
index 7c551d6b2..8b3f24341 100644
--- a/packages/webapp/src/style/pages/FinancialStatements/FinancialSheets.scss
+++ b/packages/webapp/src/style/pages/FinancialStatements/FinancialSheets.scss
@@ -5,7 +5,7 @@
     font-weight: 600;
     margin-bottom: 1.4rem;
     font-size: 18px;
-    color: rgb(31, 50, 85);
+    color: var(--color-report-section-title-text);
     margin-top: 10px;
   }
 
@@ -19,9 +19,9 @@
     min-height: 140px;
     margin-bottom: 16px;
     margin-left: 16px;
-    border: 1px solid #d1dee2;
-    border-top: 3px solid #d1dee2;
-    background: #fff;
+    border: 1px solid var(--color-report-item-border);
+    border-top: 3px solid var(--color-report-item-top-border);
+    background: var(--color-report-item-background);
     padding: 18px;
 
     .title {
@@ -29,7 +29,7 @@
     }
 
     .desc {
-      color: rgb(31, 50, 85);
+      color: var(--color-report-item-text);
       line-height: 1.55;
       margin-top: 8px;
       margin-bottom: 0;
diff --git a/packages/webapp/src/style/pages/Preferences/GeneralForm.scss b/packages/webapp/src/style/pages/Preferences/GeneralForm.scss
index 9b874c463..1eef4adc2 100644
--- a/packages/webapp/src/style/pages/Preferences/GeneralForm.scss
+++ b/packages/webapp/src/style/pages/Preferences/GeneralForm.scss
@@ -3,7 +3,6 @@
 //  General page
 //---------------------------------
 .preferences-page__inside-content--general {
-
   .bp4-form-group {
     max-width: 650px;
     margin-bottom: 24px;
@@ -11,7 +10,7 @@
     .bp4-label {
       min-width: 190px;
       font-weight: 600;
-      color: #38414e;
+      // color: #38414e;
     }
 
     .bp4-form-content {
diff --git a/packages/webapp/src/style/pages/Preferences/Page.scss b/packages/webapp/src/style/pages/Preferences/Page.scss
index d0a57ad9a..49621f880 100644
--- a/packages/webapp/src/style/pages/Preferences/Page.scss
+++ b/packages/webapp/src/style/pages/Preferences/Page.scss
@@ -4,7 +4,7 @@
   flex-direction: row;
   flex: 1 0 0;
   min-width: auto;
-  background-color: #fbfbfb;
+  background-color: var(--color-preferences-content-background);
 }
 .dashboard {
   &__preferences-content {
diff --git a/packages/webapp/src/style/pages/Preferences/Sidebar.scss b/packages/webapp/src/style/pages/Preferences/Sidebar.scss
index fddf71748..0706f4617 100644
--- a/packages/webapp/src/style/pages/Preferences/Sidebar.scss
+++ b/packages/webapp/src/style/pages/Preferences/Sidebar.scss
@@ -3,8 +3,8 @@
 // Preferences sidebar.
 // -----------------------------
 .preferences-sidebar {
-  background: #eaeef6;
-  border-right: 1px solid #c6d0d9;
+  background: var(--color-sidebar-preferences-background);
+  border-right: 1px solid var(--color-sidebar-preferences-border);
   min-width: 220px;
   max-width: 220px;
   height: 100%;
@@ -46,11 +46,11 @@
     align-items: center;
     height: 60px;
     padding: 0 22px;
-    border-bottom: 1px solid #bbcbd0;
+    border-bottom: 1px solid var(--color-preferences-sidebar-head-border);
 
     h2 {
       font-size: 22px;
-      color: #3b3b4c;
+      color: var(--color-preferences-sidebar-head-text);
       font-weight: 400;
       margin: 0;
     }
@@ -60,16 +60,23 @@
     padding: 0;
     background: transparent;
 
+    &.#{$ns}-menu {
+      &,
+      .bp4-dark & {
+        background: transparent;
+      }
+    }
+
     .#{$ns}-menu-item {
       padding: 8px 18px;
       font-size: 15px;
       font-weight: 400;
-      color: #333;
+      color: var(--color-sidebar-preferences-item-text);
 
       &:hover,
       &.#{$ns}-active {
-        background-color: rgba(255, 255, 255, 0.6);
-        color: #333;
+        background-color: var(--color-sidebar-preferences-item-hover-background);
+        color: var(--color-sidebar-preferences-item-hover-text);
       }
     }
   }
diff --git a/packages/webapp/src/style/pages/Preferences/Topbar.scss b/packages/webapp/src/style/pages/Preferences/Topbar.scss
index ec766b93c..34bd9d7e6 100644
--- a/packages/webapp/src/style/pages/Preferences/Topbar.scss
+++ b/packages/webapp/src/style/pages/Preferences/Topbar.scss
@@ -3,7 +3,6 @@
 // Preferences topbar.
 // -----------------------------
 .preferences-topbar {
-  border-bottom: 1px solid #d2dde2;
   min-height: 60px;
   flex: 60px 0 0;
   padding: 0 0 0 22px;
@@ -11,14 +10,15 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  background-color: #fff;
+  background-color: var(--color-preferences-topbar-background);
+  border-bottom: 1px solid var(--color-preferences-topbar-border);
 
   &__title {
     h2 {
       font-size: 22px;
       font-weight: 400;
       margin: 0;
-      color: #48485b;
+      color: var(--color-preferences-topbar-title);
     }
   }
 
diff --git a/packages/webapp/src/style/views/filter-dropdown.scss b/packages/webapp/src/style/views/filter-dropdown.scss
index a703fe1de..d299799f5 100644
--- a/packages/webapp/src/style/views/filter-dropdown.scss
+++ b/packages/webapp/src/style/views/filter-dropdown.scss
@@ -29,14 +29,14 @@
     .bp4-html-select::after,
     .form-group--select-list .bp4-button::after{
       margin-right: 6px;
-      border-top-color: #c5c5c5;
+      // border-top-color: #c5c5c5;
     }
     .bp4-html-select,
     .bp4-input,
     .form-group--select-list .bp4-button{
       
       &:not(:focus){
-        border-color: #d3d9de;
+        // border-color: #d3d9de;
       }
     }