diff --git a/packages/webapp/src/style/_variables.scss b/packages/webapp/src/style/_variables.scss
index ade67159e..af347e783 100644
--- a/packages/webapp/src/style/_variables.scss
+++ b/packages/webapp/src/style/_variables.scss
@@ -24,81 +24,266 @@ $ns: bp4;
 
   --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);
 
+  // Alerts
+  --color-alert-default-background: transparent;
+  --color-alert-default-description-text: rgb(104, 112, 118);
+  --color-alert-default-title-text: rgb(17, 24, 28);
+
+  // Danger alert.
+  --color-alert-danger-background: rgb(255, 248, 248);
+  --color-alert-danger-border: rgb(249, 198, 198);
+  --color-alert-danger-description-text: #d95759;
+  --color-alert-danger-title-text: rgb(205, 43, 49);
+
+  // Primary alert.
+  --color-alert-primary-background: #fff;
+  --color-alert-primary-border: #98a8ee;
+  --color-alert-primary-title-text: #1a3bd4;
+  --color-alert-primary-description-text: #455883;
+
   // 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-background: #fff;
+  
   --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.
+  // Splash screen.
   --color-splash-screen-background: #fff;
-  --color-splash-screen-background: var(--color-dark-gray1);
 
-  // # Sidebar.
+  // Main Dashboard.
+  --color-dashboard-insider-background: #fbfbfb;
+  --color-dashboard-topbar-background: #fff;
+  --color-dashboard-topbar-border-color: #c7d5db;
+  --color-dashboard-datatable-background: #fff;
+  --color-dashboard-datatable-border: #d2dce2;
+
+  // Dashboard error boundary.
+  --color-dashboard-error-boundary-title-text: #2c3a5d;
+  --color-dashboard-error-boundary-description-text: #1f3255;
+  --color-dashboard-error-boundary-logo: #a1afca;
+
+  // Dashboard - Navbar.
+  --color-dashboard-navbar-background: transparent;
+  --color-dashboard-navbar-item-text: #32304a;
+  --color-dashboard-navbar-item-hover-text: #32304a;
+  --color-dashboard-navbar-item-hover-background: rgba(167, 182, 194, 0.12);
+  --color-dashboard-navbar-item-active-text: #32304a;
+  --color-dashboard-navbar-item-active-background: #a7b6c21f;
+  --color-dashboard-navbar-item-icon: #32304a;
+  --color-dashboard-topbar-title-text: #48485c;
+
+  // Dashboard - Actionsbar.
+  --color-dashboard-actionsbar-border: #e1e2e8;
+  --color-dashboard-actionsbar-divider: rgb(199, 214, 219);
+
+  // Datatable
+  --color-datatable-head-background: #f2f3fb;
+  --color-datatable-head-text: #415060;
+  --color-datatable-head-border: #d2dce2;
+  --color-datatable-cell-hover-background: #f5f6f7;
+  --color-datatable-cell-border: #d8d8d8;
+  --color-datatable-cell-focus-border: rgba(0, 82, 204, 0.7);
+  --color-datatable-cell-focus-border: rgba(0, 82, 204, 0.7);
+  --color-datatable-no-results-text: #777;
+  --color-datatable-no-results-text: #777;
+  --color-datatable-caret: #b5b5b5;
+  --color-datatable-caret-hover: #7d8593;
+
+  // Datatable - Empty status
+  --color-datatable-empty-status-title: #2c3a5d;
+  --color-datatable-empty-status-description: #1f3255;
+
+  // 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-background: #01115e;
+  --color-sidebar-text: #fff;
   --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);
+  // Sidebar - Items  
+  --color-sidebar-menu-item-text: rgb(255, 255, 255);
+  --color-sidebar-menu-item-hover-background: rgba(255, 255, 255, 0.2);
+  --color-sidebar-menu-item-text-hover: rgb(255, 255, 255);
+  --color-sidebar-menu-item-active-background: rgba(255, 255, 255, 0.2);
+  --color-sidebar-menu-item-active-text: rgb(255, 255, 255);
+  --color-sidebar-menu-item-focus-background: #01143e;
+  --color-sidebar-menu-label-color: rgba(255, 255, 255, 0.5);
+
+  // Sidebar overlay
+  --color-sidebar-overlay-background: #fff;
+  --color-sidebar-overlay-hover-background: #f3f3f3;
+  --color-sidebar-overlay-item-text: #00102b;
+  --color-sidebar-overlay-item-hover-text: #00102b;
+  --color-sidebar-overlay-divider-background: #e2e5ec;
+  --color-sidebar-overlay-label-text: #707a85;
   --color-sidebar-overlay-label-border: var(
     --color-sidebar-overlay-divider-background
   );
