diff --git a/packages/server/src/modules/Currencies/Currencies.constants.ts b/packages/server/src/modules/Currencies/Currencies.constants.ts
index a2f433253..1924c8aa3 100644
--- a/packages/server/src/modules/Currencies/Currencies.constants.ts
+++ b/packages/server/src/modules/Currencies/Currencies.constants.ts
@@ -10,8 +10,8 @@ export const InitialCurrencies = [
 ];
 
 export const ERRORS = {
-  CURRENCY_NOT_FOUND: 'currency_not_found',
-  CURRENCY_CODE_EXISTS: 'currency_code_exists',
+  CURRENCY_NOT_FOUND: 'CURRENCY_NOT_FOUND',
+  CURRENCY_CODE_EXISTS: 'CURRENCY_CODE_EXISTS',
   BASE_CURRENCY_INVALID: 'BASE_CURRENCY_INVALID',
   CANNOT_DELETE_BASE_CURRENCY: 'CANNOT_DELETE_BASE_CURRENCY',
 };
diff --git a/packages/webapp/src/components/Card/index.tsx b/packages/webapp/src/components/Card/index.tsx
index 830de33ea..f15409873 100644
--- a/packages/webapp/src/components/Card/index.tsx
+++ b/packages/webapp/src/components/Card/index.tsx
@@ -26,7 +26,7 @@ export const CardFooterActions = styled.div`
   --x-color-border: #e0e7ea;
 
   .bp4-dark & {
-    --x-color-border: rgba(255, 255, 255, 0.25);
+    --x-color-border: rgba(255, 255, 255, 0.15);
   }
   padding-top: 16px;
   border-top: 1px solid var(--x-color-border);
diff --git a/packages/webapp/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFields.tsx b/packages/webapp/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFields.tsx
index 7929f2037..ca2dfd587 100644
--- a/packages/webapp/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFields.tsx
@@ -1,24 +1,24 @@
 // @ts-nocheck
 import React from 'react';
-import { Classes, FormGroup, InputGroup } from '@blueprintjs/core';
-import { FastField } from 'formik';
+import { Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
 import { FormattedMessage as T } from '@/components';
 import classNames from 'classnames';
 
 import { CLASSES } from '@/constants/classes';
 import { useCurrencyFormContext } from './CurrencyFormProvider';
-import { ErrorMessage, FieldRequiredHint, ListSelect } from '@/components';
+import { FieldRequiredHint, FFormGroup, FInputGroup, FSelect } from '@/components';
 
 import { useAutofocus } from '@/hooks';
-import { inputIntent, currenciesOptions } from '@/utils';
+import { currenciesOptions } from '@/utils';
 
 /**
  * Currency form fields.
  */
 export default function CurrencyFormFields() {
   const currencyNameFieldRef = useAutofocus();
-
   const { isEditMode } = useCurrencyFormContext();
+  const { setFieldValue } = useFormikContext();
 
   // Filter currency code
   const filterCurrencyCode = (query, currency, _index, exactMatch) => {
@@ -33,66 +33,47 @@ export default function CurrencyFormFields() {
 
   return (
     <div className={Classes.DIALOG_BODY}>
-      <FastField name={'currency_code'}>
-        {({
-          form: { setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={<T id={'currency_code'} />}
-            className={classNames(CLASSES.FILL, 'form-group--type')}
-          >
-            <ListSelect
-              items={currenciesOptions}
-              selectedItemProp={'currency_code'}
-              selectedItem={value}
-              textProp={'formatted_name'}
-              defaultText={<T id={'select_currency_code'} />}
-              onItemSelect={(currency) => {
-                setFieldValue('currency_code', currency.currency_code);
-                setFieldValue('currency_name', currency.name);
-                setFieldValue('currency_sign', currency.symbol);
-              }}
-              itemPredicate={filterCurrencyCode}
-              disabled={isEditMode}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'currency_code'}
+        label={<T id={'currency_code'} />}
+      >
+        <FSelect
+          name={'currency_code'}
+          items={currenciesOptions}
+          valueAccessor={'currency_code'}
+          textAccessor={'formatted_name'}
+          placeholder={<T id={'select_currency_code'} />}
+          onItemSelect={(currency) => {
+            setFieldValue('currency_code', currency.currency_code);
+            setFieldValue('currency_name', currency.name);
+            setFieldValue('currency_sign', currency.symbol);
+          }}
+          itemPredicate={filterCurrencyCode}
+          disabled={isEditMode}
+          popoverProps={{ minimal: true }}
+        />
+      </FFormGroup>
+
       {/* ----------- Currency name ----------- */}
-      <FastField name={'currency_name'}>
-        {({ field, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'currency_name'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={'form-group--currency-name'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="currency_name" />}
-            // inline={true}
-          >
-            <InputGroup
-              inputRef={(ref) => (currencyNameFieldRef.current = ref)}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'currency_name'}
+        label={<T id={'currency_name'} />}
+        labelInfo={<FieldRequiredHint />}
+      >
+        <FInputGroup
+          name={'currency_name'}
+          inputRef={(ref) => (currencyNameFieldRef.current = ref)}
+        />
+      </FFormGroup>
+
       {/* ----------- Currency Code ----------- */}
-      <FastField name={'currency_sign'}>
-        {({ field, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'currency_sign'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={'form-group--currency-sign'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="currency_sign" />}
-          >
-            <InputGroup {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'currency_sign'}
+        label={<T id={'currency_sign'} />}
+        labelInfo={<FieldRequiredHint />}
+      >
+        <FInputGroup name={'currency_sign'} />
+      </FFormGroup>
     </div>
   );
 }
diff --git a/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx b/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx
index 78bbe5d9f..97ae3231f 100644
--- a/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx
+++ b/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx
@@ -63,7 +63,7 @@ const CardFooterActions = styled.div`
   --x-color-border: #e0e7ea;
 
   .bp4-dark & {
-    --x-color-border: rgba(255, 255, 255, 0.25);
+    --x-color-border: rgba(255, 255, 255, 0.15);
   }
   padding-top: 16px;
   border-top: 1px solid var(--x-color-border);
