diff --git a/packages/webapp/src/components/Currencies/CurrencySelectList.tsx b/packages/webapp/src/components/Currencies/CurrencySelectList.tsx
index 7544ea51f..10c4bcb08 100644
--- a/packages/webapp/src/components/Currencies/CurrencySelectList.tsx
+++ b/packages/webapp/src/components/Currencies/CurrencySelectList.tsx
@@ -1,83 +1,28 @@
 // @ts-nocheck
-import React, { useCallback, useEffect, useState } from 'react';
+import React from 'react';
 import { FormattedMessage as T } from '@/components';
-import { CLASSES } from '@/constants/classes';
-import classNames from 'classnames';
-import { MenuItem, Button } from '@blueprintjs/core';
-import { Select } from '@blueprintjs/select';
+import { FSelect } from '../Forms';
 
+/**
+ * Currency select field.
+ * @returns {React.ReactNode}
+ */
 export function CurrencySelectList({
-  currenciesList,
-  selectedCurrencyCode,
-  defaultSelectText = <T id={'select_currency_code'} />,
-  onCurrencySelected,
-  popoverFill = false,
-  disabled = false,
+  // #ownProps
+  items,
+  name,
+  placeholder = <T id={'select_currency_code'} />,
+  ...props
 }) {
-  const [selectedCurrency, setSelectedCurrency] = useState(null);
-
-  // Filters currencies list.
-  const filterCurrencies = (query, currency, _index, exactMatch) => {
-    const normalizedTitle = currency.currency_code.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
-
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return (
-        `${currency.currency_code} ${normalizedTitle}`.indexOf(
-          normalizedQuery,
-        ) >= 0
-      );
-    }
-  };
-
-  const onCurrencySelect = useCallback((currency) => {
-    setSelectedCurrency({ ...currency });
-    onCurrencySelected && onCurrencySelected(currency);
-  });
-
-  const currencyCodeRenderer = useCallback((CurrencyCode, { handleClick }) => {
-    return (
-      <MenuItem
-        key={CurrencyCode.id}
-        text={CurrencyCode.currency_code}
-        onClick={handleClick}
-      />
-    );
-  }, []);
-
-  useEffect(() => {
-    if (typeof selectedCurrencyCode !== 'undefined') {
-      const currency = selectedCurrencyCode
-        ? currenciesList.find((a) => a.currency_code === selectedCurrencyCode)
-        : null;
-      setSelectedCurrency(currency);
-    }
-  }, [selectedCurrencyCode, currenciesList, setSelectedCurrency]);
-
   return (
-    <Select
-      items={currenciesList}
-      itemRenderer={currencyCodeRenderer}
-      itemPredicate={filterCurrencies}
-      onItemSelect={onCurrencySelect}
-      filterable={true}
-      popoverProps={{
-        minimal: true,
-        usePortal: !popoverFill,
-        inline: popoverFill,
-      }}
-      className={classNames('form-group--select-list', {
-        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
-      })}
-    >
-      <Button
-        disabled={disabled}
-        text={
-          selectedCurrency ? selectedCurrency.currency_code : defaultSelectText
-        }
-      />
-    </Select>
+    <FSelect
+      name={name}
+      items={items}
+      textAccessor={'currency_code'}
+      valueAccessor={'id'}
+      placeholder={placeholder}
+      popoverProps={{ minimal: true, usePortal: true, inline: false }}
+      {...props}
+    />
   );
 }