-  --color-sidebar-overlay-backdrop: rgba(17, 20, 24, 0.25);
+  --color-sidebar-overlay-backdrop: rgba(0, 10, 30, 0.15);
+
+  --color-financial-report-background: #fff;
+
+  --color-datatable-text: #000;
+
+  --color-datatable-constrant-text: #000;
+  --color-datatable-constrant-cell-border: #000000;
+
+  --color-datatable-constrant-head-text: #000;
+  --color-datatable-constrant-head-border: #000000;
+
+  // Card
+  --color-card-background: #fff;
+  --color-card-border: #d2dce2;
+
+  // Bank accounts.
+  --color-bank-account-card-background: #fff;
+  --color-bank-account-card-text: rgb(23, 43, 77);
+  --color-bank-account-card-border: #c8cad0;
+  --color-bank-account-card-hover-border: #0153cc;
+
+  --color-bank-account-card-tag-background: rgb(223, 225, 230);
+
+  --color-bank-account-code-text: rgb(23, 43, 77);
+
+  // Bank transactions - details bar.
+  --color-bank-transactions-details-bar-background: #fff;
+  --color-bank-transactions-details-bar-text: #333;
+  --color-bank-transactions-details-bar-divider: #e1e2e8;
+
+  // Bank transactions - content background
+  --color-bank-transactions-content-background: #fff;
+  --color-bank-transactions-content-border: #f0f0f0;
+
+  // Bank account transactions.
+  --color-bank-transactions-datatable-card-background: #fff;
+  --color-bank-transactions-datatable-card-border: #f0f0f0;
+
+  --color-bank-transaction-matching-aside: red;
+  --color-bank-transaction-matching-divider: #e1e2e8;
+  --color-bank-transaction-matching-aside-header: #fff;
+  --color-bank-transaction-matching-aside-footer: #ecf0f3;
+
+  --color-sidebar-preferences-background: #eaeef6;
+  --color-sidebar-preferences-border: #c6d0d9;
+
+  // Preferences - Sidebar. 
+  --color-sidebar-preferences-item-background: transparent;
+  --color-sidebar-preferences-item-text: #333;
+
+  --color-sidebar-preferences-item-hover-background: rgba(255, 255, 255, 0.6);
+  --color-sidebar-preferences-item-hover-text: #333;
+
+  --color-preferences-sidebar-head-border: #bbcbd0;
+  --color-preferences-sidebar-head-text: #3b3b4c;
+
+
+  // Preferences - Topbar.
+  --color-preferences-topbar-background: #fff;
+  --color-preferences-topbar-border: #d2dde2;
+  --color-preferences-topbar-title: #48485b;
+
+  --color-preferences-content-background: #fbfbfb;
+
+  // Financial sheet.
+  --color-financial-sheet-card-border: #d1dee2;
+  --color-financial-sheet-title-text: rgb(31, 50, 85);
+  --color-financial-sheet-type-text: rgb(31, 50, 85);
+  --color-financial-sheet-date-text: rgb(31, 50, 85);
+  --color-financial-sheet-footer-text: rgb(31, 50, 85);
+  --color-financial-sheet-minimal-title-text: #333;
+
+  // Transaction locking.
+  --color-transaction-locking-item-background: #fff;
+  --color-transaction-locking-item-border: #d1dee2;
+  --color-transaction-locking-item-icon-border: #d1dee2;
+  --color-transaction-locking-item-enabled-border: #d1dee2;
+
+  // Reports items.
+  --color-report-section-title-text: rgb(31, 50, 85);
+  --color-report-item-background: #fff;
+  --color-report-item-border: #d1dee2;
+  --color-report-item-top-border: #d1dee2;
+  --color-report-item-text: rgb(31, 50, 85);
+
+  // Financial report drawer.
+  --color-financial-report-drawer-tab-text: #333;
+
+  --color-element-customize-header-background: #fff;
+  --color-element-customize-header-title-text: #333;
+
+  --color-element-customize-background: #fff;
+  --color-element-customize-preview-background: #f5f5f5;
+
+  --color-element-customize-header-tabs-background: #fff;
+  --color-ekement-customize-header-tabs-text: #5f6b7c;
+
+  --color-element-customize-divider: #e1e2e8;
+
+  // Universal search
+  --color-universal-search-background: #fff;
+  --color-universal-search-footer-divider: #d3dce2;
+  --color-universal-search-tag-background: #708392;
+  --color-universal-search-menu-border: #d3dce2;
+
+  // Content tabs
+  --color-content-tab-background: #fff;
+  --color-content-tab-border: #e1e2e8;
+  --color-content-tab-hover-border: #1552c8;
+  --color-content-tab-active-border: #1552c8;
+  --color-content-tab-text: #2f343c;
+  --color-content-tab-active-text: #1552c8;
+
+  // Aside
+  --color-aside-background: #fff;
+
+  --color-aside-title-background: #fff;
+
+  --color-aside-divider: #E1E2E9;
+
+  // App shell
+  --color-app-shell-divider: rgba(17, 20, 24, 0.15);
+
+  // Select
+  --color-select-button-background: #fff;
+  --color-select-button-border: #fff; 
+
+  // Stepper
+  --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-background: #9e9e9e;
+  --color-stepper-step-active-background: rgb(0, 82, 204);
+  --color-stepper-separator: #c5cbd3;
+  --color-stepper-step-text: #fff;  
+
+  // Drawer
+  --color-drawer-border-left: var(--color-primary);
+  --color-drawer-header-background: #fff;
+  --color-drawer-header-border: transparent;
+  --color-drawer-header-text: #354152;
+  --color-drawer-insider-background: #fbfbfb;
+  --color-drawer-tabs-background: #fff;
 }
 