diff --git a/packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx b/packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx
index 678627ddf..ff1615e79 100644
--- a/packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx
@@ -61,8 +61,10 @@ export function PreferencesEstimatesForm({ isSubmitting }) {
 
 const CardFooterActions = styled.div`
   --x-color-border: #e0e7ea;
-  --x-color-border: rgba(255, 255, 255, 0.25);
 
+  .bp4-dark & {
+    --x-color-border: rgba(255, 255, 255, 0.15);
+  }
   padding-top: 16px;
   border-top: 1px solid var(--x-color-border);
   margin-top: 30px;
diff --git a/packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx b/packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx
index c4e861e91..a87b2b3f5 100644
--- a/packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx
@@ -61,8 +61,10 @@ export function PreferencesInvoicesForm({ isSubmitting }) {
 
 const CardFooterActions = styled.div`
   --x-color-border: #e0e7ea;
-  --x-color-border: rgba(255, 255, 255, 0.25);
 
+  .bp4-dark & {
+    --x-color-border: rgba(255, 255, 255, 0.15);
+  }
   padding-top: 16px;
   border-top: 1px solid var(--x-color-border);
   margin-top: 30px;
diff --git a/packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx b/packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx
index b72673a5d..b573aa899 100644
--- a/packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx
@@ -61,8 +61,10 @@ export function PreferencesReceiptsForm({ isSubmitting }) {
 
 const CardFooterActions = styled.div`
   --x-color-border: #e0e7ea;
-  --x-color-border: rgba(255, 255, 255, 0.25);
 
+  .bp4-dark & {
+    --x-color-border: rgba(255, 255, 255, 0.15);
+  }
   padding-top: 16px;
   border-top: 1px solid var(--x-color-border);
   margin-top: 30px;
diff --git a/packages/webapp/src/style/_variables.scss b/packages/webapp/src/style/_variables.scss
index 2cead24ee..93059e554 100644
--- a/packages/webapp/src/style/_variables.scss
+++ b/packages/webapp/src/style/_variables.scss
@@ -455,9 +455,9 @@ body.bp4-dark  {
   --color-datatable-constrant-head-border: var(--color-dark-gray5);
 
   // Card
-  --color-card-background: var(--color-dark-gray4);
+  --color-card-background: var(--color-dark-gray2);
   --color-card-border: #d2dce2;
-  --color-card-border: rgba(255, 255, 255, 0.2);
+  --color-card-border: rgba(255, 255, 255, 0.1);
 
   // Bank accounts.
   --color-bank-account-card-background: var(--color-card-background);
@@ -492,8 +492,7 @@ body.bp4-dark  {
   --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);
+  --color-sidebar-preferences-border: rgba(255, 255, 255, 0.15);
 
   // Preferences - Sidebar. 
   --color-sidebar-preferences-item-background: transparent;
@@ -502,10 +501,7 @@ body.bp4-dark  {
   --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-border: rgba(255, 255, 255, 0.1);
   --color-preferences-sidebar-head-text: rgba(255, 255, 255, 0.85);
 
   // Preferences - Topbar.
diff --git a/packages/webapp/src/style/components/DataTable/DataTable.scss b/packages/webapp/src/style/components/DataTable/DataTable.scss
index 74e74ee37..ee014936f 100644
--- a/packages/webapp/src/style/components/DataTable/DataTable.scss
+++ b/packages/webapp/src/style/components/DataTable/DataTable.scss
@@ -216,28 +216,6 @@
       .tr.is-context-menu-active .td {
         background: #f3fafc;
       }
-
-      .td.actions .#{$ns}-button {
-        background: #e6effb;
-        border: 0;
-        box-shadow: none;
-        padding: 5px 15px;
-        border-radius: 8px;
-
-        &:hover,
-        &:focus {
-          background-color: #cfdcee;
-        }
-
-        svg {
-          color: #425361;
-        }
-
-        .bp4-icon-more-h-16 {
-          margin-top: 2px;
-        }
-      }
-
       .tr.no-results {
         .td {
           flex-direction: column;
diff --git a/packages/webapp/src/style/pages/Preferences/Page.scss b/packages/webapp/src/style/pages/Preferences/Page.scss
index 49621f880..4d57fef57 100644
--- a/packages/webapp/src/style/pages/Preferences/Page.scss
+++ b/packages/webapp/src/style/pages/Preferences/Page.scss
@@ -14,6 +14,11 @@
   }
 }
 .preferences-page {
+  --x-color-tab-list-border: #e5e5e5;
+ 
+  .bp4-dark & {
+    --x-color-tab-list-border: rgba(255, 255, 255, 0.1);
+  }
   &__inside-content {
     display: flex;
     flex-direction: column;
@@ -36,7 +41,7 @@
     overflow: auto;
 
     .#{$ns}-tab-list {
-      border-bottom: 1px solid #e5e5e5;
+      border-bottom: 1px solid var(--x-color-tab-list-border);
       padding-left: 15px;
       padding-right: 15px;
       align-items: baseline;
diff --git a/packages/webapp/src/style/pages/Preferences/Topbar.scss b/packages/webapp/src/style/pages/Preferences/Topbar.scss
index 34bd9d7e6..aac95e793 100644
--- a/packages/webapp/src/style/pages/Preferences/Topbar.scss
+++ b/packages/webapp/src/style/pages/Preferences/Topbar.scss
@@ -55,6 +55,9 @@
     margin-right: 15px;
     border-right: 1px solid #e5e5e5;
 
+    .bp4-dark &{
+      border-right-color: rgba(255, 255, 255, 0.2);
+    }
     .bp4-button + .bp4-button {
       margin-left: 10px;
     }
diff --git a/packages/webapp/src/style/pages/Preferences/Users.scss b/packages/webapp/src/style/pages/Preferences/Users.scss
index 420ce0f48..ab62b92fb 100644
--- a/packages/webapp/src/style/pages/Preferences/Users.scss
+++ b/packages/webapp/src/style/pages/Preferences/Users.scss
@@ -1,6 +1,13 @@
 // Users/Roles List.
 // ---------------------------------
 .preferences-page__inside-content--users {
+  --color-avatar-background: #b7bfc6;
+  --color-avatar-text: #fff;
+
+  .bp4-dark & {
+    --color-avatar-background: rgba(255, 255, 255, 0.2);
+    --color-avatar-text: #fff;
+  }
   .bigcapital-datatable {
     .td {
       .avatar {
@@ -8,7 +15,7 @@
         height: 28px;
         width: 28px;
         text-align: center;
-        background: #b7bfc6;
+        background: var(--color-avatar-background);
         border-radius: 50%;
         line-height: 28px;
         color: #fff;