diff --git a/packages/webapp/src/components/ItemsCategories/CategoriesSelectList.tsx b/packages/webapp/src/components/ItemsCategories/CategoriesSelectList.tsx
deleted file mode 100644
index 65c58aa2a..000000000
--- a/packages/webapp/src/components/ItemsCategories/CategoriesSelectList.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-// @ts-nocheck
-import React, { useCallback } from 'react';
-import { FormattedMessage as T } from '@/components';
-import { ListSelect } from '@/components';
-import { MenuItem } from '@blueprintjs/core';
-import { saveInvoke } from '@/utils';
-import classNames from 'classnames';
-import { CLASSES } from '@/constants/classes';
-
-export function CategoriesSelectList({
-  categories,
-  selecetedCategoryId,
-  defaultSelectText = <T id={'select_category'} />,
-  onCategorySelected,
-  popoverFill = false,
-  className,
-  ...restProps
-}) {
-  // Filter Items Category
-  const filterItemCategory = (query, item, _index, exactMatch) => {
-    const normalizedTitle = item.name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return `${item.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
-    }
-  };
-
-  const handleItemCategorySelected = useCallback(
-    (ItemCategory) => saveInvoke(onCategorySelected, ItemCategory),
-    [onCategorySelected],
-  );
-
-  const categoryItem = useCallback(
-    (item, { handleClick }) => (
-      <MenuItem key={item.id} text={item.name} onClick={handleClick} />
-    ),
-    [],
-  );
-
-  return (
-    <ListSelect
-      items={categories}
-      selectedItemProp={'id'}
-      selectedItem={selecetedCategoryId}
-      textProp={'name'}
-      defaultText={defaultSelectText}
-      onItemSelect={handleItemCategorySelected}
-      itemPredicate={filterItemCategory}
-      itemRenderer={categoryItem}
-      popoverProps={{ minimal: true, usePortal: !popoverFill }}
-      className={classNames(
-        'form-group--select-list',
-        {
-          [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
-        },
-        className,
-      )}
-      {...restProps}
-    />
-  );
-}
diff --git a/packages/webapp/src/components/ItemsCategories/index.tsx b/packages/webapp/src/components/ItemsCategories/index.tsx
deleted file mode 100644
index 04bea9117..000000000
--- a/packages/webapp/src/components/ItemsCategories/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-// @ts-nocheck
-export * from './CategoriesSelectList';
diff --git a/packages/webapp/src/components/index.tsx b/packages/webapp/src/components/index.tsx
index 4a13add72..ce576ec06 100644
--- a/packages/webapp/src/components/index.tsx
+++ b/packages/webapp/src/components/index.tsx
@@ -49,7 +49,6 @@ export * from './FlexGrid';
 export * from './Menu';
 export * from './Icon';
 export * from './Items';
-export * from './ItemsCategories';
 export * from './Select';
 export * from './FormattedMessage';
 export * from './MaterialProgressBar';
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx
index f6104ae44..39466dd5c 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx
@@ -39,28 +39,18 @@ export default function CustomerFinancialPanel() {
       <Row>
         <Col xs={6}>
           {/*------------ Currency  -----------*/}
-          <FastField name={'currency_code'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'currency'} />}
-                className={classNames(
-                  'form-group--select-list',
-                  'form-group--balance-currency',
-                  Classes.FILL,
-                )}
-                inline={true}
-              >
-                <CurrencySelectList
-                  currenciesList={currencies}
-                  selectedCurrencyCode={value}
-                  onCurrencySelected={(currency) => {
-                    form.setFieldValue('currency_code', currency.currency_code);
-                  }}
-                  disabled={customerId}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'currency_code'}
+            label={<T id={'currency'} />}
+            fastField
+            inline
+          >
+            <CurrencySelectList
+              name="currency_code"
+              items={currencies}
+              disabled={customerId}
+            />
+          </FFormGroup>
 
           {/*------------ Opening balance  -----------*/}
           <CustomerOpeningBalanceField />
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx
index 80c8c0feb..2ac41df3f 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx
@@ -124,10 +124,15 @@ function CustomerFormFormik({
 }
 
 export const CustomerFormHeaderPrimary = styled.div`
+  --x-border: #e4e4e4;
+
+  .bp4-dark & {
+    --x-border: var(--color-dark-gray3);
+  }
   padding: 10px 0 0;
   margin: 0 0 20px;
   overflow: hidden;
-  border-bottom: 1px solid #e4e4e4;
+  border-bottom: 1px solid var(--x-border);
   max-width: 1000px;
 `;
 
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.tsx
index c9c56549e..9c0616664 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.tsx
@@ -39,27 +39,17 @@ export default function VendorFinanicalPanelTab() {
       <Row>
         <Col xs={6}>
           {/*------------ Currency  -----------*/}
-          <FastField name={'currency_code'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'currency'} />}
-                className={classNames(
-                  'form-group--select-list',
-                  'form-group--balance-currency',
-                  Classes.FILL,
-                )}
-                inline={true}
-              >
-                <CurrencySelectList
-                  currenciesList={currencies}
-                  selectedCurrencyCode={value}
-                  onCurrencySelected={(currency) => {
-                    form.setFieldValue('currency_code', currency.currency_code);
-                  }}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'currency_code'}
+            label={<T id={'currency'} />}
+            fastField
+            inline
+          >
+            <CurrencySelectList
+              name="currency_code"
+              items={currencies}
+            />
+          </FFormGroup>
 
           {/*------------ Opening balance -----------*/}
           <VendorOpeningBalanceField />
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx
index 4a3c92bc0..99f4523e5 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx
@@ -138,10 +138,15 @@ function VendorFormFormik({
 }
 
 export const VendorFormHeaderPrimary = styled.div`
+  --x-color-border: #e4e4e4;
+
+  .bp4-dark & {
+    --x-color-border: var(--color-dark-gray3);
+  }
   padding: 10px 0 0;
   margin: 0 0 20px;
   overflow: hidden;
-  border-bottom: 1px solid #e4e4e4;
+  border-bottom: 1px solid var(--x-color-border);
   max-width: 1000px;
 `;
 
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx
index 86d7a1f07..dcdac551e 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx
@@ -58,6 +58,7 @@ function VendorFormPrimarySection() {
       >
         <FInputGroup name={'company_name'} />
       </FFormGroup>
+
       {/*----------- Display Name -----------*/}
       <FFormGroup
         name={'display_name'}
@@ -68,8 +69,8 @@ function VendorFormPrimarySection() {
             <Hint />
           </>
         }
-        className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
-        inline={true}
+        fastField
+        inline
       >
         <DisplayNameList
           name={'display_name'}
diff --git a/packages/webapp/src/style/_variables.scss b/packages/webapp/src/style/_variables.scss
index 475e2a210..17ffa9d3a 100644
--- a/packages/webapp/src/style/_variables.scss
+++ b/packages/webapp/src/style/_variables.scss
@@ -110,6 +110,9 @@ $ns: bp4;
   --color-datatable-empty-status-title: #2c3a5d;
   --color-datatable-empty-status-description: #1f3255;
 
+  --color-dashboard-card-background: #fff;
+  --color-dashboard-card-border: #d2dce2;
+
   // Sidebar
   --color-sidebar-toggle: #6b8193;
   --color-sidebar-background: #01115e;
@@ -401,6 +404,9 @@ body.bp4-dark  {
   --color-datatable-empty-status-title: var(--color-light-gray4);
   --color-datatable-empty-status-description: var(--color-light-gray5);
 
+  --color-dashboard-card-background: var(--color-dark-gray1);
+  --color-dashboard-card-border: var(--color-dark-gray3);
+
   // Sidebar
   --color-sidebar-toggle: rgba(255, 255, 255, 0.5);
   --color-sidebar-background: var(--color-dark-gray3);
diff --git a/packages/webapp/src/style/components/PageForm.scss b/packages/webapp/src/style/components/PageForm.scss
index 944b3dfbd..d15ac6fc6 100644
--- a/packages/webapp/src/style/components/PageForm.scss
+++ b/packages/webapp/src/style/components/PageForm.scss
@@ -5,25 +5,23 @@
 .page-form {
   --color-page-form-header-background: #fff;
   --color-page-form-header-border: #d2dce2;
+  
+  --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);
 
-  :global(.bp4-dark) & {    
+  .bp4-dark & {    
     --color-page-form-header-background: var(--color-dark-gray1);
     --color-page-form-header-border: rgba(255, 255, 255, 0.1);
+    
+    --color-page-form-floating-actions-background: var(--color-dark-gray1);
+    --color-page-form-floating-actions-border: var(--color-dark-gray4);
+    --color-page-form-floating-actions-shadow: vargba(0, 0, 0, 0.05);
   }  
   $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);
-
-    :global(.bp4-dark) & {
-      --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%;
diff --git a/packages/webapp/src/style/pages/Customers/Form.scss b/packages/webapp/src/style/pages/Customers/Form.scss
index d649bcbad..5048aa1b5 100644
--- a/packages/webapp/src/style/pages/Customers/Form.scss
+++ b/packages/webapp/src/style/pages/Customers/Form.scss
@@ -4,6 +4,12 @@
   $self: '.page-form';
   padding: 20px;
 
+  --x-color-tabs-border: #f0f0f0;
+
+  .bp4-dark & {
+    --x-color-tabs-border: var(--color-dark-gray3);
+  }
+
   #{$self}__header {
     padding: 0;
   }
@@ -136,7 +142,7 @@
         bottom: 0;
         width: 100%;
         height: 2px;
-        background: #f0f0f0;
+        background: var(--x-color-tabs-border);
       }
 
       > *:not(:last-child) {
diff --git a/packages/webapp/src/style/pages/Dashboard/Dashboard.scss b/packages/webapp/src/style/pages/Dashboard/Dashboard.scss
index 7116a4648..2673aa662 100644
--- a/packages/webapp/src/style/pages/Dashboard/Dashboard.scss
+++ b/packages/webapp/src/style/pages/Dashboard/Dashboard.scss
@@ -498,8 +498,8 @@ $dashboard-views-bar-height: 44px;
   }
 
   &__card {
-    border: 1px solid #d2dce2;
-    background: #fff;
+    border: 1px solid var(--color-dashboard-card-border);
+    background: var(--color-dashboard-card-background);
 
     &--page {
       flex: 1 0 0;
diff --git a/packages/webapp/src/style/pages/Items/Form.scss b/packages/webapp/src/style/pages/Items/Form.scss
index 590c9b82c..c1a559070 100644
--- a/packages/webapp/src/style/pages/Items/Form.scss
+++ b/packages/webapp/src/style/pages/Items/Form.scss
@@ -3,6 +3,14 @@
   $self: '.page-form';
   padding: 20px;
 
+  --x-header-border: #eaeaea;
+  --x-section-border: #eaeaea;
+  
+  .bp4-dark & {
+    --x-header-border: var(--color-dark-gray3);
+    --x-section-border: var(--color-dark-gray3);
+  }
+  
   #{$self}__header {
     padding: 0;
   }
@@ -10,7 +18,7 @@
     overflow: hidden;
     padding-top: 5px;
     margin-bottom: 20px;
-    border-bottom: 1px solid #eaeaea;
+    border-bottom: 1px solid var(--x-header-border);
     padding-bottom: 5px;
     max-width: 1000px;
   }
@@ -66,7 +74,7 @@
     }
 
     &--selling-cost {
-      border-bottom: 1px solid #eaeaea;
+      border-bottom: 1px solid var(--x-section-border);
       margin-bottom: 1.25rem;
       padding-bottom: 0.25rem;
     }
diff --git a/packages/webapp/src/style/pages/Vendors/Form.scss b/packages/webapp/src/style/pages/Vendors/Form.scss
index d8dce5c68..193c8e059 100644
--- a/packages/webapp/src/style/pages/Vendors/Form.scss
+++ b/packages/webapp/src/style/pages/Vendors/Form.scss
@@ -4,6 +4,16 @@
   $self: '.page-form';
   padding: 20px;
 
+  --x-border: #e4e4e4;
+  --x-color-tabs-border: #f0f0f0;
+  --x-color-tabs-tab-item-text: #888;
+
+  .bp4-dark & {
+    --x-border: var(--color-dark-gray3);
+    --x-color-tabs-border: var(--color-dark-gray3);
+    --x-color-tabs-tab-item-text: var(--color-light-gray1);
+  }
+
   #{$self}__header {
     padding: 0;
   }
@@ -11,7 +21,7 @@
     padding: 10px 0 0;
     margin: 0 0 20px;
     overflow: hidden;
-    border-bottom: 1px solid #e4e4e4;
+    border-bottom: 1px solid var(--x-border);
     max-width: 1000px;
   }
 
@@ -136,7 +146,7 @@
         bottom: 0;
         width: 100%;
         height: 2px;
-        background: #f0f0f0;
+        background: var(--x-color-tabs-border);
       }
 
       > *:not(:last-child) {
@@ -145,7 +155,7 @@
 
       &.bp4-large > .bp4-tab {
         font-size: 15px;
-        color: #555;
+        color: var(--x-color-tabs-tab-item-text);
 
         &[aria-selected='true'],
         &:not([aria-disabled='true']):hover {
@@ -154,9 +164,4 @@
       }
     }
   }
-
-  #{$self}__floating-actions {
-    // margin-left: -40px;
-    // margin-right: -40px;
-  }
 }