-.bp4-dark :root {
+$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);
+  
+body.bp4-dark  {
   --color-primary: #8abbff;
   --color-danger: red;
 
@@ -119,36 +304,32 @@ $ns: bp4;
 
   --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);
 
+  // Alerts
+  --color-alert-default-background: transparent;
+  --color-alert-default-description-text: var(--color-light-gray4);
+  --color-alert-default-title-text: var(--color-light-gray2);
+
+  // Danger alert.
+  --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;
+
+  // Primary alert.
+  --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);
+
   // 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);
@@ -174,31 +355,22 @@ $ns: bp4;
   // 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);
 
+  // Dashboard - Navbar.
   --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);
 
+  // Dashboard - Actionsbar.
   --color-dashboard-actionsbar-border: var(--color-dark-gray4);
   --color-dashboard-actionsbar-divider: rgba(255, 255, 255, 0.2);
 
@@ -212,25 +384,25 @@ $ns: bp4;
   --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);
 
+  // Datatable - Empty status
+  --color-datatable-empty-status-title: var(--color-light-gray4);
+  --color-datatable-empty-status-description: var(--color-light-gray5);
+
   // 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);
 
+  // Sidebar - Items  
   --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);
 
@@ -256,6 +428,7 @@ $ns: bp4;
   --color-datatable-constrant-head-text: var(--color-light-gray2);
   --color-datatable-constrant-head-border: var(--color-dark-gray5);
 
+  // Card
   --color-card-background: var(--color-dark-gray4);
   --color-card-border: #d2dce2;
   --color-card-border: rgba(255, 255, 255, 0.2);
@@ -273,14 +446,13 @@ $ns: bp4;
   --color-bank-account-code-text: rgb(23, 43, 77);
   --color-bank-account-code-text: var(--color-muted-text);
 
+  // Bank transactions - details bar.
   --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;
+  // Bank transactions - content background
   --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.
@@ -297,7 +469,7 @@ $ns: bp4;
   --color-sidebar-preferences-border: #c6d0d9;
   --color-sidebar-preferences-border: rgba(255, 255, 255, 0.25);
 
-  // Sidebar preferences. 
+  // Preferences - Sidebar. 
   --color-sidebar-preferences-item-background: transparent;
   --color-sidebar-preferences-item-text: #fff;
 
@@ -310,6 +482,7 @@ $ns: bp4;
   --color-preferences-sidebar-head-border: rgba(255, 255, 255, 0.25);
   --color-preferences-sidebar-head-text: rgba(255, 255, 255, 0.85);
 
+  // Preferences - Topbar.
   --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);
@@ -337,6 +510,7 @@ $ns: bp4;
   --color-report-item-top-border: var(--color-dark-gray5);
   --color-report-item-text: var(--color-light-gray2);
 
+  // Financial report drawer.
   --color-financial-report-drawer-tab-text: var(--color-light-gray3);
 
   --color-element-customize-header-background: var(--color-dark-gray2);
@@ -359,26 +533,18 @@ $ns: bp4;
   --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);
-
+  // Content tabs
   --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);
 
+  // Aside
   --color-aside-background: #fff;
   --color-aside-background: var(--color-dark-gray2);
 
@@ -388,47 +554,29 @@ $ns: bp4;
   --color-aside-divider: #E1E2E9;
   --color-aside-divider: var(--color-dark-gray5);
 
+  // App shell
   --color-app-shell-divider: var(--color-dark-gray5);
 
+  // Select
   --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);
-
+  // Stepper
   --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);
+  // Drawer
   --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;
 }